掘进系统仪表盘+温度计

src/components/tunneling/dashBoard.vue

@@ -6,15 +6,21 @@
 </template>
  
 <script type="text/ecmascript-6">
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      value: "",
       chartInstance: null,
       allData: null, // 服务器返回的数据
-
     };
   },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
   mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/44`);
+    this.initWebSocket();
     this.initChart(); //函数调用
     // this.getData();
     this.updateChart();
@@ -27,9 +33,7 @@ export default {
       );
     },
 
-
     updateChart() {
-
       const option = {
         grid: {
           height: 200,
@@ -92,17 +96,60 @@ export default {
             data: [
               {
                 name: "系统电压",
-                value: 2000,
+                value: this.value,
                 itemStyle: { color: "#00ccee" },
               },
             ],
           },
         ],
       };
-
       this.chartInstance.setOption(option);
     },
-
+    addData(data) {
+      this.value = data.map((item) => item["dianya_after"])[0];
+      this.chartInstance.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
+    },
   },
 };
 </script>

src/components/tunneling/log.vue

@@ -18,7 +18,7 @@
 export default {
   data(){
     return {
-            one:'进入设备     ',
+            one:'进入设备   ------- 进入掘进机控制系统-------  ',
             allData:null,    // 服务器返回的数据
  
             currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新

src/components/tunneling/rtop.vue

@@ -3,11 +3,11 @@
     <ul>
         <li>
             瓦斯涌出量:<span>{{one}}</span>m^3/min
-            <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " v-bind:class="{red1:danger1, green1:save1}"></span>
+            <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " :class="{red1:danger2, green1:save2}"></span>
         </li>
         <li>
             粉 尘 浓 度 :<span>{{two}}</span>g/m^3
-            <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " v-bind:class="{red1:danger2, green1:save2}"></span>
+            <span style="width:30px; height:30px; border:1px solid red; border-radius:50%; " :class="{red1:danger2, green1:save2}"></span>
         </li>
     </ul>
 </div>
@@ -20,7 +20,7 @@ export default {
             one:'',
             two:'',
             danger1:"",
-            danger2:"",
+            danger2:true,
             save1:"",
             save2:"",
 
@@ -34,7 +34,9 @@ export default {
   },
 
   mounted() {
-    this.getData()
+    //   this.danger2=true;
+      this.updateData()
+    // this.getData()
     //  对窗口大小变化的事件进行监听
         // window.addEventListener('resize', this.screenAdapter)
   },
@@ -44,20 +46,20 @@ export default {
         // window.removeEventListener('resize', this.screenAdapter)
   },
   methods: {
-   async getData(){
-        // 请求数据 allData
-        const { data: ret } = await this.$http.get('hbase/getJSON')
-        const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode4')
-        this.allData = ret
-        // 每1个元素显示一页
-        this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
+//    async getData(){
+//         // 请求数据 allData
+//         const { data: ret } = await this.$http.get('hbase/getJSON')
+//         const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode4')
+//         this.allData = ret
+//         // 每1个元素显示一页
+//         this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
 
-        // 获取完数据， 更新图标
-        this.updateData()
+//         // 获取完数据， 更新图标
+//         this.updateData()
 
-        // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-        this.startInterval()
-    },
+//         // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
+//         this.startInterval()
+//     },
     updateData() {
         this.danger1 = ""
         this.danger2 = ""
@@ -66,7 +68,7 @@ export default {
         const start = (this.currentPage - 1) * 1
         const end = this.currentPage * 1
         const showData = this.allData.slice(start, end)    
-        this.one = showData[0].wasiyongchuliang
+        this.one = 4
         this.two = showData[0].fenchennongdu
         if(this.one>3){
             this.danger1 = true
@@ -81,22 +83,22 @@ export default {
         }
     
     },
-    startInterval () {
-        // 每个3秒执行一次
-        setInterval(() => { 
-            // 保险操作
-            if(this.timeId){
-                clearInterval(this.timerId)
-            }
-                this.currentPage++
-            //  当页数超过总页数是， 从头开始
-            if(this.currentPage > this.totalPage){
-                this.currentPage = 1
-            }
+    // startInterval () {
+    //     // 每个3秒执行一次
+    //     setInterval(() => { 
+    //         // 保险操作
+    //         if(this.timeId){
+    //             clearInterval(this.timerId)
+    //         }
+    //             this.currentPage++
+    //         //  当页数超过总页数是， 从头开始
+    //         if(this.currentPage > this.totalPage){
+    //             this.currentPage = 1
+    //         }
 
-            this.updateData()
-        },3000)
-    }
+    //         this.updateData()
+    //     },3000)
+    // }
   }
 }
 </script>

src/components/tunneling/six/five.vue

@@ -6,20 +6,26 @@
 </template>
  
 <script type="text/ecmascript-6">
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      value:'',
       chartInstance: null,
       allData: null, // 服务器返回的数据
 
     };
+  },
+    computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/49`);
+    this.initWebSocket();
     this.initChart(); //函数调用
     // this.getData();
     this.updateChart();
   },
