修改了瓦斯抽放系统的样式

src/assets/scss/index.css

@@ -167,7 +167,7 @@ body {
   border: 1px solid #000;
   background-color: green;
   margin-left: 20px;
-  width: 50px;
+  width: 5rem;
   text-align: center;
 }
 #apppp .mainbox .waterpump div p:nth-child(1) {
@@ -177,7 +177,7 @@ body {
   background: url(../img/gas/button\(close\).png);
 }
 #apppp .mainbox .tank1 {
-  width: 70px;
+  width: 75px;
   position: absolute;
   background-color: #73deff;
   border: 1px solid #000;
@@ -189,7 +189,7 @@ body {
   font-size: 12px;
 }
 #apppp .mainbox .tank2 {
-  width: 70px;
+  width: 75px;
   position: absolute;
   background-color: #73deff;
   border: 1px solid #000;
@@ -253,7 +253,7 @@ body {
   background-color: green;
   margin-right: 0.1rem;
   margin-left: 20px;
-  width: 0.8rem;
+  width: 5rem;
   text-align: center;
 }
 #apppp .mainbox .pumps div p:nth-child(1) {
@@ -271,18 +271,6 @@ body {
   top: 291px;
 }
 #apppp .mainbox .valveitem1 img:nth-child(2) {
-  width: 50px;
-  position: relative;
-  left: 4.95rem;
-  top: 4.6rem;
-}
-#apppp .mainbox .valveitem1 img:nth-child(3) {
-  width: 50px;
-  position: relative;
-  left: 4.8rem;
-  top: 7.79rem;
-}
-#apppp .mainbox .valveitem1 img:nth-child(4) {
   width: 50px;
   position: relative;
   left: 109px;
@@ -297,36 +285,16 @@ body {
   top: 312px;
 }
 #apppp .mainbox .valveitem2 img:nth-child(2) {
-  position: absolute;
-  left: 8.78rem;
-  top: 4.83rem;
-}
-#apppp .mainbox .valveitem2 img:nth-child(3) {
-  position: absolute;
-  left: 8.78rem;
-  top: 5.85rem;
-}
-#apppp .mainbox .valveitem2 img:nth-child(4) {
   position: relative;
   left: 268px;
   top: 373px;
 }
-#apppp .mainbox .valveitem2 img:nth-child(5) {
+#apppp .mainbox .valveitem2 img:nth-child(3) {
   position: relative;
   left: 226px;
   top: 441px;
 }
-#apppp .mainbox .valveitem2 img:nth-child(6) {
-  position: absolute;
-  left: 8.78rem;
-  top: 6.96rem;
-}
-#apppp .mainbox .valveitem2 img:nth-child(7) {
-  position: absolute;
-  left: 8.87rem;
-  top: 7.94rem;
-}
-#apppp .mainbox .valveitem2 img:nth-child(8) {
+#apppp .mainbox .valveitem2 img:nth-child(4) {
   position: relative;
   left: 192px;
   top: 501px;
@@ -335,23 +303,12 @@ body {
   width: 0.85rem;
 }
 #apppp .mainbox .valveitem4 img:nth-child(1) {
-  position: absolute;
-  left: 14.5rem;
-  top: 3.1rem;
-}
-#apppp .mainbox .valveitem4 img:nth-child(2) {
   position: relative;
   width: 50px;
   left: 494px;
   top: 202px;
 }
-#apppp .mainbox .valveitem4 img:nth-child(3) {
-  width: 1rem;
-  position: absolute;
-  left: 11.79rem;
-  top: 3.5rem;
-}
-#apppp .mainbox .valveitem4 img:nth-child(4) {
+#apppp .mainbox .valveitem4 img:nth-child(2) {
   width: 60px;
   position: relative;
   left: 278px;
@@ -362,26 +319,15 @@ body {
 }
 #apppp .mainbox .valveitem5 img:nth-child(1) {
   position: relative;
-
   left: 626px;
   top: 208px;
 }
 #apppp .mainbox .valveitem5 img:nth-child(2) {
