feat: 撑杆检测开发

src/views/dashboard/AppearanceMonitor.scss

@@ -0,0 +1,89 @@
+.appearance-monitor-warp {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    // .appearance-monitor-right {
+    //     display: flex;
+    // }
+    .pagination-container {
+      margin-top: 20px;
+      display: flex;
+      justify-content: flex-end;
+    }
+    :deep(.el-pagination__total) {
+      color: #606266;
+      margin-right: 10px;
+    }
+  
+    :deep(.el-pagination__sizes .el-select__inner) {
+      background: #002a5c;
+      color: white;
+      border: 1px solid #409eff;
+    }
+  
+    :deep(.el-pagination__item),
+    :deep(.el-pagination__button) {
+      background: #002a5c;
+      color: white;
+      border: 1px solid #409eff;
+      margin-right: 5px;
+    }
+  
+    :deep(.el-pagination__item.is-active) {
+      background: #409eff;
+      color: white;
+    }
+    .appearance-monitor-left {
+      .monitor-left-top {
+        box-sizing: border-box;
+        padding: 32px 16px;
+        min-height: 600px;
+        img {
+          width: 100%;
+          height: 600px;
+        }
+      }
+      .monitor-left-bottom {
+        width: 100%;
+        overflow: visible;
+        .swiper {
+          width: 100%;
+          height: 100%;
+          .swiper-slide {
+            width: 20%;
+            border-radius:4px;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius:4px;
+            }
+          }
+          .active-slide img {
+            border-radius:4px;
+            border: 2px solid #2ECCE0;
+          }
+          .swiper-button-prev,
+          .swiper-button-next {
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+          }
+  
+          .swiper-button-prev::after,
+          .swiper-button-next::after {
+            font-size: 12px ;
+            color: #FFF;
+          }
+  
+          /* 修改按钮悬停样式 */
+          .swiper-button-prev:hover,
+          .swiper-button-next:hover {
+            background-color: rgba(0, 0, 0, 0.8);
+          }
+        }
+      }
+    }
+  }

src/views/dashboard/AppearanceMonitor.vue

@@ -189,93 +189,5 @@ const onSlideChange = () => {
 // });
 </script>
 <style lang="scss">
-.appearance-monitor-warp {
+@import url('./AppearanceMonitor.scss');
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  // align-items: center;
-  // .appearance-monitor-right {
-  //     display: flex;
-  // }
-  .pagination-container {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-  }
-  :deep(.el-pagination__total) {
-    color: #606266;
-    margin-right: 10px;
-  }
-
-  :deep(.el-pagination__sizes .el-select__inner) {
-    background: #002a5c;
-    color: white;
-    border: 1px solid #409eff;
-  }
-
-  :deep(.el-pagination__item),
-  :deep(.el-pagination__button) {
-    background: #002a5c;
-    color: white;
-    border: 1px solid #409eff;
-    margin-right: 5px;
-  }
-
-  :deep(.el-pagination__item.is-active) {
-    background: #409eff;
-    color: white;
-  }
-  .appearance-monitor-left {
-    .monitor-left-top {
-      box-sizing: border-box;
-      padding: 32px 16px;
-      min-height: 600px;
-      img {
-        width: 100%;
-        height: 600px;
-      }
-    }
-    .monitor-left-bottom {
-      width: 100%;
-      overflow: visible;
-      .swiper {
-        width: 100%;
-        height: 100%;
-        .swiper-slide {
-          width: 20%;
-          border-radius:4px;
-          img {
-              width: 100%;
-              height: 100%;
-              border-radius:4px;
-          }
-        }
-        .active-slide img {
-          border-radius:4px;
-          border: 2px solid #2ECCE0;
-        }
-        .swiper-button-prev,
-        .swiper-button-next {
-          background-color: rgba(0, 0, 0, 0.5);
-          color: white;
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-        }
-
-        .swiper-button-prev::after,
-        .swiper-button-next::after {
-          font-size: 12px ;
-          color: #FFF;
-        }
-
-        /* 修改按钮悬停样式 */
-        .swiper-button-prev:hover,
-        .swiper-button-next:hover {
-          background-color: rgba(0, 0, 0, 0.8);
-        }
-      }
-    }
-  }
-}
 </style>

src/views/dashboard/PoleMonitor.scss

@@ -2,4 +2,58 @@
  .search-section{
     padding: 16px 0;
  }
+ .pole-monitor-main {
+   .left-panel {
+      .main-image {
+         box-sizing: border-box;
+         min-height: 512px;
+         img {
+            width: 100%;
+            height: 512px;
+         }
+      }
+      .thumbnail-container {
+            width: 100%;
+            overflow: visible;
+            .swiper {
+              width: 100%;
+              height: 100%;
+              .swiper-slide {
+                width: 20%;
+                border-radius:4px;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    border-radius:4px;
+                }
+              }
+              .active-slide img {
+                border-radius:4px;
+                border: 2px solid #2ECCE0;
+              }
+              .swiper-button-prev,
+              .swiper-button-next {
+                background-color: rgba(0, 0, 0, 0.5);
+                color: white;
+                width: 32px;
+                height: 32px;
+                border-radius: 50%;
+              }
+      
+              .swiper-button-prev::after,
+              .swiper-button-next::after {
+                font-size: 12px ;
+                color: #FFF;
+              }
+      
+              /* 修改按钮悬停样式 */
+              .swiper-button-prev:hover,
+              .swiper-button-next:hover {
+                background-color: rgba(0, 0, 0, 0.8);
+              }
+            }
+          
+      }
+   }
+ }
 }

