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

<template>
  <div class="thumb-example">
    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</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"
      >
        <el-image
          :src="currentPicPath + ''"
          :preview-src-list="srcList"
          @load="loadImage"
          ref="picJpg"
        >
          <template slot="error">
            <img src="../../../assets/img/nodatapic2.jpg" />
          </template>
        </el-image>
        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></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="currentPage > 0">
        <i class="el-icon-arrow-left"></i>
      </div>
      <el-button
        class="downBtn"
        @click.stop="downLoadPic(currentPicPath, currentPicPath)"
        >下载图片</el-button
      >
      <div
        class="arrow rightArrow"
        @click="rightClick"
        v-if="currentPage < terminalPhoto.length - 1"
      >
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="bottomPic" v-on:wheel="handleScroll">
      <el-carousel
        :loop="false"
        :autoplay="false"
        ref="carousel"
        indicator-position="none"
        @change="changeItem"
      >
        <el-carousel-item
          class="el-car-item"
          v-for="(list, index) in terminalPhoto"
          :key="index"
        >
          <div
            class="smallPic"
            v-for="(item, index2) in list"
            :key="index2"
            @click="changeBigPic(item, index2)"
            :class="activeSmall === index2 ? 'borderActive' : ''"
          >
            <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'" />

              <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
                >
              </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>
        </el-carousel-item>
      </el-carousel>
    </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: () => [],
    },
  },
  data() {
    return {
      picLoading: true,
      currentPicPath: "", //大图
      mediaType: "", //判断图片类型是视频还是图片
      activeSmall: 0, //索引选中小图,
      currentPage: 0,
      srcList: [],
      radioPx: "",
      roleUser: "",
      localPoints: [], //线缆坐标
      flagLine: true, //线缆标识
      canvas: null,
      ctx: null,
      imgpic: null,
      color: "", //线颜色
      borderwidth: "", //线宽
      markEnable: "", //是否显示
    };
  },
  mounted() {
    console.log(this.terminalPhoto);
    this.changeBigPic(this.terminalPhoto[0][0], 0);
  },
  watch: {
    terminalPhoto: {
      handler(newVal, oldVal) {
        this.terminalPhoto = newVal;
      },
      immediate: true,
      deep: true, //deep，默认值是 false，代表是否深度监听。
    },
  },
  created() {
    this.roleUser = localStorage.getItem("role");
    console.log(this.roleUser);
  },
  methods: {
    //下载图片
    downLoadPic(url, name) {
      const image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.src = url;
      image.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          const url = URL.createObjectURL(blob);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },
    download(href, name) {
      const eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },
    //获取线缆绘制显示
    getPointList(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;
      console.log("我是绘制线缆");
      //开启传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;
      console.log("关闭线缆");
      //关闭传0
      updateMarkEnableStatus({
        status: 0,
      }).then((res) => {
        console.log(res);
      });
    },
    //绘制线缆方法
    drawline() {
      this.canvas = this.$refs.myCanvas;
      this.imgpic = this.$refs.picJpg;
      console.log(this.canvas);
      console.log(this.imgpic);
      this.canvas.width = this.imgpic.imageWidth; //设置画布大小
      this.canvas.height = this.imgpic.imageHeight; //设置画布大小
      this.ctx = this.canvas.getContext("2d");
      console.log(this.localPoints);
      if (this.flagLine == true) {
        this.localPoints = this.localPoints;
        console.log(this.localPoints);
      } else {
        this.localPoints = [];
      }
      console.log(this.ctx);
      this.ctx.beginPath();
      //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = this.color;
      // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = this.borderwidth;
      console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
      console.log(this.localPoints);
      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.activeSmall, this.currentPage);
      this.activeSmall--;
      if (this.activeSmall < 0) {
        this.currentPage--;
        this.$refs.carousel.setActiveItem(this.currentPage);
        this.activeSmall =
          this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
      }
      this.changeBigPic(
        this.terminalPhoto[this.currentPage][this.activeSmall],
        this.activeSmall
      );
    },
    rightClick() {
      console.log(this.activeSmall);
      console.log(this.terminalPhoto.length);
      this.activeSmall++;
      if (this.activeSmall > this.photoNum - 1) {
        this.currentPage++;
        this.$refs.carousel.setActiveItem(this.currentPage);
        this.activeSmall = 0;
      }
      this.changeBigPic(
        this.terminalPhoto[this.currentPage][this.activeSmall],
        this.activeSmall
      );
    },
    //获取第一张大图
    changeBigPic(data, i) {
      console.log(data, i);
      console.log("鼠标222222222", this.currentPage, this.activeSmall);
      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 = "";
      }
      // this.getPointList(data);
    },
    loadImage() {
      this.picLoading = false;
    },
    changeItem(e) {
      // console.log(this.currentPage);
      // this.currentPage = e;
      // if (e === 0) {
      //   this.activeSmall = 0;
      //   //this.changeBigPic(this.terminalPhoto[0][0], 0);
      // } else {
      //   this.activeSmall = 0;
      //   // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
      // }
      //this.active = e; // 将走马灯的 下标 指定为 tab 的下标
    },
    //鼠标滚动
    handleScroll(e) {
      let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
      console.log(e.deltaY, direction);
      if (direction == "down") {
        if (
          this.currentPage == this.terminalPhoto.length - 1 &&
          this.activeSmall ==
            this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
        ) {
          this.$message({
            message: "已经是最后一张图",
            type: "success",
            showClose: true,
            duration: 500,
          });
          return;
        } else {
          // this.rightClick();
          this.activeSmall++;
          if (this.activeSmall > this.photoNum - 1) {
            this.currentPage++;
            this.$refs.carousel.setActiveItem(this.currentPage);
            this.activeSmall = 0;
          }
          console.log(this.activeSmall);
        }
      }
      if (direction == "up") {
        if (this.currentPage == 0 && this.activeSmall == 0) {
          this.$message({
            showClose: true,
            duration: 500,
            message: "已经是最新一张图",
            type: "success",
          });
          return;
        } else {
          // this.leftClick();
          console.log(this.activeSmall);
          this.activeSmall--;
          console.log(this.activeSmall);
          if (this.activeSmall < 0) {
            this.currentPage--;
            console.log("我是页数", this.currentPage);
            this.$refs.carousel.setActiveItem(this.currentPage);
            this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
            console.log(this.terminalPhoto);
            console.log(this.terminalPhoto[this.currentPage].length);
            console.log("我是选中的值", this.activeSmall);
          }
          console.log(this.activeSmall);
        }
      }
    },
  },
};
</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%;
      .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;
    }
    &: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;
    .el-carousel {
      height: 100%;
      .el-carousel__container {
        height: 100% !important;
      }
      .el-carousel__arrow {
        color: #4cdbc8;
        font-weight: bold;
        background-color: rgba(31, 45, 61, 0.8);
        &:hover {
          background-color: rgba(31, 45, 61, 1);
        }
      }
    }
    .el-car-item {
      display: flex;
      justify-content: center;
      .smallPic {
        width: 20%;
        border: 3px solid transparent;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        .picBox {
          width: 100%;
          height: 100%;
        }
        // .el-image {
        //   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;
          }
        }
      }
      .borderActive {
        .timeInfo {
          color: #fff;
          background: linear-gradient(180deg, #4cdbc8 10%, #128071);
        }
      }
    }
  }
}
</style>