-  position: absolute;
-  left: 18.46rem;
-  top: 3.22rem;
-}
-#apppp .mainbox .valveitem5 img:nth-child(3) {
   position: relative;
   width: 50px;
   left: 586px;
   top: 373px;
 }
-#apppp .mainbox .valveitem5 img:nth-child(4) {
-  position: absolute;
-  left: 18.6rem;
-  top: 5.9rem;
-}
 #apppp {
   width: 100%;
   height: 100%;

src/assets/scss/index.scss

@@ -1,10 +1,9 @@
 #index {
   color: #d3d6dd;
   position: absolute;
-  left: 170px;
-  width: 1400px;
-  height: 1008px;
   overflow: hidden;
+  width: 100%;
+  height: 100%;
   
 
 
@@ -57,7 +56,7 @@
     .react-right {
       &.react-l-s {
         text-align: right;
-        width: 700px;
+        // width: 700px;
       }
       font-size: 15px;
       width: 400px;
@@ -84,8 +83,7 @@
     .react-left {
       &.react-l-s {
         width: 100%;
-        text-align: left;
-      }
+      } 
       font-size: 18px;
       width: 300px;
       height: 50px;
@@ -112,13 +110,14 @@
 
     .body-box {
       margin-top: 50px;
+      margin-left: 120px;
       display: flex;
       flex-direction: column;
 
       //下方区域的布局
       .content-box {
         display: grid;
-        grid-template-columns: 500px 200px 500px;
+        grid-template-columns: 500px 300px 500px; 
       }
 
       // 底部数据
@@ -126,7 +125,7 @@
         margin-top: 10px; 
         display: grid;
         gap: 10px;
-        grid-template-columns: 600px 600px;
+        grid-template-columns: 700px 600px;
       }
     }
   }

src/components/process_monitoring/WarningInfo.vue

