From b72839622e68656e75e4f8b1b45d24313498e04d Mon Sep 17 00:00:00 2001
From: 16337 <1633794139@qq.com>
Date: Sun, 8 Feb 2026 23:24:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(aiot-device):=20=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=E6=91=84=E5=83=8F=E5=A4=B4=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E8=BF=81=E7=A7=BB=20WVP=20=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

从 WVP 的 cameraConfig/index.vue 迁移至 Vue3 + Ant Design：
- 搜索过滤：支持名称/地址搜索和拉流状态筛选
- 摄像头列表：显示应用名、流ID、拉流地址、状态
- ROI 数量徽标：异步加载每个摄像头的 ROI 数量
- 操作按钮：ROI 配置（跳转）、拉流/停止、导出配置
- 配置导出：JSON 文件下载

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/views/aiot/device/camera/index.vue    | 286 ++++++++++++------
 1 file changed, 201 insertions(+), 85 deletions(-)

diff --git a/apps/web-antd/src/views/aiot/device/camera/index.vue b/apps/web-antd/src/views/aiot/device/camera/index.vue
index a4f7e66c5..cd930010a 100644
--- a/apps/web-antd/src/views/aiot/device/camera/index.vue
+++ b/apps/web-antd/src/views/aiot/device/camera/index.vue
@@ -1,110 +1,226 @@
 <script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiotDeviceApi } from '#/api/aiot/device';
 
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 
-import { Tag } from 'ant-design-vue';
+import {
+  Badge,
+  Button,
+  Input,
+  message,
+  Select,
+  Space,
+  Table,
+  Tag,
+} from 'ant-design-vue';
 
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getChannelPage } from '#/api/aiot/device';
+import {
+  exportConfig,
+  getCameraList,
+  getRoiByCameraId,
+  startCamera,
+  stopCamera,
+} 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 loading = ref(false);
+const cameraList = ref<AiotDeviceApi.Camera[]>([]);
+const roiCounts = ref<Record<string, number>>({});
+const page = ref(1);
+const pageSize = ref(15);
+const total = ref(0);
+const searchQuery = ref('');
+const searchPulling = ref<string | undefined>(undefined);
+
+const columns = [
+  { title: '应用名', dataIndex: 'app', width: 100 },
+  { title: '流ID', dataIndex: 'stream', width: 120 },
+  { title: '拉流地址', dataIndex: 'srcUrl', ellipsis: true },
+  { title: '状态', key: 'pulling', width: 100 },
+  { title: 'ROI数量', key: 'roiCount', width: 100 },
+  { title: '操作', key: 'actions', width: 260, fixed: 'right' as const },
+];
+
+async function loadData() {
+  loading.value = true;
+  try {
+    const res = await getCameraList({
+      page: page.value,
+      count: pageSize.value,
+      query: searchQuery.value || undefined,
+      pulling:
+        searchPulling.value === undefined
+          ? undefined
+          : searchPulling.value === 'true',
+    });
+    cameraList.value = res.list || [];
+    total.value = res.total || 0;
+    loadRoiCounts();
+  } catch {
+    message.error('加载失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function loadRoiCounts() {
+  cameraList.value.forEach((cam) => {
+    const cameraId = `${cam.app}/${cam.stream}`;
+    getRoiByCameraId(cameraId)
+      .then((data: any) => {
+        const items = Array.isArray(data) ? data : [];
+        roiCounts.value = { ...roiCounts.value, [cameraId]: items.length };
+      })
+      .catch(() => {});
   });
 }
 
-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,
-          });
-        },
-      },
+function handleRoiConfig(row: AiotDeviceApi.Camera) {
+  router.push({
+    path: '/aiot/device/roi',
+    query: {
+      cameraId: `${row.app}/${row.stream}`,
+      app: row.app,
+      stream: row.stream,
+      srcUrl: row.srcUrl,
     },
-    rowConfig: {
-      keyField: 'channelId',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-    },
-  } as VxeTableGridOptions<AiotDeviceApi.Channel>,
+  });
+}
+
+async function toggleStream(row: AiotDeviceApi.Camera) {
+  try {
+    if (row.pulling) {
+      await stopCamera(row.id!);
+      message.success('已停止');
+    } else {
+      await startCamera(row.id!);
+      message.success('开始拉流');
+    }
+    loadData();
+  } catch {
+    message.error('操作失败');
+  }
+}
+
+async function handleExport(row: AiotDeviceApi.Camera) {
+  const cameraId = `${row.app}/${row.stream}`;
+  try {
+    const data = await exportConfig(cameraId);
+    const json = JSON.stringify(data, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `config_${row.app}_${row.stream}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  } catch {
+    message.error('导出失败');
+  }
+}
+
+function handlePageChange(p: number, size: number) {
+  page.value = p;
+  pageSize.value = size;
+  loadData();
+}
+
+onMounted(() => {
+  loadData();
 });
 </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),
-            },
-          ]"
+    <div style="padding: 16px">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          margin-bottom: 16px;
+          gap: 8px;
+        "
+      >
+        <Input
+          v-model:value="searchQuery"
+          placeholder="搜索摄像头名称/地址"
+          style="width: 250px"
+          allow-clear
+          @press-enter="loadData"
         />
-      </template>
-    </Grid>
+        <Select
+          v-model:value="searchPulling"
+          placeholder="拉流状态"
+          style="width: 130px"
+          allow-clear
+          :options="[
+            { value: 'true', label: '拉流中' },
+            { value: 'false', label: '未拉流' },
+          ]"
+          @change="loadData"
+        />
+        <Button type="primary" @click="loadData">查询</Button>
+      </div>
+
+      <Table
+        :columns="columns"
+        :data-source="cameraList"
+        :loading="loading"
+        :pagination="{
+          current: page,
+          pageSize,
+          total,
+          showSizeChanger: true,
+          pageSizeOptions: ['15', '25', '50'],
+          showTotal: (t: number) => `共 ${t} 条`,
+          onChange: handlePageChange,
+        }"
+        :scroll="{ x: 900 }"
+        row-key="id"
+        bordered
+        size="middle"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'pulling'">
+            <Tag :color="record.pulling ? 'success' : 'default'">
+              {{ record.pulling ? '拉流中' : '未拉流' }}
+            </Tag>
+          </template>
+          <template v-else-if="column.key === 'roiCount'">
+            <Badge
+              :count="roiCounts[`${record.app}/${record.stream}`] ?? 0"
+              :number-style="{ backgroundColor: '#1677ff' }"
+              show-zero
+            />
+          </template>
+          <template v-else-if="column.key === 'actions'">
+            <Space>
+              <Button
+                type="primary"
+                size="small"
+                @click="handleRoiConfig(record)"
+              >
+                ROI配置
+              </Button>
+              <Button
+                :type="record.pulling ? 'default' : 'primary'"
+                :danger="record.pulling"
+                size="small"
+                @click="toggleStream(record)"
+              >
+                {{ record.pulling ? '停止' : '拉流' }}
+              </Button>
+              <Button size="small" @click="handleExport(record)">导出</Button>
+            </Space>
+          </template>
+        </template>
+      </Table>
+    </div>
   </Page>
 </template>