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

<template>
    <div class="progress-box-bar" ref="progressbar">
        <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"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
    </div>
</template>

<script>
export default {
    name:"ProgressBar",
    props:["timeCell","startTime","videoData"],
    data(){
        return{
            canvas:"",
            ctx:"",
            canvasW:"",
            canvasH:"",
            nowTime:"",
            hours_per_ruler:24,    //时间轴显示12小时
            half_time:5*60*60*1000,
            graduation_step:20,     //刻度间最小宽度，单位px
            start_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(){
            if(this.timeCell.length>0){
                this.nowTime = this.changeTime(new Date(this.timeCell[0].beginTime).getTime());
                this.start_timestamp = new Date(this.timeCell[0].beginTime).getTime()- this.half_time;
                this.clearCanvas();
                this.initCanvas();
            }
        },
        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.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.hours_per_ruler * 60); // px/min
            var px_per_ms = _this.canvasW / (_this.hours_per_ruler * 60 * 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;
                }
            }
            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,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.hours_per_ruler * 60 * 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.hours_per_ruler * 60 * 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.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;
        },
        // 鼠标按下事件
        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.hours_per_ruler * 60 * 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.hours_per_ruler * 60 * 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;
      .bar1{
        width: 80%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        background: green;
        z-index:2;
      }
      .bar2{
        width: 93%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        background: rgb(0, 178, 255);
        z-index:1;
      }
      .bar3{
        width: 10%;
        height: 100%;
        position: absolute;
        top:0;
        left: 30%;
        background: red;
        z-index:3;
      }
    }
</style>