From ecf5023e3ce7e6c422df29debb7b860734cc0f91 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Fri, 27 Jun 2025 10:24:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=82=B9=E4=BA=91=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=B0=83=E6=8D=A2=E5=88=B0=E6=92=91=E6=9D=86=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/AppearanceMonitor.vue |  40 +-
 src/views/dashboard/PoleMonitor.vue       | 682 +++++++++++++---------
 vite.config.ts                            |   3 +-
 3 files changed, 416 insertions(+), 309 deletions(-)

diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue
index d63bf24..56902a7 100644
--- a/src/views/dashboard/AppearanceMonitor.vue
+++ b/src/views/dashboard/AppearanceMonitor.vue
@@ -85,7 +85,7 @@
       </div>
 
     </div>
-    <PointModal v-model:value="isPointOpen" :info="currentRow" @close="isPointOpen = false" />
+    <!-- <PointModal v-model:value="isPointOpen" :info="currentRow" @close="isPointOpen = false" /> -->
     <AppearanceAlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" :beforeImage="currBeforeFileList" @close="isAlarmOpen = false" />
     <DeleteModal v-model:value="isDeleteOpen" @delete-success="getList()" :info="currentRow" @close="isDeleteOpen = false" />
   </div>
@@ -99,7 +99,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation, Scrollbar } from "swiper/modules";
 import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi, getBeforeMonitorDetailApi } from '@/api/dashboard';
 import { isSuccessApi } from "@/utils/forApi";
-import PointModal from './components/PointModal.vue'
+// import PointModal from './components/PointModal.vue'
 import AppearanceAlarmModal from './components/AppearanceAlarmModal.vue'
 import DeleteModal from './components/DeleteModal.vue'
 import { useWebSocketStore } from '@/stores/websocketStore';
@@ -112,7 +112,7 @@ import { color } from 'echarts';
 const modules = [Navigation, Scrollbar];
 const activeIndex = ref(-1);
 const swiperRef = ref(null);
-const isPointOpen = ref<Boolean>(false); //点云弹窗
+// const isPointOpen = ref<Boolean>(false); //点云弹窗
 const isAlarmOpen = ref<Boolean>(false); //详情弹窗
 const isDeleteOpen = ref<Boolean>(false); //删除弹窗
 const websocketStore = useWebSocketStore();
