修改了瓦斯抽放的样式

src/assets/scss/index.css

@@ -6,7 +6,7 @@
   width: 1600px;
   height: 750px;
   color: white;
-  border: 1px solid white;
+  /* border: 1px solid white; */
 }
 #apppp .mainbox button {
   position: absolute;
@@ -24,10 +24,8 @@
 }
 #apppp .mainbox .motor1 { 
   position: absolute;
-  border: 1px solid grey;
   border-radius: 5%;
-  /* left: 1295px; */
-  right: 35px;
+  right: 60px;
   top: 0px;
   width: 270px;
   height: 200px;
@@ -36,10 +34,12 @@
 #apppp .mainbox .motor1 h3 {
   position: absolute;
   left: 5px;
+  color:#4ADEFE;
   font-size: 15px;
 }
 #apppp .mainbox .motor1 div{ 
   position: relative;
+  color:#4ADEFE;
   left: 5px;
   margin-top: 5px;
   top: 10px;
@@ -51,15 +51,14 @@
   margin-bottom: 5px;
 }
 #apppp .mainbox .motor1 div section div p {
-  background-color: green;
   margin-right: 10px;
   margin-left: 5px;
   width: 40px;
   text-align: center;
+  color: #F3DB5C;
 }
 #apppp .mainbox .motor2 {
   position: absolute;
-  border: 1px solid grey;
   border-radius: 5%;
   overflow: hidden;
   /* left: 1300px; */
@@ -73,8 +72,10 @@
   position: absolute;
   left: 5px;
   font-size: 15px;
+  color:#4ADEFE;
 }
 #apppp .mainbox .motor2 div {
+  color:#4ADEFE;
   position: relative;
   margin-top: 5px;
   left: 3px;
@@ -87,11 +88,11 @@
   margin-bottom: 5px;
 }
 #apppp .mainbox .motor2 div section div p {
-  background-color: green;
   margin-right: 10px;
   margin-left: 5px;
   width: 40px;
   text-align: center;
+  color: #F3DB5C;
 }
 #apppp .mainbox .pipeline {
   position: absolute;
@@ -100,13 +101,14 @@
   top: 60px;
   width: 455px;
   height: 51px;
-  border: 1px solid white;
 }
 #apppp .mainbox .pipeline div {
   flex: 3;
   margin-left: 1px;
   margin-right: 1px;
+  color: #4ADEFE;
   margin-top: 2px;
+  
 }
 #apppp .mainbox .pipeline div div {
   text-align: center;
@@ -114,11 +116,10 @@
 }
 #apppp .mainbox .pipeline div p {
   text-align: center;
-  background-color: green;
   font-size: 12px;
+  color: #F3DB5C;
 }
 #apppp .mainbox .waterpump {
-  border: 1px solid grey;
   border-radius: 5%;
   position: absolute;
   overflow: hidden;
@@ -127,49 +128,59 @@
   width: 163px;
 }
 #apppp .mainbox .waterpump h3 {
+  color: #4ADEFE; 
   font-size: 17px;
 }
 #apppp .mainbox .waterpump div {
   display: flex;
   font-size: 14px;
+  color: #4ADEFE;
 }
 #apppp .mainbox .waterpump div p {
-  color: black;
-  margin-left: 20px;
   width: 80px;
   text-align: center;
-}
-#apppp .mainbox .waterpump div p:nth-child(1) {
-  background-color: green;
-}
-#apppp .mainbox .waterpump div p:nth-child(2) {
-  background-color: #E71B64;
+  color: #F3DB5C;
 }
 #apppp .mainbox .tank1 {
   width: 75px;
   position: absolute;
-  background-color: green;
+  /* background-color: green; */
   left: 140px;
   top: 278px;
 }
 #apppp .mainbox .tank1 div {
   display: flex;
   font-size: 12px;
+  color:#4ADEFE;
+  
+}
+#apppp .mainbox .tank1 div p{
+  display: flex;
+  font-size: 12px;
+  margin-left: 5px;
+  color:#F3DB5C;
 }
 #apppp .mainbox .tank2 {
   width: 75px;
   position: absolute;
-  background-color: green;
+  /* background-color: green; */
   left: 142px;
   top: 530px;
+
 }
 #apppp .mainbox .tank2 div {
   display: flex;
   font-size: 12px;
+  color:#4ADEFE;
+}
+#apppp .mainbox .tank2 div p{
+  display: flex;
+  font-size: 12px;
+  margin-left: 5px;
+  color:#F3DB5C;
 }
 #apppp .mainbox .tower {
   position: absolute;
-  border: 1px solid grey;
   border-radius: 5%;
   overflow: hidden;
   left: 150px;
