|
|
@@ -1,422 +1,567 @@
|
|
|
<template>
|
|
|
- <div class="progress-box-bar" ref="progressbar">
|
|
|
- <div class="bar-container1">
|
|
|
- <div class="bar2"></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"></div>
|
|
|
- <div class="bar3"></div>
|
|
|
- </div>
|
|
|
+ <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","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,
|
|
|
+ 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;
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ for (tc of this.timeCell) {
|
|
|
+ let beginstamp = new Date(tc.beginTime).getTime();
|
|
|
|
|
|
- // 画刻度线
|
|
|
- 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 (prevEnd != beginstamp) {
|
|
|
+ let percent =
|
|
|
+ (beginstamp - prevEnd) / 60 / 1000 / this.minute_per_ruler;
|
|
|
+ this.planVideo.push({
|
|
|
+ key: prevEnd,
|
|
|
+ width: percent * 100,
|
|
|
+ color: "transparent",
|
|
|
+ });
|
|
|
}
|
|
|
- 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的位置
|
|
|
+ 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)",
|
|
|
+ });
|
|
|
|
|
|
- },
|
|
|
- // 鼠标移动事件
|
|
|
- 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);
|
|
|
- }
|
|
|
+ prevEnd = endStamp;
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- //鼠标移除隐藏时间事件
|
|
|
- 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);
|
|
|
+ this.clearCanvas();
|
|
|
+ this.initCanvas();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lostData: {
|
|
|
+ immediate: true,
|
|
|
+ handler: function () {
|
|
|
+ let lostVideo = [];
|
|
|
+ if (this.lostData && this.lostData.length > 0) {
|
|
|
+ let prevEnd = this.start_timestamp;
|
|
|
+ for (let tc of this.lostData) {
|
|
|
+ let beginstamp = new Date(tc.beginTime).getTime();
|
|
|
|
|
|
- var ss = document.getElementById("videoOcx").StartDownloadVodFile(server.ServerIP,server.ServerPort,filesJson,fileName,startTime,endTime,userData);
|
|
|
- this.$store.commit("addDownLoadVideo",obj);
|
|
|
- this.showDown = false;
|
|
|
+ if (prevEnd != beginstamp) {
|
|
|
+ let percent =
|
|
|
+ (beginstamp - prevEnd) / 60 / 1000 / this.minute_per_ruler;
|
|
|
+ lostVideo.push({
|
|
|
+ key: prevEnd,
|
|
|
+ width: percent * 100,
|
|
|
+ color: "green",
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- },
|
|
|
- cancelDownClick(){
|
|
|
- this.downTime.splice(0,this.downTime.length);
|
|
|
- this.showDown = false;
|
|
|
+ let endStamp = new Date(tc.endTime).getTime();
|
|
|
+ let percent =
|
|
|
+ (endStamp - beginstamp) / 60 / 1000 / this.minute_per_ruler;
|
|
|
+ lostVideo.push({
|
|
|
+ key: beginstamp,
|
|
|
+ width: percent * 100,
|
|
|
+ color: "red",
|
|
|
+ });
|
|
|
+
|
|
|
+ prevEnd = endStamp;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-</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;
|
|
|
+ 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.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- }
|
|
|
- .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;
|
|
|
+ // 画刻度线
|
|
|
+ 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.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;
|
|
|
}
|
|
|
- .bar3{
|
|
|
- width: 15%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- left: 35%;
|
|
|
- background: red;
|
|
|
- z-index:3;
|
|
|
+ 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;
|
|
|
}
|
|
|
- }
|
|
|
- .bar-container1{
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- background-color: #eaeaea;
|
|
|
- position: relative;
|
|
|
- top:20px;
|
|
|
- .bar2{
|
|
|
- width: 80%;
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- left: 0;
|
|
|
- background: rgb(0, 178, 255);
|
|
|
- z-index:1;
|
|
|
+ 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>
|
wubiyu