@@ -107,7 +107,8 @@ export default {
       console.log(123);
     },
     init() {
-      console.log(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+      if(this.id < 10)
+        return;
       this.websocket = new WebSocket(
         `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
       );

src/views/gas/configImg/center.vue

@@ -1,74 +1,71 @@
 <template>
   <div id="center">
     <div class="up">
-      <div
-        class="item">
+      <div class="item">
         <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>
-            瓦斯泵工作时间:{{this.avgtime}} S
-          </p>
+          <p>瓦斯泵工作时间:{{ this.avgtime }} S</p>
         </div>
         <div class="ml-3 colorBlue fw-b fs-xl">
-          <p>
-            瓦斯泵平均功率:{{this.avgpower}} w
-         </p>
+          <p>瓦斯泵平均功率:{{ this.avgpower }} w</p>
         </div>
         <div class="ml-3 colorBlue fw-b fs-xl">
           <p>
-            管道瓦斯含量:{{this.getres()[this.int].Pipe.GasConcentration}}
+            管道瓦斯含量:{{ this.getres()[this.int].Pipe.GasConcentration }}
           </p>
         </div>
-        
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios'
+import axios from "axios";
 
 export default {
-   data() {
+  data() {
     return {
-      avgpower:0,
-      avgtime:0,
-    }
+      avgpower: 0,
+      avgtime: 0,
+    };
+  },
+  inject: ["getint", "getres", "getweb"],
+  computed: {
+    int() {
+      return this.getint();
+    },
+    res() {
+      return this.getres();
+    },
+    web() {
+      return this.getweb();
+    },
   },
-   inject:['getint','getres','getweb'],
-   computed:{
-     int(){return this.getint()},
-     res(){return this.getres()},
-     web(){return this.getweb()}
-   },
-    mounted() {
-    this.realtimegetdata()
+  mounted() {
+    this.realtimegetdata();
   },
-  beforeDestroy () {
-    clearInterval(this.timing)
+  beforeDestroy() {
+    clearInterval(this.timing);
   },
   methods: {
-    
-    
-    realtimegetdata(){
-      this.getdata()
-      setInterval(() =>{
-        this.getdata()
-      },10000)
+    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);
-         }
-    }
-  }
-}
+    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>
 
 <style lang="scss" scoped>
@@ -86,44 +83,42 @@ export default {
       margin-top: 5px;
       width: 100%;
       height: 310px;
-       div{
-          position: relative;                  
-          display: flex;            
-          border: 0px solid #ffffff;
-          background-color: #14162b;
-          margin-left: 20px;
-          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){
+      div {
+        position: relative;
+        display: flex;
+        border: 0px solid #ffffff;
+        background-color: #14162b;
+        margin-left: 20px;
+        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;
+              position: absolute;
               margin-top: 10%;
               margin-left: 40%;
               font-size: 18px;
-              }
-            } 
+            }
           }
-            p{
-              position:absolute;
-              margin-top: 15%;
-              margin-left: 5%;
-              font-size: 18px;
-            } 
-                  
         }
+        p {
+          position: absolute;
+          margin-top: 15%;
+          margin-left: 5%;
+          font-size: 18px;
+        }
+      }
     }
   }
-  
 }
 </style>

src/views/gas/configImg/index.vue

@@ -41,6 +41,7 @@
                     background-color: rgba(16, 112, 255, 0.651);
                     border: 0.0125rem solid rgba(101, 255, 12, 0.377);
                     color: white;
+                    width: 100px;
                   "
                 >
                   返回

src/views/gas/configImg/main.vue

@@ -5,8 +5,8 @@
     </header>
 
     <section class="mainbox">
-      <button @click="changewebstate1">查看</button>
-      <button @click="changewebstate2">查看</button>
+      <button @click="changeWebState(1)">查看</button>
+      <button @click="changeWebState(2)">查看</button>
       <div class="motor1">
         <h3>电机1:</h3>
         <section>
@@ -147,34 +147,18 @@
       </div>
       <div class="tank1">
         <div>
-          水温:
-          <p>
-            {{ tank.temperature1 }}
-          </p>
-          ℃
+          水温:{{ tank.temperature1 }}℃
         </div>
         <div>
-          水位:
-          <p>
-            {{ tank.dept1 }}
-          </p>
-          m
+          水位:{{ tank.dept1 }}m
         </div>
       </div>
       <div class="tank2">
         <div>
-          水温:
-          <p>
-            {{ tank.temperature2 }}
-          </p>
-          ℃
+          水温:{{ tank.temperature2 }}℃
         </div>
         <div>
-          水位:
-          <p>
-            {{ tank.dept2 }}
-          </p>
-          m
+          水位:{{ tank.dept2 }}m
         </div>
       </div>
       <div class="pumps">
@@ -194,183 +178,128 @@
         <img
           :src="require('@/assets/img/gas/valve1(open).png')"
           alt=""
-          v-show="valvestate[0] == 'true'"
+          v-if="valvestate[0] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve1(clsoe).png')"
           alt=""
-          v-show="valvestate[0] == 'false'"
+          v-else
         />
         <img
           :src="require('@/assets/img/gas/valve2(open).png')"
           alt=""
-          v-show="valvestate[1] == 'true'"
+          v-if="valvestate[1] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve2(close).png')"
           alt=""
-          v-show="valvestate[1] == 'false'"
+          v-else
         />
       </div>
       <div class="valveitem2">
         <img
           :src="require('@/assets/img/gas/valve3(open).png')"
           alt=""
-          v-show="valvestate[2] == 'true'"
+          v-if="valvestate[2] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve3(close).png')"
           alt=""
-          v-show="valvestate[2] == 'false'"
+          v-else
         />
         <img
           :src="require('@/assets/img/gas/valve3(open).png')"
           alt=""
-          v-show="valvestate[3] == 'true'"
+          v-if="valvestate[3] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve3(close).png')"
           alt=""
-          v-show="valvestate[3] == 'false'"
+          v-else
         />
         <img
           :src="require('@/assets/img/gas/valve3(open).png')"
           alt=""
-          v-show="valvestate[4] == 'true'"
+          v-if="valvestate[4] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve3(close).png')"
           alt=""
-          v-show="valvestate[4] == 'false'"
+          v-else
         />
         <img
           :src="require('@/assets/img/gas/valve3(open).png')"
           alt=""
-          v-show="valvestate[5] == 'true'"
+          v-if="valvestate[5] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve3(close).png')"
           alt=""
-          v-show="valvestate[5] == 'false'"
+          v-else
         />
       </div>
       <div class="valveitem4">
         <img
           :src="require('@/assets/img/gas/valve4(open).png')"
           alt=""
-          v-show="valvestate[6] == 'true'"
+          v-if="valvestate[6] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve4(close).png')"
           alt=""
-          v-show="valvestate[6] == 'false'"
+          v-else
         />
         <img
           :src="require('@/assets/img/gas/valve5(open).png')"
           alt=""
-          v-show="valvestate[7] == 'true'"
+          v-if="valvestate[7] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve5(close).png')"
           alt=""
-          v-show="valvestate[7] == 'false'"
+          v-else
         />
       </div>
       <div class="valveitem5">
         <img
           :src="require('@/assets/img/gas/valve6(open).png')"
           alt=""
-          v-show="valvestate[8] == 'true'"
+          v-if="valvestate[8] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve6(close).png')"
           alt=""
-          v-show="valvestate[8] == 'false'"
+          v-else
         />
         <img
           :src="require('@/assets/img/gas/valve7(open).png')"
           alt=""
-          v-show="valvestate[9] == 'true'"
+          v-if="valvestate[9] == 'true'"
         />
         <img
           :src="require('@/assets/img/gas/valve7(close).png')"
           alt=""
-          v-show="valvestate[9] == 'false'"
+          v-else
         />
       </div>
     </section>
   </div>
 </template>
 <script>
-(function flexible(window, document) {
-  var docEl = document.documentElement;
-  var dpr = window.devicePixelRatio || 1;
-
-  // adjust body font size
-  function setBodyFontSize() {
-    if (document.body) {
-      document.body.style.fontSize = 12 * dpr + "px";
-    } else {
-      document.addEventListener("DOMContentLoaded", setBodyFontSize);
-    }
-  }
-  setBodyFontSize();
-
-  // set 1rem = viewWidth / 10
-  function setRemUnit() {
-    var rem = docEl.clientWidth / 24;
-    docEl.style.fontSize = rem + "px";
-  }
-
-  setRemUnit();
-
-  // reset rem unit on page resize
-  window.addEventListener("resize", setRemUnit);
-  window.addEventListener("pageshow", function (e) {
-    if (e.persisted) {
-      setRemUnit();
-    }
-  });
-
-  // detect 0.5px supports
-  if (dpr >= 2) {
-    var fakeBody = document.createElement("body");
-    var testElement = document.createElement("div");
-    testElement.style.border = ".5px solid transparent";
-    fakeBody.appendChild(testElement);
-    docEl.appendChild(fakeBody);
-    if (testElement.offsetHeight === 1) {
-      docEl.classList.add("hairlines");
-    }
-    docEl.removeChild(fakeBody);
-  }
-})(window, document);
 export default {
-  inject: ["getint", "getres"],
-  computed: {
-    int() {
-      return this.getint();
-    },
-    res() {
-      return this.getres();
-    },
-  },
-  emits: ["statechange"],
   data() {
     return {
-      webstate: 0,
-      // valvestate:[true,false,true,false,true,false,true,false,true,false],
       valvestate: [
         "true",
-        "false",
         "true",
-        "false",
         "true",
-        "false",
         "true",
-        "false",
         "true",
-        "false",
+        "true",
+        "true",
+        "true",
+        "true",
+        "true",
       ],
       buttonstate: ["true", "false"],
       tank: {
@@ -414,161 +343,10 @@ export default {
       },
     };
   },
-  mounted() {
-    // this.a();
-    this.changestate();
-  },
 
   methods: {
-    changestate() {
-      setInterval(() => {
-        this.setvalue();
-      }, 1000);
-    },
-    setvalue() {
-      this.$set(
-        this.valvestate,
-        0,
-        this.getres()[this.getint()].PipeValves.Pump1Enabled
-      ),
-        this.$set(
-          this.valvestate,
-          1,
-          this.getres()[this.getint()].PipeValves.Pump2Enabled
-        ),
-        this.$set(
-          this.valvestate,
-          2,
-          this.getres()[this.getint()].PipeValves.Pump3Enabled
-        ),
-        this.$set(
-          this.valvestate,
-          3,
-          this.getres()[this.getint()].PipeValves.Pump4Enabled
-        ),
-        this.$set(
-          this.valvestate,
-          4,
-          this.getres()[this.getint()].PipeValves.Pump5Enabled
-        ),
-        this.$set(
-          this.valvestate,
-          5,
-          this.getres()[this.getint()].PipeValves.Pump6Enabled
-        ),
-        this.$set(
-          this.valvestate,
-          6,
-          this.getres()[this.getint()].GasPump1.InletValveEnabled
-        ),
-        this.$set(
-          this.valvestate,
-          7,
-          this.getres()[this.getint()].GasPump1.InletValveEnabled
-        ),
-        this.$set(
-          this.valvestate,
-          8,
-          this.getres()[this.getint()].GasPump2.OutletValveEnabled
-        ),
-        this.$set(
-          this.valvestate,
-          9,
-          this.getres()[this.getint()].GasPump2.OutletValveEnabled
-        ),
-        this.$set(
-          this.buttonstate,
-          0,
-          this.getres()[this.getint()].GasPump1.PumpEnabled
-        ),
-        this.$set(
-          this.buttonstate,
-          1,
-          this.getres()[this.getint()].GasPump2.PumpEnabled
-        ),
-        this.$set(
-          this.waterpumpstate,
-          0,
-          this.getres()[this.getint()].CoolantPump1.PumpEnabled
-        ),
-        this.$set(
-          this.waterpumpstate,
-          1,
-          this.getres()[this.getint()].CoolantPump2.PumpEnabled
-        ),
-        this.$set(
-          this.tower,
-          "state",
-          this.getres()[this.getint()].CoolingTower.TowerEnabled
-        ),
-        (this.tank.temperature1 =
-          this.getres()[this.getint()].HighPool.Temperature),
-        (this.tank.dept1 = this.getres()[this.getint()].HighPool.WaterLevel),
-        (this.tank.temperature2 =
-          this.getres()[this.getint()].LowPool.Temperature),
-        (this.tank.dept2 = this.getres()[this.getint()].LowPool.WaterLevel),
-        (this.pipe.perssure =
-          this.getres()[this.getint()].Pipe.PipeNegativePressure),
-        (this.pipe.temperature =
-          this.getres()[this.getint()].Pipe.PumpingTemperature),
-        (this.pipe.gasconcentration =
-          this.getres()[this.getint()].Pipe.GasConcentration),
-        (this.pipe.rateoflow = this.getres()[this.getint()].Pipe.Flow),
-        (this.motor1.current =
-          this.getres()[this.getint()].GasPump1.MotorCurrent),
-        (this.motor1.voltage =
-          this.getres()[this.getint()].GasPump1.MotorVoltage),
-        (this.motor1.motortemperature =
-          this.getres()[this.getint()].GasPump1.PumpTemperature),
-        (this.motor1.phasetemperatuA =
-          this.getres()[this.getint()].GasPump1.MotorPhaseTemperatureA),
-        (this.motor1.phasetemperatuB =
-          this.getres()[this.getint()].GasPump1.MotorPhaseTemperatureB),
-        (this.motor1.phasetemperatuC =
-          this.getres()[this.getint()].GasPump1.MotorPhaseTemperatureC),
-        (this.motor1.epipodiumtem =
-          this.getres()[this.getint()].GasPump1.MotorFrontShaftTemperature),
-        (this.motor1.backshafttem =
-          this.getres()[this.getint()].GasPump1.MotorRearShaftTemperature),
-        (this.motor1.reducertem =
-          this.getres()[this.getint()].GasPump1.ReducerShaftTemperature);
-      if (this.getres()[this.getint()].GasPump1.PumpWaterSupply == "true") {
-        this.motor1.oilpressure = 1;
-      } else {
-        this.motor1.oilpressure = 0;
-      }
-      (this.motor2.current =
-        this.getres()[this.getint()].GasPump2.MotorCurrent),
-        (this.motor2.voltage =
-          this.getres()[this.getint()].GasPump2.MotorVoltage),
-        (this.motor2.motortemperature =
-          this.getres()[this.getint()].GasPump2.PumpTemperature),
-        (this.motor2.phasetemperatuA =
-          this.getres()[this.getint()].GasPump2.MotorPhaseTemperatureA),
-        (this.motor2.phasetemperatuB =
-          this.getres()[this.getint()].GasPump2.MotorPhaseTemperatureB),
-        (this.motor2.phasetemperatuC =
-          this.getres()[this.getint()].GasPump2.MotorPhaseTemperatureC),
-        (this.motor2.epipodiumtem =
-          this.getres()[this.getint()].GasPump2.MotorFrontShaftTemperature),
-        (this.motor2.backshafttem =
-          this.getres()[this.getint()].GasPump2.MotorRearShaftTemperature),
-        (this.motor2.reducertem =
-          this.getres()[this.getint()].GasPump2.ReducerShaftTemperature);
-      if (this.getres()[this.getint()].GasPump2.PumpWaterSupply == "true") {
-        this.motor2.oilpressure = 1;
-      } else {
-        this.motor2.oilpressure = 0;
-      }
-    },
-    changewebstate1() {
-      this.webstate = "1";
-
-      this.$emit("statechange", this.webstate);
-    },
-    changewebstate2() {
-      this.webstate = "2";
-      this.$emit("statechange", this.webstate);
+    changeWebState(state) {
+      this.$emit("statechange", state);
     },
   },
 };

src/views/transportation/configImg/analysis/BeltOverview.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="BeltOverview">
 
-            <belt-item @click="viewDetail" title="西大五1.6m皮带" :id="1">
+            <belt-item @click="viewDetail" title="西大五1.6m皮带" :id="23">
                 <a-icon type="sync" style="color:green; font-size:21px" spin />
             </belt-item>
 
@@ -70,7 +70,6 @@ export default {
     },
     methods: {
         viewDetail(id, title) {
-            console.log(123);
             this.$router.push({
                 path: `/transportation/belt/${id}/${title}`,
             })

src/views/transportation/configImg/belt/Analysis.vue

@@ -10,56 +10,56 @@
         <div class="contour">
           <div style="height: 80px">
             <span class="info">
-              <div>撕裂</div>
-              <div class="waring1" v-if="circle1 == 1"></div>
-              <div class="waring" v-if="circle1 == 0"></div>
+              <div>{{infoList[0].info_msg}}</div>
+              <div class="waring" v-if="infoList[0].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>闭锁</div>
-              <div class="waring" v-if="circle2 == 1"></div>
-              <div class="waring1" v-if="circle2 == 0"></div>
+              <div>{{infoList[1].info_msg}}</div>
+              <div class="waring" v-if="infoList[1].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>跑偏</div>
-              <div class="waring" v-if="circle3 == 1"></div>
-              <div class="waring1" v-if="circle3 == 0"></div>
+              <div>{{infoList[2].info_msg}}</div>
+              <div class="waring" v-if="infoList[2].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>烟雾</div>
-              <div class="waring" v-if="circle4 == 1"></div>
-              <div class="waring1" v-if="circle4 == 0"></div>
+              <div>{{infoList[3].info_msg}}</div>
+              <div class="waring" v-if="infoList[3].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>堆煤</div>
-              <div class="waring" v-if="circle5 == 1"></div>
-              <div class="waring1" v-if="circle5 == 0"></div>
+              <div>{{infoList[4].info_msg}}</div>
+              <div class="waring" v-if="infoList[4].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
           </div>
           <div style="height: 200px">
             <span class="info">
-              <div>速度</div>
-              <div class="waring" v-if="circle6 == 1"></div>
-              <div class="waring1" v-if="circle6 == 0"></div>
+              <div>{{infoList[5].info_msg}}</div>
+              <div class="waring" v-if="infoList[5].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>温度</div>
-              <div class="waring" v-if="circle7 == 1"></div>
-              <div class="waring1" v-if="circle7 == 0"></div>
+              <div>{{infoList[6].info_msg}}</div>
+              <div class="waring" v-if="infoList[6].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>打滑</div>
-              <div class="waring" v-if="circle8 == 1"></div>
-              <div class="waring1" v-if="circle8 == 0"></div>
+              <div>{{infoList[7].info_msg}}</div>
+              <div class="waring" v-if="infoList[7].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>纵撕</div>
-              <div class="waring" v-if="circle9 == 1"></div>
-              <div class="waring1" v-if="circle9 == 0"></div>
+              <div>{{infoList[8].info_msg}}</div>
+              <div class="waring" v-if="infoList[8].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
             <span class="info">
-              <div>断带</div>
-              <div class="waring" v-if="circle10 == 1"></div>
-              <div class="waring1" v-if="circle10 == 0"></div>
+              <div>{{infoList[9].info_msg}}</div>
+              <div class="waring" v-if="infoList[9].info == '0'"></div>
+              <div class="waring1" v-else></div>
             </span>
           </div>
         </div>
@@ -112,7 +112,7 @@
                 alignItems: 'center',
               }"
             >
-              <chart-4 ref="chart4" :id="26" title="变频器功率" unit="KW"/>
+              <chart-4 ref="chart4" :id="26" title="变频器功率" unit="KW" />
             </a-card>
           </a-col>
         </a-row>
@@ -132,18 +132,48 @@ export default {
   name: "Analysis",
   data() {
     return {
-      circle1: 1,
-      circle2: 1,
-      circle3: 1,
-      circle4: 1,
-      circle5: 1,
-      circle6: 1,
-      circle7: 1,
-      circle8: 1,
-      circle9: 1,
-      circle10: 1,
-      //rankList,
-      loading: true,
+      infoList: [
+        {
+          info: "0",
+          info_msg: "撕裂",
+        },
+        {
+          info: "0",
+          info_msg: "闭锁",
+        },
+        {
+          info: "0",
+          info_msg: "跑偏",
+        },
+        {
+          info: "0",
+          info_msg: "烟雾",
+        },
+        {
+          info: "0",
+          info_msg: "堆煤",
+        },
+        {
+          info: "0",
+          info_msg: "速度",
+        },
+        {
+          info: "0",
+          info_msg: "温度",
+        },
+        {
+          info: "0",
+          info_msg: "打滑",
+        },
+        {
+          info: "0",
+          info_msg: "纵撕",
+        },
+        {
+          info: "0",
+          info_msg: "断带",
+        },
+      ],
     };
   },
   methods: {
@@ -162,7 +192,7 @@ export default {
       };
       // 收到消息的回调
       this.websocket.onmessage = (event) => {
-        console.log("onmessage", event);
+        this.changeState(JSON.parse(event.data));
       };
       // 连接关闭的回调
       this.websocket.onclose = () => {
@@ -175,6 +205,14 @@ export default {
         this.websocket.close();
       });
     },
+    changeState(data) {
+      let state = data[0]["baojing_after"];
+      this.$nextTick(() => {
+        this.infoList.forEach((item, index) => {
+          item.info = state[index];
+        });
+      });
+    },
   },
   components: {
     Chart1,
@@ -186,9 +224,10 @@ export default {
     ...mapState(["websocketIP"]),
   },
   mounted() {
-    console.log("id", this.$route.params.id);
-    // this.websocket = new WebSocket();
-    // this.initWebSocket();
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.$route.params.id}`
+    );
+    this.initWebSocket();
   },
 };
 </script>