@@ -181,26 +192,19 @@
   overflow: hidden;
   margin-top: 1px;
   display: flex;
+  color: #4ADEFE;
   font-size: 15px;
   margin-bottom: 1px;
 }
 #apppp .mainbox .tower div p {
   margin-left: 10px;
-  color: black;
-  background-color: green;
   margin-right: 1px;
   width: 50px;
   text-align: center;
-}
-#apppp .mainbox .tower div p:nth-child(1) {
-  background-color: green;
-}
-#apppp .mainbox .tower div p:nth-child(2) {
-  background-color: #E71B64;
+  color: #F3DB5C;
 }
 #apppp .mainbox .pumps {
   position: absolute;
-  border: 1px solid grey;
   border-radius: 5%;
   left: 1090px;
   top: 163px;
@@ -208,23 +212,18 @@
 }
 #apppp .mainbox .pumps h3 {
   font-size: 17px;
+  color: #4ADEFE;
 }
 #apppp .mainbox .pumps div {
   display: flex;
   font-size: 14px;
+  color: #4ADEFE;
 }
 #apppp .mainbox .pumps div p {
-  background-color: green;
-  color: black;
-  margin-left: 20px;
+  margin-left: 0px;
   width: 80px;
   text-align: center;
-}
-#apppp .mainbox .pumps div p:nth-child(1) {
-  background-color: green;
-}
-#apppp .mainbox .pumps div p:nth-child(2) {
-  background-color: #E71B64;
+  color: #F3DB5C;
 }
 #apppp .mainbox img{
   position: relative;
@@ -285,7 +284,7 @@
 #apppp {
   color: white;
   width: 1600px;
-  height: 750px;
+  height: 850px;
   /* position: absolute; */
   background-image: linear-gradient(to right, #06133c 0%, #011669 50%, #06133c 100%);;
 }

src/assets/scss/index.scss

@@ -124,8 +124,7 @@
       .bototm-box {
         margin-top: 10px; 
         display: grid;
-        gap: 10px;
-        grid-template-columns: 700px 600px;  
+        grid-template-columns: 650px 650px;  
       }
     }
   }

src/components/tunneling/dashBoard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="myChart"
-    style="width: 190px; height: 190px"
+    style="width: 160px; height: 160px"
   ></div>
 </template>
  
