修改冲突

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/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

@@ -4,89 +4,97 @@
        
           <h1 >掘进机远程智能控制系统</h1>
       </header> -->
-    <div class="screen-body">
-      <section class="screen-left">
-        <div id="left-top">
-          <div id="left-top-left">
-            <!-- 行走状态 -->
-            <!-- <footState></footState> -->
-            <ruler></ruler>
-          </div>
-          <div id="left-top-right">
-            <!-- 割接轨迹 -->
-            <hard></hard>
-          </div>
-        </div>
-        <div id="left-mid">
-          <!-- 压入式风机 -->
-          <lmid></lmid>
-        </div>
-        <div id="left-bottom">
-          <!-- 除尘风机 -->
-          <lbottom></lbottom>
-        </div>
-      </section>
-      <section class="screen-middle">
-        <div id="middle-top">
-          <!-- 6个仪表盘 -->
-          <div id="line_1">
-            <div id="top_1">
-              <dashBoard></dashBoard>
-            </div>
-            <div id="top_2">
-              <one></one>
-            </div>
-            <div id="top_3">
-              <two></two>
-            </div>
-          </div>
-          <div id="line_2">
-            <div id="bottom_1">
-              <three></three>
-            </div>
-            <div id="bottom_2">
-              <four></four>
-            </div>
-            <div id="bottom_3">
-              <five></five>
-            </div>
-          </div>
-        </div>
-        <div id="middle-bottom">
-          <div id="middle-bottom-left">
-            <!-- 掘进机工作状态 -->
-            <mbl2></mbl2>
-          </div>
-          <div id="middle-bottom-right">
-            <div id="tem1">
-              <!-- 油缸温度 -->
-              <tempChart></tempChart>
-            </div>
-            <div id="tem2">
-              <!-- 油位 -->
-              <tempChart2></tempChart2>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section class="screen-right">
-        <div id="right-top">
-          <!-- 掘进机控制系统 -->
-          <rtop></rtop>
-        </div>
-        <div id="right-mid-one">
-          <!-- 时间 ************************************************-->
-          <!-- <current_time></current_time> -->
-        </div>
-        <div id="right-mid-two">
-          <!-- 远控模式 -->
-          <rtone></rtone>
-        </div>
-        <div id="right-bottom">
-          <!-- 日志 -->
-          <log></log>
-        </div>
-      </section>
+      <div class="screen-body">
+          <section class="screen-left">
+              <div id="left-top">
+                  <div id="left-top-left">
+                      <!-- 行走状态 -->
+                      <!-- <footState></footState> -->
+                      <ruler></ruler>
+                  </div>
+                  <div id="left-top-right">
+                      <!-- 割接轨迹 -->
+                      <hard></hard>
+                  </div>
+              </div>
+              <div id="left-mid">
+                     <!-- 压入式风机 -->
+                     <lmid></lmid>
+              </div>
+              <div id="left-bottom">
+                  <!-- 除尘风机 -->
+                  <lbottom></lbottom>
+              </div>
+          </section>
+          <section class="screen-middle">
+              <div id="middle-top">
+                <!-- 6个仪表盘 -->
+                <div id="line_1">
+                    <div id="top_1">
+                        <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>
+              </div>
+              <div id="middle-bottom">
+                  <div id="middle-bottom-left">
+                      <!-- 掘进机工作状态 -->
+                      <mbl2></mbl2>
+                  </div>
+                  <div id="middle-bottom-right">
+                      <div id="tem1">
+                        <!-- 油缸温度 -->
+                        <tempChart></tempChart>
+                      </div>
+                     <div id="tem2">
+                        <!-- 油位 -->
+                        <tempChart2></tempChart2>
+                      </div> 
+                  </div>
+              </div>
+          </section>
+          <section class="screen-right">
+              <div id="right-top">
+                  <!-- 掘进机控制系统 -->
+                  <rtop></rtop>
+              </div>
+              <div id="right-mid-one">
+                  <!-- 时间 ************************************************-->
+                  <!-- <current_time></current_time> -->
+              </div>
+              <div id="right-mid-two">
+                  <!-- 远控模式 -->
+                  <rtone></rtone>
+              </div>
+              <div id="right-bottom">
+                  <!-- 日志 -->
+                  <log></log>
+              </div>
+          </section>
+      </div>
     </div>
   </div>
 </template>
