From a28f44361c8f0224c7b9bf4e021e0704c7baf109 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Fri, 12 May 2023 09:59:07 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/realTimeMonitor/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index 2923b7d..00641e4 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -37,7 +37,6 @@
           <carouselChart
             :terminalPhoto="terminalPhoto"
             v-if="terminalPhoto.length > 0"
-            ref="a"
           ></carouselChart>
           <div class="totalPic" v-if="totalPic !== 0">
             图片总数：{{ totalPic }}张

From 04af23d181ca72561d3ff56695659d507dd5de15 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Fri, 12 May 2023 19:24:28 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/carouselChart.vue        | 449 ++++++++++--------
 ...arouselChart1.vue => carouselChartnew.vue} |  88 ++--
 src/views/realTimeMonitor/index.vue           |  10 +-
 3 files changed, 303 insertions(+), 244 deletions(-)
 rename src/views/components/{carouselChart1.vue => carouselChartnew.vue} (80%)

diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index 5244ecd..877c81d 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -1,91 +1,78 @@
 <template>
   <div class="thumb-example">
-    <!-- swiper1 -->
-    <swiper
-      class="swiper gallery-top"
-      :options="swiperOptionTop"
-      ref="swiperTop"
-    >
-      <!--  -->
+    <div class="picTop">
+      <viewer class="bigimg">
+        <img :src="bigPicPath + '!1280x720'" />
+        <p class="mark">
+          {{ bigPicPath }}
+          <span>{{ this.activeSmall }}</span>
+        </p>
+      </viewer>
+      <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <div
+        class="arrow rightArrow"
+        v-if="this.bigNum < this.terminalPhoto.length - 1"
+        @click="rightClick"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
+    <div class="picBottom">
+      <ul class="smallPicBox">
+        <li
+          v-for="(item, index) in fiveList"
+          @click="handleBigpic(item, index)"
+          :class="activeSmall === index ? 'borderActive' : ''"
+        >
+          <!-- <img src="../../assets/img/nopic.jpg" /> -->
+          <img :src="item.path + '!260x160'" />
+          <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="拍照时间"
+              placement="top-start"
+            >
+              <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+            </el-tooltip>
 
+            (
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="图片上传时间"
+              placement="top-start"
+            >
+              <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+            </el-tooltip>
+            )
+            <span>--通道{{ item.channelId }}</span>
+          </p>
+        </li>
+      </ul>
       <div
-        class="swiper-button-next swiper-button-white"
-        slot="button-next"
-      ></div>
+        class="arrow leftArrow"
+        v-if="this.page != 1"
+        @click="smallLeftClick"
+      >
+        <i class="el-icon-arrow-left"></i>
+      </div>
       <div
-        class="swiper-button-prev swiper-button-white"
-        slot="button-prev"
-      ></div>
-    </swiper>
-    <!-- swiper2 Thumbs -->
-    <swiper
-      class="swiper gallery-thumbs"
-      :options="swiperOptionThumbs"
-      ref="swiperThumbs"
-    >
-      <swiper-slide
-        class="slide"
-        v-for="(item, index) in terminalPhoto"
-        :key="item.id"
+        class="arrow rightArrow"
+        v-if="this.page < this.total"
+        @click="smallRightClick"
       >
-        <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
-          <img v-if="index == 0" :src="item.path + '!260x160'" />
-          <img
-            v-else
-            src="../../assets/img/loading.jpg"
-            :data-src="item.path + '!260x160'"
-            class="swiper-lazy"
-          />
-        </div>
-        <div class="bigimg" v-else>
-          <img :src="item.path" alt="" />
-        </div>
-        <!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />
-
-        <img
-          src="item.path + '!260x160'"
-          alt=""
-          :data-src="item.path + '!260x160'"
-          class="swiper-lazy"
-          v-else-if="item.path.indexOf('nopic') == -1"
-        />
-        <img :src="item.path" alt="" v-else /> -->
-        <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="拍照时间"
-            placement="top-start"
-          >
-            <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-          </el-tooltip>
-
-          (
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="图片上传时间"
-            placement="top-start"
-          >
-            <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-          </el-tooltip>
-          )
-          <span>--通道{{ item.channelId }}</span>
-        </p>
-      </swiper-slide>
-    </swiper>
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
-import "swiper/css/swiper.css";
 export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
