feat(aiot): 添加 aiot 全部业务视图页面

- alarm/list:告警列表(搜索、详情弹窗、处理/忽略操作)
- alarm/summary:摄像头告警汇总(跳转到对应摄像头告警列表)
- device/camera:摄像头通道管理(跳转配置 ROI)
- device/roi:ROI 区域配置列表(删除操作)
- video/live:实时视频播放(输入设备/通道 ID 播放)
- edge/node:边缘节点管理(状态徽标、运行时长、帧数统计)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-06 16:40:43 +08:00
parent 159a82aaa9
commit c601395a03
9 changed files with 1161 additions and 0 deletions

View File

@@ -0,0 +1,99 @@
<script setup lang="ts">
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiotDeviceApi } from '#/api/aiot/device';
import { ref } from 'vue';
import { Page } from '@vben/common-ui';
import { message, Modal, Tag } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteRoi, getRoiPage } from '#/api/aiot/device';
import { useRoiGridColumns } from './data';
defineOptions({ name: 'AiotDeviceRoi' });
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 删除 ROI */
async function handleDelete(row: AiotDeviceApi.Roi) {
Modal.confirm({
title: '删除确认',
content: `确定要删除 ROI "${row.name}" 吗?`,
async onOk() {
const hideLoading = message.loading({
content: '正在删除...',
duration: 0,
});
try {
await deleteRoi(row.id as number);
message.success('删除成功');
handleRefresh();
} catch (error) {
console.error('删除失败:', error);
throw error;
} finally {
hideLoading();
}
},
});
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useRoiGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await getRoiPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
},
} as VxeTableGridOptions<AiotDeviceApi.Roi>,
});
</script>
<template>
<Page auto-content-height>
<Grid table-title="ROI 区域配置">
<!-- 启用状态列 -->
<template #enabled="{ row }">
<Tag :color="row.enabled ? 'success' : 'default'">
{{ row.enabled ? '启用' : '禁用' }}
</Tag>
</template>
<!-- 操作列 -->
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '删除',
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
onClick: handleDelete.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>