录像诊断调试

src/api/iot/videoDiagnosis.js

@@ -1,19 +1,18 @@
-import request from '@/utils/request'
-
+import request from "@/utils/request";
 
 // 查询列表
 export function list(query) {
-    return request({
-      url: '/iot/VideoDiagnosis/web/page',
-      method: 'post',
-      data: query
-    })
-  }
+  return request({
+    url: "/iot/VideoDiagnosis/web/page",
+    method: "post",
+    data: query,
+  });
+}
 
-  // 查询详情
-export function detail(hostCode,channelCode) {
-    return request({
-      url: `/iot/VideoDiagnosis/web/detail/${hostCode}/${channelCode}`,
-      method: 'get',
-    })
-  }
+// 查询详情
+export function detail(hostCode, channelCode) {
+  return request({
+    url: `/iot/VideoDiagnosis/web/detail/${hostCode}/${channelCode}`,
+    method: "get",
+  });
+}

src/views/iot/videoDiagnosis/Calendar.vue

@@ -1,15 +1,19 @@
 <template>
-  <v-calendar
-    ref="calendar"
-    :columns="layout.columns"
-    :rows="layout.rows"
-    :is-expanded="layout.isExpanded"
-    :attributes="attrs"
-    :min-date='start'
-    :max-date='new Date()'
-  />
+  <div :style="calendarWidth">
+    <v-calendar
+      ref="calendar"
+      :columns="layout.columns"
+      :rows="layout.rows"
+      :is-expanded="layout.isExpanded"
+      :attributes="attrs"
+      :min-date="startDate ? new Date(startDate) : new Date()"
+      :max-date="new Date()"
+    />
+  </div>
 </template>
 <script>
