初步完成皮带故障诊断界面

src/components/belt_diagnosis/belt_benti/index.vue

@@ -0,0 +1,53 @@
+<template>
+<div>
+
+  <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>
+    </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 -50px 0 -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,53 @@
+<template>
+<div>
+
+  <div class="title">变频器</div>
+    <ul class="flex-ul">
+      <li>功率<span>：15432</span>KW</li>
+      <li>频率<span>:15424</span>Hz</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 -50px 0 -10px;
+
+    //  line-height: 50px;
+    color: #4adefe;
+  }
+  span{
+    color: #fff;
+  }
+}
+
+</style>

src/components/belt_diagnosis/dajie_equipment_status/index.vue

@@ -0,0 +1,101 @@
+<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>:正常</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>
+    </ul>
+     
+          
+          <!-- <div class="title2">给煤机</div> -->
+     
+        </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>
+    </ul>
+        
+        </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: 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,91 @@
+<template>
+  <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>
+      
+    </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;
+}
+// .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,91 @@
+<template>
+  <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>
+      
+    </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;
+}
+// .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,61 @@
+<template>
+  <div>
+    <div class="title">设备状态</div>
+    <div class="describe">
+      <div class="item item-1">
+        <span>运行状态</span>
+        <span>正常运行</span>
+        
+      </div>
+      <div class="item item-1">
+        <span>总功率</span>
+        <span>2000W</span>
+       
+      </div>
+      <div class="item item-1">
+          <span>皮带速度</span>
+        <span>20m/s</span>
+      
+      </div>
+     
+    </div>
+  </div>
+</template>
+<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;
+}
+.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,64 @@
+<template>
+<div>
+
+  <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>
+     
+    </ul>
+
+</div>
+  
+</template>
+
+<script>
+export default {
+   
+}
+</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;
+}
+.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: 25px;
+    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,78 @@
+<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>: 5</span>吨</li>
+          </ul>
+
+          <!-- <div class="title2">给煤机</div> -->
+        </el-col>
+        <el-col :span="8"
+          >
+          <div class="title1">供电回路状态</div>
+          <ul class="flex-ul">
+            <li>合闸状态<span>:开</span></li>
+            <li>电压<span>:1523</span>V</li>
+            <li>电流<span>:15</span>A</li>
+          </ul>
+        </el-col>
+        <el-col :span="8"
+          ><div class="title1">下级煤仓</div>
+          <ul class="flex-ul">
+            <li>煤位<span>:5</span>m</li>
+          </ul>
+        </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: 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,96 @@
+<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'
+
+export default{
+  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,130 @@
+<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
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  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;
+  }
+}
+</style>