修改湖南提出的bug

package.json

@@ -18,6 +18,7 @@
     "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
     "vue-lazyload": "^1.2.6",
+    "vue-native-websocket": "^2.0.15",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

socket/index.js

@@ -0,0 +1,138 @@
+import { Notification } from "element-ui";
+
+let hasShownNotification = false;
+// WebSocket连接实例
+let socket = null;
+
+// 是否正在尝试重连
+let lockReconnect = false;
+
+// 心跳间隔，20秒
+const timeout = 20 * 1000;
+
+// 心跳定时器
+let timeoutObj = null;
+
+// 服务器无响应超时定时器
+let serverTimeoutObj = null;
+
+// 重连定时器
+let reconnectTimeout = null;
+
+// 初始化WebSocket连接
+const initWebSocket = () => {
+  if ("WebSocket" in window) {
+    const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
+    const wsPath = "/api/websocket";
+    const wshost =
+      window.location.hostname === "localhost"
+        ? "192.168.1.190:90"
+        : window.location.host;
+    const wsUrl = protocol + wshost + wsPath;
+
+    socket = new WebSocket(wsUrl);
+
+    socket.onerror = webSocketOnError;
+    socket.onmessage = webSocketOnMessage;
+    socket.onclose = closeWebsocket;
+    socket.onopen = openWebsocket;
+  } else {
+    // 浏览器不支持WebSocket
+    console.error("您的浏览器不支持WebSocket");
+    // 这里可以添加更友好的提示方式，如使用Element UI的Notification
+  }
+};
+
+// 打开WebSocket连接时执行
+const openWebsocket = () => {
+  console.log("WebSocket链接成功");
+  startHeartbeat();
+};
+
+// 启动心跳
+const startHeartbeat = () => {
+  timeoutObj = setTimeout(() => {
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send("1"); // 发送心跳消息
+      console.log("发送心跳消息以保持WebSocket连接活跃");
+
+      // 如果需要，可以在这里添加检测服务器响应的逻辑
+      // 例如，设置一个服务器响应超时检测
+
+      // 递归调用以继续发送心跳
+      startHeartbeat();
+    } else {
+      // 如果WebSocket已经关闭，则不再发送心跳
+      console.log("WebSocket连接已关闭，停止发送心跳");
+      clearTimeout(timeoutObj); // 清除定时器
+    }
+  }, timeout);
+};
+
+// WebSocket错误处理
+const webSocketOnError = (e) => {
+  console.error("WebSocket发生错误:", e);
+  // 这里通常不需要立即重连，因为onclose会处理重连逻辑
+};
+
+// 处理接收到的消息
+const webSocketOnMessage = (e) => {
+  // 自定义事件，将接收到的数据派发给其他监听器
+  window.dispatchEvent(
+    new CustomEvent("onmessageWS", { detail: { data: e.data } })
+  );
+  // 收到消息后重置心跳定时器
+  resetHeartbeat();
+};
+
+// WebSocket关闭处理
+const closeWebsocket = (e) => {
+  console.log("WebSocket连接已关闭:", e);
+  // if (!hasShownNotification) {
+  //   Notification({
+  //     title: "告警",
+  //     message: "WebSocket连接已关闭",
+  //     position: "bottom-right",
+  //     type: "warning",
+  //     duration: 2000,
+  //   });
+  //   hasShownNotification = true; // 更新状态，防止再次显示
+  // }
+
+  // 清除所有定时器
+  clearTimeout(timeoutObj);
+  clearTimeout(serverTimeoutObj);
+  // 设置重连定时器
+  reconnectTimeout = setTimeout(() => {
+    initWebSocket();
+  }, 60 * 1000); // 60秒后重连
+};
+
+// 重置心跳定时器
+const resetHeartbeat = () => {
+  clearTimeout(timeoutObj);
+  clearTimeout(serverTimeoutObj);
+  startHeartbeat();
+};
+
+// 发送消息到WebSocket服务器
+const sendWebsocket = (data) => {
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(data);
+  } else {
+    console.error("WebSocket未连接，无法发送消息");
+  }
+};
+
+// 关闭WebSocket连接（通常不需要在前端主动调用，除非有特定需求）
+const close = () => {
+  if (socket) {
+    socket.close();
+  }
+};
+
+// 导出相关函数，以便在其他地方使用
+export default { initWebSocket, sendWebsocket, close };
+
+// 注意：关于离开页面不断开WebSocket连接的需求，这通常取决于浏览器的行为。
+// 在一些情况下，浏览器会在页面卸载时自动关闭WebSocket连接。