+import dayjs from "dayjs";
+
 export default {
   name: "Calendar",
   data() {
@@ -17,170 +21,135 @@ export default {
       layout: {
         columns: 3,
         rows: 2,
-        isExpanded: true
+        isExpanded: true,
       },
       attrs: [
         {
           highlight: {
             start: {
-              fillMode: 'outline'
+              fillMode: "outline",
             },
             base: {
-              color: 'gray',
-              fillMode: 'light'
+              color: "gray",
+              fillMode: "light",
             },
             end: {
-              fillMode: 'outline'
+              fillMode: "outline",
             },
           },
-          dates: { start:this.start , end:new Date() },
+          dates: { start: this.startDate?new Date(this.startDate):new Date(), end: new Date() }, 
         },
         {
-          dot:{
-            color:'green',
-            style:{
-              width:'16px',
-              height:'3px',
-              borderRadius:'0'
+          dot: {
+            color: "green",
+            style: {
+              width: "16px",
+              height: "3px",
+              borderRadius: "0",
             },
-            contentClass:'italic',
+            contentClass: "italic",
           },
-          dates:full,
+          dates: this.full,
         },
         {
-          dot:{
-            color:'yellow',
-            style:{
-              backgroundColor:'orange',
-              width:'16px',
-              height:'3px',
-              borderRadius:'0'
+          dot: {
+            color: "yellow",
+            style: {
+              backgroundColor: "orange",
+              width: "16px",
+              height: "3px",
+              borderRadius: "0",
             },
-            contentClass:'italic',
+            contentClass: "italic",
           },
-          dates: paritialLoss,
+          dates: this.paritialLoss,
         },
         {
-          dot:{
-            color:'red',
-            style:{
-              width:'16px',
-              height:'3px',
-              borderRadius:'0'
+          dot: {
+            color: "red",
+            style: {
+              width: "16px",
+              height: "3px",
+              borderRadius: "0",
             },
-            contentClass:'italic',
+            contentClass: "italic",
           },
-          dates: allLoss,
-        },        
+          dates: this.allLoss,
+        },
       ],
     };
   },
-  props:{
-    startDate:{
-      isRequired:true,
+  props: {
+    startDate: {
+      isRequired: true,
+    },
+    endDate: {
+      default: () => {
+        return new Date();
+      },
+    },
+    full: {
+      isRequired: true,
+      type: Array,
     },
-    endDate:{
-      default:new Date()
+    paritialLoss: {
+      isRequired: true,
+      type: Array,
     },
-    full:{
-      isRequired:true,
-      type:Array,
+    allLoss: {
+      isRequired: true,
+      type: Array,
     },
-    paritialLoss:{
-      isRequired:true,
-      type:Array,
+  },
+  computed: {
+    calendarWidth() {
+      if (this.layout.columns === 0) {
+        return "display:none";
+      } else if (this.layout.columns === 1) {
+        return "width:33.3%";
+      } else if (this.layout.columns === 1) {
+        return "width:66.6%";
+      } else {
+        return "";
+      }
     },
-    allLoss:{
-      isRequired:true,
-      type:Array,
-    }
-    
   },
-  mounted(){
-     this.init();
+  watch: {
+    startDate: {
+      immediate: true,
+      handler: function (v) {
+        this.setLayout(v);
+      },
+    },
   },
-  methods:{
-    init(){
-      this.setLayout();
-      const calendar = this.$refs.calendar;
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      // this.setLayout();
+      // const calendar = this.$refs.calendar;
       // setTimeout(() => {
       //   calendar.move({ month: 1, year: 1983 });
       // }, 3000);
       //calendar.move({ month: 1, year: 1983 });
       //this.setOps();
     },
-    setLayout() {
-      this.layout = {
-        columns: 3,
-        rows: 1,
-        isExpanded: true
-      };
-    },
-    setOps(){
-      this.attrs = [
-        {
-          highlight: {
-            color: 'green',
-            fillMode: 'solid',
-            contentClass: 'italic',
-          },
-          dates: new Date(),
-        },
-        {
-          // highlight: {
-          //   color: 'green',
-          //   fillMode: 'solid',
-          //   contentClass: 'italic',
-          // },
-          dot:'yellow',
-          dates: '2024-01-30',
-        },
-        {
-          highlight: {
-            color: 'yellow',
-            fillMode: 'solid',
-            contentClass: 'italic',
-          },
-          dates: '2024-01-31',
-        },
-        {
-          highlight: {
-            color: 'red',
-            fillMode: 'solid',
-            contentClass: 'italic',
-          },
-          dates: '2024-02-01',
-        },
-        {
-          highlight: {
-            color: 'yellow',
-            fillMode: 'solid',
-            contentClass: 'italic',
-          },
-          dates: '2024-02-02',
-        },
-        {
-          highlight: {
-            color: 'green',
-            fillMode: 'solid',
-            contentClass: 'italic',
-          },
-          dates: '2024-02-03',
-        },
-        {
-          highlight: {
-            color: 'green',
-            fillMode: 'solid',
-            contentClass: 'italic',
-          },
-          dates: '2024-02-04',
-        },
-      ];
+    setLayout(startDate) {
+      if (startDate != null) {
+        let diff = Math.ceil(
+          dayjs(new Date()).diff(new Date(startDate), "months", true)
+        );
+        if (diff >= 3) {
+          this.layout.columns = 3;
+        } else {
+          this.layout.columns = diff;
+        }
 
+        this.layout.rows = Math.ceil(diff / 3);
+      }
     },
-  }
-}
+  },
+};
 </script>
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

src/views/iot/videoDiagnosis/ProgressBar.vue

@@ -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>

src/views/iot/videoDiagnosis/detail.vue

@@ -6,7 +6,13 @@
       width="1200px"
       :destroy-on-close="true"
     >
-      <el-descriptions title="基础信息" :column="3">
+      <el-descriptions
+        title="基础信息"
+        :column="3"
+        border
+        :label-style="labelStyle"
+        :contentStyle="content_style"
+      >
         <el-descriptions-item label="通道名称">{{
           data.channelName
         }}</el-descriptions-item>
@@ -29,36 +35,43 @@
       <el-descriptions
         title="录像质量"
         :column="3"
-        v-if="data.quality == null || data.quality.state == null"
+        border
+        :label-style="labelStyle"
+        :contentStyle="content_style"
+        v-if="data.quality == null || data.quality.quality == null"
       >
         <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
       </el-descriptions>
       <div v-else>
-        <el-descriptions title="录像质量" :column="3">
+        <el-descriptions
+          title="录像质量"
+          :column="2"
+          border
+          :label-style="labelStyle"
+          :contentStyle="content_style"
+        >
           <el-descriptions-item label="检测结果">{{
-           getLabel(this.videoDiagnosisState,data.quality.state) 
+            getLabel(videoDiagnosisState, data.quality.quality)
           }}</el-descriptions-item>
           <el-descriptions-item label="更新时间">{{
             dayjs(data.quality.updateTime).format("YYYY年M月D日H时m分")
           }}</el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions :column="1" v-if="data.quality.quality == 1">
-          <el-descriptions-item label="诊断截图">
+          <el-descriptions-item
+            label="诊断截图"
+            v-if="data.quality.quality == 1"
+          >
             <div>
-              <ul class="legend-box">
+              <ul class="legend-box legend-box-quality">
                 <li>
                   <el-tag
                     size="small"
-                    type="warning"
+                    type="danger"
                     v-if="data.quality.signalLost"
                     >视频信号</el-tag
                   >
                 </li>
                 <li>
-                  <el-tag
-                    size="small"
-                    type="warning"
-                    v-if="data.quality.occlude"
+                  <el-tag size="small" type="danger" v-if="data.quality.occlude"
                     >遮挡</el-tag
                   >
                 </li>
@@ -113,7 +126,6 @@
                   margin-top: 20px;
                 "
               >
-                -->
                 <el-image
                   :src="data.quality.image"
                   :preview-src-list="[data.quality.image]"
@@ -131,14 +143,23 @@
       <el-descriptions
         title="录像完整性"
         :column="3"
+        border
+        :label-style="labelStyle"
+        :contentStyle="content_style"
         v-if="data.integrity == null || data.integrity.state == null"
       >
         <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
       </el-descriptions>
       <div v-else>
-        <el-descriptions title="录像完整性" :column="3">
+        <el-descriptions
+          title="录像完整性"
+          :column="3"
+          border
+          :label-style="labelStyle"
+          :contentStyle="content_style"
+        >
           <el-descriptions-item label="检测结果">{{
-            getLabel(this.videoIntegrityState,data.integrity.state)
+            getLabel(videoIntegrityState, data.integrity.state)
           }}</el-descriptions-item>
           <el-descriptions-item label="录像日期">{{
             dayjs(data.integrity.recordDate).format("YYYY年M月D日")
@@ -161,6 +182,10 @@
                 <span>计划时长</span>
               </li>
               <li>
+                <i class="legend" style="background-color: #aaa"></i>
+                <span>未计划时长</span>
+              </li>
+              <li>
                 <i class="legend" style="background-color: green"></i>
                 <span>有录像</span>
               </li>
@@ -168,10 +193,7 @@
                 <i class="legend" style="background-color: red"></i>
                 <span>无录像</span>
               </li>
-              <li>
-                <i class="legend" style="background-color: #aaa"></i>
-                <span>未知</span>
-              </li>
+              
             </ul>
           </el-descriptions-item>
         </el-descriptions>
@@ -180,11 +202,10 @@
           <!--        <div style="width: 100%;height: 20px;background-color: red; "></div>-->
           <progress-bar
             :timeCell="timeCells"
-            :videoData="playVideoObj"
-            :startTime="start_timestamp"
+            :lostData="lostData"
           ></progress-bar>
         </div>
-        <div class="time-line">
+        <!-- <div class="time-line">
           <el-timeline :reverse="false">
             <el-timeline-item
               v-for="(activity, index) in data.loseDateList"
@@ -199,7 +220,6 @@
                     {{ activity.month }}
                   </span>
                 </div>
-                <!-- <div class="day">{{ activity.time.substring(0, 4) }}年</div> -->
               </div>
               <div class="ml10">
                 <el-tag
@@ -214,26 +234,35 @@
               </div>
             </el-timeline-item>
           </el-timeline>
-        </div>
+        </div> -->
       </div>
       <el-descriptions
         title="录像存储"
         :column="3"
+        border
+        :label-style="labelStyle"
+        :contentStyle="content_style"
         v-if="data.storage == null || data.storage.planDays == null"
       >
         <el-descriptions-item label="存储状态"> 未知 </el-descriptions-item>
       </el-descriptions>
       <div v-else>
-        <el-descriptions title="录像存储" :column="3">
+        <el-descriptions
+          title="录像存储"
+          :column="3"
+          border
+          :label-style="labelStyle"
+          :contentStyle="content_style"
+        >
           <el-descriptions-item label="计划存储"
             >{{ data.storage.planDays }}天</el-descriptions-item
           >
           <el-descriptions-item label="实际存储"
             >{{ data.storage.realDays }}天</el-descriptions-item
           >
-          <el-descriptions-item label="最早录像存储日期"
-            >dayjs(data.storage.earliestTime).format("YYYY年M月D日")</el-descriptions-item
-          >
+          <el-descriptions-item label="最早录像存储日期">{{
+            dayjs(data.storage.earliestTime).format("YYYY年M月D日")
+          }}</el-descriptions-item>
         </el-descriptions>
         <el-descriptions :column="1">
           <el-descriptions-item label="存储状态">
@@ -290,22 +319,55 @@ export default {
       isShow: false,
       data: {},
       id: null,
-      playVideoObj: {}, //选中的正在播放的录像
+      // playVideoObj: {}, //选中的正在播放的录像
       timeCells: [], //录像时间块
-      start_timestamp: new Date().getTime() - 5 * 60 * 60 * 1000, //刻度轴开始时间
+      lostData:[], //不存在视频的时间块
+      // start_timestamp: new Date().getTime() - 5 * 60 * 60 * 1000, //刻度轴开始时间
+      labelStyle: {
+        color: "#000",
+        "text-align": "center",
+        height: "40px",
+        width: "120px",
+        "word-break": "keep-all",
+      },
+      content_style: {
+        "text-align": "left",
+        "min-width": "250px",
+        "word-break": "break-all",
+      },
     };
   },
-  props:{
-    videoIntegrityState,
-    videoDaysState,
-    videoDiagnosisState
-  },
+  props: ["videoIntegrityState", "videoDaysState", "videoDiagnosisState"],
   methods: {
     dayjs,
     getLabel,
     async show(hostCode, channelCode) {
-      this.data = await detail(hostCode, channelCode);
-      this.isShow = true;
+      detail(hostCode, channelCode).then((r) => {
+        let data = r.data;
+
+        // this.data.storage.fullDates=["2024-02-15","2024-02-16","2024-02-17","2024-02-18","2024-02-19"]
+        // this.data.storage.partialLossDates=["2024-02-5","2024-02-6","2024-02-7","2024-02-8","2024-02-9"]
+        // this.data.storage.allLostDates=["2024-02-10","2024-02-11","2024-02-12","2024-02-13","2024-02-14"]
+        if (data.integrity && data.integrity.recordDate) {
+          let recordDateStr = dayjs(data.integrity.recordDate).format(
+            "YYYY-MM-DD"
+          );
+          if (data.integrity.checks) {
+            this.timeCells = data.integrity.checks.map(
+              (d) =>({beginTime: `${recordDateStr} ${d.st}`,endTime: `${recordDateStr} ${d.et}`})
+            );
+          }
+
+          if (data.integrity.losts) {
+            this.lostData = data.integrity.losts.map(
+              (d) =>({beginTime: `${recordDateStr} ${d.st}`,endTime: `${recordDateStr} ${d.et}`})
+            );
+          }
+        }
+
+        this.data = data;
+        this.isShow = true;
+      });
     },
     onHide() {
       this.isShow = false;
@@ -404,6 +466,12 @@ export default {
       }
     }
   }
+
+  .legend-box-quality {
+    > li {
+      margin-right: 5px;
+    }
+  }
   .time-line-box {
     width: 100%;
     padding: 0 80px 50px 80px;

src/views/iot/videoDiagnosis/index.vue

@@ -18,13 +18,13 @@
               ref="orgTree"
             ></org-tree>
           </el-form-item>
-          <el-form-item label="监控主机" prop="hostName">
+          <!-- <el-form-item label="监控主机" prop="hostName">
             <el-input
               v-model="queryParams.hostName"
               clearable
               placeholder="请输入监控主机名称"
             />
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item label="摄像头" prop="channelName">
             <el-input
               v-model="queryParams.channelName"
@@ -134,7 +134,13 @@
           width="200"
         ></el-table-column>
         <!--        <el-table-column :show-overflow-tooltip="true" align="center" label="设备名称" prop="reasons"/>-->
-        <el-table-column
+        <!-- <el-table-column
+          :show-overflow-tooltip="true"
+          align="center"
+          label="主机名称"
+          prop="hostName"
+        ></el-table-column> -->
+         <el-table-column
           :show-overflow-tooltip="true"
           align="center"
           label="通道名称"
@@ -149,36 +155,75 @@
           align="center"
           label="录像丢失时长"
           prop="loseDuration"
-        ></el-table-column>
+          width="120"
+        >
+          <template slot-scope="r">
+            {{
+              r.row.loseDuration == null
+                ? "未知"
+                : r.row.loseDuration
+                ? r.row.loseDuration + "分钟"
+                : "未丢失"
+            }}
+          </template>
+        </el-table-column>
         <el-table-column
           align="center"
           label="实际/计划存储(天)"
           prop="planDays"
+          width="180"
         >
-          <template slot="r">
-            {{ r.row.realDays }}/{{ r.row.planDays }}
+          <template slot-scope="r">
+            {{
+              r.row.planDays == null
+                ? "未知"
+                : `${r.row.realDays}/${r.row.planDays}`
+            }}
           </template>
         </el-table-column>
         <el-table-column
           align="center"
           label="无视频信号"
           prop="signalLost"
-        ></el-table-column>
+          width="120"
+        >
+          <template slot-scope="r">
+            {{
+              getLabel(
+                dict.type.video_diagnosis_state,
+                r.row.signalLost,
+                "未知"
+              )
+            }}
+          </template>
+        </el-table-column>
         <el-table-column
           align="center"
           label="视频遮挡"
           prop="occlude"
-        ></el-table-column>
+          width="120"
+          ><template slot-scope="r">
+            {{
+              getLabel(dict.type.video_diagnosis_state, r.row.occlude, "未知")
+            }}
+          </template></el-table-column
+        >
         <el-table-column
           align="center"
           label="视频质量"
           prop="quality"
-        ></el-table-column>
+          width="120"
+          ><template slot-scope="r">
+            {{
+              getLabel(dict.type.video_diagnosis_state, r.row.quality, "未知")
+            }}
+          </template></el-table-column
+        >
         <el-table-column label="操作" align="center" width="120">
           <template slot-scope="r">
             <el-button
               type="text"
-              @click="openDetail(r.row.hostCode, r.row.channelC)"
+              @click="openDetail(r.row.hostCode, r.row.channelCode)"
               >详情</el-button
             >
           </template>
@@ -209,6 +254,8 @@ import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import dayjs from "dayjs";
 import detail from "./detail.vue";
 import { list } from "@/api/iot/videoDiagnosis.js";
+import { getLabel } from "@/views/commonOption.js";
+
 export default {
   components: { detail, OrgTree },
   dicts: ["video_integrity_state", "video_days_state", "video_diagnosis_state"],
@@ -229,17 +276,16 @@ export default {
         integrityState: null,
         daysState: null,
         diagnosisState: null,
-        orgId: this.$store.getters.orgId,
-        checkSub: false,
+        orgId: null,
+        checkSub: true,
       },
       dataList: [],
     };
   },
-  mounted() {
-    this.getList();
-  },
+  mounted() {},
   methods: {
     dayjs,
+    getLabel,
     openDetail(hostCode, channelCode) {
       this.$refs.DialogDetail.show(hostCode, channelCode);
     },

src/views/iot/videoRecorder/index.vue

@@ -65,7 +65,7 @@
                 </el-button>
               </el-col>
 
-              <el-col :span="1.5">
+              <!-- <el-col :span="1.5">
                 <el-button
                   type="primary"
                   icon="el-icon-download"
@@ -74,7 +74,7 @@
                   v-hasPermi="['core:task:export']"
                   >导出</el-button
                 >
-              </el-col>
+              </el-col> -->
               <el-col :span="19">
                 <div class="numCls">
                   <div>监控主机总数:{{ dvrdiskStatistic.dvrTotal }}</div>
@@ -246,13 +246,12 @@ export default {
       form: {},
       // 表单校验
       rules: {},
-
-      orgName: "",
+      defaultOrgName:null,
     };
   },
   created() {},
   computed: {
-    ...mapGetters(["orgId", "userId", "orgName"]),
+    ...mapGetters(["orgId", "userId","orgName"]),
   },
   methods: {
     getLabel,
@@ -274,7 +273,7 @@ export default {
     resetQuery() {
       this.resetForm("queryForm");
       this.queryParams.orgId = this.orgId;
-      this.selectedOrgName = this.orgName;
+      this.selectedOrgName = this.defaultOrgName;
       this.queryParams.checkSub = true;
       // this.queryParams.dateRange = ["", ""];
       // this.queryParams.planStartTime = null;
@@ -293,7 +292,7 @@ export default {
     },
 
     getDefaultOrg(org) {
-      this.orgName = org.name;
+      this.defaultOrgName=org.shortName
       this.selectedOrgName = org.shortName;
     },
 
@@ -310,7 +309,6 @@ export default {
     // 节点单击事件
     clickTreeNode(data) {
       this.queryParams.orgId = data.id;
-      this.orgName = data.name;
       this.selectedOrgName = data.shortName;
       this.handleQuery();
       this.getDvrdiskStatistic();