ai分析

apps/web-ele/src/api/aiAnalysis/aiAnalysis.ts

@@ -0,0 +1,176 @@
+import type { DetectStatisticsModel, WarningStatisticsModel, SecurityAlertModel, SecurityCameraModel } from './model';
+
+import type { BaseResult } from '#/api/base-result';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+// API路径常量枚举
+enum Api {
+  // 检测统计
+  detectStatistics = '/security/statistics/detect',
+  // 预警分类统计
+  warningStatistics = '/security/statistics/warning',
+  
+  // 预警记录相关
+  alertRoot = '/securityAlert/alert',
+  alertList = '/securityAlert/alert/list',
+  alertExport = '/securityAlert/alert/export',
+  alertHandle = '/securityAlert/alert/handle',
+  
+  // 摄像头设备相关
+  cameraRoot = '/securityCamera/camera',
+  cameraList = '/securityCamera/camera/list',
+  cameraExport = '/securityCamera/camera/export',
+}
+
+/**
+ * 查询检测统计
+ * @returns 检测统计结果
+ */
+export function getDetectStatistics() {
+  return requestClient.get<BaseResult<DetectStatisticsModel>>(Api.detectStatistics);
+}
+
+/**
+ * 查询每个分类的预警未处理数量
+ * @returns 预警分类统计结果
+ */
+export function getWarningStatistics() {
+  return requestClient.get<BaseResult<WarningStatisticsModel[]>>(Api.warningStatistics);
+}
+
+/**
+ * 查询预警记录列表
+ * @param params 查询参数
+ * @returns 预警记录列表
+ */
+export function getSecurityAlertList(params: any) {
+  return requestClient.get<BaseResult<SecurityAlertModel[]>>(Api.alertList, {
+    params,
+  });
+}
+
+/**
+ * 获取预警记录详细信息
+ * @param alertId 预警ID
+ * @returns 预警记录详情
+ */
+export function getSecurityAlertDetail(alertId: number) {
+  return requestClient.get<SecurityAlertModel>(`${Api.alertRoot}/${alertId}`);
+}
+
+/**
+ * 新增预警记录
+ * @param data 预警记录数据
+ * @returns 操作结果
+ */
+export function addSecurityAlert(data: SecurityAlertModel) {
+  return requestClient.post(Api.alertRoot, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 修改预警记录
+ * @param data 预警记录数据
+ * @returns 操作结果
+ */
+export function updateSecurityAlert(data: SecurityAlertModel) {
+  return requestClient.put(Api.alertRoot, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 删除预警记录
+ * @param alertIds 预警ID数组
+ * @returns 操作结果
+ */
+export function deleteSecurityAlert(alertIds: number[]) {
+  return requestClient.delete(`${Api.alertRoot}/${alertIds.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 导出预警记录列表
+ * @param data 导出参数
+ * @returns 导出结果
+ */
+export function exportSecurityAlert(data: Partial<SecurityAlertModel>) {
+  return commonExport(Api.alertExport, data);
+}
+
+/**
+ * 处理预警记录
+ * @param data 处理参数
+ * @returns 操作结果
+ */
+export function handleSecurityAlert(data: any) {
+  return requestClient.put(Api.alertHandle, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 查询摄像头设备列表
+ * @param params 查询参数
+ * @returns 摄像头设备列表
+ */
+export function getSecurityCameraList(params: any) {
+  return requestClient.get<BaseResult<SecurityCameraModel[]>>(Api.cameraList, {
+    params,
+  });
+}
+
+/**
+ * 获取摄像头设备详细信息
+ * @param cameraId 摄像头ID
+ * @returns 摄像头设备详情
+ */
+export function getSecurityCameraDetail(cameraId: number) {
+  return requestClient.get<SecurityCameraModel>(`${Api.cameraRoot}/${cameraId}`);
+}
+
+/**
+ * 新增摄像头设备
+ * @param data 摄像头设备数据
+ * @returns 操作结果
+ */
+export function addSecurityCamera(data: SecurityCameraModel) {
+  return requestClient.post(Api.cameraRoot, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 修改摄像头设备
+ * @param data 摄像头设备数据
+ * @returns 操作结果
+ */
+export function updateSecurityCamera(data: SecurityCameraModel) {
+  return requestClient.put(Api.cameraRoot, data, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 删除摄像头设备
+ * @param cameraIds 摄像头ID数组
+ * @returns 操作结果
+ */
+export function deleteSecurityCamera(cameraIds: number[]) {
+  return requestClient.delete(`${Api.cameraRoot}/${cameraIds.join(',')}`, {
+    successMessageMode: 'message',
+  });
+}
+
+/**
+ * 导出摄像头设备列表
+ * @param data 导出参数
+ * @returns 导出结果
+ */
+export function exportSecurityCamera(data: Partial<SecurityCameraModel>) {
+  return commonExport(Api.cameraExport, data);
+}

apps/web-ele/src/api/aiAnalysis/model.ts

@@ -0,0 +1,123 @@
+// 检测统计模型
+export interface DetectStatisticsModel {
+  /** 摄像头数量 */
+  cameraCount?: number;
+  /** 预警数量 */
+  alertCount?: number;
+  /** 场站数量 */
+  stationCount?: number;
+  /** 预警类型数量 */
+  alertTypes?: number;
+}
+
+// 预警分类统计模型
+export interface WarningStatisticsModel {
+  /** 预警类型名称 */
+  alertTypeName?: string;
+  /** 预警类型代码 */
+  alertType?: string;
+  /** 数量 */
+  count?: number;
+  /** 月度数量 */
+  monthCount?: number;
+}
+
+// 预警记录模型
+export interface SecurityAlertModel {
+  /** 预警ID */
+  alertId?: number;
+  /** 预警编号 */
+  alertCode?: string;
+  /** 摄像头ID */
+  cameraId?: number;
+  /** 关联识别记录ID */
+  detectRecordId?: number;
+  /** 预警类型（fire火焰 smoke烟雾 fire_danger火灾 intrusion入侵等） */
+  alertType?: string;
+  /** 预警级别（1一般 2重要 3紧急） */
+  alertLevel?: string;
+  /** 识别置信度 */
+  confidence?: number;
+  /** 快照图片URL */
+  snapshotUrl?: string;
+  /** 快照图片存储路径 */
+  snapshotPath?: string;
+  /** 预警时间 */
+  alertTime?: string;
+  /** 处理状态（unhandled未处理 handling处理中 resolved已解决 false_alarm误报） */
+  status?: string;
+  /** 处理人ID */
+  handleUserId?: number;
+  /** 处理时间 */
+  handleTime?: string;
+  /** 处理备注 */
+  handleRemark?: string;
+  /** 预警位置 */
+  location?: string;
+  /** 场站ID */
+  stationId?: number;
+  /** 场站名称 */
+  stationName?: string;
+  /** 站长ID */
+  stationManagerId?: number;
+  /** 站长姓名 */
+  stationManagerName?: string;
+  /** 站长电话 */
+  stationManagerPhone?: string;
+  /** 片区ID */
+  areaId?: number;
+  /** 片区经理ID */
+  areaManagerId?: number;
+  /** 片区经理姓名 */
+  areaManagerName?: string;
+  /** 片区经理电话 */
+  areaManagerPhone?: string;
+}
+
+// 摄像头设备模型
+export interface SecurityCameraModel {
+  /** 摄像头ID */
+  cameraId?: number;
+  /** 摄像头编码（唯一） */
+  cameraCode?: string;
+  /** 摄像头名称 */
+  cameraName?: string;
+  /** 所属场站id */
+  stationId?: number;
+  /** 摄像头类型（IPC枪机 PTZ球机 DOME半球） */
+  cameraType?: string;
+  /** IP地址 */
+  ipAddress?: string;
+  /** 端口号 */
+  port?: number;
+  /** 登录用户名 */
+  username?: string;
+  /** 登录密码（加密存储） */
+  password?: string;
+  /** RTSP流地址 */
+  rtspUrl?: string;
+  /** HTTP预览地址 */
+  httpUrl?: string;
+  /** 安装位置 */
+  location?: string;
+  /** 经度 */
+  longitude?: number;
+  /** 纬度 */
+  latitude?: number;
+  /** 是否启用AI识别（0否 1是） */
+  aiEnabled?: string;
+  /** 对接平台类型（宇视/海康/大华等） */
+  platformType?: string;
+  /** 平台设备ID */
+  platformId?: string;
+  /** 设备状态（0在线 1离线 2故障） */
+  status?: string;
+  /** 最后在线时间 */
+  lastOnlineTime?: string;
+  /** 最后维护时间 */
+  lastMaintenance?: string;
+  /** 维护周期（天） */
+  maintenanceCycle?: number;
+  /** 删除标志（0代表存在 2代表删除） */
+  delFlag?: string;
+}

apps/web-ele/src/router/routes/local.ts

@@ -279,6 +279,28 @@ const localRoutes: RouteRecordStringComponent[] = [
     name: 'AddClass',
     path: '/schedule/work/class/addandedit',
   },
+  {
+    component: '/aiAnalysis/camera/detail',
+    meta: {
+      activePath: '/aiAnalysis/camera',
+      icon: 'carbon:information',
+      title: '摄像头详情',
+      hideInMenu: true,
+    },
+    name: 'CameraDetail',
+    path: '/aiAnalysis/camera/detail/:cameraId',
+  },
+  {
+    component: '/aiAnalysis/warning/detail',
+    meta: {
+      activePath: '/aiAnalysis/warning',
+      icon: 'carbon:information',
+      title: '预警详情',
+      hideInMenu: true,
+    },
+    name: 'WarningDetail',
+    path: '/aiAnalysis/warning/detail/:alertId',
+  },
 ];
 
 /**

apps/web-ele/src/views/aiAnalysis/camera/camera-data.tsx

@@ -0,0 +1,284 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { selectAllSysStation } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
+
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'location',
+    label: '摄像头位置',
+    componentProps: {
+      placeholder: '请输入摄像头位置',
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'httpUrl',
+    label: '通道地址',
+    componentProps: {
+      placeholder: '请输入通道地址',
+    },
+  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'stationId',
+    label: '所属场站',
+    componentProps: {
+      placeholder: '请选择所属场站',
+      api: async () => {
+        const resp = await selectAllSysStation();
+        const data = resp || [];
+        return Array.isArray(data)
+          ? data.map((item: any) => ({
+              label: item.stationName,
+              value: item.id.toString(),
+            }))
+          : [];
+      },
+    },
+  },
+];
+
+export const tableColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 80,
+    fixed: 'left',
+  },
+  {
+    field: 'location',
+    title: '摄像头位置',
+    minWidth: 150,
+    fixed: 'left',
+  },
+  {
+    field: 'stationName',
+    title: '所属场站',
+    minWidth: 120,
+    fixed: 'left',
+  },
+  {
+    field: 'httpUrl',
+    title: '通道地址',
+    minWidth: 200,
+  },
+  {
+    field: 'cameraName',
+    title: '摄像头名称',
+    minWidth: 120,
+  },
+  {
+    field: 'cameraCode',
+    title: '摄像头编码',
+    minWidth: 120,
+  },
+  {
+    field: 'cameraType',
+    title: '摄像头类型',
+    minWidth: 100,
+  },
+  {
+    field: 'ipAddress',
+    title: 'IP地址',
+    minWidth: 120,
+  },
+  {
+    field: 'aiEnabled',
+    title: '是否启用AI',
+    minWidth: 100,
+    formatter: (params: { cellValue: string }) => {
+      return params.cellValue === '1' ? '是' : '否';
+    },
+  },
+  {
+    field: 'status',
+    title: '设备状态',
+    minWidth: 100,
+    formatter: (params: { cellValue: string }) => {
+      const statusMap = {
+        '0': '在线',
+        '1': '离线',
+        '2': '故障',
+      };
+      return statusMap[params.cellValue] || params.cellValue;
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 220,
+  },
+];
+
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'cameraId',
+  },
+  {
+    component: 'Input',
+    fieldName: 'cameraCode',
+    label: '设备编号',
+    componentProps: {
+      placeholder: '请输入设备编号（唯一）',
+      maxlength: 100,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'cameraName',
+    label: '设备名称',
+    componentProps: {
+      placeholder: '请输入设备名称',
+      maxlength: 100,
+    },
+  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'stationId',
+    label: '所属场站',
+    componentProps: {
+      placeholder: '请选择所属场站',
+      api: async () => {
+        const resp = await selectAllSysStation();
+        const data = resp || [];
+        return Array.isArray(data)
+          ? data.map((item: any) => ({
+              label: item.stationName,
+              value: item.id.toString(),
+            }))
+          : [];
+      },
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'cameraType',
+    label: '摄像头类型',
+    componentProps: {
+      placeholder: '请输入摄像头类型（IPC枪机/PTZ球机/DOME半球）',
+      maxlength: 50,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'ipAddress',
+    label: 'IP地址',
+    componentProps: {
+      placeholder: '请输入IP地址',
+      maxlength: 50,
+    },
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'port',
+    label: '端口号',
+    componentProps: {
+      placeholder: '请输入端口号',
+      style: {
+        width: '100%',
+      },
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'username',
+    label: '登录用户名',
+    componentProps: {
+      placeholder: '请输入登录用户名',
+      maxlength: 50,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'password',
+    label: '登录密码',
+    componentProps: {
+      placeholder: '请输入登录密码',
+      maxlength: 100,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'rtspUrl',
+    label: 'RTSP流地址',
+    componentProps: {
+      placeholder: '请输入RTSP视频流地址',
+      maxlength: 200,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'httpUrl',
+    label: 'HTTP流地址',
+    componentProps: {
+      placeholder: '请输入HTTP视频流地址',
+      maxlength: 200,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'location',
+    label: '摄像头位置',
+    componentProps: {
+      placeholder: '请输入摄像头位置',
+      maxlength: 100,
+    },
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'longitude',
+    label: '经度',
+    componentProps: {
+      placeholder: '请输入经度',
+      style: {
+        width: '100%',
+      },
+    },
+  },
+  {
+    component: 'InputNumber',
+    fieldName: 'latitude',
+    label: '纬度',
+    componentProps: {
+      placeholder: '请输入纬度',
+      style: {
+        width: '100%',
+      },
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'aiEnabled',
+    label: '是否启用AI识别',
+    componentProps: {
+      placeholder: '请选择是否启用AI识别',
+      options: [
+        { label: '是', value: '1' },
+        { label: '否', value: '0' },
+      ],
+    },
+  },
+  {
+    component: 'Select',
+    fieldName: 'status',
+    label: '设备状态',
+    componentProps: {
+      placeholder: '请选择设备状态',
+      options: [
+        { label: '在线', value: '0' },
+        { label: '离线', value: '1' },
+      ],
+    },
+  },
+];
+

apps/web-ele/src/views/aiAnalysis/camera/camera-drawer.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+
+import { addSecurityCamera, getSecurityCameraDetail, updateSecurityCamera } from '#/api/aiAnalysis/aiAnalysis';
+import { drawerFormSchema } from './camera-data';
+
+const emit = defineEmits<{
+  reload: [];
+}>();
+
+// 响应式变量
+const isUpdateRef = ref<boolean>(false);
+
+// 初始化表单
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: drawerFormSchema(),
+});
+
+// 初始化抽屉
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    await handleDrawerOpen();
+  },
+
+  async onConfirm() {
+    await handleFormSubmit();
+  },
+
+  onClosed() {
+    formApi.resetForm();
+  },
+});
+
+/**
+ * 处理抽屉打开逻辑
+ */
+async function handleDrawerOpen() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { cameraId, isUpdate } = drawerApi.getData();
+    isUpdateRef.value = isUpdate;
+
+    // 处理编辑模式的数据回显
+    if (isUpdate && cameraId) {
+      await loadCameraDetail(cameraId);
+    }
+  } catch (error) {
+    console.error('打开抽屉失败:', error);
+  } finally {
+    drawerApi.drawerLoading(false);
+  }
+}
+
+/**
+ * 加载摄像头详情数据
+ * @param cameraId 摄像头ID
+ */
+async function loadCameraDetail(cameraId: number | string) {
+  try {
+    const res = await getSecurityCameraDetail(cameraId);
+
+    // 确保从正确的响应结构中获取数据
+    const detailData = res?.data || res;
+
+    // 设置表单值
+    await formApi.setValues(detailData);
+  } catch (error) {
+    console.error('获取摄像头详情失败:', error);
+  }
+}
+
+/**
+ * 处理表单提交
+ */
+async function handleFormSubmit() {
+  try {
+    // 验证表单
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+
+    // 获取表单数据
+    const data = await formApi.getValues();
+    console.log('表单数据:', data);
+
+    // 提交请求
+    await (isUpdateRef.value
+      ? updateSecurityCamera({ ...data, cameraId: drawerApi.getData().cameraId })
+      : addSecurityCamera(data));
+
+    // 触发重载事件并关闭抽屉
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error('保存摄像头信息失败:', error);
+  }
+}
+</script>
+
+<template>
+  <Drawer :title="isUpdateRef ? '编辑摄像头' : '新增摄像头'">
+    <Form />
+  </Drawer>
+</template>
+
+<style scoped>
+:deep(.vben-drawer-content) {
+  padding: 20px;
+}
+</style>

apps/web-ele/src/views/aiAnalysis/camera/detail.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { ElCard, ElDescriptions, ElDescriptionsItem } from 'element-plus';
+
+import { getSecurityCameraDetail } from '#/api/aiAnalysis/aiAnalysis';
+
+// 摄像头详情数据
+const cameraInfo = ref({});
+
+const route = useRoute();
+const cameraId = ref(Number(route.params.cameraId));
+
+
+// 初始化数据
+const init = async () => {
+  try {
+    const res = await getSecurityCameraDetail(cameraId.value);
+    cameraInfo.value = res || {};
+  } catch (error) {
+    console.error('获取摄像头详情失败:', error);
+  }
+};
+
+onMounted(async () => {
+  await init();
+});
+</script>
+
+<template>
+  <Page title="摄像头详情" :auto-content-height="true">
+    <div class="boxdev">
+      <div class="min-w-0 flex-1">
+        <!-- 基础信息卡片 -->
+        <ElCard>
+          <template #header>
+            <div class="flex items-center gap-4">
+              <div
+                style="width: 4px; height: 12px; background-color: #215acd"
+              ></div>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+              >
+                基本信息
+              </span>
+            </div>
+          </template>
+          <ElDescriptions class="camera-info" :column="4">
+            <ElDescriptionsItem label="摄像头位置:">
+              {{ cameraInfo.location || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="所属场站:">
+              {{ cameraInfo.stationName || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="通道地址:">
+              {{ cameraInfo.httpUrl || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="摄像头名称:">
+              {{ cameraInfo.cameraName || '-' }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="摄像头编码:">
+              {{ cameraInfo.cameraCode || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="摄像头类型:">
+              {{ cameraInfo.cameraType || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="IP地址:">
+              {{ cameraInfo.ipAddress || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="端口号:">
+              {{ cameraInfo.port || '-' }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="登录用户名:">
+              {{ cameraInfo.username || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="RTSP流地址:">
+              {{ cameraInfo.rtspUrl || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="是否启用AI:">
+              {{ cameraInfo.aiEnabled === '1' ? '是' : '否' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="设备状态:">
+              {{ 
+                cameraInfo.status === '0' ? '在线' : 
+                cameraInfo.status === '1' ? '离线' : 
+                cameraInfo.status === '2' ? '故障' : '-' 
+              }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="对接平台类型:">
+              {{ cameraInfo.platformType || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="平台设备ID:">
+              {{ cameraInfo.platformId || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="最后在线时间:">
+              {{ cameraInfo.lastOnlineTime || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="最后维护时间:">
+              {{ cameraInfo.lastMaintenance || '-' }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="维护周期（天）:">
+              {{ cameraInfo.maintenanceCycle || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="经度:">
+              {{ cameraInfo.longitude || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="纬度:">
+              {{ cameraInfo.latitude || '-' }}
+            </ElDescriptionsItem>
+          </ElDescriptions>
+        </ElCard>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped lang="scss">
+.boxdev {
+  display: flex;
+  gap: 20px;
+}
+
+.boxdev :deep(.el-card) {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.boxdev :deep(.el-card__header) {
+  padding-top: 18px !important;
+  padding-bottom: 4px !important;
+  padding-left: 0px !important;
+  border-bottom: none !important;
+}
+
+.boxdev :deep(.el-card__body) {
+  padding-top: 16px !important;
+}
+
+::v-deep .el-descriptions__body {
+  background: #ffffff00 !important;
+}
+
+.boxdev > div:nth-child(1) {
+  flex: 1;
+  min-width: 0;
+}
+
+.camera-info {
+  :deep(.el-descriptions__label) {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-secondary);
+  }
+
+  :deep(.el-descriptions__content) {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
+
+  :deep(.el-descriptions__table) {
+    background: transparent !important;
+  }
+}
+</style>

apps/web-ele/src/views/aiAnalysis/camera/index.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { ElMessageBox } from 'element-plus';
+import { useAccess } from '@vben/access';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteSecurityCamera, exportSecurityCamera, getSecurityCameraList } from '#/api/aiAnalysis/aiAnalysis';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import { queryFormSchema, tableColumns } from './camera-data';
+import CameraDrawerComp from './camera-drawer.vue';
+
+const router = useRouter();
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: queryFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+    trigger: 'default',
+  },
+  columns: tableColumns,
+  size: 'medium',
+  height: 'auto',
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        const resp = await getSecurityCameraList({
+          ...formValues,
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+        });
+        return { items: resp.rows, total: resp.total };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'cameraId',
+  },
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    zoom: true,
+  },
+  id: 'aiAnalysis-camera-index',
+};
+
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [CameraDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: CameraDrawerComp,
+});
+
+const { hasAccessByCodes } = useAccess();
+
+// 新增摄像头
+function openDrawer() {
+  drawerApi.setData({ isUpdate: false }).open();
+}
+
+// 编辑摄像头
+function handleEdit(row: any) {
+  drawerApi.setData({ ...row, isUpdate: true }).open();
+}
+
+// 查看摄像头详情
+function handleView(row: any) {
+  // 跳转到详情页面
+  router.push({
+    name: 'CameraDetail',
+    params: { cameraId: row.cameraId },
+  });
+}
+
+// 单个删除摄像头
+async function confirmEvent(row: any) {
+  await deleteSecurityCamera([row.cameraId]);
+  await basicTableApi.reload();
+}
+
+// 批量删除摄像头
+function deleteHandle() {
+  const checkRecords = basicTableApi.grid.getCheckboxRecords();
+  const ids = checkRecords.map((item: any) => item.cameraId);
+  if (ids.length <= 0) {
+    return;
+  }
+
+  ElMessageBox.confirm(`确认删除选中的${ids.length}条数据吗?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await deleteSecurityCamera(ids);
+    await basicTableApi.reload();
+  });
+}
+
+// 导出摄像头数据
+async function exportHandle() {
+  await commonDownloadExcel(
+    exportSecurityCamera,
+    '摄像头设备数据',
+    basicTableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="摄像头设备列表">
+      <template #toolbar-tools>
+        <ElSpace>
+          <ElButton
+            type="danger"
+            :disabled="!(basicTableApi?.grid?.getCheckboxRecords?.()?.length > 0)"
+            @click="deleteHandle"
+            v-access:code="['aiAnalysis:camera:remove']"
+          >
+            批量删除
+          </ElButton>
+          <ElButton
+            type="primary"
+            @click="openDrawer"
+            v-access:code="['aiAnalysis:camera:add']"
+          >
+            新增摄像头
+          </ElButton>
+        </ElSpace>
+      </template>
+      <template #action="{ row }">
+        <ElSpace>
+          <ElButton
+            size="small"
+            type="info"
+            plain
+            @click="handleView(row)"
+            v-access:code="['aiAnalysis:camera:view']"
+          >
+            查看
+          </ElButton>
+          <ElButton
+            size="small"
+            type="primary"
+            plain
+            @click="handleEdit(row)"
+            v-access:code="['aiAnalysis:camera:edit']"
+          >
+            编辑
+          </ElButton>
+          <ElPopconfirm title="确认删除" @confirm="confirmEvent(row)">
+            <template #reference>
+              <ElButton
+                size="small"
+                type="danger"
+                plain
+                v-access:code="['aiAnalysis:camera:remove']"
+              >
+                删除
+              </ElButton>
+            </template>
+          </ElPopconfirm>
+        </ElSpace>
+      </template>
+    </BasicTable>
+    <CameraDrawer @reload="basicTableApi.reload()" />
+  </Page>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-tooltip__trigger:focus) {
+  outline: none;
+}
+</style>

apps/web-ele/src/views/aiAnalysis/home/index.vue

@@ -0,0 +1,628 @@
+<template>
+  <div class="ai-analysis-home">
+    <!-- 顶部搜索块 -->
+    <div class="search-section">
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+        <el-form-item label="场站">
+          <el-select v-model="searchForm.stationId" placeholder="全部" clearable style="width: 220px;">
+            <el-option label="全部" value=""></el-option>
+            <!-- 这里需要动态加载场站数据 -->
+            <el-option 
+              v-for="station in stationList" 
+              :key="station.stationId" 
+              :label="station.stationName" 
+              :value="station.stationId"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 四个卡片 -->
+    <div class="cards-section">
+      <div class="card-item">
+        <div class="card-icon ai-monitor">
+          <img :src="aiMonitorIcon" alt="AI监控图标" />
+        </div>
+        <div class="card-title">AI监控场站</div>
+        <div class="card-value">{{ detectStatistics.stationCount || 0 }}个</div>
+        <div class="card-percentage">占所有场站<span>{{ detectStatistics.stationRatio || 0 }}%</span></div>
+      </div>
+      <div class="card-item">
+        <div class="card-icon camera">
+          <img :src="cameraIcon" alt="摄像头图标" />
+        </div>
+        <div class="card-title">接入摄像头数量</div>
+        <div class="card-value">{{ detectStatistics.cameraCount || 0 }}个</div>
+        <div class="card-percentage">占所有设备</div>
+      </div>
+      <div class="card-item">
+        <div class="card-icon monitor-type">
+          <img :src="monitorTypeIcon" alt="监测类型图标" />
+        </div>
+        <div class="card-title">监测类型数量</div>
+        <div class="card-value">{{ detectStatistics.alertTypes || 0 }}个</div>
+        <div class="card-percentage">覆盖所有类型</div>
+      </div>
+      <div class="card-item">
+        <div class="card-icon ai-alert">
+          <img :src="aiAlertIcon" alt="AI预警图标" />
+        </div>
+        <div class="card-title">AI预警总数</div>
+        <div class="card-value">{{ warningStatistics.alertCount || 0 }}个</div>
+        <div class="card-percentage">涉及预警类型<span>{{ warningStatistics.alertTypeCount || 0 }}个</span></div>
+      </div>
+    </div>
+
+    <!-- 左右模块 -->
+    <div class="main-section">
+      <!-- 预警类型模块 -->
+      <div class="left-module">
+        <div class="module-title">预警类型</div>
+        <div class="warning-types-list">
+          <div 
+            v-for="warning in warningStatistics" 
+            :key="warning.alertType"
+            class="warning-type-item"
+          >
+            <div class="warning-type-name">{{ warning.alertTypeName }}</div>
+            <div class="warning-type-stats">
+              <div class="warning-type-count">当前有 {{ warning.count || 0 }} 个预警未读</div>
+              <div class="warning-type-month-count">本月共发生 {{ warning.monthCount || 0 }} 次</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 未处理预警记录模块 -->
+      <div class="right-module">
+        <div class="module-header">
+          <div class="module-title" style="margin-bottom: 0;">未处理预警记录</div>
+          <div class="view-all" @click="viewAllAlerts">查看全部</div>
+        </div>
+        <div class="alert-records-list">
+          <div 
+            v-for="alert in alertRecords" 
+            :key="alert.alertId"
+            class="alert-record-item">
+            <div class="alert-image">
+              <img :src="alert.snapshotPathUrl[0] || 'https://ts1.tc.mm.bing.net/th/id/R-C.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0'" alt="预警图片" />
+            </div>
+            <div class="alert-info">
+              <div class="alert-title-row">
+                <span class="alert-title">{{ alert.alertTypeName || '预警' }}</span>
+                <span class="alert-time">{{ formatDate(alert.alertTime) }}</span>
+              </div>
+              <div class="alert-station-row">
+                <span class="alert-station">{{ alert.stationName || '未知场站' }}</span>
+              </div>
+            </div>
+            <div class="alert-arrow"  @click="viewAlertDetail(alert.alertId)">
+              <img :src="angleRightIcon" alt="箭头图标" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { getDetectStatistics, getWarningStatistics, getSecurityAlertList } from '#/api/aiAnalysis/aiAnalysis';
+import { selectAllSysStation } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import type { DetectStatisticsModel, WarningStatisticsModel, SecurityAlertModel } from '#/api/aiAnalysis/model';
+import aiMonitorIcon from '#/assets/icon/ai-monitor.png';
+import cameraIcon from '#/assets/icon/camera.png';
+import monitorTypeIcon from '#/assets/icon/monitor-type.png';
+import aiAlertIcon from '#/assets/icon/ai-alert.png'; 
+import angleRightIcon from '#/assets/icon/angle-right-circle.png';
+// 路由
+const router = useRouter();
+
+// 搜索表单
+const searchForm = ref({
+  stationId: ''
+});
+
+// 场站列表
+const stationList = ref<any[]>([]);
+
+// 检测统计数据
+const detectStatistics = ref<DetectStatisticsModel>({});
+
+// 预警分类统计数据
+const warningStatistics = ref<WarningStatisticsModel[]>([]);
+
+// 预警记录数据
+const alertRecords = ref<(SecurityAlertModel & { alertTypeName?: string })[]>([]);
+
+// 处理查询
+const handleQuery = async () => {
+  await fetchData();
+};
+
+// 处理重置
+const handleReset = async () => {
+  searchForm.value.stationId = '';
+  await fetchData();
+};
+
+// 格式化日期
+const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '';
+  const date = new Date(dateStr);
+  return date.toLocaleString('zh-CN');
+};
+
+// 查看全部预警
+const viewAllAlerts = () => {
+  // 跳转到预警记录列表页面
+  router.push('/aiAnalysis/warning');
+
+};
+
+// 查看预警详情
+const viewAlertDetail = (alertId?: number) => {
+  if (alertId) {
+    router.push({
+      name: 'WarningDetail',
+      params: { alertId: alertId },
+    }); 
+  }
+};
+
+// 获取预警类型名称
+const getAlertTypeName = (alertType?: string) => {
+  const typeMap: Record<string, string> = {
+    'fire': '火焰',
+    'smoke': '烟雾',
+    'fire_danger': '火灾',
+    'intrusion': '入侵'
+  };
+  return typeMap[alertType || ''] || alertType;
+};
+
+// 获取场站列表
+const fetchStationList = async () => {
+  try {
+    const resp = await selectAllSysStation();
+    const data = resp || [];
+    if (Array.isArray(data)) {
+      stationList.value = data.map((item: any) => ({
+        stationId: item.id,
+        stationName: item.stationName
+      }));
+    }
+  } catch (error) {
+    console.error('获取场站列表失败:', error);
+  }
+};
+
+// 获取数据
+const fetchData = async () => {
+  try {
+    // 获取检测统计数据
+    const detectRes = await getDetectStatistics();
+    console.log('detectRes', detectRes);
+    if (detectRes) {
+      detectStatistics.value = detectRes || {};
+    }
+
+    // 获取预警分类统计数据
+    const warningRes = await getWarningStatistics();
+    console.log('warningRes', warningRes);
+    if (warningRes) {
+      warningStatistics.value = warningRes || [];
+    }
+
+    // 获取未处理预警记录
+    const alertRes = await getSecurityAlertList({
+      status: 'unhandled',
+      stationId: searchForm.value.stationId,
+      pageSize: 5
+    });
+    console.log('alertRes', alertRes);
+    if (alertRes) {
+      const alerts = alertRes || [];
+
+      // 添加预警类型名称
+      alertRecords.value = alerts.rows || [];
+      alertRecords.value = alertRecords.value.map((alert: SecurityAlertModel) => ({
+        ...alert,
+        alertTypeName: getAlertTypeName(alert.alertType)
+      }));
+    }
+  } catch (error) {
+    console.error('获取数据失败:', error);
+  }
+};
+
+// 初始化
+onMounted(async () => {
+  // 获取场站列表
+  await fetchStationList();
+  await fetchData();
+});
+</script>
+
+<style scoped>
+.ai-analysis-home {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 120px);
+}
+
+/* 搜索块 */
+.search-section {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  box-shadow: 0 2px 4px rgba(63, 50, 50, 0.1);
+  
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+}
+
+/* 四个卡片 */
+.cards-section {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.card-item {
+  background-color: #fff;
+  padding: 25px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(63, 50, 50, 0.1);
+  text-align: left;
+  transition: transform 0.3s ease;
+}
+
+.card-item:hover {
+  transform: translateY(-5px);
+}
+
+.card-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #f0f9ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: #3b82f6;
+  margin-bottom: 24px;
+}
+.card-icon img {
+  width: 24px;
+  height: 24px;
+}
+.card-icon.ai-monitor {
+  background-color: #B5E4CA;
+  color: #10b981;
+}
+
+.card-icon.camera {
+  background-color: #BEDAFF;
+  color: #f59e0b;
+}
+
+.card-icon.monitor-type {
+  background-color: #FFE4BA;
+  color: #ef4444;
+}
+
+.card-icon.ai-alert {
+  background-color: #FDCDC5;
+  color: #8b5cf6;
+}
+
+.card-title {
+  color: var(--arco-e-668--light-text-color-text-2, #4E5969);
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 16px; /* 88.889% */
+  letter-spacing: -0.18px;
+}
+
+.card-value {
+  color: var(--, #31373D);
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 48px; /* 100% */
+  letter-spacing: -1.44px;
+  padding: 8px;
+}
+
+.card-percentage {
+  color: #6F767E;
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 114.286% */
+  letter-spacing: -0.14px;
+}
+
+.card-percentage span {
+  color: var(--, #38B865);
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: -0.14px;
+}
+/* 主模块 */
+.main-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.module-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin: 24px 0px;
+  border-left: 4px solid #215ACD;
+  padding-left: 20px;
+}
+/* 预警类型模块 */
+.left-module {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.warning-types-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.warning-type-item {
+  display: flex;
+  background-color: #F7F9FA;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25px;
+  margin: 0 24px 12px 24px;
+}
+
+.warning-type-item:last-child {
+  border-bottom: none;
+}
+
+.warning-type-name {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.warning-type-stats {
+  text-align: right;
+  font-size: 12px;
+  color: #666;
+}
+
+.warning-type-count {
+  color: var(---B, #215ACD);
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.56px;
+}
+
+.warning-type-month-count {
+  color: var(--, #31373D);
+  text-align: right;
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.56px;
+  margin-top: 8px;
+}
+
+.right-module {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.module-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.view-all {
+  font-size: 14px;
+  color: #215ACD;
+  cursor: pointer;
+  margin-top: 24px;
+  margin-right: 35px;
+}
+
+.view-all:hover {
+  text-decoration: underline;
+}
+
+.alert-records-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  overflow-y: auto;
+  margin: 0 24px;
+}
+
+.alert-record-item {
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.alert-record-item:hover {
+  /* border-color: #3b82f6;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); */
+}
+
+.alert-image {
+  width: 48px;
+  height: 48px;
+  margin-right: 12px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin: 20px 8px 20px 24px;
+}
+
+.alert-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.alert-info {
+  flex: 1;
+}
+
+.alert-title-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.alert-title {
+  color: var(--, #EB5E12);
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.56px;
+}
+
+.alert-time {
+  color: var(--, #31373D);
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.56px;
+  margin-left: 10px;
+}
+
+.alert-station-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.alert-station {
+  color: var(--, #31373D);
+  font-family: "PingFang SC";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.56px;
+
+}
+
+.alert-status {
+  font-size: 12px;
+  color: #ef4444;
+  font-weight: 500;
+}
+
+.alert-arrow {
+  width: 24px;
+  height: 24px;
+  margin-right: 24px;
+}
+
+/* 滚动条样式 */
+.warning-types-list::-webkit-scrollbar,
+.alert-records-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.warning-types-list::-webkit-scrollbar-track,
+.alert-records-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.warning-types-list::-webkit-scrollbar-thumb,
+.alert-records-list::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.warning-types-list::-webkit-scrollbar-thumb:hover,
+.alert-records-list::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .cards-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .main-section {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .cards-section {
+    grid-template-columns: 1fr;
+  }
+  
+  .search-section {
+    padding: 16px;
+  }
+  
+  .card-item {
+    padding: 16px;
+  }
+  
+  .right-module {
+    padding: 16px;
+  }
+}
+</style>

apps/web-ele/src/views/aiAnalysis/warning/detail.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { ElCard, ElDescriptions, ElDescriptionsItem } from 'element-plus';
+
+import { getSecurityAlertDetail } from '#/api/aiAnalysis/aiAnalysis';
+
+// 预警详情数据
+const warningInfo = ref({});
+
+const route = useRoute();
+const alertId = ref(Number(route.params.alertId));
+
+
+// 初始化数据
+const init = async () => {
+  try {
+    const res = await getSecurityAlertDetail(alertId.value);
+    warningInfo.value = res || {};
+  } catch (error) {
+    console.error('获取预警详情失败:', error);
+  }
+};
+
+onMounted(async () => {
+  await init();
+});
+</script>
+
+<template>
+  <Page title="预警详情" :auto-content-height="true">
+    <div class="boxdev">
+      <div class="min-w-0 flex-1">
+        <!-- 基础信息卡片 -->
+        <ElCard>
+          <template #header>
+            <div class="flex items-center gap-4">
+              <div
+                style="width: 4px; height: 12px; background-color: #215acd"
+              ></div>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+              >
+                基本信息
+              </span>
+            </div>
+          </template>
+          <ElDescriptions class="warning-info" :column="4">
+            <ElDescriptionsItem label="预警时间:">
+              {{ warningInfo.alertTime || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="预警场站:">
+              {{ warningInfo.stationName || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="预警场景:">
+              {{ 
+                warningInfo.alertType === 'fire' ? '火焰' : 
+                warningInfo.alertType === 'smoke' ? '烟雾' : 
+                warningInfo.alertType === 'fire_danger' ? '火灾' : 
+                warningInfo.alertType === 'intrusion' ? '入侵' : 
+                warningInfo.alertType || '-' 
+              }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="预警级别:">
+              {{ 
+                warningInfo.alertLevel === '1' ? '一般' : 
+                warningInfo.alertLevel === '2' ? '重要' : 
+                warningInfo.alertLevel === '3' ? '紧急' : 
+                warningInfo.alertLevel || '-' 
+              }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="处理状态:">
+              {{ 
+                warningInfo.status === 'unhandled' ? '未处理' : 
+                warningInfo.status === 'handling' ? '处理中' : 
+                warningInfo.status === 'resolved' ? '已解决' : 
+                warningInfo.status === 'false_alarm' ? '误报' : 
+                warningInfo.status || '-' 
+              }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="摄像头位置:">
+              {{ warningInfo.location || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="识别置信度:">
+              {{ warningInfo.confidence || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="预警编号:">
+              {{ warningInfo.alertCode || '-' }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="场站站长:">
+              {{ warningInfo.stationManagerName || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="站长电话:">
+              {{ warningInfo.stationManagerPhone || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="片区经理:">
+              {{ warningInfo.areaManagerName || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="片区经理电话:">
+              {{ warningInfo.areaManagerPhone || '-' }}
+            </ElDescriptionsItem>
+
+            <ElDescriptionsItem label="处理人ID:">
+              {{ warningInfo.handleUserId || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="处理时间:">
+              {{ warningInfo.handleTime || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="处理备注:">
+              {{ warningInfo.handleRemark || '-' }}
+            </ElDescriptionsItem>
+            <ElDescriptionsItem label="预警ID:">
+              {{ warningInfo.alertId || '-' }}
+            </ElDescriptionsItem>
+          </ElDescriptions>
+        </ElCard>
+        <!-- 异常图片卡片 -->
+        <ElCard class="mt-4">
+          <template #header>
+            <div class="flex items-center gap-4">
+              <div
+                style="width: 4px; height: 12px; background-color: #215acd"
+              ></div>
+              <span
+                class="text-lg font-bold text-gray-800"
+                style="font-size: 14px; font-weight: 600"
+              >
+                异常图片
+              </span>
+            </div>
+          </template>
+          <div v-if="warningInfo.snapshotPathUrl" class="snapshot-container">
+            <!-- snapshotPathUrl  是一个数组 -->
+            <el-image
+              v-for="url in warningInfo.snapshotPathUrl"
+              :key="url"
+              :src="url"
+              style="width: 300px; height: 200px"
+              fit="cover"
+              :preview-src-list="[url]"
+            />
+          </div>
+          <div v-else class="snapshot-container">
+            <span>无异常图片</span>
+          </div>
+        </ElCard>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped lang="scss">
+.boxdev {
+  display: flex;
+  gap: 20px;
+}
+
+.boxdev :deep(.el-card) {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.boxdev :deep(.el-card__header) {
+  padding-top: 18px !important;
+  padding-bottom: 4px !important;
+  padding-left: 0px !important;
+  border-bottom: none !important;
+}
+
+.boxdev :deep(.el-card__body) {
+  padding-top: 16px !important;
+}
+
+::v-deep .el-descriptions__body {
+  background: #ffffff00 !important;
+}
+
+.boxdev > div:nth-child(1) {
+  flex: 1;
+  min-width: 0;
+}
+
+.warning-info {
+  :deep(.el-descriptions__label) {
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-color-secondary);
+  }
+
+  :deep(.el-descriptions__content) {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-color-primary);
+  }
+
+  :deep(.el-descriptions__table) {
+    background: transparent !important;
+  }
+}
+
+.mt-4 {
+  margin-top: 16px;
+}
+
+.snapshot-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  padding: 20px;
+}
+</style>

apps/web-ele/src/views/aiAnalysis/warning/index.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import { useRouter } from 'vue-router';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { useAccess } from '@vben/access';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSecurityAlertList } from '#/api/aiAnalysis/aiAnalysis';
+
+import { queryFormSchema, tableColumns } from './warning-data';
+import WarningDrawerComp from './warning-drawer.vue';
+
+const router = useRouter();
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: queryFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  fieldMappingTime: [
+    [
+      'alertTime',
+      ['alertStartTime', 'alertEndTime'],
+      ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'],
+    ],
+  ],
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    highlight: true,
+    reserve: true,
+    trigger: 'default',
+  },
+  columns: tableColumns,
+  size: 'medium',
+  height: 'auto',
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        const resp = await getSecurityAlertList({
+          ...formValues,
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+        });
+        return { items: resp.rows, total: resp.total };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'alertId',
+  },
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    zoom: true,
+  },
+  id: 'aiAnalysis-warning-index',
+};
+
+const [BasicTable, basicTableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [WarningDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: WarningDrawerComp,
+});
+
+const { hasAccessByCodes } = useAccess();
+
+// 处理预警
+function handleProcess(row: any) {
+  drawerApi.setData({ ...row, isProcess: true }).open();
+}
+
+// 查看预警详情
+function handleView(row: any) {
+  // 跳转到详情页面
+  router.push({
+    name: 'WarningDetail',
+    params: { alertId: row.alertId },
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="预警记录列表">
+      <template #action="{ row }">
+        <ElSpace>
+          <ElButton
+            size="small"
+            type="info"
+            plain
+            @click="handleView(row)"
+            v-access:code="['aiAnalysis:warning:view']"
+          >
+            查看
+          </ElButton>
+          <ElButton
+            v-if="row.status === 'unhandled'"
+            size="small"
+            type="primary"
+            plain
+            @click="handleProcess(row)"
+            v-access:code="['aiAnalysis:warning:process']"
+          >
+            处理
+          </ElButton>
+        </ElSpace>
+      </template>
+    </BasicTable>
+    <WarningDrawer @reload="basicTableApi.reload()" />
+  </Page>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-tooltip__trigger:focus) {
+  outline: none;
+}
+</style>

apps/web-ele/src/views/aiAnalysis/warning/warning-data.tsx

@@ -0,0 +1,184 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { selectAllSysStation } from '#/api/system/infoEntry/stationInfo/stationInfo';
+import { getDictOptions } from '#/utils/dict';
+
+// 字典标识常量
+const DICT_KEYS = {
+  // 预警类型字典标识
+  WARNING_TYPE: 'warning_type',
+  // 处理状态字典标识
+  HANDLE_STATUS: 'handle_status',
+};
+
+// 获取预警类型字典选项
+const getWarningTypes = () => getDictOptions(DICT_KEYS.WARNING_TYPE);
+
+// 获取处理状态字典选项
+const getHandleStatuses = () => getDictOptions(DICT_KEYS.HANDLE_STATUS);
+
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'ApiSelect',
+    fieldName: 'stationId',
+    label: '预警场站',
+    componentProps: {
+      placeholder: '请选择预警场站',
+      api: async () => {
+        const resp = await selectAllSysStation();
+        const data = resp || [];
+        return Array.isArray(data)
+          ? data.map((item: any) => ({
+              label: item.stationName,
+              value: item.id.toString(),
+            }))
+          : [];
+      },
+    },
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      type: 'daterange',
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      style: {
+        width: '100%',
+      },
+    },
+    fieldName: 'alertTime',
+    label: '检查时间',
+  },
+  {
+    component: 'Select',
+    fieldName: 'alertType',
+    label: '预警场景',
+    componentProps: {
+      placeholder: '请选择预警场景',
+      options: getWarningTypes(),
+    },
+  },
+];
+
+export const tableColumns: VxeGridProps['columns'] = [
+  {
+    field: 'status',
+    title: '状态',
+    minWidth: 100,
+    fixed: 'left',
+    formatter: (params: { cellValue: string }) => {
+      const statusMap = {
+        'unhandled': '未处理',
+        'handling': '处理中',
+        'resolved': '已解决',
+        'false_alarm': '误报',
+      };
+      return statusMap[params.cellValue] || params.cellValue;
+    },
+  },
+  {
+    field: 'alertTime',
+    title: '预警时间',
+    minWidth: 180,
+    fixed: 'left',
+  },
+  {
+    field: 'stationName',
+    title: '预警场站',
+    minWidth: 120,
+  },
+  {
+    field: 'stationManagerName',
+    title: '场站站长',
+    minWidth: 100,
+  },
+  {
+    field: 'areaManagerName',
+    title: '片区经理',
+    minWidth: 100,
+  },
+  {
+    field: 'location',
+    title: '摄像头位置',
+    minWidth: 120,
+  },
+  {
+    field: 'alertType',
+    title: '预警场景',
+    minWidth: 100,
+    formatter: (params: { cellValue: string }) => {
+      const alertTypeMap = {
+        'fire': '火焰',
+        'smoke': '烟雾',
+        'fire_danger': '火灾',
+        'intrusion': '入侵',
+      };
+      return alertTypeMap[params.cellValue] || params.cellValue;
+    },
+  },
+  {
+    field: 'snapshotUrl',
+    title: '异常图片',
+    minWidth: 100,
+    slots: {
+      default: ({ row }: { row: any }) => {
+        return row.snapshotUrl ? (
+          <el-image
+            src={row.snapshotUrl}
+            style={{ width: '60px', height: '60px' }}
+            fit="cover"
+            preview-src-list={[row.snapshotUrl]}
+          />
+        ) : '-';
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 150,
+  },
+];
+
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'alertId',
+  },
+  {
+    component: 'Select',
+    fieldName: 'handleAction',
+    label: '处理动作',
+    componentProps: {
+      placeholder: '请选择处理动作',
+      options: [
+        { label: '解决', value: 'resolve' },
+        { label: '忽略', value: 'ignore' },
+        { label: '误报', value: 'false_alarm' },
+      ],
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'handleContent',
+    label: '处理内容',
+    componentProps: {
+      placeholder: '请输入处理内容',
+      maxlength: 500,
+      type: 'textarea',
+      showWordLimit: true,
+      rows: 4,
+    },
+    rules: 'required',
+  }
+];

apps/web-ele/src/views/aiAnalysis/warning/warning-drawer.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+
+import { addSecurityAlert, getSecurityAlertDetail, handleSecurityAlert, updateSecurityAlert } from '#/api/aiAnalysis/aiAnalysis';
+import { drawerFormSchema } from './warning-data';
+
+const emit = defineEmits<{
+  reload: [];
+}>();
+
+// 响应式变量
+const isUpdateRef = ref<boolean>(false);
+const isProcessRef = ref<boolean>(false);
+
+// 初始化表单
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: drawerFormSchema(),
+});
+
+// 初始化抽屉
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    await handleDrawerOpen();
+  },
+
+  async onConfirm() {
+    await handleFormSubmit();
+  },
+
+  onClosed() {
+    formApi.resetForm();
+  },
+});
+
+/**
+ * 处理抽屉打开逻辑
+ */
+async function handleDrawerOpen() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { alertId, isUpdate, isProcess } = drawerApi.getData();
+    isUpdateRef.value = isUpdate;
+    isProcessRef.value = isProcess;
+
+    // 处理编辑或处理模式的数据回显
+    if ((isUpdate || isProcess) && alertId) {
+      await loadWarningDetail(alertId);
+    }
+  } catch (error) {
+    console.error('打开抽屉失败:', error);
+  } finally {
+    drawerApi.drawerLoading(false);
+  }
+}
+
+/**
+ * 加载预警详情数据
+ * @param alertId 预警ID
+ */
+async function loadWarningDetail(alertId: number | string) {
+  try {
+    const res = await getSecurityAlertDetail(alertId);
+
+    // 确保从正确的响应结构中获取数据
+    const detailData = res?.data || res;
+
+    // 设置表单值
+    await formApi.setValues(detailData);
+  } catch (error) {
+    console.error('获取预警详情失败:', error);
+  }
+}
+
+/**
+ * 处理表单提交
+ */
+async function handleFormSubmit() {
+  try {
+    // 验证表单
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+
+    // 获取表单数据
+    const data = await formApi.getValues();
+    console.log('表单数据:', data);
+
+    // 提交请求
+    if (isProcessRef.value) {
+      // 处理预警
+      await handleSecurityAlert({
+        alertId: drawerApi.getData().alertId,
+        handleAction: data.handleAction,
+        handleContent: data.handleContent,
+      });
+    } else {
+      // 新增或编辑预警
+      await (isUpdateRef.value
+        ? updateSecurityAlert({ ...data, alertId: drawerApi.getData().alertId })
+        : addSecurityAlert(data));
+    }
+
+    // 触发重载事件并关闭抽屉
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error('保存预警信息失败:', error);
+  }
+}
+</script>
+
+<template>
+  <Drawer :title="isProcessRef ? '处理预警' : (isUpdateRef ? '编辑预警' : '新增预警')">
+    <Form />
+  </Drawer>
+</template>
+
+<style scoped>
+:deep(.vben-drawer-content) {
+  padding: 20px;
+}
+</style>