| 
					
				 | 
			
			
				@@ -1,375 +0,0 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<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> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</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 = "#ccc"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            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(var 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 (var 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,75); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    _this.drawLine(graduation_left,50,graduation_left,60,"#318ed4",1); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                }else{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    _this.drawLine(graduation_left,55,graduation_left,60,"rgba(250,250,250,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-355;//调整鼠标误差值 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        // 返回时间日期格式 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        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 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; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</style> 
			 |