采煤工作面200个支架压力

src/components/mining/monitor/error_recording.vue

@@ -41,7 +41,7 @@ export default {
           Math.random() > 0.5 ? "液压制动器过于发热" : "液压制动器制动力矩不足",
       };
       this.tableData.unshift(temp);
-      console.log(this.tableData);
+      // console.log(this.tableData);
     }, 3000);
     this.$once("hook:beforeDestroy", () => {
       clearInterval(interval);

src/views/mining/Monitor/CoalMining.vue

@@ -70,7 +70,7 @@ export default {
   mounted() {
     // 小车
     this.carInterval = setInterval(() => {
-      console.log("carInterval");
+      // console.log("carInterval");
       this.car += this.temp;
       if (this.car >= 1200) {
         this.temp = this.temp * -1;

src/views/mining/Monitor/echarts/Bars.vue

@@ -1,27 +1,23 @@
 <template>
   <!-- 支架压力柱状图 -->
-  <div
-    ref="bar"
-    style="height: 240px; width: 800px; margin-top: 30px;margin-left:40px"
-  ></div>
+  <div ref="bar" style="height: 240px; width: 800px; margin-top: 30px; margin-left: 40px"></div>
 </template>
 
 <script>
 /**
-   * @module mining/Monitor/Bars
-   * @desc 支架压力监控
-   * @vue-data {Object} myChart - 小车运行速度
-   * @vue-data {Array} zhijiaId - 支架编号
-   * @vue-computed {Array} barData - 支架压力数值
-   */
-
+ * @module mining/Monitor/Bars
+ * @desc 支架压力监控
+ * @vue-data {Object} myChart - 小车运行速度
+ * @vue-data {Array} zhijiaId - 支架编号
+ * @vue-computed {Array} barData - 支架压力数值
+ */
 export default {
   name: "Bars",
   data() {
     return {
       myChart: null,
       zhijiaId: [],
-      barData: [],
+      barData: []
     };
   },
   mounted() {
@@ -32,23 +28,23 @@ export default {
         padding: [0, 44],
         textStyle: {
           fontWeight: "normal", //标题颜色
-          color: "#4ADEFE",
-        },
+          color: "#4ADEFE"
+        }
       },
       tooltip: {
         trigger: "axis",
         axisPointer: {
-          type: "shadow",
+          type: "shadow"
         },
         formatter: (params) => {
-          if (params[0].data > 39) {
+          if (params[0].data > 38) {
             return params[0].marker + "压力过高:" + params[0].data;
-          } else if (params[0].data < 26) {
+          } else if (params[0].data < 32) {
             return params[0].marker + "压力过低:" + params[0].data;
           } else {
             return params[0].marker + "压力正常:" + params[0].data;
           }
-        },
+        }
       },
       color: ["#FF6666", "#99CC66", "#FFFF66"],
       legend: {
@@ -57,45 +53,47 @@ export default {
         padding: [25, 20],
         icon: "rect",
         textStyle: {
-          color: "#fff",
+          color: "#fff"
         },
-        data: ["压力超限", "压力正常", "压力过低"],
+        data: ["压力超限", "压力正常", "压力过低"]
       },
       grid: {
-        top:"22%",
+        top: "22%",
         left: "3%",
         right: "4%",
         bottom: "3%",
-        containLabel: true,
+        containLabel: true
       },
       xAxis: [
         {
           type: "category",
           axisLabel: {
             color: "#fff",
-            fontSize: 11,
+            fontSize: 11
           },
           axisLine: {
-            show: true,
+            show: true
           },
-          data: this.zhijiaId,
-        },
+          data: this.zhijiaId
+        }
       ],
       yAxis: [
         {
           type: "value",
           axisLabel: {
-            color: "#fff",
+            color: "#fff"
             // fontSize: 11,
           },
+          min: 30,
+          max: 40,
           splitLine: {
             show: true,
             lineStyle: {
               type: "dotted",
-              color: "#fff",
-            },
-          },
-        },
+              color: "#fff"
+            }
+          }
+        }
       ],
       series: [
         {
@@ -104,19 +102,19 @@ export default {
           itemStyle: {
             normal: {
               color: function (params) {
-                if (params.data > 39) {
+                if (params.data > 38) {
                   return "#FF6666";
-                } else if (params.data < 26) {
+                } else if (params.data < 32) {
                   return "#FFFF66";
                 } else {
                   return "#99CC66";
                 }
-              },
-            },
+              }
+            }
           },
           // barWidth: "10",
           barCategoryGap: "5%",
-          data: this.barData,
+          data: this.barData
         },
         {
           //这两组数据用来模拟markLine线段开关,data可以为空
@@ -130,12 +128,12 @@ export default {
                 itemStyle: {
                   normal: {
                     show: true,
-                    color: "#FF6666",
-                  },
-                },
-              },
-            ],
-          },
+                    color: "#FF6666"
+                  }
+                }
+              }
+            ]
+          }
         },
         {
           //这两组数据用来模拟markLine线段开关,data可以为空
@@ -145,35 +143,38 @@ export default {
             data: [
               {
                 name: "压力正常",
-                yAxis: "24",
+                yAxis: "32",
                 itemStyle: {
                   normal: {
                     show: true,
-                    color: "#FFFF66",
-                  },
-                },
-              },
-            ],
-          },
+                    color: "#FFFF66"
+                  }
+                }
+              }
+            ]
+          }
         },
         {
           name: "压力过低",
           type: "line",
           itemStyle: {
             normal: {
-              color: "#FFFF66",
-            },
-          },
-        },
-      ],
+              color: "#FFFF66"
+            }
+          }
+        }
+      ]
     };
 
     this.myChart = this.$echarts.init(this.$refs.bar);
     // 获取数据
     this.myChart.setOption(option);
