Skip to content

H
huaxin-rq
Commit 85b6074b authored by zhangjianqian's avatar zhangjianqian
Browse files
Options

更改大屏坐标上图改为海量点模式

parent 103c9d95
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1070 additions and 10 deletions
huaxin-web/src/utils/mapClass/deviceIconTypeConfig.js
View file @ 85b6074b
......@@ -11,7 +11,8 @@ export const deviceIcon = {
1: require("@/assets/indexImg/mapTyx.png"),
2: require("@/assets/indexImg/mapFmj.png"),
3: require("@/assets/indexImg/mapCz.png"),
4: require("@/assets/indexImg/monitorDeviceAlarm.gif")
4: require("@/assets/indexImg/monitorDeviceAlarm.gif"),
5: require("@/assets/indexImg/gongye.png")
}
export const pipeColor = {
......
huaxin-web/src/utils/mapClass/newMap.js
View file @ 85b6074b
This diff is collapsed.
huaxin-web/src/views/bigWindow/Ind3/Ind.vue
View file @ 85b6074b
......@@ -23,8 +23,11 @@ import Right from "./components/Right.vue";
import Bottom from "./components/Bottom.vue";
import { EditorMap } from "@/utils/mapClass/newMap";
import { deviceInfoList } from "@/api/baseinfo/deviceInfo";
import DeviceInfo from "./components/DeviceInfo";
import DeviceInfo from "./components/DeviceInfo"
import StationInfo from ".//components/StationInfo";
import GyInfo from ".//components/GyInfo";
import { stationInfoList } from "@/api/baseinfo/stationInfo.js";
import { listIndustry} from "@/api/baseinfo/industry";
import {
deviceType,
deviceIcon,
......@@ -37,7 +40,9 @@ export default {
Left,
Right,
Bottom,
DeviceInfo
DeviceInfo,
StationInfo,
GyInfo
},
data() {
return {};
......@@ -71,18 +76,35 @@ export default {
this.getDeviceInfo();
//场站
this.getStationInfo();
//管道
//工业用户
this.getList();
},
/** 查询工业用户列表 */
getList() {
listIndustry({pageNum:1,pageSize:1000}).then(response => {
//this.industryList = response.rows;
console.log(response.rows)
this.gaoMap.labelsLayerMarksDetectorUserList(response.rows, GyInfo, false);
});
},
//调压箱
getDeviceInfo() {
deviceInfoList().then((res) => {
if (res.code && res.data) {
console.log(res.data)
let typeA = [];
let typeB = [];
res.data.forEach((item) => {
item.iconType = item.deviceType;
this.gaoMap.addDevice(item, DeviceInfo, false);
});
if (item.deviceType === '1') {
typeA.push(item);
} else if (item.deviceType === '2') {
typeB.push(item);
}
//this.gaoMap.addDevice(item, DeviceInfo, false);
});
this.gaoMap.labelsLayerMarksFmjGoMap(typeB, DeviceInfo, false);
this.gaoMap.labelsLayerMarksTysGoMap(typeA, DeviceInfo, false);
}
});
},
......@@ -90,6 +112,7 @@ export default {
getStationInfo() {
stationInfoList().then((res) => {
if (res.code && res.data) {
console.log(deviceType.station)
res.data.forEach((item) => {
item.iconType = deviceType.station;
this.gaoMap.addDevice(item, StationInfo, false);
......@@ -125,10 +148,28 @@ export default {
// }
// },
change(ind,val){
console.log(ind,val)
if(ind>=0){
this.hideMarker(val-2);
if(val==3){
this.gaoMap.tyxlabelsLayer.hide();
}else if(val==4){
this.gaoMap.fmjlabelLayer.hide();
}else if(val==5){
this.hideMarker(item.val-2);
}else {
this.gaoMap.businessDetectorUserlabelsLayer.hide();
}
}else {
this.showMarker(val-2);
if(val==3){
this.gaoMap.tyxlabelsLayer.show();
}else if(val==4){
this.gaoMap.fmjlabelLayer.show();
}else if(val==5){
//this.map.czlabelLayer.show();
this.showMarker(item.val-2);
}else {
this.gaoMap.businessDetectorUserlabelsLayer.show();
}
}
}
},
......
huaxin-web/src/views/bigWindow/Ind3/components/GyInfo.vue 0 → 100644
View file @ 85b6074b
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.company }}
</div>
<div class="close" @click="close">
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
</div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
<div>
<div class="top flex">
<div class="top-left">
<div class="group">
<div class="left">单位名称：</div>
<div class="right zzz">{{ deviceData.company }}</div>
</div>
<div class="group">
<div class="left last">联系人：</div>
<div
:title="deviceData.stationDetail"
class="right last zzz"
>
{{ deviceData.username }}
</div>
</div>
<div class="group">
<div class="left">流量计品牌：</div>
<div class="right zzz">{{ meterCompanyFormatte(deviceData) }}</div>
</div>
<div class="group">
<div class="left">营业网点：</div>
<div class="right zzz">{{ getbranch(deviceData) }}</div>
</div>
<!--<div class="group">
<div class="left">最大储气量：</div>
<div class="right zzz">{{ deviceData.bigStorage }}(m³/t)</div>
</div>-->
<div class="group">
<div class="left">通气日期：</div>
<div class="right zzz">{{ deviceData.starttime}}</div>
</div>
<div class="group">
<div class="left">详细地址：</div>
<div
:title="deviceData.address"
class="right zzz"
>
{{ deviceData.address }}
</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">生产品种：</div>
<div class="right zzz">
{{ deviceData.contract }}
</div>
</div>
<div class="group">
<div class="left">联系电话：</div>
<div class="right zzz" :title="deviceData.phone">{{ deviceData.phone }}</div>
</div>
<div class="group">
<div class="left">流量计型号：</div>
<div class="right zzz">{{ gasSourceFormatte(deviceData.type) }}</div>
</div>
<div class="group">
<div class="left">安检类型：</div>
<div class="right zzz" >
<span v-if="deviceData.taskType == '1'" title="华鑫季度一检">华鑫季度一检</span>
<span v-else-if="deviceData.taskType == '2'" title="鸿海季度一检"> 鸿海季度一检</span>
<span v-else>-</span>
</div>
</div>
<div class="group">
<div class="left">开通状态：</div>
<div class="right zzz">{{ statusFormatte(deviceData) }}</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 80px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress ]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "device-info",
data(){
return{
meterCompany: [],
branchOptions: [],
statusOptions: []
}
},
created(){
this.getMeterCompany();
this.getGasSource();
this.getStatusType();
this.getDangerousType();
},
methods:{
close() {
this.mapClass.infowindowClose();
},
//流量计品牌
getMeterCompany(){
this.getDicts("t_business_factory_meter_type").then((response) => {
this.meterCompany = response.data;
});
},
//气源中类
getGasSource(){
this.getDicts("t_gas_source").then((response) => {
this.gasSource = response.data;
});
},
//营业网点
getDangerousType(){
this.getDicts("t_branch").then((response) => {
this.branchOptions = response.data;
});
},
getStatusType(){
this.getDicts("t_user_status").then((response) => {
this.statusOptions = response.data;
});
},
//品牌
meterCompanyFormatte(row){
return this.selectDictLabel(
this.meterCompany,
row.usernum
);
},
//流量计型号
gasSourceFormatte(num){
if(num==1){
return "DN25";
}else if(num==2){
return "DN50";
}else if(num==3){
return "DN80";
}else if(num==4){
return "DN100";
}else if(num==5){
return "DN150";
}else if(num==5){
return "DN200";
}
return "";
},
getbranch(row){
return this.selectDictLabel(
this.branchOptions,
row.branch
);
},
//危险源级别
statusFormatte(row){
return this.selectDictLabel(
this.statusOptions,
row.status
);
},
}
}
</script>
<style scoped lang="scss">
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
}
.close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
}
}
}
.top-center {
flex: 1.2;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:0.9;
}
}
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
.foot {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/box-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
.thead,
.tbody {
div {
flex: 1;
text-align: left;
box-sizing: border-box;
text-align: center;
border: 1px solid #1b365d;
}
}
.tbody {
border-top: none;
}
}
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/boxbtn-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
</style>
huaxin-web/src/views/bigWindow/Ind3/components/StationInfo.vue 0 → 100644
View file @ 85b6074b
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.siteStationName }}
</div>
<div class="close" @click="close">
<i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
</div>
<p style="background-image: linear-gradient(to right, #5dfefe, #071738); width:100%;height:1px;"></p>
<div>
<div class="top flex">
<div class="top-left">
<div class="group">
<div class="left">场站名称：</div>
<div class="right zzz">{{ deviceData.siteStationName }}</div>
</div>
<div class="group">
<div class="left last">厂站用途：</div>
<div
:title="deviceData.stationDetail"
class="right last zzz"
>
{{ deviceData.stationDetail }}
</div>
</div>
<div class="group">
<div class="left">启动时间：</div>
<div class="right zzz">{{ deviceData.enableTiem }}</div>
</div>
<div class="group">
<div class="left">负责人电话：</div>
<div class="right zzz">{{ deviceData.phone }}</div>
</div>
<!--<div class="group">
<div class="left">最大储气量：</div>
<div class="right zzz">{{ deviceData.bigStorage }}(m³/t)</div>
</div>-->
<div class="group">
<div class="left">危险源级别：</div>
<div class="right zzz">{{ dangerousLevelFormatte(deviceData) }}</div>
</div>
<div class="group">
<div class="left">储罐容积：</div>
<div class="right zzz">{{ deviceData.volume }}</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">场站类型：</div>
<div class="right zzz">
{{ siteStationFormatte(deviceData) }}
</div>
</div>
<div class="group">
<div class="left">详细地址：</div>
<div
:title="deviceData.address"
class="right zzz"
>
{{ deviceData.address }}
</div>
</div>
<div class="group">
<div class="left">负责人：</div>
<div class="right zzz">{{ deviceData.contacts }}</div>
</div>
<div class="group">
<div class="left">气源种类：</div>
<div class="right zzz">{{ gasSourceFormatte(deviceData) }}</div>
</div>
<div class="group">
<div class="left">最大供气量：</div>
<div class="right zzz">{{ deviceData.bigProvide }}(m³/d)</div>
</div>
<div class="group">
<div class="left">危险源名称：</div>
<div class="right zzz">{{ deviceData.dangerousName }}</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.pictureAddress"
style="width: 80px; height: 80px"
:src="deviceData.pictureAddress"
:preview-src-list="[deviceData.pictureAddress ]"
:z-index="999999"
>
</el-image>
<div class="imgtext" v-else>暂无图片</div>
</div>
</div>
<!--<div class="foot">
<div class="thead flex" v-if="list.length > 0">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
&lt;!&ndash; <div>历史报警</div>
<div>已处理报警</div> &ndash;&gt;
<div class="last">报警中</div>
</div>
<template v-if="list.length > 0">
<div
class="tbody flex"
v-for="deviceData in list"
:key="deviceData.inAlarm + Math.random()"
>
<div v-unValue class="first zzz">
{{ typeList[deviceData.dataType] }}
</div>
<div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
<div v-unValue class="">
{{ deviceData.onlineEquipment }}
</div>
<div v-unValue class="">
{{ deviceData.offlineEquipment }}
</div>
&lt;!&ndash; <div v-unValue class="">
{{ deviceData.historicalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.alarmProcessed }}
</div> &ndash;&gt;
<div v-unValue class="last">
{{ deviceData.inAlarm }}
</div>
</div>
</template>
</div>-->
</div>
</div>
</template>
<script>
export default {
name: "device-info",
data(){
return{
stationType: [],
gasSource: [],
dangerousLevel: []
}
},
created(){
this.getStationType();
this.getGasSource();
this.getDangerousType();
},
methods:{
close() {
this.mapClass.infowindowClose();
},
//场站类型
getStationType(){
this.getDicts("t_station_type").then((response) => {
this.stationType = response.data;
});
},
//气源中类
getGasSource(){
this.getDicts("t_gas_source").then((response) => {
this.gasSource = response.data;
});
},
//危险源级别
getDangerousType(){
this.getDicts("t_dangerous_level").then((response) => {
this.dangerousLevel = response.data;
});
},
//场站类型格式化
siteStationFormatte(row){
return this.selectDictLabel(
this.stationType,
row.siteStationType
);
},
//气体种类
gasSourceFormatte(row){
return this.selectDictLabel(
this.gasSource,
row.gasSource
);
},
//危险源级别
dangerousLevelFormatte(row){
return this.selectDictLabel(
this.dangerousLevel,
row.dangerousLevel
);
},
}
}
</script>
<style scoped lang="scss">
.devicea-wrapper {
box-shadow: 0px 0px 10px #54e0ef inset;
background-color: #071738;
padding: 10px;
position: relative;
width: 670px;
border-radius: 7px;
.title {
// padding-top: 10px;
// padding-left: 10px;
font-size: 14px;
line-height: 14px;
color: #ffffff;
}
.close {
position: absolute;
right: 10px;
top: 5px;
cursor: pointer;
}
.top {
margin-top: 10px;
margin-bottom: 10px;
box-sizing: border-box;
.top-left {
flex: 1.8;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:2;
}
}
}
.top-center {
flex: 1.2;
.group {
height: 30px;
flex: 1;
display: flex;
justify-content: space-between;
box-sizing: border-box;
div {
flex: 1;
box-sizing: border-box;
font-size: 14px;
color: #ffffff;
line-height: 30px;
padding: 0 5px;
&.last {
border-bottom: none;
}
}
.left {
text-align: right;
}
.right {
flex:0.9;
}
}
}
.top-right {
flex: 1;
display: flex;
justify-content: center;
div {
width: 50px;
font-size: 14px;
color: #ffffff;
&.last {
border-bottom: none;
}
}
.imgtext {
color: #ffffff;
font-size: 30px;
}
}
}
.foot {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/box-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 1px;
.thead,
.tbody {
div {
flex: 1;
text-align: left;
box-sizing: border-box;
text-align: center;
border: 1px solid #1b365d;
}
}
.tbody {
border-top: none;
}
}
.btn {
position: relative;
margin-top: 10px;
div {
font-size: 14px;
color: #ffffff;
background: url(~@/assets/firstimage/boxbtn-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 7px 15px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment