feat: 点云数据调换到撑杆模块

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", 
+              // h("i", 
-                {
+              //   {
-                  style: {
+              //     style: {
-                    fontSize: "14px",
+              //       fontSize: "14px",
-                    letterSpacing: "2px",
+              //       letterSpacing: "2px",
-                    marginRight: "4px",
+              //       marginRight: "4px",
-                    color:"#37EBFF"
+              //       color:"#37EBFF"
-                  },
+              //     },
-                  onClick: () => {
+              //     onClick: () => {
-                    // console.log(row.id);
+              //       // console.log(row.id);
-                    // 这里可以添加按钮点击后的具体逻辑
+              //       // 这里可以添加按钮点击后的具体逻辑
-                    isPointOpen.value = true;
+              //       isPointOpen.value = true;
-                  }
+              //     }
-                },
+              //   },
-                "点云"
+              //   "点云"
-              ),
+              // ),
               h("i", 
                 {
                   style: {

src/views/dashboard/PoleMonitor.vue

@@ -3,8 +3,7 @@
     <div class="module-header">
       <ContentHeader bgLayout="1855">
         <template #title>
-                    <div class="w-[200px] bg_title bg_title_3">
+          <div class="w-[200px] bg_title bg_title_3"></div>
-                    </div>
         </template>
         <template #extra>
           <div></div>
@@ -14,19 +13,41 @@
     <div class="pole-main-content px-[16px]">
       <!-- 搜索区域 -->
       <div class="pole-monitor-search-box">
-                <el-select v-model="searchForm.station" placeholder="站点" class="custom-select">
+        <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
-                <el-input v-model="searchForm.train_carriage_number" placeholder="请输入车厢号" class="custom-input"
+          v-model="searchForm.train_number"
-                    clearable />
+          placeholder="请输入列车号"
-                <el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select" clearable>
+          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">
+        <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">
@@ -42,9 +63,14 @@
             <!-- <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"
+              <Player
-                                @play="isPlaying = true" @pause="isPlaying = false" />
+                :src="currFile?.video_url"
-                            <img :src="currFile?.image_url" v-else-if="currFile?.image_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>
@@ -60,14 +86,36 @@
           </div>
           <!-- 缩略图区域 -->
           <div class="thumbnail-container mt-[16px] w-[870px]">
-                        <swiper ref="swiperRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
+            <swiper
-                            :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
+              ref="swiperRef"
-                            :observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
+              :modules="modules"
-                            <swiper-slide v-for="(file, index) in currFileList" :key="index"
+              :slides-per-view="3"
-                                @click="handleSlideClick(index)" :class="{ 'active-slide': activeIndex === index }">
+              :space-between="10"
-                                <img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer" />
+              navigation
-                                <SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url"
+              :scrollbar="{ draggable: false }"
-                                    v-else-if="file?.video_url" :isPlaying="isPlaying && (activeIndex === index)" />
+              :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>
@@ -79,40 +127,67 @@
         <!-- 右侧表格区域 -->
         <div class="flex-1 right-panel">
           <div class="bg-transparent baseTable_wrap">
-                        <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
+            <BaseTable
-                            :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
+              class="bg-transparent baseTable_box"
-                            :columns="columns" :page="pagination.currentPage" @change="handleTableChange"
+              :total="pagination.total"
-                            :row-class-name="handleRowClassName" @row-click="handleRowClick">
+              :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>
-        <AlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" @close="isAlarmOpen = false" />
+    <PointModal
-        <DeleteModal v-model:value="isDeleteOpen" @delete-success="getList()" :info="currentRow" @close="isDeleteOpen = false" />
+      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 { onBeforeRouteLeave } from "vue-router";
-import Player from '@/components/videoPlayer/Player.vue'
+import Player from "@/components/videoPlayer/Player.vue";
-import ContentHeader from '@/components/ContentHeader.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 PointModal from "./components/PointModal.vue";
-import DeleteModal from './components/DeleteModal.vue'
+import AlarmModal from "./components/AlarmModal.vue";
-import { useWebSocketStore } from '@/stores/websocketStore';
+import DeleteModal from "./components/DeleteModal.vue";
+import { useWebSocketStore } from "@/stores/websocketStore";
 import "swiper/css";
-import 'swiper/scss';
+import "swiper/scss";
-import 'swiper/scss/navigation';
+import "swiper/scss/navigation";
 
 defineOptions({
-    name: "PoleMonitorIndex"
+  name: "PoleMonitorIndex",
 });
 const modules = [Navigation, Scrollbar];
 const activeIndex = ref(-1);
@@ -165,20 +240,20 @@ const columns = [
   // },
   {
     label: "时间",
-        property: "created_at"
+    property: "created_at",
   },
   {
     slot: "operation",
     label: "操作",
-        width: 120,
+    width: 140,
     formatter: (row) => {
       return h(
         "div",
         {
           style: {
             fontSize: "14px",
-                            color:"#37EBFF"
+            color: "#37EBFF",
-                        }
+          },
         },
         [
           // h("i", {
@@ -191,47 +266,66 @@ const columns = [
               class: "pf-1",
             },
             [
-                            h("i", 
+              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"
+                    color: "#009DFF",
                   },
                   onClick: (row) => {
                     // console.log(row.id);
                     // 这里可以添加按钮点击后的具体逻辑
                     isAlarmOpen.value = true;
                     currentRow.value = row;
-                                    }
+                  },
                 },
                 "详情"
               ),
-                            h("i", 
+              h(
+                "i",
                 {
                   style: {
                     fontSize: "14px",
                     letterSpacing: "2px",
                     marginRight: "4px",
-                                        color:"#FF2727"
+                    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>[]>([]); // 列表数据
@@ -244,21 +338,26 @@ const searchForm = reactive({
   train_carriage_number: "",
   fault_type: "",
   station: "",
-    type: "pole"
+  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[]) => {
+watch(
-    if(newMessages?.length > 0 && !isAlarmOpen.value) {
+  () => 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)
@@ -271,16 +370,16 @@ const togglePlay = () => {
 
 const handleSlideClick = (index) => {
   if (activeIndex.value === index) {
-        togglePlay()  // 播放 暂停
+    togglePlay(); // 播放 暂停
   } else {
     isPlaying.value = false;
     activeIndex.value = index;
-        currFile.value = currFileList.value[index]
+    currFile.value = currFileList.value[index];
   }
 };
 const onSwiper = (swiper) => {
   swiperRef.value = swiper;
-    console.log('Swiper 实例已获取:', swiper);
+  console.log("Swiper 实例已获取:", swiper);
 };
 const onSlideChange = () => {
   console.log("slide change");
@@ -288,17 +387,21 @@ const onSlideChange = () => {
 // 文件详情
 const getFileList = async () => {
   try {
-        const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
+    const res = await getAppearanceMonitorDetailApi({
-        console.log(res.data, 'getDetailList_data')
+      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')
+    console.log(error, "getDetailList_error");
   }
-}
+};
 // TODO mock 获取视频列表数据
 // const getFileList = async () => {
 //     try {
@@ -317,44 +420,47 @@ const getFileList = async () => {
 // }
 
 function loadDetail() {
-    currentRow.value = listData.value[0]
+  currentRow.value = listData.value[0];
-    getFileList()
+  getFileList();
 }
 
 // 获取列表
 const getList = async () => {
   try {
     const { currentPage, pageSize } = pagination.value;
-        const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
+    const res = await getAppearanceMonitorApi({
-        console.log(res.data, 'getList_data')
+      ...searchForm,
+      current: currentPage,
+      pageSize,
+    });
+    console.log(res.data, "getList_data");
     if (isSuccessApi(res)) {
       listData.value = res.data.data;
       if (listData.value?.length > 0) {
-                loadDetail()
+        loadDetail();
         pagination.value = {
           ...pagination.value,
-                    total: res.data.total
+          total: res.data.total,
         };
       }
-
     }
   } catch (error) {
-        console.error('获取数据失败:', error)
+    console.error("获取数据失败:", error);
   }
 };
 
 // 查询方法
 const handleQuery = () => {
-    getList()
+  getList();
 };
 
 // 重置方法
 const handleReset = () => {
-    searchForm.train_number = '';
+  searchForm.train_number = "";
-    searchForm.station = '';
+  searchForm.station = "";
-    searchForm.train_carriage_number = '';
+  searchForm.train_carriage_number = "";
-    searchForm.fault_type = '';
+  searchForm.fault_type = "";
-    getList()
+  getList();
 };
 // 分页表格切换参数
 function handleTableChange(record) {
@@ -362,19 +468,19 @@ function handleTableChange(record) {
   pagination.value = {
     ...pagination.value,
     currentPage: record.page,
-        pageSize: record.pageSize
+    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()
+  getFileList();
 };
 onBeforeRouteLeave(() => {
   isAlarmOpen.value = false;
@@ -386,5 +492,5 @@ onMounted(() => {
 });
 </script>
 <style lang="scss">
-@import url('./PoleMonitor.scss');
+@import url("./PoleMonitor.scss");
 </style>

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") + "/" },