|
@@ -227,22 +227,12 @@ export default {
|
|
|
this.mapListType[val] = !this.mapListType[val];
|
|
|
let type = val === "isNormal" ? 1 : val === "isWarning" ? 2 : 3;
|
|
|
let markers = this.lnglats.filter((val) => val.type === type);
|
|
|
- let marksList = this.overlayGroupMap
|
|
|
- .getOverlays()
|
|
|
- .filter((element) => element.getExtData().type === type);
|
|
|
+ let marksList = this.overlayGroupMap.getOverlays().filter((element) => element.getExtData().type === type);
|
|
|
if (this.mapListType[val]) {
|
|
|
this.overlayGroupMap.addOverlays(this.addMarker(markers));
|
|
|
} else {
|
|
|
this.overlayGroupMap.removeOverlays(marksList);
|
|
|
- console.log();
|
|
|
- this.infoWindow &&
|
|
|
- this.infoWindow.getIsOpen() &&
|
|
|
- marksList.some(
|
|
|
- (val) =>
|
|
|
- val.getPosition().lng == this.infoWindow.getPosition().lng &&
|
|
|
- val.getPosition().lat == this.infoWindow.getPosition().lat
|
|
|
- ) &&
|
|
|
- this.infoWindow.close();
|
|
|
+ this.infoWindow && this.infoWindow.getIsOpen() && marksList.some((val) => val.getPosition().lng == this.infoWindow.getPosition().lng && val.getPosition().lat == this.infoWindow.getPosition().lat ) && this.infoWindow.close();
|
|
|
}
|
|
|
},
|
|
|
// 初始加载
|
|
@@ -350,14 +340,7 @@ export default {
|
|
|
// 创建标点和点击事件
|
|
|
let icon = "";
|
|
|
return lnglats.map((val) => {
|
|
|
- icon =
|
|
|
- val.type == 1
|
|
|
- ? zcIcon
|
|
|
- : val.type == 2
|
|
|
- ? jcIcon
|
|
|
- : val.type == 3
|
|
|
- ? lxIcon
|
|
|
- : zcIcon;
|
|
|
+ icon = val.type == 1 ? zcIcon : val.type == 2 ? jcIcon : val.type == 3 ? lxIcon : zcIcon;
|
|
|
let marker = new AMap.Marker({
|
|
|
position: new AMap.LngLat(val.x, val.y),
|
|
|
icon: icon || "",
|
|
@@ -387,87 +370,28 @@ export default {
|
|
|
// <div>3.6V</div>
|
|
|
content: `
|
|
|
<div class="mapTab">
|
|
|
- <div class="closeInfo ${
|
|
|
- value.type === 1
|
|
|
- ? "green"
|
|
|
- : value.type === 2
|
|
|
- ? "red"
|
|
|
- : "gray"
|
|
|
- }">${
|
|
|
- value.type === 1 ? "正常" : value.type === 2 ? "告警" : "离线"
|
|
|
- }</div>
|
|
|
+ <div class="closeInfo ${ value.type === 1 ? "green" : value.type === 2 ? "red" : "gray" }">${ value.type === 1 ? "正常" : value.type === 2 ? "告警" : "离线" }</div>
|
|
|
<div class="tableTitle">
|
|
|
- <div>信号:${
|
|
|
- value.data.dp &&
|
|
|
- value.data.dp.find((val) => val.serial == 66)
|
|
|
- ? value.data.dp.find((val) => val.serial == 66).value
|
|
|
- : "---"
|
|
|
- }</div>
|
|
|
- <div>电量:${
|
|
|
- value.data.dp &&
|
|
|
- value.data.dp.find((val) => val.serial == 65)
|
|
|
- ? value.data.dp.find((val) => val.serial == 65).value +
|
|
|
- "%"
|
|
|
- : "---"
|
|
|
- }</div>
|
|
|
+ <div>信号:${value.data.dp && value.data.dp.find((val) => val.serial == 66) ? value.data.dp.find((val) => val.serial == 66).value : "---" }</div>
|
|
|
+ <div>电量:${ value.data.dp && value.data.dp.find((val) => val.serial == 65) ? value.data.dp.find((val) => val.serial == 65).value + "%" : "---" }</div>
|
|
|
</div>
|
|
|
<div class="tableContent">
|
|
|
- <div class="yztBox ${
|
|
|
- value.type === 2 &&
|
|
|
- value.data.dp &&
|
|
|
- value.data.dp.find((val) => val.serial == 3)
|
|
|
- ? "waning"
|
|
|
- : "gray"
|
|
|
- }"">
|
|
|
- <div class="${
|
|
|
- value.type === 3
|
|
|
- ? "gray"
|
|
|
- : value.type === 2 &&
|
|
|
- value.data.dp &&
|
|
|
- value.data.dp.find((val) => val.serial == 3)
|
|
|
- ? "white"
|
|
|
- : "green"
|
|
|
- }">${
|
|
|
- value.type === 3
|
|
|
- ? "---"
|
|
|
- : value.type === 2 && value.data.dp.find((val) => val.serial == 3)
|
|
|
- ? "水位过高"
|
|
|
- : "正常"
|
|
|
- }</div>
|
|
|
+ <div class="yztBox ${ value.type === 2 && value.data.dp && value.data.dp.find((val) => val.serial == 3) ? "waning" : "gray" }"">
|
|
|
+ <div class="${ value.type === 3 ? "gray" : value.type === 2 && value.data.dp && value.data.dp.find((val) => val.serial == 3) ? "white" : "green" }">
|
|
|
+ ${ value.type === 3 ? "---" : value.type === 2 && value.data.dp.find((val) => val.serial == 3) ? "水位过高" : "正常" }</div>
|
|
|
<div>实时水况</div>
|
|
|
</div>
|
|
|
- <div><span>运行状态:</span><b class="${
|
|
|
- value.type === 1
|
|
|
- ? "green"
|
|
|
- : value.type === 2
|
|
|
- ? "red"
|
|
|
- : "gray"
|
|
|
- }">${
|
|
|
- value.type === 1
|
|
|
- ? "运行正常"
|
|
|
- : value.type === 2 && value.data.dp.find((val) => val.serial == 2)
|
|
|
- ? "异动"
|
|
|
- : value.type === 2 && value.data.dp.find((val) => val.serial == 32)
|
|
|
- ? "故障"
|
|
|
- : value.type === 2 && value.data.dp.find((val) => val.serial == 3)
|
|
|
- ? "液位告警"
|
|
|
- : "设备离线"
|
|
|
- }</b></div>
|
|
|
- <div><span>实时水位:</span>${
|
|
|
- value.data.dp &&
|
|
|
- value.data.dp.find((val) => val.serial == 67)
|
|
|
- ? value.data.dp.find((val) => val.serial == 67).value +
|
|
|
- "米"
|
|
|
- : "---"
|
|
|
- }</div>
|
|
|
+ <div><span>运行状态:</span><b class="${ value.type === 1 ? "green" : value.type === 2 ? "red" : "gray" }">
|
|
|
+ ${ value.type === 1 ? "运行正常" : value.type === 2 && value.data.dp.find((val) => val.serial == 2) ? "异动" :
|
|
|
+ value.type === 2 && value.data.dp.find((val) => val.serial == 32)? "故障"
|
|
|
+ : value.type === 2 && value.data.dp.find((val) => val.serial == 3) ? "液位告警" : "设备离线" }</b></div>
|
|
|
+ <div><span>实时水位:</span>${ value.data.dp && value.data.dp.find((val) => val.serial == 67) ? value.data.dp.find((val) => val.serial == 67).value + "米" : "---" }</div>
|
|
|
<div><span>负责人:</span>${value.userName || "---"}</div>
|
|
|
<div><span>联系电话:</span>${value.phone || "---"}</div>
|
|
|
- <div><span>时间:</span>${
|
|
|
- value.data.timeStamp || "---"
|
|
|
- }</div>
|
|
|
+ <div><span>时间:</span>${ value.data.timeStamp || "---" }</div>
|
|
|
<div><span>位置:</span>${value.addr || "---"}</div>
|
|
|
</div>
|
|
|
- <div class="sbh">设备号:${value.devId || "---"}</div>
|
|
|
+ <div class="sbh">SN:${value.devId || "---"}</div>
|
|
|
</div>`,
|
|
|
offset: new AMap.Pixel(0, -30),
|
|
|
});
|
|
@@ -484,6 +408,8 @@ export default {
|
|
|
};
|
|
|
|
|
|
this.ws.onmessage = (resJson) => {
|
|
|
+ if(!resJson.data) return
|
|
|
+ console.log(resJson.data)
|
|
|
let res = JSON.parse(resJson.data);
|
|
|
let data = res.dp.map((val) => {
|
|
|
return {
|
|
@@ -515,13 +441,9 @@ export default {
|
|
|
let resData = this.lnglats.find((val) => val.devId == res.devId);
|
|
|
// 判断弹窗不为null 判断弹窗是否打开 判断弹窗位置和当前更改位置是否一致 关闭弹窗
|
|
|
// this.infoWindow && this.infoWindow.getIsOpen() && marksList.some(val=> val.getPosition().lng == this.infoWindow.getPosition().lng && val.getPosition().lat == this.infoWindow.getPosition().lat) && this.infoWindow.close()
|
|
|
- this.infoWindow &&
|
|
|
- this.infoWindow.getIsOpen() &&
|
|
|
- this.infoWindow.close();
|
|
|
- marksList.length > 0 &&
|
|
|
- this.overlayGroupMap.removeOverlays(marksList);
|
|
|
- resData &&
|
|
|
- this.overlayGroupMap.addOverlays(this.addMarker([resData]));
|
|
|
+ this.infoWindow && this.infoWindow.getIsOpen() && this.infoWindow.close();
|
|
|
+ marksList.length > 0 && this.overlayGroupMap.removeOverlays(marksList);
|
|
|
+ resData && this.overlayGroupMap.addOverlays(this.addMarker([resData]));
|
|
|
resData && this.addMarkerInfo([resData.x, resData.y], resData);
|
|
|
};
|
|
|
|
|
@@ -531,7 +453,7 @@ export default {
|
|
|
|
|
|
//断线重新连接
|
|
|
setTimeout(() => {
|
|
|
- this.getData();
|
|
|
+ this.getDataWs();
|
|
|
}, 2000);
|
|
|
};
|
|
|
} else {
|