格式化日期，格式化类型映射,mitt实例化监听弹窗开关

src/App.vue

@@ -1,33 +1,48 @@
 <template>
   <div id="app" class="app-container">
     <router-view></router-view>
-    <el-dialog
+    <el-dialog title="告警提示" v-model="globalDialogVisible" width="50%" @close="handleDialogClose">
-      title="告警详情"
+      <el-row  style="margin-bottom: 2vh;">
-      v-model="globalDialogVisible"
+        <el-col :span="17" style="text-align: center;">
-      width="50%"
+          <img :src="globalDialogContent.snapshotUrl" alt="告警图片" v-if="globalDialogContent.snapshotUrl"
-      @close="handleDialogClose">
+            style="max-width: 100%;" />
-      <el-row :gutter="30" style="margin-bottom: 2vh;">
+          <!-- 可选的视频展示 -->
-        <el-col span="8">告警编号：{{ globalDialogContent.id }}</el-col>
+          <!-- <video v-if="globalDialogContent.videoUrl" :src="globalDialogContent.videoUrl" controls style="max-width: 100%;"></video> -->
-        <el-col span="8">摄像头名称：{{ globalDialogContent.camera?.name }}</el-col>
+        </el-col>
-        <el-col span="8">告警类型：{{ algorithmMap.get(globalDialogContent.types) || '未知类型' }}</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>
   </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 {
+const globalDialogVisible = ref(false); // 控制全局对话框的可见性
-  setup() {
+const globalDialogContent = ref<GlobalDialogContent>({
-    const globalDialogVisible = ref(false);
-    const globalDialogContent = ref({
   id: null,
   camera_id: null,
   camera: { name: '' },
@@ -35,36 +50,53 @@ export default {
   started_at: null,
   snapshotUrl: '',
   videoUrl: ''
-    });
+});
+const algorithmMap = ref(new Map()); // 算法类型映射表
 
-    const algorithmMap = ref(new Map()); 
+// 加载算法映射表
-
+const loadAlgorithms = async () => {
-    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]));
+    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 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: eventDetails.types,
+    types: algorithmMap.value.get(eventDetails.types),
-        started_at: eventDetails.started_at,
+    started_at: formatDateTime(eventDetails.started_at) ,
     snapshotUrl: snapshot?.file || '',
     videoUrl: video?.file || ''
   };
 
-      globalDialogVisible.value = true;
+  globalDialogVisible.value = true; // 显示对话框
-    };
+};
 
-    const handleDialogClose = () => {
+const formatDateTime = (isoString: string): string => dayjs(isoString).format('YYYY-MM-DD HH:mm:ss');
+
+// 关闭对话框并重置内容
+const handleDialogClose = () => {
   globalDialogVisible.value = false;
   globalDialogContent.value = {
     id: null,
@@ -75,21 +107,13 @@ export default {
     snapshotUrl: '',
     videoUrl: ''
   };
-    };
-
-    onMounted(() => {
-      loadAlgorithms();
-      eventBus.on('showDialog', showDialog);
-    });
-
-    return {
-      globalDialogVisible,
-      globalDialogContent,
-      handleDialogClose,
-      algorithmMap
-    };
-  }
 };
+
+// 生命周期钩子
+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>