xy-frontend/src/views/realTimeMonitor/components/carouselChart.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 + '!1366x768'"
          :preview-src-list="srcList"
          @load="loadImage"
          @error="setDefaultImage"
          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="activeSmall > 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="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 < 5 ? 'littlePic' : ''"
        >
          <div
            class="smallPic"
            v-for="(item, index2) in terminalPhoto"
            :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>
        </div>
        <div class="arrow leftArrow" @click="smallLeftClick">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="arrow rightArrow">
          <i class="el-icon-arrow-right" @click="smallRightClick"></i>
        </div>
      </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: () => [],
    },
  },
  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);
  },
  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;

      //开启传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() {
      this.activeSmall--;
      this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth / 5;
      this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
    },
    rightClick() {
      this.activeSmall++;
      this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth / 5;
      this.changeBigPic(this.terminalPhoto[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() {
      console.log("loading");
      this.picLoading = false;
    },
    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 / 5) * 3;
      }
      if (direction == "up") {
        this.$refs.scrollBox.scrollLeft -=
          (this.$refs.scrollBox.offsetWidth / 5) * 3;
      }
    },
    //缩略图的左右箭头
    smallLeftClick() {
      this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
    },
    smallRightClick() {
      this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
    },
  },
};
</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;
    .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: 18%;
        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;
          }
        }
      }
      .borderActive {
        .timeInfo {
          color: #fff;
          background: linear-gradient(180deg, #4cdbc8 10%, #128071);
        }
      }
    }
    .littlePic {
      justify-content: center;
    }
  }
}
</style>