From 6c39f1aa5f09ced3d3b2e2f1d524b7b61e82ec31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Fri, 22 Nov 2024 17:26:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=EF=BC=8C=E6=A0=BC=E5=BC=8F=E5=8C=96=E7=B1=BB=E5=9E=8B=E6=98=A0?=
 =?UTF-8?q?=E5=B0=84,mitt=E5=AE=9E=E4=BE=8B=E5=8C=96=E7=9B=91=E5=90=AC?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E5=BC=80=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 181 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 105 insertions(+), 76 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5166ceb..d5158b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,95 +1,119 @@
 <template>
   <div id="app" class="app-container">
     <router-view></router-view>
-    <el-dialog
-      title="告警详情"
-      v-model="globalDialogVisible"
-      width="50%"
-      @close="handleDialogClose">
-      <el-row :gutter="30" style="margin-bottom: 2vh;">
-        <el-col span="8">告警编号：{{ globalDialogContent.id }}</el-col>
-        <el-col span="8">摄像头名称：{{ globalDialogContent.camera?.name }}</el-col>
-        <el-col span="8">告警类型：{{ algorithmMap.get(globalDialogContent.types) || '未知类型' }}</el-col>
+    <el-dialog title="告警提示" v-model="globalDialogVisible" width="50%" @close="handleDialogClose">
+      <el-row  style="margin-bottom: 2vh;">
+        <el-col :span="17" style="text-align: center;">
+          <img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl"
+            style="max-width: 100%;" />
+          <!-- 可选的视频展示 -->
+          <!-- <video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video> -->
+        </el-col>
+        <el-col :span="7" >
+          <el-row class="dialog-event-col">
+            <el-col :span="24"><strong >告警编号</strong>：{{ globalDialogContent.id }}</el-col>
+            <el-col :span="24"><strong >告警点位</strong>：{{ globalDialogContent.camera?.name }}</el-col>
+            <el-col :span="24"><strong >告警类型</strong>：{{ globalDialogContent.types }}</el-col>
+            <el-col :span="24"><strong >告警时间</strong>：{{ globalDialogContent.started_at }}</el-col>
+          </el-row>
+        </el-col>
       </el-row>
-      <img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl" style="max-width: 100%;" />
-      <video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video>
-    </el-dialog>     
+    </el-dialog>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { ref, onMounted } from 'vue';
 import eventBus from '@/utils/eventBus';
 import { BoxApi } from '@/utils/boxApi';
+import dayjs from 'dayjs';
+
+interface GlobalDialogContent {
+  id: number | null;
+  camera_id: number | null;
+  camera: { name: string };
+  types: string | null;
+  started_at: string | null; // 支持 null 或字符串类型
+  snapshotUrl: string;
+  videoUrl: string;
+}
+
 
 const apiInstance = new BoxApi();
 
-export default {
-  setup() {
-    const globalDialogVisible = ref(false);
-    const globalDialogContent = ref({
-      id: null,
-      camera_id: null,
-      camera: { name: '' },
-      types: null,
-      started_at: null,
-      snapshotUrl: '',
-      videoUrl: ''
-    });
+const globalDialogVisible = ref(false); // 控制全局对话框的可见性
+const globalDialogContent = ref<GlobalDialogContent>({
+  id: null,
+  camera_id: null,
+  camera: { name: '' },
+  types: null,
+  started_at: null,
+  snapshotUrl: '',
+  videoUrl: ''
+});
+const algorithmMap = ref(new Map()); // 算法类型映射表
 
-    const algorithmMap = ref(new Map()); 
-
-    const loadAlgorithms = async () => {
-      const token = localStorage.getItem('alertToken');
-      const algorithms = await apiInstance.getAlgorithms(token);
-      algorithmMap.value = new Map(algorithms.map((algo: { code_name: string, name: string }) => [algo.code_name, algo.name]));
-    };
-
-    const showDialog = async (data: any) => {
-      const token = localStorage.getItem('alertToken');
-      const eventDetails = await apiInstance.getEventById(data.id, token);
-      const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
-      const video = eventDetails.mediums.find((item: any) => item.name === 'video');
-
-      globalDialogContent.value = {
-        id: eventDetails.id,
-        camera_id: eventDetails.camera_id,
-        camera: eventDetails.camera,
-        types: eventDetails.types,
-        started_at: eventDetails.started_at,
-        snapshotUrl: snapshot?.file || '',
-        videoUrl: video?.file || ''
-      };
-
-      globalDialogVisible.value = true;
-    };
-
-    const handleDialogClose = () => {
-      globalDialogVisible.value = false;
-      globalDialogContent.value = {
-        id: null,
-        camera_id: null,
-        camera: { name: '' },
-        types: null,
-        started_at: null,
-        snapshotUrl: '',
-        videoUrl: ''
-      };
-    };
-
-    onMounted(() => {
-      loadAlgorithms();
-      eventBus.on('showDialog', showDialog);
-    });
-
-    return {
-      globalDialogVisible,
-      globalDialogContent,
-      handleDialogClose,
-      algorithmMap
-    };
+// 加载算法映射表
+const loadAlgorithms = async () => {
+  const token = localStorage.getItem('alertToken');
+  if (token) {
+    const algorithms = await apiInstance.getAlgorithms(token);
+    algorithmMap.value = new Map(
+      algorithms.map((algo: { code_name: string; name: string }) => [algo.code_name, algo.name])
+    );
+  } else {
+    console.error('Token 未找到，请登录');
   }
 };
+
+// 显示告警详情对话框
+const showDialog = async (data: any) => {
+  const token = localStorage.getItem('alertToken');
+  if (!token) {
+    console.error('Token 未找到，请登录');
+    return;
+  }
+  console.log('showDialog>>>>>>>>>>>>>', data);
+  // 获取告警事件的详细信息
+  const eventDetails = await apiInstance.getEventById(data.id, token);
+  const snapshot = eventDetails.mediums.find((item: any) => item.name === 'snapshot');
+  const video = eventDetails.mediums.find((item: any) => item.name === 'video');
+
+  // 更新对话框内容
+  globalDialogContent.value = {
+    id: eventDetails.id,
+    camera_id: eventDetails.camera_id,
+    camera: eventDetails.camera,
+    types: algorithmMap.value.get(eventDetails.types),
+    started_at: formatDateTime(eventDetails.started_at) ,
+    snapshotUrl: snapshot?.file || '',
+    videoUrl: video?.file || ''
+  };
+
+  globalDialogVisible.value = true; // 显示对话框
+};
+
+const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
+
+// 关闭对话框并重置内容
+const handleDialogClose = () => {
+  globalDialogVisible.value = false;
+  globalDialogContent.value = {
+    id: null,
+    camera_id: null,
+    camera: { name: '' },
+    types: null,
+    started_at: null,
+    snapshotUrl: '',
+    videoUrl: ''
+  };
+};
+
+// 生命周期钩子
+onMounted(() => {
+  loadAlgorithms(); // 加载算法数据
+  eventBus.on('showDialog', showDialog); // 监听事件总线的 showDialog 事件
+});
 </script>
 
 <style scoped>
@@ -99,4 +123,9 @@ export default {
   width: 100%;
   height: 100%;
 }
+.dialog-event-col{
+  font-size: 14px;
+  gap: 30px;
+  padding: 20px;
+}
 </style>