修复了瓦斯抽放的BUG

src/views/gas/configImg/center.vue

@@ -3,14 +3,14 @@
     <div class="up">
       <div class="item">
         <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>瓦斯泵工作时间:{{ this.avgtime }} S</p>
+          <p>瓦斯泵工作时间:0 S</p>
         </div>
         <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>瓦斯泵平均功率:{{ this.avgpower }} w</p>
+          <p>瓦斯泵平均功率:20 w</p>
         </div>
         <div class="ml-3 colorBlue fw-b fs-xl">
           <p>
-            管道瓦斯含量:{{ this.getres()[this.int].Pipe.GasConcentration }}
+            管道瓦斯含量: 0
           </p>
         </div>
       </div>
@@ -19,52 +19,12 @@
 </template>
 
 <script>
-import axios from "axios";
 
 export default {
   data() {
     return {
-      avgpower: 0,
-      avgtime: 0,
     };
   },
-  inject: ["getint", "getres", "getweb"],
-  computed: {
-    int() {
-      return this.getint();
-    },
-    res() {
-      return this.getres();
-    },
-    web() {
-      return this.getweb();
-    },
-  },
-  mounted() {
-    this.realtimegetdata();
-  },
-  beforeDestroy() {
-    clearInterval(this.timing);
-  },
-  methods: {
-    realtimegetdata() {
-      this.getdata();
-      setInterval(() => {
-        this.getdata();
-      }, 10000);
-    },
-    async getdata() {
-      const response = await axios.post("http://47.99.47.218:9071/getUptime");
-      if (this.web == 1) {
-        this.avgtime = JSON.stringify(response.data.GasPump1Uptime);
-        this.avgpower = JSON.stringify(response.data.GasPump1AvgPower);
-      }
-      if (this.web == 2) {
-        this.avgtime = JSON.stringify(response.data.GasPump2Uptime);
-        this.avgpower = JSON.stringify(response.data.GasPump2AvgPower);
-      }
-    },
-  },
 };
 </script>
 
