录像诊断缺陷

src/views/iot/videoDiagnosis/Calendar.vue

@@ -7,7 +7,7 @@
       :is-expanded="layout.isExpanded"
       :attributes="attrs"
       :min-date="startDate ? new Date(startDate) : new Date()"
-      :max-date="new Date()"    
+      :max-date="endDate"    
       v-model="selectedDate"
       @dayclick="onSelect"
 
@@ -22,10 +22,11 @@ export default {
   name: "Calendar",
    components:{VCalender},
   data() {
+    
     return {
       selectedDate:this.defaultSelectedDate,
       layout: {
-        columns: 3,
+        columns: 4,
         rows: 2,
         isExpanded: true,
       },
@@ -43,7 +44,7 @@ export default {
               fillMode: "outline",
             },
           },
-          dates: { start: this.startDate?new Date(this.startDate):new Date(), end: new Date() }, 
+          dates: { start: this.startDate?new Date(this.startDate):new Date(), end: this.endDate }, 
         },
         {
           highlight: {
@@ -93,6 +94,7 @@ export default {
       isRequired: true,
     },
     endDate: {
+      type:Date,
       default: () => {
         return new Date();
       },
@@ -132,7 +134,13 @@ export default {
       handler: function (v) {
         this.setLayout(v);
       },
-    },    
+    },  
+    endDate: {
+      immediate: true,
+      handler: function (v) {
+        this.attrs[0].dates.end=v;
+      },
+    },  
   },
   mounted() {
     this.init();
@@ -152,13 +160,13 @@ export default {
         let diff = Math.ceil(
           dayjs(new Date()).diff(new Date(startDate), "months", true)
         );
-        if (diff >= 3) {
-          this.layout.columns = 3;
+        if (diff >= 4) {
+          this.layout.columns = 4;
         } else {
           this.layout.columns = diff;
         }
 
-        this.layout.rows = Math.ceil(diff / 3);
+        this.layout.rows = Math.ceil(diff / 4);
       }
     },
     onSelect(data){

src/views/iot/videoDiagnosis/detail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="videoDaysDetail">
-    <DialogCom title="录像详情" :visible.sync="isShow" width="1200px">
+    <DialogCom title="录像详情" :visible.sync="isShow" width="1100px">
       <el-descriptions
         title="基础信息"
         :column="2"
@@ -45,7 +45,9 @@
                 >{{ data.storage.realDays }}天</el-descriptions-item
               >
               <el-descriptions-item label="最早录像存储日期">{{
-                dayjs(data.storage.earliestTime).format("YYYY年M月D日")
+                data.storage.earliestTime
+                  ? dayjs(data.storage.earliestTime).format("YYYY年M月D日")
+                  : ""
               }}</el-descriptions-item>
             </el-descriptions>
             <el-descriptions :column="1">
@@ -74,7 +76,8 @@
 
             <div class="calendar-box">
               <Calendar
-                :startDate="data.storage.earliestTime"
+                :startDate="calenderStartDate"
+                :endDate="new Date(dayjs().add(-1, 'day').startOf('day'))"
                 :full="data.storage.fullDates"
                 :paritialLoss="data.storage.partialLossDates"
                 :allLoss="data.storage.allLostDates"
@@ -82,14 +85,13 @@
               ></Calendar>
             </div>
           </div>
-          <div style="height:10px"></div>
+          <div style="height: 10px"></div>
           <el-descriptions
             title="录像完整性"
             :column="3"
             border
             :label-style="labelStyle"
             :contentStyle="content_style"
-            
             v-if="integrity == null || integrity.state == null"
           >
             <el-descriptions-item label="检测结果"> 未知 </el-descriptions-item>
@@ -309,6 +311,22 @@ export default {
     };
   },
   props: ["videoIntegrityState", "videoDaysState", "videoDiagnosisState"],
+  computed: {
+    calenderStartDate() {
+      if (this.data == null || this.data.storage == null) {
+        return new Date();
+      }
+
+      if (this.data.storage.earliestTime) {
+        return this.data.storage.earliestTime;
+      }
+
+      let d = dayjs().add(this.data.storage.planDays * -1 - 1, "day");
+
+      return d;
+    },
+  },
+
   methods: {
     dayjs,
     getLabel,
@@ -379,7 +397,10 @@ export default {
       }
 
       let minute = duration % 60;
-      str += `${minute}分`;
+      if (minute > 0) {
+        str += `${minute}分`;
+      }
+
       return str;
     },
   },