From 37ca88f53f2432b7f22411490b0ab2b24fbce3b3 Mon Sep 17 00:00:00 2001
From: zrj <646384940@qq.com>
Date: Wed, 11 Sep 2024 13:55:28 +0800
Subject: [PATCH] 动态读取固件升级进度
---
src/views/device/airport.vue | 169 ++++++++++++++++++++++++++++----------------------------
1 files changed, 84 insertions(+), 85 deletions(-)
diff --git a/src/views/device/airport.vue b/src/views/device/airport.vue
index ee3bc99..753e8e0 100644
--- a/src/views/device/airport.vue
+++ b/src/views/device/airport.vue
@@ -84,13 +84,11 @@
v-if="row.firmware_status == 4"
style="display: flex; flex-direction: row; align-items: center"
>
- <div style="background-color: #a8cbfb; border-radius: 4px">
- 升级中
- <el-progress
- v-if="row.firmware_progress > 0 && row.firmware_progress < 100"
- :percentage="row.firmware_progress"
- ></el-progress>
- </div>
+ <el-tag effect="dark" class="active-element" @click="updateFirmware(row)">升级中</el-tag>
+ <el-progress
+ v-if="row.firmware_progress > 0 && row.firmware_progress < 100"
+ :percentage="row.firmware_progress"
+ ></el-progress>
</div>
</template>
<template #menu="scope">
@@ -170,19 +168,26 @@
import FirmwareManage from './components/firmwareManage.vue';
import DevicePerShare from './components/devicePerShare.vue';
import DockControlPanel from './components/DockControlPanel.vue';
-
+import { getWebsocketUrl } from '@/websocket/util/config';
+import ConnectWebSocket from '@/websocket';
export default {
components: {
FirmwareManage,
DevicePerShare,
DockControlPanel,
},
+
data() {
return {
+ // 用于记录已经创建的websocket，防止重复创建
+ webSocketIdSet: new Set(),
+ // 用于保存多组websocket
+ websocketMap: new Map(),
+ scheduleNum: 0,
+ webSocket: '',
devicePerShareVisible: false,
remoteDebuggingShow: false,
curDeviceInfo: {},
-
firmwareManageVisible: false,
percentageNum: 0,
firmwareBox: false,
@@ -402,81 +407,6 @@
}
},
},
- // {
- // label: '所在市州',
- // prop: 'city_code',
- // type: 'select',
- // labelWidth: 130,
- // cascader: ['district_code'],
- // props: {
- // label: 'name',
- // value: 'code',
- // },
- // dicUrl: `/api/blade-system/region/select?code={{province_code}}`,
- // rules: [
- // {
- // required: true,
- // message: '请选择所在市州',
- // trigger: 'blur',
- // },
- // ],
- // },
- // {
- // label: '所在区县',
- // prop: 'district_code',
- // type: 'select',
- // labelWidth: 130,
- // cascader: ['town_code'],
- // props: {
- // label: 'name',
- // value: 'code',
- // },
- // dicUrl: `/api/blade-system/region/select?code={{city_code}}`,
- // rules: [
- // {
- // required: true,
- // message: '请选择所在区县',
- // trigger: 'blur',
- // },
- // ],
- // },
- // {
- // label: '所在乡镇',
- // prop: 'town_code',
- // type: 'select',
- // labelWidth: 130,
- // cascader: ['village_code'],
- // props: {
- // label: 'name',
- // value: 'code',
- // },
- // dicUrl: `/api/blade-system/region/select?code={{district_code}}`,
- // rules: [
- // {
- // required: true,
- // message: '请选择所在乡镇',
- // trigger: 'blur',
- // },
- // ],
- // },
- // {
- // label: '所在社区/村委会',
- // prop: 'village_code',
- // type: 'select',
- // labelWidth: 130,
- // props: {
- // label: 'name',
- // value: 'code',
- // },
- // dicUrl: `/api/blade-system/region/select?code={{town_code}}`,
- // rules: [
- // {
- // required: true,
- // message: '请选择所在社区/村委会',
- // trigger: 'blur',
- // },
- // ],
- // },
{
label: '在线时间',
prop: 'login_time',
@@ -547,7 +477,71 @@
return ids.join(',');
},
},
+ destroyed() {
+ this.websocketMap.forEach((k,v)=>{
+ if(null!=v){
+ v.close()
+ this.websocketMap.delete(k)
+ this.webSocketIdSet.delete(k)
+ }
+ });
+ },
methods: {
+ // 关闭所有的webscoket
+ closeAllWebsoket(){
+ this.websocketMap.forEach((k,v)=>{
+ if(null!=v){
+ v.close()
+ this.websocketMap.delete(k)
+ this.webSocketIdSet.delete(k)
+ }
+ });
+ },
+ // 连接webSocket
+ connectWebSocket(data) {
+ const webSocketId = data.workspace_id
+ if (!this.webSocketIdSet.has(webSocketId)) {
+ // 防止重复连接
+ this.webSocketIdSet.add(webSocketId);
+ const webSorketUrl = getWebsocketUrl() + '&workspace-id=' + data.workspace_id;
+ // 监听ws 消息
+ this.useConnectWebSocket(webSocketId,webSorketUrl);
+ }
+ },
+ useConnectWebSocket(webSocketId,url) {
+ const websocket = new ConnectWebSocket(url);
+ // 加入 webscoket map
+ this.websocketMap.set(webSocketId, websocket)
+ websocket?.registerMessageHandler(this.messageHandler);
+ websocket?.initSocket();
+ },
+ async messageHandler(payload) {
+ console.log(payload, 7777);
+
+ if (!payload) {
+ return;
+ }
+ if(payload.biz_code!="ota_progress"){
+ return;
+ }
+ var data = payload.data;
+ this.data.forEach(e => {
+ if (e.device_sn==data.sn && data.output.status=='in_progress'){
+ e.firmware_progress = data.output.progress.percent;
+ }
+
+ if (e.device_sn==data.sn && data.output.status=='ok') {
+ // 升级完成修改状态
+ e.firmware_status = 1
+ const webscoket = this.websocketMap.get(e.workspace_id);
+ // 关闭
+ webscoket?.close();
+ //删除对应的webscoket
+ this.websocketMap.delete(e.workspace_id);
+ this.webSocketIdSet.delete(e.workspace_id);
+ }
+ });
+ },
init() {
this.onLoad(this.page);
},
@@ -728,6 +722,7 @@
this.onLoad(this.page, this.query);
},
onLoad(page, params = {}) {
+ this.closeAllWebsoket()
const { releaseTimeRange } = this.query;
let values = {
...params,
@@ -748,6 +743,9 @@
this.page.total = data.total;
data.records.forEach(e => {
e['hasChildren'] = e.has_children;
+ if (e.firmware_status == 4) {
+ this.connectWebSocket(e);
+ }
});
this.data = data.records;
this.loading = false;
@@ -759,7 +757,8 @@
childSn: tree.child_sn,
};
getList(1, 10, params).then(res => {
- resolve(res.data.data.records);
+ const data = res.data.data.records;
+ resolve(data);
});
},
},
--
Gitblit v1.9.3