Commit 8ac366c3 authored by 纪泽龙's avatar 纪泽龙

松原项目,优化了每10秒就缩放的问题,新增阀门井跟调压箱内的工业报警器表格

parent 94583016
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="wrapper"> <div class="wrapper">
<span class="dot-left"></span> <span class="dot-left"></span>
<div class="top display-default"> <div class="top display-default">
<div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div> <div class="left text ddd" :title="data.deviceName">
{{ data.deviceName }}
</div>
<div class="right text"> <div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" /> <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div> </div>
...@@ -15,7 +17,9 @@ ...@@ -15,7 +17,9 @@
设备类型:<span>{{ title ? title : "-" }}</span> 设备类型:<span>{{ title ? title : "-" }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
设备型号:<span>{{ data.deviceModel ? data.deviceModel : "-" }}</span> 设备型号:<span>{{
data.deviceModel ? data.deviceModel : "-"
}}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
所属管道:<span>{{ data.pipeName ? data.pipeName : "-" }}</span> 所属管道:<span>{{ data.pipeName ? data.pipeName : "-" }}</span>
...@@ -48,11 +52,11 @@ ...@@ -48,11 +52,11 @@
<div> <div>
<span>设备所在地址:</span> <span>设备所在地址:</span>
<span>{{ data.pipeAddr ? data.pipeAddr : "-"}}</span> <span>{{ data.pipeAddr ? data.pipeAddr : "-" }}</span>
</div> </div>
<div> <div>
<span>备注信息:</span> <span>备注信息:</span>
<span>{{ data.remarks ? data.remarks : "-"}} </span> <span>{{ data.remarks ? data.remarks : "-" }} </span>
</div> </div>
</div> </div>
</div> </div>
...@@ -63,12 +67,52 @@ ...@@ -63,12 +67,52 @@
<div>报警状态:<span>报警</span></div> <div>报警状态:<span>报警</span></div>
<div>详细信息:<span>管线两端设备压差较大,管线可能泄漏</span></div> <div>详细信息:<span>管线两端设备压差较大,管线可能泄漏</span></div>
</div> --> </div> -->
<template v-if="data.deviceType ==3 || data.deviceType==4">
<div v-if="data.deviceType==3" class="windowwarn-content" style=" <template v-if="data.deviceType == 1 || data.deviceType == 2">
<div class="windowwarn-content tab" v-if="list.length > 0">
<div class="foot">
<div class="thead flex">
<div class="first">设备名称</div>
<div>设备状态</div>
<div>设备浓度</div>
<div>报警状态</div>
</div>
<template v-if="list.length > 0">
<div
class="tbody flex"
v-for="deviceData in list"
:key="deviceData.a"
>
<div class="first zzz">
{{ deviceData.a || "-" }}
</div>
<div class="">
{{ deviceData.b || "-" }}
</div>
<div class="">
{{ deviceData.c || "-" }}
</div>
<div class="">
{{ deviceData.d || "-" }}
</div>
</div>
</template>
</div>
</div>
<div v-else class="windowwarn-content tab nomal">暂无设备</div>
</template>
<!-- 流量计与压力表 -->
<template v-if="data.deviceType == 3 || data.deviceType == 4">
<div
v-if="data.deviceType == 3"
class="windowwarn-content"
style="
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
height: 150px;padding-bottom: 2px; height: 150px;
"> padding-bottom: 2px;
"
>
<el-col :span="12"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
标况累积量:<span class="standardConditionAccumulation">-</span> 标况累积量:<span class="standardConditionAccumulation">-</span>
...@@ -100,9 +144,7 @@ ...@@ -100,9 +144,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">压力:<span class="pressure">-</span></div>
压力:<span class="pressure">-</span>
</div>
</el-col> </el-col>
<el-col :span="15"> <el-col :span="15">
<div class="windowwarn"> <div class="windowwarn">
...@@ -110,15 +152,18 @@ ...@@ -110,15 +152,18 @@
</div> </div>
</el-col> </el-col>
</div> </div>
<div v-if="data.deviceType==4" class="windowwarn-content" style=" <div
v-if="data.deviceType == 4"
class="windowwarn-content"
style="
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
height: 70px;padding-bottom: 2px; height: 70px;
"> padding-bottom: 2px;
"
>
<el-col :span="24"> <el-col :span="24">
<div class="windowwarn"> <div class="windowwarn">压力:<span class="pressure">-</span></div>
压力:<span class="pressure">-</span>
</div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="windowwarn"> <div class="windowwarn">
...@@ -128,7 +173,6 @@ ...@@ -128,7 +173,6 @@
</div> </div>
</template> </template>
<div class="btn"> <div class="btn">
<span @mousedown.stop="deviceMore"> <span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button> <el-button class="elbtn" type="primary">设备详情</el-button>
...@@ -140,11 +184,11 @@ ...@@ -140,11 +184,11 @@
</template> </template>
<script> <script>
let closeInfoWindowTimer = null; let closeInfoWindowTimer = null;
import { getWindowData } from "@/api/dataMonitoring/reportData"; import { getWindowData } from "@/api/dataMonitoring/reportData";
import moment from "moment"; import moment from "moment";
//line移入时的的infowindow //line移入时的的infowindow
export default { export default {
props: { props: {
obj: { typs: Object }, obj: { typs: Object },
title: "", title: "",
...@@ -155,27 +199,30 @@ ...@@ -155,27 +199,30 @@
return { return {
deviceId: "", deviceId: "",
alarm: {}, alarm: {},
} list: [
{ a: "我我我我我我我", b: 2, c: 3, d: 4 },
{ a: "我我我我我我我", b: 2, c: 3, d: 4 },
{ a: "我我我我我我我", b: 2, c: 3, d: 4 },
],
};
}, },
mounted() { mounted() {
clearInterval(this.data.class.view.deviceTimer); clearInterval(this.data.class.view.deviceTimer);
if (this.data.deviceType == 3 || this.data.deviceType == 4) { if (this.data.deviceType == 3 || this.data.deviceType == 4) {
this.getDataid(); this.getDataid();
this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000); this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000);
closeInfoWindowTimer = setInterval(() => { closeInfoWindowTimer = setInterval(() => {
const dom= document.getElementsByClassName("amap-info")[0]; const dom = document.getElementsByClassName("amap-info")[0];
const disPlay =dom?.style.display; const disPlay = dom?.style.display;
if (!dom || (dom && disPlay == "none")) { if (!dom || (dom && disPlay == "none")) {
clearInterval(this.data.class.view.deviceTimer) clearInterval(this.data.class.view.deviceTimer);
clearInterval(closeInfoWindowTimer) clearInterval(closeInfoWindowTimer);
console.log("请求关闭") console.log("请求关闭");
} }
}, 1000) }, 1000);
} }
}, },
methods: { methods: {
moment, moment,
...@@ -190,58 +237,112 @@ ...@@ -190,58 +237,112 @@
}); });
}, },
getDataid() { getDataid() {
getWindowData(this.data.deviceId).then(response => { getWindowData(this.data.deviceId).then((response) => {
this.changeValue(response.data) this.changeValue(response.data);
});
})
}, },
changeValue(data) { changeValue(data) {
const keyArr = Object.keys(data); const keyArr = Object.keys(data);
keyArr.forEach((item) => { keyArr.forEach((item) => {
const dw = this.danwei(item) const dw = this.danwei(item);
const dom = document.getElementsByClassName(item)[0]; const dom = document.getElementsByClassName(item)[0];
if (dom) { if (dom) {
dom.innerHTML = data[item] +"&nbsp"+ dw; dom.innerHTML = data[item] + "&nbsp" + dw;
} }
}) });
}, },
danwei(item) { danwei(item) {
let dw=''; let dw = "";
if(item =='standardConditionAccumulation' || item == 'workingConditionAccumulation' || item == 'residualQuantity'){ if (
dw="m³" item == "standardConditionAccumulation" ||
}else if(item =='standardConditionFlow'|| item == 'workingConditionFlow'){ item == "workingConditionAccumulation" ||
dw="m³/h" item == "residualQuantity"
}else if(item =='temperature'){ ) {
dw="℃" dw = "m³";
}else if(item == 'pressure'){ } else if (
dw="KPa" item == "standardConditionFlow" ||
}else if(item == 'reportTime'){ item == "workingConditionFlow"
dw=" " ) {
dw = "m³/h";
} else if (item == "temperature") {
dw = "℃";
} else if (item == "pressure") {
dw = "KPa";
} else if (item == "reportTime") {
dw = " ";
} }
return dw; return dw;
} , },
close() { close() {
this.map.clearInfoWindow(); this.map.clearInfoWindow();
this.data.class.view.domAllShow() this.data.class.view.domAllShow();
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.windowwarn-content { .windowwarn-content {
&.tab {
border-bottom: 1px solid #e2e2e2;
padding: 10px 5px 2px 5px;
max-height: 150px;
padding-bottom: 5px;
overflow-y: auto;
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.foot {
color: #ffffff;
.thead,
.tbody {
display: flex;
border: 1px solid #cccccc;
border-right: none;
div {
font-size: 12px !important;
flex: 1;
text-align: left;
border-right: 1px solid #cccccc;
box-sizing: border-box;
padding: 0 5px;
}
.first {
flex: 1;
font-size: 12px !important;
}
.last {
border-right: none;
}
}
.tbody {
border-top: none;
}
.thead {
div {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
}
// 无设备的样式
&.nomal {
text-align: center;
padding-bottom: 10px;
}
div { div {
font-size: 14px; font-size: 14px;
font-wwight: 400; font-wwight: 400;
.windowwarn { .windowwarn {
margin-bottom: 7px; margin-bottom: 7px;
} }
} }
} }
.wrapper { .wrapper {
width: 406px; // width: 406px;
width: 460px;
max-height: 600px; max-height: 600px;
// background: #fff; // background: #fff;
border-radius: 4px; border-radius: 4px;
...@@ -316,7 +417,7 @@ ...@@ -316,7 +417,7 @@
.text-wrapper { .text-wrapper {
padding-top: 1px; padding-top: 1px;
&>div { & > div {
margin-bottom: 6px; margin-bottom: 6px;
} }
...@@ -327,7 +428,7 @@ ...@@ -327,7 +428,7 @@
color: #fff; color: #fff;
opacity: 1; opacity: 1;
&>span { & > span {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
// white-space: nowrap; // white-space: nowrap;
...@@ -363,7 +464,7 @@ ...@@ -363,7 +464,7 @@
box-sizing: border-box; box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2; // border-bottom: 1px solid #e2e2e2;
&>div { & > div {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -384,7 +485,7 @@ ...@@ -384,7 +485,7 @@
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
color: #fe5966; color: #fe5966;
&>div { & > div {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-bottom: 8px; margin-bottom: 8px;
...@@ -403,12 +504,13 @@ ...@@ -403,12 +504,13 @@
} }
} }
} }
} }
.wrapperEditorPage {} .wrapperEditorPage {
}
.display-default { .display-default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
</style> </style>
\ No newline at end of file
...@@ -425,13 +425,15 @@ class gaodeMap { ...@@ -425,13 +425,15 @@ class gaodeMap {
}); });
} }
// 如果这个值为false说明不是workerpoint,就push进去 // 如果这个值为false说明不是workerpoint,就push进去 或者不是值班人员就让他缩放
if (!marker.workerPoint) { if (!marker.workerPoint) {
this.markers.push(marker); this.markers.push(marker);
// 如果是值班人员也不缩放
if (markerType != DEVICE_TYPE.INSPECTOR) {
map.setZoom("13"); map.setZoom("13");
} }
}
//map.setFitView(); //map.setFitView();
function infoClose(e) { function infoClose(e) {
let options = map.getStatus(); let options = map.getStatus();
options.scrollWheel = true; options.scrollWheel = true;
...@@ -443,6 +445,30 @@ class gaodeMap { ...@@ -443,6 +445,30 @@ class gaodeMap {
return marker; return marker;
} }
// 删除地图上marker 跟数组里的marker
removeMarker(type) {
// 获取过滤出来的marker
// 如果打开的是档期那type人员,就清空infowindow
if(this.markerType == type){
this.closeInfoWindow()
}
const newOriginMaker = this.markers.filter(item => {
console.log(item.markerType)
return item.markerType == type;
});
newOriginMaker.forEach(item => {
this.myMap.remove(item)
});
console.log(newOriginMaker);
newOriginMaker.forEach(item => {
const index = this.markers.findIndex(
iten => iten.getExtData().deviceType == type
);
if (index < 0) {
this.markers.splice(index, 1);
}
});
}
// 值班人员 // 值班人员
wokerManOpen = e => { wokerManOpen = e => {
this.markerType = e.target.markerType; this.markerType = e.target.markerType;
......
...@@ -630,6 +630,7 @@ export default { ...@@ -630,6 +630,7 @@ export default {
setInspectorLocationsInterval(){ setInspectorLocationsInterval(){
// 设置定时器,5s执行一次 // 设置定时器,5s执行一次
let timer = setInterval(() => { let timer = setInterval(() => {
this.gaoMap.removeMarker(DEVICE_TYPE.INSPECTOR);
this.getInspectorLocations(); this.getInspectorLocations();
}, 10000); }, 10000);
......
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