修改了生产流程整体监控

src/components/process_monitoring/Main.vue

@@ -10,6 +10,7 @@
       <div class="warning_container warning2">
         <WarningInfo :ref="1" :id="1"></WarningInfo>
       </div>
+
       <div class="warning_container warning3">
         <WarningInfo :ref="2" :id="2"></WarningInfo>
       </div>
@@ -31,28 +32,24 @@
       <div class="warning_container warning9">
         <WarningInfo :ref="8" :id="8"></WarningInfo>
       </div>
-      <div class="warning_container warning10">
+      <!-- <div class="warning_container warning10">
         <WarningInfo :ref="9" :id="9"></WarningInfo>
-      </div>
+      </div>  -->
     </div>
     <div class="pidai_box">
-      <div v-for="(item ,index) in 10" :key="index" :class="`pidai_container pidai${index+1}`"><Pidai :isStart="isStart"></Pidai></div>
-      <!-- <div class="pidai_container pidai1"><Pidai></Pidai></div>
-      <div class="pidai_container pidai2"><Pidai></Pidai></div>
-      <div class="pidai_container pidai3"><Pidai></Pidai></div>
-      <div class="pidai_container pidai4"><Pidai></Pidai></div>
-      <div class="pidai_container pidai5"><Pidai></Pidai></div>
-      <div class="pidai_container pidai6"><Pidai></Pidai></div>
-      <div class="pidai_container pidai7"><Pidai></Pidai></div>
-      <div class="pidai_container pidai8"><Pidai></Pidai></div>
-      <div class="pidai_container pidai9"><Pidai></Pidai></div>
-      <div class="pidai_container pidai10"><Pidai></Pidai></div> -->
-    </div>
-    <div class="shexiangtou_box">
-      <div class="shexiangtou_container shexiangtou1"></div>
-      <!-- <div class="shexiangtou_container shexiangtou2"></div> -->
-      <div class="shexiangtou_container shexiangtou3"></div>
+      <div
+        v-for="(item, index) in 9"
+        :key="index"
+        :class="`pidai_container pidai${index + 1}`"
+      >
+        <Pidai :isStart="isStart"></Pidai>
+      </div>
     </div>
+    <!-- <div class="shexiangtou_box">
+      <div class="shexiangtou_container shexiangtou1"></div> -->
+    <!-- <div class="shexiangtou_container shexiangtou2"></div> -->
+    <!-- <div class="shexiangtou_container shexiangtou3"></div>
+    </div> -->
     <div class="caimeiji1">
       <CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi>
     </div>
@@ -70,17 +67,47 @@
         <li>9+10煤仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
       </ul>
     </div>
-    <div class="bottom_right">
-      <div class="bottom_info">算仓料位</div>
-      <ul class="bottom_msg">
-        <li>末煤算仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
-        <li>末煤算仓料位&nbsp;&nbsp;&nbsp;XXXX</li>
-      </ul>
-    </div>
+
     <div class="buttons">
       <button class="btn1" @click="start">模拟皮带启动</button>
       <button class="btn2" @click="end">模拟皮带停止</button>
     </div>
+
+    <div class="xcspwt-box">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp; 2</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; 1300</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span>&nbsp;&nbsp;&nbsp; 2</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="xcspwt-box2">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp; 2</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; 1300</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span>&nbsp;&nbsp;&nbsp; 2</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -143,6 +170,7 @@ export default {
       transform: translate(-50%, -50%);
     }
   }
+
   .warning_box {
     position: relative;
   }
