xy-frontend/src/views/realTimeMonitor/components/carouselChart.vue

<template>
  <div class="thumb-example">
    <div class="radioBox" v-if="roleUser == 8 || roleUser == 0">
      {{ radioPx }} <span v-if="fileSize">({{ fileSize }})</span>
      <span v-if="protocolInfo == '65280'"> 国网I1 </span>
      <span v-if="protocolInfo == '65296'"> 陕西 </span>
      <span v-if="protocolInfo == '65281'"> 安徽 </span>
      <span v-if="protocolInfo == '65282'"> 江苏</span>
      <span v-if="protocolInfo == '65283'"> 湖南 </span>
      <span v-if="protocolInfo == '65284'"> 浙江 </span>
      <span v-if="protocolInfo == '65285'"> 河南全景</span>
      <span v-if="protocolInfo == '65286'"> 河南郑州 </span>
      <span v-if="protocolInfo == '65290'"> 河南统一视频v2020 </span>
      <span v-if="protocolInfo == '65298'"> 宁夏 </span>
      <span v-if="protocolInfo == '2'"> 南网 </span>
      <span>{{ protocolInfo }}</span>
      <!-- <span>(共{{ terminalPhoto.length }}张)</span> -->
    </div>
    <div class="topPic">
      <div
        class="bigPic"
        v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
      >
        <el-image :src="currentPicPath"></el-image>
      </div>
      <div
        class="bigPic"
        v-else-if="currentPicPath && mediaType == 0"
        v-loading="picLoading"
      >
        <!-- :preview-src-list="srcList"  @click="handleBigPicbox(currentPicPath)" -->
        <el-image
          :src="currentPicPath + '!1366x768'"
          @load="loadImage"
          @error="setDefaultImage"
          ref="picJpg"
          id="alarmPic"
          width="100%"
          height="100%"
          :preview-src-list="srcList"
        >
          <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 === 10 ? 'moreSmallPic' : ''
            }`"
          >
            <div
              class="picBox"
              v-if="
                item.path.indexOf('nopic') == -1 &&
                item.path.indexOf('videos') == -1
              "
            >
              <!-- <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
                  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">
        <img
          id="bigimg2"
          ref="bigimgref"
          class="maskPic img"
          :src="bigImgPath"
          width="100%"
          height="100%"
        />

        <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 {
      picLoading: true,
      currentPicPath: "", //大图
      mediaType: "", //判断图片类型是视频还是图片
      activeSmall: 0, //索引选中小图,
      currentPage: 0,
      srcList: [],
      radioPx: "",
      fileSize: "",
      roleUser: "",
      localPoints: [], //线缆坐标
      flagLine: true, //线缆标识
      canvas: null,
      ctx: null,
      imgpic: null,
      color: "", //线颜色
      borderwidth: "", //线宽
      markEnable: "", //是否显示
      recArrs: [],
      picDataAlarm: [],
      labelMarkArrs: [],

      //大图
      showBigpic: false,
    };
  },
  mounted() {
    ////console.log(this.terminalPhoto);
    this.changeBigPic(this.terminalPhoto[0], 0);
  },
  watch: {
    terminalPhoto: {
      handler(newVal, oldVal) {
        this.terminalPhoto = newVal;
      },
      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();
    },
    //关闭绘制线缆
    closeLine() {
      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) {
      // //console.log("鼠标222222222", this.currentPage, this.activeSmall);
      this.picDataAlarm = data;
      this.srcList = [];
      this.localPoints = [];
      this.activeSmall = i;
      this.mediaType = data.mediaType;
      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);
      }
    },
    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;
      }
    },
    //缩略图的左右箭头
    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();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 2;
      this.labelMarkArrs = data.alarmlist;
      this.recArrs = [];
      for (var i = 0; i < this.labelMarkArrs.length; i++) {
        console.log(this.labelMarkArrs[i]);
        //获取的数据转化一下
        this.recArrs.push({
          x:
            this.labelMarkArrs[i].x * this.canvas.width -
            (this.labelMarkArrs[i].width * this.canvas.width) / 2,
          y:
            this.labelMarkArrs[i].y * this.canvas.height -
            (this.labelMarkArrs[i].height * this.canvas.height) / 2,
          w: this.labelMarkArrs[i].width * this.canvas.width,
          h: this.labelMarkArrs[i].height * this.canvas.height,
          text: this.labelMarkArrs[i].enname + this.labelMarkArrs[i].prob + "%",
          type: this.labelMarkArrs[i].label,
        });
      }
      console.log(this.recArrs);
      if (!this.recArrs.length) return;
      for (var i = 0; i < this.recArrs.length; i++) {
        // >2的判断是为了防止误触画出来的数据
        if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
          this.ctx.beginPath();
          this.ctx.lineWidth = 2; // 矩形框的线条宽度
          this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
          // 设置填充样式
          // this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
          this.ctx.strokeRect(
            this.recArrs[i].x,
            this.recArrs[i].y,
            this.recArrs[i].w,
            this.recArrs[i].h
          ); // 矩形框
          // this.ctx.fillRect(
          //   this.recArrs[i].x,
          //   this.recArrs[i].y,
          //   this.recArrs[i].w,
          //   this.recArrs[i].h
          // ); // 填充矩形
          // 如果有文本信息，填充文本信息
          if (this.recArrs[i].text) {
            this.ctx.font = "100 18px 微软雅黑";
            this.ctx.lineWidth = 1;
            this.ctx.strokeStyle = "rgb(255,255,0)";
            this.ctx.strokeText(
              this.recArrs[i].text,
              this.recArrs[i].x +
                this.recArrs[i].w / 2 -
                (this.recArrs[i].text.length / 2) * 16,
              this.recArrs[i].y - 20 < 0
                ? this.recArrs[i].y + this.recArrs[i].h + 20
                : this.recArrs[i].y - 10
            );
          }
        }
      }
      this.ctx.closePath();
      this.ctx.stroke();
    },
    //绘制大图告警区域
    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();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = "#ff0000";
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 2;
      this.labelMarkArrs = data.alarmlist;
      this.recArrs = [];
      for (var i = 0; i < this.labelMarkArrs.length; i++) {
        console.log(this.labelMarkArrs[i]);
        //获取的数据转化一下
        this.recArrs.push({
          x:
            this.labelMarkArrs[i].x * this.canvas.width -
            (this.labelMarkArrs[i].width * this.canvas.width) / 2,
          y:
            this.labelMarkArrs[i].y * this.canvas.height -
            (this.labelMarkArrs[i].height * this.canvas.height) / 2,
          w: this.labelMarkArrs[i].width * this.canvas.width,
          h: this.labelMarkArrs[i].height * this.canvas.height,
          text: this.labelMarkArrs[i].enname + this.labelMarkArrs[i].prob + "%",
          type: this.labelMarkArrs[i].label,
        });
      }
      console.log(this.recArrs);
      if (!this.recArrs.length) return;
      for (var i = 0; i < this.recArrs.length; i++) {
        // >2的判断是为了防止误触画出来的数据
        if (this.recArrs[i].w > 2 && this.recArrs[i].h > 2) {
          this.ctx.beginPath();
          this.ctx.lineWidth = 2; // 矩形框的线条宽度
          this.ctx.strokeStyle = "rgb(255, 255, 0)"; // 矩形框的线条颜色
          // 设置填充样式
          // this.ctx.fillStyle = "rgba(22, 158, 140, 0.4)"; // 蓝色，半透明
          this.ctx.strokeRect(
            this.recArrs[i].x,
            this.recArrs[i].y,
            this.recArrs[i].w,
            this.recArrs[i].h
          ); // 矩形框
          // this.ctx.fillRect(
          //   this.recArrs[i].x,
          //   this.recArrs[i].y,
          //   this.recArrs[i].w,
          //   this.recArrs[i].h
          // ); // 填充矩形
          // 如果有文本信息，填充文本信息
          if (this.recArrs[i].text) {
            this.ctx.font = "100 16px 微软雅黑";
            this.ctx.lineWidth = 2;
            this.ctx.strokeStyle = "rgb(255,255,0)";
            this.ctx.strokeText(
              this.recArrs[i].text,
              this.recArrs[i].x +
                this.recArrs[i].w / 2 -
                (this.recArrs[i].text.length / 2) * 16,
              this.recArrs[i].y - 20 < 0
                ? this.recArrs[i].y + this.recArrs[i].h + 20
                : this.recArrs[i].y - 10
            );
          }
        }
      }
      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);
    },
    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;
  }
  .topPic {
    width: 100%;
    height: 80%;
    margin-bottom: 4px;
    position: relative;
    .bigPic {
      width: 100%;
      height: 100%;
      cursor: pointer;
      .el-image {
        width: 100%;
        height: 100%;
        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: hidden;
      overflow-y: hidden;
      scroll-behavior: smooth;
      .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%;
        }

        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: 90%;
      height: 90%;
      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>