优化录像诊断

src/views/menu/iot/videoDiagnosis/components/item.vue

@@ -1,53 +1,55 @@
 <template>
-  <card style="font-size:15px">
-    <van-row class="row" style="border-bottom:1px solid black">
-      <van-col span="16">{{ data.hostName }}</van-col>
-      <van-col span="8" style="text-align:right" @click="()=>expanded=!expanded"
-
-        >
-        <van-tag v-if="data.state == 0" type="success">正常</van-tag>
-        <van-tag v-else-if="data.state == 1" type="warning">异常</van-tag>
-        <van-tag v-else type="primary">未知</van-tag>
-        <van-icon style="margin-left:10px;" :name="expanded ? 'arrow-up' : 'arrow-down'"></van-icon>
-      </van-col>
-    </van-row>
-    <van-row  class="row">
-      <van-col span="8">所属机构</van-col>
-      <van-col span="16"  style="text-align:right">{{ data.orgName }}</van-col>
-    </van-row>
-    <van-row>
-      <van-col span="24">
-        <span v-show="expanded" class="cell-channel-item" v-for="channel in data.channels" :key="channel.channelCode">
-          <van-button
-            style="width: 20vw"
-            size="small"
-            v-if="channel.state == 0"
-            type="primary"
-            @click="itemClick(data.hostCode, channel.channelCode)"
-          >
-            {{ '通道' + channel.channelCode }}</van-button
-          >
-          <van-button
-            style="width: 20vw"
-            size="small"
-            v-else-if="channel.state == 1"
-            type="warning"
-            @click="itemClick(data.hostCode, channel.channelCode)"
-          >
-            {{ '通道' + channel.channelCode }}</van-button
-          >
-          <van-button
-            style="width: 20vw"
-            size="small"
-            v-else-if="channel.state == 2 || channel.state == null"
-            type="default"
-            @click="itemClick(data.hostCode, channel.channelCode)"
-          >
-            {{ '通道' + channel.channelCode }}</van-button
-          >
-        </span>
-      </van-col>
-    </van-row>
+  <card style="font-size: 15px">
+    <van-cell-group>
+      <van-cell :title="data.hostName">
+        <template #default>
+          <van-tag v-if="data.state == 0" type="success">正常</van-tag>
+          <van-tag v-else-if="data.state == 1" type="warning">异常</van-tag>
+          <van-tag v-else type="primary">未知</van-tag>
+        </template>
+        <template #right-icon>
+          <van-icon
+            style="margin-left: 10px"
+            :name="expanded ? 'arrow-up' : 'arrow-down'"
+            @click="() => (expanded = !expanded)"
+          ></van-icon>
+        </template>
+      </van-cell>
+      <van-cell title="所属机构" :value="data.orgName"></van-cell>
+      <van-cell title-style="display:none" value-class="cell-channel-list">
+        <template #default>
+          <span v-show="expanded" class="cell-channel-item" v-for="channel in data.channels" :key="channel.channelCode">
+            <van-button
+              style="width: 20vw"
+              size="small"
+              v-if="channel.state == 0"
+              type="primary"
+              @click="itemClick(data.hostCode, channel.channelCode)"
+            >
+              {{ '通道' + channel.channelCode }}</van-button
+            >
+            <van-button
+              style="width: 20vw"
+              size="small"
+              v-else-if="channel.state == 1"
+              type="warning"
+              @click="itemClick(data.hostCode, channel.channelCode)"
+            >
+              {{ '通道' + channel.channelCode }}</van-button
+            >
+            <van-button
+              style="width: 20vw"
+              size="small"
+              v-else-if="channel.state == 2 || channel.state == null"
+              type="default"
+              @click="itemClick(data.hostCode, channel.channelCode)"
+            >
+              {{ '通道' + channel.channelCode }}</van-button
+            >
+          </span>
+        </template>
+      </van-cell>
+    </van-cell-group>
   </card>
 </template>
 <script>