@@ -152,6 +180,130 @@ export default {
   .shexiangtou_box {
     position: relative;
   }
+
+  .xcspwt-box {
+    // padding-top: 15px;
+    position: absolute;
+    width: 240px;
+    height: 100px;
+    left: 3px;
+    font-size: 18px;
+    top: 40px;
+    color: #4adefe;
+    .tipName {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+      text-align: center;
+    }
+    .msg1 {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+    }
+    .msg1 li {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      color: #4adefe;
+      font-size: 18px;
+      margin-top: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .msg1 li span {
+      color: #4adefe;
+      display: block;
+      float: left;
+    }
+    .msg1 li span:nth-of-type(1) {
+      padding: 0 5px;
+      line-height: 20px;
+      text-align: center;
+      background-size: 100% 100%;
+    }
+
+    .msg1 li span:nth-of-type(2) {
+      color: #f3db5c;
+      width: 138px;
+    }
+  }
+
+   .xcspwt-box2 {
+    // padding-top: 15px;
+    position: absolute;
+    width: 240px;
+    height: 100px;
+    left: 600px;
+    font-size: 18px;
+    top: 700px;
+    color: #4adefe;
+    .tipName {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+      text-align: center;
+    }
+    .msg1 {
+      padding: 5px;
+      outline: 1px rgba(255, 255, 255, 0.3) solid;
+    }
+    .msg1 li {
+      width: 100%;
+      height: 20px;
+      line-height: 20px;
+      color: #4adefe;
+      font-size: 18px;
+      margin-top: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      cursor: default;
+    }
+    .msg1 li span {
+      color: #4adefe;
+      display: block;
+      float: left;
+    }
+    .msg1 li span:nth-of-type(1) {
+      padding: 0 5px;
+      line-height: 20px;
+      text-align: center;
+      background-size: 100% 100%;
+    }
+
+    .msg1 li span:nth-of-type(2) {
+      color: #f3db5c;
+      width: 138px;
+    }
+  }
+
+  // .xcspwt-box{
+  //   height: 100px;
+  //   width: 200px;
+  //   top: 900px;
+  //   left: 20px;
+  //   color: #4adefe;
+  //   border: 1px solid #4adefe;
+  //   border-radius: 5px;
+
+  // }
+  //   .xcspwt-box li {
+  //   width: 100%;
+  //   height: 20px;
+  //   line-height: 20px;
+  //   color: #4adefe;
+  //   font-size: 18px;
+  //   margin-top: 14px;
+  //   overflow: hidden;
+  //   text-overflow: ellipsis;
+  //   white-space: nowrap;
+  //   cursor: default;
+  // }
+  //   .xcspwt-box li span {
+  //   color: #f3db5c;
+  //   display: block;
+  //   float: left;
+  // }
 }
 .warning_container {
   width: 100px;
@@ -159,105 +311,123 @@ export default {
   position: absolute;
 }
 .warning1 {
-  top: 20px;
-  left: 550px;
+  top: 40px;
+  left: 250px;
 }
 .warning2 {
-  top: 20px;
-  left: 700px;
+  top: 40px;
+  left: 400px;
 }
 .warning3 {
-  top: 20px;
-  left: 850px;
+  top: 40px;
+  left: 550px;
 }
 .warning4 {
-  top: 20px;
-  left: 1000px;
+  top: 40px;
+  left: 700px;
 }
 .warning5 {
-  top: -50px;
-  right: 200px;
+  top: 420px;
+  left: 950px;
 }
 .warning6 {
-  top: -50px;
-  right: 50px;
+  top: 40px;
+  left: 850px;
 }
 .warning7 {
-  top: 270px;
-  left: 300px;
+  top: 40px;
+  left: 1000px;
 }
 .warning8 {
-  top: 480px;
-  left: 580px;
+  top: 190px;
+  left: 1200px;
 }
 .warning9 {
-  top: 480px;
-  left: 730px;
-}
-.warning10 {
-  top: 490px;
-  left: 1030px;
+  top: 160px;
+  left: 1300px;
 }
+// .warning10 {
+//   top: 490px;
+//   left: 1030px;
+// }
 .pidai_container {
   width: 200px;
   height: 30px;
   position: absolute;
 }
 .pidai1 {
-  left: 280px;
-  top: 50px;
+  left: 200px;
+  top: 350px;
   width: 150px;
   height: 30px;
 }
 .pidai2 {
-  left: 320px;
-  top: 200px;
-  transform: rotate(90deg);
-  width: 230px;
+  left: 380px;
+  top: 350px;
+  width: 200px;
   height: 30px;
 }
 .pidai3 {
-  left: 430px;
-  top: 350px;
-  width: 200px;
+  left: 525px;
+  top: 465px;
+  transform: rotate(90deg);
+  width: 150px;
   height: 30px;
 }
+
 .pidai4 {
-  left: 650px;
+  left: 610px;
   top: 350px;
-  width: 300px;
+  width: 150px;
   height: 30px;
 }
+.bottom_left {
+  width: 85px;
+  height: 400px;
+  position: absolute;
+  left: 780px;
+  top: 450px;
+  color: #fff;
+  .bottom_info {
+    padding: 5px;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+    text-align: center;
+  }
+}
 .pidai5 {
-  left: 150px;
-  top: 680px;
-  width: 200px;
+  left: 850px;
+  top: 420px;
+  transform: rotate(-60deg);
+  width: 120px;
   height: 30px;
 }
+
 .pidai6 {
-  left: 300px;
-  top: 540px;
-  transform: rotate(-45deg);
-  width: 300px;
+  left: 980px;
+  top: 350px;
+  // transform: rotate(-45deg);
+  width: 150px;
   height: 30px;
 }
 .pidai7 {
-  left: 580px;
-  top: 415px;
-  width: 270px;
+  left: 1100px;
+  top: 280px;
+  transform: rotate(-90deg);
+  width: 120px;
   height: 30px;
 }
 .pidai8 {
-  left: 900px;
-  top: 400px;
-  transform: rotate(-45deg);
-  width: 300px;
+  left: 1160px;
+  top: 135px;
+  transform: rotate(-60deg);
+  width: 80px;
   height: 30px;
 }
 .pidai9 {
-  left: 1200px;
-  top: 310px;
-  width: 250px;
+  left: 1260px;
+  top: 60px;
+  width: 100px;
+  transform: rotate(-10deg);
   height: 30px;
 }
 .pidai10 {
@@ -290,15 +460,15 @@ export default {
   width: 250px;
   height: 300px;
   position: absolute;
-  top: -30px;
-  left: 10px;
+  top: 200px;
+  left: 0px;
 }
 .caimeiji2 {
   width: 250px;
   height: 300px;
   position: absolute;
-  top: 500px;
-  left: 10px;
+  top: 600px;
+  left: 300px;
 }
 .tongcang {
   width: 200px;
@@ -317,28 +487,17 @@ export default {
     color: #fff;
   }
 }
-.bottom_left {
-  width: 180px;
-  height: 100px;
-  position: absolute;
-  right: 1000px;
-  bottom: 20px;
-  color: #fff;
-  .bottom_info {
-    padding: 5px;
-    outline: 1px rgba(255, 255, 255, 0.3) solid;
+
+.bottom_msg {
+  margin: 0;
+  padding: 5px;
+  outline: 1px rgba(255, 255, 255, 0.3) solid;
+  list-style: none;
+  li {
     text-align: center;
   }
-  .bottom_msg {
-    margin: 0;
-    padding: 5px;
-    outline: 1px rgba(255, 255, 255, 0.3) solid;
-    list-style: none;
-    li {
-      text-align: center;
-    }
-  }
 }
+
 .bottom_right {
   width: 180px;
   height: 100px;
@@ -356,8 +515,11 @@ export default {
     padding: 5px;
     outline: 1px rgba(255, 255, 255, 0.3) solid;
     list-style: none;
-    li {
+    .bottom_msg li {
       text-align: center;
+      .bottom_msg li span {
+        color: #4adefe;
+      }
     }
   }
 }
@@ -366,7 +528,7 @@ export default {
   height: 150px;
   // background-color: #fff;
   position: absolute;
-  top: 280px;
+  top: 520px;
   left: 20px;
   button {
     display: block;