视频预警

2025-08-12 13:51:35 +08:00
parent 0a77934d8b
commit 1d1afb0162
22 changed files with 2260 additions and 379 deletions
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/data.ts
@@ -48,6 +48,11 @@ export const columns: VxeGridProps['columns'] = [
    field: 'alarmTime',
    width: 150,
  },
+  {
+    title: '设备名称',
+    field: 'deviceName',
+    width: 150,
+  },
  {
    title: '级别',
    field: 'level',
@@ -116,6 +121,11 @@ export const columns: VxeGridProps['columns'] = [
    field: 'processingDetails',
    width: 150,
  },
+  {
+    title: '预期处理时间',
+    field: 'expectedProcessingTime',
+    width: 150,
+  },
  {
    title: '处理时间',
    field: 'processingTime',
@@ -145,6 +155,7 @@ export const modalSchema: FormSchemaGetter = () => [
    fieldName: 'alarmId',
    component: 'Input',
    rules: 'required',
+    disabled: true,
  },
  {
    label: '预警时间',
@@ -156,6 +167,63 @@ export const modalSchema: FormSchemaGetter = () => [
      showTime: true,
    },
    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '预警类型',
+    fieldName: 'alarmType',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '描述',
+    fieldName: 'description',
+    component: 'Input',
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '所在位置',
+    fieldName: 'location',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '设备名称',
+    fieldName: 'deviceName',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '处理情况',
+    fieldName: 'processingDetails',
+    component: 'Input',
+    componentProps: {
+      rows: 3,
+    },
+    formItemClass: 'col-span-2',
+    disabled: true,
+  },
+  {
+    label: '处理时间',
+    fieldName: 'processingTime',
+    component: 'DatePicker',
+    componentProps: {
+      format: 'YYYY.MM.DD HH:mm',
+      valueFormat: 'YYYY.MM.DD HH:mm',
+      showTime: true,
+    },
+    disabled: true,
+  },
+  {
+    label: '处理图片',
+    fieldName: 'imgUrl',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
  },
  {
    label: '级别',
@@ -170,27 +238,6 @@ export const modalSchema: FormSchemaGetter = () => [
    },
    rules: 'selectRequired',
  },
-  {
-    label: '预警类型',
-    fieldName: 'alarmType',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '描述',
-    fieldName: 'description',
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 3,
-    },
-    formItemClass: 'col-span-2',
-  },
-  {
-    label: '所在位置',
-    fieldName: 'location',
-    component: 'Input',
-    rules: 'required',
-  },
  {
    label: '处理状态',
    fieldName: 'processingStatus',
@@ -205,22 +252,14 @@ export const modalSchema: FormSchemaGetter = () => [
    rules: 'selectRequired',
  },
  {
-    label: '处理情况',
-    fieldName: 'processingDetails',
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 3,
-    },
-    formItemClass: 'col-span-2',
-  },
-  {
-    label: '处理时间',
-    fieldName: 'processingTime',
+    label: '预期处理时间',
+    fieldName: 'expectedProcessingTime',
    component: 'DatePicker',
    componentProps: {
      format: 'YYYY.MM.DD HH:mm',
      valueFormat: 'YYYY.MM.DD HH:mm',
      showTime: true,
    },
+    rules: 'required',
  },
 ];
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/index.vue
@@ -1,73 +1,3 @@
-<template>
-  <Page :auto-content-height="true">
-    <BasicTable
-      :key="tableKey"
-      class="flex-1 overflow-hidden"
-      table-title="视频预警处理"
-    >
-      <template #toolbar-tools>
-        <Space>
-          <a-button
-            :disabled="!vxeCheckboxChecked(tableApi)"
-            danger
-            type="primary"
-            v-access:code="['video:warning:remove']"
-            @click="handleMultiDelete"
-          >
-            {{ $t('pages.common.delete') }}
-          </a-button>
-        </Space>
-      </template>
-      <template #action="{ row }">
-        <Space>
-          <ghost-button
-            v-access:code="['video:warning:level']"
-            @click.stop="handleLevelSetting(row)"
-          >
-            级别设置
-          </ghost-button>
-          <ghost-button
-            v-access:code="['video:warning:view']"
-            @click.stop="handleView(row)"
-          >
-            {{ $t('pages.common.info') }}
-          </ghost-button>
-          <ghost-button
-            v-access:code="['video:warning:edit']"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('pages.common.edit') }}
-          </ghost-button>
-          <ghost-button
-            v-access:code="['video:warning:assign']"
-            @click.stop="handleAssign(row)"
-            :disabled="row.processingStatus === '已完成'"
-          >
-            分配处理
-          </ghost-button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
-              danger
-              v-access:code="['video:warning:remove']"
-              @click.stop=""
-            >
-              {{ $t('pages.common.delete') }}
-            </ghost-button>
-          </Popconfirm>
-        </Space>
-      </template>
-    </BasicTable>
-    <WarningModal @reload="tableApi.query()" />
-    <WarningDetail />
-    <LevelSettingModalComp @reload="tableKey++" />
-  </Page>
-</template>
-
 <script setup lang="ts">
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
@@ -88,6 +18,7 @@ import { columns, querySchema } from './data';
 import warningModal from './warning-modal.vue';
 import warningDetail from './warning-detail.vue';
 import LevelSettingModal from './level-setting-modal.vue';
