From a7a0b600f2b262714e621f33411fa6a0631498c1 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 31 Oct 2023 17:16:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=B1=95=E7=A4=BA=E5=A4=9A?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/carouselChart.vue              | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue
index f1e217f..212bbb6 100644
--- a/src/views/realTimeMonitor/components/carouselChart.vue
+++ b/src/views/realTimeMonitor/components/carouselChart.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="thumb-example">
-    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
+    <div class="radioBox" v-if="roleUser != 2">
+      {{ radioPx }}
+    </div>
     <div class="topPic">
       <div
         class="bigPic"
@@ -59,14 +61,16 @@
           class="el-car-item"
           ref="scrollBox"
           v-on:wheel="handleScroll"
-          :class="terminalPhoto.length < 5 ? 'littlePic' : ''"
+          :class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
         >
           <div
             class="smallPic"
             v-for="(item, index2) in terminalPhoto"
             :key="index2"
             @click="changeBigPic(item, index2)"
-            :class="activeSmall === index2 ? 'borderActive' : ''"
+            :class="`${activeSmall === index2 ? 'borderActive ' : ''}${
+              photoNum === 10 ? 'moreSmallPic' : ''
+            }`"
           >
             <div
               class="picBox"
@@ -327,13 +331,17 @@ export default {
     },
     //点击大图左右按钮
     leftClick() {
+      console.log(this.photoNum);
       this.activeSmall--;
-      this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
+      this.$refs.scrollBox.scrollLeft -=
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
       this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
     },
     rightClick() {
+      console.log(this.photoNum);
       this.activeSmall++;
-      this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
+      this.$refs.scrollBox.scrollLeft +=
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
       this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
     },
     //获取第一张大图
@@ -367,11 +375,11 @@ export default {
 
       if (direction == "down") {
         this.$refs.scrollBox.scrollLeft +=
-          (this.$refs.scrollBox.offsetWidth / 5) * 3;
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
       }
       if (direction == "up") {
         this.$refs.scrollBox.scrollLeft -=
-          (this.$refs.scrollBox.offsetWidth / 5) * 3;
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 3;
       }
     },
     //缩略图的左右箭头
@@ -568,6 +576,9 @@ export default {
           }
         }
       }
+      .moreSmallPic {
+        width: 9.8%;
+      }
       .borderActive {
         .timeInfo {
           color: #fff;