Merge branch 'master' of https://gitee.com/qinnamin/large_screen

src/components/belt_diagnosis/belt_benti/index.vue

@@ -0,0 +1,113 @@
+<template>
+<div>
+
+  <div class="title">皮带本体</div>
+    <ul class="flex-ul">
+      <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>
+  
+</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">
+.title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.flex-ul {
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 16px;
+    width: -webkit-fit-content;
+    flex: 0 1 100%;
+    text-align: center;
+    margin: 20px 20px 10px -10px;
+
+    //  line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+
+</style>

src/components/belt_diagnosis/belt_protect/index.vue

@@ -0,0 +1,159 @@
+  <template>
+  <div>
+    <div class="title">皮带保护</div>
+    <div class="contour">
+      <span class="info">
+        <div>{{ infoList[0].info_msg }}</div>
+        <div class="waring" v-if="infoList[0].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[1].info_msg }}</div>
+        <div class="waring" v-if="infoList[1].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[2].info_msg }}</div>
+        <div class="waring" v-if="infoList[2].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[3].info_msg }}</div>
+        <div class="waring" v-if="infoList[3].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[4].info_msg }}</div>
+        <div class="waring" v-if="infoList[4].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[5].info_msg }}</div>
+        <div class="waring" v-if="infoList[5].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[6].info_msg }}</div>
+        <div class="waring" v-if="infoList[6].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[7].info_msg }}</div>
+        <div class="waring" v-if="infoList[7].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[8].info_msg }}</div>
+        <div class="waring" v-if="infoList[8].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+      <span class="info">
+        <div>{{ infoList[9].info_msg }}</div>
+        <div class="waring" v-if="infoList[9].info == '0'"></div>
+        <div class="waring1" v-else></div>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "beltProtect",
+  data() {
+    return {
+      infoList: [
+        {
+          info: "0",
+          info_msg: "撕裂",
+        },
+        {
+          info: "0",
+          info_msg: "闭锁",
+        },
+        {
+          info: "0",
+          info_msg: "跑偏",
+        },
+        {
+          info: "0",
+          info_msg: "烟雾",
+        },
+        {
+          info: "0",
+          info_msg: "堆煤",
+        },
+        {
+          info: "0",
+          info_msg: "速度",
+        },
+        {
+          info: "1",
+          info_msg: "温度",
+        },
+        {
+          info: "0",
+          info_msg: "打滑",
+        },
+        {
+          info: "1",
+          info_msg: "纵撕",
+        },
+        {
+          info: "1",
+          info_msg: "断带",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style scoped lang="less">
+.title {
+  color: #fff;
+  font-size: 23px;
+  font-weight: bolder;
+  text-align: center;
+  margin: 10px;
+}
+.contour {
+  display: flex;
+  justify-items: flex-start;
+  align-items: center;
+  flex-flow: row wrap;
+  height: 100%;
+  widows: 100%;
+  span {
+    // float: left;
+    // margin: 35px;
+    margin-bottom: 0px;
+    color: #4adefe;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex: 0 0 20%;
+    flex-direction: column;
+    div {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.waring {
+  width: 40px;
+  height: 40px;
+  background-color: #009966;
+  border-radius: 50%;
+  float: left;
+}
+
+.waring1 {
+  width: 40px;
+  height: 40px;
+  background-color: #ff0000;
+  border-radius: 50%;
+  float: left;
+}
+</style>
+
+
+  

src/components/belt_diagnosis/bianpin/index.vue

@@ -0,0 +1,112 @@
+<template>
+<div>
+
+  <div class="title">变频器</div>
+    <ul class="flex-ul">
+      <li>功率<span>：{{data.power}}</span>KW</li>
+      <li>频率<span>: {{data.frequency}}</span>Hz</li>
+     
+    </ul>
+
+</div>
+  
+</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">
+.title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.flex-ul {
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 16px;
+    width: -webkit-fit-content;
+    flex: 0 1 100%;
+    text-align: center;
+    margin: 20px 10px 0 -10px;
+
+    //  line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+
+</style>

src/components/belt_diagnosis/dajie_equipment_status/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-container>
+    <el-header class="title">搭接设备状态</el-header>
+    <el-main>
+      <el-row>
+        <el-col :span="12">
+        <div class="title1">上级设备状态</div>
+        
+          <!-- <div class="title2">带式输送机</div> -->
+          <ul class="flex-ul">
+      <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>
+     
+          
+          <!-- <div class="title2">给煤机</div> -->
+     
+        </el-col>
+        <el-col :span="12"><div class="title1">下级设备状态</div>
+          <ul class="flex-ul1">
+      <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>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+
+<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">
+.title {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.title1 {
+  color: #fff;
+  font-size: 21px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+
+.flex-ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+  border: #4adefe;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 18px;
+    width: -webkit-fit-content;
+   
+    margin: 20px -10px 10px -20px;
+    // line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+  .flex-ul1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+  border: #4adefe;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 18px;
+    width: -webkit-fit-content;
+   
+    margin: 20px -10px 10px -10px;
+    // line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+</style>

src/components/belt_diagnosis/dianji1/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="title">驱动电机1</div>
+    <ul class="flex-ul">
+      <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>
+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">
+.title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+// .item {
+//   display: grid;
+//   grid-template-columns: repeat(3, 1fr);
+//   grid-template-rows: 1fr 1fr 1fr 1fr;
+// }
+// .item1 span:nth-of-type(1) {
+//   /* display: block; */
+//   text-align: left;
+//   color: #4adefe;
+//   font-size: 15px;
+// }
+
+// .item1 span:nth-of-type(2) {
+//   display: block;
+//   color: white;
+//   /* text-align: center; */
+//   font-size: 20px;
+// }
+.flex-ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 14px;
+    width: -webkit-fit-content;
+    flex: 0 1 33%;
+    margin: 10px 0 0 -10px;
+    // line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+/* ul {
+  margin-top: 10px;
+}
+li {
+  width: 100%;
+  height: 100%;
+  
+  display: flex;
+  font-size: 1.25rem;
+  position: relative;
+  line-height: 50px;
+  padding-left: 40px;
+} */
+.spanitem {
+  /* display: inline-block; */
+  /* width: 10px; */
+  color: #f3f5f7;
+  padding-left: 100px;
+}
+</style>

src/components/belt_diagnosis/dianji2/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <div class="title">驱动电机2</div>
+    <ul class="flex-ul">
+      <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>
+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">
+.title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+// .item {
+//   display: grid;
+//   grid-template-columns: repeat(3, 1fr);
+//   grid-template-rows: 1fr 1fr 1fr 1fr;
+// }
+// .item1 span:nth-of-type(1) {
+//   /* display: block; */
+//   text-align: left;
+//   color: #4adefe;
+//   font-size: 15px;
+// }
+
+// .item1 span:nth-of-type(2) {
+//   display: block;
+//   color: white;
+//   /* text-align: center; */
+//   font-size: 20px;
+// }
+.flex-ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 14px;
+    width: -webkit-fit-content;
+    flex: 0 1 33%;
+    margin: 10px 0 0 -10px;
+    // line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+/* ul {
+  margin-top: 10px;
+}
+li {
+  width: 100%;
+  height: 100%;
+  
+  display: flex;
+  font-size: 1.25rem;
+  position: relative;
+  line-height: 50px;
+  padding-left: 40px;
+} */
+.spanitem {
+  /* display: inline-block; */
+  /* width: 10px; */
+  color: #f3f5f7;
+  padding-left: 100px;
+}
+</style>

src/components/belt_diagnosis/equipment_status/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="title">设备状态</div>
+    <div class="describe">
+      <div class="item item-1">
+        <span>运行状态</span>
+        <span>{{data.run_status}}</span>
+        
+      </div>
+      <div class="item item-1">
+        <span>总功率</span>
+        <span>{{data.total_power}}W</span>
+     
+      </div>
+      <div class="item item-1">
+          <span>皮带速度</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;
+  font-size: 23px;
+  font-weight: bolder;
+   text-align: center;
+  margin-top: 10px;
+}
+.describe {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr 3fr ;
+  /* 垂直方向居中子元素 */
+  align-items: center;
+  /* 水平方向居中子元素 */
+  justify-items: center;
+  grid-gap: 10px;
+  height: 140px;
+  /* border: 1px solid #4adefe; */
+}
+
+.item-1 {
+  /* margin: 23px; */
+  grid-row: span 2 / auto;
+    /* border: 1px solid #4adefe; */
+}
+.item span:nth-of-type(1) {
+  display: block;
+  text-align: center;
+  color: #4adefe;
+  font-size: 20px;
+}
+.item span:nth-of-type(2) {
+  display: block;
+  color: white;
+  text-align: center;
+  font-size: 20px;
+}
+</style>

src/components/belt_diagnosis/failure_hand/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-container>
+    <el-header class="title">故障处理</el-header>
+    <el-main>
+      <el-row>
+        <el-col :span="8">
+        <div class="title1">故障类型</div>
+        
+          <div class="item">撕裂</div>
+           <div class="item">打滑</div>
+     
+     
+          
+          <!-- <div class="title2">给煤机</div> -->
+     
+        </el-col>
+        <el-col :span="8"><div class="title1">发生时间</div>
+          <div class="item">2022.7.30</div>
+         <div class="item">2022.8.30</div>
+        </el-col>
+
+          <el-col :span="8"><div class="title1">解决方式</div>
+             <div class="item">更换皮带</div>
+         <div class="item">增加摩擦力</div>
+      
+        
+        </el-col>
+
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+
+<script>
+</script>
+
+<style scoped lang="less">
+.title {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 5px;
+}
+.title1 {
+  color:#4adefe;
+  font-size: 21px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: -26px;
+}
+
+.flex-ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+  border: #4adefe;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 18px;
+    width: -webkit-fit-content;
+   
+    margin: 20px -10px 10px -20px;
+    // line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+.item {
+  color:#ecb10e;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 5px;
+ 
+}
+
+</style>

src/components/belt_diagnosis/failure_pre/index.vue

@@ -0,0 +1,155 @@
+<template>
+<div>
+
+  <div class="title">故障预测</div>
+ 
+  <div class="title1">以下是各个故障发生的可能性
+   
+     
+  </div>
+   <div class="contour">
+   <span> <PieChart :value="80" title="跑偏" size="180px" ></PieChart></span>
+   <span> <PieChart :value="80" title="打滑" size="180px" ></PieChart></span>
+    <span> <PieChart :value="80" title="超载" size="180px" ></PieChart></span>
+   <span> <PieChart :value="80" title="堆煤" size="180px" ></PieChart></span>
+
+   </div>
+
+    <!-- <ul class="flex-ul">
+      <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> -->
+
+</div>
+  
+</template>
+
+<script>
+import { mapState } from "vuex";
+import pieChart from "@/common/pieChart";
+import PieChart from "../../../common/pieChart.vue";
+export default {
+    pieChart,
+    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"]),
+    },
+    components: { PieChart }
+};
+</script>
+
+<style scoped lang="less">
+.title {
+  color: #fff;
+  font-size: 25px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.title1 {
+  color:  #4adefe;
+  font-size: 21px;
+  font-weight: bolder;
+  text-align: left;
+  margin-top: 30px;
+  margin-left: 20px;
+}
+.contour {
+  display: flex;
+  justify-items: flex-start;
+  align-items: center;
+  flex-flow: row wrap;
+  height: 100%;
+  widows: 100%;
+  span {
+    // float: left;
+    // margin: 35px;
+    margin-bottom: -30px;
+    color: #4adefe;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex: 0 0 50%;
+    flex-direction: column;
+    // div {
+    //   margin-bottom: 10px;
+    // }
+  }
+}
+.flex-ul {
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 26px;
+    width: -webkit-fit-content;
+    flex: 0 1 50%;
+    margin: 80px 10px 0 -10px;
+
+    //  line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+
+</style>

src/components/belt_diagnosis/guanlian_equipment_status/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <el-container>
+    <el-header class="title">关联系统状态</el-header>
+    <el-main>
+      <el-row>
+        <el-col :span="8">
+          <div class="title1">对应采面实时产量</div>
+
+          <!-- <div class="title2">带式输送机</div> -->
+          <ul class="flex-ul">
+            <li>皮带当前运量<span>:{{data.belt_carry_cap}}</span>吨</li>
+          </ul>
+
+          <!-- <div class="title2">给煤机</div> -->
+        </el-col>
+        <el-col :span="8"
+          >
+          <div class="title1">供电回路状态</div>
+          <ul class="flex-ul">
+            <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>:  {{data.meiwei}}</span>m</li>
+          </ul>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+
+<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">
+.title {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.title1 {
+  color: #fff;
+  font-size: 21px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: -26px;
+}
+
+.flex-ul {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+  border: #4adefe;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 19px;
+    width: -webkit-fit-content;
+    flex: 0 1 100%;
+    margin: 5px 0px -10px -20px;
+    // line-height: 50px;
+    color: #4adefe;
+  }
+  span {
+    color: #fff;
+  }
+}
+</style>

src/components/belt_diagnosis/guntong1/index.vue

@@ -0,0 +1,51 @@
+<template>
+<div>
+
+  <div class="title">滚筒1</div>
+    <ul class="flex-ul">
+      <li>温度<span>：15432</span>℃</li>
+      <li>张力<span>:153424</span>N/m</li>
+      <li>振动<span>:15424</span> mm</li>
+    </ul>
+
+</div>
+  
+</template>
+
+<script>
+export default {
+   
+}
+</script>
+
+<style scoped lang="less">
+.title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.flex-ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 16px;
+    width: -webkit-fit-content;
+    flex: 0 1 100%;
+    margin: 20px 10px 0 -10px;
+    //  line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+
+</style>

src/components/belt_diagnosis/guntong2/index.vue

@@ -0,0 +1,52 @@
+<template>
+<div>
+
+  <div class="title">滚筒2</div>
+    <ul class="flex-ul">
+      <li>温度<span>：15432</span>℃</li>
+      <li>张力<span>:153424</span>N/m</li>
+      <li>振动<span>:15424</span> mm</li>
+    </ul>
+
+</div>
+  
+</template>
+
+<script>
+export default {
+   
+}
+</script>
+
+<style scoped lang="less">
+.title {
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  text-align: center;
+  margin-top: 10px;
+}
+.flex-ul {
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  width: 100%;
+
+  flex-flow: row wrap;
+  li {
+    // font-size: 17px;
+    font-size: 16px;
+    width: -webkit-fit-content;
+    flex: 0 1 100%;
+    margin: 20px 10px 0 -10px;
+    //  line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+
+</style>

src/components/belt_diagnosis/transfer_status/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="title">带式输送机总体状态评估</div>
+    <div class="item">
+      <div class="item1" >
+        <div >总体评估</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>
+
+      </div>
+      <div>
+        <div class="item1">评估内容</div>  
+        <div class="item2">目前无异常</div>  
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { random } from 'lodash'
+import pieChart from "@/common/pieChart";
+
+export default{
+  comments:{
+    pieChart,
+  },
+  data(){
+
+        return{
+           infoList: [
+        {
+          info: "0",
+          info_msg: "健康",
+        },
+        {
+          info: "1",
+          info_msg: "警告",
+        },
+        {
+          info: "2",
+          info_msg: "危险",
+        },
+      ],  
+    number:0
+        }
+        
+    }
+  
+}
+
+</script>
+<style scoped>
+.title {
+  color: #fff;
+  font-size: 23px;
+  font-weight: bolder;
+   text-align: center;
+  margin-top: 10px;
+}
+.item {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+.item1{
+  display: block;
+  text-align: center;
+  color: #4adefe;
+  font-size: 21px;
+}
+.item2{
+  margin-top: 10px;
+  display: block;
+  text-align: center;
+  color: #eaecef;
+  font-size: 19px;
+}
+.safety {
+  width: 50px;
+  height: 50px;
+  background-color: #009966;
+  border-radius: 50%;
+  margin-left:40%;
+  
+}
+.waring {
+  width: 50px;
+  height: 50px;
+  background-color: hsl(55, 80%, 48%);
+  border-radius: 50%;
+  margin-left:40%;
+}
+.danger{
+  width: 50px;
+  height: 50px;
+  background-color: hsl(0, 93%, 47%);
+  border-radius: 50%;
+   margin-left:40%;
+}
+</style>

src/router/index.js

@@ -570,10 +570,10 @@ const router = new Router({
         },
         {
           path: "/hazard_warning",
-          name: "危险源预警",
+          name: "皮带故障诊断",
           id: 202,
           component: () =>
-            import("../views/app_hazard_warning/hazardWarning.vue"),
+            import("../views/app_belt_diagnosis/newMain.vue"),
           hidden: false,
         },
         {

src/views/app_belt_diagnosis/newMain.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="grid">
+    <div class="equipment_status item">
+      <equipment_status></equipment_status>
+    </div>
+    <div class="belt_protect item">
+      <belt_protect> </belt_protect>
+    </div>
+    <div class="transfer_status item">
+      <transfer_status></transfer_status>
+    </div>
+    <div class="four">
+      <div class="item">
+        <dianji1></dianji1>
+      </div>
+      <div class="item">
+        <guntong1></guntong1>
+      </div>
+      <div class="item"><dianji2></dianji2></div>
+      <div class="item">
+        <guntong2></guntong2>
+      </div>
+    </div>
+    <div class="item">
+      <failure_pre></failure_pre>
+    </div>
+    <div class="item">
+      <dajie_equipment_status></dajie_equipment_status>
+    </div>
+    <div class="two">
+      <div class="item">
+        <belt_benti></belt_benti>
+      </div>
+      <div class="item">
+        <bianpin></bianpin>
+      </div>
+    </div>
+    <div class="item">
+      <failure_hand></failure_hand>
+    </div>
+
+    <div class="item">
+      <guanlian_equipment_status></guanlian_equipment_status>
+    </div>
+  </div>
+</template>
+
+<script>
+import equipment_status from "@/components/belt_diagnosis/equipment_status";
+import belt_protect from "@/components/belt_diagnosis/belt_protect";
+import transfer_status from "@/components/belt_diagnosis/transfer_status";
+import dianji1 from "@/components/belt_diagnosis/dianji1";
+import dianji2 from "@/components/belt_diagnosis/dianji2";
+import guntong1 from "@/components/belt_diagnosis/guntong1";
+import guntong2 from "@/components/belt_diagnosis/guntong2";
+import belt_benti from "@/components/belt_diagnosis/belt_benti";
+import bianpin from "@/components/belt_diagnosis/bianpin";
+import failure_pre from "@/components/belt_diagnosis/failure_pre";
+import dajie_equipment_status from "@/components/belt_diagnosis/dajie_equipment_status";
+import failure_hand from "@/components/belt_diagnosis/failure_hand";
+import guanlian_equipment_status from "@/components/belt_diagnosis/guanlian_equipment_status";
+import m3u8 from "@/common/m3u8";
+export default {
+  name: "newMain",
+  components: {
+    equipment_status,
+    m3u8,
+    belt_protect,
+    transfer_status,
+    dianji1,
+    dianji2,
+    guntong1,
+    guntong2,
+    belt_benti,
+    bianpin,
+    failure_pre,
+    dajie_equipment_status,
+    failure_hand,
+    guanlian_equipment_status,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.grid {
+  background: #bdc3c7; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to top,
+    #2c3e50,
+    #bdc3c7
+  ); 
+  background: linear-gradient(to top, #2c3e50, #bdc3c7);
+  width: 100%;
+  height: 890px;
+  display: grid;
+  grid-template-rows: 1fr 2fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 10px;
+  .four {
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: 3fr 1.5fr;
+    grid-gap: 10px;
+    // div {
+    //   background: blueviolet;
+    //   background-clip: content-box;
+    //   padding: 10px;
+    //   border: solid 1px #ddd;
+    // }
+  }
+  .two {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+  }
+  // div{
+  //   background: blueviolet;
+  //   background-clip: content-box;
+  //   padding: 10px;
+  //   border: solid 1px #ddd;
+  // }
+  .item {
+    position: relative;
+    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>