Skip to content

H
huaxin-rq
Commit 4a590d7c authored by zhangjianqian's avatar zhangjianqian
Browse files
Options

调压箱阀门井设备上图

parent 4174c735
Hide whitespace changes
Inline Side-by-side
Showing with 333 additions and 4 deletions
huaxin-web/src/views/bigWindow/Ind3/Ind.vue
View file @ 4a590d7c
......@@ -22,6 +22,9 @@ import Left from "./components/Left.vue";
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 { stationInfoList } from "@/api/baseinfo/stationInfo.js";
import {
deviceType,
deviceIcon,
......@@ -34,6 +37,7 @@ export default {
Left,
Right,
Bottom,
DeviceInfo
},
data() {
return {};
......@@ -50,7 +54,7 @@ export default {
this.gaoMap = new EditorMap(
"gao-map-index",
{
center: [118.09, 39.48],
center: [118.071425,39.780639],
// mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 10.5,
......@@ -59,10 +63,73 @@ export default {
},
this
);
this.initMapDeviceInfo();
},
change(arr1,arr2){
console.log(arr1,arr2)
//设备上图
initMapDeviceInfo() {
//调压箱
this.getDeviceInfo();
//场站
this.getStationInfo();
//管道
},
//调压箱
getDeviceInfo() {
deviceInfoList().then((res) => {
if (res.code && res.data) {
console.log(res.data)
res.data.forEach((item) => {
item.iconType = item.deviceType;
this.gaoMap.addDevice(item, DeviceInfo, false);
});
}
});
},
//场站
getStationInfo() {
stationInfoList().then((res) => {
if (res.code && res.data) {
res.data.forEach((item) => {
item.iconType = deviceType.station;
this.gaoMap.addDevice(item, StationInfo, false);
});
}
});
},
showMarker(val) {
let markerList = this.gaoMap.allDevice[val];
if (markerList) {
markerList.forEach((marker) => {
marker.show();
});
}
},
hideMarker(val) {
let markerList = this.gaoMap.allDevice[val];
if (markerList) {
markerList.forEach((marker) => {
marker.hide();
});
}
},
// sel1(index, item) {
// console.log(index, "=====fdsfdsf=====", item);
// const ind = this.selarr.indexOf(item.val);
// if (ind >= 0) {
// this.selarr.splice(ind, 1);
// this.hideMarker(item.val);
// } else {
// this.selarr.push(item.val);
// this.showMarker(item.val);
// }
// },
change(ind,val){
if(ind>=0){
this.hideMarker(val-2);
}else {
this.showMarker(val-2);
}
}
},
};
......
huaxin-web/src/views/bigWindow/Ind3/components/Bottom.vue
View file @ 4a590d7c
......@@ -89,7 +89,7 @@ export default {
} else {
this.activeArr2.push(val);
}
this.$emit("change", this.activeArr1, this.activeArr2);
this.$emit("change", ind, val);
},
},
};
......
huaxin-web/src/views/bigWindow/Ind3/components/DeviceInfo.vue 0 → 100644
View file @ 4a590d7c
<template>
<div class="devicea-wrapper">
<div class="title">
{{ deviceData.deviceName }}
</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.deviceName }}</div>
</div>
<div class="group">
<div class="left last">所在地址：</div>
<div
:title="deviceData.deviceAddr"
class="right last zzz"
>
{{ deviceData.deviceAddr || "-" }}
</div>
</div>
<div class="group">
<div class="left">联系人：</div>
<div class="right zzz">{{ deviceData.linkman }}</div>
</div>
<div class="group">
<div class="left">安装时间：</div>
<div class="right zzz">{{ deviceData.installationTime }}</div>
</div>
</div>
<div class="top-center">
<div class="group">
<div class="left">设备编号：</div>
<div class="right zzz">
{{ deviceData.deviceCode }}
</div>
</div>
<div class="group">
<div class="left">设备型号：</div>
<div class="right zzz">{{ deviceData.deviceModel }}</div>
</div>
<div class="group">
<div class="left">电话：</div>
<div class="right zzz">{{ deviceData.phone }}</div>
</div>
</div>
<div class="top-right">
<div class="left last">照片：</div>
<el-image
v-if="deviceData.iconUrl"
style="width: 80px; height: 80px"
:src="deviceData.iconUrl"
:preview-src-list="[deviceData.iconUrl ]"
: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",
methods:{
close() {
this.mapClass.infowindowClose();
},
}
}
</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.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: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