From ddaac718e2b0d197f626e3d8a4a227c07da385ca Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Tue, 18 Feb 2025 09:20:09 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=B8=80=E7=9B=B4=E8=B0=83?= =?UTF-8?q?=E7=94=A8=E6=9F=A5=E8=AF=A2=E5=9B=BE=E7=89=87=E7=9A=84=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- socket/index.js | 4 +- src/components/common/Header.vue | 9 +- src/utils/request.js | 2 +- src/views/Login.vue | 2 +- src/views/alarmHandling/index.vue | 181 ++- src/views/realTimeMonitor/index copy 2.vue | 1719 ++++++++++++++++++++ src/views/realTimeMonitor/index.vue | 139 +- vue.config.js | 6 +- 8 files changed, 1980 insertions(+), 82 deletions(-) create mode 100644 src/views/realTimeMonitor/index copy 2.vue diff --git a/socket/index.js b/socket/index.js index deeedae..af16dfa 100644 --- a/socket/index.js +++ b/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" diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index a2ccf6a..3952938 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -1,6 +1,6 @@ diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 56e21d7..b3e26b4 100644 --- a/src/views/alarmHandling/index.vue +++ b/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.getTakePicStatus(res.data); - this.statusNum++; - }, 3000); + // this.statusTimer = window.setInterval(() => { + // this.getTakePicStatus(res.data); + // this.statusNum++; + // }, 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失败 - 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) { + // res.data 0 状态未知 1 成功 2失败 + if (res.data.cmaStatus === 1 || res.data.picStatus === true) { + this.stopPolling(); 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; + return false; // 停止轮询 + } else if (res.data.cmaStatus === 2) { + this.stopPolling(); 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的生命周期函数 + }, }; diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index 710b481..fd3f205 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/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.statusNum++; - }, 3000); + // this.getTakePicStatus(res.data); + // this.cancleFn = true; + + 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失败 - 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: "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; + // res.data 0 状态未知 1 成功 2失败 + if (res.data.cmaStatus === 1 || res.data.picStatus === true) { + this.stopPolling(); this.$message({ duration: 1500, showClose: true, - message: "拍照指令下发成功！", + message: "下发指令成功！", type: "success", }); - - 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; - this.btnvideoloading = false; - clearInterval(this.statusTimer); - this.statusTimer = null; + this.timer = window.setInterval(() => { + this.newPicApi(); + this.i++; + }, 8000); + return false; // 停止轮询 + } else if (res.data.cmaStatus === 2) { + this.stopPolling(); 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; diff --git a/vue.config.js b/vue.config.js index fbfee97..42e3921 100644 --- a/vue.config.js +++ b/vue.config.js @@ -31,12 +31,12 @@ module.exports = defineConfig({ "/api": { //表示拦截以/api开头的请求路径 - //target: "http://61.169.135.146:40086/", //dell, //dell服务器环境 - target: "http://192.168.1.190:90/", //湖南 + target: "http://61.169.135.146:40086/", //dell, //dell服务器环境 + //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的 }, }, },