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

hn2.0
fanluyan 4 months ago
parent a83daa23fa
commit ddaac718e2

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

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

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

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

@ -419,6 +419,11 @@ export default {
current: 0,
requestId: "", //requestid
picTime: "", //
pollingTimer: null, // 使setTimeoutpollingTimer
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,10 +835,64 @@ 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(),
@ -839,51 +900,90 @@ export default {
.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) {
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
},
};
</script>
<style lang="less">

File diff suppressed because it is too large Load Diff

@ -442,6 +442,10 @@ export default {
favorOptions: [], //
carouselKey: 0, // key
picnotiy: [],
pollingTimer: null, // 使setTimeoutpollingTimer
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,7 +1080,7 @@ export default {
//
getTakePicStatus(data) {
console.log(data);
getTakePicStatusJoggle({
return getTakePicStatusJoggle({
requestid: data.requestId,
termId: this.zztermId,
photoTime: new Date(data.taketime).getTime(),
@ -1026,57 +1088,36 @@ export default {
.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;
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;

@ -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的
},
},
},

Loading…
Cancel
Save