src/App.vue

@@ -5,15 +5,39 @@
 </template>
 <script>
 import DevicePixelRatio from "./components/common/devicePixelRatio";
+
 export default {
   name: "App",
   data() {
     return {};
   },
-  mounted() {},
+  async mounted() {
+    // this.initWebSocket();
+    // window.addEventListener("onmessageWS", this.getSocketData);
+  },
   created() {
     //new DevicePixelRatio().init();
   },
+  methods: {
+    // async initWebSocket() {
+    //   console.log(this.$websocket);
+    //   this.$websocket.initWebSocket();
+    // },
+    // getSocketData(res) {
+    //   console.log(res);
+    //   localStorage.setItem("picNotify", JSON.stringify(res.detail));
+    //   // this.$notify({
+    //   //   title: "通知",
+    //   //   message: res.detail.data,
+    //   //   position: "bottom-right",
+    //   //   type: "warning",
+    //   //   //duration: 0,
+    //   // });
+    // },
+  },
+  destroyed() {
+    this.$websocket.close();
+  },
 };
 </script>
 

src/main.js

@@ -3,6 +3,10 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 
+//websocket
+import websocket from "../socket/index";
+Vue.prototype.$websocket = websocket;
+
 //引入element-ui
 import "../src/assets/css/theme/index.css"; //l绿色主题
 import ElementUI from "element-ui";

src/utils/api/index.js