@@ -36,7 +36,7 @@ export default {
     updateChart() {
       const option = {
         grid: {
-          height: 200,
+          height: 160,
           left: 0,
           top: 0,
           bottom: 0,

src/components/tunneling/hard.vue

@@ -1,5 +1,5 @@
 <template>
-<div id="hard" style="width: 180px;height: 310px;margin-top:-15px"></div>
+<div id="hard" style="width: 180px;height: 300px;"></div>
 </template>
  
 <script >

src/components/tunneling/rtop.vue

@@ -2,14 +2,14 @@
 <div id="rtop">
     <ul>
         <li>
-            瓦斯涌出量:<span>{{data.wasi_after}}</span>m^3/min
+            瓦斯涌出量:<span style="width:100px">{{data.wasi_after}}</span>m^3/min
             <span 
             style="width:30px; height:30px; border:1px solid red; border-radius:50%;margin-left:30px; "
              v-bind:class="{red1:data.danger, green1:data.safety}">
              </span>
         </li>
         <li>
-            粉 尘 浓 度 :<span>{{data.fenchen_after}}</span>g/m^3
+            粉 尘 浓 度 :<span style="width:100px">{{data.fenchen_after}}</span>g/m^3
             <span
              style="width:30px; height:30px; border:1px solid red; border-radius:50%; margin-left:50px;"
              v-bind:class="{red1:data.danger1, green1:data.safety1}">
@@ -109,7 +109,8 @@ export default {
 <style scoped>
 #rtop{
     text-align: center;
-    padding-top: 10px;
+    padding-top: 40px;
+    padding-bottom: 40px;
 }
 li{
     width: 100%;
@@ -129,7 +130,7 @@ span{
     width: 1.875rem;
     height: 1.625rem;
     /* background-color: rgb(133, 158, 231); */
-    margin: 0 .325rem .25rem; 
+    margin: 0 .325rem .25rem 1rem; 
     text-align: center;
       color: #F3DB5C;
       font-size: 25px;

src/components/tunneling/ruler.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="rulerChart" style="width: 180px;height: 240px;"></div>
+  <div id="rulerChart" style="width: 180px;height: 300px;"></div>
 </template>
 
 <script>

src/components/tunneling/six/five.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="five"
-   style="width: 190px; height: 190px"
+   style="width: 160px; height: 160px"
   ></div>
 </template>
  
@@ -38,7 +38,7 @@ export default {
 
       const option = {
         grid: {
-          height: 200,
+          height: 160,
           left: 0,
           top: 0,
           bottom: 0,

src/components/tunneling/six/four.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="four"
-   style="width: 190px; height: 190px"
+   style="width: 160px; height: 160px"
   ></div>
 </template>
  
@@ -38,7 +38,7 @@ export default {
 
       const option = {
         grid: {
-          height: 200,
+          height: 160,
           left: 0,
           top: 0,
           bottom: 0,

src/components/tunneling/six/one.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="one"
-   style="width: 190px; height: 190px"
+   style="width: 160px; height: 160px"
   ></div>
 </template>
  
@@ -39,7 +39,7 @@ export default {
 
       const option = {
         grid: {
-          height: 200,
+          height: 160,
           left: 0,
           top: 0,
           bottom: 0,

src/components/tunneling/six/three.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="three"
-   style="width: 190px; height: 190px"
+   style="width: 160px; height: 160px"
   ></div>
 </template>
  
@@ -38,7 +38,7 @@ export default {
 
       const option = {
         grid: {
-          height: 200,
+          height: 160,
           left: 0,
           top: 0,
           bottom: 0,

src/components/tunneling/six/two.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="two"
-   style="width: 190px; height: 190px"
+   style="width: 160px; height: 160px"
   ></div>
 </template>
  
@@ -39,7 +39,7 @@ export default {
 
       const option = {
         grid: {
-          height: 200,
+          height: 160,
           left: 0,
           top: 0,
           bottom: 0,

src/components/tunneling/worklog.vue

@@ -50,7 +50,6 @@
     padding: 0 5px;
     line-height: 20px;
     text-align: center;
-    /* background: url("../img/bg1.png") no-repeat; */
     background-size: 100% 100%;
 }
 

src/views/gas/configImg/bottomRight.vue

@@ -37,7 +37,7 @@ $box-width: 100%;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    height: $box-height - 30px;
+    height: $box-height - 35px;
     border-radius: 10px;
   }
   .text {

src/views/gas/configImg/index.vue

@@ -62,29 +62,30 @@
 
           <div class="body-box">
             <div class="content-box">
-              <div>
-                <dv-border-box-12>
-                  <centerLeft1 />
-                </dv-border-box-12>
-              </div>
-              <div>
+              <dv-border-box-12>
+                <centerLeft1 />
+              </dv-border-box-12>
+              <dv-border-box-12>
                 <center />
-              </div>
-
+              </dv-border-box-12>
               <div>
-                <dv-border-box-13>
+                <dv-border-box-12>
                   <centerRight1 />
-                </dv-border-box-13>
+                </dv-border-box-12>
               </div>
             </div>
 
             <div class="bototm-box">
-              <dv-border-box-13>
-                <bottomLeft />
-              </dv-border-box-13>
-              <dv-border-box-12>
-                <bottomRight />
-              </dv-border-box-12>
+              <div style="flex: 1">
+                <dv-border-box-12>
+                  <bottomLeft />
+                </dv-border-box-12>
+              </div>
+              <div style="flex: 1">
+                <dv-border-box-12>
+                  <bottomRight />
+                </dv-border-box-12>
+              </div>
             </div>
           </div>
         </div>
@@ -469,8 +470,14 @@ export default {
 @import "@/assets/scss/style.scss";
 #appp {
   width: 1700px;
-  height: 800px;
-  background-color: #14162b;
+  height: 850px;
   overflow: hidden;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+  position: relative;
 }
 </style>

src/views/gas/configImg/main.vue

@@ -128,41 +128,53 @@
         <h3>抽水泵状态</h3>
         <div>
           抽水泵1:
-          <p v-show="waterpumpstate[0] == 'true'">启动</p>
-          <p v-show="waterpumpstate[0] == 'false'">停止</p>
+          <p v-if="waterpumpstate[0] == 'true'">启动</p>
+          <p v-else>停止</p>
         </div>
         <div>
           抽水泵2:
-          <p v-show="waterpumpstate[1] == 'true'">启动</p>
-          <p v-show="waterpumpstate[1] == 'false'">停止</p>
+          <p v-if="waterpumpstate[1] == 'true'">启动</p>
+          <p v-else>停止</p>
         </div>
       </div>
       <div class="tower">
         <div>
           水塔状态:
-          <p v-show="tower.state == 'true'">启动</p>
-          <p v-show="tower.state == 'false'">停止</p>
+          <p v-if="tower.state == 'true'">启动</p>
+          <p v-else>停止</p>
         </div>
       </div>
       <div class="tank1">
-        <div>水温:{{ tank.temperature1 }}℃</div>
-        <div>水位:{{ tank.dept1 }}m</div>
+        <div>
+          水温
+          <p>{{ tank.temperature1 }}℃</p>
+        </div>
+        <div>
+          水位
+          <p>{{ tank.dept1 }}m</p>
+        </div>
       </div>
       <div class="tank2">
-        <div>水温:{{ tank.temperature2 }}℃</div>
-        <div>水位:{{ tank.dept2 }}m</div>
+        <div>
+          水温
+          <p>{{ tank.temperature2 }}℃</p>
+        </div>
+        <div>
+          水位
+          <p>{{ tank.dept2 }}m</p>
+        </div>
       </div>
       <div class="pumps">
         <h3>抽放泵状态</h3>
         <div>
           瓦斯泵1:
-          <p v-show="buttonstate[0].isStart">启动</p>
-          <p v-show="!buttonstate[0].isStart">停止</p>
+          <p v-if="buttonstate[0].isStart">启动</p>
+          <p v-else>停止</p>
         </div>
         <div>
           瓦斯泵2:
-          <p v-show="buttonstate[1].isStart">启动</p>
-          <p v-show="!buttonstate[1].isStart">停止</p>
+          <p v-if="buttonstate[1].isStart">启动</p>
+          <p v-else>停止</p>
         </div>
       </div>
       <div class="valveitem1">

src/views/tunnelling/zutai.vue

@@ -5,12 +5,12 @@
         <div class="left_top">
           <div class="left_top_main">
             <div class="ruler">
-              <span class="text" style="margin-top: 15px;">行走轨迹</span>
               <ruler></ruler>
+              <div class="text" style="margin-top: 20px;">行走轨迹</div>
             </div>
             <div class="hard">
-              <span class="text" style="margin-top: 15px;">割截轨迹</span>
               <hard></hard>
+              <div class="text" style="margin-top: 20px;">割截轨迹</div>
             </div>
 
           </div>
@@ -24,49 +24,49 @@
       <div class="data_middle">
         <!-- 六个仪表盘 -->
         <div class="middle_top">
-          <el-row style="padding-top:21px">
+          <el-row style="padding-top:40px">
             <el-col :span="8">
               <div class="grid-content bg-purple">
-                <span class="text">系统电压</span>
                 <dashBoard></dashBoard>
+                <span class="text">系统电压</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="grid-content bg-purple-light">
-                <span class="text">油泵电流</span>
                 <one></one>
+                <span class="text">油泵电流</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="grid-content bg-purple">
-                <span class="text">截低电流</span>
                 <two></two>
+                <span class="text">截低电流</span>
               </div>
             </el-col>
           </el-row>
-          <el-row style="margin-top:-48px">
+          <el-row style="margin-top:20px">
             <el-col :span="8">
               <div class="grid-content bg-purple">
-                <span class="text">截高电流</span>
                 <three></three>
+                <span class="text">截高电流</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="grid-content bg-purple-light">
-                <span class="text">二运电流</span>
                 <four></four>
+                <span class="text">二运电流</span>
               </div>
             </el-col>
             <el-col :span="8">
               <div class="grid-content bg-purple">
-                <span class="text">风机电流</span>
                 <five></five>
+                <span class="text">风机电流</span>
               </div>
             </el-col>
           </el-row>
         </div>
         <div class="middle_bootom">
-          <el-row>
+          <el-row style="padding-top:40px">
             <el-col :span="14">
               <div class="grid-content bg-purple">
                 <!-- 掘进机工作状态 -->
@@ -158,8 +158,7 @@ export default {
 .main1 {
   position: relative;
   width: 100%;
-  height: 800px;
-  /* background: url(../../assets/img/tunneling/bg.jpg) no-repeat !important; */
+  height: 850px;
   background-image: linear-gradient(
     to right,
     rgb(6, 19, 60) 0%,
@@ -206,7 +205,7 @@ export default {
 .left_bottom {
   width: 100%;
   height: 290px;
-  margin-top: 15px;
+  margin-top: 20px;
 
   background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
@@ -218,7 +217,7 @@ export default {
   /* background: white; */
 }
 .middle_bootom {
-  margin-top: 15px;
+  margin-top: 30px;
   width: 100%;
   height: 300px;
   background: url(../../assets/img/tunneling/dataBg.png) no-repeat;
@@ -289,7 +288,7 @@ export default {
   background-size: 100%;
 }
 .right_bootom {
-  margin-top: 15px;
+  margin-top: 30px;
   width: 100%;
   height: 300px;
 
@@ -323,7 +322,7 @@ export default {
   border-radius: 4px;
 }
 .grid-content {
-  border-radius: 4px;
+  border-radius: 40px;
   min-height: 36px;
 }
 .row-bg {