@@ -92,25 +52,6 @@ export default {
         margin-bottom: 20px;
         height: 80px;
         width: 180px;
-        &:nth-child(2) {
-          p {
-            position: absolute;
-            top: -20px;
-            margin-top: 20%;
-            margin-left: 10%;
-            font-size: 18px;
-            height: 100px;
-            &:nth-child(2) {
-              left: 0px;
-              top: 20px;
-              width: 300px;
-              position: absolute;
-              margin-top: 10%;
-              margin-left: 40%;
-              font-size: 18px;
-            }
-          }
-        }
         p {
           position: absolute;
           margin-top: 15%;

src/views/gas/configImg/index.vue

@@ -94,15 +94,12 @@
 </template>
 
 <script>
-import drawMixin from "@/utils/drawMixin";
 import { formatTime } from "@/utils/index.js";
 import centerLeft1 from "./centerLeft1";
 import centerRight1 from "./centerRight1";
-import axios from "axios";
 import center from "./center";
 import bottomLeft from "./bottomLeft";
 import bottomRight from "./bottomRight";
-import mainview from "./main";
 export default {
   data() {
     return {
@@ -111,7 +108,6 @@ export default {
       dateYear: null,
       dateWeek: null,
       weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
-      webstate1: 0,
       int: 4,
       sum: 0,
       update: 0,
@@ -443,7 +439,9 @@ export default {
     bottomRight,
   },
   mounted() {
-    this.getData();
+    this.dateDay = formatTime(new Date(), "HH: mm: ss");
+    this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
+    this.dateWeek = this.weekday[new Date().getDay()];
     this.timeFn();
   },
   beforeDestroy() {
@@ -462,141 +460,6 @@ export default {
         this.dateWeek = this.weekday[new Date().getDay()];
       }, 1000);
     },
-    async getData() {
-      const response = await axios.post(
-        "http://47.99.47.218:9071/getLatest?count=5"
-      );
-      this.int = 0;
-      this.sum = 0;
-      for (var i in response.data) {
-        this.sum++;
-      }
-      this.sum--;
-
-      for (i in response.data) {
-        this.res[this.sum - this.int].PipeValves.Pump1Enabled = JSON.stringify(
-          response.data[i].PipeValves.Pump1Enabled
-        );
-        this.res[this.sum - this.int].PipeValves.Pump2Enabled = JSON.stringify(
-          response.data故障设备[i].PipeValves.Pump2Enabled
-        );
-        this.res[this.sum - this.int].PipeValves.Pump3Enabled = JSON.stringify(
-          response.data[i].PipeValves.Pump3Enabled
-        );
-        this.res[this.sum - this.int].PipeValves.Pump4Enabled = JSON.stringify(
-          response.data[i].PipeValves.Pump4Enabled
-        );
-        this.res[this.sum - this.int].PipeValves.Pump5Enabled = JSON.stringify(
-          response.data[i].PipeValves.Pump5Enabled
-        );
-        this.res[this.sum - this.int].PipeValves.Pump6Enabled = JSON.stringify(
-          response.data[i].PipeValves.Pump6Enabled
-        );
-        this.res[this.sum - this.int].GasPump1.PumpWaterSupply = JSON.stringify(
-          response.data[i].GasPump1.PumpWaterSupply
-        );
-        this.res[this.sum - this.int].GasPump2.PumpWaterSupply = JSON.stringify(
-          response.data[i].GasPump2.PumpWaterSupply
-        );
-        this.res[this.sum - this.int].GasPump1.InletValveEnabled =
-          JSON.stringify(response.data[i].GasPump1.InletValveEnabled);
-        this.res[this.sum - this.int].GasPump2.InletValveEnabled =
-          JSON.stringify(response.data[i].GasPump2.InletValveEnabled);
-        this.res[this.sum - this.int].GasPump1.OutletValveEnabled =
-          JSON.stringify(response.data[i].GasPump1.OutletValveEnabled);
-        this.res[this.sum - this.int].GasPump2.OutletValveEnabled =
-          JSON.stringify(response.data[i].GasPump2.OutletValveEnabled);
-        this.res[this.sum - this.int].GasPump1.PumpEnabled = JSON.stringify(
-          response.data[i].GasPump1.PumpEnabled
-        );
-        this.res[this.sum - this.int].GasPump2.PumpEnabled = JSON.stringify(
-          response.data[i].GasPump2.PumpEnabled
-        );
-        this.res[this.sum - this.int].CoolantPump1.PumpEnabled = JSON.stringify(
-          response.data[i].CoolantPump1.PumpEnabled
-        );
-        this.res[this.sum - this.int].CoolantPump2.PumpEnabled = JSON.stringify(
-          response.data[i].CoolantPump2.PumpEnabled
-        );
-        this.res[this.sum - this.int].CoolingTower.TowerEnabled =
-          JSON.stringify(response.data[i].CoolingTower.TowerEnabled);
-        this.res[this.sum - this.int].HighPool.Temperature = JSON.stringify(
-          response.data[i].HighPool.Temperature
-        );
-        this.res[this.sum - this.int].HighPool.WaterLevel = JSON.stringify(
-          response.data[i].HighPool.WaterLevel
-        );
-        this.res[this.sum - this.int].LowPool.Temperature = JSON.stringify(
-          response.data[i].LowPool.Temperature
-        );
-        this.res[this.sum - this.int].LowPool.WaterLevel = JSON.stringify(
-          response.data[i].LowPool.WaterLevel
-        );
-        this.res[this.sum - this.int].Pipe.PipeNegativePressure =
-          JSON.stringify(response.data[i].Pipe.PipeNegativePressure);
-        this.res[this.sum - this.int].Pipe.PumpingTemperature = JSON.stringify(
-          response.data[i].Pipe.PumpingTemperature
-        );
-        this.res[this.sum - this.int].Pipe.GasConcentration = JSON.stringify(
-          response.data[i].Pipe.GasConcentration
-        );
-        this.res[this.sum - this.int].Pipe.Flow = JSON.stringify(
-          response.data[i].Pipe.Flow
-        );
-        this.res[this.sum - this.int].GasPump1.MotorCurrent = JSON.stringify(
-          response.data[i].GasPump1.MotorCurrent
-        );
-        this.res[this.sum - this.int].GasPump1.MotorVoltage = JSON.stringify(
-          response.data[i].GasPump1.MotorVoltage
-        );
-        this.res[this.sum - this.int].GasPump1.PumpTemperature = JSON.stringify(
-          response.data[i].GasPump1.PumpTemperature
-        );
-        this.res[this.sum - this.int].GasPump1.MotorPhaseTemperatureA =
-          JSON.stringify(response.data[i].GasPump1.MotorPhaseTemperatureA);
-        this.res[this.sum - this.int].GasPump1.MotorPhaseTemperatureB =
-          JSON.stringify(response.data[i].GasPump1.MotorPhaseTemperatureB);
-        this.res[this.sum - this.int].GasPump1.MotorPhaseTemperatureC =
-          JSON.stringify(response.data[i].GasPump1.MotorPhaseTemperatureC);
-        this.res[this.sum - this.int].GasPump1.MotorFrontShaftTemperature =
-          JSON.stringify(response.data[i].GasPump1.MotorFrontShaftTemperature);
-        this.res[this.sum - this.int].GasPump1.MotorRearShaftTemperature =
-          JSON.stringify(response.data[i].GasPump1.MotorRearShaftTemperature);
-        this.res[this.sum - this.int].GasPump1.ReducerShaftTemperature =
-          JSON.stringify(response.data[i].GasPump1.ReducerShaftTemperature);
-        this.res[this.sum - this.int].GasPump2.MotorCurrent = JSON.stringify(
-          response.data[i].GasPump2.MotorCurrent
-        );
-        this.res[this.sum - this.int].GasPump2.MotorVoltage = JSON.stringify(
-          response.data[i].GasPump2.MotorVoltage
-        );
-        this.res[this.sum - this.int].GasPump2.PumpTemperature = JSON.stringify(
-          response.data[i].GasPump2.PumpTemperature
-        );
-        this.res[this.sum - this.int].GasPump2.MotorPhaseTemperatureA =
-          JSON.stringify(response.data[i].GasPump2.MotorPhaseTemperatureA);
-        this.res[this.sum - this.int].GasPump2.MotorPhaseTemperatureB =
-          JSON.stringify(response.data[i].GasPump2.MotorPhaseTemperatureB);
-        this.res[this.sum - this.int].GasPump2.MotorPhaseTemperatureC =
-          JSON.stringify(response.data[i].GasPump2.MotorPhaseTemperatureC);
-        this.res[this.sum - this.int].GasPump2.MotorFrontShaftTemperature =
-          JSON.stringify(response.data[i].GasPump2.MotorFrontShaftTemperature);
-        this.res[this.sum - this.int].GasPump2.MotorRearShaftTemperature =
-          JSON.stringify(response.data[i].GasPump2.MotorRearShaftTemperature);
-        this.res[this.sum - this.int].GasPump2.ReducerShaftTemperature =
-          JSON.stringify(response.data[i].GasPump2.ReducerShaftTemperature);
-        this.int++;
-      }
-      if (this.oldres != this.res) {
-        this.update = this.update + 1;
-      }
-      this.oldres = this.res;
-      if (this.int == 0) {
-        this.int = 0;
-      } else {
-        this.int = this.int - 1;
-      }
-    },
   },
 };
 </script>

src/views/tunnelling/zutai.vue

@@ -1,323 +1,323 @@
 <template>
-    <div class="tunneling" >
-      <!-- <header class="screen-header">
+  <div class="tunneling">
+    <!-- <header class="screen-header">
        
           <h1 >掘进机远程智能控制系统</h1>
       </header> -->
-      <div class="screen-body">
-          <section class="screen-left">
-              <div id="left-top">
-                  <div id="left-top-left">
-                      <!-- 行走状态 -->
-                      <!-- <footState></footState> -->
-                      <ruler></ruler>
-                  </div>
-                  <div id="left-top-right">
-                      <!-- 割接轨迹 -->
-                      <hard></hard>
-                  </div>
-              </div>
-              <div id="left-mid">
-                     <!-- 压入式风机 -->
-                     <lmid></lmid>
-              </div>
-              <div id="left-bottom">
-                  <!-- 除尘风机 -->
-                  <lbottom></lbottom>
-              </div>
-          </section>
-          <section class="screen-middle">
-              <div id="middle-top">
-                <!-- 6个仪表盘 -->
-                <div id="line_1">
-                    <div id="top_1">
-                        <dashBoard></dashBoard>
-                    </div>
-                    <div id="top_2">
-                        <one></one>
-                    </div>
-                    <div id="top_3">
-                        <two></two>
-                    </div>
-                </div>
-                <div id="line_2">
-                    <div id="bottom_1">
-                        <three></three>
-                    </div>
-                    <div id="bottom_2">
-                        <four></four>
-                    </div>
-                    <div id="bottom_3">
-                        <five></five>                        
-                    </div>
-                </div>
-              </div>
-              <div id="middle-bottom">
-                  <div id="middle-bottom-left">
-                      <!-- 掘进机工作状态 -->
-                      <mbl2></mbl2>
-                  </div>
-                  <div id="middle-bottom-right">
-                      <div id="tem1">
-                        <!-- 油缸温度 -->
-                        <tempChart></tempChart>
-                      </div>
-                     <div id="tem2">
-                        <!-- 油位 -->
-                        <tempChart2></tempChart2>
-                      </div> 
-                  </div>
-              </div>
-          </section>
-          <section class="screen-right">
-              <div id="right-top">
-                  <!-- 掘进机控制系统 -->
-                  <rtop></rtop>
-              </div>
-              <div id="right-mid-one">
-                  <!-- 时间 ************************************************-->
-                  <current_time></current_time>
-              </div>
-              <div id="right-mid-two">
-                  <!-- 远控模式 -->
-                  <rtone></rtone>
-              </div>
-              <div id="right-bottom">
-                  <!-- 日志 -->
-                  <log></log>
-              </div>
-          </section>
-      </div>
+    <div class="screen-body">
+      <section class="screen-left">
+        <div id="left-top">
+          <div id="left-top-left">
+            <!-- 行走状态 -->
+            <!-- <footState></footState> -->
+            <ruler></ruler>
+          </div>
+          <div id="left-top-right">
+            <!-- 割接轨迹 -->
+            <hard></hard>
+          </div>
+        </div>
+        <div id="left-mid">
+          <!-- 压入式风机 -->
+          <lmid></lmid>
+        </div>
+        <div id="left-bottom">
+          <!-- 除尘风机 -->
+          <lbottom></lbottom>
+        </div>
+      </section>
+      <section class="screen-middle">
+        <div id="middle-top">
+          <!-- 6个仪表盘 -->
+          <div id="line_1">
+            <div id="top_1">
+              <dashBoard></dashBoard>
+            </div>
+            <div id="top_2">
+              <one></one>
+            </div>
+            <div id="top_3">
+              <two></two>
+            </div>
+          </div>
+          <div id="line_2">
+            <div id="bottom_1">
+              <three></three>
+            </div>
+            <div id="bottom_2">
+              <four></four>
+            </div>
+            <div id="bottom_3">
+              <five></five>
+            </div>
+          </div>
+        </div>
+        <div id="middle-bottom">
+          <div id="middle-bottom-left">
+            <!-- 掘进机工作状态 -->
+            <mbl2></mbl2>
+          </div>
+          <div id="middle-bottom-right">
+            <div id="tem1">
+              <!-- 油缸温度 -->
+              <tempChart></tempChart>
+            </div>
+            <div id="tem2">
+              <!-- 油位 -->
+              <tempChart2></tempChart2>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="screen-right">
+        <div id="right-top">
+          <!-- 掘进机控制系统 -->
+          <rtop></rtop>
+        </div>
+        <div id="right-mid-one">
+          <!-- 时间 ************************************************-->
+          <current_time></current_time>
+        </div>
+        <div id="right-mid-two">
+          <!-- 远控模式 -->
+          <rtone></rtone>
+        </div>
+        <div id="right-bottom">
+          <!-- 日志 -->
+          <log></log>
+        </div>
+      </section>
     </div>
+  </div>
 </template>
 
 <script>
-import current_time from '@/components/tunneling/current_time.vue'
-import dashBoard from '@/components/tunneling/dashBoard.vue'
-import one from '@/components/tunneling/six/one.vue'
-import two from '@/components/tunneling/six/two.vue'
-import three from '@/components/tunneling/six/three.vue'
-import four from '@/components/tunneling/six/four.vue'
-import five from '@/components/tunneling/six/five.vue'
-import tempChart from '@/components/tunneling/temporature.vue'
-import ruler from '@/components/tunneling/ruler.vue'
-import tempChart2 from '@/components/tunneling/temporature-two.vue'
-import rtop from '@/components/tunneling/rtop.vue'
-import mbl2 from '@/components/tunneling/mbl2.vue'
-import rtone from '@/components/tunneling/rtone.vue'
-import lmid from '@/components/tunneling/lmid.vue'
-import lbottom from '@/components/tunneling/lbottom.vue'
-import log from '@/components/tunneling/log.vue'
-import hard from '@/components/tunneling/hard.vue'
+import current_time from "@/components/tunneling/current_time.vue";
+import dashBoard from "@/components/tunneling/dashBoard.vue";
+import one from "@/components/tunneling/six/one.vue";
+import two from "@/components/tunneling/six/two.vue";
+import three from "@/components/tunneling/six/three.vue";
+import four from "@/components/tunneling/six/four.vue";
+import five from "@/components/tunneling/six/five.vue";
+import tempChart from "@/components/tunneling/temporature.vue";
+import ruler from "@/components/tunneling/ruler.vue";
+import tempChart2 from "@/components/tunneling/temporature-two.vue";
+import rtop from "@/components/tunneling/rtop.vue";
+import mbl2 from "@/components/tunneling/mbl2.vue";
+import rtone from "@/components/tunneling/rtone.vue";
+import lmid from "@/components/tunneling/lmid.vue";
+import lbottom from "@/components/tunneling/lbottom.vue";
+import log from "@/components/tunneling/log.vue";
+import hard from "@/components/tunneling/hard.vue";
 export default {
-    name:'组态',
-    components: {
-            current_time,
-            dashBoard,
-            tempChart,
-            tempChart2,
-            one,
-            two,
-            three,
-            four,
-            five,
-            ruler,
-            mbl2,
-            rtop,
-            rtone,
-            lmid,
-            lbottom,
-            log,
-            hard
-        },
-
-}
+  name: "组态",
+  components: {
+    current_time,
+    dashBoard,
+    tempChart,
+    tempChart2,
+    one,
+    two,
+    three,
+    four,
+    five,
+    ruler,
+    mbl2,
+    rtop,
+    rtone,
+    lmid,
+    lbottom,
+    log,
+    hard,
+  },
+};
 </script>
 
 <style scoped>
-.tunneling{
-    width: 100%;
-    height: 100%;
-}
-.home{
-    width: 100%;
-    height: 100%;
-    padding: 0 20px;
-    background-color: #161522;
-    color: #fff;
-    box-sizing: border-box;
-    position: relative;
+.tunneling {
+  width: 100%;
+  height: 100%;
+}
+.home {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  background-color: #161522;
+  color: #fff;
+  box-sizing: border-box;
+  position: relative;
 }
 .screen-container {
-    width: 100%;
-    height: 100%;
-    padding: 0 20px;
-    background-color: #161522;
-    color: #fff;
-    box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  background-color: #161522;
+  color: #fff;
+  box-sizing: border-box;
 }
 .screen-header {
-    width: 100%;
-    height: 64px;
-    font-size: 20px;
-    position: relative;
+  width: 100%;
+  height: 64px;
+  font-size: 20px;
+  position: relative;
 }
 h1 {
-    color: blue;
-    text-align: center;
-    margin: 0%;
-    height: 100%;
-
+  color: blue;
+  text-align: center;
+  margin: 0%;
+  height: 100%;
 }
 .screen-body {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    margin-top: 10px;
-}
-.screen-left{
-    height: 100%;
-    flex: 3;
-    display: flex;
-    flex-direction: column;
-}
-#left-top{
-    height: 33%;
-    display: flex;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-top-left{
-    flex: 3;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-top-right{
-    flex: 4;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-        
-#left-mid{
-    height: 33%;
-    margin-top: 10px;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-bottom{
-    height: 33%;
-    margin-top: 10px;
-    position: relative;  
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-.screen-middle{
-    height: 100%;
-    width: 41.5%;
-    margin-left: 1.6%;
-    margin-right: 1.6%;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#middle-top{
-    height: 60%;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    display: flex;
-    flex-direction: column;
-}
-#line_1{    
-    flex: 1;
-    display: flex;
-}
-#top_1{     
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#top_2{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#top_3{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#line_2{    
-    flex: 1;
-    display: flex;
-}
-#bottom_1{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#bottom_2{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#bottom_3{
-    flex: 1;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#middle-bottom{
-    height: 35%;
-    margin-top: 5px;
-    position: relative;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    display: flex;
-}
-#middle-bottom-left{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    margin-right: 0.1875rem;
-    flex:3;
-    position: relative; 
-    /* // 添加边角 */
-}
-#middle-bottom-right{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    margin-right: 0.1875rem;
-    width: 100%;
-    height: 100%;
-    flex: 2;
-    /* position: relative; */
-    display: flex;
-    /* // 添加边角 */
-}
-#tem1{
-    flex: 1;
-    width: 50%;
-    height: 100%;
-    /* position: relative; */
-}
-#tem2{
-    flex: 1;
-    width: 50%;
-    height: 100%;
-    /* position: relative; */
-}
-.screen-right{
-    flex: 2;
-    display: flex;
-    flex-direction: column ;
-    border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#right-top{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex:2
-}
-#right-mid-one{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex: 1;
-}
-#right-mid-two{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex: 2;
-}
-#right-bottom{
-    border: 1px solid rgba(25, 186, 139, 0.17);
-    margin-bottom: 0.1875rem;
-    flex: 5;
-} 
+  width: 100%;
+  height: 100%;
+  display: flex;
+  margin-top: 10px;
+  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+  position: relative;
+}
+.screen-left {
+  height: 100%;
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+}
+#left-top {
+  height: 33%;
+  display: flex;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-top-left {
+  flex: 3;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-top-right {
+  flex: 4;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+
+#left-mid {
+  height: 33%;
+  margin-top: 10px;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-bottom {
+  height: 33%;
+  margin-top: 10px;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+.screen-middle {
+  height: 100%;
+  width: 41.5%;
+  margin-left: 1.6%;
+  margin-right: 1.6%;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#middle-top {
+  height: 60%;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  display: flex;
+  flex-direction: column;
+}
+#line_1 {
+  flex: 1;
+  display: flex;
+}
+#top_1 {
+  flex: 1;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#top_2 {
+  flex: 1;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#top_3 {
+  flex: 1;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#line_2 {
+  flex: 1;
+  display: flex;
+}
+#bottom_1 {
+  flex: 1;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#bottom_2 {
+  flex: 1;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#bottom_3 {
+  flex: 1;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#middle-bottom {
+  height: 35%;
+  margin-top: 5px;
+  position: relative;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  display: flex;
+}
+#middle-bottom-left {
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  margin-right: 0.1875rem;
+  flex: 3;
+  position: relative;
+  /* // 添加边角 */
+}
+#middle-bottom-right {
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  margin-right: 0.1875rem;
+  width: 100%;
+  height: 100%;
+  flex: 2;
+  /* position: relative; */
+  display: flex;
+  /* // 添加边角 */
+}
+#tem1 {
+  flex: 1;
+  width: 50%;
+  height: 100%;
+  /* position: relative; */
+}
+#tem2 {
+  flex: 1;
+  width: 50%;
+  height: 100%;
+  /* position: relative; */
+}
+.screen-right {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#right-top {
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  flex: 2;
+}
+#right-mid-one {
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  flex: 1;
+}
+#right-mid-two {
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  flex: 2;
+}
+#right-bottom {
+  border: 1px solid rgba(25, 186, 139, 0.17);
+  margin-bottom: 0.1875rem;
+  flex: 5;
+}
 </style>