告警弹窗

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,46 +107,58 @@
         </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>
+</template>
   
-  <script setup>
-  import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
-  import { BoxApi } from '@/utils/boxApi.ts';
+<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([]);
-  const dialogVisible = ref(false);
-  const remark = ref("");
-  const selectedRow = ref({});
-  const typeMapping = reactive({});
-  const currentPage = ref(1);
-  const pageSize = ref(20);
-  const totalItems = ref(0);
-  const displayTotalItems = ref(0);
-  const token = ref(null);
-  const apiInstance = new BoxApi();
-  const statusMapping = {
+const boxApi = new BoxApi();
+const tableData = ref([]);
+const dialogVisible = ref(false);
+const remark = ref("");
+const selectedRow = ref({});
+const typeMapping = reactive({});
+const currentPage = ref(1);
+const pageSize = ref(20);
+const totalItems = ref(0);
+const displayTotalItems = ref(0);
+const token = ref(null);
+const apiInstance = new BoxApi();
+const statusMapping = {
   'pending': '待处理',
   'assigned': '处理中',
   'closed': '已处理'
-  };
-  const duration = ref('');
+};
+const duration = ref('');
 
-  const hasSnapshot = ref(false);
-  const hasVideo = ref(false);
-  const snapshotFile = ref("");
-  const videoFile = ref("");
-  const originalWidths = [97, 150, 160]; // 默认宽度
-  const adjustedWidths = ref([...originalWidths]);
-  const baseWidth = 2150;
+const hasSnapshot = ref(false);
+const hasVideo = ref(false);
+const snapshotFile = ref("");
+const videoFile = ref("");
+const originalWidths = [97, 150, 160]; // 默认宽度
+const adjustedWidths = ref([...originalWidths]);
+const baseWidth = 2150;
+const previewVisible = ref(false); // 控制预览弹窗显示
+const previewImage = ref(''); // 预览的图片路径
 
-  const formatDateTimeToISO = (datetime) => {
+const handleImageClick = (imagePath) => {
+  previewImage.value = imagePath; // 设置预览图片路径
+  previewVisible.value = true; // 显示预览弹窗
+};
+
+const formatDateTimeToISO = (datetime) => {
   return new Date(datetime).toISOString().replace('.000', '');
-  };
+};
 
 
-  const adjustColumnWidths = () => {
+const adjustColumnWidths = () => {
   const currentWidth = window.innerWidth;
   // console.log(">>>>>>>>>>", currentWidth);
   const scale = currentWidth / baseWidth;
@@ -163,17 +173,17 @@
   // nextTick(() => {
 
   // });
-  };
+};
 
-  // const tableConfig = ref({
-  //   header: ['告警类型', '告警位置', '告警时间'],
-  //   data: [], 
-  //   rowNum: 5, 
-  //   columnWidth: [100, 160, 190], 
-  //   carousel: 'single', 
-  // });
+// const tableConfig = ref({
+//   header: ['告警类型', '告警位置', '告警时间'],
+//   data: [], 
+//   rowNum: 5, 
+//   columnWidth: [100, 160, 190], 
+//   carousel: 'single', 
+// });
 
-  const fetchTypeMapping = async (token) => {
+const fetchTypeMapping = async (token) => {
   try {
     const algorithms = await boxApi.getAlgorithms(token);
     // console.log("Algorithms:", algorithms);
@@ -183,9 +193,9 @@
   } catch (error) {
     console.error("Error fetching algorithms:", error);
   }
-  };
+};
 
-  const fetchEvents = async () => {
+const fetchEvents = async () => {
   try {
     const token = localStorage.getItem('alertToken');
     const limit = 1000;
@@ -198,7 +208,7 @@
     const timeAfter = formatDateTimeToISO(startOfToday);
     // console.log("Start of today:", timeAfter);
     // const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage);
-        const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage,timeBefore, timeAfter);
+    const firstResponse = await apiInstance.getEventsByParams(token, limit, currentPage, timeBefore, timeAfter);
     // console.log("Total items:", firstResponse);
 
     const total = firstResponse.count;
@@ -221,9 +231,9 @@
   } catch (error) {
     console.error("Error fetching events data:", error);
   }
-  };
+};
 
-  const getDateParams = () => {
+const getDateParams = () => {
   const today = new Date();
   const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
   const endOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
@@ -232,8 +242,8 @@
     startOfToday,
     endOfToday,
   };
-  };
-  const formatDateTime = (datetime) => {
+};
+const formatDateTime = (datetime) => {
   const date = new Date(datetime);
   const year = date.getFullYear();
   const month = (date.getMonth() + 1).toString().padStart(2, '0');
@@ -242,18 +252,18 @@
   const minutes = date.getMinutes().toString().padStart(2, '0');
   const seconds = date.getSeconds().toString().padStart(2, '0');
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  };
+};
 
