优化一直调用查询图片的接口

socket/index.js

@@ -19,11 +19,11 @@ let serverTimeoutObj = null;
 // 重连定时器
 let reconnectTimeout = null;
 
-// 初始化WebSocket连接  http://61.169.135.146:40086/ 192.168.1.190:90
+// 初始化WebSocket连接  http://61.169.135.146:40086/ 192.168.1.190:90 湖南两个api
 const initWebSocket = () => {
   if ("WebSocket" in window) {
     const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
-    const wsPath = "/api/websocket";
+    const wsPath = "/api/api/websocket";
     const wshost =
       window.location.hostname === "localhost"
         ? "192.168.1.190:90"

src/components/common/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header">
-    <div class="logo">视频监控可视化平台</div>
+    <div class="logo">视频监控可视化平台<span>V1.0</span></div>
     <v-sidebar></v-sidebar>
     <div class="header-right">
       <div class="header-user-con">
@@ -89,9 +89,16 @@ export default {
     align-items: center;
     padding-left: 16px;
     font-size: 20px;
+    position: relative;
     img {
       margin-right: 8px;
     }
+    span {
+      font-size: 12px;
+      bottom: -4px;
+      right: 40px;
+      position: absolute;
+    }
   }
   .header-right {
     float: right;

src/utils/request.js

@@ -7,7 +7,7 @@ const service = axios.create({
   // easy-mock服务挂了，暂时不使用了
   // baseURL: '',
   // timeout: 5000
-  baseURL: "", //把原来的项目地址，改成api，解决跨域问题
+  baseURL: "/api", //把原来的项目地址，改成api，解决跨域问题
   timeout: 30000,
 });
 

src/views/Login.vue

@@ -55,7 +55,7 @@
         </el-form>
       </div>
     </div>
-    <p class="webInfo">© 2023 视频监控可视化平台.All right reserved.</p>
+    <p class="webInfo">© 2023 视频监控可视化平台v1.0.All right reserved.</p>
   </div>
 </template>
 

src/views/alarmHandling/index.vue

@@ -419,6 +419,11 @@ export default {
       current: 0,
       requestId: "", //请求拍照返回的requestid
       picTime: "", //请求拍照返回的时间
+
+      pollingTimer: null, // 轮询定时器（使用setTimeout，因此命名为pollingTimer更合适）
+      polling: false, // 控制是否正在轮询的标志位
+      isPollingStopped: false, // 新增：标记轮询是否已停止
+      maxPollingAttempts: 5, // 新增：最大轮询次数
     };
   },
   created() {
@@ -810,10 +815,12 @@ export default {
               this.picTime = res.data.taketime; //获取时间 判断获取最新图片
               console.log(this.requestId);
               this.btnpicloading = true;
-              this.statusTimer = window.setInterval(() => {
+              // this.statusTimer = window.setInterval(() => {
-                this.getTakePicStatus(res.data);
+              //   this.getTakePicStatus(res.data);
-                this.statusNum++;
+              //   this.statusNum++;
-              }, 3000);
+              // }, 3000);
+              this.isPollingStopped = false; // 重置轮询停止标记
+              this.startPolling(res.data); // 开始轮询
             })
             .catch((err) => {
               console.log(err); //代码错误、请求失败捕获
@@ -828,62 +835,155 @@ export default {
         }
       });
     },
+    startPolling(data) {
+      if (!this.polling) {
+        this.polling = true;
+        this.statusNum = 0;
+        this.poll(data); // 调用新的poll函数开始第一次轮询
+      }
+    },
+    poll(data) {
+      if (this.isPollingStopped) {
+        console.log("轮询已停止，不再调用 getTakePicStatus");
+        return;
+      }
+      this.getTakePicStatus(data)
+        .then((shouldContinue) => {
+          if (shouldContinue) {
+            this.statusNum++;
+            if (this.statusNum < this.maxPollingAttempts) {
+              // 如果需要继续轮询，则设置下一个定时器
+              this.pollingTimer = setTimeout(() => {
+                this.poll(data); // 递归调用poll进行下一次轮询
+              }, 3000);
+            } else {
+              // 达到最大轮询次数，停止轮询
+              this.stopPolling();
+              // this.$message({
+              //   duration: 1500,
+              //   showClose: true,
+              //   message: "下发指令超时，请重试！",
+              //   type: "warning",
+              // });
+            }
+          } else {
+            // 根据getTakePicStatus的返回结果，可能在这里就需要停止轮询
+            this.stopPolling();
+          }
+        })
+        .catch((err) => {
+          console.error("轮询出错:", err);
+          this.stopPolling();
+        });
+    },
+    stopPolling() {
+      console.log(this.pollingTimer, "清除轮询不");
+      if (this.pollingTimer !== null) {
+        clearTimeout(this.pollingTimer);
+        this.pollingTimer = null;
+      }
+      this.statusNum = 0;
+      this.polling = false;
+      this.btnpicloading = false;
+      this.btnvideoloading = false;
+      this.isPollingStopped = true; // 标记轮询已停止
+    },
     //获取装置是否下发状态
     getTakePicStatus(data) {
       console.log(data);
-      getTakePicStatusJoggle({
+      console.log(data);
+      return getTakePicStatusJoggle({
         requestid: data.requestId,
         termId: this.selectRow.termId,
         photoTime: new Date(data.taketime).getTime(),
       })
         .then((res) => {
           console.log(res);
-          //res.data  0 状态未知  1 成功 2失败
+          // res.data  0 状态未知  1 成功 2失败
-          if (
+          if (res.data.cmaStatus === 1 || res.data.picStatus === true) {
-            res.data.cmaStatus == 0 &&
+            this.stopPolling();
-            res.data.picStatus == false &&
-            this.statusNum >= 5
-          ) {
-            this.statusNum = 0;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "下发指令超时，请重试！",
-              type: "warning",
-            });
-          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
             this.$message({
               duration: 1500,
               showClose: true,
               message: "下发指令成功！",
               type: "success",
             });
-            this.statusNum = 0;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
             this.timer = window.setInterval(() => {
               this.newPicApi();
               this.i++;
             }, 8000);
-          } else if (res.data == 2) {
+            return false; // 停止轮询
-            this.statusNum = 0;
+          } else if (res.data.cmaStatus === 2) {
-            clearInterval(this.statusTimer);
+            this.stopPolling();
-            this.statusTimer = null;
             this.$message({
               duration: 1500,
               showClose: true,
               message: "下发指令失败！",
               type: "error",
             });
+            return false; // 停止轮询
+          } else {
+            return true; // 继续轮询
           }
         })
         .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
+          console.error("获取拍照状态失败:", err);
+          this.stopPolling();
+          return false; // 停止轮询
         });
+      // getTakePicStatusJoggle({
+      //   requestid: data.requestId,
+      //   termId: this.selectRow.termId,
+      //   photoTime: new Date(data.taketime).getTime(),
+      // })
+      //   .then((res) => {
+      //     console.log(res);
+      //     //res.data  0 状态未知  1 成功 2失败
+      //     if (
+      //       res.data.cmaStatus == 0 &&
+      //       res.data.picStatus == false &&
+      //       this.statusNum >= 5
+      //     ) {
+      //       this.statusNum = 0;
+      //       clearInterval(this.statusTimer);
+      //       this.statusTimer = null;
+      //       this.btnpicloading = false;
+      //       this.btnvideoloading = false;
+      //       this.$message({
+      //         duration: 1500,
+      //         showClose: true,
+      //         message: "下发指令超时，请重试！",
+      //         type: "warning",
+      //       });
+      //     } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
+      //       this.$message({
+      //         duration: 1500,
+      //         showClose: true,
+      //         message: "下发指令成功！",
+      //         type: "success",
+      //       });
+      //       this.statusNum = 0;
+      //       clearInterval(this.statusTimer);
+      //       this.statusTimer = null;
+      //       this.timer = window.setInterval(() => {
+      //         this.newPicApi();
+      //         this.i++;
+      //       }, 8000);
+      //     } else if (res.data == 2) {
+      //       this.statusNum = 0;
+      //       clearInterval(this.statusTimer);
+      //       this.statusTimer = null;
+      //       this.$message({
+      //         duration: 1500,
+      //         showClose: true,
+      //         message: "下发指令失败！",
+      //         type: "error",
+      //       });
+      //     }
+      //   })
+      //   .catch((err) => {
+      //     console.log(err); //代码错误、请求失败捕获
+      //   });
     },
     //获取最新图片
     newPicApi() {
@@ -997,6 +1097,25 @@ export default {
       this.canvasloading = false;
     },
   },
