修改状态提示信息

src/store/index.js

@@ -12,8 +12,8 @@ export default new Vuex.Store({
             temperature: '',
         },
         windowWidth: 1920 + 1080,
-        wsUrl: process.env.NODE_ENV === "development" ? '172.16.120.92:8085' : '121.40.217.77:8085',
-        // wsUrl: '121.40.217.77:8085',
+        // wsUrl: process.env.NODE_ENV === "development" ? '172.16.120.92:8085' : '121.40.217.77:8085',
+        wsUrl: '121.40.217.77:8085',
     },
     mutations: {
         changClient(state, val) {

src/views/home/index.vue

@@ -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 {

src/views/infoPage/index.vue

@@ -215,7 +215,7 @@ export default {
                 this.getData();
               this.$message({
                 type: "success",
-                message: "删除成功!",
+                message: "处理成功!",
               });
             }
         })