皮带界面初步完成

src/components/belt_diagnosis/belt_benti/index.vue

@@ -3,9 +3,9 @@
 
   <div class="title">皮带本体</div>
     <ul class="flex-ul">
-      <li>速度<span>：15432</span>m/s</li>
-      <li>速度设定值<span>:15424</span> m/s</li>
-       <li>张力<span>:153424</span>N/m</li>
+      <li>速度<span>:{{data.speed}}</span>m/s</li>
+      <li>速度设定值<span>:{{data.speed_set}}</span> m/s</li>
+       <li>张力<span>:{{data.strain}}</span>N/m</li>
     </ul>
 
 </div>
@@ -13,9 +13,68 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-   
-}
+  data() {
+    return {
+      data: {
+        speed: "10",
+        speed_set: "20",
+        strain: "80",
+      
+      },
+    };
+  },
+//注意 这个id还是待定
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+       changeState(data) {
+        this.data=data[0];
+      console.log("数据展示为：", this.data);
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">
@@ -40,7 +99,8 @@ export default {
     font-size: 16px;
     width: -webkit-fit-content;
     flex: 0 1 100%;
-    margin: 20px -50px 0 -10px;
+    text-align: center;
+    margin: 20px 20px 10px -10px;
 
     //  line-height: 50px;
     color: #4adefe;

src/components/belt_diagnosis/bianpin/index.vue

@@ -3,8 +3,8 @@
 
   <div class="title">变频器</div>
     <ul class="flex-ul">
-      <li>功率<span>：15432</span>KW</li>
-      <li>频率<span>:15424</span>Hz</li>
+      <li>功率<span>：{{data.power}}</span>KW</li>
+      <li>频率<span>: {{data.frequency}}</span>Hz</li>
      
     </ul>
 
@@ -13,9 +13,67 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-   
-}
+  data() {
+    return {
+      data: {
+        power: "1230",
+        frequency: "280",
+      
+      },
+    };
+  },
+//注意 这个id还是待定
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+      changeState(data) {
+        this.data=data[0];
+      console.log("数据展示为：", this.data);
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">
@@ -40,7 +98,8 @@ export default {
     font-size: 16px;
     width: -webkit-fit-content;
     flex: 0 1 100%;
-    margin: 20px -50px 0 -10px;
+    text-align: center;
+    margin: 20px 10px 0 -10px;
 
     //  line-height: 50px;
     color: #4adefe;

src/components/belt_diagnosis/dajie_equipment_status/index.vue

@@ -8,11 +8,10 @@
         
           <!-- <div class="title2">带式输送机</div> -->
           <ul class="flex-ul">
-      <li>带式输送机的运行状态<span>:正常</span> </li>
-      <li>带式输送机的总功率<span>:1523</span>KW</li>
-      <li>带式输送机的运行速度<span>:15</span>m/s</li>
-      <li>带式输送机的运行速度<span>:15</span>m/s</li>
-      <li>给煤机漏煤口的开闭状态<span>：开</span></li>
+      <li>带式输送机的运行状态<span>:{{data1.run_status}}</span> </li>
+      <li>带式输送机的总功率<span>:{{data1.run_power}}</span>KW</li>
+      <li>带式输送机的运行速度<span>:{{data1.run_speed}}</span>m/s</li>
+      <li>给煤机漏煤口的开闭状态<span>：{{data1.meiokou_open}}</span></li>
     </ul>
      
           
@@ -21,11 +20,10 @@
         </el-col>
         <el-col :span="12"><div class="title1">下级设备状态</div>
           <ul class="flex-ul1">
-      <li>带式输送机的运行状态<span>:正常</span> </li>
-      <li>带式输送机的总功率<span>:1523</span>KW</li>
-      <li>带式输送机的运行速度<span>:15</span>m/s</li>
-      <li>带式输送机的运行速度<span>:15</span>m/s</li>
-      <li>煤仓的煤位<span>：8</span>m</li>
+      <li>带式输送机的运行状态<span>:{{data2.run_status}}</span> </li>
+      <li>带式输送机的总功率<span>:{{data2.run_power}}</span>KW</li>
+      <li>带式输送机的运行速度<span>:{{data2.run_speed}}</span>m/s</li> 
+      <li>煤仓的煤位<span>：{{data2.meicang_meiwei}}</span>m</li>
     </ul>
         
         </el-col>
@@ -36,6 +34,83 @@
 
 
 <script>
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      data1: {
+      run_status:"正常",
+      run_power:"1943",
+      run_speed:"10",
+      meiokou_open:"开",
+      },
+      data2:{
+      run_status:"正常",
+      run_power:"1943",
+      run_speed:"10",
+      meicang_meiwei:"8",
+      },
+    };
+  },
+// 这里的id为测点id  websocket1为第一个测点  websocket2为第二个测点
+  mounted() {
+    let websocket1=new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket(websocket1,1);
+
+     let websocket2=new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket(websocket2,2);
+    
+  },
+  methods: {
+    initWebSocket(websocket,type) {
+      // 连接错误
+      websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + websocket.readyState
+        );
+      };
+      // 连接成功
+     websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+       websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+     changeState(data) {
+      if(type==1){
+         this.data1=data[0];
+      }else if(type==2){
+        this.data2=data[0];
+      }
+      console.log("数据展示为：", this.data1+"  "+this.data2);
+    },
+    close() {
+       websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">

src/components/belt_diagnosis/dianji1/index.vue

@@ -2,24 +2,92 @@
   <div>
     <div class="title">驱动电机1</div>
     <ul class="flex-ul">
-      <li>电机功率<span>:15654</span> KW</li>
-      <li>电压<span>:15</span> V</li>
-      <li>转速<span>:15</span> r/min</li>
-      <li>扭矩<span>:15</span> Nm</li>
-      <li>前轴温<span>:15</span> ℃</li>
-      <li>后轴温<span>:15</span> ℃</li>
-      <li>A相绕组温度<span>1500</span>℃</li>
-      <li>B相绕组温度<span>150897</span>℃</li>
-      <li>C相绕组温度<span>15</span>℃</li>
-      <li>油压<span>:15</span> Pa</li>
-      <li>振动<span>:15</span> mm</li>
+      <li>电机功率<span>:{{data.dianji_power}}</span> KW</li>
+      <li>电压<span>:{{data.voltage}}</span> V</li>
+      <li>转速<span>:{{data.rotate_speed}}</span> r/min</li>
+      <li>扭矩<span>:{{data.reverse}}</span> Nm</li>
+      <li>前轴温<span>:{{data.front_axle_temp}}</span> ℃</li>
+      <li>后轴温<span>:{{data.rear_axle_temp}}</span> ℃</li>
+      <li>A相绕组温度<span>:{{data.a_phase_temp}}</span>℃</li>
+      <li>B相绕组温度<span>:{{data.b_phase_temp}}</span>℃</li>
+      <li>C相绕组温度<span>:{{data.c_phase_temp}}</span>℃</li>
+      <li>油压<span>:{{data.oil_pressure}}</span> Pa</li>
+      <li>振动<span>:{{data.vibration}}</span> mm</li>
       
     </ul>
   </div>
 </template>
 
 <script>
-export default {};
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      data: {
+        dianji_power: "435",
+        voltage: "220",
+        rotate_speed: "453",
+        reverse: "34",
+        front_axle_temp: "45",
+        rear_axle_temp: "50",
+        a_phase_temp:"1000",
+        b_phase_temp:"1200",
+        c_phase_temp:"1120",
+        oil_pressure:"20",
+        vibration:"89",
+      },
+    };
+  },
+// 这里的id为测点id
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+       changeState(data) {
+        this.data=data[0];
+      console.log("数据展示为：", this.data);
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">

src/components/belt_diagnosis/dianji2/index.vue

@@ -2,24 +2,88 @@
   <div>
     <div class="title">驱动电机2</div>
     <ul class="flex-ul">
-      <li>电机功率<span>:15654</span> KW</li>
-      <li>电压<span>:15</span> V</li>
-      <li>转速<span>:15</span> r/min</li>
-      <li>扭矩<span>:15</span> Nm</li>
-      <li>前轴温<span>:15</span> ℃</li>
-      <li>后轴温<span>:15</span> ℃</li>
-      <li>A相绕组温度<span>1500</span>℃</li>
-      <li>B相绕组温度<span>150897</span>℃</li>
-      <li>C相绕组温度<span>15</span>℃</li>
-      <li>油压<span>:15</span> Pa</li>
-      <li>振动<span>:15</span> mm</li>
+      <li>电机功率<span>:{{data.dianji_power}}</span> KW</li>
+      <li>电压<span>:{{data.voltage}}</span> V</li>
+      <li>转速<span>:{{data.rotate_speed}}</span> r/min</li>
+      <li>扭矩<span>:{{data.reverse}}</span> Nm</li>
+      <li>前轴温<span>:{{data.front_axle_temp}}</span> ℃</li>
+      <li>后轴温<span>:{{data.rear_axle_temp}}</span> ℃</li>
+      <li>A相绕组温度<span>:{{data.a_phase_temp}}</span>℃</li>
+      <li>B相绕组温度<span>:{{data.b_phase_temp}}</span>℃</li>
+      <li>C相绕组温度<span>:{{data.c_phase_temp}}</span>℃</li>
+      <li>油压<span>:{{data.oil_pressure}}</span> Pa</li>
+      <li>振动<span>:{{data.vibration}}</span> mm</li>
       
     </ul>
   </div>
 </template>
 
 <script>
-export default {};
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      data: {
+        dianji_power: "435",
+        voltage: "220",
+        rotate_speed: "453",
+        reverse: "34",
+        front_axle_temp: "45",
+        rear_axle_temp: "50",
+        a_phase_temp:"1000",
+        b_phase_temp:"1200",
+        c_phase_temp:"1120",
+        oil_pressure:"20",
+        vibration:"89",
+      },
+    };
+  },
+// 这里的id为测点id
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">

