From 7551409394d9b1bf43529ad2e10fdb8b24766c34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BE=9A=E7=9A=93?= <1736436516@qq.com>
Date: Tue, 26 Nov 2024 16:24:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=8A=E8=AD=A6=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Max/LeftBottom.vue | 818 +++++++++++++++---------------
 1 file changed, 418 insertions(+), 400 deletions(-)

diff --git a/src/components/Max/LeftBottom.vue b/src/components/Max/LeftBottom.vue
index 80d3307..e2a67e0 100644
--- a/src/components/Max/LeftBottom.vue
+++ b/src/components/Max/LeftBottom.vue
@@ -1,433 +1,451 @@
 <template>
-    <div class="alert-container">
-        <div class="title-count">
-            <!-- <el-row class="title-row">
+  <div class="alert-container">
+    <div class="title-count">
+      <!-- <el-row class="title-row">
           今日事件列表
         </el-row> -->
-            <el-row class="total-row">
-                <div class="total-text">
-                    今日告警
-                </div>
-                <div class="total-text">
-                    {{ totalItems }}条
-                </div>
-            </el-row>
+      <el-row class="total-row">
+        <div class="total-text">
+          今日告警
         </div>
-  
-        <el-row class="table-row">
-            <el-col :span="24" class="table-col">
-                <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">
-                            <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">
-                            <template v-slot="scope">
-                                {{ formatDateTime(scope.row.ended_at) }}
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="status" label="告警状态" v-if="false">
-                            <template v-slot="scope">
-                                <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{
-                                    statusMapping[scope.row.status]
-                                }}</el-tag>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-            </el-col>
-        </el-row>
-        <!-- <el-row class="table-row">
+        <div class="total-text">
+          {{ totalItems }}条
+        </div>
+      </el-row>
+    </div>
+
+    <el-row class="table-row">
+      <el-col :span="24" class="table-col">
+        <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">
+              <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">
+              <template v-slot="scope">
+                {{ formatDateTime(scope.row.ended_at) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" label="告警状态" v-if="false">
+              <template v-slot="scope">
+                <el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{
+                  statusMapping[scope.row.status]
+                }}</el-tag>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- <el-row class="table-row">
         <el-col :span="24" class="table-col">
           <div class="table-container">
             <dv-scroll-board :config="tableConfig" class="table-part" @row-click="handleRowClick"></dv-scroll-board>
           </div>
         </el-col>
       </el-row> -->
-  
-        <!-- <div class="adjusted-widths-display">
+
+    <!-- <div class="adjusted-widths-display">
         当前列宽: {{ adjustedWidths.join(', ') }}
       </div> -->
-  
-        <el-dialog v-model="dialogVisible" title="告警详情" width="50%" class="dialog-container">
-            <div>
-                <el-row class="dialog-row">
-                    <el-col :span="12" class="dialog-left">
-                        <el-row gutter class="dialog-image-container">
-                            <template v-if="hasSnapshot">
-                                <el-image :src="snapshotFile"></el-image>
-                            </template>
-                            <!-- <template v-if="hasVideo">
+
+    <el-dialog v-model="dialogVisible" title="告警详情" width="50%" class="dialog-container">
+      <div>
+        <el-row class="dialog-row">
+          <el-col :span="12" class="dialog-left">
+            <el-row gutter class="dialog-image-container">
+              <template v-if="hasSnapshot">
+                <el-image :src="snapshotFile" @click="handleImageClick(snapshotFile)" style="cursor: pointer;"></el-image>
+              </template>
+              <!-- <template v-if="hasVideo">
                                 <video :src="videoFile" controls></video>
                             </template> -->
-                        </el-row>
-                    </el-col>
-  
-                    <el-col :span="11" class="dialog-right">
-                        <el-row>
-                            <el-col :span="24">
-                                <p>告警编号: {{ selectedRow.id }}</p>
-                            </el-col>
-                            <el-col :span="24">
-                                <p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
-                            </el-col>
-                            <el-col :span="24">
-                                <p>告警位置: {{ selectedRow.camera.name }}</p>
-                            </el-col>
-                            <el-col :span="24">
-                                <p>告警时间: {{ selectedRow.formatted_started_at }}</p>
-                            </el-col>
-                            <el-col :span="24">
-                                <p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
-                                    statusMapping[selectedRow.status]
-                                }}</el-tag></p>
-                            </el-col>
-                            <el-col :span="24">
-                                <p>摄像头编号: {{ selectedRow.camera_id }}</p>
-                            </el-col>
-                            <el-col :span="24">
-                                <p>持续时间: {{ duration }}</p>
-                            </el-col>
-                            <!-- <el-col :span="24">
+            </el-row>
+          </el-col>
+
+          <el-col :span="11" class="dialog-right">
+            <el-row>
+              <el-col :span="24">
+                <p>告警编号: {{ selectedRow.id }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p>告警位置: {{ selectedRow.camera.name }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p>告警时间: {{ selectedRow.formatted_started_at }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{
+                  statusMapping[selectedRow.status]
+                }}</el-tag></p>
+              </el-col>
+              <el-col :span="24">
+                <p>摄像头编号: {{ selectedRow.camera_id }}</p>
+              </el-col>
+              <el-col :span="24">
+                <p>持续时间: {{ duration }}</p>
+              </el-col>
+              <!-- <el-col :span="24">
                   <p>备注: {{ selectedRow.remark }}</p>
                 </el-col> -->
-  
-                            <!-- <el-col :span="24">
+
+              <!-- <el-col :span="24">
                   <el-form-item style="width: 90%;">
                     <el-input v-model="remark" placeholder="请描述事件原因" type="textarea" rows="5" :disabled="true"></el-input>
                   </el-form-item>
                 </el-col> -->
-                        </el-row>
-                    </el-col>
-                </el-row>
-            </div>
-        </el-dialog>
-    </div>
-  </template>
+            </el-row>
+          </el-col>
+        </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';
-  
-  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 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 formatDateTimeToISO = (datetime) => {
+<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 = {
+  'pending': '待处理',
+  'assigned': '处理中',
+  'closed': '已处理'
+};
+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 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', '');
-  };
-  
-  
-  const adjustColumnWidths = () => {
-    const currentWidth = window.innerWidth;
-    // console.log(">>>>>>>>>>", currentWidth);
-    const scale = currentWidth / baseWidth;
-    // console.log(">>>>>>>>>>", scale);
-  
-    // const adjustedScale = Math.max(scale, 0.5);
-    adjustedWidths.value = originalWidths.map(width => {
-        return currentWidth < baseWidth
-            ? width * scale // 缩小
-            : width * scale; // 放大
-    });
-    // nextTick(() => {
-  
-    // });
-  };
-  
-  // const tableConfig = ref({
-  //   header: ['告警类型', '告警位置', '告警时间'],
-  //   data: [], 
-  //   rowNum: 5, 
-  //   columnWidth: [100, 160, 190], 
-  //   carousel: 'single', 
+};
+
+
+const adjustColumnWidths = () => {
+  const currentWidth = window.innerWidth;
+  // console.log(">>>>>>>>>>", currentWidth);
+  const scale = currentWidth / baseWidth;
+  // console.log(">>>>>>>>>>", scale);
+
+  // const adjustedScale = Math.max(scale, 0.5);
+  adjustedWidths.value = originalWidths.map(width => {
+    return currentWidth < baseWidth
+      ? width * scale // 缩小
+      : width * scale; // 放大
+  });
+  // nextTick(() => {
+
   // });
-  
-  const fetchTypeMapping = async (token) => {
-    try {
-        const algorithms = await boxApi.getAlgorithms(token);
-        // console.log("Algorithms:", algorithms);
-        algorithms.forEach((algorithm) => {
-            typeMapping[algorithm.code_name] = algorithm.name;
-        });
-    } catch (error) {
-        console.error("Error fetching algorithms:", error);
-    }
-  };
-  
-  const fetchEvents = async () => {
-    try {
-        const token = localStorage.getItem('alertToken');
-        const limit = 1000;
-        let allEvents = [];
-        let currentPage = 1;
-  
-        const { endOfToday, startOfToday } = getDateParams();
-  
-        const timeBefore = formatDateTimeToISO(endOfToday);
-        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);
-        // console.log("Total items:", firstResponse);
-  
-        const total = firstResponse.count;
-        totalItems.value = total;
-  
-        allEvents = firstResponse.results;
-  
-        while (allEvents.length < total) {
-            currentPage += 1;
-            const response = await apiInstance.getEventsByParams(token, limit, currentPage);
-            allEvents = allEvents.concat(response.results);
-        }
-        tableData.value = allEvents;
-        // tableConfig.value.data = allEvents.map(event => [
-        //   typeMapping[event.types], 
-        //   event.camera.name, 
-        //   formatDateTime(event.ended_at) 
-        // ]);
-        // console.log(">>>>>>>>>>events IDs:", allEvents.map(event => event.id));
-    } catch (error) {
-        console.error("Error fetching events data:", error);
-    }
-  };
-  
-  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);
-  
-    return {
-        startOfToday,
-        endOfToday,
-    };
-  };
-  const formatDateTime = (datetime) => {
-    const date = new Date(datetime);
-    const year = date.getFullYear();
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const hours = date.getHours().toString().padStart(2, '0');
-    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 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) => {
-    selectedRow.value = row;
-    duration.value = calculateDuration(row.started_at, row.ended_at);
-    row.formatted_started_at = formatDateTime(row.started_at);
-  
-    // 重置媒体类型
-    hasSnapshot.value = false;
-    hasVideo.value = false;
-    snapshotFile.value = "";
-    videoFile.value = "";
-  
-    // 判断并设置媒体文件路径
-    row.mediums.forEach((medium) => {
-        if (medium.name === "snapshot") {
-            hasSnapshot.value = true;
-            snapshotFile.value = medium.file;
-        } else if (medium.name === "video") {
-            hasVideo.value = true;
-            videoFile.value = medium.file;
-        }
+};
+
+// const tableConfig = ref({
+//   header: ['告警类型', '告警位置', '告警时间'],
+//   data: [], 
+//   rowNum: 5, 
+//   columnWidth: [100, 160, 190], 
+//   carousel: 'single', 
+// });
+
+const fetchTypeMapping = async (token) => {
+  try {
+    const algorithms = await boxApi.getAlgorithms(token);
+    // console.log("Algorithms:", algorithms);
+    algorithms.forEach((algorithm) => {
+      typeMapping[algorithm.code_name] = algorithm.name;
     });
-    dialogVisible.value = true;
+  } catch (error) {
+    console.error("Error fetching algorithms:", error);
+  }
+};
+
+const fetchEvents = async () => {
+  try {
+    const token = localStorage.getItem('alertToken');
+    const limit = 1000;
+    let allEvents = [];
+    let currentPage = 1;
+
+    const { endOfToday, startOfToday } = getDateParams();
+
+    const timeBefore = formatDateTimeToISO(endOfToday);
+    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);
+    // console.log("Total items:", firstResponse);
+
+    const total = firstResponse.count;
+    totalItems.value = total;
+
+    allEvents = firstResponse.results;
+
+    while (allEvents.length < total) {
+      currentPage += 1;
+      const response = await apiInstance.getEventsByParams(token, limit, currentPage);
+      allEvents = allEvents.concat(response.results);
+    }
+    tableData.value = allEvents;
+    // tableConfig.value.data = allEvents.map(event => [
+    //   typeMapping[event.types], 
+    //   event.camera.name, 
+    //   formatDateTime(event.ended_at) 
+    // ]);
+    // console.log(">>>>>>>>>>events IDs:", allEvents.map(event => event.id));
+  } catch (error) {
+    console.error("Error fetching events data:", error);
+  }
+};
+
+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);
+
+  return {
+    startOfToday,
+    endOfToday,
   };
