[Feat 0000] 自然风压

src/views/vent/monitorManager/deviceMonitor/components/device/modal/mainPath.vue

@@ -36,18 +36,22 @@
         </div>
       </div>
     </div>
-    <div class="status-card">
-      <div class="left-content">
-        <div class="left1"></div>
-      </div>
-      <div class="right-content">
-        <div class="fengya">
-          <div class="title" style="color: #fff">矿井自然风压</div>
-          <div class="value" style="color: #19a8b3">3210 Pa</div>
+    <div class="status-card-box">
+      <div class="status-card">
+        <div class="left-content">
+          <div class="left1"></div>
         </div>
-        <div class="status">
-          <div class="title" style="color: #fff">当前状态</div>
-          <div class="value" style="color: #19a8b3">帮助通风</div>
+        <div class="right-content">
+          <div class="fengya">
+            <div class="title">矿井自然风压</div>
+            <div class="value">{{ zrfyValue.zrfyVal }} Pa</div>
+          </div>
+          <div class="status">
+            <div class="title">当前状态</div>
+            <div class="value">
+              {{ zrfyValue.zrfyStatus ? '阻碍通风' : '帮助通风' }}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -80,7 +84,7 @@ let yData = reactive<any[]>([]);
 let percentE = ref<any>(0);
 let percentF = ref<any>(0);
 let percentT = ref<any>(0);
-
+let zrfyValue = ref<any>([]);
 let tabList = reactive<any[]>([
   { name: '总风量(m³/min)', val: 0 },
   { name: '总阻力(Pa)', val: 0 },
@@ -93,6 +97,7 @@ function getDetail() {
 }
 //选项切换
 function changeSelect(val) {
+  zrfyValue.value = val['zrfyInfo'];
   echartData[0].value = (val['drag_1'] || Math.floor(Math.random() * (629 - 620 + 1)) + 620).toFixed(2);
   echartData[1].value = (val['drag_2'] || Math.floor(Math.random() * (949 - 940 + 1)) + 940).toFixed(2);
   echartData[2].value = (val['drag_3'] || Math.floor(Math.random() * (855 - 850 + 1)) + 850).toFixed(2);
@@ -282,11 +287,14 @@ onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
+@import '/@/design/theme.less';
+@import '/@/design/vent/color.less';
 .windLine {
   width: 100%;
   height: 100%;
   position: relative;
-
+  background-color: #47474722;
+  backdrop-filter: blur(2px);
   .title-top {
     position: absolute;
     top: 9px;
@@ -374,7 +382,7 @@ onMounted(() => {});
         }
 
         .dw {
-          color: #b3b8cc;
+          color: #f2f4f8;
           margin-left: 5px;
         }
       }
@@ -383,7 +391,7 @@ onMounted(() => {});
 
   .line-card {
     position: absolute;
-    top: 186px;
+    top: 166px;
     left: 0;
     width: 100%;
     height: calc(100% - 186px);
@@ -412,7 +420,7 @@ onMounted(() => {});
         .item-label {
           width: 100%;
           text-align: center;
-          color: #b3b8cc;
+          color: #e4e6ee;
           font-size: 12px;
         }
 
@@ -428,84 +436,87 @@ onMounted(() => {});
       }
     }
   }
-  .status-card {
-    position: absolute;
-    top: 300px;
-    left: 0;
-    width: 100%;
-    height: calc(100% - 210px);
-    box-sizing: border-box;
-    margin-left: 30px;
-    display: flex;
-    align-items: center;
-    background: url('/@/assets/images/home-container/bj.png') no-repeat;
-    background-size: 100% 100%;
-    .left-content {
-      width: 30%;
-      height: 100%;
-      background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
-      background-size: 100% 100%;
-      .left1 {
-        width: 100%;
-        height: 100%;
-        margin: 30px;
-        background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
-        background-size: 30% 30%;
-      }
-    }
-    .right-content {
+  .status-card-box {
+    width: 330px;
+    height: 106px;
+    padding: 5px;
+    position: relative;
+
+    top: 280px;
+    border-radius: 4px;
+
+    .status-card {
+      position: absolute;
+      width: 310px;
+      height: 94px;
+      box-sizing: border-box;
       display: flex;
-      flex-direction: column;
-      width: 70%;
-      height: 100%;
-      .fengya {
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 5px;
-        margin-top: 8px;
+      align-items: center;
+      background: url('/@/assets/images/home-container/bj.png') no-repeat;
 
-        .title {
-          margin-left: 8px;
-        }
-        .value {
-          margin-right: 8px;
-        }
-      }
-      .fengya::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 10px;
-        background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+      background-size: 100% 100%;
+      .left-content {
+        width: 95px;
+        height: 93px;
+        background: url('/@/assets/images/home-container/leftBJ1.png') no-repeat;
         background-size: 100% 100%;
+        .left1 {
+          width: 100%;
+          height: 100%;
+          margin: 30px;
+          background: url('/@/assets/images/home-container/leftBJ2.png') no-repeat;
+          background-size: 30% 30%;
+        }
       }
-      .status {
-        position: relative;
+      .right-content {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 8px;
-        padding: 5px;
+        flex-direction: column;
+        width: 70%;
+        height: 100%;
+        .fengya {
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 5px;
+          margin-top: 8px;
+        }
+        .fengya::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 10px;
+          background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+          background-size: 100% 100%;
+        }
         .title {
           margin-left: 8px;
+          color: @white;
         }
         .value {
           margin-right: 8px;
+          color: #a1f9ff;
+        }
+        .status {
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 8px;
+          padding: 5px;
+        }
+        .status::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 10px;
+          background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
+          background-size: 100% 100%;
         }
-      }
-      .status::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 10px;
-        background: url('/@/assets/images/home-container/line_bj.png') no-repeat center bottom;
-        background-size: 100% 100%;
       }
     }
   }