frontend/src/views/components/carouselChart.vue

<template>
  <div class="thumb-example">
    <div class="picTop">
      <div
        class="bigimg"
        :options="OptionssalseImg"
        v-if="
          bigPicPath.indexOf('nopic') == -1 &&
          bigPicPath.indexOf('videos') == -1
        "
        :style="
          bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!128x72)' : ''
        "
        @click="handleBigPic(bigPicPath)"
      >
        <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" />

        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
        <!-- <p class="mark">
          {{ bigPicPath }}
          <span>{{ this.activeSmall }}</span>
        </p> -->
      </div>
      <div
        v-if="
          showBigpic &&
          bigPicPath.indexOf('nopic') == -1 &&
          bigPicPath.indexOf('videos') == -1
        "
        class="showPic"
      >
        <div class="picboxI">
          <img class="maskPic" :src="bigPicPath" />
          <i @click="closePic" class="el-icon-circle-close"></i>
        </div>
      </div>
      <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
        <video
          width="100%"
          height="100%"
          :src="bigPicPath"
          controls="controls"
          :poster="videopath"
          autoplay
        ></video>
      </div>
      <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>
      <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' : ''"
        >
          <div
            class="smallhavePic"
            v-if="
              item.path.indexOf('nopic') == -1 &&
              item.path.indexOf('videos') == -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>
          </div>
          <div
            class="smallnoPic"
            v-else-if="item.path.indexOf('videos') !== -1"
          >
            <img
              src="../../assets/img/loading.jpg"
              style="object-fit: cover"
              v-if="item.thumb.indexOf('jpg') == -1"
            />
            <img :src="item.thumb" v-else />
            <p class="videoicon"><i class="el-icon-video-play"></i></p>
            <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>
          </div>
          <div class="smallnoPic" v-else>
            <img :src="item.path" />
          </div>
        </li>
      </ul>
      <div
        class="arrow leftArrow"
        v-if="this.page != 1"
        @click="smallLeftClick"
      >
        <i class="el-icon-arrow-left"></i>
      </div>
      <div
        class="arrow rightArrow"
        v-if="this.page < this.total"
        @click="smallRightClick"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    terminalPhoto: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      OptionssalseImg: {
        inline: false,
        button: true,
        navbar: false,
        title: false,
        toolbar: false,
        tooltip: false,
        zoomable: true,
        url: "src",
      },
      isshowArrow: true, //判断是否显示切换按钮
      bigPicPath: "", //大图地址
      videopath: "",
      smallPicPath: "", //小图地址
      bigNum: 0, //判断大图是第几张
      fiveList: [], //小图图片list
      activeSmall: 0, //索引选中小图,
      page: 1, //当前第几页
      pagesize: 5, //每页显示五条
      total: 0, //总共又几页

      localPoints: [], //画图对象
      canvas: null,
      ctx: null,
      imgpic: null,
      color: "#FF0000",
      num: 5,
      showBigpic: false,
    };
  },
  mounted() {
    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;
    console.log("this.bigPicPath");

    this.localPoints = this.terminalPhoto[0].list;
    console.log("111111111111111111111");
    console.log(this.localPoints);
    if (this.localPoints == undefined) {
      console.log("无数据");
      return;
    } else if (this.localPoints) {
      this.drawline();
    }
  },
  watch: {
    terminalPhoto: function (newVal, oldVal) {
      this.bigPicPath = this.terminalPhoto[0].path;
      this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
      this.total = this.terminalPhoto.length / this.pagesize;
    },
  },
  created() {},
  methods: {
    handleBigPic() {
      this.showBigpic = true;
    },
    closePic() {
      this.showBigpic = false;
    },
    drawline() {
      this.canvas = this.$refs.myCanvas;
      this.imgpic = this.$refs.picJpg;
      console.log(this.canvas);
      console.log(this.imgpic);
      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
      this.ctx = this.canvas.getContext("2d");
      console.log(this.localPoints);
      console.log(this.ctx);
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = this.color;
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = this.num;
      for (var i = 0; i < this.localPoints.length; i++) {
        this.ctx.moveTo(
          this.localPoints[i].x1 * this.imgpic.width,
          this.localPoints[i].y1 * this.imgpic.height
        );
        this.ctx.lineTo(
          this.localPoints[i].x2 * this.imgpic.width,
          this.localPoints[i].y2 * this.imgpic.height
        );
      }

      this.ctx.closePath();
      this.ctx.stroke();
    },
    //不显示绘制线
    handelClear() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    getphotoList() {
      this.fiveList = this.terminalPhoto.slice(
        (this.page - 1) * this.pagesize,
        this.page * this.pagesize
      );
      this.bigPicPath = this.fiveList[this.activeSmall].path;
      this.videopath = this.fiveList[this.activeSmall].thumb;
    },
    //大图点击左侧切换图片
    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();
      }
      this.localPoints = this.terminalPhoto[this.bigNum].list;
      this.drawline();
    },
    //点击右侧切换图片
    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();
      }
      this.localPoints = this.terminalPhoto[this.bigNum].list;
      this.drawline();
    },
    //点击小图变成大图
    handleBigpic(row, index) {
      console.log(row);
      console.log();
      this.activeSmall = index;
      this.bigPicPath = row.path;
      this.localPoints = row.list;
      this.drawline();
    },
    //点击小图切换左侧
    smallLeftClick() {
      this.activeSmall = 0;
      console.log("点击了左侧");

      this.page--;
      if (this.page < 1) {
        this.isshowArrow = false;
      } else {
        this.getphotoList();
      }
      console.log(this.page);
      console.log(this.fiveList);
    },
    //点击小图切换右侧
    smallRightClick() {
      this.activeSmall = 0;
      console.log("点击了右侧");
      console.log(this.page);
      this.page++;
      this.getphotoList();
      console.log(this.fiveList);
    },
  },
};
</script>
<style lang="less">
.thumb-example {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 0px);
  box-sizing: border-box;
  .showPic {
    position: fixed;
    background-color: rgba(0, 0, 0, 50%);
    bottom: 0;
    left: 0;
    overflow: hidden;
    right: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    .picboxI {
      position: relative;
      max-width: 1366px;
      max-height: 768px;
      margin: auto;
      animation-name: scaleDraw;
      /*关键帧名称*/
      animation-timing-function: ease;
      /*动画的速度曲线*/
      animation-iteration-count: 1;
      /*动画播放的次数*/
      animation-duration: 0.65s;

      img {
        max-width: 1366px;
        max-height: 768px;
        margin: auto;
      }
      .el-icon-circle-close {
        position: absolute;
        right: -10px;
        font-size: 48px;
        color: #fff;
        cursor: pointer;
        top: -24px;
      }
    }
  }
  .picTop {
    width: 100%;
    height: 80%;
    overflow: hidden;
    margin-bottom: 4px;
    position: relative;
    &:hover {
      .arrow {
        opacity: 1;
        transition: all 0.5s ease-in;
      }
    }
    .bigimg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-size: 100% 100%;
      .mark {
        position: absolute;
        bottom: 12px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
        left: 16px;
        font-size: 14px;
        line-height: 24px;
        //opacity: 0;
        transition: bottom 2s ease 0s;
      }
      .myCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: fill;
      cursor: pointer;
    }
    .arrow {
      opacity: 0;
      position: absolute;
      cursor: pointer;
      color: #fff;
      font-size: 16px;
      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;
      width: 40px;
      height: 40px;
      &:hover {
        color: #409eff;
      }
    }
    .leftArrow {
      left: 16px;
    }
    .rightArrow {
      right: 16px;
    }
  }
  .picBottom {
    width: 100%;
    height: 20%;
    position: relative;
    .smallPicBox {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      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;
        }
        .smallhavePic {
          width: 100%;
          height: 100%;
        }
        .smallnoPic {
          width: 100%;
          height: 100%;
        }
      }
      .timeInfo {
        position: absolute;
        bottom: 0px;
        width: 100%;
        background: #f0f0f0;
        padding: 6px 0px;
        font-size: 12px;
        text-align: center;
        color: #333;
      }
      .videoicon {
        position: absolute;
        top: 73%;
        left: 10%;
        transform: translate(-50%, -50%);
        i {
          font-size: 28px;
          color: #fff;
        }
      }
      .borderActive {
        .timeInfo {
          //background: #409eff;
          background: linear-gradient(180deg, #00eaff 10%, #409eff 100%);
          color: #fff;
        }
      }
      // .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;
      //   }
      // }
    }
    .arrow {
      position: absolute;
      cursor: pointer;
      color: #fff;
      font-size: 12px;
      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;
      line-height: 60px;
      width: 28px;
      height: 28px;
    }
    .leftArrow {
      left: 16px;
    }
    .rightArrow {
      right: 16px;
    }
  }
}
@keyframes scaleDraw {
  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(0);
    /*开始为原始大小*/
  }

  100% {
    transform: scale(1);
  }
}
// https://v1.github.surmon.me/vue-awesome-swiper/
</style>