火灾首页，粉尘首页界面样式修改-提交

src/views/vent/common/danelBd.vue

@@ -163,7 +163,8 @@ watch(
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 43px;
+    // height: 43px;
+    height: 32px;
     padding: 0 10px;
     background: url('../../../assets/images/fire/firehome/title-1.png') no-repeat center;
     background-size: 100% 100%;
@@ -182,7 +183,7 @@ watch(
       span {
         margin-left: 10px;
         color: #a1dff8;
-        font-size: 18px;
+        font-size: 16px;
       }
     }
 
@@ -200,7 +201,7 @@ watch(
       span {
         margin-left: 10px;
         color: #a1dff8;
-        font-size: 18px;
+        font-size: 16px;
       }
     }
 
@@ -253,14 +254,16 @@ watch(
       display: flex;
       align-items: center;
       justify-content: space-around;
-      width: 70%;
+      width: 90%;
 
       .status-text {
         color: #1fb3f7;
+        font-size: 14px;
       }
 
       .status-text1 {
         color: #a1dff8;
+        font-size: 14px;
       }
     }
   }
@@ -269,7 +272,7 @@ watch(
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    padding: 10px 15px;
+    padding: 10px;
     background: url('../../../assets/images/fire/firehome/title-3.png') no-repeat center;
     background-size: 100% 100%;
 
@@ -279,7 +282,7 @@ watch(
       left: 0;
       width: 100%;
       padding: 10px 15px;
-      background: url('../../../assets/images/fire/firehome/title-3.png') no-repeat center;
+      background: url('../../../assets/images/fire/firehome/title-4.png') no-repeat center;
       background-size: 100% 100%;
 
 
@@ -288,6 +291,7 @@ watch(
 }
 
 :deep(.vMonitor-select-selector) {
+  height: 22px !important;
   border: none !important;
   background-color: rgb(15 64 88) !important;
   color: #a1dff8 !important;
@@ -326,7 +330,7 @@ watch(
 }
 
 :deep(.vMonitor-switch) {
-  min-width: 55px !important;
+  min-width: 48px !important;
 }
 
 :deep(.vMonitor-switch-checked) {

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

@@ -103,9 +103,9 @@ watch(() => props.pwData, (newP, oldP) => {
 
     .fall-left-box {
         position: relative;
-        width: calc(50% - 15px);
+        width: calc(50% - 10px);
         height: 100%;
-        margin-right: 15px;
+        margin-right: 10px;
 
         .box-c {
             position: absolute;

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

@@ -47,10 +47,12 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
 
     .dust-gl-box {
         display: flex;
+        box-sizing: border-box;
         align-items: center;
         justify-content: center;
         width: 50%;
-        height: 66px;
+        height: 60px;
+        padding-top: 10px;
 
         .gl-box-content {
             position: relative;
@@ -60,18 +62,20 @@ watch(() => props.dustGlzbData, (newD, oldD) => {
             .gl-label {
                 position: absolute;
                 top: 50%;
-                left: 74px;
+                left: 49px;
                 transform: translate(0, -50%);
                 color: #fff;
+                font-size: 12px;
             }
 
             .gl-val {
                 position: absolute;
                 top: 50%;
-                right: 36px;
+                right: 24px;
                 transform: translate(0, -40%);
                 color: #1fb3f7;
                 font-family: douyuFont;
+                font-size: 14px;
             }
         }
 

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

@@ -25,18 +25,21 @@ let jtzbList = reactive([
 .dustJtzb {
     display: flex;
     position: relative;
+    box-sizing: border-box;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: flex-start;
     width: 100%;
     height: 100%;
+    padding-top: 10px;
 
     .jtZb-box {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 33.33%;
+        width: 30.5%;
         height: 60px;
+        margin: 0 5px;
 
         .jtZb-content {
             display: flex;
@@ -49,11 +52,14 @@ let jtzbList = reactive([
 
             .jtZb-label {
                 color: #fff;
+                // font-size: 14px;
             }
 
             .jtZb-val {
                 color: #1fb3f7;
+                // font-size: 14px;
             }
         }
     }
-}</style>
+}
+</style>

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

@@ -22,8 +22,8 @@
         </div>
         <!-- 左中区域 -->
         <div class="left-c">
-          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '600px' }">
-            <workJc :heightT="'26%'" :heightB="'74%'" :cardData="cardData" :echartData="echartDataWork" />
+          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '645px' }">
+            <workJc :heightT="'22%'" :heightB="'78%'" :cardData="cardData" :echartData="echartDataWork" />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
@@ -36,7 +36,7 @@
           <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <div class="center-b">
-          <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '277px' }" :commonTitle="'selected'"
+          <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '288px' }" :commonTitle="'selected'"
             :selectList="selectListBd" :selectValue="sensorCode" @changeSelect="changeSelect">
             <multipleDust :echartData="echartData" />
           </DanelBd>
@@ -45,21 +45,21 @@
       <div class="right-area">
         <!-- 右上区域 -->
         <div class="right-t">
-          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '295px' }">
+          <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '305px' }">
             <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
               :unInterTotal="unInterTotal" :pwData="pwData" />
           </DanelBd>
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '230px' }" commonTitle="selected"
+          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '250px' }" commonTitle="selected"
             :selectList="selectListBd" :selectValue="sensorCode" @changeSelect="changeSelect1">
             <dustGlzb :dustGlzbData="dustGlzbData" />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '150px' }" commonTitle="selected">
+          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '160px' }" commonTitle="selected">
             <dustJtzb />
           </DanelBd>
         </div>
@@ -276,14 +276,16 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      width: 30%;
+      // width: 30%;
+      width: 392px;
       height: 100%;
       margin-right: 15px;
 
       .left-t {
         position: relative;
         width: 100%;
-        height: 121px;
+        // height: 121px;
+        height: 100px;
         background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
         background-size: 100% 100%;
 
@@ -297,7 +299,7 @@ onMounted(() => {
           justify-content: space-around;
           width: 100%;
           height: 90px;
-          padding: 0 20px;
+          padding: 0 15px;
           transform: translate(0, -50%);
 
           .tcontent-l {
@@ -308,8 +310,8 @@ onMounted(() => {
             justify-content: center;
             height: 100%;
             color: #9da5aa;
-            font-size: 16px;
-            letter-spacing: 3px;
+            font-size: 14px;
+            letter-spacing: 2px;
           }
 
           .tcontent-c {
@@ -329,8 +331,8 @@ onMounted(() => {
             justify-content: center;
             height: 100%;
             color: #9da5aa;
-            font-size: 16px;
-            letter-spacing: 3px;
+            font-size: 14px;
+            letter-spacing: 2px;
           }
         }
       }
@@ -349,8 +351,7 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      width: calc(40% - 30px);
-      height: 100%;
+      width: calc(100% - 814px);
 
       .center-t {
         width: 100%;
@@ -370,7 +371,8 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      width: 30%;
+      // width: 30%;
+      width: 392px;
       height: 100%;
       margin-left: 15px;
 

src/views/vent/fire/fireHome/components/emptyJc.vue

@@ -289,12 +289,14 @@ watch(() => props.emptyData, (newE, oldE) => {
     }
 
     .empty-label {
+      margin-bottom: 5px;
       color: #9da5aa;
+      font-size: 14px;
     }
 
     .empty-val {
       color: #fff;
-      font-size: 18px;
+      font-size: 14px;
     }
   }
 }

src/views/vent/fire/fireHome/components/outFireJc.vue

@@ -45,8 +45,8 @@
 
     .outFire-box {
       position: relative;
-      width: 157px;
-      height: 160px;
+      width: 105px;
+      height: 145px;
       background: url('../../../../../assets/images/fire/firehome/miehuo.png') no-repeat center;
       background-size: 100% 100%;
 
@@ -81,8 +81,8 @@
 
       &:nth-child(1) .outFire-icon {
         position: absolute;
-        top: 64px;
-        left: 54px;
+        top: 54px;
+        left: 28px;
         width: 53px;
         height: 77px;
         background: url('../../../../../assets/images/fire/firehome/temp.png') no-repeat center;
@@ -91,18 +91,18 @@
 
       &:nth-child(2) .outFire-icon {
         position: absolute;
-        top: 72px;
-        left: 34px;
-        width: 89px;
-        height: 67px;
+        top: 65px;
+        left: 13px;
+        width: 80px;
+        height: 58px;
         background: url('../../../../../assets/images/fire/firehome/co1.png') no-repeat center;
         background-size: 100% 100%;
       }
 
       &:nth-child(3) .outFire-icon {
         position: absolute;
-        top: 71px;
-        left: 42px;
+        top: 61px;
+        left: 16px;
         width: 74px;
         height: 74px;
         background: url('../../../../../assets/images/fire/firehome/smoke.png') no-repeat center;

src/views/vent/fire/fireHome/components/substationJc.vue

@@ -64,8 +64,8 @@ function getOption() {
 
       grid: {
         top: '20%',
-        left: '3%',
-        right: '3%',
+        left: '6%',
+        right: '6%',
         bottom: '0%',
         containLabel: true,
       },

src/views/vent/fire/fireHome/components/systemJc.vue

@@ -23,17 +23,18 @@
 
     .systemJc-box {
       position: relative;
-      width: 222px;
+      width: 168px;
       height: 100%;
       background: url('../../../../../assets/images/fire/firehome/zu-14578.png') no-repeat center;
       background-size: 100% 100%;
 
       .system-label {
         position: absolute;
-        top: 8px;
+        top: 14px;
         left: 50%;
         transform: translate(-50%, 0);
         color: #fff;
+        font-size: 14px;
       }
     }
   }

src/views/vent/fire/fireHome/components/workJc.vue

@@ -71,36 +71,36 @@ let fxLenged = reactive([
     name: '低风险',
     value: 1,
   },
-  {
-    name: '中风险',
-    value: 2,
-  },
-  {
-    name: '高风险',
-    value: 3,
-  },
-  {
-    name: '报警',
-    value: 4,
-  },
-  {
-    name: '正常',
-    value: 5,
-  },
+  // {
+  //   name: '中风险',
+  //   value: 2,
+  // },
+  // {
+  //   name: '高风险',
+  //   value: 3,
+  // },
+  // {
+  //   name: '报警',
+  //   value: 4,
+  // },
+  // {
+  //   name: '正常',
+  //   value: 5,
+  // },
 ]);
 
 let cardList = ref<any[]>([]);
 
 function getOption() {
   nextTick(() => {
-    let color = ['#0CD2E6', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];
+    let color = ['#1fb3f7', '#3751E6', '#FFC722', '#886EFF', '#008DEC', '#114C90', '#00BFA5'];
 
     let seriesData = [
       { name: '低风险', value: 30 },
-      { name: '中风险', value: 10 },
-      { name: '高风险', value: 15 },
-      { name: '报警', value: 23 },
-      { name: '正常', value: 10 },
+      // { name: '中风险', value: 10 },
+      // { name: '高风险', value: 15 },
+      // { name: '报警', value: 23 },
+      // { name: '正常', value: 10 },
     ];
 
     let myChart = echarts.init(ring.value);
@@ -201,15 +201,15 @@ onMounted(() => {
       }
 
       position: relative;
-      width: 180px;
+      width: 140px;
       height: 100%;
 
       .echart-yh {
         position: absolute;
         top: 50%;
         left: 50%;
-        width: 100px;
-        height: 100px;
+        width: 90px;
+        height: 90px;
         transform: translate(-50%, -50%);
         background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
         background-size: 100% 100%;
@@ -217,10 +217,10 @@ onMounted(() => {
 
       .echart-line {
         position: absolute;
-        top: 8%;
-        left: 15%;
-        width: 125px;
-        height: 125px;
+        top: 7%;
+        left: 10%;
+        width: 110px;
+        height: 110px;
         animation: rotationLine 10s linear infinite;
         background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
         background-size: 100% 100%;
@@ -238,10 +238,12 @@ onMounted(() => {
 
     .workJc-r {
       display: flex;
+      box-sizing: border-box;
       align-items: center;
-      justify-content: space-around;
-      width: calc(100% - 180px);
+      justify-content: flex-start;
+      width: calc(100% - 140px);
       height: 100%;
+      padding-left: 10px;
 
       .fx-box {
         display: flex;

src/views/vent/fire/fireHome/index.vue

@@ -22,8 +22,8 @@
         </div>
         <!-- 左中区域 -->
         <div class="left-c">
-          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '372px' }">
-            <workJc :heightT="'45%'" :heightB="'55%'" :echartData="echartDataWork" :cardData="cardData" />
+          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
+            <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
           </DanelBd>
         </div>
         <!-- 左下区域 -->
@@ -43,7 +43,7 @@
           <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
         </div>
         <div class="center-b">
-          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '277px' }"
+          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '289px' }"
             commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
             <fiberBunbleJc :bunbleData="bunbleData" />
           </DanelBd>
@@ -59,7 +59,7 @@
         <!-- 右中区域 -->
         <div class="right-c">
           <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
-            :selectList="selectListDs" @changeSelect="changeSelect">
+            :selectList="selectListDs" :selectValue="dsCode" @changeSelect="changeSelect">
             <outFireJc :outFireData="outFireData" />
           </DanelBd>
         </div>
@@ -72,7 +72,7 @@
         </div>
         <!-- 右底部区域 -->
         <div class="right-f">
-          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
+          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
             :selectList="selectListAq" :selectValue="pointCodeAq" @changeSelect="changeSelect">
             <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
           </DanelBd>
@@ -512,14 +512,16 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      width: 30%;
+      // width: 30%;
+      width: 392px;
       height: 100%;
       margin-right: 15px;
 
       .left-t {
         position: relative;
         width: 100%;
-        height: 121px;
+        // height: 121px;
+        height: 100px;
         background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
         background-size: 100% 100%;
 
@@ -533,7 +535,7 @@ onMounted(() => {
           justify-content: space-around;
           width: 100%;
           height: 90px;
-          padding: 0 20px;
+          padding: 0 15px;
           transform: translate(0, -50%);
 
           .tcontent-l {
@@ -544,8 +546,8 @@ onMounted(() => {
             justify-content: center;
             height: 100%;
             color: #9da5aa;
-            font-size: 16px;
-            letter-spacing: 3px;
+            font-size: 14px;
+            letter-spacing: 2px;
           }
 
           .tcontent-c {
@@ -565,8 +567,8 @@ onMounted(() => {
             justify-content: center;
             height: 100%;
             color: #9da5aa;
-            font-size: 16px;
-            letter-spacing: 3px;
+            font-size: 14px;
+            letter-spacing: 2px;
           }
         }
       }
@@ -589,7 +591,7 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      width: calc(40% - 30px);
+      width: calc(100% - 814px);
 
       .center-t {
         width: 100%;
@@ -609,7 +611,8 @@ onMounted(() => {
       flex-direction: column;
       align-items: center;
       justify-content: space-between;
-      width: 30%;
+      // width: 30%;
+      width: 392px;
       height: 100%;
       margin-left: 15px;