frontend/src/views/components/carouselChart.vue

<template>
  <div class="thumb-example">
    <div class="topPic">
      <div
        class="bigPic"
        v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
      >
        <el-image :src="currentPicPath">
          <div
            slot="placeholder"
            class="image-slot"
            :style="{
              backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
            }"
          >
            <i class="el-icon-loading"></i>
          </div>
        </el-image>
      </div>
      <div
        class="bigPic"
        v-else-if="currentPicPath && mediaType == 0"
        @click="handleBigPicbox(currentPicPath)"
      >
        <!-- :preview-src-list="srcList"  @click="handleBigPicbox(currentPicPath)" -->
        <el-image
          :src="currentPicPath"
          @load="loadImage"
          @error="setDefaultImage"
          ref="picJpg"
          id="alarmPic"
          width="100%"
          height="100%"
        >
          <div
            slot="placeholder"
            class="image-slot"
            :style="{
              backgroundImage: 'url(' + currentPicPath + '!260x160' + ')',
            }"
          >
            <i class="el-icon-loading"></i>
          </div>
          <template slot="error">
            <img src="../../assets/img/nodatapic2.jpg" />
          </template>
        </el-image>
        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
        <canvas id="alarmCanvas" class="alarmCanvas" ref="alarmCanvas"></canvas>
        <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
      </div>
      <div class="bigPic" v-else-if="currentPicPath && mediaType == 1">
        <video
          width="100%"
          height="100%"
          :src="currentPicPath"
          controls="controls"
          autoplay
        ></video>
      </div>
      <div class="arrow leftArrow" @click="leftClick" v-if="activeSmall > 0">
        <i class="el-icon-arrow-left"></i>
      </div>
      <el-button
        v-if="mediaType !== 1"
        class="downBtn"
        @click.stop="downLoadPic(currentPicPath, currentPicPath)"
        >下载图片</el-button
      >
      <div
        class="arrow rightArrow"
        @click="rightClick"
        v-if="activeSmall !== terminalPhoto.length - 1"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <!--  -->

    <div class="bottomPic">
      <div class="scrollPicContain">
        <div
          class="el-car-item"
          ref="scrollBox"
          v-on:wheel="handleScroll"
          :class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
        >
          <div
            class="smallPic"
            v-for="(item, index2) in terminalPhoto"
            :key="index2"
            @click="changeBigPic(item, index2)"
            :class="`${activeSmall === index2 ? 'borderActive ' : ''}${
              photoNum === 8 ? 'moreSmallPic' : ''
            }`"
          >
            <div
              class="picBox"
              v-if="
                item.path.indexOf('nopic') == -1 &&
                item.path.indexOf('videos') == -1
              "
            >
              <img v-lazy="item.path + '!260x160'" />
              <!--  <img :src="item.path + '!260x160'" />-->
              <!-- :class="{ alarmSpan: item.isAlarm === 1 }" -->
              <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.alias !== null && item.alias !== ""
                      ? item.alias
                      : item.channelName
                  }}</span
                >
                <span class="alarmSpan" v-if="item.isAlarm == 1">(已告警)</span>
              </p>
            </div>
            <div class="picBox" v-else-if="item.mediaType == 1">
              <!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
              <img v-lazy="item.thumb + '!260x160'" />
              <p class="timeInfo">
                <i class="el-icon-video-camera"></i>
                <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.alias !== null && item.alias !== ""
                      ? item.alias
                      : item.channelName
                  }}</span
                >
              </p>
            </div>
            <div class="picBox" v-else>
              <!-- <el-image :src="item.path"></el-image> -->
              <img v-lazy="item.path" />
            </div>
          </div>
        </div>
        <div class="arrow leftArrow" @click.stop="smallLeftClick" ref="leftRef">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="arrow rightArrow" ref="rightRef">
          <i class="el-icon-arrow-right" @click.stop="smallRightClick"></i>
        </div>
      </div>
    </div>

    <!-- 点击出现大图 -->
    <div v-if="showBigpic" class="showPic" @click="closePic($event)">
      <div
        class="picboxI"
        @mousewheel.prevent="rollImg"
        :style="{
          transform: 'scale(' + zoomD + ')',
        }"
        @mousedown="move"
      >
        <img
          id="bigimg2"
          ref="bigimgref"
          class="maskPic img"
          :src="bigImgPath"
        />
        <!-- <canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig2"></canvas> -->
        <canvas id="bigCanvas2" class="mybigCanvas" ref="myCanvasbig"></canvas>
      </div>
      <div class="viewClose" @click="closePic($event)">
        <i class="el-icon-close"></i>
      </div>
    </div>
  </div>
</template>

<script>
import defaultImage from "../../assets/img/nodatapic2.jpg";
import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
export default {
  components: {},
  props: {
    terminalPhoto: {
      type: Array,
      default: () => [],
    },
    photoNum: {
      type: Number,
      default: () => [],
    },
    protocolInfo: {
      type: Number,
    },
  },
  data() {
    return {
      items: [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
        "Item 6",
        "Item 7",
        "Item 8",
        "Item 9",
        "Item 10",
      ],
      picLoading: true,
      currentPicPath: "", //大图
      mediaType: 0, //判断图片类型是视频还是图片
      activeSmall: 0, //索引选中小图,
      currentPage: 0,
      srcList: [],
      radioPx: "",
      fileSize: "",
      roleUser: "",
      localPoints: [], //线缆坐标
      flagLine: true, //线缆标识
      canvas: null,
      ctx: null,
      imgpic: null,
      color: "", //线颜色
      borderwidth: "", //线宽
      markEnable: "", //是否显示
      recArrs: [],
      picDataAlarm: [],
      labelMarkArrs: [],
      bigArr: "",
      //大图
      showBigpic: false,
      picShowFlag: true,
      zoomD: 1,
    };
  },
  mounted() {
    console.log("我是图片列表", this.terminalPhoto);
    // if (this.terminalPhoto) {
    //   this.changeBigPic(this.terminalPhoto[0], 0);
    //   // 进行其他操作
    // }

    //console.log(this.terminalPhoto[0]);
  },
  watch: {
    terminalPhoto: {
      handler(newVal, oldVal) {
        this.terminalPhoto = newVal;
        console.log("我是图片列表", this.terminalPhoto);
      },
      immediate: true,
      deep: true, //deep，默认值是 false，代表是否深度监听。
    },
  },
  computed: {},
  created() {
    this.roleUser = localStorage.getItem("role");
    ////console.log(this.roleUser);
  },

  methods: {
    //下载图片
    async downLoadPic(path, name) {
      const imgUrl = path;
      const response = await fetch(imgUrl);
      const blob = await response.blob();
      // 创建下载链接
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      console.log(name);
      link.download = name.split("/").pop();

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      // 释放 Blob URL
      window.URL.revokeObjectURL(url);
    },

    //获取线缆绘制显示
    getPointList(data) {
      console.log("woshi 线缆绘制", data);
      getCoordinate({
        channelId: data.channelId,
        needPic: "1",
        termId: data.termId,
      })
        .then((res) => {
          //console.log(res);
          this.localPoints = res.data.list;
          this.color = res.data.color;
          this.borderwidth = res.data.boderWidth;
          this.markEnable = res.data.markEnable;
          if (this.markEnable === 1) {
            this.drawline();
          }
        })
        .catch((err) => {});
    },
    //开启绘制线缆
    openline() {
      this.flagLine = true;
      //开启传1
      updateMarkEnableStatus({
        status: 1,
      }).then((res) => {
        //console.log(res);
      });
      this.drawline();
    },
    //关闭绘制线缆
    handelClear() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.flagLine = false;

      //关闭传0
      updateMarkEnableStatus({
        status: 0,
      }).then((res) => {
        //console.log(res);
      });
    },
    //绘制线缆方法
    drawline() {
      this.canvas = this.$refs.myCanvas;
      this.imgpic = this.$refs.picJpg;
      this.canvas.width = this.imgpic.imageWidth; //设置画布大小
      this.canvas.height = this.imgpic.imageHeight; //设置画布大小
      this.ctx = this.canvas.getContext("2d");

      if (this.flagLine == true) {
        this.localPoints = this.localPoints;
      } else {
        this.localPoints = [];
      }

      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = this.color;
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = this.borderwidth;

      if (this.localPoints == null) {
        return;
      } else {
        for (var i = 0; i < this.localPoints.length; i++) {
          this.ctx.moveTo(
            this.localPoints[i].x1 * this.imgpic.imageWidth,
            this.localPoints[i].y1 * this.imgpic.imageHeight
          );
          this.ctx.lineTo(
            this.localPoints[i].x2 * this.imgpic.imageWidth,
            this.localPoints[i].y2 * this.imgpic.imageHeight
          );
        }
        this.ctx.closePath();
        this.ctx.stroke();
      }

      // this.ctx.beginPath(); //开始路径
      // this.ctx.moveTo(100, 100); //三角形，左顶点
      // this.ctx.lineTo(300, 100); //右顶点
      // this.ctx.lineTo(300, 300); //底部的点
      // this.ctx.closePath(); //结束路径
      // this.ctx.stroke(); //描边路径
    },
    //点击大图左右按钮
    leftClick() {
      console.log(this.photoNum);
      this.activeSmall--;
      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 / this.photoNum;
      this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
    },
    //获取第一张大图
    changeBigPic(data, i) {
      if (data) {
        console.log("aaaaaaaaaaaaaaaaaaaaa", data.mediaType);
        this.mediaType = data.mediaType !== null ? data.mediaType : 0;

        this.picDataAlarm = data;
        this.srcList = [];
        this.localPoints = [];
        this.activeSmall = i;

        this.currentPicPath = data.path;
        this.srcList.push(data.path);

        if (data.width != undefined) {
          this.radioPx = data.width + "x" + data.height;
        } else {
          this.radioPx = "";
        }
        if (data.fileSize !== undefined) {
          const sizeInBytes = data.fileSize;
          const sizeInMB = sizeInBytes / (1024 * 1024);
          const sizeInKB = sizeInBytes / 1024;

          if (sizeInMB >= 1) {
            this.fileSize = `${sizeInMB.toFixed(2)}M`; // 大于等于1MB，以MB为单位，保留两位小数
          } else {
            this.fileSize = `${sizeInKB.toFixed(0)}K`; // 小于1MB，以KB为单位，保留两位小数
          }
        } else {
          this.fileSize = ""; // 如果data.fileSize未定义，则设置为空字符串
        }

        // console.log(data.channelId);
        if (data.channelId) {
          this.getPointList(data);
        }
        const items = this.$refs.scrollBox.querySelectorAll(".smallPic");
        const selectedItem = items[i];
        const selectedItemLeft = selectedItem.offsetLeft;
        const scrollContainer = this.$refs.scrollBox;
        const scrollContainerWidth = scrollContainer.offsetWidth;
        const selectedItemWidth = selectedItem.offsetWidth;

        // 计算滚动距离，确保选中的元素在滚动容器内完整显示
        let scrollDistance =
          selectedItemLeft - (scrollContainerWidth - selectedItemWidth) / 2;
        if (scrollDistance < 0) {
          scrollDistance = 0;
        } else if (
          scrollDistance + scrollContainerWidth >
          scrollContainer.scrollWidth
        ) {
          scrollDistance = scrollContainer.scrollWidth - scrollContainerWidth;
        }
        // 调整滚动容器的scrollLeft
        scrollContainer.scrollLeft = scrollDistance;
        setTimeout(() => {
          this.$nextTick(() => {
            this.drawlineBig(this.picDataAlarm);
          });
        }, 100);
      }
    },
    loadImage() {
      console.log("loading");
      this.picLoading = false;
      this.drawlineBig(this.picDataAlarm);
    },
    setDefaultImage(e) {
      e.target.src = defaultImage;
      this.picLoading = false;
    },
    //鼠标滚动
    handleScroll(e) {
      let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
      if (direction == "down") {
        this.$refs.scrollBox.scrollLeft +=
          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
      }
      if (direction == "up") {
        this.$refs.scrollBox.scrollLeft -=
          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
      }
    },
    handleSwipeLeft() {
      // 处理向左滑动
      this.$refs.scrollBox.scrollLeft -=
        (this.$refs.scrollBox.offsetWidth / this.photoNum) * 2;
    },
    handleSwipeRight() {
      // 处理向右滑动
      this.$refs.scrollBox.scrollLeft +=
        (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 重新渲染
    },

    //绘制大图告警区域
    //绘制大图告警区域
    drawlineBig(data) {
      console.log("我是大图告警区域", data);
      this.canvas = document.getElementById("alarmCanvas");
      this.imgpic = document.getElementById("alarmPic");
      console.log(document.getElementById("alarmCanvas"));
      console.log(document.getElementById("alarmPic"));
      console.log(this.canvas);
      console.log(this.imgpic);
      // this.textInfo = data.enname;
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小

      console.log(this.canvas.width, this.canvas.height);
      this.ctx = this.canvas.getContext("2d");
      this.ctx.beginPath();
      console.log("开始绘制告警信息");
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 1;
      this.labelMarkArrs = data.alarmlist[0];
      console.log("我是打印出来的数据", this.labelMarkArrs);

      // 绘制矩形
      var scaleX = this.canvas.width / this.labelMarkArrs.photoWidth, //this.iw图片的宽
        scaleY = this.canvas.height / this.labelMarkArrs.photoHeight; //this.ih图片的高
      console.log(scaleX, scaleY);
      var top = this.labelMarkArrs.x * scaleX,
        left = this.labelMarkArrs.y * scaleY,
        width = this.labelMarkArrs.width * scaleX,
        height = this.labelMarkArrs.height * scaleY;
      console.log(top, left, width, height);
      // this.ctx.strokeStyle = "red"; //线的颜色
      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
      this.ctx.font = "14px normal";
      this.ctx.fillStyle = "#ff0000";
      this.textInfo = this.labelMarkArrs.enname;
      //this.ctx.fillText(this.textInfo, top, left + 24);
      //距离上面有空间
      if (left > 32) {
        this.ctx.fillText(this.textInfo, top, left - 4);
      } else if (this.canvas.height - left + height > 32) {
        this.ctx.fillText(this.textInfo, top, height - 4);
      }

      this.ctx.closePath();
      this.ctx.stroke();
      console.log("结束绘制告警信息！！！！！！！！！！！！！！");
    },
    //绘制大图告警区域
    drawlineBig2(data) {
      console.log(data);
      this.canvas = document.getElementById("bigCanvas2");
      this.imgpic = document.getElementById("bigimg2");
      console.log(document.getElementById("alarmCanvas"));
      console.log(document.getElementById("bigimg2"));
      console.log(this.canvas);
      console.log(this.imgpic);
      this.textInfo = data.enname;
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小

      console.log(this.canvas.width, this.canvas.height);
      this.ctx = this.canvas.getContext("2d");
      this.ctx.beginPath();
      console.log("开始绘制告警信息");
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 1;
      this.labelMarkArrs = data.alarmlist[0];
      console.log("我是打印出来的数据", this.labelMarkArrs);

      // 绘制矩形
      var scaleX = this.canvas.width / this.labelMarkArrs.photoWidth, //this.iw图片的宽
        scaleY = this.canvas.height / this.labelMarkArrs.photoHeight; //this.ih图片的高
      console.log(scaleX, scaleY);
      var top = this.labelMarkArrs.x * scaleX,
        left = this.labelMarkArrs.y * scaleY,
        width = this.labelMarkArrs.width * scaleX,
        height = this.labelMarkArrs.height * scaleY;
      console.log(top, left, width, height);
      // this.ctx.strokeStyle = "red"; //线的颜色
      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
      this.ctx.font = "14px normal";
      this.ctx.fillStyle = "#ff0000";
      this.textInfo = this.labelMarkArrs.enname;
      //this.ctx.fillText(this.textInfo, top, left + 24);
      //距离上面有空间
      if (left > 32) {
        this.ctx.fillText(this.textInfo, top, left - 4);
      } else if (this.canvas.height - left + height > 32) {
        this.ctx.fillText(this.textInfo, top, height - 4);
      }
      this.ctx.closePath();
      this.ctx.stroke();
    },
    //放大图
    handleBigPicbox(val) {
      console.log(val);
      this.showBigpic = true;
      this.bigImgPath = val;
      setTimeout(() => {
        this.$nextTick(() => {
          this.drawlineBig2(this.picDataAlarm);
        });
      }, 100);
    },
    //移动demo
    move(e) {
      console.log(e);
      e.preventDefault();
      // 获取元素
      var personBox = document.querySelector(".picboxI");
      var img = document.querySelector(".img");
      var x = e.pageX - img.offsetLeft;
      var y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      personBox.addEventListener("mousemove", move);
      console.log(personBox.addEventListener("mousemove", move));
      console.log(personBox.style);
      function move(e) {
        console.log(personBox.style.left);
        personBox.style.left = e.pageX - x + "px";
        personBox.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", function () {
        personBox.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      personBox.addEventListener("mouseout", function () {
        personBox.removeEventListener("mousemove", move);
      });
    },
    // 缩放图片
    rollImg(e) {
      let direction = e.deltaY > 0 ? "down" : "up";
      if (direction === "up") {
        // 滑轮向上滚动
        this.large();
      } else {
        // 滑轮向下滚动
        this.Small();
      }
    },
    //大
    large() {
      this.$nextTick(() => {
        if (this.zoomD < 6) {
          this.zoomD += 0.1;
        }
        document.querySelector(
          ".picboxI"
        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
      });
    },
    // 小
    Small() {
      this.$nextTick(() => {
        if (this.zoomD > 0.3) {
          this.zoomD -= 0.1;
        }
        document.querySelector(
          ".picboxI"
        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
      });
    },
    imgOnload() {
      console.log("加载完成");
      this.canvasloading = false;
    },
    closePic(e) {
      console.log(e);
      var btn = this.$refs.bigimgref;
      console.log(btn);
      if (btn) {
        if (!btn.contains(event.target)) {
          //按钮.app-download以外的区域
          this.zoomD = 1;
          this.showBigpic = false;
        }
      }
      //
      // this.showBigpic = false;
    },
  },
};
</script>
<style lang="less">
.thumb-example {
  width: 100%;
  // display: flex;
  // flex-direction: column;
  height: calc(100% - 32px);
  box-sizing: border-box;

  .radioBox {
    position: absolute;
    top: 8px;
    right: 24px;
    color: #fff;
    font-size: 14px;
  }
  .skeletonBox {
    width: 100%;
    height: 80%;
    margin-bottom: 4px;
    .el-skeleton,
    .elpicBox {
      width: 100%;
      height: 100%;
    }
    .el-skeleton__image svg {
      width: 50%;
      height: 50%;
    }
  }
  .topPic {
    width: 100%;
    height: 80%;
    margin-bottom: 4px;
    position: relative;
    .bigPic {
      width: 100%;
      height: 100%;
      cursor: pointer;

      .el-image {
        width: 100%;
        height: 100%;

        .image-slot {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          background-size: 100% 100%;
          i {
            font-size: 20px;
            color: #169e8c;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .myCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index: 3;
      pointer-events: none;
    }
    #alarmCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      cursor: pointer;
      pointer-events: none;
    }
    &:hover {
      .arrow {
        opacity: 1;
        transition: all 0.5s ease-in;
      }
      .downBtn {
        opacity: 1;
        transition: all 0.5s ease-in;
      }
    }
    .arrow {
      opacity: 0;
      position: absolute;
      cursor: pointer;
      font-size: 16px;
      border-radius: 30px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: #4cdbc8;
      font-weight: bold;
      background-color: rgba(31, 45, 61, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      line-height: 60px;
      width: 40px;
      height: 40px;
      z-index: 4;
      &:hover {
        background-color: rgba(31, 45, 61, 1);
      }
    }
    .leftArrow {
      left: 16px;
    }
    .rightArrow {
      right: 16px;
    }
    .downBtn {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      right: 24px;
      bottom: 24px;
      color: #fff;
      z-index: 5;
      opacity: 0;
      &:hover {
        background: rgba(0, 0, 0, 0.9);
        color: #169e8c;
      }
    }
  }
  .bottomPic {
    width: 100%;
    height: 20%;
    margin-bottom: 6px;
    .scrollPicContain {
      // width: 1380px;
      display: flex;
      height: 100%;
      position: relative;
      .arrow {
        opacity: 0;
        position: absolute;
        cursor: pointer;
        font-size: 14px;
        border-radius: 30px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #4cdbc8;
        font-weight: bold;
        background-color: rgba(31, 45, 61, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 60px;
        width: 30px;
        height: 30px;
        z-index: 4;
        &:hover {
          background-color: rgba(31, 45, 61, 1);
        }
      }
      .leftArrow {
        left: 16px;
      }
      .rightArrow {
        right: 16px;
      }
      &:hover {
        .arrow {
          opacity: 1;
          transition: all 0.5s ease-in;
        }
      }
    }
    .el-car-item {
      width: 100%;
      height: 100%;
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
      //background-color: #4cdbc8;
      .noppiclist {
        width: 100%;
        height: 100%;
        display: flex;
        // align-items: center;
        justify-content: center;
        li {
          list-style: none;
          width: 19.2%;
          height: 100%;
          border: 3px solid transparent;
          box-sizing: border-box;
          flex-shrink: 0;
          white-space: nowrap;
          position: relative;
          cursor: pointer;
          background: url(../../assets/img/nopicbg.png) no-repeat;
          background-size: 20% 20%;
          background-color: #eee;
        }
      }
      .smallPic {
        width: 19.2%;
        border: 3px solid transparent;
        box-sizing: border-box;
        flex-shrink: 0;
        white-space: nowrap;
        position: relative;
        cursor: pointer;
        .picBox {
          width: 100%;
          height: 100%;
          background: url(../../assets/img/nopicbg.png) no-repeat center;
          background-size: 30% 24%;
          background-color: #eee;
        }
        img {
          width: 100%;
          height: 100%;
        }
        .timeInfo {
          position: absolute;
          bottom: 0px;
          width: 100%;
          background: #f0f0f0;
          padding: 6px 0;
          font-size: 12px;
          text-align: center;
          color: #333;
          .el-icon-video-camera {
            font-size: 20px;
            margin-right: 8px;
            align-items: center;
            vertical-align: sub;
            color: #169e8c;
          }
        }
        .alarmSpan {
          color: #f00;
          font-weight: bold;
        }
      }
      .moreSmallPic {
        width: 9.8%;
      }
      .borderActive {
        .timeInfo {
          color: #fff;
          background: linear-gradient(180deg, #4cdbc8 10%, #128071);
        }
        .alarmSpan {
          color: #f00;
          font-weight: bold;
        }
      }
    }
    .littlePic {
      justify-content: center;
    }
  }
  //放大图
  .showPic {
    position: fixed;
    background-color: rgba(0, 0, 0, 50%);
    bottom: 0;
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    .picboxI {
      position: relative;
      width: 85%;
      height: 85%;
      margin: auto;
      animation-name: scaleDraw;
      /*关键帧名称*/
      animation-timing-function: ease;
      /*动画的速度曲线*/
      animation-iteration-count: 1;
      /*动画播放的次数*/
      animation-duration: 0.65s;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        position: absolute;
        cursor: grab;
      }
      .mybigCanvas {
        position: absolute;
        // top: 0;
        // left: 0;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        cursor: pointer;
        pointer-events: none;
      }
    }
    .viewClose {
      -webkit-app-region: no-drag;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      cursor: pointer;
      height: 80px;
      overflow: hidden;
      position: absolute;
      right: -40px;
      top: -40px;
      transition: background-color 0.15s;
      width: 80px;
      .el-icon-close {
        bottom: 16px;
        left: 16px;
        position: absolute;
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>