大屏优化

src/views/environmentalScreen/index.vue

@@ -105,7 +105,7 @@
             </li>
           </ul>
         </div>
-        <div class="env-item container-wrap left-wrap">
+        <!-- <div class="env-item container-wrap left-wrap">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <h3>
@@ -114,6 +114,45 @@
           <div style="height: calc(100% - 40px);">
             <video id="video" controls autoplay muted width="100%" height="100%" />
           </div>
+        </div> -->
+        <div class="env-item container-wrap left-wrap">
+          <span class="right-top-line" />
+          <span class="left-bottom-line" />
+          <h3>
+            <i class="iconfont icon-kongqizhiliangshuju" />设备联调状态
+          </h3>
+          <!--  :style="{
+              height: showScroll ? 'calc(100% - 40px)' : 'auto',
+              overflow: showScroll ? 'auto' : 'hidden'
+            }" -->
+          <ul class="leakage-list">
+            <li :class="alarmStatus.infrared === '告警' ? 'leakage-warn' : ''">
+              <p><i class="iconfont icon-shebei" />红外</p>
+              <span class="leakage-state-tip" />
+            </li>
+            <li :class="alarmStatus.fire === '告警' ? 'leakage-warn' : ''">
+              <p><i class="iconfont icon-shebei" />消防</p>
+              <span class="leakage-state-tip" />
+            </li>
+            <li :class="alarmStatus.waterLeak === '告警' ? 'leakage-warn' : ''">
+              <p><i class="iconfont icon-shebei" />漏水</p>
+              <span class="leakage-state-tip" />
+            </li>
+            <!-- :style="{
+                width: liWidth,
+                height: liHeight,
+                marginRight: '12px',
+                marginBottom: '12px'
+              }" -->
+            <li
+              v-for="item in validDisplayConfigData"
+              :key="item.id"
+              :class="{ 'leakage-warn': item.NetStatus === 0 }"
+            >
+              <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
+              <span class="leakage-state-tip" />
+            </li>
+          </ul>
         </div>
       </div>
       <div class="env-main-middle">
@@ -294,7 +333,7 @@
               </div>
             </li>
           </ul> -->
-          <ul v-if="hasValidData" class="leakage-list new-leakage-list">
+          <!-- <ul v-if="hasValidData" class="leakage-list new-leakage-list">
             <li :class="alarmStatus.infrared === '告警' ? 'leakage-warn' : ''">
               <p><i class="iconfont icon-shebei" />红外</p>
               <span class="leakage-state-tip" />
@@ -315,7 +354,7 @@
               <p><i class="iconfont icon-shebei" />{{ item.Name }}</p>
               <span class="leakage-state-tip" />
             </li>
-          </ul>
+          </ul> -->
         </div>
       </div>
       <div class="env-main-right">
@@ -533,7 +572,7 @@ export default {
       this.getBorrowerNumSta()
       this.getTodayHikAlarmLog()
     }, this.refreshtime)
-    this.getVideoUrl()
+    // this.getVideoUrl()
   },
   beforeDestroy() {
     // 清理所有定时器
@@ -1179,21 +1218,22 @@ export default {
 }
 .leakage-list {
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   flex-wrap: wrap;
-  padding: 0 0 0 14px;
+  // padding: 0 0 0 14px;
   text-align: left;
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #339cff;
-    border-radius: 2px;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: #021941;
-  }
+  height: calc(100% - 40px);
+  // &::-webkit-scrollbar {
+  //   width: 4px;
+  //   height: 4px;
+  // }
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: #339cff;
+  //   border-radius: 2px;
+  // }
+  // &::-webkit-scrollbar-track {
+  //   background-color: #021941;
+  // }
   li {
     position: relative;
     display: flex;
@@ -1203,6 +1243,9 @@ export default {
     border: 1px solid #3581cc;
     background-color: #02255f;
     border-radius: 2px;
+    width: calc(100% / 2 - 14px);
+    height: calc(100% / 4 - 20px);
+    margin: 20px 7px 0 7px;
     &::before {
       content: "";
       position: absolute;