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 @@
<div class="wrapper">
<span class="dot-left"></span>
<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">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<!-- 设备信息 -->
<div class="content scrollStyle">
<div class="content scrollStyle">
<div class="eq-content display-default">
<div class="text-wrapper">
<div class="eq-text">
设备类型：<span>{{ title ? title : "-" }}</span>
设备类型：<span>{{ title ? title : "-" }}</span>
</div>
<div class="eq-text">
设备型号：<span>{{ data.deviceModel ? data.deviceModel : "-" }}</span>
设备型号：<span>{{
data.deviceModel ? data.deviceModel : "-"
}}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeName ? data.pipeName : "-" }}</span>
所属管道：<span>{{ data.pipeName ? data.pipeName : "-" }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo ? data.iotNo : "-" }}</span>
......@@ -48,11 +52,11 @@
<div>
<span>设备所在地址：</span>
<span>{{ data.pipeAddr ? data.pipeAddr : "-"}}</span>
<span>{{ data.pipeAddr ? data.pipeAddr : "-" }}</span>
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks ? data.remarks : "-"}} </span>
<span>{{ data.remarks ? data.remarks : "-" }} </span>
</div>
</div>
</div>
......@@ -63,12 +67,52 @@
<div>报警状态：<span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> -->
<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;
">
<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;
padding: 10px 0 2px 22px;
height: 150px;
padding-bottom: 2px;
"
>
<el-col :span="12">
<div class="windowwarn">
标况累积量：<span class="standardConditionAccumulation">-</span>
......@@ -100,9 +144,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="windowwarn">
压力：<span class="pressure">-</span>
</div>
<div class="windowwarn">压力：<span class="pressure">-</span></div>
</el-col>
<el-col :span="15">
<div class="windowwarn">
......@@ -110,15 +152,18 @@
</div>
</el-col>
</div>
<div v-if="data.deviceType==4" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
height: 70px;padding-bottom: 2px;
">
<div
v-if="data.deviceType == 4"
class="windowwarn-content"
style="
border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
height: 70px;
padding-bottom: 2px;
"
>
<el-col :span="24">
<div class="windowwarn">
压力：<span class="pressure">-</span>
</div>
<div class="windowwarn">压力：<span class="pressure">-</span></div>
</el-col>
<el-col :span="24">
<div class="windowwarn">
......@@ -128,7 +173,6 @@
</div>
</template>
<div class="btn">
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
......@@ -140,275 +184,333 @@
</template>
<script>
let closeInfoWindowTimer = null;
import { getWindowData } from "@/api/dataMonitoring/reportData";
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null,
let closeInfoWindowTimer = null;
import { getWindowData } from "@/api/dataMonitoring/reportData";
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
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() {
return {
deviceId: "",
alarm: {},
}
getDataid() {
getWindowData(this.data.deviceId).then((response) => {
this.changeValue(response.data);
});
},
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)
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;
},
methods: {
moment,
deviceMore() {
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()
},
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow();
},
};
},
};
</script>
<style lang="scss" scoped>
.windowwarn-content {
div {
font-size: 14px;
font-wwight: 400;
.windowwarn {
margin-bottom: 7px;
}
.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 */
}
}
.wrapper {
width: 406px;
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);
}
.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;
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.last {
border-right: none;
}
}
.left {
padding-left: 22px;
.tbody {
border-top: none;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
.thead {
div {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
}
// 无设备的样式
&.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 {
position: relative;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
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;
}
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.eq-text {
font-size: 14px;
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;
}
}
}
.left {
padding-left: 22px;
}
.pic {
width: 180px;
height: 103px;
.right {
padding-right: 22px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
img {
cursor: pointer;
}
}
}
.maintain-content {
width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
.content {
position: relative;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
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;
&>div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
.text-wrapper {
padding-top: 1px;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
& > div {
margin-bottom: 6px;
}
}
}
.warn-wrapper {
.warn-content {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color: #fe5966;
&>div {
.eq-text {
font-size: 14px;
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 {
padding: 16px 0;
text-align: center;
.pic {
width: 180px;
height: 103px;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
// background-color: black;
img {
width: 100%;
height: 100%;
// 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 {
display: flex;
justify-content: space-between;
.elbtn {
background-color: #053b6a;
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>
\ No newline at end of file
gassafety-web/src/utils/gaodeMapView.js
View file @ 3ef1b5d7
......@@ -425,13 +425,15 @@ class gaodeMap {
});
}
// 如果这个值为false说明不是workerpoint，就push进去
// 如果这个值为false说明不是workerpoint，就push进去 或者不是值班人员就让他缩放
if (!marker.workerPoint) {
this.markers.push(marker);
map.setZoom("13");
// 如果是值班人员也不缩放
if (markerType != DEVICE_TYPE.INSPECTOR) {
map.setZoom("13");
}
}
//map.setFitView();
function infoClose(e) {
let options = map.getStatus();
options.scrollWheel = true;
......@@ -443,6 +445,30 @@ class gaodeMap {
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 => {
this.markerType = e.target.markerType;
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 3ef1b5d7
......@@ -630,6 +630,7 @@ export default {
setInspectorLocationsInterval(){
// 设置定时器，5s执行一次
let timer = setInterval(() => {
this.gaoMap.removeMarker(DEVICE_TYPE.INSPECTOR);
this.getInspectorLocations();
}, 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