完善前端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(
id: string,
command: string,
project: string,
dept_id: string,
device_type: string,
) {
return pyRequestClient.post('/iot/common/device/command', {
id,
command,
project,
dept_id,
device_type,
});
}
+4 -2
View File
@@ -45,8 +45,10 @@ async function deleteUpdate(id: string) {
/**
* 上传
*/
export async function getUpdateUploadUrl() {
return pyRequestClient.get('/iot/common/update/getUploadUrl');
export async function getUpdateUploadUrl(filename: string) {
return pyRequestClient.get('/iot/common/update/getUploadUrl',{
params: {filename}
});
}
/**
@@ -172,12 +172,6 @@ export function useColumns<T = SystemUserApi.SystemUser>(
title: '当前状态',
width: 100,
},
{
field: 'project',
slots: { default: 'project' },
title: '所属IoT项目',
width: 100,
},
{
field: 'device_type',
slots: { default: 'deviceType' },
@@ -187,7 +181,7 @@ export function useColumns<T = SystemUserApi.SystemUser>(
{
field: 'dept_name',
minWidth: 120,
title: '所属组织',
title: '所属组织/项目',
},
{
cellRender: {
@@ -207,11 +201,6 @@ export function useColumns<T = SystemUserApi.SystemUser>(
title: '管理员',
width: 100,
},
{
field: 'created_at',
title: '创建时间',
width: 150,
},
{
field: 'remark',
title: '备注',
@@ -259,8 +248,13 @@ export function useColumns<T = SystemUserApi.SystemUser>(
},
{
field: 'last_seen',
title: '信息更新时间',
width: 100,
title: '设备信息更新时间',
width: 150,
},
{
field: 'created_at',
title: '创建时间',
width: 150,
},
{
field: 'operation',
@@ -24,6 +24,7 @@ import {
import { useColumns, useGridFormSchema } from './data';
import Form from './form.vue';
import { useAccessStore } from "@vben/stores";
const [FormDrawer, formDrawerApi] = useVbenDrawer({
connectedComponent: Form,
@@ -164,7 +165,7 @@ function onEdit(row: SystemDeviceApi.SystemDevice) {
}
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) {
@@ -197,18 +198,30 @@ function onCreate() {
const wsState = reactive({
ws: null as null | WebSocket,
});
let ws: null | WebSocket = null;
onMounted(() => {
const ws = new WebSocket('wss://ai.ronsunny.cn:8090/ai/iot/ws/device-status');
function createWs(token: string) {
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;
ws.onmessage = async (e) => {
const msg = JSON.parse(e.data);
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(() => {
@@ -238,12 +251,6 @@ onBeforeUnmount(() => {
</Tag>
<Tag v-else style="color: gray">其他</Tag>
</template>
<template #project="{ row }">
<Tag v-if="row.project === 'sentinel'" style="color: #eb6bff">
牧安云哨
</Tag>
<Tag v-else style="color: gray">其他</Tag>
</template>
</Grid>
</Page>
</template>
@@ -72,7 +72,7 @@ export function useFormSchema(uploadState: {
uploadState.sizeKb = Number((file.size / 1024).toFixed(2));
// 获取上传地址
const { uploadUrl, id } = await api.getUpdateUploadUrl();
const { uploadUrl, id } = await api.getUpdateUploadUrl(file.name);
// PUT 上传
await axios.put(uploadUrl, file, {
@@ -192,14 +192,6 @@ onMounted(() => {
createWs(accessStore.accessToken);
}
});
watch(
() => accessStore.accessToken,
(newToken, oldToken) => {
if (newToken && newToken !== oldToken) {
createWs(newToken);
}
},
);
onBeforeUnmount(() => {
if (ws) {