-  const calculateDuration = (started_at, ended_at) => {
+const calculateDuration = (started_at, ended_at) => {
   const start = new Date(started_at);
   const end = new Date(ended_at);
   const durationMs = end - start;
   const minutes = Math.floor(durationMs / 60000);
   const seconds = ((durationMs % 60000) / 1000).toFixed(0);
   return `${minutes}分${seconds < 10 ? '0' : ''}${seconds}秒`;
-  };
+};
 
-  const handleRowClick = (row) => {
+const handleRowClick = (row) => {
   selectedRow.value = row;
   duration.value = calculateDuration(row.started_at, row.ended_at);
   row.formatted_started_at = formatDateTime(row.started_at);
@@ -275,35 +285,41 @@
     }
   });
   dialogVisible.value = true;
-  };
+};
 
 
-  const handlePageChange = (page) => {
+const handlePageChange = (page) => {
   currentPage.value = page;
   fetchEvents();
-  };
+};
 
-  // const calculateColumnWidths = () => {
-  //   const containerWidth = document.querySelector('.table-container').clientWidth;
-  // };
+// const calculateColumnWidths = () => {
+//   const containerWidth = document.querySelector('.table-container').clientWidth;
+// };
 
 
-  onMounted(async () => {
+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(() => {
+onBeforeUnmount(() => {
   window.removeEventListener('resize', adjustColumnWidths);
-  });
-  </script>
+  const globalTimerStore = useGlobalTimerStore();
+  globalTimerStore.unregisterCallback(fetchEvents);
+});
+</script>
   
   
-  <style scoped>
-  .alert-container {
+<style scoped>
+.alert-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -312,67 +328,67 @@
   margin: 0 0 0 1vw;
   box-sizing: border-box;
   background-color: transparent;
-  }
+}
 
-  .table-continer {
+.table-continer {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  }
+}
 
-  .table-row:hover {
+.table-row:hover {
   cursor: pointer;
-  }
+}
 
 
-  .title-count {
+.title-count {
   width: 80%;
   text-align: center;
 
   /* background-color: transparent; */
-  }
+}
 
 
-  /* .total-text{
+/* .total-text{
     padding-right: 1vw;
   } */
-  /* title-row内容水平上下居中 */
-  .title-row {
+/* title-row内容水平上下居中 */
+.title-row {
   display: flex;
   align-items: center;
   justify-content: center;
 
-  }
+}
 
-  /* total-row左右等分，分别靠左和靠右 */
-  .total-row {
+/* total-row左右等分，分别靠左和靠右 */
+.total-row {
   display: flex;
   /* justify-content: space-between; */
   justify-content: right;
   font-weight: bold;
   font-size: 14px;
   padding-right: 0vw;
-  }
+}
 
-  .dialog-row {
+.dialog-row {
   gap: 30px;
   display: flex;
   text-align: left;
   flex-direction: row;
-  }
+}
 
-  .dialog-image-container {
+.dialog-image-container {
   gap: 20px;
-  }
+}
 
-  .el-dialog .el-image,
-  .el-dialog video {
+.el-dialog .el-image,
+.el-dialog video {
   width: 100%;
-  }
+}
 
 
-  /* 基础表格样式 */
-  ::v-deep .el-table {
+/* 基础表格样式 */
+::v-deep .el-table {
   color: white;
   font-size: 13px;
   /* font-weight: bold; */
@@ -380,11 +396,11 @@
   padding: 0;
   margin: 0;
   height: 14vh;
-  }
+}
 
-  /* 表头和单元格基本样式 */
+/* 表头和单元格基本样式 */
 
-  ::v-deep .el-table td {
+::v-deep .el-table td {
   border: none;
   background-color: #001529;
   transition: border 0.3s ease, background-color 0.3s ease;
@@ -394,40 +410,42 @@
   /* white-space: nowrap; */
   /* overflow: hidden;  */
   /* text-overflow: ellipsis; */
-  }
+}
 
-  /* 去掉中间数据的分割线 */
-  /* ::v-deep .el-table .el-table__row>td{
+/* 去掉中间数据的分割线 */
+/* ::v-deep .el-table .el-table__row>td{
   border: none;
   } */
 
-  .table-container >>> .el-table__row>td{
+.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;
-  }
+}
 
-  ::v-deep .el-table thead th {
+.table-container>>>.el-table th.is-leaf {
+  border: none;
+}
+
+::v-deep .el-table__inner-wrapper::before {
+  height: 0;
+}
+
+::v-deep .el-table thead th {
   color: white;
   font-weight: bold;
   background-color: #001529;
   padding: 0;
-  }
+}
 
-  ::v-deep .el-table .el-table__cell:hover {
+::v-deep .el-table .el-table__cell:hover {
   background-color: transparent;
   color: rgb(238, 150, 49);
   /* font-size: 26px; */
   /* 保持文本为白色 */
-  }
+}
 
-  .el-tooltip__popper {
+.el-tooltip__popper {
   font-size: 26px;
-    max-width:50%
-  }
-  </style>
+  max-width: 50%
+}
+</style>