完善前端WebSocket更新逻辑

This commit is contained in:
BBIT-Kai
2025-12-30 17:56:07 +08:00
parent 3c1128b356
commit d6c7f209c7
6 changed files with 32 additions and 37 deletions
+2 -2
View File
@@ -78,13 +78,13 @@ async function deleteDevice(id: string) {
async function iotSendCommand( async function iotSendCommand(
id: string, id: string,
command: string, command: string,
project: string, dept_id: string,
device_type: string, device_type: string,
) { ) {
return pyRequestClient.post('/iot/common/device/command', { return pyRequestClient.post('/iot/common/device/command', {
id, id,
command, command,
project, dept_id,
device_type, device_type,
}); });
} }
+4 -2
View File
@@ -45,8 +45,10 @@ async function deleteUpdate(id: string) {
/** /**
* 上传 * 上传
*/ */
export async function getUpdateUploadUrl() { export async function getUpdateUploadUrl(filename: string) {
return pyRequestClient.get('/iot/common/update/getUploadUrl'); return pyRequestClient.get('/iot/common/update/getUploadUrl',{
params: {filename}
});
} }
/** /**
@@ -172,12 +172,6 @@ export function useColumns<T = SystemUserApi.SystemUser>(
title: '当前状态', title: '当前状态',
width: 100, width: 100,
}, },
{
field: 'project',
slots: { default: 'project' },
title: '所属IoT项目',
width: 100,
},
{ {
field: 'device_type', field: 'device_type',
slots: { default: 'deviceType' }, slots: { default: 'deviceType' },
@@ -187,7 +181,7 @@ export function useColumns<T = SystemUserApi.SystemUser>(
{ {
field: 'dept_name', field: 'dept_name',
minWidth: 120, minWidth: 120,
title: '所属组织', title: '所属组织/项目',
}, },
{ {
cellRender: { cellRender: {
@@ -207,11 +201,6 @@ export function useColumns<T = SystemUserApi.SystemUser>(
title: '管理员', title: '管理员',
width: 100, width: 100,
}, },
{
field: 'created_at',
title: '创建时间',
width: 150,
},
{ {
field: 'remark', field: 'remark',
title: '备注', title: '备注',
@@ -259,8 +248,13 @@ export function useColumns<T = SystemUserApi.SystemUser>(
}, },
{ {
field: 'last_seen', field: 'last_seen',
title: '信息更新时间', title: '设备信息更新时间',
width: 100, width: 150,
},
{
field: 'created_at',
title: '创建时间',
width: 150,
}, },
{ {
field: 'operation', field: 'operation',
@@ -24,6 +24,7 @@ import {
import { useColumns, useGridFormSchema } from './data'; import { useColumns, useGridFormSchema } from './data';
import Form from './form.vue'; import Form from './form.vue';
import { useAccessStore } from "@vben/stores";
const [FormDrawer, formDrawerApi] = useVbenDrawer({ const [FormDrawer, formDrawerApi] = useVbenDrawer({
connectedComponent: Form, connectedComponent: Form,
@@ -164,7 +165,7 @@ function onEdit(row: SystemDeviceApi.SystemDevice) {
} }
async function onCommand(data: SystemDeviceApi.SystemDevice, command: string) { async function onCommand(data: SystemDeviceApi.SystemDevice, command: string) {
await iotSendCommand(data.name, command, data.project, data.device_type); await iotSendCommand(data.name, command, data.dept_id, data.device_type);
} }
function onDelete(row: SystemDeviceApi.SystemDevice) { function onDelete(row: SystemDeviceApi.SystemDevice) {
@@ -197,18 +198,30 @@ function onCreate() {
const wsState = reactive({ const wsState = reactive({
ws: null as null | WebSocket, ws: null as null | WebSocket,
}); });
let ws: null | WebSocket = null;
onMounted(() => { function createWs(token: string) {
const ws = new WebSocket('wss://ai.ronsunny.cn:8090/ai/iot/ws/device-status'); ws = new WebSocket(
// `wss://ai.ronsunny.cn:8090/ai/iot/ws/device-status?token=${token}`,
`ws://127.0.0.1:13011/iot/ws/device-status?token=${token}`,
);
wsState.ws = ws; wsState.ws = ws;
ws.onmessage = async (e) => { ws.onmessage = async (e) => {
const msg = JSON.parse(e.data); const msg = JSON.parse(e.data);
console.log('WS 事件', msg); console.log('WS 事件', msg);
if (msg.type === 'status') {
await gridApi.query();
}
// 简单策略:任何设备上下线都刷新列表 后续改进针对单行 // 简单策略:任何设备上下线都刷新列表 后续改进针对单行
await gridApi.query();
}; };
}
const accessStore = useAccessStore();
onMounted(() => {
if (accessStore.accessToken) {
createWs(accessStore.accessToken);
}
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -238,12 +251,6 @@ onBeforeUnmount(() => {
</Tag> </Tag>
<Tag v-else style="color: gray">其他</Tag> <Tag v-else style="color: gray">其他</Tag>
</template> </template>
<template #project="{ row }">
<Tag v-if="row.project === 'sentinel'" style="color: #eb6bff">
牧安云哨
</Tag>
<Tag v-else style="color: gray">其他</Tag>
</template>
</Grid> </Grid>
</Page> </Page>
</template> </template>
@@ -72,7 +72,7 @@ export function useFormSchema(uploadState: {
uploadState.sizeKb = Number((file.size / 1024).toFixed(2)); uploadState.sizeKb = Number((file.size / 1024).toFixed(2));
// 获取上传地址 // 获取上传地址
const { uploadUrl, id } = await api.getUpdateUploadUrl(); const { uploadUrl, id } = await api.getUpdateUploadUrl(file.name);
// PUT 上传 // PUT 上传
await axios.put(uploadUrl, file, { await axios.put(uploadUrl, file, {
@@ -192,14 +192,6 @@ onMounted(() => {
createWs(accessStore.accessToken); createWs(accessStore.accessToken);
} }
}); });
watch(
() => accessStore.accessToken,
(newToken, oldToken) => {
if (newToken && newToken !== oldToken) {
createWs(newToken);
}
},
);
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (ws) { if (ws) {