Skip to content

G
gassafety
Commit 3ef1b5d7 authored by 吴卿华's avatar 吴卿华
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 33c4bddc 8ac366c3
Hide whitespace changes
Inline Side-by-side
Showing with 387 additions and 258 deletions
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ 3ef1b5d7
...@@ -2,23 +2,27 @@ ...@@ -2,23 +2,27 @@
<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>
</div> </div>
<!-- 设备信息 --> <!-- 设备信息 -->
<div class="content scrollStyle"> <div class="content scrollStyle">
<div class="eq-content display-default"> <div class="eq-content display-default">
<div class="text-wrapper"> <div class="text-wrapper">
<div class="eq-text"> <div class="eq-text">
设备类型：<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>
</div> </div>
<div class="eq-text"> <div class="eq-text">
物联网编号：<span>{{ data.iotNo ? data.iotNo : "-" }}</span> 物联网编号：<span>{{ data.iotNo ? data.iotNo : "-" }}</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">
border-bottom: 1px solid #e2e2e2; <div class="windowwarn-content tab" v-if="list.length > 0">
padding: 10px 0 2px 22px; <div class="foot">
height: 150px;padding-bottom: 2px; <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;
padding: 10px 0 2px 22px;
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
border-bottom: 1px solid #e2e2e2; v-if="data.deviceType == 4"
padding: 10px 0 2px 22px; class="windowwarn-content"
height: 70px;padding-bottom: 2px; style="
"> border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
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,275 +184,333 @@ ...@@ -140,275 +184,333 @@
</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: "",
data: {}, data: {},
map: null, map: null,
},
data() {
return {
deviceId: "",
alarm: {},
list: [
{ a: "我我我我我我我", b: 2, c: 3, d: 4 },
{ a: "我我我我我我我", b: 2, c: 3, d: 4 },
{ a: "我我我我我我我", b: 2, c: 3, d: 4 },
],
};
},
mounted() {
clearInterval(this.data.class.view.deviceTimer);
if (this.data.deviceType == 3 || this.data.deviceType == 4) {
this.getDataid();
this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000);
closeInfoWindowTimer = setInterval(() => {
const dom = document.getElementsByClassName("amap-info")[0];
const disPlay = dom?.style.display;
if (!dom || (dom && disPlay == "none")) {
clearInterval(this.data.class.view.deviceTimer);
clearInterval(closeInfoWindowTimer);
console.log("请求关闭");
}
}, 1000);
}
},
methods: {
moment,
deviceMore() {
this.data.class.view.$router.push({
// path: "/dataMonitoring/realtimedetail",
path: "/device/deviceInfoDetail",
query: {
deviceId: this.data.deviceId,
// deviceType: this.data.deviceType,
},
});
}, },
data() { getDataid() {
return { getWindowData(this.data.deviceId).then((response) => {
deviceId: "", this.changeValue(response.data);
alarm: {}, });
}
}, },
mounted() { changeValue(data) {
clearInterval(this.data.class.view.deviceTimer); const keyArr = Object.keys(data);
keyArr.forEach((item) => {
const dw = this.danwei(item);
if (this.data.deviceType == 3 || this.data.deviceType == 4) { const dom = document.getElementsByClassName(item)[0];
this.getDataid(); if (dom) {
this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000); dom.innerHTML = data[item] + "&nbsp" + dw;
}
closeInfoWindowTimer = setInterval(() => { });
const dom= document.getElementsByClassName("amap-info")[0]; },
const disPlay =dom?.style.display; danwei(item) {
if (!dom || (dom && disPlay == "none")) { let dw = "";
clearInterval(this.data.class.view.deviceTimer) if (
clearInterval(closeInfoWindowTimer) item == "standardConditionAccumulation" ||
console.log("请求关闭") item == "workingConditionAccumulation" ||
} item == "residualQuantity"
}, 1000) ) {
dw = "m³";
} else if (
item == "standardConditionFlow" ||
item == "workingConditionFlow"
) {
dw = "m³/h";
} else if (item == "temperature") {
dw = "℃";
} else if (item == "pressure") {
dw = "KPa";
} else if (item == "reportTime") {
dw = " ";
} }
return dw;
}, },
methods: { close() {
moment, this.map.clearInfoWindow();
deviceMore() { this.data.class.view.domAllShow();
this.data.class.view.$router.push({
// path: "/dataMonitoring/realtimedetail",
path: "/device/deviceInfoDetail",
query: {
deviceId: this.data.deviceId,
// deviceType: this.data.deviceType,
},
});
},
getDataid() {
getWindowData(this.data.deviceId).then(response => {
this.changeValue(response.data)
})
},
changeValue(data) {
const keyArr = Object.keys(data);
keyArr.forEach((item) => {
const dw = this.danwei(item)
const dom = document.getElementsByClassName(item)[0];
if (dom) {
dom.innerHTML = data[item] +"&nbsp"+ dw;
}
})
},
danwei(item) {
let dw='';
if(item =='standardConditionAccumulation' || item == 'workingConditionAccumulation' || item == 'residualQuantity'){
dw="m³"
}else if(item =='standardConditionFlow'|| item == 'workingConditionFlow'){
dw="m³/h"
}else if(item =='temperature'){
dw="℃"
}else if(item == 'pressure'){
dw="KPa"
}else if(item == 'reportTime'){
dw=" "
}
return dw;
} ,
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow()
},
}, },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.windowwarn-content { .windowwarn-content {
div { &.tab {
font-size: 14px; border-bottom: 1px solid #e2e2e2;
font-wwight: 400; padding: 10px 5px 2px 5px;
max-height: 150px;
.windowwarn { padding-bottom: 5px;
margin-bottom: 7px; overflow-y: auto;
} &::-webkit-scrollbar {
display: none; /* Chrome Safari */
} }
} .foot {
color: #ffffff;
.wrapper { .thead,
width: 406px; .tbody {
max-height: 600px; display: flex;
// background: #fff; border: 1px solid #cccccc;
border-radius: 4px; border-right: none;
background: rgba(7, 29, 51, 0.9); div {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); font-size: 12px !important;
color: #fff; flex: 1;
text-align: left;
// overflow: hidden; border-right: 1px solid #cccccc;
.top { box-sizing: border-box;
width: 100%; padding: 0 5px;
height: 51px; }
// background-color: #053b6a; .first {
background-image: url(../../assets/images/blueTopBg.png); flex: 1;
background-size: 100% 100%; font-size: 12px !important;
background-position: center;
&:before {
// content: "";
// position: absolute;
// left: -20px;
// top: 5px;
// width: 0px;
// height: 0px;
// z-index:-1;
// border-top: 15px solid transparent;
// border-bottom: 15px solid transparent;
// border-right: 30px solid #053b6a;
content: "";
position: absolute;
left: -20px;
top: 5px;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text { }
font-weight: 600; .last {
font-size: 16px; border-right: none;
color: #ffffff; }
line-height: 51px;
} }
.tbody {
.left { border-top: none;
padding-left: 22px;
} }
.thead {
.right { div {
padding-right: 22px; background-color: rgba(255, 255, 255, 0.1);
img {
cursor: pointer;
} }
} }
} }
}
// 无设备的样式
&.nomal {
text-align: center;
padding-bottom: 10px;
}
div {
font-size: 14px;
font-wwight: 400;
.windowwarn {
margin-bottom: 7px;
}
}
}
.wrapper {
// width: 406px;
width: 460px;
max-height: 600px;
// background: #fff;
border-radius: 4px;
background: rgba(7, 29, 51, 0.9);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
// background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before {
// content: "";
// position: absolute;
// left: -20px;
// top: 5px;
// width: 0px;
// height: 0px;
// z-index:-1;
// border-top: 15px solid transparent;
// border-bottom: 15px solid transparent;
// border-right: 30px solid #053b6a;
content: "";
position: absolute;
left: -20px;
top: 5px;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.content { .text {
position: relative; font-weight: 600;
max-height: 300px; font-size: 16px;
overflow: hidden; color: #ffffff;
overflow-y: auto; line-height: 51px;
padding-bottom: 2px; }
border-bottom: 1px solid #eeeeee;
.eq-content {
// min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
&>div {
margin-bottom: 6px;
}
.eq-text { .left {
font-size: 14px; padding-left: 22px;
font-weight: 400; }
// color: #1d1d1d;
color: #fff;
opacity: 1;
&>span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
}
}
.pic { .right {
width: 180px; padding-right: 22px;
height: 103px;
// background-color: black; img {
img { cursor: pointer;
width: 100%;
height: 100%;
// cursor: pointer;
}
}
} }
} }
}
.maintain-content { .content {
width: 100%; position: relative;
max-height: 119px; max-height: 300px;
padding-left: 22px; overflow: hidden;
// padding-right: 22px; overflow-y: auto;
// padding-bottom: 10px; padding-bottom: 2px;
// padding-top: 16px; border-bottom: 1px solid #eeeeee;
.eq-content {
// min-height: 156px;
box-sizing: border-box; box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2; // border-bottom: 1px solid #e2e2e2;
&>div { .text-wrapper {
margin-bottom: 8px; padding-top: 1px;
font-size: 14px;
font-weight: 400;
span { & > div {
vertical-align: top; margin-bottom: 6px;
display: inline-block;
word-break: break-all;
max-width: 280px;
} }
}
}
.warn-wrapper { .eq-text {
.warn-content {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color: #fe5966;
&>div {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-bottom: 8px; // color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
} }
} }
.btn { .pic {
padding: 16px 0; width: 180px;
text-align: center; height: 103px;
.elbtn { // background-color: black;
background-color: #053b6a; img {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); width: 100%;
width: 95px; height: 100%;
height: 33px; // cursor: pointer;
} }
} }
} }
} }
.wrapperEditorPage {} .maintain-content {
width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
}
}
}
.warn-wrapper {
.warn-content {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color: #fe5966;
& > div {
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
}
.btn {
padding: 16px 0;
text-align: center;
.display-default { .elbtn {
display: flex; background-color: #053b6a;
justify-content: space-between; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
}
}
} }
}
.wrapperEditorPage {
}
.display-default {
display: flex;
justify-content: space-between;
}
</style> </style>
\ No newline at end of file
gassafety-web/src/utils/gaodeMapView.js
View file @ 3ef1b5d7
...@@ -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);
map.setZoom("13"); // 如果是值班人员也不缩放
if (markerType != DEVICE_TYPE.INSPECTOR) {
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;
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 3ef1b5d7
...@@ -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