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,110 @@
<script setup lang="ts">
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiotDeviceApi } from '#/api/aiot/device';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { Tag } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getChannelPage } from '#/api/aiot/device';
defineOptions({ name: 'AiotDeviceCamera' });
const router = useRouter();
/** 配置 ROI */
function handleConfigRoi(row: AiotDeviceApi.Channel) {
router.push({
path: '/aiot/device/roi',
query: { channelId: row.channelId },
});
}
const [Grid] = useVbenVxeGrid({
gridOptions: {
columns: [
{
field: 'channelId',
title: '通道编号',
minWidth: 180,
},
{
field: 'name',
title: '通道名称',
minWidth: 150,
},
{
field: 'manufacturer',
title: '厂商',
minWidth: 100,
},
{
field: 'status',
title: '状态',
minWidth: 80,
slots: { default: 'status' },
},
{
field: 'ptztypeText',
title: 'PTZ 类型',
minWidth: 100,
},
{
title: '操作',
width: 120,
fixed: 'right',
slots: { default: 'actions' },
},
],
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await getChannelPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
});
},
},
},
rowConfig: {
keyField: 'channelId',
isHover: true,
},
toolbarConfig: {
refresh: true,
},
} as VxeTableGridOptions<AiotDeviceApi.Channel>,
});
</script>
<template>
<Page auto-content-height>
<Grid table-title="摄像头管理">
<!-- 状态列 -->
<template #status="{ row }">
<Tag :color="row.status === 'ON' ? 'success' : 'default'">
{{ row.status === 'ON' ? '在线' : '离线' }}
</Tag>
</template>
<!-- 操作列 -->
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '配置ROI',
type: 'link',
icon: ACTION_ICON.EDIT,
onClick: handleConfigRoi.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>