@@ -68,10 +70,8 @@ export default {
     data: {}
   },
   methods: {
-    itemClick(hostCode,channelCode) {
-      this.$router.push(
-        `/iot/videoDiagnosis/detail?hostCode=${hostCode}&channelCode=${channelCode}`
-      )
+    itemClick(hostCode, channelCode) {
+      this.$router.push(`/iot/videoDiagnosis/detail?hostCode=${hostCode}&channelCode=${channelCode}`)
     }
   },
   async created() {},
@@ -79,11 +79,14 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.row{
+.row {
   height: 8vw;
   display: flex;
-    flex-direction: row;
-    align-items: center;
+  flex-direction: row;
+  align-items: center;
+}
+.cell-channel-list {
+  width: 100%;
 }
 .cell-channel-item {
   width: 25%;

src/views/menu/iot/videoDiagnosis/detail.vue

@@ -9,6 +9,11 @@
         <van-cell
           title="视频质量"
           :value="info.quality ? getDictLabel(info.quality.quality, 'video_diagnosis_state', '未上报') : '未上报'"
+          
+        />
+        <van-cell
+          title="检测日期"
+          :value="dayjs().format('YYYY年M月D日')"
         />
         <van-cell
           v-if="info.quality != null && info.quality.quality != null"
@@ -17,7 +22,7 @@
         >
           <template #default>
             <div>诊断截图</div>
-            <div>
+            <div class="quality-tags">
               <van-tag type="danger" v-if="info.quality.signalLost == 1">信号丢失</van-tag>
               <van-tag type="danger" v-if="info.quality.occlude == 1">遮挡</van-tag>
               <van-tag type="danger" v-if="info.quality.brightness == 1">亮度</van-tag>
@@ -42,18 +47,18 @@
       </van-cell-group>
     </card>
     <card v-if="!info.storage">
-      <van-cell title="录像完整" value="未上报"> </van-cell>
+      <van-cell title="录像存储情况" value="未上报"  title-style="font-weight:700;"> </van-cell>
     </card>
     <card v-else>
       <van-cell-group>
-        <van-cell title="录像完整">
-          <template #default>
+        <van-cell title="录像存储情况"  title-style="font-weight:700;">
+          <!-- <template #default>
             <van-tag type="success" v-if="info.storage.planDays === info.storage.realDays">正常</van-tag>
             <van-tag type="warning" v-else>异常</van-tag>
-          </template>
+          </template> -->
         </van-cell>
-        <van-cell title="实际存储天数" :value="`${info.storage.realDays}天`"></van-cell>
         <van-cell title="计划存储天数" :value="`${info.storage.planDays}天`"></van-cell>
+        <van-cell title="实际存储天数" :value="`${info.storage.realDays}天`"></van-cell>        
         <van-cell value-class="cell-calender-value" title-class="cell-calender-title">
           <template #title></template>
           <template #default>
@@ -61,10 +66,14 @@
               ref="calendar"
               :data="info.storage"
               :earlistDate="info.storage.earliestTime"
+              :defaultSelectedDate="selectDate"
               @change="onChange"
             ></calendar>
           </template>
         </van-cell>
+        <van-cell title="录像完整性" title-style="font-weight:500;"></van-cell>
+        <van-cell title="日期" :value="dayjs(selectDate).format('YYYY年M月D日')" v-if="selectDate"
+        ></van-cell>
         <van-cell title="丢失时长">
           <template #default>
             {{ integrity ? lostDurationText(integrity.loseDuration) : '未知' }}
@@ -91,6 +100,7 @@ export default {
       hostCode: this.$route.query.hostCode,
       channelCode: this.$route.query.channelCode,
       integrity: {},
+      selectDate:null,
       dicts: ['video_diagnosis_state']
     }
   },
@@ -107,6 +117,9 @@ export default {
       api.detail(this.hostCode, this.channelCode).then(r => {
         this.info = r.data
         this.integrity = r.data.integrity
+        if(r.data.integrity){
+          this.selectDate=r.data.integrity.recordDate;
+        }
       })
     },
     onChange(day) {
@@ -137,6 +150,15 @@ export default {
 .cell-quality-value {
   width: 100%;
 }
+.quality-tags{
+  >span{
+    margin-left:1vw;
+  }
+
+  >span:first-child{
+    margin-left:0;
+  }
+}
 .cell-calender-value {
   width: 100%;
 }