+  destroyed() {
+    if (this.pollingTimer !== null) {
+      clearTimeout(this.pollingTimer);
+      this.pollingTimer = null;
+    }
+    this.cancleFn = false;
+    //销毁左侧树状图
+    clearInterval(this.treetimer);
+    this.treetimer = null;
+    this.statusNum = 6;
+    //销毁主动拍照
+    clearInterval(this.statusTimer);
+    this.statusTimer = null;
+    if (this.timer) {
+      console.log(this.timer);
+      clearInterval(this.timer);
+      this.timer = null;
+    } //利用vue的生命周期函数
+  },
 };
 </script>
 <style lang="less">

src/views/realTimeMonitor/index.vue

@@ -442,6 +442,10 @@ export default {
       favorOptions: [], //收藏夹列表
       carouselKey: 0, // 初始key
       picnotiy: [],
+      pollingTimer: null, // 轮询定时器（使用setTimeout，因此命名为pollingTimer更合适）
+      polling: false, // 控制是否正在轮询的标志位
+      isPollingStopped: false, // 新增：标记轮询是否已停止
+      maxPollingAttempts: 5, // 新增：最大轮询次数
     };
   },
   watch: {
@@ -958,10 +962,15 @@ export default {
               console.log(this.requestId);
               console.log(this.picTime);
               this.btnpicloading = true;
-              this.statusTimer = window.setInterval(() => {
+              // this.getTakePicStatus(res.data);
-                this.getTakePicStatus(res.data);
+              // this.cancleFn = true;
-                this.statusNum++;
+
-              }, 3000);
+              this.isPollingStopped = false; // 重置轮询停止标记
+              this.startPolling(res.data); // 开始轮询
+              // this.statusTimer = window.setInterval(() => {
+              //   this.getTakePicStatus(res.data);
+              //   this.statusNum++;
+              // }, 3000);
             })
             .catch((err) => {
               console.log(err); //代码错误、请求失败捕获
@@ -976,6 +985,59 @@ export default {
         }
       });
     },