+import imgPng from '../../../../assets/algorithmManagement/image.png';

 // 假数据
 const mockData = ref([
@@ -102,6 +33,7 @@ const mockData = ref([
    processingStatus: '待分配',
    processingDetails: '',
    processingTime: '',
+    deviceName: '监控设备',
  },
  {
    id: 2,
@@ -114,6 +46,8 @@ const mockData = ref([
    processingStatus: '处理中',
    processingDetails: '已派人员前往处理',
    processingTime: '2025.07.21 11:30',
+    expectedProcessingTime: '2025.07.21 11:30',
+    deviceName: '门禁设备',
  },
  {
    id: 3,
@@ -126,6 +60,8 @@ const mockData = ref([
    processingStatus: '已完成',
    processingDetails: '已修复设备',
    processingTime: '2025.07.21 11:00',
+    imgUrl: imgPng,
+    deviceName: '消防设备',
  },
 ]);

@@ -209,9 +145,9 @@ function handleAssign(row: any) {
      // 模拟分配处理
      const index = mockData.value.findIndex((item: any) => item.id === row.id);
      if (index !== -1) {
-        mockData.value[index].processingStatus = '处理中';
-        mockData.value[index].processingDetails = '已分配给处理人员';
-        mockData.value[index].processingTime = new Date().toLocaleString();
+        // mockData.value[index].processingStatus = '处理中';
+        // mockData.value[index].processingDetails = '已分配给处理人员';
+        // mockData.value[index].processingTime = new Date().toLocaleString();
        tableApi.query();
      }
    },
@@ -247,7 +183,75 @@ function handleMultiDelete() {
  });
 }
 </script>
-
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable
+      :key="tableKey"
+      class="flex-1 overflow-hidden"
+      table-title="视频预警处理"
+    >
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['video:warning:remove']"
+            @click="handleMultiDelete"
+          >
+            {{ $t('pages.common.delete') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <!-- <ghost-button
+            v-access:code="['video:warning:level']"
+            @click.stop="handleLevelSetting(row)"
+          >
+            级别设置
+          </ghost-button> -->
+          <ghost-button
+            v-access:code="['video:warning:view']"
+            @click.stop="handleView(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-access:code="['video:warning:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <ghost-button
+            v-access:code="['video:warning:assign']"
+            @click.stop="handleAssign(row)"
+            :disabled="row.processingStatus === '已完成'"
+          >
+            分配处理
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['video:warning:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <WarningModal @reload="tableApi.query()" />
+    <WarningDetail />
+    <LevelSettingModalComp @reload="tableKey++" />
+  </Page>
+</template>
 <style scoped lang="scss">
 .ant-table-wrapper {
  .ant-table-thead > tr > th {
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-detail.vue
@@ -1,17 +1,36 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Timeline,
+  TimelineItem,
+} from 'ant-design-vue';

 const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
-    warningDetail.value = null;
+    // warningDetail.value = null;
+     modalApi.close();
  },
 });

 const warningDetail = shallowRef<any>(null);

+// 时间线显示条件配置
+const timelineConfig = {
+  '已完成': ['已完成'],
+  '处理异常': ['已完成', '处理异常'],
+  '处理中': ['已完成', '处理中', '处理异常']
+};
+
+function showTimelineItem(type: string): boolean {
+  const currentStatus = warningDetail.value?.processingStatus;
+  return timelineConfig[type as keyof typeof timelineConfig]?.includes(currentStatus) || false;
+}
+
 async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
@@ -45,6 +64,7 @@ async function handleOpenChange(open: boolean) {
      :column="2"
      bordered
      :labelStyle="{ width: '120px' }"
+      style="margin-bottom: 30px"
    >
      <DescriptionsItem label="预警编号">
        {{ warningDetail.alarmId }}
@@ -93,6 +113,61 @@ async function handleOpenChange(open: boolean) {
      <DescriptionsItem label="处理时间">
        {{ warningDetail.processingTime || '-' }}
      </DescriptionsItem>
+      <DescriptionsItem label="设备名称">
+        {{ warningDetail.deviceName || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="预处理时间" v-if="warningDetail.processingStatus === '处理中'">
+        {{ warningDetail.expectedProcessingTime || '-' }}
+      </DescriptionsItem>
+      <DescriptionsItem label="处理图片" v-if="warningDetail.processingStatus === '已完成'">
+        <img :src="warningDetail.imgUrl" alt="处理图片" style="max-width: 200px; max-height: 150px;">
+      </DescriptionsItem>
    </Descriptions>
+          <!-- <Timeline>
+        <TimelineItem v-if="showTimelineItem('已完成')">
+          <p style="display: flex">类型：已完成</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+        </TimelineItem>
+        <TimelineItem v-if="showTimelineItem('处理异常')">
+          <p style="display: flex">类型：处理异常</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+          <p>异常原因：时长不够</p>
+        </TimelineItem>
+        <TimelineItem v-if="showTimelineItem('处理中')">
+          <p style="display: flex">类型：处理中</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+        </TimelineItem>
+        <TimelineItem>
+          <p style="display: flex">类型：创建预警</p>
+          <p>时间：2025-06-01 11:07:59</p>
+          <p>处理人：张三</p>
+        </TimelineItem>
+      </Timeline> -->
+      <Timeline>
+      <TimelineItem v-if="warningDetail.processingStatus === '已完成'">
+        <p style="display: flex">类型：已完成</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem v-if="warningDetail.processingStatus === '已完成' || warningDetail.processingStatus === '处理异常'">
+        <p style="display: flex">类型：处理异常</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+        <p>异常原因：时长不够</p>
+      </TimelineItem>
+      <TimelineItem v-if="warningDetail.processingStatus === '已完成'|| warningDetail.processingStatus === '处理中' || warningDetail.processingStatus === '处理异常'">
+        <p style="display: flex">类型：处理中</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+      <TimelineItem>
+        <p style="display: flex">类型：创建预警</p>
+        <p>时间：2025-06-01 11:07:59</p>
+        <p>处理人：张三</p>
+      </TimelineItem>
+    </Timeline>
  </BasicModal>
 </template>
--- a/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
+++ b/apps/web-antd/src/views/videoSystem/videoWarning/videoWarningProcessing/warning-modal.vue
@@ -106,3 +106,16 @@ async function handleClosed() {
    <BasicForm />
  </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item),
+:deep(.ant-picker-disabled .ant-picker-input > input) {
+  /* 设置一个更深的颜色 */
+  color: rgb(0 0 0 / 65%) !important;
+
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
+}
+</style>