src/components/belt_diagnosis/equipment_status/index.vue

@@ -4,23 +4,87 @@
     <div class="describe">
       <div class="item item-1">
         <span>运行状态</span>
-        <span>正常运行</span>
+        <span>{{data.run_status}}</span>
         
       </div>
       <div class="item item-1">
         <span>总功率</span>
-        <span>2000W</span>
-       
+        <span>{{data.total_power}}W</span>
+     
       </div>
       <div class="item item-1">
           <span>皮带速度</span>
-        <span>20m/s</span>
+        <span>{{data.belt_speed}}m/s</span>
       
       </div>
      
     </div>
   </div>
 </template>
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      data: {
+        run_status: "正常运行",
+        total_power: "2000",
+        belt_speed: "20",
+      
+      },
+    };
+  },
+//注意 这个id还是待定
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+      changeState(data) {
+        this.data=data[0];
+      console.log("数据展示为：", this.data);
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
+</script>
 <style scoped>
 .title {
   color: #fff;
@@ -45,6 +109,7 @@
 .item-1 {
   /* margin: 23px; */
   grid-row: span 2 / auto;
+    /* border: 1px solid #4adefe; */
 }
 .item span:nth-of-type(1) {
   display: block;

src/components/belt_diagnosis/failure_pre/index.vue

@@ -4,10 +4,10 @@
   <div class="title">故障预测</div>
   <div class="title1">以下是各个故障发生的可能性</div>
     <ul class="flex-ul">
-      <li>跑偏<span>：15432</span>%</li>
-      <li>打滑<span>:15424</span>%</li>
-      <li>超载<span>：15432</span>%</li>
-      <li>堆煤<span>:15424</span>%</li>
+      <li>跑偏<span>:{{data.paopian}}</span>%</li>
+      <li>打滑<span>:{{data.dahua}}</span>%</li>
+      <li>超载<span>：{{data.chaozai}}</span>%</li>
+      <li>堆煤<span>:{{data.duimei}}</span>%</li>
      
     </ul>
 
@@ -16,9 +16,68 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
-   
-}
+  data() {
+    return {
+      data: {
+        paopian:"20",
+        dahua:"80",
+        chaozai:"10",
+        duimei:"15",
+      },
+    };
+  },
+// 这里的id为测点id
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+       changeState(data) {
+        this.data=data[0];
+      console.log("数据展示为：", this.data);
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">
@@ -48,7 +107,7 @@ export default {
   flex-flow: row wrap;
   li {
     // font-size: 17px;
-    font-size: 25px;
+    font-size: 26px;
     width: -webkit-fit-content;
     flex: 0 1 50%;
     margin: 80px 10px 0 -10px;

src/components/belt_diagnosis/guanlian_equipment_status/index.vue

@@ -8,7 +8,7 @@
 
           <!-- <div class="title2">带式输送机</div> -->
           <ul class="flex-ul">
-            <li>皮带当前运量<span>: 5</span>吨</li>
+            <li>皮带当前运量<span>:{{data.belt_carry_cap}}</span>吨</li>
           </ul>
 
           <!-- <div class="title2">给煤机</div> -->
@@ -17,15 +17,15 @@
           >
           <div class="title1">供电回路状态</div>
           <ul class="flex-ul">
-            <li>合闸状态<span>:开</span></li>
-            <li>电压<span>:1523</span>V</li>
-            <li>电流<span>:15</span>A</li>
+            <li>合闸状态<span>:  {{data.gate_state}}</span></li>
+            <li>电压<span>:  {{data.voltage}}</span>V</li>
+            <li>电流<span>:  {{data.electric}}</span>A</li>
           </ul>
         </el-col>
         <el-col :span="8"
           ><div class="title1">下级煤仓</div>
           <ul class="flex-ul">
-            <li>煤位<span>:5</span>m</li>
+            <li>煤位<span>:  {{data.meiwei}}</span>m</li>
           </ul>
         </el-col>
       </el-row>
@@ -35,6 +35,70 @@
 
 
 <script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      data: {
+        belt_carry_cap: "1230",
+        gate_state: "开",
+        voltage:"220",
+        electric:"20",
+        meiwei:"10",
+      
+      },
+    };
+  },
+//注意 这个id还是待定
+  mounted() {
+    this.websocket = new WebSocket(`ws://${this.websocketIP}/hbase/ws/belt/id`);
+    this.initWebSocket();
+  },
+  methods: {
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        if (JSON.parse(event.data).length) {
+          this.changeState(JSON.parse(event.data));
+        }
+      };
+      // 连接关闭的回调
+      this.websocket.onclose = () => {
+        console.log(
+          "WebSocket连接关闭    状态码：" + this.websocket.readyState
+        );
+      };
+      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
+      this.$once("hook:beforeDestroy", () => {
+        this.websocket.close();
+        console.log("关闭websocket连接");
+      });
+    },
+      changeState(data) {
+        this.data=data[0];
+      console.log("数据展示为：", this.data);
+    },
+    close() {
+      this.websocket.close();
+      console.log("关闭websocket连接");
+    },
+  },
+  computed: {
+    ...mapState(["websocketIP"]),
+  },
+};
 </script>
 
 <style scoped lang="less">

