粉尘静态指标界面修改-提交

src/views/vent/dust/dustHome/components/dustJtzb.vue

@@ -1,65 +1,118 @@
 <template>
     <div class="dustJtzb">
-        <div class="jtZb-box" v-for="(item, index) in jtzbList" :key="index">
-            <div class="jtZb-content">
-                <div class="jtZb-label">{{ `${item.label}:` }}</div>
-                <div class="jtZb-val">{{ item.val }}</div>
+        <div class="jt-title-box">
+            <div class="title-item" v-for="(item, index) in titleList" :key="index">
+                <span>{{ item.label }}</span>
+                <span>{{ item.dw }}</span>
             </div>
         </div>
+        <div class="jt-content-box">
+            <div class="content-item" v-for="(ite, ind) in contentList" :key="ind">{{ ite.value }}</div>
+        </div>
+
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from 'vue'
 
-let jtzbList = reactive([
-    { id: 0, label: '游离二氧化硅', val: 0 },
-    { id: 1, label: '分散度', val: 0 },
-    { id: 2, label: '煤尘爆炸性', val: 0 },
-    { id: 3, label: '火焰长度', val: 0 },
-    { id: 4, label: '最低岩粉量', val: 0 },
+let titleList = reactive<any[]>([
+    { label: '火焰长度', dw: '(mm)' },
+    { label: '抑制煤层爆炸最低岩粉量', dw: '(%)' },
+    { label: '鉴定结论', dw: '' },
+])
+
+let contentList = reactive<any[]>([
+    { value: '>400' },
+    { value: '75' },
+    { value: '有煤层爆炸性' },
 ])
+
 </script>
 
 <style lang="less" scoped>
 .dustJtzb {
     display: flex;
     position: relative;
-    box-sizing: border-box;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: flex-start;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
-    padding-top: 10px;
 
-    .jtZb-box {
+    .jt-title-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 45px;
+        border: 1px solid #1d7995;
+
+        .title-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            background: linear-gradient(to bottom, rgb(19 93 128 / 20%), rgb(19 93 128 / 90%));
+            color: #1da5e3;
+            font-size: 14px;
+
+            &:nth-child(1) {
+                flex: 1;
+            }
+
+            &:nth-child(2) {
+                flex: 2;
+                border-right: 1px solid #1d7995;
+                border-left: 1px solid #1d7995;
+            }
+
+            &:nth-child(3) {
+                flex: 1;
+            }
+
+        }
+
+    }
+
+    .jt-content-box {
         display: flex;
         align-items: center;
-        justify-content: center;
-        width: 30.5%;
-        height: 60px;
-        margin: 0 5px;
+        justify-content: space-between;
+        width: 100%;
+        height: 70px;
+        border-right: 1px solid #1d7995;
+        border-bottom: 1px solid #1d7995;
+        border-left: 1px solid #1d7995;
 
-        .jtZb-content {
+        .content-item {
             display: flex;
             align-items: center;
-            justify-content: space-around;
-            width: 170px;
-            height: 40px;
-            background: url('../../../../../assets/images/dust/dusthome/jtzb.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .jtZb-label {
-                color: #fff;
-                // font-size: 14px;
+            justify-content: center;
+            height: 100%;
+            color: #fff;
+            font-size: 14px;
+
+            &:nth-child(1) {
+                flex: 1;
             }
 
-            .jtZb-val {
-                color: #1fb3f7;
-                // font-size: 14px;
+            &:nth-child(2) {
+                flex: 2;
+                border-right: 1px solid #1d7995;
+                border-left: 1px solid #1d7995;
             }
+
+            &:nth-child(3) {
+                flex: 1;
+            }
+
         }
+
     }
+
+
+
+
 }
 </style>

src/views/vent/dust/dustHome/index.vue

@@ -94,6 +94,8 @@
             :moduleName="'粉尘静态指标'"
             :contentStyle="{ contentH: '160px' }"
             commonTitle="selected"
+            :selectList="selectListJt"
+            :selectValue="jtzbCode"
           >
             <dustJtzb />
           </DanelBd>
@@ -150,6 +152,14 @@
     { label: '水阀', val: 0 },
   ]);
 
+  //粉尘静态指标数据
+  let selectListJt=reactive<any[]>([
+    {label:'8#煤层',value:'0'},
+    {label:'9#煤层',value:'1'},
+    {label:'10#煤层',value:'2'},
+  ])
+  let jtzbCode=ref('0')
+
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;
   function getMonitor() {