@@ -168,159 +176,160 @@ h1 {
   height: 100%;
 }
 .screen-body {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  margin-top: 10px;
-  background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
-  position: relative;
-}
-.screen-left {
-  height: 100%;
-  flex: 3;
-  display: flex;
-  flex-direction: column;
-}
-#left-top {
-  height: 170px;
-  display: flex;
-  position: relative;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-top-left {
-  flex: 3;
-  position: relative;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-top-right {
-  margin-top: -20px;
-  flex: 4;
-  position: relative;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-
-#left-mid {
-  height: 33%;
-  margin-top: 10px;
-  position: relative;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#left-bottom {
-  height: 33%;
-  margin-top: 10px;
-  position: relative;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-.screen-middle {
-  height: 100%;
-  width: 41.5%;
-  margin-left: 1.6%;
-  margin-right: 1.6%;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#middle-top {
-  height: 260px;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  display: flex;
-  flex-direction: column;
-}
-#line_1 {
-  flex: 1;
-  display: flex;
-}
-#top_1 {
-  flex: 1;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#top_2 {
-  flex: 1;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#top_3 {
-  flex: 1;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#line_2 {
-  flex: 1;
-  display: flex;
-}
-#bottom_1 {
-  flex: 1;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#bottom_2 {
-  flex: 1;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#bottom_3 {
-  flex: 1;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#middle-bottom {
-  height: 300px;
-  margin-top: 5px;
-  position: relative;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  display: flex;
-}
-#middle-bottom-left {
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  margin-right: 0.1875rem;
-  flex: 3;
-  position: relative;
-  /* // 添加边角 */
-}
-#middle-bottom-right {
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  margin-right: 0.1875rem;
-  width: 100%;
-  height: 500px;
-  flex: 2;
-  /* position: relative; */
-  display: flex;
-  /* // 添加边角 */
-}
-#tem1 {
-  margin-top: 40px;
-  flex: 1;
-  width: 50%;
-  height: 150px;
-  /* position: relative; */
-}
-#tem2 {
-  margin-top: 40px;
-  flex: 1;
-  width: 50%;
-  height: 150px;
-  /* position:absolute; */
-}
-.screen-right {
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid rgba(25, 186, 139, 0.17);
-}
-#right-top {
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  flex: 2;
-}
-#right-mid-one {
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  flex: 1;
-}
-#right-mid-two {
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  flex: 2;
-}
-#right-bottom {
-  border: 1px solid rgba(25, 186, 139, 0.17);
-  margin-bottom: 0.1875rem;
-  flex: 5;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    margin-top: 10px;
+}
+.screen-left{
+    height: 100%;
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+}
+#left-top{
+    height: 170px;
+    display: flex;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-top-left{
+    flex: 3;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-top-right{
+    margin-top: -20px;
+    flex: 4;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+        
+#left-mid{
+    height: 33%;
+    margin-top: 10px;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#left-bottom{
+    height: 33%;
+    margin-top: 10px;
+    position: relative;  
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+.screen-middle{
+    height: 100%;
+    width: 41.5%;
+    margin-left: 1.6%;
+    margin-right: 1.6%;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#middle-top{
+    height: 360px;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    display: flex;
+    flex-direction: column;
+}
+#line_1{    
+    flex: 1;
+    display: flex;
+}
+#top_1{     
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#top_2{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#top_3{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#line_2{    
+    flex: 1;
+    display: flex;
+}
+#bottom_1{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#bottom_2{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#bottom_3{
+    flex: 1;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#middle-bottom{
+    height: 300px;
+    margin-top: 5px;
+    position: relative;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    display: flex;
+}
+#middle-bottom-left{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    margin-right: 0.1875rem;
+    flex:3;
+    position: relative; 
+    /* // 添加边角 */
+}
+#middle-bottom-right{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    margin-right: 0.1875rem;
+    width: 100%;
+    height: 500px;
+    flex: 2;
+    /* position: relative; */
+    display: flex;
+    /* // 添加边角 */
+}
+#tem1{
+    margin-top: 40px;
+    flex: 1;
+    width: 50%;
+    height: 150px;
+    /* position: relative; */
+}
+#tem2{
+    margin-top: 40px;
+    flex: 1;
+    width: 50%;
+    height: 150px;
+    /* position:absolute; */
+}
+.screen-right{
+    flex: 2;
+    display: flex;
+    flex-direction: column ;
+    border: 1px solid rgba(25, 186, 139, 0.17);
+}
+#right-top{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex:2
+}
+#right-mid-one{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex: 1;
+}
+#right-mid-two{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex: 2;
+}
+#right-bottom{
+    border: 1px solid rgba(25, 186, 139, 0.17);
+    margin-bottom: 0.1875rem;
+    flex: 5;
+} 
+.span{
+    text-align:center
 }
 </style>