-
   methods: {
     initChart() {
       this.chartInstance = this.$echarts.init(
@@ -43,7 +49,7 @@ export default {
             name: "仪表盘",
             type: "gauge",
             min: 0,
-            max: 2500,
+            max: 500,
             splitNumber: 10,
             // "axisLine": {
             //   "lineStyle": {
@@ -92,7 +98,7 @@ export default {
             data: [
               {
                 name: "系统电压",
-                value: 2000,
+                value: this.value,
                 itemStyle: { color: "#00ccee" },
               },
             ],
@@ -101,6 +107,51 @@ export default {
       };
 
       this.chartInstance.setOption(option);
+    },
+        addData(data) {
+      this.value = data.map((item) => item["fengjidianliu_after"])[0];
+      this.chartInstance.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
     },
 
   },

src/components/tunneling/six/four.vue

@@ -6,20 +6,26 @@
 </template>
  
 <script type="text/ecmascript-6">
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      value:'',
       chartInstance: null,
       allData: null, // 服务器返回的数据
 
     };
+  },
+    computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/45`);
+    this.initWebSocket();
     this.initChart(); //函数调用
     // this.getData();
     this.updateChart();
   },
-
   methods: {
     initChart() {
       this.chartInstance = this.$echarts.init(
@@ -43,7 +49,7 @@ export default {
             name: "仪表盘",
             type: "gauge",
             min: 0,
-            max: 2500,
+            max: 150,
             splitNumber: 10,
             // "axisLine": {
             //   "lineStyle": {
@@ -92,7 +98,7 @@ export default {
             data: [
               {
                 name: "系统电压",
-                value: 2000,
+                value: this.value,
                 itemStyle: { color: "#00ccee" },
               },
             ],
@@ -101,6 +107,51 @@ export default {
       };
 
       this.chartInstance.setOption(option);
+    },
+        addData(data) {
+      this.value = data.map((item) => item["dianliu_after"])[0];
+      this.chartInstance.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
     },
 
   },

src/components/tunneling/six/one.vue

@@ -6,15 +6,22 @@
 </template>
  
 <script type="text/ecmascript-6">
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      value:'',
       chartInstance: null,
       allData: null, // 服务器返回的数据
 
     };
+  },
+    computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/47`);
+    this.initWebSocket();
     this.initChart(); //函数调用
     // this.getData();
     this.updateChart();
@@ -43,7 +50,7 @@ export default {
             name: "仪表盘",
             type: "gauge",
             min: 0,
-            max: 2500,
+            max: 1200,
             splitNumber: 10,
             // "axisLine": {
             //   "lineStyle": {
@@ -92,7 +99,7 @@ export default {
             data: [
               {
                 name: "系统电压",
-                value: 2000,
+                value: this.value,
                 itemStyle: { color: "#00ccee" },
               },
             ],
@@ -101,6 +108,51 @@ export default {
       };
 
       this.chartInstance.setOption(option);
+    },
+        addData(data) {
+      this.value = data.map((item) => item["dianliu_after"])[0];
+      this.chartInstance.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
     },
 
   },

src/components/tunneling/six/three.vue

@@ -6,20 +6,26 @@
 </template>
  
 <script type="text/ecmascript-6">
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      value:'',
       chartInstance: null,
       allData: null, // 服务器返回的数据
 
     };
+  },
+    computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/43`);
+    this.initWebSocket();
     this.initChart(); //函数调用
     // this.getData();
     this.updateChart();
   },
-
   methods: {
     initChart() {
       this.chartInstance = this.$echarts.init(
@@ -43,7 +49,7 @@ export default {
             name: "仪表盘",
             type: "gauge",
             min: 0,
-            max: 2500,
+            max: 1200,
             splitNumber: 10,
             // "axisLine": {
             //   "lineStyle": {
@@ -92,7 +98,7 @@ export default {
             data: [
               {
                 name: "系统电压",
-                value: 2000,
+                value: this.value,
                 itemStyle: { color: "#00ccee" },
               },
             ],
@@ -101,6 +107,51 @@ export default {
       };
 
       this.chartInstance.setOption(option);
+    },
+        addData(data) {
+      this.value = data.map((item) => item["jiegaodianliu_after"])[0];
+      this.chartInstance.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
     },
 
   },

src/components/tunneling/six/two.vue

@@ -6,15 +6,22 @@
 </template>
  
 <script type="text/ecmascript-6">
+import { mapState } from "vuex";
 export default {
   data() {
     return {
+      value:'',
       chartInstance: null,
       allData: null, // 服务器返回的数据
 
     };
+  },
+    computed: {
+    ...mapState(["websocketIP"]),
   },
   mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/43`);
+    this.initWebSocket();
     this.initChart(); //函数调用
     // this.getData();
     this.updateChart();