-  
-  
-  const handlePageChange = (page) => {
-    currentPage.value = page;
-    fetchEvents();
-  };
-  
-  // const calculateColumnWidths = () => {
-  //   const containerWidth = document.querySelector('.table-container').clientWidth;
-  // };
-  
-  
-  onMounted(async () => {
-    token.value = localStorage.getItem('alertToken');
-    await fetchTypeMapping(token.value);
-    await fetchEvents();
-    await adjustColumnWidths();
-    window.addEventListener('resize', adjustColumnWidths);
+};
+const formatDateTime = (datetime) => {
+  const date = new Date(datetime);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const day = date.getDate().toString().padStart(2, '0');
+  const hours = date.getHours().toString().padStart(2, '0');
+  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 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) => {
+  selectedRow.value = row;
+  duration.value = calculateDuration(row.started_at, row.ended_at);
+  row.formatted_started_at = formatDateTime(row.started_at);
+
+  // 重置媒体类型
+  hasSnapshot.value = false;
+  hasVideo.value = false;
+  snapshotFile.value = "";
+  videoFile.value = "";
+
+  // 判断并设置媒体文件路径
+  row.mediums.forEach((medium) => {
+    if (medium.name === "snapshot") {
+      hasSnapshot.value = true;
+      snapshotFile.value = medium.file;
+    } else if (medium.name === "video") {
+      hasVideo.value = true;
+      videoFile.value = medium.file;
+    }
   });
-  
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', adjustColumnWidths);
-  });
-  </script>
+  dialogVisible.value = true;
+};
+
+
+const handlePageChange = (page) => {
+  currentPage.value = page;
+  fetchEvents();
+};
+
+// const calculateColumnWidths = () => {
+//   const containerWidth = document.querySelector('.table-container').clientWidth;
+// };
+
+
+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>
   
   
-  <style scoped>
-  .alert-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 90%;
-    height: 100%;
-    margin: 0 0 0 1vw;
-    box-sizing: border-box;
-    background-color: transparent;
-  }
-  
-  .table-continer {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-  }
-  
-  .table-row:hover {
-    cursor: pointer;
-  }
-  
-  
-  .title-count {
-    width: 80%;
-    text-align: center;
-  
-    /* background-color: transparent; */
-  }
-  
-  
-  /* .total-text{
+<style scoped>
+.alert-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 90%;
+  height: 100%;
+  margin: 0 0 0 1vw;
+  box-sizing: border-box;
+  background-color: transparent;
+}
+
+.table-continer {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.table-row:hover {
+  cursor: pointer;
+}
+
+
+.title-count {
+  width: 80%;
+  text-align: center;
+
+  /* background-color: transparent; */
+}
+
+
+/* .total-text{
     padding-right: 1vw;
   } */
