告警弹窗

src/components/Max/LeftBottom.vue

@@ -19,16 +19,14 @@
         <div class="table-container">
           <el-table :data="tableData" @row-click="handleRowClick" class="table-part">
             <el-table-column v-show="false" prop="id" label="告警编号" v-if="false"></el-table-column>
-                        <el-table-column label="告警类型" :width="adjustedWidths[0]" align="center"
-                            :show-overflow-tooltip="true">
+            <el-table-column label="告警类型" :width="adjustedWidths[0]" align="center" :show-overflow-tooltip="true">
               <template v-slot="scope">
                 {{ typeMapping[scope.row.types] }}
               </template>
             </el-table-column>
             <el-table-column prop="camera.name" label="告警位置" :width="adjustedWidths[1]" align="center"
               :show-overflow-tooltip="true"></el-table-column>
-                        <el-table-column label="告警时间" :width="adjustedWidths[2]" align="center"
-                            :show-overflow-tooltip="true">
+            <el-table-column label="告警时间" :width="adjustedWidths[2]" align="center" :show-overflow-tooltip="true">
               <template v-slot="scope">
                 {{ formatDateTime(scope.row.ended_at) }}
               </template>
@@ -62,7 +60,7 @@
           <el-col :span="12" class="dialog-left">
             <el-row gutter class="dialog-image-container">
               <template v-if="hasSnapshot">
-                                <el-image :src="snapshotFile"></el-image>
+                <el-image :src="snapshotFile" @click="handleImageClick(snapshotFile)" style="cursor: pointer;"></el-image>
               </template>
               <!-- <template v-if="hasVideo">
                                 <video :src="videoFile" controls></video>
@@ -109,12 +107,17 @@
         </el-row>
       </div>
     </el-dialog>
+
+    <el-dialog v-model="previewVisible" width="60%" custom-class="image-preview-dialog" :close-on-click-modal="true">
+      <img :src="previewImage" alt="预览图片" style="width: 100%; height: auto; display: block; margin: auto;" />
+    </el-dialog>
   </div>
 </template>
   
 <script setup>
 import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
 import { BoxApi } from '@/utils/boxApi.ts';
+import { useGlobalTimerStore } from '@/stores/globalTimerStore';
 
 const boxApi = new BoxApi();
 const tableData = ref([]);
@@ -142,6 +145,13 @@
 const originalWidths = [97, 150, 160]; // 默认宽度
 const adjustedWidths = ref([...originalWidths]);
 const baseWidth = 2150;
+const previewVisible = ref(false); // 控制预览弹窗显示
+const previewImage = ref(''); // 预览的图片路径
+
+const handleImageClick = (imagePath) => {
+  previewImage.value = imagePath; // 设置预览图片路径
+  previewVisible.value = true; // 显示预览弹窗
+};
 
 const formatDateTimeToISO = (datetime) => {
   return new Date(datetime).toISOString().replace('.000', '');
@@ -289,15 +299,21 @@
 
 
 onMounted(async () => {
+
   token.value = localStorage.getItem('alertToken');
   await fetchTypeMapping(token.value);
   await fetchEvents();
   await adjustColumnWidths();
   window.addEventListener('resize', adjustColumnWidths);
+  const globalTimerStore = useGlobalTimerStore();
+  globalTimerStore.registerCallback(fetchEvents);
+  globalTimerStore.startTimer();
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', adjustColumnWidths);
+  const globalTimerStore = useGlobalTimerStore();
+  globalTimerStore.unregisterCallback(fetchEvents);
 });
 </script>
   
@@ -404,9 +420,11 @@
 .table-container>>>.el-table__row>td {
   border: none;
 }
+
 .table-container>>>.el-table th.is-leaf {
   border: none;
 }
+
 ::v-deep .el-table__inner-wrapper::before {
   height: 0;
 }