@@ -43,7 +50,7 @@ export default {
             name: "仪表盘",
             type: "gauge",
             min: 0,
-            max: 2500,
+            max: 1200,
             splitNumber: 10,
             // "axisLine": {
             //   "lineStyle": {
@@ -92,7 +99,7 @@ export default {
             data: [
               {
                 name: "系统电压",
-                value: 2000,
+                value: this.value,
                 itemStyle: { color: "#00ccee" },
               },
             ],
@@ -101,6 +108,51 @@ export default {
       };
 
       this.chartInstance.setOption(option);
+    },
+        addData(data) {
+      this.value = data.map((item) => item["jiedidianliu_after"])[0];
+      this.chartInstance.setOption({
+        series: [
+          {
+            data: [
+              {
+                value: this.value,
+              },
+            ],
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
     },
 
   },

src/components/tunneling/temporature-two.vue

@@ -1,347 +1,465 @@
 <template>
-  <div id="tempChart2" style="width: 100%;height: 150px;"></div>
+  <div
+    id="tempChart2"
+    style="width: 100%;height: 150px;"
+  ></div>
 </template>
 
 <script>
-    var TP_value = 20.3;
-    var kd = [];
-    var Gradient = [];
-    var leftColor = '';
-    var showValue = 30;
-    var boxPosition = [65, 0];
-    var TP_txt = ''
-    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
-    for (let i = 0, len = 100; i <= len; i += 1) {
-        if (i < 10) {
-            kd.push('');
-        } else if ((i - 10) % 10 === 0) {
-            kd.push('-3');
-        } else {
-            kd.push('-1');
-        }
-    }
-    //中间线的渐变色和文本内容
-    if(TP_value > 24) {
-        TP_txt = '温度偏高';
-        Gradient.push({
-            offset: 0,
-            color: '#93FE94'
-        }, {
-            offset: 0.5,
-            color: '#E4D225'
-        }, {
-            offset: 1,
-            color: '#E01F28'
-        })
-    } else if(TP_value >= 14) {
-        TP_txt = '温度正常';
-        Gradient.push({
-            offset: 0,
-            color: '#93FE94'
-        }, {
-            offset: 1,
-            color: '#E4D225'
-        })
-    } else {
-        TP_txt = '温度偏低';
-        Gradient.push({
-            offset: 1,
-            color: '#93FE94'
-        })
-    }
-    if(TP_value > 100) {
-        showValue = 100
-    } else {
-        if(TP_value < 0) {
-            showValue = 0
-        } else {
-            showValue = TP_value + 10
-        }
+import { mapState } from "vuex";
+var TP_value = 20.3;
+var kd = [];
+var Gradient = [];
+var leftColor = "";
+var showValue = 30;
+var boxPosition = [65, 0];
+var TP_txt = "";
+// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+for (let i = 0, len = 100; i <= len; i += 1) {
+  if (i < 10) {
+    kd.push("");
+  } else if ((i - 10) % 10 === 0) {
+    kd.push("-3");
+  } else {
+    kd.push("-1");
+  }
+}
+//中间线的渐变色和文本内容
+if (TP_value > 24) {
+  TP_txt = "温度偏高";
+  Gradient.push(
+    {
+      offset: 0,
+      color: "#93FE94",
+    },
+    {
+      offset: 0.5,
+      color: "#E4D225",
+    },
+    {
+      offset: 1,
+      color: "#E01F28",
     }
-    if(TP_value < 0) {
-        boxPosition = [65, -120]
+  );
+} else if (TP_value >= 14) {
+  TP_txt = "温度正常";
+  Gradient.push(
+    {
+      offset: 0,
+      color: "#93FE94",
+    },
+    {
+      offset: 1,
+      color: "#E4D225",
     }
-    leftColor = Gradient[Gradient.length - 1].color;
-    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+  );
+} else {
+  TP_txt = "温度偏低";
+  Gradient.push({
+    offset: 1,
+    color: "#93FE94",
+  });
+}
+if (TP_value > 100) {
+  showValue = 100;
+} else {
+  if (TP_value < 0) {
+    showValue = 0;
+  } else {
+    showValue = TP_value + 10;
+  }
+}
+if (TP_value < 0) {
+  boxPosition = [65, -120];
+}
+leftColor = Gradient[Gradient.length - 1].color;
+// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
 
 export default {
-    data () {
-        return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+  data() {
+    return {
+      showValue: "",
+      chartInstance: null,
 
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-        }
-    },
-    mounted () {
-        this.initChart()
-        this.updateChart()
+      allData: null, // 服务器返回的数据
 
-        // this.getData()
-    //  对窗口大小变化的事件进行监听
-        // window.addEventListener('resize', this.screenAdapter)
+      currentPage: 1, //当前显示的页数， 当修改页数时， 数据动态刷新
 
+      totalPage: 0, //一共多少也
+      timerId: null, //定时器
+    };
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/46`);
+    this.initWebSocket();
+    this.initChart();
+    this.updateChart();
 
-    },
-    // destroyed () {
-    //   clearInterval(this.timerId)
-    //     // 在组件销毁的时候, 需要将监听器取消掉
-    //     // window.removeEventListener('resize', this.screenAdapter)
-
+    // this.getData()
+    //  对窗口大小变化的事件进行监听
+    // window.addEventListener('resize', this.screenAdapter)
+  },
+  // destroyed () {
+  //   clearInterval(this.timerId)
+  //     // 在组件销毁的时候, 需要将监听器取消掉
+  //     // window.removeEventListener('resize', this.screenAdapter)
 
-    // },
-    methods: {
-        //初始化echarts实例对象
+  // },
+  methods: {
+    //初始化echarts实例对象
 
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("tempChart2")
+      );
+    },
 
-        initChart () {
-            this.chartInstance = this.$echarts.init(document.getElementById('tempChart2'))
-    
- 
+    updateChart() {
+      const option = {
+        grid: {
+          x: 30, //左侧与y轴的距离
+          y: 0, //top部与x轴的距离
+          x2: -120, //右侧与y轴的距离
+          y2: 20, //bottom部与x轴的距离
         },
+        // backgroundColor: '#0C2F6F',
+        title: {
+          text: "油位",
+          show: true,
+          textStyle: {
+            color: "pink",
+          },
+        },
+        yAxis: [
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: 120,
+            axisLine: {
+              show: false,
+            },
+          },
+          {
+            show: false,
+            min: 0,
+            max: 105,
+          },
+        ],
+        xAxis: [
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -5,
+            max: 80,
+            // data: []    // ?
+          },
+        ],
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            // 对应上面XAxis的第一个对象配置
+            xAxisIndex: 0,
+            data: [
+              {
+                value: showValue,
+              },
+            ],
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
+                // color:'blue'
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "白框",
+            type: "bar",
+            xAxisIndex: 1,
+            barGap: "-100%",
+            data: [100],
+            barWidth: 14,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                barBorderRadius: 50,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [101],
+            barWidth: 24,
+            itemStyle: {
+              normal: {
+                color: "#4577BA",
+                barBorderRadius: 50,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 0,
+            symbolSize: 20,
+            itemStyle: {
+              normal: {
+                color: "#93FE94",
+                opacity: 1,
+              },
+            },
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+            z: 2,
+          },
+          {
+            name: "白圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 1,
+            symbolSize: 24,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                opacity: 1,
+              },
+            },
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
 
-        // async getData() {
-        //     // 请求数据 allData
-        //     const { data: ret } = await this.$http.get('hbase/getJSON')
-        //     const { data1:ret1  } = await this.$http.get('engine/start/?mode=mode5')
-        //     this.allData = ret
-        //     // 对数据排序
-        //     this.allData.sort((a,b) => {{
-        //         return a.value-b.value //从小到大排序
-        //     }})
-        //     // 每5个元素显示一页
-        //     this.totalPage = this.allData.length % 1 ===0 ? this.allData.length /1 : this.allData.length / 1 +1 
-
-        //     // 获取完数据， 更新图标
-        //     this.updateChart()
-
-        //     // 启动定时器， 每隔三秒改变currentPage, 进而更新图表
-        //     this.startInterval()
-
-        // },
-        updateChart(){
-            // // 每一页显示1个数据， 获取5个数据
-            // const start = (this.currentPage - 1) * 1
-            // const end = this.currentPage * 1
-            // const showData = this.allData.slice(start, end)    
-            // const showValue = showData[0].youwei-5
-            // // const showValue = showData[0]
-
-            const option = {
-                grid:{
-                    x: 30,   //左侧与y轴的距离
-                    y: 0,   //top部与x轴的距离
-                    x2: -120,   //右侧与y轴的距离
-                    y2: 20    //bottom部与x轴的距离
+            z: 1,
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 2,
+            symbolSize: 30,
+            itemStyle: {
+              normal: {
+                color: "#4577BA",
+                opacity: 1,
+              },
+            },
+            series: {
+              data: [
+                {
+                  value: showValue,
                 },
-                // backgroundColor: '#0C2F6F',
-                title: {
-                    text: '油位',
-                    show: true,
-                    textStyle:{
-                        color:'pink'
+              ],
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 3,
+            label: {
+              normal: {
+                show: true,
+                position: "left",
+                distance: 10,
+                color: "white",
+                fontSize: 14,
+                formatter: function (params) {
+                  if (params.dataIndex > 100 || params.dataIndex < 10) {
+                    return "";
+                  } else {
+                    if ((params.dataIndex - 10) % 10 === 0) {
+                      return params.dataIndex - 10;
+                    } else {
+                      return "";
                     }
+                  }
                 },
-                yAxis: [{
-                    show: false,
-                    data: [],
-                    min: 0,
-                    max: 120,
-                    axisLine: {
-                        show: false
-                    }
-                }, {
-                    show: false,
-                    min: 0,
-                    max: 105,
-                }],
-                xAxis: [{
-                    show: false,
-                    min: -10,
-                    max: 80,
-                    data: []
-                }, {
-                    show: false,
-                    min: -10,
-                    max: 80,
-                    data: []
-                }, {
-                    show: false,
-                    min: -10,
-                    max: 80,
-                    data: []
-                }, {
-                    show: false,
-                    min: -5,
-                    max: 80,
-                    // data: []    // ?
-                }],
-                series: [{
-                    name: '条',
-                    type: 'bar',
-                    // 对应上面XAxis的第一个对象配置
-                    xAxisIndex: 0,
-                    data:[{
-                        value:showValue
-                    }],
-                    barWidth: 8,
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
-                            // color:'blue'
-                        }
-                    },
-                    z: 2
-                    }, {
-                        name: '白框',
-                        type: 'bar',
-                        xAxisIndex: 1,
-                        barGap: '-100%',
-                        data: [100],
-                        barWidth: 14,
-                        itemStyle: {
-                            normal: {
-                                color: '#0C2E6D',
-                                barBorderRadius: 50,
-                            }
-                        },
-                        z: 1
-                    }, {
-                        name: '外框',
-                        type: 'bar',
-                        xAxisIndex: 2,
-                        barGap: '-100%',
-                        data: [101],
-                        barWidth: 24,
-                        itemStyle: {
-                            normal: {
-                                color: '#4577BA',
-                                barBorderRadius: 50,
-                            }
-                        },
-                        z: 0
-                    }, {
-                        name: '圆',
-                        type: 'scatter',
-                        hoverAnimation: false,
-                        data: [0],
-                        xAxisIndex: 0,
-                        symbolSize: 20,
-                        itemStyle: {
-                            normal: {
-                                color: '#93FE94',
-                                opacity: 1,
-                            }
-                        },
-                        series:{
-                            data:[{
-                                value:showValue,
-                            }]
-                        },
-                        z: 2
-                    }, {
-                        name: '白圆',
-                        type: 'scatter',
-                        hoverAnimation: false,
-                        data: [0],
-                        xAxisIndex: 1,
-                        symbolSize: 24,
-                        itemStyle: {
-                            normal: {
-                                color: '#0C2E6D',
-                                opacity: 1,
-                            }
-                        },
-                        series:{
-                            data:[{
-                                value:showValue,
-                            }]
-                        },
-                        
-                        z: 1
-                    }, {
-                        name: '外圆',
-                        type: 'scatter',
-                        hoverAnimation: false,
-                        data: [0],
-                        xAxisIndex: 2,
-                        symbolSize: 30,
-                        itemStyle: {
-                            normal: {
-                                color: '#4577BA',
-                                opacity: 1,
-                            }
-                        },
-                        series:{
-                            data:[{
-                                value:showValue
-                            }]
-                        },
-                        z: 0
-                    }, {
-                        name: '刻度',
-                        type: 'bar',
-                        yAxisIndex: 0,
-                        xAxisIndex: 3,
-                        label: {
-                            normal: {
-                                show: true,
-                                position: 'left',
-                                distance: 10,
-                                color: 'white',
-                                fontSize: 14,
-                                formatter: function(params) {
-                                    if (params.dataIndex > 100 || params.dataIndex < 10) {
-                                        return '';
-                                    } else {
-                                        if ((params.dataIndex - 10) % 10 === 0) {
-                                            return params.dataIndex - 10;
-                                        } else {
-                                            return '';
-                                        }
-                                    }
-                                }
-                            }
-                        },
-                        barGap: '-100%',
-                        data: kd,
-                        barWidth: 1,
-                        itemStyle: {
-                            normal: {
-                                color: 'white',
-                                barBorderRadius: 120,
-                            }
-                        },
-                        z: 0
-        }]
-            }
-            this.chartInstance.setOption(option)
-        },
-        // startInterval () {
-        //     // 每个3秒执行一次
-        //     setInterval(() => { 
-        //         // 保险操作
-        //         if(this.timeId){
-        //             clearInterval(this.timerId)
-        //         }
-        //          this.currentPage++
-        //         //  当页数超过总页数是， 从头开始
-        //          if(this.currentPage > this.totalPage){
-        //              this.currentPage = 1
-        //          }
-        //          this.updateChart()
-        //     },3000)
-        // }
-
+              },
+            },
+            barGap: "-100%",
+            data: kd,
+            barWidth: 1,
+            itemStyle: {
+              normal: {
+                color: "white",
+                barBorderRadius: 120,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+      this.chartInstance.setOption(option);
+    },
+    addData(data) {
+      //    console.log(data);
+      this.showValue = data.map((item) => item["youwei_after"])[0];
 
-    }
-}
+      console.log(typeof this.showValue);
+      this.chartInstance.setOption({
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            // 对应上面XAxis的第一个对象配置
+            xAxisIndex: 0,
+            data: [
+              {
+                value: Number(this.showValue),
+              },
+            ],
+          },
+          {
+            name: "白框",
+            type: "bar",
+            xAxisIndex: 1,
+            barGap: "-100%",
+            data: [100],
+            barWidth: 14,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                barBorderRadius: 50,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [101],
+          },
+          {
+            name: "圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 0,
+            symbolSize: 20,
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+          },
+          {
+            name: "白圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 2,
+            symbolSize: 30,
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 3,
+            barGap: "-100%",
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>

src/components/tunneling/temporature.vue

@@ -1,326 +1,462 @@
 <template>
-  <div id="tempChart" style="width: 100%;height: 150px;"></div>
+  <div
+    id="tempChart"
+    style="width: 100%;height: 150px;"
+  ></div>
 </template>
 
 <script>
-    var TP_value = 20.3;
-    var kd = [];
-    var Gradient = [];
-    var leftColor = '';
-    var showValue = 60;
-    var boxPosition = [65, 0];
-    var TP_txt = ''
-    // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
-    for (let i = 0, len = 80; i <= len; i += 1) {
-        if (i < 10) {
-            kd.push('');
-        } else if ((i - 10) % 10 === 0) {
-            kd.push('-3');
-        } else {
-            kd.push('-1');
-        }
-    }
-    //中间线的渐变色和文本内容
-    if(TP_value > 24) {
-        TP_txt = '温度偏高';
-        Gradient.push({
-            offset: 0,
-            color: '#93FE94'
-        }, {
-            offset: 0.5,
-            color: '#E4D225'
-        }, {
-            offset: 1,
-            color: '#E01F28'
-        })
-    } else if(TP_value >= 14) {
-        TP_txt = '温度正常';
-        Gradient.push({
-            offset: 0,
-            color: '#93FE94'
-        }, {
-            offset: 1,
-            color: '#E4D225'
-        })
-    } else {
-        TP_txt = '温度偏低';
-        Gradient.push({
-            offset: 1,
-            color: '#93FE94'
-        })
-    }
-    if(TP_value > 80) {
-        showValue = 80
-    } else {
-        if(TP_value < 0) {
-            showValue = 0
-        } else {
-            showValue = TP_value + 10
-        }
+import { mapState } from "vuex";
+var TP_value = 20.3;
+var kd = [];
+var Gradient = [];
+var leftColor = "";
+var showValue = 60;
+var boxPosition = [65, 0];
+var TP_txt = "";
+// 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
+for (let i = 0, len = 80; i <= len; i += 1) {
+  if (i < 10) {
+    kd.push("");
+  } else if ((i - 10) % 10 === 0) {
+    kd.push("-3");
+  } else {
+    kd.push("-1");
+  }
+}
+//中间线的渐变色和文本内容
+if (TP_value > 24) {
+  TP_txt = "温度偏高";
+  Gradient.push(
+    {
+      offset: 0,
+      color: "#93FE94",
+    },
+    {
+      offset: 0.5,
+      color: "#E4D225",
+    },
+    {
+      offset: 1,
+      color: "#E01F28",
     }
-    if(TP_value < 0) {
-        boxPosition = [65, -120];
+  );
+} else if (TP_value >= 14) {
+  TP_txt = "温度正常";
+  Gradient.push(
+    {
+      offset: 0,
+      color: "#93FE94",
+    },
+    {
+      offset: 1,
+      color: "#E4D225",
     }
-    leftColor = Gradient[Gradient.length - 1].color;
-    // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
+  );
+} else {
+  TP_txt = "温度偏低";
+  Gradient.push({
+    offset: 1,
+    color: "#93FE94",
+  });
+}
+if (TP_value > 80) {
+  showValue = 80;
+} else {
+  if (TP_value < 0) {
+    showValue = 0;
+  } else {
+    showValue = TP_value + 10;
+  }
+}
+if (TP_value < 0) {
+  boxPosition = [65, -120];
+}
+leftColor = Gradient[Gradient.length - 1].color;
+// 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
 
 export default {
-    data () {
-        return {
-            chartInstance: null,
-           
-            allData:null,    // 服务器返回的数据
- 
-            currentPage: 1,  //当前显示的页数， 当修改页数时， 数据动态刷新
+  data() {
+    return {
+      showValue: "",
+      chartInstance: null,
 
-            totalPage: 0,    //一共多少也
-            timerId:null      //定时器
-        }
-    },
-    mounted () {
-        this.initChart()
-        this.updateChart()
-        // this.getData()
-    //  对窗口大小变化的事件进行监听
-        window.addEventListener('resize', this.screenAdapter)
+      allData: null, // 服务器返回的数据
 
+      currentPage: 1, //当前显示的页数， 当修改页数时， 数据动态刷新
 
-    },
-    // destroyed () {
-    //   clearInterval(this.timerId)
-    //     // 在组件销毁的时候, 需要将监听器取消掉
-    //     window.removeEventListener('resize', this.screenAdapter)
+      totalPage: 0, //一共多少也
+      timerId: null, //定时器
+    };
+  },
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/46`);
+    this.initWebSocket();
+    this.initChart();
+    this.updateChart();
 
+    // this.getData()
+    //  对窗口大小变化的事件进行监听
+    // window.addEventListener('resize', this.screenAdapter)
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
 
-    // },
-    methods: {
-        //初始化echarts实例对象
+  methods: {
+    //初始化echarts实例对象
 
+    initChart() {
+      this.chartInstance = this.$echarts.init(
+        document.getElementById("tempChart")
+      );
 
-        initChart () {
-            this.chartInstance = this.$echarts.init(document.getElementById('tempChart'))
-    
-             //对图表对象进行鼠标事件监听
-            this.chartInstance.on('mousecver', () =>{
-                this.clearInterval(this.timerId)
-            })
-            this.chartInstance.on('mouseout', () => {
-                this.startInterval()
-            })
-        },
+      //对图表对象进行鼠标事件监听
+      this.chartInstance.on("mousecver", () => {
+        this.clearInterval(this.timerId);
+      });
+      this.chartInstance.on("mouseout", () => {
+        this.startInterval();
+      });
+    },
 
-     
-        updateChart(){
-            // 每一页显示1个数据， 获取1个数据
-            // const start = (this.currentPage - 1) * 1
-            // const end = this.currentPage * 1
-            // const showData = this.allData.slice(start, end)    
-            // const showValue = showData[0].wendu-10
-            // const arrayData = this.showData.map((item) =>{
-            //     return item.value
-            // }) 
-            // showValue = arrayData
-            const option = {
-                grid:{
-                    x: 60,   //左侧与y轴的距离
-                    y: -50,   //top部与x轴的距离
-                    x2: -120,   //右侧与y轴的距离
-                    y2: 20    //bottom部与x轴的距离
+    updateChart() {
+      // 每一页显示1个数据， 获取1个数据
+      // const start = (this.currentPage - 1) * 1
+      // const end = this.currentPage * 1
+      // const showData = this.allData.slice(start, end)
+      // const showValue = showData[0].wendu-10
+      // const arrayData = this.showData.map((item) =>{
+      //     return item.value
+      // })
+      // showValue = arrayData
+      const option = {
+        grid: {
+          x: 60, //左侧与y轴的距离
+          y: -50, //top部与x轴的距离
+          x2: -120, //右侧与y轴的距离
+          y2: 20, //bottom部与x轴的距离
+        },
+        // backgroundColor: '#0C2F6F',
+        title: {
+          text: "油缸温度",
+          show: true,
+          textStyle: {
+            color: "pink",
+          },
+        },
+        yAxis: [
+          {
+            show: false,
+            data: [],
+            min: 0,
+            max: 120,
+            axisLine: {
+              show: false,
+            },
+          },
+          {
+            show: false,
+            min: 0,
+            max: 90,
+          },
+        ],
+        xAxis: [
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -10,
+            max: 80,
+            data: [],
+          },
+          {
+            show: false,
+            min: -5,
+            max: 80,
+          },
+        ],
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            // 对应上面XAxis的第一个对象配置
+            xAxisIndex: 0,
+            // data: arrayData[1],
+            data: [
+              {
+                value: this.showValue,
+              },
+            ],
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
+              },
+            },
+            z: 2,
+          },
+          {
+            name: "白框",
+            type: "bar",
+            xAxisIndex: 1,
+            barGap: "-100%",
+            data: [80],
+            barWidth: 14,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                barBorderRadius: 50,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [81],
+            barWidth: 24,
+            itemStyle: {
+              normal: {
+                color: "#4577BA",
+                barBorderRadius: 50,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 0,
+            symbolSize: 20,
+            itemStyle: {
+              normal: {
+                color: "#93FE94",
+                opacity: 1,
+              },
+            },
+            series: {
+              data: [
+                {
+                  value: this.showValue,
                 },
-                // backgroundColor: '#0C2F6F',
-                title: {
-                    text: '油缸温度',
-                    show: true,
-                    textStyle:{
-                        color :'pink'
+              ],
+            },
+            z: 2,
+          },
+          {
+            name: "白圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 1,
+            symbolSize: 24,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                opacity: 1,
+              },
+            },
+
+            z: 1,
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 2,
+            symbolSize: 30,
+            itemStyle: {
+              normal: {
+                color: "#4577BA",
+                opacity: 1,
+              },
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 3,
+            label: {
+              normal: {
+                show: true,
+                position: "left",
+                distance: 10,
+                color: "white",
+                fontSize: 14,
+                formatter: function (params) {
+                  if (params.dataIndex > 80 || params.dataIndex < 10) {
+                    return "";
+                  } else {
+                    if ((params.dataIndex - 10) % 10 === 0) {
+                      return params.dataIndex - 10;
+                    } else {
+                      return "";
                     }
+                  }
                 },
-                yAxis: [{
-                    show: false,
-                    data: [],
-                    min: 0,
-                    max: 120,
-                    axisLine: {
-                        show: false
-                    }
-                }, {
-                    show: false,
-                    min: 0,
-                    max: 90,
-                }],
-                xAxis: [{
-                    show: false,
-                    min: -10,
-                    max: 80,
-                    data: []
-                }, {
-                    show: false,
-                    min: -10,
-                    max: 80,
-                    data: []
-                }, {
-                    show: false,
-                    min: -10,
-                    max: 80,
-                    data: []
-                }, {
-                    show: false,
-                    min: -5,
-                    max: 80,
-
-                }],
-                series: [{
-                    name: '条',
-                    type: 'bar',
-                    // 对应上面XAxis的第一个对象配置
-                    xAxisIndex: 0,
-                    // data: arrayData[1],
-                    data:[{
-                        value:showValue
-                    }],
-                    barWidth: 8,
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
-                        }
-                    },
-                    z: 2
-                    }, {
-                        name: '白框',
-                        type: 'bar',
-                        xAxisIndex: 1,
-                        barGap: '-100%',
-                        data: [80],
-                        barWidth: 14,
-                        itemStyle: {
-                            normal: {
-                                color: '#0C2E6D',
-                                barBorderRadius: 50,
-                            }
-                        },
-                        z: 1
-                    }, {
-                        name: '外框',
-                        type: 'bar',
-                        xAxisIndex: 2,
-                        barGap: '-100%',
-                        data: [81],
-                        barWidth: 24,
-                        itemStyle: {
-                            normal: {
-                                color: '#4577BA',
-                                barBorderRadius: 50,
-                            }
-                        },
-                        z: 0
-                    }, {
-                        name: '圆',
-                        type: 'scatter',
-                        hoverAnimation: false,
-                        data: [0],
-                        xAxisIndex: 0,
-                        symbolSize: 20,
-                        itemStyle: {
-                            normal: {
-                                color: '#93FE94',
-                                opacity: 1,
-                            }
-                        },
-                        series:{
-                            data:[{
-                                value:showValue
-                            }]
-                        },
-                        z: 2
-                    }, {
-                        name: '白圆',
-                        type: 'scatter',
-                        hoverAnimation: false,
-                        data: [0],
-                        xAxisIndex: 1,
-                        symbolSize: 24,
-                        itemStyle: {
-                            normal: {
-                                color: '#0C2E6D',
-                                opacity: 1,
-                            }
-                        },
-                        
-                        z: 1
-                    }, {
-                        name: '外圆',
-                        type: 'scatter',
-                        hoverAnimation: false,
-                        data: [0],
-                        xAxisIndex: 2,
-                        symbolSize: 30,
-                        itemStyle: {
-                            normal: {
-                                color: '#4577BA',
-                                opacity: 1,
-                            }
-                        },
-                        z: 0
-                    }, {
-                        name: '刻度',
-                        type: 'bar',
-                        yAxisIndex: 0,
-                        xAxisIndex: 3,
-                        label: {
-                            normal: {
-                                show: true,
-                                position: 'left',
-                                distance: 10,
-                                color: 'white',
-                                fontSize: 14,
-                                formatter: function(params) {
-                                    if (params.dataIndex > 80 || params.dataIndex < 10) {
-                                        return '';
-                                    } else {
-                                        if ((params.dataIndex - 10) % 10 === 0) {
-                                            return params.dataIndex - 10;
-                                        } else {
-                                            return '';
-                                        }
-                                    }
-                                }
-                            }
-                        },
-                        barGap: '-100%',
-                        data: kd,
-                        barWidth: 1,
-                        itemStyle: {
-                            normal: {
-                                color: 'white',
-                                barBorderRadius: 120,
-                            }
-                        },
-                        z: 0
-        }]
-            }
-            this.chartInstance.setOption(option)
-        },
-        // startInterval () {
-        //     // 每个3秒执行一次
-        //     setInterval(() => { 
-        //         // 保险操作
-        //         if(this.timeId){
-        //             clearInterval(this.timerId)
-        //         }
-        //          this.currentPage++
-        //         //  当页数超过总页数是， 从头开始
-        //          if(this.currentPage > this.totalPage){
-        //              this.currentPage = 1
-        //          }
-        //          this.updateChart()
-        //     },3000)
-        // }
-
+              },
+            },
+            barGap: "-100%",
+            data: kd,
+            barWidth: 1,
+            itemStyle: {
+              normal: {
+                color: "white",
+                barBorderRadius: 120,
+              },
+            },
+            z: 0,
+          },
+        ],
+      };
+      this.chartInstance.setOption(option);
+    },
+    addData(data) {
+      //    console.log(data);
+      this.showValue = data.map((item) => item["youwen_after"])[0];
 
-    }
-}
+      console.log(this.showValue);
+      this.chartInstance.setOption({
+        series: [
+          {
+            name: "条",
+            type: "bar",
+            // 对应上面XAxis的第一个对象配置
+            xAxisIndex: 0,
+            data: [
+              {
+                value: Number(this.showValue),
+              },
+            ],
+          },
+          {
+            name: "白框",
+            type: "bar",
+            xAxisIndex: 1,
+            barGap: "-100%",
+            data: [100],
+            barWidth: 14,
+            itemStyle: {
+              normal: {
+                color: "#0C2E6D",
+                barBorderRadius: 50,
+              },
+            },
+            z: 1,
+          },
+          {
+            name: "外框",
+            type: "bar",
+            xAxisIndex: 2,
+            barGap: "-100%",
+            data: [101],
+          },
+          {
+            name: "圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 0,
+            symbolSize: 20,
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+          },
+          {
+            name: "白圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+          },
+          {
+            name: "外圆",
+            type: "scatter",
+            hoverAnimation: false,
+            data: [0],
+            xAxisIndex: 2,
+            symbolSize: 30,
+            series: {
+              data: [
+                {
+                  value: showValue,
+                },
+              ],
+            },
+            z: 0,
+          },
+          {
+            name: "刻度",
+            type: "bar",
+            yAxisIndex: 0,
+            xAxisIndex: 3,
+            barGap: "-100%",
+          },
+        ],
+      });
+    },
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // console.log("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", () => {
+        this.websocket.close();
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>

src/views/tunnelling/zutai.vue

@@ -31,23 +31,30 @@
                 <!-- 6个仪表盘 -->
                 <div id="line_1">
                     <div id="top_1">
+                        <span >系统电压</span>
                         <dashBoard></dashBoard>
+                        
                     </div>
                     <div id="top_2">
+                        <span >油泵电流</span>
                         <one></one>
                     </div>
                     <div id="top_3">
+                        <span>截低电流</span>
                         <two></two>
                     </div>
                 </div>
                 <div id="line_2">
                     <div id="bottom_1">
+                        <span>截高电流</span>
                         <three></three>
                     </div>
                     <div id="bottom_2">
+                        <span>二运电流</span>
                         <four></four>
                     </div>
                     <div id="bottom_3">
+                        <span>风机电流</span>
                         <five></five>                        
                     </div>
                 </div>
@@ -219,7 +226,7 @@ h1 {
     border: 1px solid rgba(25, 186, 139, 0.17);
 }
 #middle-top{
-    height: 260px;
+    height: 360px;
     border: 1px solid rgba(25, 186, 139, 0.17);
     margin-bottom: 0.1875rem;
     display: flex;
@@ -323,4 +330,7 @@ h1 {
     margin-bottom: 0.1875rem;
     flex: 5;
 } 
+.span{
+    text-align:center
+}
 </style>