-  /* title-row内容水平上下居中 */
-  .title-row {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  
-  }
-  
-  /* total-row左右等分，分别靠左和靠右 */
-  .total-row {
-    display: flex;
-    /* justify-content: space-between; */
-    justify-content: right;
-    font-weight: bold;
-    font-size: 14px;
-    padding-right: 0vw;
-  }
-  
-  .dialog-row {
-    gap: 30px;
-    display: flex;
-    text-align: left;
-    flex-direction: row;
-  }
-  
-  .dialog-image-container {
-    gap: 20px;
-  }
-  
-  .el-dialog .el-image,
-  .el-dialog video {
-    width: 100%;
-  }
-  
-  
-  /* 基础表格样式 */
-  ::v-deep .el-table {
-    color: white;
-    font-size: 13px;
-    /* font-weight: bold; */
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    height: 14vh;
-  }
-  
-  /* 表头和单元格基本样式 */
-  
-  ::v-deep .el-table td {
-    border: none;
-    background-color: #001529;
-    transition: border 0.3s ease, background-color 0.3s ease;
-    color: white;
-    padding: 0;
-    /* height: 10px; */
-    /* white-space: nowrap; */
-    /* overflow: hidden;  */
-    /* text-overflow: ellipsis; */
-  }
-  
-  /* 去掉中间数据的分割线 */
-  /* ::v-deep .el-table .el-table__row>td{
+/* title-row内容水平上下居中 */
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+/* total-row左右等分，分别靠左和靠右 */
+.total-row {
+  display: flex;
+  /* justify-content: space-between; */
+  justify-content: right;
+  font-weight: bold;
+  font-size: 14px;
+  padding-right: 0vw;
+}
+
+.dialog-row {
+  gap: 30px;
+  display: flex;
+  text-align: left;
+  flex-direction: row;
+}
+
+.dialog-image-container {
+  gap: 20px;
+}
+
+.el-dialog .el-image,
+.el-dialog video {
+  width: 100%;
+}
+
+
+/* 基础表格样式 */
+::v-deep .el-table {
+  color: white;
+  font-size: 13px;
+  /* font-weight: bold; */
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  height: 14vh;
+}
+
+/* 表头和单元格基本样式 */
+
+::v-deep .el-table td {
+  border: none;
+  background-color: #001529;
+  transition: border 0.3s ease, background-color 0.3s ease;
+  color: white;
+  padding: 0;
+  /* height: 10px; */
+  /* white-space: nowrap; */
+  /* overflow: hidden;  */
+  /* text-overflow: ellipsis; */
+}
+
+/* 去掉中间数据的分割线 */
+/* ::v-deep .el-table .el-table__row>td{
   border: none;
   } */
-  
-  .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 {
-    color: white;
-    font-weight: bold;
-    background-color: #001529;
-    padding: 0;
-  }
-  
-  ::v-deep .el-table .el-table__cell:hover {
-    background-color: transparent;
-    color: rgb(238, 150, 49);
-    /* font-size: 26px; */
-    /* 保持文本为白色 */
-  }
-  
-  .el-tooltip__popper {
-    font-size: 26px; 
-    max-width:50%
-  }
-  </style>
+
+.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 {
+  color: white;
+  font-weight: bold;
+  background-color: #001529;
+  padding: 0;
+}
+
+::v-deep .el-table .el-table__cell:hover {
+  background-color: transparent;
+  color: rgb(238, 150, 49);
+  /* font-size: 26px; */
+  /* 保持文本为白色 */
+}
+
+.el-tooltip__popper {
+  font-size: 26px;
+  max-width: 50%
+}
+</style>
   
\ No newline at end of file