@@ -538,10 +538,9 @@ export function setTermGPSJoggle(data) {
 export function takePicJoggle(data) {
   return request({
     url: "/api/takePic",
-    method: "get",
-
-    params: data,
-    // data,
+    method: "post",
+    // params: data,
+    data,
     // headers: {
     //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
     // },

src/views/alarmHandling/components/historyimg.vue

@@ -62,6 +62,9 @@ export default {
         this.historyPicLoading = false;
         this.terminalPhoto = res.data.list;
         this.total = res.data.total;
+        this.$nextTick(() => {
+          this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
+        });
       });
     },
     //下一页

src/views/components/carouselChart.vue

@@ -325,6 +325,7 @@ export default {
           this.localPoints = res.data.list;
           this.color = res.data.color;
           this.borderwidth = res.data.boderWidth;
+          // this.borderwidth = 1;
           this.markEnable = res.data.markEnable;
           if (this.markEnable === 1) {
             this.drawline();
@@ -358,9 +359,11 @@ export default {
     //绘制线缆方法
     drawline() {
       this.canvas = this.$refs.myCanvas;
-      this.imgpic = this.$refs.picJpg;
-      this.canvas.width = this.imgpic.imageWidth; //设置画布大小
-      this.canvas.height = this.imgpic.imageHeight; //设置画布大小
+      //  this.imgpic = this.$refs.picJpg;
+      this.imgpic = document.getElementById("alarmPic");
+      console.log(this.imgpic.offsetHeight);
+      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
+      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
       this.ctx = this.canvas.getContext("2d");
 
       if (this.flagLine == true) {
@@ -380,12 +383,12 @@ export default {
       } else {
         for (var i = 0; i < this.localPoints.length; i++) {
           this.ctx.moveTo(
-            this.localPoints[i].x1 * this.imgpic.imageWidth,
-            this.localPoints[i].y1 * this.imgpic.imageHeight
+            this.localPoints[i].x1 * this.imgpic.offsetWidth,
+            this.localPoints[i].y1 * this.imgpic.offsetHeight
           );
           this.ctx.lineTo(
-            this.localPoints[i].x2 * this.imgpic.imageWidth,
-            this.localPoints[i].y2 * this.imgpic.imageHeight
+            this.localPoints[i].x2 * this.imgpic.offsetWidth,
+            this.localPoints[i].y2 * this.imgpic.offsetHeight
           );
         }
         this.ctx.closePath();
@@ -523,6 +526,9 @@ export default {
     //绘制大图告警区域
     drawlineBig(data) {
       console.log("我是大图告警区域", data);
+      if (data.alarmlist.length == 0) {
+        return;
+      }
       this.canvas = document.getElementById("alarmCanvas");
       this.imgpic = document.getElementById("alarmPic");
       console.log(document.getElementById("alarmCanvas"));
@@ -542,6 +548,9 @@ export default {
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = 1;
       this.labelMarkArrs = data.alarmlist[0];
+      // if (this.labelMarkArrs == undefined) {
+      //   return;
+      // }
       console.log("我是打印出来的数据", this.labelMarkArrs);
 
       // 绘制矩形

src/views/components/carouselChartmore.vue

@@ -325,6 +325,7 @@ export default {
           this.localPoints = res.data.list;
           this.color = res.data.color;
           this.borderwidth = res.data.boderWidth;
+          // this.borderwidth = 1;
           this.markEnable = res.data.markEnable;
           if (this.markEnable === 1) {
             this.drawline();
@@ -333,7 +334,7 @@ export default {
         .catch((err) => {});
     },
     //开启绘制线缆
-    openLine() {
+    openline() {
       this.flagLine = true;
       //开启传1
       updateMarkEnableStatus({
@@ -344,7 +345,7 @@ export default {
       this.drawline();
     },
     //关闭绘制线缆
-    closeLine() {
+    handelClear() {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.flagLine = false;
 
@@ -358,9 +359,11 @@ export default {
     //绘制线缆方法
     drawline() {
       this.canvas = this.$refs.myCanvas;
-      this.imgpic = this.$refs.picJpg;
-      this.canvas.width = this.imgpic.imageWidth; //设置画布大小
-      this.canvas.height = this.imgpic.imageHeight; //设置画布大小
+      //  this.imgpic = this.$refs.picJpg;
+      this.imgpic = document.getElementById("alarmPic");
+      console.log(this.imgpic.offsetHeight);
+      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
+      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
       this.ctx = this.canvas.getContext("2d");
 
       if (this.flagLine == true) {
@@ -380,12 +383,12 @@ export default {
       } else {
         for (var i = 0; i < this.localPoints.length; i++) {
           this.ctx.moveTo(
-            this.localPoints[i].x1 * this.imgpic.imageWidth,
-            this.localPoints[i].y1 * this.imgpic.imageHeight
+            this.localPoints[i].x1 * this.imgpic.offsetWidth,
+            this.localPoints[i].y1 * this.imgpic.offsetHeight
           );
           this.ctx.lineTo(
-            this.localPoints[i].x2 * this.imgpic.imageWidth,
-            this.localPoints[i].y2 * this.imgpic.imageHeight
+            this.localPoints[i].x2 * this.imgpic.offsetWidth,
+            this.localPoints[i].y2 * this.imgpic.offsetHeight
           );
         }
         this.ctx.closePath();
@@ -523,6 +526,9 @@ export default {
     //绘制大图告警区域
     drawlineBig(data) {
       console.log("我是大图告警区域", data);
+      if (data.alarmlist.length == 0) {
+        return;
+      }
       this.canvas = document.getElementById("alarmCanvas");
       this.imgpic = document.getElementById("alarmPic");
       console.log(document.getElementById("alarmCanvas"));
@@ -542,6 +548,9 @@ export default {
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = 1;
       this.labelMarkArrs = data.alarmlist[0];
+      // if (this.labelMarkArrs == undefined) {
+      //   return;
+      // }
       console.log("我是打印出来的数据", this.labelMarkArrs);
 
       // 绘制矩形
@@ -965,7 +974,7 @@ export default {
         }
       }
       .moreSmallPic {
-        width: 12%;
+        width: 9.8%;
       }
       .borderActive {
         .timeInfo {

src/views/pictureRotation/index.vue

@@ -75,6 +75,11 @@
                   :id="'canvas_' + index"
                   class="canvasAll"
                 ></canvas>
+                <canvas
+                  :id="'markCanvas' + index"
+                  class="markCanvas"
+                  :ref="'markCanvas' + index"
+                ></canvas>
               </div>
               <div
                 class="bigpic"
@@ -381,6 +386,7 @@ export default {
       localStorage.setItem("totalTime", this.selSpeed);
       localStorage.setItem("row", this.rowradio);
       localStorage.setItem("col", this.colradio);
+      localStorage.setItem("channelNum", this.channelVal);
       this.rowNum = parseInt(localStorage.getItem("row"))
         ? parseInt(localStorage.getItem("row"))
         : 4;
@@ -424,6 +430,9 @@ export default {
           console.log("我是来获取图片的", document.getElementById("img" + 0));
           setTimeout(() => {
             this.drawlineListAll(this.picList);
+            this.$nextTick(() => {
+              this.drawmarkAll(this.picList);
+            });
           }, 200); // 200 毫秒
           // this.$nextTick(() => {
 
@@ -483,7 +492,6 @@ export default {
         if (val[i].isAlarm == 1) {
           console.log(i);
           console.log(document.getElementById("canvas_" + i));
-
           this.canvas = document.getElementById("canvas_" + i);
           this.imgpic = document.getElementById("img" + i);
           this.textInfo = val[i].alarmlist[0].enname;
@@ -528,6 +536,40 @@ export default {
         }
       }
     },
+    drawmarkAll(val) {
+      console.log(val);
+      for (let i = 0; i < val.length; i++) {
+        this.canvas = document.getElementById("markCanvas" + i);
+        this.imgpic = document.getElementById("img" + i);
+        this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
+        this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
+        this.ctx = this.canvas.getContext("2d");
+        this.ctx.beginPath();
+
+        this.ctx.strokeStyle = "#ff0000";
+        // 线宽设置，必须放在绘制之前
+        this.ctx.lineWidth = 2;
+        console.log(val);
+        for (var j = 0; j < val[i].list.length; j++) {
+          console.log(val[j].list);
+          this.ctx.moveTo(
+            val[i].list[j].x1 * this.imgpic.width,
+            val[i].list[j].y1 * this.imgpic.height
+          );
+          this.ctx.lineTo(
+            val[i].list[j].x2 * this.imgpic.width,
+            val[i].list[j].y2 * this.imgpic.height
+          );
+        }
+        this.ctx.closePath();
+        this.ctx.stroke();
+        // if (val[i].markEnable == 1) {
+
+        // } else {
+        //   console.log("没有绘制");
+        // }
+      }
+    },
   },
   computed: {},
   mounted() {
@@ -676,6 +718,15 @@ export default {
           justify-content: center;
         }
       }
+      .markCanvas {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        left: 0;
+        top: 0;
+        pointer-events: none;
+      }
     }
   }
   .setPicShow {

src/views/realTimeMonitor/index.vue

@@ -365,6 +365,7 @@ import setschedule from "./components/setschedule.vue";
 import infoDialog from "./components/infoDialog.vue";
 import gpsPosition from "./components/gpsPosition.vue";
 import morePicPreveiw from "./components/morePicPreveiw.vue";
+import socketService from "../../../socket/index";
 import { number } from "echarts";
 export default {
   components: {
@@ -440,6 +441,7 @@ export default {
       }, //收藏夹参数
       favorOptions: [], //收藏夹列表
       carouselKey: 0, // 初始key
+      picnotiy: [],
     };
   },
   watch: {
@@ -460,12 +462,23 @@ export default {
       deep: true,
       immediate: true,
     },
+    picnotiy: {
+      handler(newVal, oldVal) {
+        console.log(newVal);
+        console.log(oldVal);
+        console.log("我是通知信息，我改变了");
+      },
+      deep: true,
+      immediate: true,
+    },
   },
 
   computed: {},
   mounted() {
     this.dragControllerDiv();
     this.getDateTime();
+    this.initWebSocket();
+    window.addEventListener("onmessageWS", this.getSocketData);
   },
   created() {
     //获取日期
@@ -477,7 +490,7 @@ export default {
     this.getLineTreeList();
     this.treetimer = window.setInterval(() => {
       setTimeout(this.getLineTreeStatus(), 0);
-    }, 300000);
+    }, 1800000);
   },
   methods: {
     //获取当前选中的radio
@@ -635,46 +648,6 @@ export default {
           this.$nextTick(() => {
             this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
           });
-          // }
-          // if (this.zzradio == -1) {
-          //   this.lineTreeData = this.lineTreeData;
-          // } else if (this.zzradio == 1) {
-          //   //在线
-          //   var data = JSON.parse(JSON.stringify(this.lineTreeData));
-          //   console.log(data);
-          //   const filterId = (data, id) => {
-          //     if (!Array.isArray(data)) {
-          //       return data;
-          //     }
-          //     return data.filter((item) => {
-          //       if ("list" in item) {
-          //         item.list = filterId(item.list, id);
-          //       }
-          //       return item.onlinestatus !== 0;
-          //     });
-          //   };
-          //   const filtredData = filterId(data);
-          //   console.log(filtredData);
-          //   this.lineTreeData = filtredData;
-          // } else if (this.zzradio == 0) {
-          //   //离线
-          //   var data = JSON.parse(JSON.stringify(this.lineTreeData));
-          //   console.log(data);
-          //   const filterId = (data, id) => {
-          //     if (!Array.isArray(data)) {
-          //       return data;
-          //     }
-          //     return data.filter((item) => {
-          //       if ("list" in item) {
-          //         item.list = filterId(item.list, id);
-          //       }
-          //       return item.onlinestatus !== 1;
-          //     });
-          //   };
-          //   const filtredData = filterId(data);
-          //   console.log(filtredData);
-          //   this.lineTreeData = filtredData;
-          // }
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -968,6 +941,7 @@ export default {
     //主动拍照
     handleCommandpic(command) {
       console.log(command);
+      // localStorage.setItem("picNotify", "");
       getTermStatus({ termId: this.zztermId }).then((res) => {
         console.log(res);
         if (res.data.isonline) {
@@ -1080,12 +1054,13 @@ export default {
               message: "下发指令成功！",
               type: "success",
             });
-            clearInterval(this.timer);
-            this.timer = null;
-            this.timer = window.setInterval(() => {
-              this.newPicApi();
-              this.i++;
-            }, 8000);
+
+            // clearInterval(this.timer);
+            // this.timer = null;
+            // this.timer = window.setInterval(() => {
+            //   this.newPicApi();
+            //   this.i++;
+            // }, 8000);
           } else if (res.data.cmaStatus == 2) {
             this.statusNum = 0;
             this.btnpicloading = false;
@@ -1104,6 +1079,27 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    async initWebSocket() {
+      console.log(this.$websocket);
+      this.$websocket.initWebSocket();
+    },
+    getSocketData(res) {
+      console.log(res);
+      console.log(JSON.parse(res.detail.data));
+      let a = JSON.parse(res.detail.data);
+      console.log(a.type);
+      console.log(a.action);
+      if (a.action == "photo") {
+        this.$notify({
+          title: "通知",
+          message: a.content,
+          position: "bottom-right",
+          type: "warning",
+          duration: 60000,
+        });
+        // this.newPicApi();
+      }
+    },
     //获取最新图片
     newPicApi() {
       getTakePicPhotoStatusJoggle({