src/views/dashboard/PoleMonitor.vue

@@ -48,7 +48,7 @@
         <!-- 主体内容区域 -->
         <div class="flex justify-between pole-monitor-main">
             <!-- 左侧视频与缩略图区域 -->
-            <div class="left-panel">
+            <div class="left-panel w-[900px]">
                 <!-- 主图显示 -->
                 <div class="main-image">
                     <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
@@ -59,7 +59,28 @@
 
                 <!-- 缩略图区域 -->
                 <div class="thumbnail-container">
-                    <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
+                    <swiper
+                        ref="swiperRef"
+                        :modules="modules"
+                        :slides-per-view="4"
+                        :space-between="10"
+                        navigation
+                        :scrollbar="{ draggable: false }"
+                        :centered-slides="false"
+                        :observer="true"
+                        :observeParents="true"
+                        @swiper="onSwiper"
+                        @slideChange="onSlideChange"
+                        >
+                        <swiper-slide
+                            v-for="(image, index) in images"
+                            :key="index"
+                            @click="handleSlideClick(index)"
+                            :class="{ 'active-slide': activeIndex === index }"
+                        >
+                            <img :src="image" alt="Slide" />
+                        </swiper-slide>
+                    </swiper>
                 </div>
             </div>
             <!-- 右侧表格区域 -->
@@ -89,18 +110,43 @@
 <script lang="ts" setup>
 import ContentHeader from '@/components/ContentHeader.vue';
 import { BaseTable } from "@/components/CustomTable";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation, Scrollbar } from "swiper/modules";
+import "swiper/css";
+import 'swiper/scss';
+import 'swiper/scss/navigation';
 
 defineOptions({
     name: "PoleMonitorIndex"
 });
+const modules = [Navigation, Scrollbar];
 // 搜索表单
 const searchForm = ref({
     trainNo: 'all',
     carriageNo: 'all',
     faultType: 'all'
 });
-
+const images = ref([
-
+  'https://picsum.photos/300/200?random=1',
+  'https://picsum.photos/300/200?random=2',
+  'https://picsum.photos/300/200?random=3',
+  'https://picsum.photos/300/200?random=4',
+  'https://picsum.photos/300/200?random=5'
+]);
+const activeIndex = ref(-1);
+const handleSlideClick = (index) => {
+  console.log(index);
+  activeIndex.value = index;
+};
+const swiperRef = ref(null);
+console.log(swiperRef.value);
+const onSwiper = (swiper) => {
+  swiperRef.value = swiper;
+  console.log('Swiper 实例已获取:', swiper);
+};
+const onSlideChange = () => {
+  console.log("slide change");
+};
 
 const currentRow = ref<Record<string, any>>({});
 const columns = [