+  components: {},
   props: {
     terminalPhoto: {
       type: Array,
@@ -94,61 +81,85 @@ export default {
   },
   data() {
     return {
-      swiperOptionTop: {
-        lazy: {
-          loadPrevNext: true,
-          loadPrevNextAmount: 1,
-          loadOnTransitionStart: true,
-        },
-        navigation: {
-          nextEl: ".swiper-button-next",
-          prevEl: ".swiper-button-prev",
-        },
-
-        virtual: {
-          slides: [],
-          renderSlide: function (slide, index) {
-            console.log(index);
-            if (slide.path.indexOf("nopic") != -1) {
-              return ` <div class="swiper-slide" ><div class="bigimg"><img src="static/img/nopic.0e9cfc7c.jpg" alt="" /></div></div>`;
-            } else {
-              return `<div class="swiper-slide"><div class="bigimg"><img src=" ${
-                slide.path + "!1280x720"
-              }  " /></div></div>`;
-            }
-          },
-        },
-      },
-      swiperOptionThumbs: {
-        spaceBetween: 10,
-        centeredSlides: true,
-        slidesPerView: "auto",
-        slideToClickedSlide: true,
-        lazy: {
-          loadPrevNext: true,
-          loadPrevNextAmount: 5,
-          loadOnTransitionStart: true,
-        },
-      },
+      isshowArrow: true, //判断是否显示切换按钮
+      bigPicPath: "", //大图地址
+      smallPicPath: "", //小图地址
+      bigNum: 0, //判断大图是第几张
+      fiveList: [], //小图图片list
+      activeSmall: 0, //索引选中小图,
+      page: 1, //当前第几页
+      pagesize: 5, //每页显示五条
+      total: 0, //总共又几页
     };
   },
   mounted() {
-    this.$nextTick(() => {
-      const swiperTop = this.$refs.swiperTop.$swiper;
-      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
-      swiperTop.controller.control = swiperThumbs;
-      swiperThumbs.controller.control = swiperTop;
-    });
+    console.log(this.terminalPhoto);
+    this.bigPicPath = this.terminalPhoto[0].path;
+    this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
+    this.total = this.terminalPhoto.length / this.pagesize;
   },
-  methods: {},
-  watch: {
-    terminalPhoto: function (newVal, oldVal) {
-      this.swiperOptionTop.virtual.slides = newVal;
+
+  methods: {
+    getphotoList() {
+      this.fiveList = this.terminalPhoto.slice(
+        (this.page - 1) * this.pagesize,
+        this.page * this.pagesize
+      );
+      this.bigPicPath = this.fiveList[this.activeSmall].path;
+    },
+    //大图点击左侧切换图片
+    leftClick() {
+      this.bigNum--; //执行下一张
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path;
+      this.activeSmall--;
+      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
+      console.log(this.page);
+      if (this.activeSmall < 0) {
+        this.activeSmall = 4;
+        this.smallLeftClick();
+      }
+    },
+    //点击右侧切换图片
+    rightClick() {
+      this.bigNum++; //执行下一张
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path;
+      this.activeSmall++;
+      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
+
+      if (this.activeSmall > 4) {
+        this.activeSmall = 0;
+        console.log(this.activeSmall);
+        this.smallRightClick();
+      }
+    },
+    //点击小图变成大图
+    handleBigpic(row, index) {
+      console.log(row);
+      console.log();
+      this.activeSmall = index;
+      this.bigPicPath = row.path;
+    },
+    //点击小图切换左侧
+    smallLeftClick() {
+      console.log("点击了左侧");
+
+      this.page--;
+      if (this.page < 1) {
+        this.isshowArrow = false;
+      } else {
+        this.getphotoList();
+      }
+      console.log(this.page);
+      console.log(this.fiveList);
+    },
+    //点击小图切换右侧
+    smallRightClick() {
+      console.log("点击了右侧");
+      console.log(this.page);
+      this.page++;
+      this.getphotoList();
+      console.log(this.fiveList);
     },
-  },
-  created() {
-    console.log(this.swiperOptionTop.virtual.slides);
-    this.swiperOptionTop.virtual.slides = this.terminalPhoto;
   },
 };
 </script>
@@ -157,101 +168,141 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 26px);
+  height: calc(100% - 24px);
   box-sizing: border-box;
-  .gallery-top {
-    //background: #fcc;
+  .picTop {
     width: 100%;
     height: 80%;
     overflow: hidden;
     margin-bottom: 4px;
-    //border: 3px solid transparent;
-    .swiper-slide {
+    position: relative;
+    &:hover {
+      .arrow {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+    }
+    .bigimg {
       width: 100%;
-      overflow: hidden;
-      .bigimg {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      .mark {
+        position: absolute;
+        bottom: 16px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.5);
+        left: 16px;
+        font-size: 14px;
+        line-height: 24px;
+        animation: move 1s;
       }
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
+      @keyframes move {
+        0% {
+          bottom: -10px;
+        }
+        100% {
+          transform: 16px;
+        }
       }
     }
-    .swiper-button-prev.swiper-button-disabled,
-    .swiper-button-next.swiper-button-disabled {
-      opacity: 0.35;
-      cursor: auto;
-      pointer-events: none;
-      display: none !important;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+      cursor: pointer;
+    }
+    .arrow {
+      opacity: 0;
+      position: absolute;
+      cursor: pointer;
+      color: #fff;
+      font-size: 60px;
+      border-radius: 30px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      text-align: center;
+      line-height: 60px;
+      &:hover {
+        color: #409eff;
+      }
+    }
+    .leftArrow {
+      left: 16px;
+    }
+    .rightArrow {
+      right: 16px;
     }
   }
-  .gallery-thumbs {
+  .picBottom {
     width: 100%;
     height: 18%;
-    .slide {
-      width: 20%;
-      border: 3px solid transparent;
-      overflow: hidden;
-      box-sizing: border-box;
+    position: relative;
+    .smallPicBox {
+      width: 100%;
+      height: 100%;
       display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .bigimg {
-        width: 100%;
-        height: 100%;
+      li {
+        width: 20%;
+        border: 3px solid transparent;
+        overflow: hidden;
+        box-sizing: border-box;
         display: flex;
         align-items: center;
         justify-content: center;
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: fill;
+          cursor: pointer;
+        }
       }
-      img {
-        //width: 100%;
-        height: 100%;
-        object-fit: fill;
+      .borderActive {
+        border: 3px solid #409eff;
+      }
+      .timeInfo {
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        background: #f0f0f0;
+        padding: 8px 0px;
+        font-size: 12px;
+        text-align: center;
+        color: #333;
       }
     }
-
-    .timeInfo {
+    .arrow {
       position: absolute;
-      bottom: 0px;
-      width: 100%;
-      background: #f0f0f0;
-      padding: 8px 0px;
-      font-size: 12px;
+      cursor: pointer;
+      color: #fff;
+      font-size: 30px;
+      border-radius: 30px;
+      position: absolute;
+      top: 45%;
+      transform: translateY(-50%);
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
       text-align: center;
-      color: #333;
+      line-height: 60px;
+    }
+    .leftArrow {
+      left: 16px;
+    }
+    .rightArrow {
+      right: 16px;
     }
-  }
-
-  .swiper-button-next.swiper-button-white,
-  .swiper-container-rtl .swiper-button-prev.swiper-button-white,
-  .swiper-button-prev.swiper-button-white,
-  .swiper-container-rtl .swiper-button-next.swiper-button-white {
-    width: 40px;
-    height: 40px;
-    border-radius: 30px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    color: #fff;
-    text-align: center;
-    line-height: 60px;
-  }
-  .swiper-button-next:after,
-  .swiper-container-rtl .swiper-button-prev:after,
-  .swiper-button-prev:after,
-  .swiper-container-rtl .swiper-button-next:after {
-    transform: scale(0.5);
   }
 }
 // https://v1.github.surmon.me/vue-awesome-swiper/
diff --git a/src/views/components/carouselChart1.vue b/src/views/components/carouselChartnew.vue
similarity index 80%
rename from src/views/components/carouselChart1.vue
rename to src/views/components/carouselChartnew.vue
index ffc40a1..49a58cd 100644
--- a/src/views/components/carouselChart1.vue
+++ b/src/views/components/carouselChartnew.vue
@@ -1,30 +1,20 @@
 <template>
   <div class="thumb-example">
     <!-- swiper1 -->
+
     <swiper
       class="swiper gallery-top"
       :options="swiperOptionTop"
       ref="swiperTop"
     >
-      <swiper-slide
-        class="slide-1"
-        v-for="(item, index) in terminalPhoto"
-        :key="item.id"
-      >
-        <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
-          <img v-if="index == 0" :src="item.path + '!1280x720'" />
-          <img
-            v-else
-            src="../../assets/img/loading.jpg"
-            :data-src="item.path + '!1280x720'"
-            class="swiper-lazy"
-          />
-        </viewer>
-        <div class="bigimg" v-else>
-          <img :src="item.path" alt="" />
-        </div>
-      </swiper-slide>
+      <!--  -->
+      <!-- <viewer class="swiper-slide"> 
+        
+      </viewer> -->
+      <!-- <viewer class="swiper-slide">
+       
+      </viewer> -->
+
       <div
         class="swiper-button-next swiper-button-white"
         slot="button-next"
@@ -34,6 +24,7 @@
         slot="button-prev"
       ></div>
     </swiper>
+
     <!-- swiper2 Thumbs -->
     <swiper
       class="swiper gallery-thumbs"
@@ -46,6 +37,7 @@
         :key="item.id"
       >
         <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
+          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
           <img v-if="index == 0" :src="item.path + '!260x160'" />
           <img
             v-else
@@ -109,48 +101,47 @@ export default {
     },
   },
   data() {
+    let a = "1111111111111";
     return {
+      imgflag: false,
       swiperOptionTop: {
-        spaceBetween: 10,
-        //loop: true,
-        freeMode: true,
-        // loopedSlides: 1,
         lazy: {
           loadPrevNext: true,
           loadPrevNextAmount: 1,
           loadOnTransitionStart: true,
         },
-        // lazyLoading: true, //懒加载开启
         navigation: {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
         },
-        observer: true, //修改swiper自己或子元素时，自动初始化swiper
-        observeParents: true, //修改swiper的父元素时，自动初始化swiper
-        onSlideChangeEnd: function (swiper) {
-          swiper.update();
+        virtual: {
+          slides: [],
+          renderSlide: function (slide, index) {
+            if (slide.path.indexOf("nopic") != -1) {
+              return `<div class="swiper-slide"><div class="bigimg"><img src="static/img/nopic.0e9cfc7c.jpg" alt="" /></div></div>`;
+            } else {
+              return (
+                `<view class="swiper-slide">` +
+                `<div class="bigimg"  id="imgView" style="background:url(${
+                  slide.path + "!80x720"
+                });background-size:100% 100%">` +
+                `<img id="imgid" src=" ${slide.path + "!1280x720"}  " />
+                </view>`
+              );
+            }
+          },
         },
       },
       swiperOptionThumbs: {
         spaceBetween: 10,
         centeredSlides: true,
         slidesPerView: "auto",
-        touchRatio: 0.2,
-        lazyLoading: true, //懒加载开启
         slideToClickedSlide: true,
         lazy: {
           loadPrevNext: true,
           loadPrevNextAmount: 5,
           loadOnTransitionStart: true,
-          //loadOnTransitionStart: true,
-        },
-        observer: true, //修改swiper自己或子元素时，自动初始化swiper
-        observeParents: true, //修改swiper的父元素时，自动初始化swiper
-        onSlideChangeEnd: function (swiper) {
-          swiper.update();
         },
-        //loop: true,
-        //loopedSlides: 4,
       },
     };
   },
@@ -162,8 +153,16 @@ export default {
       swiperThumbs.controller.control = swiperTop;
     });
   },
-
   methods: {},
+  watch: {
+    terminalPhoto: function (newVal, oldVal) {
+      this.swiperOptionTop.virtual.slides = newVal;
+    },
+  },
+  created() {
+    console.log(this.swiperOptionTop.virtual.slides);
+    this.swiperOptionTop.virtual.slides = this.terminalPhoto;
+  },
 };
 </script>
 <style lang="less">
@@ -180,7 +179,7 @@ export default {
     overflow: hidden;
     margin-bottom: 4px;
     //border: 3px solid transparent;
-    .slide-1 {
+    .swiper-slide {
       width: 100%;
       overflow: hidden;
       .bigimg {
@@ -267,6 +266,15 @@ export default {
   .swiper-container-rtl .swiper-button-next:after {
     transform: scale(0.5);
   }
+  .pismask {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 99999;
+    top: 0px;
+    left: 0px;
+  }
 }
 // https://v1.github.surmon.me/vue-awesome-swiper/
 </style>
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index 00641e4..3e09d5a 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -488,9 +488,9 @@ export default {
 
 <style lang="less">
 .monitorBox {
-  width: calc(100% - 32px);
+  width: calc(100% - 0px);
   height: calc(100% - 32px);
-  padding: 16px 16px;
+  padding: 16px 0px 8px 0px;
   background: #ffffff;
   .monitor-container {
     display: flex;
@@ -546,13 +546,13 @@ export default {
       }
       .totalPic {
         width: 100%;
-        height: 24px;
+        height: 16px;
         margin-bottom: 8px;
-        text-align: center;
+        text-align: right;
         font-size: 12px;
         color: #2d8cf0;
         font-weight: bold;
-        line-height: 24px;
+        line-height: 16px;
       }
     }
     .parameterArea {

From 24eae02e78cd0ff36c8e8bd021eca07005574d13 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Fri, 12 May 2023 19:26:20 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Sidebar.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 638d2d7..0ba890c 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -109,11 +109,11 @@ export default {
               index: "devicePhotoSchedule",
               title: "拍照时间表设置",
             },
-            {
-              icon: "el-icon-picture-outline",
-              index: "imageSettings",
-              title: "图像采集参数设置",
-            },
+            // {
+            //   icon: "el-icon-picture-outline",
+            //   index: "imageSettings",
+            //   title: "图像采集参数设置",
+            // },
           ],
         },
         // {

From b5cbbbf694af2acd6dc603c1607432198734c48e Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Sat, 13 May 2023 09:41:00 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/carouselChart.vue | 105 ++++++++++++++++---------
 1 file changed, 66 insertions(+), 39 deletions(-)

diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index 877c81d..3f591fa 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="thumb-example">
     <div class="picTop">
-      <viewer class="bigimg">
-        <img :src="bigPicPath + '!1280x720'" />
-        <p class="mark">
+      <viewer
+        class="bigimg"
+        :style="{ backgroundImage: 'url(' + bigPicPath + '!180x160)' }"
+        v-if="bigPicPath.indexOf('nopic') == -1"
+      >
+        <img class="animImg" :src="bigPicPath + '!1280x720'" />
+        <!-- <p class="mark">
           {{ bigPicPath }}
           <span>{{ this.activeSmall }}</span>
-        </p>
+        </p> -->
       </viewer>
+      <div class="bigimg" v-else>
+        <img class="animImg" :src="bigPicPath" />
+      </div>
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -26,30 +33,34 @@
           @click="handleBigpic(item, index)"
           :class="activeSmall === index ? 'borderActive' : ''"
         >
-          <!-- <img src="../../assets/img/nopic.jpg" /> -->
-          <img :src="item.path + '!260x160'" />
-          <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="拍照时间"
-              placement="top-start"
-            >
-              <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-            </el-tooltip>
+          <div class="smallhavePic" v-if="item.path.indexOf('nopic') == -1">
+            <img :src="item.path + '!260x160'" />
+            <p class="timeInfo">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="拍照时间"
+                placement="top-start"
+              >
+                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
 
-            (
-            <el-tooltip
-              class="item"
-              effect="dark"
-              content="图片上传时间"
-              placement="top-start"
-            >
-              <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-            </el-tooltip>
-            )
-            <span>--通道{{ item.channelId }}</span>
-          </p>
+              (
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="图片上传时间"
+                placement="top-start"
+              >
+                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
+              )
+              <span>--通道{{ item.channelId }}</span>
+            </p>
+          </div>
+          <div class="smallnoPic" v-else>
+            <img :src="item.path" />
+          </div>
         </li>
       </ul>
       <div
@@ -125,7 +136,6 @@ export default {
       this.bigPicPath = this.terminalPhoto[this.bigNum].path;
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
-
       if (this.activeSmall > 4) {
         this.activeSmall = 0;
         console.log(this.activeSmall);
@@ -141,6 +151,7 @@ export default {
     },
     //点击小图切换左侧
     smallLeftClick() {
+      this.activeSmall = 0;
       console.log("点击了左侧");
 
       this.page--;
@@ -154,6 +165,7 @@ export default {
     },
     //点击小图切换右侧
     smallRightClick() {
+      this.activeSmall = 0;
       console.log("点击了右侧");
       console.log(this.page);
       this.page++;
@@ -189,23 +201,17 @@ export default {
       align-items: center;
       justify-content: center;
       position: relative;
+      background-size: 100% 100%;
       .mark {
         position: absolute;
-        bottom: 16px;
+        bottom: 12px;
         color: #fff;
         background-color: rgba(0, 0, 0, 0.5);
         left: 16px;
         font-size: 14px;
         line-height: 24px;
-        animation: move 1s;
-      }
-      @keyframes move {
-        0% {
-          bottom: -10px;
-        }
-        100% {
-          transform: 16px;
-        }
+        //opacity: 0;
+        transition: bottom 2s ease 0s;
       }
     }
     img {
@@ -250,10 +256,11 @@ export default {
       width: 100%;
       height: 100%;
       display: flex;
+      justify-content: center;
       li {
         width: 20%;
         border: 3px solid transparent;
-        overflow: hidden;
+        // overflow: hidden;
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -265,9 +272,29 @@ export default {
           object-fit: fill;
           cursor: pointer;
         }
+        .smallhavePic {
+          width: 100%;
+          height: 100%;
+        }
+        .smallnoPic {
+          width: 100%;
+          height: 100%;
+        }
       }
       .borderActive {
         border: 3px solid #409eff;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 0;
+          height: 0;
+          left: 50%;
+          top: -16px;
+          margin-left: -8px;
+          border-bottom: 13px solid #409eff;
+          border-left: 8px solid transparent;
+          border-right: 8px solid transparent;
+        }
       }
       .timeInfo {
         position: absolute;

From 54fa1539c73c9477941db75b4fd06a51c25a273c Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Sat, 13 May 2023 09:55:58 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pictureRotation/index.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/views/pictureRotation/index.vue b/src/views/pictureRotation/index.vue
index 2dfbf7d..7928205 100644
--- a/src/views/pictureRotation/index.vue
+++ b/src/views/pictureRotation/index.vue
@@ -34,7 +34,11 @@
     </div>
     <div class="imageCenter" v-loading="loading">
       <div class="imgList" v-for="(item, index) in picList" :key="index">
-        <viewer class="bigpic" v-if="!item.path.includes('mp4')">
+        <viewer
+          class="bigpic"
+          v-if="!item.path.includes('mp4')"
+          :style="{ backgroundImage: 'url(' + item.path + '!180x160)' }"
+        >
           <img :src="item.path + '!1280x720'" />
           <!-- <el-image :src="item.path + '!1280x720'" lazy></el-image> -->
         </viewer>
@@ -306,6 +310,7 @@ export default {
       .bigpic {
         width: 100%;
         height: 100%;
+        background-size: 100% 100%;
       }
       img {
         width: 100%;