src/views/transportation/configImg/belt/Chart1.vue

@@ -61,6 +61,7 @@ export default {
         xAxis: [
           {
             // type: "time", // x轴为 时间轴
+            interval:0,
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -125,8 +126,8 @@ export default {
     addData(data) {
       // console.log("data", data);
       // 先扩展数组，然后删除多余元素
-      this.data = [...this.data, ...data.map((item) => item["pidaisudu_after"])].slice(2);
-      this.xData = [...this.xData, ...data.map(item=> item['date'].split(" ")[1])].slice(2);
+      this.data = [...this.data, ...data.map((item) => item["pidaisudu_after"])].slice(1);
+      this.xData = [...this.xData, ...data.map(item=> item['date'].split(" ")[1])].slice(1);
       // console.log(this.data);
       // console.log(this.xData);
       this.myChart.setOption({

src/views/transportation/configImg/belt/Chart2.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 const unit = "A";
 
 export default {
@@ -61,6 +61,7 @@ export default {
         xAxis: [
           {
             // type: "time", // x轴为 时间轴
+            interval: 0,
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -128,11 +129,11 @@ export default {
       this.data = [
         ...this.data,
         ...data.map((item) => item["dianliu_after"]),
-      ].slice(2);
+      ].slice(1);
       this.xData = [
         ...this.xData,
         ...data.map((item) => item["date"].split(" ")[1]),
-      ].slice(2);
+      ].slice(1);
       // console.log(this.data);
       // console.log(this.xData);
       this.myChart.setOption({

src/views/transportation/configImg/belt/Chart3.vue

@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 const unit = "Mpa";
 
 export default {
   name: "DisplayDraw",
   data() {
     return {
-      data: new Array(30).fill('-'),
-      xData: new Array(30).fill('-'),
+      data: new Array(30).fill("-"),
+      xData: new Array(30).fill("-"),
       myChart: null,
       option: {
         tooltip: {
@@ -61,6 +61,7 @@ export default {
         xAxis: [
           {
             // type: "time", // x轴为 时间轴
+            interval: 0,
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -119,13 +120,19 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
-  props:["id"],
+  props: ["id"],
   methods: {
     addData(data) {
       // console.log("data", data);
       // 先扩展数组，然后删除多余元素
-      this.data = [...this.data, ...data.map((item) => item["youya_after"])].slice(2);
-      this.xData = [...this.xData, ...data.map(item=> item['date'].split(" ")[1])].slice(2);
+      this.data = [
+        ...this.data,
+        ...data.map((item) => item["youya_after"]),
+      ].slice(1);
+      this.xData = [
+        ...this.xData,
+        ...data.map((item) => item["date"].split(" ")[1]),
+      ].slice(1);
       // console.log(this.data);
       // console.log(this.xData);
       this.myChart.setOption({
@@ -177,7 +184,9 @@ export default {
     // 先画图
     this.myChart = this.$echarts.init(this.$refs.testLine);
     this.myChart.setOption(this.option);
-    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/${this.id}`);
+    this.websocket = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/${this.id}`
+    );
     this.initWebSocket();
     this.myChart.setOption(this.option);
   },

src/views/transportation/configImg/belt/Chart4.vue

@@ -60,6 +60,7 @@ export default {
         xAxis: [
           {
             // type: "time", // x轴为 时间轴
+            interval: 0,
             splitLine: { show: false },
             axisLine: {
               lineStyle: { width: 0 },
@@ -71,7 +72,7 @@ export default {
             },
             axisTick: { show: false },
             boundaryGap: false,
-            data: []
+            data: [],
           },
         ],
         title: {
@@ -119,7 +120,7 @@ export default {
   computed: {
     ...mapState(["websocketIP"]),
   },
-  props: ["id","title", "unit"],
+  props: ["id", "title", "unit"],
   methods: {
     addData(data) {
       // console.log("data", data);
@@ -127,11 +128,11 @@ export default {
       this.data = [
         ...this.data,
         ...data.map((item) => item["gonglv_after"]),
-      ].slice(2);
+      ].slice(1);
       this.xData = [
         ...this.xData,
         ...data.map((item) => item["date"].split(" ")[1]),
-      ].slice(2);
+      ].slice(1);
       // console.log(this.data);
       // console.log(this.xData);
       this.myChart.setOption({