soc_web/src/views/iot/videoDiagnosis/ProgressBar.vue

<template>
  <div class="progress-box-bar" ref="progressbar">
    <div class="bar-container1">
      <div
        class="bar2"
        v-for="sec in planVideo"
        :key="sec.key"
        :style="`width:${sec.width}%;background-color:${sec.color}`"
      ></div>
    </div>
    <canvas
      draggable="false"
      id="procanvas"
      height="60"
      @contextmenu="contextMenuClick"
      @mousedown="mousedownFunc"
      @mouseup="mouseupFunc"
      @mousemove="mousemoveFunc"
      @mouseout="mouseoutFunc"
    ></canvas>
    <div class="bar-container">
      <div
        class="bar1"
        v-for="sec in lostVideo"
        :key="sec.key"
        :style="`width:${sec.width}%;background-color:${sec.color}`"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProgressBar",
  props: ["timeCell", "startTime", "endTime", "videoData", "lostData"],
  data() {
    return {
      planVideo: [], //{width:百分比，color:颜色}
      lostVideo: [], //{width:百分比，color:颜色}
      canvas: "",
      ctx: "",
      canvasW: "",
      canvasH: "",
      nowTime: "",
      minute_per_ruler: 24 * 60, //时间轴显示24小时,单位分钟
      half_time: 5 * 60 * 60 * 1000,
      graduation_step: 20, //刻度间最小宽度，单位px
      start_timestamp: new Date().getTime() - 5 * 60 * 60 * 1000, //开始时间、最左侧时间
      end_timestamp: new Date().getTime() + 5 * 60 * 60 * 1000, //结束时间
      minutes_per_step: [
        1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440,
      ],
      distance_between_gtitle: 80,
      g_isMousedown: false, //拖动mousedown标记
      g_isMousemove: false, //拖动mousemove标记
      g_mousedownCursor: null, //拖动mousedown的位置
      returnTime: null, //mouseup返回时间
      downTime: [], //下载时间
      downLeft: 0,
      showDown: false,
      tiaoTop: 40,
      tiaoHeight: 20,
    };
  },
  watch: {
    timeCell: {
      immediate: true,
      handler: function () {
        this.planVideo = [];
        if (this.timeCell.length > 0) {
          let tc = this.timeCell;
          this.nowTime = this.changeTime(
            new Date(this.timeCell[0].beginTime).getTime()
          );
          this.start_timestamp = new Date(this.timeCell[0].beginTime).getTime();
          this.end_timestamp = new Date(
            this.timeCell[this.timeCell.length - 1].endTime
          ).getTime();
          this.minute_per_ruler =
            (this.end_timestamp - this.start_timestamp) / (60 * 1000);
          let prevEnd = this.start_timestamp;

          for (tc of this.timeCell) {
            let beginstamp = new Date(tc.beginTime).getTime();

            if (prevEnd != beginstamp) {
              let percent =
                (beginstamp - prevEnd) / 60 / 1000 / this.minute_per_ruler;
              this.planVideo.push({
                key: prevEnd,
                width: percent * 100,
                color: "transparent",
              });
            }

            let endStamp = new Date(tc.endTime).getTime();
            let percent =
              (endStamp - beginstamp) / 60 / 1000 / this.minute_per_ruler;
            this.planVideo.push({
              key: beginstamp,
              width: percent * 100,
              color: "rgb(0, 178, 255)",
            });

            prevEnd = endStamp;
          }

          if (this.ctx) {
            this.clearCanvas();
            this.initCanvas();
          }
        }
      },
    },
    lostData: {
      immediate: true,
      handler: function () {
        let lostVideo = [];
        if (this.lostData && this.lostData.length > 0) {
          let prevEnd = this.start_timestamp;
          let totalPercent = 0;
          for (let tc of this.lostData) {
            let beginstamp = new Date(tc.beginTime).getTime();

            if (prevEnd != beginstamp) {
              let percent =
                (beginstamp - prevEnd) / 60 / 1000 / this.minute_per_ruler;
              totalPercent += percent;
              lostVideo.push({
                key: prevEnd,
                width: percent * 100,
                color: "green",
              });
            }

            let endStamp = new Date(tc.endTime).getTime();
            let percent =
              (endStamp - beginstamp) / 60 / 1000 / this.minute_per_ruler;
            totalPercent += percent;
            lostVideo.push({
              key: beginstamp,
              width: percent * 100,
              color: "red",
            });

            prevEnd = endStamp;
          }

          if (totalPercent != 1) {
            lostVideo.push({
              key: new Date().valueOf(),
              width: (1 - totalPercent) * 100,
              color: "green",
            });
          }
        } else {
          lostVideo.push({
            key: new Date().valueOf(),
            width: 100,
            color: "green",
          });
        }

        this.lostVideo = lostVideo;
      },
    },
    // startTime(){ //不用
    //     if(!this.g_isMousedown){
    //         this.nowTime = this.changeTime(this.startTime+this.half_time);
    //         this.start_timestamp = this.startTime;
    //         this.clearCanvas();
    //         this.initCanvas();
    //     }
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.canvas = document.getElementById("procanvas");
      this.ctx = this.canvas.getContext("2d");
      this.canvas.width = this.$refs.progressbar.offsetWidth;
      this.canvasW = this.canvas.width;
      this.canvasH = this.canvas.height;
      this.nowTime = this.changeTime(new Date().getTime());
      this.initCanvas();
    });
  },
  methods: {
    // 初始化canvas
    initCanvas: function () {
      this.drawCellBg();
      //this.add_cells(this.timeCell);
      this.add_graduations(this.start_timestamp);
      //this.draw_down(this.downTime);
      //this.drawTimeTriangle();
    },
    // // 绘制三角 时间
    drawTimeTriangle() {
      // this.ctx.beginPath();
      // let x = this.canvasW/2;
      // let x1 = this.canvasW/2-7;
      // let x2 = this.canvasW/2+7;
      // this.ctx.moveTo(x1,25);
      // this.ctx.lineTo(x2,25);
      // this.ctx.lineTo(x,36);
      // this.ctx.fillStyle = "#318ed4";
      // this.ctx.closePath();
      // this.ctx.fill();
      // this.ctx.fillStyle = "#fff";
      // this.ctx.font = "14px Arial";
      // this.ctx.fillText(this.nowTime,x-60,20);
    },
    // 画背景色
    drawCellBg: function () {
      this.ctx.fillStyle = "#eaeaea";
      this.ctx.fillRect(0, this.tiaoTop, this.canvasW, this.tiaoHeight);
    },
    // 添加刻度
    add_graduations: function (start_timestamp) {
      var _this = this;
      var px_per_min = _this.canvasW / _this.minute_per_ruler; // px/min
      var px_per_ms = _this.canvasW / (_this.minute_per_ruler * 60 * 1000); // px/ms
      var px_per_step = _this.graduation_step; // px/格 默认最小值20px
      var min_per_step = px_per_step / px_per_min; // min/格

      for (let i = 0; i < _this.minutes_per_step.length; i++) {
        if (min_per_step <= _this.minutes_per_step[i]) {
          //让每格时间在minutes_per_step规定的范围内
          min_per_step = _this.minutes_per_step[i];
          px_per_step = px_per_min * min_per_step;
          break;
        }
      }
      var medium_step = 30;
      for (let i = 0; i < _this.minutes_per_step.length; i++) {
        if (
          _this.distance_between_gtitle / px_per_min <=
          _this.minutes_per_step[i]
        ) {
          medium_step = _this.minutes_per_step[i];
          break;
        }
      }
      console.info("add_graduations", _this.canvasW);
      var num_steps = _this.canvasW / px_per_step; //总格数
      var graduation_left;
      var graduation_time;
      var ms_offset = _this.ms_to_next_step(
        start_timestamp,
        min_per_step * 60 * 1000
      ); //开始的偏移时间 ms
      var px_offset = ms_offset * px_per_ms; //开始的偏移距离 px
      var ms_per_step = px_per_step / px_per_ms; // ms/step

      for (var i = 0; i < num_steps; i++) {
        graduation_left = px_offset + i * px_per_step; // 距离=开始的偏移距离+格数*px/格
        graduation_time = start_timestamp + ms_offset + i * ms_per_step; //时间=左侧开始时间+偏移时间+格数*ms/格
        var date = new Date(graduation_time);
        if ((graduation_time / (60 * 1000)) % medium_step == 0) {
          var middle_date = _this.graduation_title(date);
          _this.ctx.fillStyle = "#318ed4";
          _this.ctx.font = "14px Arial";
          _this.ctx.fillText(
            middle_date,
            i == 0 ? graduation_left : graduation_left - 17,
            35
          );
          _this.drawLine(
            graduation_left,
            50,
            graduation_left,
            60,
            "#318ed4",
            1
          );
        } else {
          _this.drawLine(
            graduation_left,
            55,
            graduation_left,
            60,
            "rgba(49,142,212,0.7)",
            1
          );
        }
      }
    },

    // 画刻度线
    drawLine: function (beginX, beginY, endX, endY, color, width) {
      this.ctx.beginPath();
      this.ctx.moveTo(beginX, beginY);
      this.ctx.lineTo(endX, endY);
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = width;
      this.ctx.stroke();
    },
    // 添加录像块
    // add_cells:function(cells){
    //     var _this = this;
    //     cells.forEach(cell => {
    //         _this.draw_cell(cell)
    //     });
    // },
    // 绘制录像块
    // draw_cell:function(cell){
    //     var _this = this;
    //     var px_per_ms = _this.canvasW / (_this.minute_per_ruler * 60 * 1000); // px/ms
    //     var beginX = (cell.beginTime - _this.start_timestamp) * px_per_ms;
    //     var cell_width = ( cell.endTime - cell.beginTime) * px_per_ms;
    //     _this.ctx.fillStyle = "#2d86cd";
    //     _this.ctx.fillRect(beginX,this.tiaoTop,cell_width,this.tiaoHeight);
    // },
    // 绘制下载录像块
    // draw_down:function(cell){
    //     var _this = this;
    //     var px_per_ms = _this.canvasW / (_this.minute_per_ruler *  60 * 1000); // px/ms
    //     var beginX = cell[0]>cell[1]?(cell[1]- _this.start_timestamp)* px_per_ms:(cell[0]- _this.start_timestamp)* px_per_ms;
    //     var cell_width = cell[0]>cell[1]?(cell[0]-cell[1])* px_per_ms:(cell[1]-cell[0])* px_per_ms;
    //     _this.ctx.fillStyle = "#ff0000";
    //     _this.ctx.fillRect(beginX,this.tiaoTop,cell_width,this.tiaoHeight);
    // },
    // 返回时间轴上刻度时间
    graduation_title: function (datetime) {
      return (
        (datetime.getHours() < 10
          ? "0" + datetime.getHours()
          : datetime.getHours()) +
        ":" +
        ("0" + datetime.getMinutes().toString()).substr(-2)
      );
    },
    // 开始时间  px
    ms_to_next_step: function (timestamp, step) {
      var remainder = timestamp % step;
      return remainder ? step - remainder : 0;
    },
    // 清除画布
    clearCanvas: function () {
      this.ctx && this.ctx.clearRect(0, 0, this.canvasW, this.canvasH);
    },
    // 获取鼠标x位置
    get_cursor_x_position: function (e) {
      var posx = 0;
      if (!e) {
        e = window.event;
      }
      if (e.pageX || e.pageY) {
        posx = e.pageX;
      } else if (e.clientX || e.clientY) {
        posx =
          e.clientX +
          document.body.scrollLeft +
          document.documentElement.scrollLeft;
      }
      return posx - 455; //调整鼠标误差值
    },
    // 返回时间日期格式
    changeTime: function (time) {
      var newTime = new Date(time);
      var year = newTime.getFullYear();
      var month = newTime.getMonth() + 1;
      if (month < 10) {
        var month = "0" + month;
      }
      var date = newTime.getDate();
      if (date < 10) {
        var date = "0" + date;
      }
      var hour = newTime.getHours();
      if (hour < 10) {
        var hour = "0" + hour;
      }
      var minute = newTime.getMinutes();
      if (minute < 10) {
        var minute = "0" + minute;
      }
      var second = newTime.getSeconds();
      if (second < 10) {
        var second = "0" + second;
      }
      // return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
      return hour + ":" + minute + ":" + second;
    },
    // 鼠标按下事件
    mousedownFunc: function (e) {
      if (e.button == 2) {
      } else {
        this.g_isMousedown = true;
      }
      this.g_mousedownCursor = this.get_cursor_x_position(e); //记住mousedown的位置
    },
    // 鼠标移动事件
    mousemoveFunc: function (e) {
      let _this = this;
      let pos_x = _this.get_cursor_x_position(e);
      let px_per_ms = _this.canvasW / (_this.minute_per_ruler * 60 * 1000); // px/ms
      _this.clearCanvas();
      if (_this.g_isMousedown) {
        var diff_x = pos_x - _this.g_mousedownCursor;
        _this.start_timestamp =
          _this.start_timestamp - Math.round(diff_x / px_per_ms);
        _this.initCanvas();
        _this.g_isMousemove = true;
        _this.g_mousedownCursor = pos_x;
        this.nowTime = this.changeTime(_this.start_timestamp + this.half_time);
      } else {
        var time = _this.start_timestamp + pos_x / px_per_ms;
        _this.initCanvas();
        _this.drawLine(pos_x, 30, pos_x, 60, "rgb(49,142,212)", 1);
        _this.ctx.fillStyle = "rgb(194, 202, 215)";
        _this.ctx.fillText(_this.changeTime(time), pos_x - 65, 35);
      }
    },
    //鼠标释放弹起事件
    mouseupFunc: function (e) {
      if (e.button == 2) {
        if (this.downTime.length == 2) {
          this.downLeft = this.g_mousedownCursor;
          this.showDown = true;
        }
      } else {
        this.g_isMousedown = false;
        this.g_isMousemove = false;
        let time = this.start_timestamp + this.half_time;
        this.$emit("setDragPlayTime", time);
      }
    },
    //鼠标移除隐藏时间事件
    mouseoutFunc: function (e) {
      this.clearCanvas();
      this.initCanvas();
    },
    contextMenuClick: function (e) {
      e.preventDefault();
      return;
      var _this = this;
      var pos_x = _this.get_cursor_x_position(e);
      var px_per_ms = _this.canvasW / (_this.minute_per_ruler * 60 * 1000); // px/ms
      var time = _this.start_timestamp + pos_x / px_per_ms;
      var flag = false;
      var index = 0;
      for (let i = 0; i < _this.timeCell.length; i++) {
        if (
          time >= _this.timeCell[i].beginTime &&
          time <= _this.timeCell[i].endTime
        ) {
          flag = true;
          index = i;
        }
      }
      if (flag) {
        if (_this.downTime.length < 2) {
          _this.downTime.push(time);
          if (_this.downTime.length == 2) {
            _this.clearCanvas();
            _this.initCanvas();
          }
        } else if (_this.downTime.length == 2) {
          // console.log(_this.downTime);
        }
      }
    },
    downCLickBack() {
      if (this.downTime.length == 2) {
        this.downTime.sort(function (a, b) {
          return a - b;
        });
        var userData = this.$store.getters.replayDownVideo.length + 1;
        var startTime1 =
          this.downTime[0] < this.downTime[1]
            ? this.downTime[0]
            : this.downTime[1];
        var startTime = this.changeTime(startTime1);
        var endTime1 =
          this.downTime[0] >= this.downTime[1]
            ? this.downTime[0]
            : this.downTime[1];
        var endTime = this.changeTime(endTime1);
        var fileName = new Date().getTime() + ".mp4";
        var server = this.$store.getters.serverConfig;
        var alltime = Math.ceil((endTime1 - startTime1) / 1000);
        var obj = {
          fileName: fileName,
          startTime: startTime,
          endTime: endTime,
          allTime: alltime,
          progress: "0%",
          userDate: userData,
          downType: 0,
        };
        var s_index = 0,
          e_index = 0;
        for (var i = 0; i < this.timeCell.length; i++) {
          if (
            this.downTime[0] >= this.timeCell[i].beginTime &&
            this.downTime[0] <= this.timeCell[i].endTime
          ) {
            s_index = i;
          }
          if (
            this.downTime[1] >= this.timeCell[i].beginTime &&
            this.downTime[1] <= this.timeCell[i].endTime
          ) {
            e_index = i;
          }
        }
        var fileArr = new Array();
        for (var j = s_index; j <= e_index; j++) {
          fileArr.push(this.videoData.videoList[j]);
        }
        var filesJson = JSON.stringify(fileArr);
        this.downTime.splice(0, this.downTime.length);

        var ss = document
          .getElementById("videoOcx")
          .StartDownloadVodFile(
            server.ServerIP,
            server.ServerPort,
            filesJson,
            fileName,
            startTime,
            endTime,
            userData
          );
        this.$store.commit("addDownLoadVideo", obj);
        this.showDown = false;
      }
    },
    cancelDownClick() {
      this.downTime.splice(0, this.downTime.length);
      this.showDown = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.progress-box-bar {
  position: relative;
  width: 100%;
  height: 100%;
}
.progress-box-bar canvas {
  width: 100%;
  cursor: pointer;
}
.progress-box-bar .downVideo {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 300px;
}
.progress-box-bar .downVideo ul {
  background-color: #fff;
}
.progress-box-bar .downVideo ul li {
  line-height: 20px;
  font-size: 12px;
  cursor: pointer;
}
.progress-box-bar .downVideo ul li:hover {
  background-color: #318ed4;
}
.bar-container {
  width: 100%;
  height: 20px;
  background-color: #eaeaea;
  position: relative;
  display: flex;
  .bar1 {
    height: 100%;
    // position: absolute;
    // top: 0;
    // left: 0;
    // background: green;
    z-index: 2;
  }
}
.bar-container1 {
  width: 100%;
  height: 20px;
  background-color: #eaeaea;
  position: relative;
  top: 20px;
  display: flex;
  .bar2 {
    height: 20px;
    // position: absolute;
    // top: 0;
    // left: 0;
    // background: rgb(0, 178, 255);
    z-index: 1;
  }
}
</style>