数据总览页面优化

src/router/router.config.js

@@ -288,7 +288,7 @@ export let routers = [
         path: '/iot/board',
         name: 'iot_board',
         component: () => import('@/views/menu/iot/board'),
-        meta: { title: '物联看板', keepAlive: false }
+        meta: { title: '数据总览', keepAlive: false }
       },
       {
         path: '/iot/smartOpration',

src/views/menu/iot/board/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="detail">
     <nav-bar></nav-bar>
-    <van-row>
+    <van-row class="out-row">
       <van-col span="24">
-        <div class="flex-container flex-row" style="height: 140px">
+        <div class="flex-container flex-row">
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -77,10 +77,10 @@
           </div>
         </div>
       </van-col>
-    </van-row>
-    <van-row>
+    </van-row >
+    <van-row class="out-row">
       <van-col span="12" class="customVanCell" >
-        <div class="flex-container flex-column" style="height: 180px">
+        <div class="flex-container flex-column">
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -89,7 +89,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/total.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -111,7 +111,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/smoke.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -131,7 +131,7 @@
         </div>
       </van-col>
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 180px">
+        <div class="flex-container flex-column">
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -140,10 +140,10 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/videoAndDays.png')"
                 />
               </div>
-              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '2%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -155,7 +155,7 @@
                   </div>
                 </van-col>
               </van-row>
-              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '2%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -165,6 +165,9 @@
                       <div class="fontCls">硬盘异常率</div>
                     </div>
                   </div>
+                  <div class="lower-right">
+                    <p> 数据更新时间：{{dataInfo.videoInspection == null ? '-' : dataInfo.videoInspection.updateTime}}</p>
+                  </div>
                 </van-col>
               </van-row>
             </div>
@@ -172,9 +175,9 @@
         </div>
       </van-col>
     </van-row>
-    <van-row>
+    <van-row class="out-row">
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 180px">
+        <div class="flex-container flex-column" >
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -183,7 +186,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/gas.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -208,7 +211,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/HT.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -228,7 +231,7 @@
         </div>
       </van-col>
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 180px">
+        <div class="flex-container flex-column" >
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -237,10 +240,10 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/videoAndDays.png')"
                 />
               </div>
-              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '5%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -252,7 +255,7 @@
                   </div>
                 </van-col>
               </van-row>
-              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '5%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -262,6 +265,9 @@
                       <div class="fontCls">大于或等于90天</div>
                     </div>
                   </div>
+                  <div class="lower-right">
+                    <p> 数据更新时间：{{ dataInfo.recordingStorage == null ? '-' : dataInfo.recordingStorage.updateTime }}</p>
+                  </div>
                 </van-col>
               </van-row>
             </div>
@@ -269,9 +275,9 @@
         </div>
       </van-col>
     </van-row>
-    <van-row>
+    <van-row class="out-row">
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 180px">
+        <div class="flex-container flex-column">
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -280,7 +286,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/door.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -305,7 +311,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/infrared.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -325,7 +331,7 @@
         </div>
       </van-col>
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 180px">
+        <div class="flex-container flex-column" >
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -334,10 +340,10 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/videoAndDays.png')"
                 />
               </div>
-              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '8%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -349,7 +355,7 @@
                   </div>
                 </van-col>
               </van-row>
-              <van-row class="detail-item" :style="{'margin-top': rightMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '8%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -366,9 +372,9 @@
         </div>
       </van-col>
     </van-row>
-    <van-row>
+    <van-row class="out-row">
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 240px">
+        <div class="flex-container flex-column" >
           <div class="flex-item" style="flex-grow: 1">
             <div class="moduleCom">
               <div class="titleText">
@@ -377,7 +383,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/water.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -402,7 +408,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/air.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -417,7 +423,7 @@
                   </div>
                 </van-col>
               </van-row>
-              <van-row class="detail-item" :style="{'margin-top': leftMargin}">
+              <van-row class="detail-item" :style="{'margin-top': '2%'}">
                 <van-col span="24">
                   <div class="complete">
                     <div class="numCls wj-title-blue">
@@ -434,7 +440,7 @@
         </div>
       </van-col>
       <van-col span="12" class="customVanCell">
-        <div class="flex-container flex-column" style="height: 240px">
+        <div class="flex-container flex-column" >
           <div class="flex-item" style="flex-grow: 3">
             <div class="moduleCom">
               <div class="titleText">
@@ -443,7 +449,7 @@
                   width="0.5rem"
                   height="0.5rem"
                   style="float: right;margin-right: 5px;"
-                  :src="require('@/assets/img/my/operta.png')"
+                  :src="require('@/assets/img/iot/ups.png')"
                 />
               </div>
               <van-row class="detail-item">
@@ -508,8 +514,6 @@ export default {
   components: { NavBar},
   data() {
     return {
-      rightMargin: '10%',
-      leftMargin: '5%',
       dataInfo: {
         deviceOverview:{
           edgeComputingHosts: 0,
@@ -522,10 +526,12 @@ export default {
         totalAlerts: 0,
         videoInspection: {
           lostRate: '-',
-          hardDiskExceptionRate: '-'
+          hardDiskExceptionRate: '-',
+          updateTime:null
         },
         recordingStorage: {
-          hashmap: null
+          hashmap: null,
+          updateTime:null
         },
         videoDiagnostic: {
           singleLostAlarmNums: 0,
@@ -581,7 +587,8 @@ export default {
   display: -webkit-flex;
   display: flex;
   width: auto;
-  height: auto;
+  height: 100%;
+  position: relative;
 }
 .flex-row{
   flex-direction: row;
@@ -591,17 +598,18 @@ export default {
 }
 
 .flex-item {
-  background-color: #e5e5e5;
+  background-color: #e9e9e9;
   width: auto;
   margin: 10px;
   border-radius: 5px;
+  padding-bottom: 5px;
 }
 .numCls{
   text-align: center;
-  margin-top: 5px;
+  //margin-top: 5px;
 }
 .textSize{
-  font-size: 40px;
+  font-size: x-large;
 }
 .fontCls{
   text-align: center;
@@ -616,7 +624,20 @@ export default {
 .titleText{
   margin-top: 10px;
   margin-left: 10px;
-  font-size: 30px;
+  font-size: 25px;
   font-weight: bold;
 }
+.lower-right{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 20px;
+}
+.lower-right p{
+  font-size: small;
+  color: #919191;
+}
+.out-row{
+  display: flex;
+}
 </style>