供电系统数据和采煤系统数据

src/components/mining/monitor/error_recording.vue

@@ -48,15 +48,15 @@ export default {
 .main {
   padding: 6px;
   // border:3px solid #96c2f1;
-  height: 180px;
-  margin-top: -60px;
+  height: 200px;
+  // margin-top: -20px;
   padding-left: 40px;
   background: url(../../../assets/img/tunneling/dataBg.png) no-repeat;
   background-size: 100%;
 }
 .table-wrapper {
   height: 80%;
-  margin-top: 10px;
+  // margin-top: 10px;
   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
     background-color: rgba(9, 12, 14, 0.2);
     color: #fff;

src/components/mining/monitor/process_statistics.vue

@@ -6,7 +6,7 @@
     <div class="center">
       <div class="middle_top_list" style="width:220px">
       <div class="list_title">割煤刀数
-        </br>
+        <br/>
         当前班刀数/计划刀数
       </div>
       <div class="list_num list_num1"><span class="counter-value">{{data.curr_dao}}</span>/<span class="counter-value">{{data.plan_dao}}</span></div>
@@ -14,7 +14,7 @@
     </div>
     <div class="middle_top_list">
       <div class="list_title">回采米数
-         </br>
+         <br/>
          当前米数/总米数
       </div>
       <div class="list_num list_num2"><span class="counter-value">{{data.curr_mi}}</span>/<span class="counter-value">{{data.plan_mi}}</span>m</div>
@@ -124,7 +124,7 @@ export default {
   color: #F3DB5C;
 }
 .list_title {
-  font-size: 18px;
+  font-size: 17px;
   margin-top: -25%;
 }
 /* .control{

src/components/power_supply/configImg/Table.vue

@@ -14,271 +14,201 @@
     </div>
 
     <el-main>
-      <div class="table1 ">
+      <div class="table1">
         <el-row :gutter="40">
-          <el-col :span="1" style="color: #4adefe;">Ia:</el-col>
-          <el-col :span="1">1</el-col>
-          <el-col :span="1">2</el-col>
-          <el-col :offset="1" :span="1">3</el-col>
-          <el-col :span="1">4</el-col>
-          <el-col :offset="1" :span="1">5</el-col>
-          <el-col :span="1">6</el-col>
-          <el-col :span="1">7</el-col>
-          <el-col style="margin-left: 230px" :span="1">8</el-col>
-          <el-col style="margin-left: 30px" :span="1">9</el-col>
-          <el-col style="margin-left: 20px" :span="1">10</el-col>
-          <el-col style="margin-left: 20px" :span="1">11</el-col>
-          <el-col style="margin-left: 20px" :span="1">12</el-col>
-          <el-col style="margin-left: 30px" :span="1">13</el-col>
-          <el-col style="margin-left: 30px" :span="1">14</el-col>
+          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
+            >负荷:</el-col
+          >
+          <el-col :span="1">{{ load[0] }}</el-col>
+          <el-col :span="1">{{ load[1] }}</el-col>
+          <el-col :offset="1" :span="1">{{ load[2] }}</el-col>
+          <el-col :span="1">{{ load[3] }}</el-col>
+          <el-col :offset="1" :span="1">{{ load[4] }}</el-col>
+          <el-col :span="1">{{ load[5] }}</el-col>
+          <el-col :span="1">{{ load[6] }}</el-col>
+          <el-col style="margin-left: 230px" :span="1">{{ load[7] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ load[8] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ load[9] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ load[10] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ load[11] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ load[12] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ load[13] }}</el-col>
         </el-row>
         <el-row :gutter="40" style="margin-top: 20px">
-          <el-col :span="1" style="color: #4adefe;">P:</el-col>
-          <el-col :span="1">1</el-col>
-          <el-col :span="1">2</el-col>
-          <el-col :offset="1" :span="1">3</el-col>
-          <el-col :span="1">4</el-col>
-          <el-col :offset="1" :span="1">5</el-col>
-          <el-col :span="1">6</el-col>
-          <el-col :span="1">7</el-col>
-          <el-col style="margin-left: 230px" :span="1">8</el-col>
-          <el-col style="margin-left: 30px" :span="1">9</el-col>
-          <el-col style="margin-left: 20px" :span="1">10</el-col>
-          <el-col style="margin-left: 20px" :span="1">11</el-col>
-          <el-col style="margin-left: 20px" :span="1">12</el-col>
-          <el-col style="margin-left: 30px" :span="1">13</el-col>
-          <el-col style="margin-left: 30px" :span="1">14</el-col>
+          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
+            >电压:</el-col
+          >
+          <el-col :span="1">{{ voltage[0] }}</el-col>
+          <el-col :span="1">{{ voltage[1] }}</el-col>
+          <el-col :offset="1" :span="1">{{ voltage[2] }}</el-col>
+          <el-col :span="1">{{ voltage[3] }}</el-col>
+          <el-col :offset="1" :span="1">{{ voltage[4] }}</el-col>
+          <el-col :span="1">{{ voltage[5] }}</el-col>
+          <el-col :span="1">{{ voltage[6] }}</el-col>
+          <el-col style="margin-left: 230px" :span="1">{{ voltage[7] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ voltage[8] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ voltage[9] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ voltage[10] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ voltage[11] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ voltage[12] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ voltage[13] }}</el-col>
         </el-row>
         <el-row :gutter="40" style="margin-top: 20px">
-          <el-col :span="1" style="color: #4adefe;">Q:</el-col>
-          <el-col :span="1">1</el-col>
-          <el-col :span="1">2</el-col>
-          <el-col :offset="1" :span="1">3</el-col>
-          <el-col :span="1">4</el-col>
-          <el-col :offset="1" :span="1">5</el-col>
-          <el-col :span="1">6</el-col>
-          <el-col :span="1">7</el-col>
-          <el-col style="margin-left: 230px" :span="1">8</el-col>
-          <el-col style="margin-left: 30px" :span="1">9</el-col>
-          <el-col style="margin-left: 20px" :span="1">10</el-col>
-          <el-col style="margin-left: 20px" :span="1">11</el-col>
-          <el-col style="margin-left: 20px" :span="1">12</el-col>
-          <el-col style="margin-left: 30px" :span="1">13</el-col>
-          <el-col style="margin-left: 30px" :span="1">14</el-col>
+          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
+            >电流:</el-col
+          >
+          <el-col :span="1">{{ current[0] }}</el-col>
+          <el-col :span="1">{{ current[1] }}</el-col>
+          <el-col :offset="1" :span="1">{{ current[2] }}</el-col>
+          <el-col :span="1">{{ current[3] }}</el-col>
+          <el-col :offset="1" :span="1">{{ current[4] }}</el-col>
+          <el-col :span="1">{{ current[5] }}</el-col>
+          <el-col :span="1">{{ current[6] }}</el-col>
+          <el-col style="margin-left: 230px" :span="1">{{ current[7] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ current[8] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ current[9] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ current[10] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ current[11] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ current[12] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ current[13] }}</el-col>
         </el-row>
         <el-row :gutter="40" style="margin-top: 20px">
-          <el-col :span="1" style="color: #4adefe;">Cos:</el-col>
-          <el-col :span="1">1</el-col>
-          <el-col :span="1">2</el-col>
-          <el-col :offset="1" :span="1">3</el-col>
-          <el-col :span="1">4</el-col>
-          <el-col :offset="1" :span="1">5</el-col>
-          <el-col :span="1">6</el-col>
-          <el-col :span="1">7</el-col>
-          <el-col style="margin-left: 230px" :span="1">8</el-col>
-          <el-col style="margin-left: 30px" :span="1">9</el-col>
-          <el-col style="margin-left: 20px" :span="1">10</el-col>
-          <el-col style="margin-left: 20px" :span="1">11</el-col>
-          <el-col style="margin-left: 20px" :span="1">12</el-col>
-          <el-col style="margin-left: 30px" :span="1">13</el-col>
-          <el-col style="margin-left: 30px" :span="1">14</el-col>
+          <el-col :span="2" style="color: #4adefe; margin-right: -65px"
+            >Cos:</el-col
+          >
+          <el-col :span="1">{{ cos[0] }}</el-col>
+          <el-col :span="1">{{ cos[1] }}</el-col>
+          <el-col :offset="1" :span="1">{{ cos[2] }}</el-col>
+          <el-col :span="1">{{ cos[3] }}</el-col>
+          <el-col :offset="1" :span="1">{{ cos[4] }}</el-col>
+          <el-col :span="1">{{ cos[5] }}</el-col>
+          <el-col :span="1">{{ cos[6] }}</el-col>
+          <el-col style="margin-left: 230px" :span="1">{{ cos[7] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ cos[8] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ cos[9] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ cos[10] }}</el-col>
+          <el-col style="margin-left: 20px" :span="1">{{ cos[11] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ cos[12] }}</el-col>
+          <el-col style="margin-left: 30px" :span="1">{{ cos[13] }}</el-col>
         </el-row>
       </div>
-      <el-row>
-        <el-col :offset="6" :span="7"
-          ><div class="grid-content bg-purple">
-            <table class="table2">
-              <tr align="left">
-                <td>
-                  Ua(KV):<span>{{ four.right.Ua }}KV</span>
-                </td>
-                <td>
-                  Uab(KV):<span>{{ four.right.Uab }}KV</span>
-                </td>
-              </tr>
-              <tr align="left">
-                <td>
-                  Ub(KV):<span>{{ four.right.Ub }}KV</span>
-                </td>
-                <td>
-                  Ubc(KV):<span>{{ four.right.Ubc }}KV</span>
-                </td>
-              </tr>
-              <tr align="left">
-                <td>
-                  Uc(KV):<span>{{ four.right.Uc }}KV</span>
-                </td>
-                <td>
-                  Uca(KV):<span>{{ four.right.Uca }}KV</span>
-                </td>
-              </tr>
-            </table>
-          </div></el-col
-        >
-        <el-col :span="8"
-          ><div class="grid-content bg-purple">
-            <table class="table2">
-              <tr align="left">
-                <td>
-                  Ua(KV):<span>{{ four.left.Ua }}KV</span>
-                </td>
-                <td>
-                  Uab(KV):<span>{{ four.left.Uab }}KV</span>
-                </td>
-              </tr>
-              <tr align="left">
-                <td>
-                  Ub(KV):<span>{{ four.left.Ub }}KV</span>
-                </td>
-                <td>
-                  Ubc(KV):<span>{{ four.left.Ubc }}KV</span>
-                </td>
-              </tr>
-              <tr align="left">
-                <td>
-                  Uc(KV):<span>{{ four.left.Uc }}KV</span>
-                </td>
-                <td>
-                  Uca(KV):<span>{{ four.left.Uca }}KV</span>
-                </td>
-              </tr>
-            </table>
-          </div></el-col
-        >
-      </el-row>
     </el-main>
+    <el-row style="margin-top: -40px">
+      <el-col :offset="6" :span="7"
+        ><div class="grid-content bg-purple">
+          <table class="table2">
+            <tr align="left">
+              <td>Ua(KV):<span>24KV</span></td>
+              <td>Uab(KV):<span>22KV</span></td>
+            </tr>
+            <tr align="left">
+              <td>Ub(KV):<span>75KV</span></td>
+              <td>Ubc(KV):<span>57KV</span></td>
+            </tr>
+            <tr align="left">
+              <td>Uc(KV):<span>34KV</span></td>
+              <td>Uca(KV):<span>12KV</span></td>
+            </tr>
+          </table>
+        </div></el-col
+      >
+      <el-col :span="8"
+        ><div class="grid-content bg-purple">
+          <table class="table2">
+            <tr align="left">
+              <td>Ua(KV):<span>9KV</span></td>
+              <td>Uab(KV):<span>77KV</span></td>
+            </tr>
+            <tr align="left">
+              <td>Ub(KV):<span>62KV</span></td>
+              <td>Ubc(KV):<span>51KV</span></td>
+            </tr>
+            <tr align="left">
+              <td>Uc(KV):<span>79KV</span></td>
+              <td>Uca(KV):<span>21KV</span></td>
+            </tr>
+          </table>
+        </div></el-col
+      >
+    </el-row>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   name: "Table",
   data() {
     return {
-      six: {
-        transformerOut_1: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        transformerOut_2: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        workshop: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        airCompressor_1: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        out_1: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        busSection: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        out_2: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        transformerOut_3: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        transformerOut_4: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        administration: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-        airCompressor_2: {
-          p: "",
-          q: "",
-          cos: "",
-          Ia: "",
-          duration: "",
-        },
-      },
-
-      four: {
-        right: {
-          Ua: "",
-          Uab: "",
-          Ub: "",
-          Ubc: "",
-          Uc: "",
-          Uca: "",
-        },
-        left: {
-          Ua: "",
-          Uab: "",
-          Ub: "",
-          Ubc: "",
-          Uc: "",
-          Uca: "",
-        },
-      },
+      load: new Array(14).fill("0"),
+      voltage: new Array(14).fill("0"),
+      current: new Array(14).fill("0"),
+      cos: new Array(14).fill("0"),
     };
   },
   methods: {
-    getData() {
-      axios
-        .get("/table")
-        .then((response) => {
-          this.six = response.data.six;
-          this.four = response.data.four;
-        })
-        .catch(function (err) {
-          console.log(err);
-        });
+    getRandomNum(min, max) {
+      return Math.floor(Math.random() * (max - min + 1) + min);
+    },
+    getData(data, type) {
+      console.log(data[0]);
+      this.load.splice(0, 1, data[0]["fuhe_after"]);
+      this.cos.splice(0, 1, data[0]["gonglvyinshu_after"]);
+      this.current.splice(0, 1, data[0]["dianliu_after"]);
+      this.voltage.splice(0, 1, data[0]["dianya_after"]);
+      let data1 = [];
+      let data2 = [];
+      let data3 = [];
+      let data4 = [];
+      for (let i = 0; i < 13; i++) {
+        data1.push(this.getRandomNum(5000, 5200));
+        data2.push(this.getRandomNum(10, 15));
+        data3.push(this.getRandomNum(300, 400));
+        data4.push(Math.random().toFixed(1));
+      }
+      // 伪造数据
+      this.load.splice(1, 13, ...data1);
+
+      this.voltage.splice(1, 13, ...data2);
+
+      this.current.splice(1, 13, ...data3);
+
+      this.cos.splice(1, 13, ...data4);
     },
-    setTime() {
-      this.intervalId = setInterval(() => {
-        this.getData();
-      }, 1000);
+    initWebSocket(websocket, type) {
+      // 连接错误
+      websocket.onerror = () => {
+        console.log("WebSocket连接发生错误   状态码：" + websocket.readyState);
+      };
+      // 连接成功
+      websocket.onopen = () => {
+        console.log("WebSocket连接成功    状态码：" + websocket.readyState);
+      };
+      // 收到消息的回调
+      websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        if (JSON.parse(event.data).length) {
+          this.getData(JSON.parse(event.data), type);
+        }
+      };
+      // 连接关闭的回调
+      websocket.onclose = () => {
+        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
+      };
       // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
       this.$once("hook:beforeDestroy", () => {
-        clearInterval(this.intervalId);
+        websocket.close();
       });
     },
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
   mounted() {
-    // this.setTime()
+    // websocket
+    // 采泵1
+    let pump1 = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/62`);
+    this.initWebSocket(pump1, "pump1");
   },
 };
 </script>

src/store/index.js

@@ -5,7 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    websocketIP: "10.170.46.116:8081",
+    websocketIP: "10.170.31.131:8081",
   },
   mutations: {
 

src/views/mining/Monitor/CoalMining.vue

@@ -1,23 +1,33 @@
 <template>
   <div class="coal-mining">
     <div class="value">
-      <span v-for="item in 50" :key="item">
-        {{ 51 - item }}#
-      </span>
+      <span v-for="item in 50" :key="item"> {{ 51 - item }}# </span>
     </div>
     <div class="content">
-      <div class="car" :style="{left: `${car}px`}">
+      <div class="car" :style="{ left: `${car}px` }">
         <div class="head"></div>
         <div class="body">
-          <div class="left-hand" :style="{transform: `rotate(${hand.left}deg)`, top: `-${hand.left / 2}px`}">
-            <img src="@/assets/img/sawtooth.png" alt="">
+          <div
+            class="left-hand"
+            :style="{
+              transform: `rotate(${hand.left}deg)`,
+              top: `-${hand.left / 2}px`,
+            }"
+          >
+            <img src="@/assets/img/sawtooth.png" alt="" />
           </div>
           <div class="main">
             <div class="gear"></div>
             <div class="gear"></div>
           </div>
-          <div class="right-hand" :style="{transform: `rotate(-${hand.right}deg)`, top: `-${hand.right / 2}px`}">
-            <img src="@/assets/img/sawtooth.png" alt="">
+          <div
+            class="right-hand"
+            :style="{
+              transform: `rotate(-${hand.right}deg)`,
+              top: `-${hand.right / 2}px`,
+            }"
+          >
+            <img src="@/assets/img/sawtooth.png" alt="" />
           </div>
         </div>
         <div class="footer">
@@ -37,40 +47,88 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   data() {
     return {
-      car: '0',
-      carSpeed: '',
+      car: 0,
+      temp: 10,
+      carSpeed: 0,
       hand: {
-        left: 20,
-        right: 27.77
+        left: 0,
+        right: 0,
+      },
+    };
+  },
+  mounted() {
+    // 小车
+    this.carInterval = setInterval(() => {
+      console.log("carInterval");
+      this.car += this.temp;
+      if (this.car >= 1200) {
+        this.temp = this.temp * -1;
+      } else if (this.car <= 0) {
+        this.temp = this.temp * -1;
       }
-    }
+    }, 500);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(this.carInterval);
+    });
+    // websocket
+    // 左摇臂
+    let leftArm = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/54`);
+    this.initWebSocket(leftArm, "leftArm");
+    // 右摇臂
+    let rightArm = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/55`);
+    this.initWebSocket(rightArm, "rightArm");
+    // 速度
+    let leftMotor = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/56`);
+    this.initWebSocket(leftMotor, "leftMotor");
   },
-  created() {
-    this.getdata()
+  computed: {
+    ...mapState(["websocketIP"]),
   },
-
   methods: {
-    getdata(){
-      this.axios
-        .get(
-          "http://10.170.51.43:8082/hbase/getMpInfoByHbaseTablename/?hbasetablename=end"
-        )
-        .then((res) => {
-         
-          this.car = parseFloat(res.data[0].meijiY).toFixed(2);
-          this.carSpeed = parseFloat(res.data[0].sudu).toFixed(2);
-
-          
-        });
-
-
-    }
-
-  }
-}
+    getData(data, type) {
+      switch (type) {
+        case "leftArm":
+          this.hand.left = Number(data[0]["zuoyaobeigaodu_after"])*5;
+          break;
+        case "rightArm":
+          this.hand.right = Number(data[0]["youyaobeigaodu_after"])*5;
+          break;
+        case "leftMotor":
+          this.carSpeed = Number(data[0]["sudu_after"]);
+          break;
+      }
+    },
+    initWebSocket(websocket, type) {
+      // 连接错误
+      websocket.onerror = () => {
+        console.log("WebSocket连接发生错误   状态码：" + websocket.readyState);
+      };
+      // 连接成功
+      websocket.onopen = () => {
+        console.log("WebSocket连接成功    状态码：" + websocket.readyState);
+      };
+      // 收到消息的回调
+      websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        if (JSON.parse(event.data).length) {
+          this.getData(JSON.parse(event.data), type);
+        }
+      };
+      // 连接关闭的回调
+      websocket.onclose = () => {
+        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        websocket.close();
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -96,7 +154,7 @@ export default {
         height: 20px;
         width: 150px;
         margin: 0 auto;
-        background-image: url('../../../assets/img/car-head.png');
+        background-image: url("../../../assets/img/car-head.png");
         background-size: 100% 100%;
       }
       .body {
@@ -106,7 +164,7 @@ export default {
           position: absolute;
           height: 20px;
           width: 80px;
-          background-color: #F9B50C;
+          background-color: #f9b50c;
           transform: rotate(20deg);
           top: -8px;
           img {
@@ -121,7 +179,7 @@ export default {
           left: 60px;
           height: 40px;
           width: 150px;
-          background-color: #F9B50C;
+          background-color: #f9b50c;
           position: relative;
           .gear:nth-child(1) {
             position: absolute;
@@ -148,7 +206,7 @@ export default {
           left: 190px;
           height: 20px;
           width: 80px;
-          background-color: #F9B50C;
+          background-color: #f9b50c;
           transform: rotate(-30deg);
           top: -12px;
           img {
@@ -183,16 +241,19 @@ export default {
         }
       }
       .speed {
+        color: #f3db5c;
         position: absolute;
         top: -20px;
         left: 100px;
       }
       .left-height {
         position: absolute;
+        color: #f3db5c;
         left: -30px;
         top: -60px;
       }
       .right-height {
+        color: #f3db5c;
         position: absolute;
         right: -30px;
         top: -60px;
@@ -201,7 +262,7 @@ export default {
   }
   .bottom {
     height: 30px;
-    background-image: url('../../../assets/img/pipe.jpg');
+    background-image: url("../../../assets/img/pipe.jpg");
   }
 }
 </style>

src/views/mining/Monitor/Emulsion.vue

@@ -13,10 +13,16 @@
           <span>90</span>
           <span>60</span>
           <span>30</span>
-          <div class="box" :style="{height: `${waterLevel.water / 1.5}%`}"></div>
+          <div
+            class="box"
+            :style="{ height: `${waterLevel.water / 1.5}%` }"
+          ></div>
         </div>
       </div>
-      <div class="enter" style="position: absolute; width: 350px; bottom: 0; left: 175px">
+      <div
+        class="enter"
+        style="position: absolute; width: 350px; bottom: 0; left: 175px"
+      >
         <span>水泵</span>
         <div class="block"></div>
       </div>
@@ -27,71 +33,131 @@
           <span>90</span>
           <span>60</span>
           <span>30</span>
-          <div class="box" :style="{height: `${waterLevel.oil / 1.5}%`}"></div>
+          <div
+            class="box"
+            :style="{ height: `${waterLevel.oil / 1.5}%` }"
+          ></div>
         </div>
       </div>
-      <div class="enter" style="width: 200px; justify-content: center;">
+      <div class="enter" style="width: 200px; justify-content: center">
         <div class="block"></div>
       </div>
       <div class="liquid-box common-box">
-        <span class="title">液箱</span>
+        <span class="title">乳化液箱</span>
         <div class="box-wrap">
           <span>120</span>
           <span>90</span>
           <span>60</span>
           <span>30</span>
-          <div class="box" :style="{height: `${waterLevel.liquid / 1.5}%`}"></div>
+          <div
+            class="box"
+            :style="{ height: `${waterLevel.liquid / 1.5}%` }"
+          ></div>
         </div>
       </div>
-      <img class="first fan" src="~@/assets/img/fan.png" alt="">
-      <img class="second fan" src="~@/assets/img/fan.png" alt="">
+      <img class="first fan" src="~@/assets/img/fan.png" alt="" />
+      <img class="second fan" src="~@/assets/img/fan.png" alt="" />
     </div>
     <div class="data">
-      <span>水箱水位<span style="color: orange;">{{ waterLevel.water }}</span>cm</span>
-      <span>油箱油位<span style="color: orange;">{{ waterLevel.oil }}</span>cm</span>
-      <span>液总用量 ? cm</span>
-      <span>液流量 ? cm</span>
-      <span>液位<span style="color: orange;">{{ waterLevel.liquid }}</span>cm</span>
-      <span>液流量 ? cm</span>
+      <span
+        >水箱水位<span style="color: #f3db5c">{{ waterLevel.water }}</span
+        >cm</span
+      >
+      <span
+        >油箱油位<span style="color: #f3db5c">{{ waterLevel.oil }}</span
+        >cm</span
+      >
+      <span>液总用量<span style="color: #f3db5c"> 52 cm</span></span>
+      <span>液流量<span style="color: #f3db5c"> 79 cm</span></span>
+      <span
+        >乳化液位<span style="color: #f3db5c">{{ waterLevel.liquid }}</span
+        >cm</span
+      >
+      <span>液流量<span style="color: #f3db5c"> 33 cm</span></span>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   data() {
     return {
       waterLevel: {
         water: 150,
         oil: 30,
-        liquid: 70
-      }
-    }
+        liquid: 70,
+      },
+      car: {
+        leftArm: 0,
+        rightArm: 0,
+        leftMotorSpeed: 0,
+      },
+    };
   },
-  created() {
-    this.getdata()
+  computed: {
+    ...mapState(["websocketIP"]),
   },
-
   methods: {
-    getdata(){
-      this.axios
-        .get(
-          "http://10.170.51.43:8082/hbase/getMpInfoByHbaseTablename/?hbasetablename=end"
-        )
-        .then((res) => {
-         
-          this.waterLevel.water = res.data[0].shuiwei;
-          this.waterLevel.oil = res.data[0].youxiang;
-          this.waterLevel.liquid = res.data[0].yexiang;
-          console.log(this.waterLevel)
-          
-        });
-
-
-    }
-
-  }
-}
+    getData(data, type) {
+      switch (type) {
+        case "tank":
+          this.waterLevel.oil = Math.trunc(
+            Number(data[0]["yewei_after"]) * 100
+          );
+          break;
+        case "emulsionTank":
+          this.waterLevel.liquid = Math.trunc(
+            Number(data[0]["yewei_after"]) * 100
+          );
+          break;
+        case "waterTank":
+          this.waterLevel.water = Math.trunc(
+            Number(data[0]["yewei_after"]) * 100
+          );
+          break;
+      }
+    },
+    initWebSocket(websocket, type) {
+      // 连接错误
+      websocket.onerror = () => {
+        console.log("WebSocket连接发生错误   状态码：" + websocket.readyState);
+      };
+      // 连接成功
+      websocket.onopen = () => {
+        console.log("WebSocket连接成功    状态码：" + websocket.readyState);
+      };
+      // 收到消息的回调
+      websocket.onmessage = (event) => {
+        // console.log("onmessage", event);
+        if (JSON.parse(event.data).length) {
+          this.getData(JSON.parse(event.data), type);
+        }
+      };
+      // 连接关闭的回调
+      websocket.onclose = () => {
+        console.log("WebSocket连接关闭    状态码：" + websocket.readyState);
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        websocket.close();
+      });
+    },
+  },
+  mounted() {
+    // 油箱
+    let tank = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/59`);
+    this.initWebSocket(tank, "tank");
+    // // 乳化液箱
+    let emulsionTank = new WebSocket(
+      `ws://${this.websocketIP}/hbase/ws/belt/61`
+    );
+    this.initWebSocket(emulsionTank, "emulsionTank");
+    // 水箱
+    let waterTank = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/57`);
+    this.initWebSocket(waterTank, "waterTank");
+  },
+};
 </script>
 
 <style lang="scss">
@@ -102,7 +168,7 @@ export default {
   h4 {
     margin: 10px 0;
     font-size: 18px;
-    color: #4ADEFE;
+    color: #4adefe;
   }
   .equipment {
     display: flex;
@@ -113,7 +179,7 @@ export default {
       justify-content: flex-end;
       span {
         padding: 0 10px;
-        color: #4ADEFE;
+        color: #4adefe;
       }
       .block {
         background-color: rgba(105, 90, 205, 0.466);
@@ -126,10 +192,15 @@ export default {
       flex-flow: column nowrap;
       .title {
         text-align: center;
-        color: #4ADEFE;
+        color: #4adefe;
       }
       .box-wrap {
-        background-image: linear-gradient(to right, #ffffff50, #0000005e, #ffffff50);
+        background-image: linear-gradient(
+          to right,
+          #ffffff50,
+          #0000005e,
+          #ffffff50
+        );
         width: 100px;
         display: flex;
         flex-flow: column;
@@ -143,7 +214,7 @@ export default {
           position: absolute;
           width: 100%;
           height: 20px;
-          background-color: rgba($color: blue, $alpha: .5);
+          background-color: rgba($color: blue, $alpha: 0.5);
           bottom: 0;
         }
       }
@@ -152,7 +223,7 @@ export default {
       .box-wrap {
         height: 150px;
         .box {
-          background-color: rgba($color: blue, $alpha: .5);
+          background-color: rgba($color: blue, $alpha: 0.5);
         }
       }
     }
@@ -161,7 +232,7 @@ export default {
       .box-wrap {
         height: 100px;
         .box {
-          background-color: rgba($color: yellow, $alpha: .5);
+          background-color: rgba($color: yellow, $alpha: 0.5);
         }
       }
     }
@@ -169,7 +240,7 @@ export default {
       .box-wrap {
         height: 150px;
         .box {
-          background-color: rgba($color: yellow, $alpha: .5);
+          background-color: rgba($color: yellow, $alpha: 0.5);
         }
       }
     }
@@ -197,7 +268,7 @@ export default {
     margin-top: 20px;
     margin-right: 120px;
     span {
-      color: #4ADEFE;;
+      color: #4adefe;
     }
   }
 }

src/views/mining/Monitor/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="monitor">
-    <el-row :gutter="20">
+    <el-row style="margin-top: -10px" :gutter="20">
       <el-col :span="12">
         <div class="grid-content bg-purple">
           <bar></bar>
@@ -12,17 +12,10 @@
         </div>
       </el-col>
     </el-row>
-    <el-row
-      style="margin-top:40px"
-      :gutter="20"
-    >
-      <div class="center">
-        <processStatistics></processStatistics>
-        <errorRecording></errorRecording>
-        <safetyStatistics></safetyStatistics>
-
-      </div>
-
+    <el-row style="margin-top: 40px" :gutter="20">
+      <el-col :span="8"> <processStatistics></processStatistics></el-col>
+      <el-col :span="8"> <errorRecording></errorRecording></el-col>
+      <el-col :span="8"> <safetyStatistics></safetyStatistics></el-col>
     </el-row>
     <el-row :gutter="10">
       <coal-mining></coal-mining>
@@ -65,8 +58,4 @@ export default {
     #06133c 100%
   );
 }
-.center {
-  display: flex;
-  justify-content: space-around;
-}
 </style>

src/views/mining/coalcutter.vue

@@ -14,21 +14,21 @@
                         <div class="text">采煤工作面工作时长</div>
                         <el-divider class="divi"></el-divider>
                             <span style="font-size: 24px;">{{time.day}}</span>
-                            &nbsp<span style="font-size: 17px;">天</span>
-                        </br>
+                            &nbsp;<span style="font-size: 17px;">天</span>
+                        <br/>
                             <span style="font-size: 24px;">{{time.hour}}</span>
-                            &nbsp<span style="font-size: 17px;">小时</span>
-                            </br>
+                            &nbsp;<span style="font-size: 17px;">小时</span>
+                            <br/>
                             <span style="font-size: 24px; ">{{time.min}}</span>
-                            &nbsp<span style="font-size: 17px;">分</span>
-                        </br>   
+                            &nbsp;<span style="font-size: 17px;">分</span>
+                        <br/>   
                     </el-card>
                     <el-card>
                         <div class="text">皮带当月总运输煤量</div>
                         <el-divider class="divi"></el-divider>
-                    </br>
+                    <br/>
                             <span style="font-size: 24px;">{{traffic_num}}</span>
-                            &nbsp<span style="font-size: 17px;">t</span>
+                            &nbsp;<span style="font-size: 17px;">t</span>
             
                     </el-card>
                 </div>
@@ -76,12 +76,12 @@
                             <el-col :span="12">
                             <div style="border-right: 1px solid #9d9aab; width: 140px; ">
                                 <span style="font-size: 30px;font-weight:normal;">{{coal_abstract.num}}</span>
-                                </br>
+                                <br/>
                                 <span style="font-size: 20px;">{{coal_abstract.name}}</span>
                             </div>
                         </el-col>
                         <el-col :span="12">
-                            <div  v-for="item in options"  style="justify-content:space-evenly;">
+                            <div  v-for="item, index in options" :key="index" style="justify-content:space-evenly;">
                                 <span style="font-size: 14px; ">{{item.name}}</span>
                                 &nbsp;&nbsp;&nbsp;
                                 <span style="font-size: 14px;">{{item.num}}</span>  
@@ -130,100 +130,104 @@
 
 
 <script>
-    import power from '@/components/mining/power.vue'
-    import coal_output from '@/components/mining/coal_output.vue'
-    export default {
-        name: "coalcutter",
-        data() {
-            return {
-                time: {
-                    day: '12',
-                    hour: '5',
-                    min: '23'
-                },
-                coal_abstract: {
-                    num: '18个',
-                    name: '子设备总数'
-
-                },
-                traffic_num: '52',
-                options: [{
-                    name: '采煤机本体 ',
-                    num: '1个'
-                }, {
-                    name: '牵引',
-                    num: '7个'
-                }, {
-                    name: '摇臂',
-                    num: '1个'
-                }, {
-                    name: '主泵',
-                    num: '1个'
-                }],
-            }
+import power from "@/components/mining/power.vue";
+import coal_output from "@/components/mining/coal_output.vue";
+export default {
+  name: "coalcutter",
+  data() {
+    return {
+      time: {
+        day: "12",
+        hour: "5",
+        min: "23",
+      },
+      coal_abstract: {
+        num: "18个",
+        name: "子设备总数",
+      },
+      traffic_num: "52",
+      options: [
+        {
+          name: "采煤机本体 ",
+          num: "1个",
+        },
+        {
+          name: "牵引",
+          num: "7个",
+        },
+        {
+          name: "摇臂",
+          num: "1个",
         },
-        components: {
-            power,
-            coal_output
+        {
+          name: "主泵",
+          num: "1个",
         },
-        methods: {
-            //打开采煤机本体页面
-            openMainpump() {
-                this.$router.push({
-                    path: '/main_pump'
-                })
-            },
-        }
-    }
+      ],
+    };
+  },
+  components: {
+    power,
+    coal_output,
+  },
+  methods: {
+    //打开采煤机本体页面
+    openMainpump() {
+      this.$router.push({
+        path: "/main_pump",
+      });
+    },
+  },
+};
 </script>
 <style scoped>
-    .back {
-        background-color: #F7F4F2;
-        margin-top: 20px;
-    }
-    
-    .grid-content {
-        /* border: 1px solid rgb(139, 136, 136); */
-        height: 160px;
-    }
-    
-    .el-card {
-        background: #FFFFFF;
-        border-radius: 8px;
-        width: 160px;
-        height: 165px;
-        margin-top: 5px;
-        margin-left: 5px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
-    }
-    
-    .text {
-        font-size: 13px;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-        font-weight: bolder;
-    }
-    
-    .divi {
-        display: block;
-        height: 1px;
-        width: 100%;
-        margin: 6px 0;
-        background-color: #dcdfe6;
-        position: relative;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-    }
-    
-    .divi_small {
-        display: block;
-        height: 1px;
-        width: 100%;
-        margin: 0px 0;
-        background-color: #dcdfe6;
-        position: relative;
-        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-    }
-    
-    .el-row {
-        margin-top: 15px;
-    }
+.back {
+  background-color: #f7f4f2;
+  margin-top: 20px;
+}
+
+.grid-content {
+  /* border: 1px solid rgb(139, 136, 136); */
+  height: 160px;
+}
+
+.el-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 160px;
+  height: 165px;
+  margin-top: 5px;
+  margin-left: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+
+.text {
+  font-size: 13px;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  font-weight: bolder;
+}
+
+.divi {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 6px 0;
+  background-color: #dcdfe6;
+  position: relative;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
+
+.divi_small {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 0px 0;
+  background-color: #dcdfe6;
+  position: relative;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
+
+.el-row {
+  margin-top: 15px;
+}
 </style>

src/views/power_supply/configImg/TablePage.vue

@@ -17,7 +17,6 @@ export default {
   },
 };
 </script>
-
 <style scoped>
 .com-page {
   width: 100%;