-    this.timer = setInterval(() => {
-      this.getData();
-    }, 3000);
+
+    this.websocket = new WebSocket(`ws://localhost:8081/hbase/ws/belt/1070`);
+    this.initWebSocket();
+    // this.timer = setInterval(() => {
+    //   this.getData();
+    // }, 3000);
   },
 
   methods: {
@@ -184,34 +185,86 @@ export default {
       this.barData.push(parseInt(Math.random() * (40 - 25 + 1) + 25, 10));
 
       console.log(this.barData);
+      console.log(this.zhijiaId);
       this.myChart.setOption({
         xAxis: [
           {
-            data: this.zhijiaId,
-          },
+            data: this.zhijiaId
+          }
         ],
         series: [
           {
-            data: this.barData,
-          },
+            data: this.barData
+          }
+        ]
+      });
+    },
+    addData(temps) {
+      this.barData = [];
+      for (let temp of temps) {
+        let arr = [];
+        for (let data in temp) {
+          if (data.includes("after")) {
+            arr.push([data, temp[data]]);
+          }
+        }
+        let newArr = arr
+          .sort((a, b) => Number(a[0].substring(0, 3)) - Number(b[0].substring(0, 3)))
+          .map((temp) => temp[1]);
+        this.barData = [...this.barData, ...newArr];
+      }
+      console.log("@@", this.barData);
+      this.myChart.setOption({
+        xAxis: [
+          {
+            data: this.zhijiaId
+          }
         ],
+        series: [
+          {
+            data: this.barData
+          }
+        ]
       });
     },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log("WebSocket连接发生错误   状态码：" + this.websocket.readyState);
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log("WebSocket连接成功    状态码：" + this.websocket.readyState);
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.addData(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log("WebSocket连接关闭    状态码：" + this.websocket.readyState);
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        console.log("关闭websocket连接");
+        this.websocket.close();
+      });
+    }
   },
   created() {
-    // this.getData();
-    var index = 190;
-    for (var i = 0; i < 190; i++) {
-      this.zhijiaId.push(index--);
-      var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
-      this.barData.push(data);
+    for (let i = 1; i <= 200; i++) {
+      this.zhijiaId.push(i);
+      // var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
+      // this.barData.push(data);
     }
     console.log(this.zhijiaId);
   },
 
   destroyed() {
     clearInterval(this.timer);
-  },
+  }
 };
 </script>