录像诊断缺陷

src/views/iot/videoDiagnosis/Calendar.vue

@@ -94,7 +94,7 @@ export default {
       isRequired: true,
     },
     endDate: {
-      type:Date,
+      type:[Date,String],
       default: () => {
         return new Date();
       },

src/views/iot/videoDiagnosis/ProgressBar.vue

@@ -25,6 +25,10 @@
         :key="sec.key"
         :style="`width:${sec.width}%;background-color:${sec.color}`"
       ></div>
+      <div class="bar1" v-for="np in planVideo.filter(p=>p.noPlan===true)" 
+        :key="np.key"
+        :style="`width:${np.width}%;background-color:${np.color};left:${np.left}%;position:${'absolute'};`"
+        ></div>
     </div>
   </div>
 </template>
@@ -79,7 +83,7 @@ export default {
           this.minute_per_ruler =
             (this.end_timestamp - this.start_timestamp) / (60 * 1000);
           let prevEnd = this.start_timestamp;
-
+          let totalPercent=0;
           for (tc of this.timeCell) {
             let beginstamp = new Date(tc.beginTime).getTime();
 
@@ -89,10 +93,13 @@ export default {
               this.planVideo.push({
                 key: prevEnd,
                 width: percent * 100,
-                color: "transparent",
+                color: "#eaeaea",
+                noPlan:true,
+                left:  totalPercent*100           
               });
+              totalPercent+=percent;
             }
-
+                       
             let endStamp = new Date(tc.endTime).getTime();
             let percent =
               (endStamp - beginstamp) / 60 / 1000 / this.minute_per_ruler;
@@ -101,7 +108,7 @@ export default {
               width: percent * 100,
               color: "rgb(0, 178, 255)",
             });
-
+            totalPercent+=percent;
             prevEnd = endStamp;
           }
 
@@ -579,7 +586,7 @@ export default {
 .bar-container1 {
   width: 100%;
   height: 20px;
-  background-color: #eaeaea;
+  background-color: #aaa;
   position: relative;
   top: 20px;
   display: flex;

src/views/iot/videoDiagnosis/detail.vue

@@ -77,7 +77,7 @@
             <div class="calendar-box">
               <Calendar
                 :startDate="calenderStartDate"
-                :endDate="new Date(dayjs().add(-1, 'day').startOf('day'))"
+                :endDate="data.storage.lastTime"
                 :full="data.storage.fullDates"
                 :paritialLoss="data.storage.partialLossDates"
                 :allLoss="data.storage.allLostDates"
@@ -126,7 +126,7 @@
                     <span>计划时长</span>
                   </li>
                   <li>
-                    <i class="legend" style="background-color: #aaa"></i>
+                    <i class="legend" style="background-color: #eaeaea"></i>
                     <span>未计划时长</span>
                   </li>
                   <li>
@@ -386,7 +386,7 @@ export default {
       this.getIntegrity(this.data.hostCode, this.data.channelCode, date);
     },
     lostDurationText(duration) {
-      if (!duration) {
+      if (!duration || duration=='0') {
         return "未丢失";
       }
 

src/views/iot/videoDiagnosis/index.vue

@@ -114,7 +114,7 @@
         v-loading="loading"
         :data="dataList"
         border
-        height="646"
+        height="600"
         size="small"
       >
         <el-table-column label="序号" type="index" align="center" width="70">
@@ -173,11 +173,7 @@
         >
           <template slot-scope="r">
             {{
-              r.row.loseDuration == null
-                ? "未知"
-                : r.row.loseDuration
-                ? r.row.loseDuration + "分钟"
-                : "未丢失"
+              lostDurationText( r.row.loseDuration)
             }}
           </template>
         </el-table-column>
@@ -337,6 +333,24 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    lostDurationText(duration) {
+      if (!duration || duration=='0') {
+        return "未丢失";
+      }
+
+      let str = "";
+      let hour = Math.floor(duration / 60);
+      if (hour > 0) {
+        str += `${hour}小时`;
+      }
+
+      let minute = duration % 60;
+      if (minute > 0) {
+        str += `${minute}分`;
+      }
+
+      return str;
+    },
   },
 };
 </script>

src/views/iot/videoRecorder/detail.dialog.vue

@@ -38,7 +38,7 @@
           >
             <div>
               <span class="progressName"
-                >{{ disk.diskName }}                
+                >硬盘{{ disk.diskIndex }}                
                 <el-tag  v-if ="disk.state == 0" type="success">状态：正常</el-tag>
                 <el-tag  v-else-if ="disk.state == 1" type="danger">状态：异常</el-tag>
                 <el-tag  v-else type="info">状态：未知</el-tag>