+    startPolling(data) {
+      if (!this.polling) {
+        this.polling = true;
+        this.statusNum = 0;
+        this.poll(data); // 调用新的poll函数开始第一次轮询
+      }
+    },
+    poll(data) {
+      if (this.isPollingStopped) {
+        console.log("轮询已停止，不再调用 getTakePicStatus");
+        return;
+      }
+      this.getTakePicStatus(data)
+        .then((shouldContinue) => {
+          if (shouldContinue) {
+            this.statusNum++;
+            if (this.statusNum < this.maxPollingAttempts) {
+              // 如果需要继续轮询，则设置下一个定时器
+              this.pollingTimer = setTimeout(() => {
+                this.poll(data); // 递归调用poll进行下一次轮询
+              }, 3000);
+            } else {
+              // 达到最大轮询次数，停止轮询
+              this.stopPolling();
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "下发指令超时，请重试！",
+                type: "warning",
+              });
+            }
+          } else {
+            // 根据getTakePicStatus的返回结果，可能在这里就需要停止轮询
+            this.stopPolling();
+          }
+        })
+        .catch((err) => {
+          console.error("轮询出错:", err);
+          this.stopPolling();
+        });
+    },
+    stopPolling() {
+      console.log(this.pollingTimer, "清除轮询不");
+      if (this.pollingTimer !== null) {
+        clearTimeout(this.pollingTimer);
+        this.pollingTimer = null;
+      }
+      this.statusNum = 0;
+      this.polling = false;
+      this.btnpicloading = false;
+      this.btnvideoloading = false;
+      this.isPollingStopped = true; // 标记轮询已停止
+    },
     //主动拍视频
     handleCommandvideo(command) {
       console.log(command);
@@ -1018,65 +1080,44 @@ export default {
     //获取装置是否下发状态
     getTakePicStatus(data) {
       console.log(data);
-      getTakePicStatusJoggle({
+      return getTakePicStatusJoggle({
         requestid: data.requestId,
         termId: this.zztermId,
         photoTime: new Date(data.taketime).getTime(),
       })
         .then((res) => {
           console.log(res);
-          //res.data  0 状态未知  1 成功 2失败
+          // res.data  0 状态未知  1 成功 2失败
-          if (
+          if (res.data.cmaStatus === 1 || res.data.picStatus === true) {
-            res.data.cmaStatus == 0 &&
+            this.stopPolling();
-            res.data.picStatus == false &&
-            this.statusNum >= 5
-          ) {
-            this.statusNum = 0;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "拍照指令已下发",
-              type: "success",
-            });
-          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            this.statusNum = 0;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
             this.$message({
               duration: 1500,
               showClose: true,
-              message: "拍照指令下发成功！",
+              message: "下发指令成功！",
               type: "success",
             });
-
+            this.timer = window.setInterval(() => {
-            clearInterval(this.timer);
+              this.newPicApi();
-            this.timer = null;
+              this.i++;
-            // this.timer = window.setInterval(() => {
+            }, 8000);
-            //   this.newPicApi();
+            return false; // 停止轮询
-            //   this.i++;
+          } else if (res.data.cmaStatus === 2) {
-            // }, 8000);
+            this.stopPolling();
-          } else if (res.data.cmaStatus == 2) {
-            this.statusNum = 0;
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
             this.$message({
               duration: 1500,
               showClose: true,
               message: "下发指令失败！",
               type: "error",
             });
+            return false; // 停止轮询
+          } else {
+            return true; // 继续轮询
           }
         })
         .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
+          console.error("获取拍照状态失败:", err);
+          this.stopPolling();
+          return false; // 停止轮询
         });
     },
 
@@ -1357,6 +1398,12 @@ export default {
     },
     clearfun() {
       console.log("清除轮询");
+      this.stopPolling();
+      if (this.pollingTimer !== null) {
+        clearTimeout(this.pollingTimer);
+        this.pollingTimer = null;
+      }
+      this.cancleFn = false;
       this.statusNum = 0;
       this.i = 0;
       //销毁主动拍照
@@ -1418,9 +1465,15 @@ export default {
   },
 
   destroyed() {
+    if (this.pollingTimer !== null) {
+      clearTimeout(this.pollingTimer);
+      this.pollingTimer = null;
+    }
+    this.cancleFn = false;
     //销毁左侧树状图
     clearInterval(this.treetimer);
     this.treetimer = null;
+    this.statusNum = 6;
     //销毁主动拍照
     clearInterval(this.statusTimer);
     this.statusTimer = null;

vue.config.js

@@ -31,12 +31,12 @@ module.exports = defineConfig({
       "/api": {
         //表示拦截以/api开头的请求路径
 
-        //target: "http://61.169.135.146:40086/", //dell, //dell服务器环境
+        target: "http://61.169.135.146:40086/", //dell, //dell服务器环境
-        target: "http://192.168.1.190:90/", //湖南
+        //target: "http://192.168.1.190:90/", //湖南 两个api
         //target: "http://192.168.50.130:80/",
         changOrigin: true, //是否开启跨域
         pathRewrite: {
-          "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
         },
       },
     },