web录像诊断功能调整

src/views/iot/videoDiagnosis/Calendar.vue

@@ -31,7 +31,7 @@ export default {
       },
       attrs: [
         {
-          highlight: {
+          highlight: {           
             start: {
               fillMode: "outline",
             },
@@ -46,38 +46,41 @@ export default {
           dates: { start: this.startDate?new Date(this.startDate):new Date(), end: new Date() }, 
         },
         {
-          dot: {
-            color: "green",
-            style: {
-              width: "16px",
-              height: "3px",
-              borderRadius: "0",
-            },
+          highlight: {
+            fillMode:'solid',
+            color: "green",            
+            // style: {
+            //   width: "16px",
+            //   height: "3px",
+            //   borderRadius: "0",
+            // },
             contentClass: "italic",
           },
           dates: this.full,
         },
         {
-          dot: {
+          highlight: {
+            fillMode:'solid',
             color: "yellow",
-            style: {
-              backgroundColor: "orange",
-              width: "16px",
-              height: "3px",
-              borderRadius: "0",
-            },
+            // style: {
+            //   backgroundColor: "orange",
+            //   width: "16px",
+            //   height: "3px",
+            //   borderRadius: "0",
+            // },
             contentClass: "italic",
           },
           dates: this.paritialLoss,
         },
         {
-          dot: {
+          highlight: {
+            fillMode:'solid',
             color: "red",
-            style: {
-              width: "16px",
-              height: "3px",
-              borderRadius: "0",
-            },
+            // style: {
+            //   width: "16px",
+            //   height: "3px",
+            //   borderRadius: "0",
+            // },
             contentClass: "italic",
           },
           dates: this.allLoss,

src/views/iot/videoDiagnosis/detail.vue

@@ -3,297 +3,270 @@
     <DialogCom title="录像详情" :visible.sync="isShow" width="1200px">
       <el-descriptions
         title="基础信息"
-        :column="3"
+        :column="2"
         border
         :label-style="labelStyle"
         :contentStyle="content_style"
-      >
+        ><el-descriptions-item label="监控主机">{{
+          data.hostName
+        }}</el-descriptions-item>
         <el-descriptions-item label="通道名称">{{
           data.channelName
         }}</el-descriptions-item>
-        <el-descriptions-item label="监控主机">{{
-          data.hostName
-        }}</el-descriptions-item>
-        <el-descriptions-item label="IP地址">{{
+
+        <!-- <el-descriptions-item label="IP地址">{{
           data.channelIp
-        }}</el-descriptions-item>
-        <!--        <el-descriptions-item label="组织机构" >{{data.orgName}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="上报时间" >{{data.updateTime}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="监控主机" >{{data.equipmentName}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="摄像头" >{{data.channelName}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="通道号" >{{data.channelCode}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="计划存储天数" >{{data.planDays}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="实际存储天数" >{{data.realDays}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="计划录像开始时间" >{{data.planStartTime}}</el-descriptions-item>-->
-        <!--        <el-descriptions-item label="计划录像结束时间" >{{data.planEndTime}}</el-descriptions-item>-->
+        }}</el-descriptions-item> -->
       </el-descriptions>
-      <el-descriptions
-        title="录像质量"
-        :column="3"
-        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"
-          border
-          :label-style="labelStyle"
-          :contentStyle="content_style"
-        >
-          <el-descriptions-item label="检测结果">{{
-            getLabel(videoDiagnosisState, data.quality.quality)
-          }}</el-descriptions-item>
-          <el-descriptions-item label="检测日期">{{
-            dayjs().format("YYYY年M月D日")
-          }}</el-descriptions-item>
-          <el-descriptions-item label="更新时间">{{
-            dayjs(data.quality.updateTime).format("YYYY年M月D日H时m分")
-          }}</el-descriptions-item>
-          <el-descriptions-item
-            label="诊断截图"
-            v-if="data.quality.quality == 1"
+      <el-tabs type="border-card">
+        <el-tab-pane label="录像存储情况">
+          <el-descriptions
+            title="录像存储天数"
+            :column="3"
+            border
+            :label-style="labelStyle"
+            :contentStyle="content_style"
+            v-if="data.storage == null || data.storage.planDays == null"
           >
-            <div>
-              <ul class="legend-box legend-box-quality">
-                <li>
-                  <el-tag
-                    size="small"
-                    type="danger"
-                    v-if="data.quality.signalLost"
-                    >视频信号</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag size="small" type="danger" v-if="data.quality.occlude"
-                    >遮挡</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag size="small" type="danger" v-if="data.quality.blurry"
-                    >模糊</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag
-                    size="small"
-                    type="danger"
-                    v-if="data.quality.colorCast"
-                    >偏色</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag
-                    size="small"
-                    type="danger"
-                    v-if="data.quality.snowflake"
-                    >雪花</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag size="small" type="danger" v-if="data.quality.stripe"
-                    >条纹</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag
-                    size="small"
-                    type="danger"
-                    v-if="data.quality.contrast"
-                    >对比度</el-tag
-                  >
-                </li>
-                <li>
-                  <el-tag
-                    size="small"
-                    type="danger"
-                    v-if="data.quality.brightness"
-                    >亮度</el-tag
-                  >
-                </li>
-              </ul>
-              <div
-                style="
-                  display: block;
-                  width: 300px;
-                  max-height: 300px;
-                  margin-top: 20px;
-                "
+            <el-descriptions-item label="存储状态"> 未知 </el-descriptions-item>
+          </el-descriptions>
+          <div v-else>
+            <el-descriptions
+              title="录像存储天数"
+              :column="3"
+              border
+              :label-style="labelStyle"
+              :contentStyle="content_style"
+            >
+              <el-descriptions-item label="计划存储"
+                >{{ data.storage.planDays }}天</el-descriptions-item
               >
-                <el-image
-                  :src="data.quality.image"
-                  :preview-src-list="[data.quality.image]"
-                >
-                  <div slot="error" class="image-slot">
-                    <i class="el-icon-picture-outline"></i>
-                  </div>
-                </el-image>
-              </div>
-            </div>
-          </el-descriptions-item>
-        </el-descriptions>
-      </div>
+              <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>
+            <el-descriptions :column="1">
+              <el-descriptions-item label="存储状态">
+                <!--          <time-line></time-line>-->
+                <ul class="legend-box">
+                  <li>
+                    <i class="legend" style="background-color: green"></i>
+                    <span>录像完整</span>
+                  </li>
+                  <li>
+                    <i class="legend" style="background-color: orange"></i>
+                    <span>部分丢失</span>
+                  </li>
+                  <li>
+                    <i class="legend" style="background-color: red"></i>
+                    <span>全部丢失</span>
+                  </li>
+                  <li>
+                    <i class="legend" style="background-color: #cbd5e0"></i>
+                    <span>计划录像天数</span>
+                  </li>
+                </ul>
+              </el-descriptions-item>
+            </el-descriptions>
 
-      <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>
-      </el-descriptions>
-      <div v-else>
-        <el-descriptions
-          title="录像完整性"
-          :column="3"
-          border
-          :label-style="labelStyle"
-          :contentStyle="content_style"
-        >
-          <el-descriptions-item label="检测结果">{{
-            getLabel(videoIntegrityState, integrity.state)
-          }}</el-descriptions-item>
-          <el-descriptions-item label="录像日期">{{
-            dayjs(integrity.recordDate).format("YYYY年M月D日")
-          }}</el-descriptions-item>
-          <el-descriptions-item label="丢失时长">{{
-            lostDurationText(integrity.loseDuration)
-          }}</el-descriptions-item>
-          <el-descriptions-item label="更新时间">{{
-            dayjs(integrity.updateTime).format("YYYY年M月D日H时m分")
-          }}</el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions :column="1">
-          <el-descriptions-item label="丢失时段">
-            <!--          <time-line></time-line>-->
-            <ul class="legend-box">
-              <li>
-                <i class="legend" style="background-color: #00b2ff"></i>
-                <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>
-              <li>
-                <i class="legend" style="background-color: red"></i>
-                <span>无录像</span>
-              </li>
-            </ul>
-          </el-descriptions-item>
-        </el-descriptions>
+            <div class="calendar-box">
+              <Calendar
+                :startDate="data.storage.earliestTime"
+                :full="data.storage.fullDates"
+                :paritialLoss="data.storage.partialLossDates"
+                :allLoss="data.storage.allLostDates"
+                @select="onSelectDate"
+              ></Calendar>
+            </div>
+          </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>
+          </el-descriptions>
+          <div v-else>
+            <el-descriptions
+              title="录像完整性"
+              :column="3"
+              border
+              :label-style="labelStyle"
+              :contentStyle="content_style"
+            >
+              <el-descriptions-item label="检测结果">{{
+                getLabel(videoIntegrityState, integrity.state)
+              }}</el-descriptions-item>
+              <el-descriptions-item label="录像日期">{{
+                dayjs(integrity.recordDate).format("YYYY年M月D日")
+              }}</el-descriptions-item>
+              <el-descriptions-item label="丢失时长">{{
+                lostDurationText(integrity.loseDuration)
+              }}</el-descriptions-item>
+              <el-descriptions-item label="更新时间">{{
+                dayjs(integrity.updateTime).format("YYYY年M月D日H时m分")
+              }}</el-descriptions-item>
+            </el-descriptions>
+            <el-descriptions :column="1">
+              <el-descriptions-item label="丢失时段">
+                <!--          <time-line></time-line>-->
+                <ul class="legend-box">
+                  <li>
+                    <i class="legend" style="background-color: #00b2ff"></i>
+                    <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>
+                  <li>
+                    <i class="legend" style="background-color: red"></i>
+                    <span>无录像</span>
+                  </li>
+                </ul>
+              </el-descriptions-item>
+            </el-descriptions>
 
-        <div class="time-line-box">
-          <!--        <div style="width: 100%;height: 20px;background-color: red; "></div>-->
-          <progress-bar
-            :timeCell="timeCells"
-            :lostData="lostData"
-          ></progress-bar>
-        </div>
-        <!-- <div class="time-line">
-          <el-timeline :reverse="false">
-            <el-timeline-item
-              v-for="(activity, index) in data.loseDateList"
-              :key="index"
-              color="rgb(208 230 253)"
-              size="large"
-              type="primary"
+            <div class="time-line-box">
+              <!--        <div style="width: 100%;height: 20px;background-color: red; "></div>-->
+              <progress-bar
+                :timeCell="timeCells"
+                :lostData="lostData"
+              ></progress-bar>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="实时录像质量">
+          <el-descriptions
+            title="实时录像质量"
+            :column="3"
+            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="2"
+              border
+              :label-style="labelStyle"
+              :contentStyle="content_style"
             >
-              <div class="time">
+              <el-descriptions-item label="检测结果">{{
+                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-item
+                label="诊断截图"
+                v-if="data.quality.quality == 1"
+              >
                 <div>
-                  <span class="year">
-                    {{ activity.month }}
-                  </span>
-                </div>
-              </div>
-              <div class="ml10">
-                <el-tag
-                  v-for="(date, number) in activity.lostDates"
-                  :key="number"
-                >
-                  <div>
-                    {{ date }}
-                    <div class="reTip"></div>
+                  <ul class="legend-box legend-box-quality">
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.signalLost"
+                        >视频信号</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.occlude"
+                        >遮挡</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.blurry"
+                        >模糊</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.colorCast"
+                        >偏色</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.snowflake"
+                        >雪花</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.stripe"
+                        >条纹</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.contrast"
+                        >对比度</el-tag
+                      >
+                    </li>
+                    <li>
+                      <el-tag
+                        size="small"
+                        type="danger"
+                        v-if="data.quality.brightness"
+                        >亮度</el-tag
+                      >
+                    </li>
+                  </ul>
+                  <div
+                    style="
+                      display: block;
+                      width: 300px;
+                      max-height: 300px;
+                      margin-top: 20px;
+                    "
+                  >
+                    <el-image
+                      :src="data.quality.image"
+                      :preview-src-list="[data.quality.image]"
+                    >
+                      <div slot="error" class="image-slot">
+                        <i class="el-icon-picture-outline"></i>
+                      </div>
+                    </el-image>
                   </div>
-                </el-tag>
-              </div>
-            </el-timeline-item>
-          </el-timeline>
-        </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"
-          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>
-        <el-descriptions :column="1">
-          <el-descriptions-item label="存储状态">
-            <!--          <time-line></time-line>-->
-            <ul class="legend-box">
-              <li>
-                <i class="legend" style="background-color: green"></i>
-                <span>录像完整</span>
-              </li>
-              <li>
-                <i class="legend" style="background-color: orange"></i>
-                <span>部分丢失</span>
-              </li>
-              <li>
-                <i class="legend" style="background-color: red"></i>
-                <span>全部丢失</span>
-              </li>
-              <li>
-                <i class="legend" style="background-color: #cbd5e0"></i>
-                <span>计划录像天数</span>
-              </li>
-            </ul>
-          </el-descriptions-item>
-        </el-descriptions>
+                </div>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
 
-        <div class="calendar-box">
-          <Calendar
-            :startDate="data.storage.earliestTime"
-            :full="data.storage.fullDates"
-            :paritialLoss="data.storage.partialLossDates"
-            :allLoss="data.storage.allLostDates"
-            @select="onSelectDate"
-          ></Calendar>
-        </div>
-      </div>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer" style="margin-top: 20px">
         <el-button @click="onHide">关闭</el-button>
       </div>
     </DialogCom>
@@ -308,7 +281,7 @@ import { getLabel } from "@/views/commonOption.js";
 import { integrity } from "@/api/iot/videoDiagnosis";
 
 export default {
-  components: {  ProgressBar, Calendar },
+  components: { ProgressBar, Calendar },
   data() {
     return {
       isShow: false,

src/views/iot/videoDiagnosis/index.vue

@@ -145,7 +145,7 @@
           align="center"
           label="组织机构"
           prop="orgName"
-          width="200"
+          min-width="200"
         ></el-table-column>
         <!--        <el-table-column :show-overflow-tooltip="true" align="center" label="设备名称" prop="reasons"/>-->
         <!-- <el-table-column
@@ -195,7 +195,7 @@
             }}
           </template>
         </el-table-column>
-        <el-table-column
+        <!-- <el-table-column
           align="center"
           label="无视频信号"
           prop="signalLost"
@@ -221,7 +221,7 @@
               getLabel(dict.type.video_diagnosis_state, r.row.occlude, "未知")
             }}
           </template></el-table-column
-        >
+        > -->
         <el-table-column
           align="center"
           label="视频质量"