src/components/belt_diagnosis/transfer_status/index.vue

@@ -4,7 +4,10 @@
     <div class="item">
       <div class="item1" >
         <div >总体评估</div>
-       <div >{{ infoList[number].info_msg }}</div>         
+  
+       <div >{{ infoList[number].info_msg }}</div>
+
+                
         <div class="safety " v-if="infoList[number].info == '0'"></div>
         <div class="waring" v-if="infoList[number].info ==  '1'"></div>
         <div class="danger" v-if="infoList[number].info=='2'"></div>
@@ -19,8 +22,12 @@
 </template>
 <script>
 import { random } from 'lodash'
+import pieChart from "@/common/pieChart";
 
 export default{
+  comments:{
+    pieChart,
+  },
   data(){
 
         return{

src/views/app_belt_diagnosis/newMain.vue

@@ -36,7 +36,6 @@
       </div>
     </div>
     <div class="item">
-
       <failure_hand></failure_hand>
     </div>
 
@@ -89,7 +88,7 @@ export default {
     to top,
     #2c3e50,
     #bdc3c7
-  ); /* Chrome 10-25, Safari 5.1-6 */
+  ); 
   background: linear-gradient(to top, #2c3e50, #bdc3c7);
   width: 100%;
   height: 890px;
@@ -125,6 +124,16 @@ export default {
     background-color: #303030;
     border-radius: 20px;
     padding: 0px;
+    background-image: 
+      url(../../assets/img/tunneling/dataBg.png), 
+      url(../../assets/img/tunneling/dataBg.png), 
+      url(../../assets/img/tunneling/dataBg.png), 
+      url(../../assets/img/tunneling/dataBg.png),
+      url(../../assets/img/tunneling/dataBg.png),  
+      url(../../assets/img/tunneling/dataBg.png);
+    background-repeat: no-repeat;
+    background-size: 109% 100%;
+    background-clip: content-box;
   }
 }
 </style>