缩略图点击左右箭头加载图片

src/views/realTimeMonitor/components/carouselChart.vue

@@ -100,6 +100,7 @@
             >
               <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
               <img v-lazy="item.path + '!260x160'" />
+              <!--  <img :src="item.path + '!260x160'" />-->
               <!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
               <p class="timeInfo">
                 <el-tooltip
@@ -128,7 +129,7 @@
                       : item.channelName
                   }}</span
                 >
-                <!-- <span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span> -->
+                <span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
               </p>
             </div>
             <div class="picBox" v-else-if="item.mediaType == 1">
@@ -170,10 +171,10 @@
             </div>
           </div>
         </div>
-        <div class="arrow leftArrow" @click.stop="smallLeftClick">
+        <div class="arrow leftArrow" @click.stop="smallLeftClick" ref="leftRef">
           <i class="el-icon-arrow-left"></i>
         </div>
-        <div class="arrow rightArrow">
+        <div class="arrow rightArrow" ref="rightRef">
           <i class="el-icon-arrow-right" @click.stop="smallRightClick"></i>
         </div>
       </div>
@@ -258,6 +259,7 @@ export default {
       deep: true, //deep，默认值是 false，代表是否深度监听。
     },
   },
+  computed: {},
   created() {
     this.roleUser = localStorage.getItem("role");
     ////console.log(this.roleUser);
@@ -434,19 +436,21 @@ export default {
       let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
       if (direction == "down") {
         this.$refs.scrollBox.scrollLeft +=
-          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
       }
       if (direction == "up") {
         this.$refs.scrollBox.scrollLeft -=
-          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
       }
     },
     //缩略图的左右箭头
     smallLeftClick() {
       this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
+      this.$forceUpdate(); // 强制 Vue 重新渲染
     },
     smallRightClick() {
       this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
+      this.$forceUpdate(); // 强制 Vue 重新渲染
     },
 
     //绘制大图告警区域

vue.config.js

@@ -23,8 +23,8 @@ module.exports = defineConfig({
         //表示拦截以/api开头的请求路径
 
         //target: "http://192.168.1.190:8080", //190 需要去掉/Api
-        target: "http://61.169.135.146:9911/", //运维
-        // target: "http://61.169.135.146:40080/", //dell
+        //target: "http://61.169.135.146:9911/", //运维
+        target: "http://61.169.135.146:40080/", //dell
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的