@@ -187,7 +187,7 @@ const columns = [
   {
     slot: "operation",
     label: "操作",
-    width: 140,
+    width: 120,
     formatter: (row) => {
       return h(
         "div",
@@ -208,22 +208,22 @@ const columns = [
               class: "pf-1",
             },
             [
-              h("i", 
-                {
-                  style: {
-                    fontSize: "14px",
-                    letterSpacing: "2px",
-                    marginRight: "4px",
-                    color:"#37EBFF"
-                  },
-                  onClick: () => {
-                    // console.log(row.id);
-                    // 这里可以添加按钮点击后的具体逻辑
-                    isPointOpen.value = true;
-                  }
-                },
-                "点云"
-              ),
+              // h("i", 
+              //   {
+              //     style: {
+              //       fontSize: "14px",
+              //       letterSpacing: "2px",
+              //       marginRight: "4px",
+              //       color:"#37EBFF"
+              //     },
+              //     onClick: () => {
+              //       // console.log(row.id);
+              //       // 这里可以添加按钮点击后的具体逻辑
+              //       isPointOpen.value = true;
+              //     }
+              //   },
+              //   "点云"
+              // ),
               h("i", 
                 {
                   style: {
diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue
index d5ce813..62bd572 100644
--- a/src/views/dashboard/PoleMonitor.vue
+++ b/src/views/dashboard/PoleMonitor.vue
@@ -1,237 +1,331 @@
 <template>
-    <div class="pole-monitor-wrap mt-[32px]">
-        <div class="module-header">
-            <ContentHeader bgLayout="1855">
-                <template #title>
-                    <div class="w-[200px] bg_title bg_title_3">
-                    </div>
-                </template>
-                <template #extra>
-                    <div></div>
-                </template>
-            </ContentHeader>
-        </div>
-        <div class="pole-main-content px-[16px]">
-            <!-- 搜索区域 -->
-            <div class="pole-monitor-search-box">
-                <el-select v-model="searchForm.station" placeholder="站点" class="custom-select">
-                    <el-option label="小觉站" value="小觉站"></el-option>
-                    <el-option label="东西站" value="东西站"></el-option>
-                    <el-option label="立杆区" value="立杆区"></el-option>
-                </el-select>
-                <el-input v-model="searchForm.train_number" placeholder="请输入列车号" class="custom-input" clearable />
-                <el-input v-model="searchForm.train_carriage_number" placeholder="请输入车厢号" class="custom-input"
-                    clearable />
-                <el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select" clearable>
-                    <el-option label="撑杆弯曲" value="撑杆弯曲"></el-option>
-                    <el-option label="撑杆断折" value="撑杆断折"></el-option>
-                </el-select>
-                <el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
-                    <span class="icon"></span> 查询
-                </el-button>
-                <el-button @click="handleReset" class="basic-btn reset-btn">
-                    <span class="icon"></span> 重置
-                </el-button>
+  <div class="pole-monitor-wrap mt-[32px]">
+    <div class="module-header">
+      <ContentHeader bgLayout="1855">
+        <template #title>
+          <div class="w-[200px] bg_title bg_title_3"></div>
+        </template>
+        <template #extra>
+          <div></div>
+        </template>
+      </ContentHeader>
+    </div>
+    <div class="pole-main-content px-[16px]">
+      <!-- 搜索区域 -->
+      <div class="pole-monitor-search-box">
+        <el-select
+          v-model="searchForm.station"
+          placeholder="站点"
+          class="custom-select"
+        >
+          <el-option label="小觉站" value="小觉站"></el-option>
+          <el-option label="东西站" value="东西站"></el-option>
+          <el-option label="立杆区" value="立杆区"></el-option>
+        </el-select>
+        <el-input
+          v-model="searchForm.train_number"
+          placeholder="请输入列车号"
+          class="custom-input"
+          clearable
+        />
+        <el-input
+          v-model="searchForm.train_carriage_number"
+          placeholder="请输入车厢号"
+          class="custom-input"
+          clearable
+        />
+        <el-select
+          v-model="searchForm.fault_type"
+          placeholder="故障类型"
+          class="custom-select"
+          clearable
+        >
+          <el-option label="撑杆弯曲" value="撑杆弯曲"></el-option>
+          <el-option label="撑杆断折" value="撑杆断折"></el-option>
+        </el-select>
+        <el-button
+          type="primary"
+          @click="handleQuery"
+          class="basic-btn query-btn"
+        >
+          <span class="icon"></span> 查询
+        </el-button>
+        <el-button @click="handleReset" class="basic-btn reset-btn">
+          <span class="icon"></span> 重置
+        </el-button>
+      </div>
+      <!-- 主体内容区域 -->
+      <div class="flex justify-between pole-monitor-main">
+        <!-- 左侧视频与缩略图区域 -->
+        <div class="left-panel" v-if="currFileList?.length">
+          <!-- 主图显示 -->
+          <div class="main-image">
+            <!-- <img src="https://picsum.phfotos/300/200?random=1"  alt="监控画面"> -->
+            <!-- <video ref="refVideo" controls muted :src="currFile?.video_url" width="100%" height="100%" style="object-fit: fill;"></video> -->
+            <div class="file-preview-screen">
+              <Player
+                :src="currFile?.video_url"
+                :is-playing="isPlaying"
+                v-if="currFile?.video_url"
+                @play="isPlaying = true"
+                @pause="isPlaying = false"
+              />
+              <img :src="currFile?.image_url" v-else-if="currFile?.image_url" />
+              <div v-else>
+                <!-- //TODO 视频【图片】加载失败 -->
+              </div>
             </div>
-            <!-- 主体内容区域 -->
-            <div class="flex justify-between pole-monitor-main">
-                <!-- 左侧视频与缩略图区域 -->
-                <div class="left-panel" v-if="currFileList?.length">
-                    <!-- 主图显示 -->
-                    <div class="main-image">
-                        <!-- <img src="https://picsum.phfotos/300/200?random=1"  alt="监控画面"> -->
-                        <!-- <video ref="refVideo" controls muted :src="currFile?.video_url" width="100%" height="100%" style="object-fit: fill;"></video> -->
-                        <div class="file-preview-screen">
-                            <Player :src="currFile?.video_url" :is-playing="isPlaying" v-if="currFile?.video_url"
-                                @play="isPlaying = true" @pause="isPlaying = false" />
-                            <img :src="currFile?.image_url" v-else-if="currFile?.image_url">
-                            <div v-else>
-                                <!-- //TODO 视频【图片】加载失败 -->
-                            </div>
-                        </div>
-                        <div class="image-info" v-if="currFile?.image_url">
-                            <!-- //TODO 参数单位和待确认 -->
-                            <span>长: {{ currFile?.length }}</span>
-                            <span>宽: {{ currFile?.width }}</span>
-                            <span>高: {{ currFile?.height }}</span>
-                            <span>体积: {{ currFile?.volume }}</span>
-                            <span>重量: {{ currFile?.weight }}</span>
-                        </div>
-                    </div>
-                    <!-- 缩略图区域 -->
-                    <div class="thumbnail-container mt-[16px] w-[870px]">
-                        <swiper ref="swiperRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
-                            :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
-                            :observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
-                            <swiper-slide v-for="(file, index) in currFileList" :key="index"
-                                @click="handleSlideClick(index)" :class="{ 'active-slide': activeIndex === index }">
-                                <img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer" />
-                                <SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url"
-                                    v-else-if="file?.video_url" :isPlaying="isPlaying && (activeIndex === index)" />
-                                <div v-else>
-                                    <!-- //TODO 视频【图片】加载失败 -->
-                                </div>
-                            </swiper-slide>
-                        </swiper>
-                    </div>
-                </div>
-                <div class="left-panel empty-bg" v-else></div>
-                <!-- 右侧表格区域 -->
-                <div class="flex-1 right-panel">
-                    <div class="bg-transparent baseTable_wrap">
-                        <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
-                            :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
-                            :columns="columns" :page="pagination.currentPage" @change="handleTableChange"
-                            :row-class-name="handleRowClassName" @row-click="handleRowClick">
-                        </BaseTable>
-                    </div>
-                </div>
+            <div class="image-info" v-if="currFile?.image_url">
+              <!-- //TODO 参数单位和待确认 -->
+              <span>长: {{ currFile?.length }}</span>
+              <span>宽: {{ currFile?.width }}</span>
+              <span>高: {{ currFile?.height }}</span>
+              <span>体积: {{ currFile?.volume }}</span>
+              <span>重量: {{ currFile?.weight }}</span>
             </div>
+          </div>
+          <!-- 缩略图区域 -->
+          <div class="thumbnail-container mt-[16px] w-[870px]">
+            <swiper
+              ref="swiperRef"
+              :modules="modules"
+              :slides-per-view="3"
+              :space-between="10"
+              navigation
+              :scrollbar="{ draggable: false }"
+              :centered-slides="false"
+              :observer="true"
+              :observeParents="true"
+              @swiper="onSwiper"
+              @slideChange="onSlideChange"
+            >
+              <swiper-slide
+                v-for="(file, index) in currFileList"
+                :key="index"
+                @click="handleSlideClick(index)"
+                :class="{ 'active-slide': activeIndex === index }"
+              >
+                <img
+                  :src="file?.image_url"
+                  v-if="file?.image_url"
+                  class="cursor-pointer"
+                />
+                <SwiperPlayer
+                  class="cursor-pointer"
+                  :videoUrl="file?.video_url"
+                  v-else-if="file?.video_url"
+                  :isPlaying="isPlaying && activeIndex === index"
+                />
+                <div v-else>
+                  <!-- //TODO 视频【图片】加载失败 -->
+                </div>
+              </swiper-slide>
+            </swiper>
+          </div>
         </div>
-        <AlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" @close="isAlarmOpen = false" />
-        <DeleteModal v-model:value="isDeleteOpen" @delete-success="getList()" :info="currentRow" @close="isDeleteOpen = false" />
-        <!-- <div class="bg_footer_desp">
-        </div> -->
+        <div class="left-panel empty-bg" v-else></div>
+        <!-- 右侧表格区域 -->
+        <div class="flex-1 right-panel">
+          <div class="bg-transparent baseTable_wrap">
+            <BaseTable
+              class="bg-transparent baseTable_box"
+              :total="pagination.total"
+              :pageSize="pagination.pageSize"
+              :dataSource="listData"
+              :isFixedPagination="true"
+              :columns="columns"
+              :page="pagination.currentPage"
+              @change="handleTableChange"
+              :row-class-name="handleRowClassName"
+              @row-click="handleRowClick"
+            >
+            </BaseTable>
+          </div>
+        </div>
+      </div>
     </div>
+    <PointModal
+      v-model:value="isPointOpen"
+      :info="currentRow"
+      @close="isPointOpen = false"
+    />
+    <AlarmModal
+      v-model:value="isAlarmOpen"
+      :info="currentRow"
+      :image="currFileList"
+      @close="isAlarmOpen = false"
+    />
+    <DeleteModal
+      v-model:value="isDeleteOpen"
+      @delete-success="getList()"
+      :info="currentRow"
+      @close="isDeleteOpen = false"
+    />
+    <!-- <div class="bg_footer_desp">
+        </div> -->
+  </div>
 </template>
 <script lang="ts" setup>
-import { onBeforeRouteLeave } from 'vue-router';
-import Player from '@/components/videoPlayer/Player.vue'
-import ContentHeader from '@/components/ContentHeader.vue';
+import { onBeforeRouteLeave } from "vue-router";
+import Player from "@/components/videoPlayer/Player.vue";
+import ContentHeader from "@/components/ContentHeader.vue";
 import { BaseTable } from "@/components/CustomTable";
-import SwiperPlayer from './components/SwiperPlayer.vue'
+import SwiperPlayer from "./components/SwiperPlayer.vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation, Scrollbar } from "swiper/modules";
-import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
+import {
+  getAppearanceMonitorApi,
+  getAppearanceMonitorDetailApi,
+} from "@/api/dashboard";
 import { isSuccessApi } from "@/utils/forApi";
-import AlarmModal from './components/AlarmModal.vue'
-import DeleteModal from './components/DeleteModal.vue'
-import { useWebSocketStore } from '@/stores/websocketStore';
+import PointModal from "./components/PointModal.vue";
+import AlarmModal from "./components/AlarmModal.vue";
+import DeleteModal from "./components/DeleteModal.vue";
+import { useWebSocketStore } from "@/stores/websocketStore";
 import "swiper/css";
-import 'swiper/scss';
-import 'swiper/scss/navigation';
+import "swiper/scss";
+import "swiper/scss/navigation";
 
 defineOptions({
-    name: "PoleMonitorIndex"
+  name: "PoleMonitorIndex",
 });
 const modules = [Navigation, Scrollbar];
 const activeIndex = ref(-1);
 const swiperRef = ref(null);
 const columns = [
-    {
-        label: "站点",
-        property: "station",
-        width: 80,
-    },
-    {
-        label: "车号",
-        property: "train_number",
-        width: 155,
-    },
-    {
-        label: "车型",
-        property: "train_model",
-        width: 70,
-    },
-    {
-        label: "车厢号",
-        property: "train_carriage_number",
-        width: 95,
-    },
-    {
-        label: "告警类型",
-        property: "alarm_type",
-        width: 90,
+  {
+    label: "站点",
+    property: "station",
+    width: 80,
+  },
+  {
+    label: "车号",
+    property: "train_number",
+    width: 155,
+  },
+  {
+    label: "车型",
+    property: "train_model",
+    width: 70,
+  },
+  {
+    label: "车厢号",
+    property: "train_carriage_number",
+    width: 95,
+  },
+  {
+    label: "告警类型",
+    property: "alarm_type",
+    width: 90,
+  },
+  {
+    label: "故障类型",
+    property: "fault_type",
+    width: 100,
+  },
+  {
+    label: "等级",
+    property: "level",
+    width: 60,
+  },
+  // {
+  //     label: "复核",
+  //     property: "is_reviewed",
+  //     formatter: ({ is_reviewed }) => {
+  //         return is_reviewed === true
+  //             ? "是"
+  //             : "否";
+  //     },
+  //     width: 80,
+  // },
+  {
+    label: "时间",
+    property: "created_at",
+  },
+  {
+    slot: "operation",
+    label: "操作",
+    width: 140,
+    formatter: (row) => {
+      return h(
+        "div",
+        {
+          style: {
+            fontSize: "14px",
+            color: "#37EBFF",
+          },
+        },
+        [
+          // h("i", {
+          //   class: `iconfont icon-zishebeizu pr-[8px]`
+          // }),
+          h(
+            "span",
+            {
+              fontSize: "14px",
+              class: "pf-1",
+            },
+            [
+              h(
+                "i",
+                {
+                  style: {
+                    fontSize: "14px",
+                    letterSpacing: "2px",
+                    marginRight: "4px",
+                    color: "#37EBFF",
+                  },
+                  onClick: () => {
+                    // console.log(row.id);
+                    // 这里可以添加按钮点击后的具体逻辑
+                    isPointOpen.value = true;
+                  },
+                },
+                "点云"
+              ),
+              h(
+                "i",
+                {
+                  style: {
+                    fontSize: "14px",
+                    letterSpacing: "2px",
+                    marginRight: "4px",
+                    color: "#009DFF",
+                  },
+                  onClick: (row) => {
+                    // console.log(row.id);
+                    // 这里可以添加按钮点击后的具体逻辑
+                    isAlarmOpen.value = true;
+                    currentRow.value = row;
+                  },
+                },
+                "详情"
+              ),
+              h(
+                "i",
+                {
+                  style: {
+                    fontSize: "14px",
+                    letterSpacing: "2px",
+                    marginRight: "4px",
+                    color: "#FF2727",
+                  },
+                  onClick: (row) => {
+                    // console.log(row.id);
+                    // 这里可以添加按钮点击后的具体逻辑
+                    isDeleteOpen.value = true;
+                    currentRow.value = row;
+                  },
+                },
+                "删除"
+              ),
+            ]
+          ),
+        ]
+      );
     },
-    {
-        label: "故障类型",
-        property: "fault_type",
-        width: 100,
-    },
-    {
-        label: "等级",
-        property: "level",
-        width: 60,
-    },
-    // {
-    //     label: "复核",
-    //     property: "is_reviewed",
-    //     formatter: ({ is_reviewed }) => {
-    //         return is_reviewed === true
-    //             ? "是"
-    //             : "否";
-    //     },
-    //     width: 80,
-    // },
-    {
-        label: "时间",
-        property: "created_at"
-    },
-    {
-        slot: "operation",
-        label: "操作",
-        width: 120,
-        formatter: (row) => {
-            return h(
-                "div",
-                    {
-                        style: {
-                            fontSize: "14px",
-                            color:"#37EBFF"
-                        }
-                    },
-                    [
-                    // h("i", {
-                    //   class: `iconfont icon-zishebeizu pr-[8px]`
-                    // }),
-                        h(
-                            "span",
-                                {
-                                    fontSize: "14px",
-                                    class: "pf-1",
-                                },
-                            [
-                            h("i", 
-                                {
-                                    style: {
-                                        fontSize: "14px",
-                                        letterSpacing: "2px",
-                                        marginRight: "4px",
-                                        color:"#009DFF"
-                                    },
-                                    onClick: (row) => {
-                                        // console.log(row.id);
-                                        // 这里可以添加按钮点击后的具体逻辑
-                                        isAlarmOpen.value = true;
-                                        currentRow.value = row;
-                                    }
-                                },
-                                "详情"
-                            ),
-                            h("i", 
-                                {
-                                    style: {
-                                        fontSize: "14px",
-                                        letterSpacing: "2px",
-                                        marginRight: "4px",
-                                        color:"#FF2727"
-                                    },
-                                    onClick: (row) => {
-                                        // console.log(row.id);
-                                        // 这里可以添加按钮点击后的具体逻辑
-                                        isDeleteOpen.value = true;
-                                        currentRow.value = row;
-                                    }
-                                },
-                                "删除"
-                            ),
-                            ]
-                        )
-                    ]
-            );
-        }
-  }
-]
+  },
+];
 
 const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
 const listData = ref<Record<string, any>[]>([]); // 列表数据
@@ -240,25 +334,30 @@ const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
 const currFile = ref<Record<string, any>>({}); // 详情数据
 const isPlaying = ref<boolean>(false); // 是否播放
 const searchForm = reactive({
-    train_number: "",
-    train_carriage_number: "",
-    fault_type: "",
-    station: "",
-    type: "pole"
+  train_number: "",
+  train_carriage_number: "",
+  fault_type: "",
+  station: "",
+  type: "pole",
 });
 const dataLoading = ref(true);
+const isPointOpen = ref<Boolean>(false); //点云弹窗
 const isAlarmOpen = ref<Boolean>(false); //详情弹窗
 const isDeleteOpen = ref<Boolean>(false); //删除弹窗
 
 const websocketStore = useWebSocketStore();
 // 监听 messages 的变化
-watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
-    if(newMessages?.length > 0 && !isAlarmOpen.value) {
-        currentRow.value = newMessages[newMessages?.length - 1];
-        currFileList.value = newMessages[newMessages?.length - 1]?.images;
-        isAlarmOpen.value = true;
+watch(
+  () => websocketStore.messages,
+  (newMessages: string[], oldMessages: string[]) => {
+    if (newMessages?.length > 0 && !isAlarmOpen.value) {
+      currentRow.value = newMessages[newMessages?.length - 1];
+      currFileList.value = newMessages[newMessages?.length - 1]?.images;
+      isAlarmOpen.value = true;
     }
-}, { deep: true, immediate: true });
+  },
+  { deep: true, immediate: true }
+);
 // const isCurrPlaying = computed(() => {
 //     return (index) => {
 //         return isPlaying.value && (activeIndex === index)
@@ -266,39 +365,43 @@ watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string
 // })
 
 const togglePlay = () => {
-    isPlaying.value = !isPlaying.value;
+  isPlaying.value = !isPlaying.value;
 };
 
 const handleSlideClick = (index) => {
-    if (activeIndex.value === index) {
-        togglePlay()  // 播放 暂停
-    } else {
-        isPlaying.value = false;
-        activeIndex.value = index;
-        currFile.value = currFileList.value[index]
-    }
+  if (activeIndex.value === index) {
+    togglePlay(); // 播放 暂停
+  } else {
+    isPlaying.value = false;
+    activeIndex.value = index;
+    currFile.value = currFileList.value[index];
+  }
 };
 const onSwiper = (swiper) => {
-    swiperRef.value = swiper;
-    console.log('Swiper 实例已获取:', swiper);
+  swiperRef.value = swiper;
+  console.log("Swiper 实例已获取:", swiper);
 };
 const onSlideChange = () => {
-    console.log("slide change");
+  console.log("slide change");
 };
 // 文件详情
 const getFileList = async () => {
-    try {
-        const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
-        console.log(res.data, 'getDetailList_data')
-        if (isSuccessApi(res)) {
-            currFileList.value = res.data.data;
-            currFile.value = res.data.data[0];
-            activeIndex.value = 0;
-        }
-    } catch (error) {
-        console.log(error, 'getDetailList_error')
+  try {
+    const res = await getAppearanceMonitorDetailApi({
+      id: currentRow.value?.id,
+      current: 1,
+      pageSize: 1000,
+    });
+    console.log(res.data, "getDetailList_data");
+    if (isSuccessApi(res)) {
+      currFileList.value = res.data.data;
+      currFile.value = res.data.data[0];
+      activeIndex.value = 0;
     }
-}
+  } catch (error) {
+    console.log(error, "getDetailList_error");
+  }
+};
 // TODO mock 获取视频列表数据
 // const getFileList = async () => {
 //     try {
@@ -317,74 +420,77 @@ const getFileList = async () => {
 // }
 
 function loadDetail() {
-    currentRow.value = listData.value[0]
-    getFileList()
+  currentRow.value = listData.value[0];
+  getFileList();
 }
 
 // 获取列表
 const getList = async () => {
-    try {
-        const { currentPage, pageSize } = pagination.value;
-        const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
-        console.log(res.data, 'getList_data')
-        if (isSuccessApi(res)) {
-            listData.value = res.data.data;
-            if (listData.value?.length > 0) {
-                loadDetail()
-                pagination.value = {
-                    ...pagination.value,
-                    total: res.data.total
-                };
-            }
-
-        }
-    } catch (error) {
-        console.error('获取数据失败:', error)
+  try {
+    const { currentPage, pageSize } = pagination.value;
+    const res = await getAppearanceMonitorApi({
+      ...searchForm,
+      current: currentPage,
+      pageSize,
+    });
+    console.log(res.data, "getList_data");
+    if (isSuccessApi(res)) {
+      listData.value = res.data.data;
+      if (listData.value?.length > 0) {
+        loadDetail();
+        pagination.value = {
+          ...pagination.value,
+          total: res.data.total,
+        };
+      }
     }
+  } catch (error) {
+    console.error("获取数据失败:", error);
+  }
 };
 
 // 查询方法
 const handleQuery = () => {
-    getList()
+  getList();
 };
 
 // 重置方法
 const handleReset = () => {
-    searchForm.train_number = '';
-    searchForm.station = '';
-    searchForm.train_carriage_number = '';
-    searchForm.fault_type = '';
-    getList()
+  searchForm.train_number = "";
+  searchForm.station = "";
+  searchForm.train_carriage_number = "";
+  searchForm.fault_type = "";
+  getList();
 };
 // 分页表格切换参数
 function handleTableChange(record) {
-    console.log("handleTableChange_record", record);
-    pagination.value = {
-        ...pagination.value,
-        currentPage: record.page,
-        pageSize: record.pageSize
-    };
-    getList();
+  console.log("handleTableChange_record", record);
+  pagination.value = {
+    ...pagination.value,
+    currentPage: record.page,
+    pageSize: record.pageSize,
+  };
+  getList();
 }
 // 定义行类名方法
 const handleRowClassName = ({ row }) => {
-    return row.id === currentRow.value.id ? 'selected-row' : '';
+  return row.id === currentRow.value.id ? "selected-row" : "";
 };
 
 // 行点击事件处理
 const handleRowClick = (row, event, rowIndex) => {
-    currentRow.value = row;
-    getFileList()
+  currentRow.value = row;
+  getFileList();
 };
 onBeforeRouteLeave(() => {
-    isAlarmOpen.value = false;
-    currentRow.value = {};
-    currFileList.value = [];
+  isAlarmOpen.value = false;
+  currentRow.value = {};
+  currFileList.value = [];
 });
 onMounted(() => {
-    getList();
+  getList();
 });
 </script>
 <style lang="scss">
-@import url('./PoleMonitor.scss');
-</style>
\ No newline at end of file
+@import url("./PoleMonitor.scss");
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index b267c34..ed06795 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2025-03-06 11:27:03
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-13 09:35:33
+ * @LastEditTime: 2025-06-26 13:34:26
  * @FilePath: \vite-ai\data-dashboard\vite.config.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
 
   return {
+    base: "./", // 设置打包路径
     resolve: {
       alias: [
         { find: /^@\//, replacement: resolve(__dirname, "src") + "/" },