完善前端WebSocket更新逻辑
This commit is contained in:
@@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user