From 3801a06e982f9a6a2c34370759f6661a53ffc0ea Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Fri, 13 Mar 2026 11:18:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=AE=89=E4=BF=9D=E5=B7=A5=E5=8D=95=E6=A8=A1=E5=9D=97=EF=BC=8C?=
 =?UTF-8?q?=E9=87=8D=E7=82=B9=E5=B1=95=E7=A4=BA=E5=B7=A5=E5=8D=95=E6=8F=8F?=
 =?UTF-8?q?=E8=BF=B0=E5=92=8C=E5=A4=84=E7=90=86=E7=BB=93=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增安保工单详情扩展组件和配置文件，详情页以独立卡片形式突出展示
工单描述、告警截图（支持点击预览）、处理结果描述和处理图片。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/security-actions.vue           |  17 ++
 .../components/security-detail-ext.vue        | 288 ++++++++++++++++++
 .../views/ops/security/work-order/config.ts   |  15 +
 3 files changed, 320 insertions(+)
 create mode 100644 apps/web-antd/src/views/ops/security/work-order/components/security-actions.vue
 create mode 100644 apps/web-antd/src/views/ops/security/work-order/components/security-detail-ext.vue
 create mode 100644 apps/web-antd/src/views/ops/security/work-order/config.ts

diff --git a/apps/web-antd/src/views/ops/security/work-order/components/security-actions.vue b/apps/web-antd/src/views/ops/security/work-order/components/security-actions.vue
new file mode 100644
index 000000000..e535c6b59
--- /dev/null
+++ b/apps/web-antd/src/views/ops/security/work-order/components/security-actions.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+defineOptions({ name: 'SecurityActions' });
+
+defineProps<{
+  order: OpsOrderCenterApi.OrderDetail;
+}>();
+
+// 安保工单暂无专有操作按钮
+// 通用操作（派单、升级、取消）由详情页统一处理
+// 后续可扩展：出警、联动设备等
+</script>
+
+<template>
+  <div><!-- 安保专有操作预留位 --></div>
+</template>
diff --git a/apps/web-antd/src/views/ops/security/work-order/components/security-detail-ext.vue b/apps/web-antd/src/views/ops/security/work-order/components/security-detail-ext.vue
new file mode 100644
index 000000000..f74e1d1e1
--- /dev/null
+++ b/apps/web-antd/src/views/ops/security/work-order/components/security-detail-ext.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import { Card, Divider, Image, Tag } from 'ant-design-vue';
+
+import {
+  SECURITY_ALARM_TYPE_COLOR_MAP,
+  SECURITY_ALARM_TYPE_MAP,
+} from '../config';
+
+defineOptions({ name: 'SecurityDetailExt' });
+
+const props = defineProps<{
+  order: OpsOrderCenterApi.OrderDetail;
+}>();
+
+/** 安保扩展信息（类型安全） */
+const extInfo = computed(() => {
+  return props.order.extInfo as OpsOrderCenterApi.SecurityExtInfo | undefined;
+});
+
+/** 解析处理结果图片 */
+const resultImages = computed(() => {
+  const urls = extInfo.value?.resultImgUrls;
+  if (!urls) return [];
+  try {
+    return JSON.parse(urls) as string[];
+  } catch {
+    return [];
+  }
+});
+
+/** 告警图片列表（单张也包装成数组供 Image.PreviewGroup 使用） */
+const alarmImages = computed(() => {
+  const url = extInfo.value?.imageUrl;
+  return url ? [url] : [];
+});
+</script>
+
+<template>
+  <div v-if="extInfo" class="security-detail-ext">
+    <!-- 工单描述 -->
+    <Card v-if="order.description" class="mb-3">
+      <template #title>
+        <div class="flex items-center gap-2">
+          <IconifyIcon
+            icon="solar:document-text-bold-duotone"
+            class="text-blue-500"
+          />
+          <span>工单描述</span>
+        </div>
+      </template>
+      <div class="desc-content">{{ order.description }}</div>
+    </Card>
+
+    <!-- 事件信息 + 告警图片 -->
+    <Card class="mb-3">
+      <template #title>
+        <div class="flex items-center gap-2">
+          <IconifyIcon
+            icon="solar:shield-warning-bold-duotone"
+            class="text-red-500"
+          />
+          <span>事件信息</span>
+        </div>
+      </template>
+
+      <!-- 基本信息行 -->
+      <div class="event-meta">
+        <div v-if="extInfo.alarmType" class="meta-item">
+          <span class="meta-label">告警类型</span>
+          <Tag
+            :color="
+              SECURITY_ALARM_TYPE_COLOR_MAP[extInfo.alarmType] || '#8c8c8c'
+            "
+          >
+            {{
+              SECURITY_ALARM_TYPE_MAP[extInfo.alarmType] || extInfo.alarmType
+            }}
+          </Tag>
+        </div>
+        <div v-if="extInfo.cameraId" class="meta-item">
+          <span class="meta-label">摄像头</span>
+          <code class="meta-code">{{ extInfo.cameraId }}</code>
+        </div>
+        <div v-if="extInfo.alarmId" class="meta-item">
+          <span class="meta-label">告警ID</span>
+          <code class="meta-code">{{ extInfo.alarmId }}</code>
+        </div>
+        <div v-if="extInfo.assignedUserName" class="meta-item">
+          <span class="meta-label">处理人</span>
+          <span>{{ extInfo.assignedUserName }}</span>
+        </div>
+        <div v-if="extInfo.dispatchedTime" class="meta-item">
+          <span class="meta-label">派单时间</span>
+          <span>{{ formatDateTime(extInfo.dispatchedTime) }}</span>
+        </div>
+        <div v-if="extInfo.confirmedTime" class="meta-item">
+          <span class="meta-label">确认时间</span>
+          <span>{{ formatDateTime(extInfo.confirmedTime) }}</span>
+        </div>
+        <div v-if="extInfo.completedTime" class="meta-item">
+          <span class="meta-label">完成时间</span>
+          <span>{{ formatDateTime(extInfo.completedTime) }}</span>
+        </div>
+      </div>
+
+      <!-- 告警截图 -->
+      <div v-if="alarmImages.length > 0" class="alarm-images-section">
+        <Divider class="my-3" />
+        <div class="section-label mb-2">
+          <IconifyIcon
+            icon="solar:camera-bold-duotone"
+            class="mr-1 text-gray-500"
+          />
+          告警截图
+        </div>
+        <div class="image-gallery">
+          <Image.PreviewGroup>
+            <Image
+              v-for="(url, idx) in alarmImages"
+              :key="idx"
+              :src="url"
+              :alt="`告警截图 ${idx + 1}`"
+              class="gallery-image"
+              width="100%"
+              :style="{ maxHeight: '360px', objectFit: 'contain' }"
+            />
+          </Image.PreviewGroup>
+        </div>
+      </div>
+    </Card>
+
+    <!-- 处理结果 -->
+    <Card v-if="extInfo.result || resultImages.length > 0" class="mb-3">
+      <template #title>
+        <div class="flex items-center gap-2">
+          <IconifyIcon
+            icon="solar:check-read-bold-duotone"
+            class="text-green-500"
+          />
+          <span>处理结果</span>
+        </div>
+      </template>
+
+      <!-- 结果描述 -->
+      <div v-if="extInfo.result" class="result-content">
+        {{ extInfo.result }}
+      </div>
+
+      <!-- 结果图片 -->
+      <div v-if="resultImages.length > 0" class="result-images-section">
+        <Divider v-if="extInfo.result" class="my-3" />
+        <div class="section-label mb-2">
+          <IconifyIcon
+            icon="solar:gallery-bold-duotone"
+            class="mr-1 text-gray-500"
+          />
+          处理图片（{{ resultImages.length }}张）
+        </div>
+        <div class="image-gallery image-gallery--grid">
+          <Image.PreviewGroup>
+            <Image
+              v-for="(url, idx) in resultImages"
+              :key="idx"
+              :src="url"
+              :alt="`处理结果图片 ${idx + 1}`"
+              class="gallery-image-thumb"
+              :width="160"
+              :height="120"
+              :style="{ objectFit: 'cover' }"
+            />
+          </Image.PreviewGroup>
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.security-detail-ext {
+  width: 100%;
+}
+
+/* 工单描述 */
+.desc-content {
+  font-size: 14px;
+  line-height: 1.8;
+  color: rgb(0 0 0 / 85%);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+:deep(.dark) .desc-content {
+  color: rgb(255 255 255 / 85%);
+}
+
+/* 事件信息元数据 */
+.event-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px 32px;
+}
+
+.meta-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 13px;
+}
+
+.meta-label {
+  color: rgb(0 0 0 / 45%);
+  white-space: nowrap;
+}
+
+:deep(.dark) .meta-label {
+  color: rgb(255 255 255 / 45%);
+}
+
+.meta-code {
+  padding: 1px 6px;
+  font-size: 12px;
+  color: #1677ff;
+  background: #f0f5ff;
+  border-radius: 4px;
+}
+
+/* 区块标签 */
+.section-label {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(0 0 0 / 65%);
+}
+
+:deep(.dark) .section-label {
+  color: rgb(255 255 255 / 65%);
+}
+
+/* 图片画廊 */
+.image-gallery {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.image-gallery--grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.gallery-image {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.gallery-image-thumb {
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  transition: transform 0.2s;
+}
+
+.gallery-image-thumb:hover {
+  transform: scale(1.03);
+}
+
+/* 处理结果 */
+.result-content {
+  font-size: 14px;
+  line-height: 1.8;
+  color: rgb(0 0 0 / 85%);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+:deep(.dark) .result-content {
+  color: rgb(255 255 255 / 85%);
+}
+</style>
diff --git a/apps/web-antd/src/views/ops/security/work-order/config.ts b/apps/web-antd/src/views/ops/security/work-order/config.ts
new file mode 100644
index 000000000..25948fe43
--- /dev/null
+++ b/apps/web-antd/src/views/ops/security/work-order/config.ts
@@ -0,0 +1,15 @@
+/** 安保告警类型文本映射 */
+export const SECURITY_ALARM_TYPE_MAP: Record<string, string> = {
+  intrusion: '入侵检测',
+  leave_post: '离岗检测',
+  fire: '火焰检测',
+  fence: '电子围栏',
+};
+
+/** 安保告警类型颜色映射 */
+export const SECURITY_ALARM_TYPE_COLOR_MAP: Record<string, string> = {
+  intrusion: '#f5222d',
+  leave_post: '#fa8c16',
+  fire: '#ff4d4f',
+  fence: '#faad14',
+};