主界面

src/components/newMain/item2/Main.vue

@@ -0,0 +1,577 @@
+<template>
+  <div id="outer">
+    <!-- 9个警告盒子 -->
+    <div class="warning_box">
+      <div class="warning_container warning1">
+        <WarningInfo :ref="0" :id="0"></WarningInfo>
+      </div>
+      <div class="warning_container warning2">
+        <WarningInfo :ref="1" :id="1"></WarningInfo>
+      </div>
+
+      <div class="warning_container warning3">
+        <WarningInfo :ref="2" :id="2"></WarningInfo>
+      </div>
+      <div class="warning_container warning4">
+        <WarningInfo :ref="3" :id="3"></WarningInfo>
+      </div>
+      <div class="warning_container warning5">
+        <WarningInfo :ref="4" :id="4"></WarningInfo>
+      </div>
+      <div class="warning_container warning6">
+        <WarningInfo :ref="5" :id="5"></WarningInfo>
+      </div>
+      <div class="warning_container warning7">
+        <WarningInfo :ref="6" :id="6"></WarningInfo>
+      </div>
+      <div class="warning_container warning8">
+        <WarningInfo :ref="7" :id="7"></WarningInfo>
+      </div>
+      <div class="warning_container warning9">
+        <WarningInfo :ref="8" :id="8"></WarningInfo>
+      </div>
+      <!-- <div class="warning_container warning10">
+        <WarningInfo :ref="9" :id="9"></WarningInfo>
+      </div>  -->
+    </div>
+    <!-- 9个转动的皮带 -->
+    <div class="pidai_box">
+      <div
+        v-for="(item, index) in 9"
+        :key="index"
+        :class="`pidai_container pidai${index + 1}`"
+      >
+        <Pidai :isStart="isStart"></Pidai>
+      </div>
+    </div>
+    <div class="caimeiji1">
+      <CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi>
+    </div>
+    <!-- 采煤机2 -->
+    <div class="caimeiji2">
+      <CaiMeiJi :ref="11" info_number="9+10"></CaiMeiJi>
+    </div>
+    <div class="tongcang">
+      <div class="tong"></div>
+      <div class="tong_info">地面筒仓</div>
+    </div>
+
+    <div class="bottom_left">
+       煤 仓
+      <img
+        src="./筒仓1.png"
+        alt="煤 仓"
+      >
+    </div>
+
+    <div class="buttons">
+      <button class="btn1" @click="start">模拟皮带启动</button>
+      <button class="btn2" @click="close">模拟皮带停止</button>
+    </div>
+
+    <div class="xcspwt-box">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].coalCutters }}</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[0].miningMeters }}</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span
+            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            {{ shearerState[0].coalOutput }}</span
+          >
+        </li>
+      </ul>
+    </div>
+
+    <div class="xcspwt-box2">
+      <div class="tipName">采煤机状态</div>
+      <ul class="msg1">
+        <li>
+          <span>割煤刀数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].coalCutters }}</span>
+        </li>
+        <li>
+          <span>回采米数</span>
+          <span> &nbsp;&nbsp;&nbsp; {{ shearerState[1].miningMeters }}</span>
+        </li>
+        <li>
+          <span>出煤量</span>
+          <span
+            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            {{ shearerState[1].coalOutput }}</span
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import WarningInfo from "./WarningInfo.vue";
+import CaiMeiJi from "./CaiMeiJi.vue";
+import Pidai from "./Pidai.vue";
+export default {
+  name: "Main",
+  components: { WarningInfo, Pidai, CaiMeiJi },
+  data() {
+    return {
+      isStart: true,
+      shearerState: [
+        {
+          coalCutters: 2,
+          miningMeters: 1300,
+          coalOutput: 2,
+        },
+        {
+          coalCutters: 2,
+          miningMeters: 1300,
+          coalOutput: 2,
+        },
+      ],
+    };
+  },
+  methods: {
+    start() {
+      if (this.isStart) {
+        this.$message.warning("不能重复启动");
+      } else {
+        this.isStart = !this.isStart;
+        for (let i = 0; i < 9; i++) {
+          this.$refs[i].init();
+        }
+      }
+    },
+    close() {
+      if (this.isStart) {
+        this.isStart = !this.isStart;
+        for (let i = 0; i < 9; i++) {
+          this.$refs[i].close();
+        }
+      }
+    },
+  },
+  mounted() {
+    let interval = setInterval(() => {
+      let temp = [];
+      for (let i = 0; i < 2; i++) {
+        let state = {};
+        state.coalCutters = this.getRandomNum(0, 10);
+        state.miningMeters = this.getRandomNum(800, 1500);
+        state.coalOutput = this.getRandomNum(0, 10);
+        temp.push(state);
+      }
+      this.shearerState = temp;
+    }, 3000);
+    this.$once("hook:beforeDestroy", () => {
+      clearInterval(interval);
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#outer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .warning_box {
+    position: relative;
+    margin-left: -52px;
+  }
+  .pidai_box {
+    position: relative;
+    margin-left: 160px;
+  }
+  .shexiangtou_box {
+    position: relative;
+  }
+
+  .xcspwt-box {
+    // padding-top: 15px;
+    position: absolute;
+    width: 148px;
+    height: 84px;
+    left: 20px;
+    font-size: 12px;
+    top: 32px;
+    color: #4adefd;
+    .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: 12px;
+      margin-top: -1px;
+      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: 47px;
+    }
+  }
+
+  .xcspwt-box2 {
+    // margin-left:10px;
+    // padding-top: 15px;
+    position: absolute;
+    width: 148px;
+    height: 84px;
+    left: 298px;
+    font-size: 12px;
+    top: 425px;
+    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: 12px;
+      margin-top: -1px;
+      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: 47px;
+    }
+  }
+
+  // .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: 55px;
+  height: 154px;
+  position: absolute;
+}
+.warning1 {
+  top: 22px;
+  left: 252px;
+}
+.warning2 {
+  top: 22px;
+  left: 319px;
+}
+.warning3 {
+  top: 22px;
+  left: 385px;
+}
+.warning4 {
+  top: 22px;
+  left: 451px;
+}
+.warning5 {
+  top: 299px;
+  left: 635px;
+}
+.warning6 {
+  top: 22px;
+  left: 518px;
+}
+.warning7 {
+  top: 22px;
+  left: 585px;
+}
+.warning8 {
+  top: 190px;
+  left: 730px;
+}
+.warning9 {
+  top: 165px;
+  left: 788px;
+}
+// .warning10 {
+//   top: 490px;
+//   left: 1030px;
+// }
+.pidai_container {
+  width: 200px;
+  height: 25px;
+  position: absolute;
+}
+.pidai1 {
+  left: 22px;
+  top: 277px;
+  width: 80px;
+  height: 17px;
+}
+.pidai2 {
+  left: 121px;
+  top: 278px;
+  width: 80px;
+  height: 20px;
+}
+.pidai3 {
+  left: 180px;
+  top: 328px;
+  transform: rotate(90deg);
+  width: 80px;
+  height: 17px;
+}
+
+.pidai4 {
+  left: 234px;
+  top: 277px;
+  width: 80px;
+  height: 17px;
+}
+.bottom_left {
+  width: 67px;
+    height: 110px;
+    position: absolute;
+    left: 477px;
+    top: 261px;
+    color: #fff;
+    font-size: 12px;
+    padding: 5px;
+    text-align: center;
+}
+.bottom_left img {
+  width: 100%;
+  height: 100%;
+ 
+}
+.pidai5 {
+    left: 361px;
+    top: 311px;
+    -webkit-transform: rotate(0deg);
+    transform: rotate(-65deg);
+    width: 80px;
+    height: 17px;
+}
+
+.pidai6 {
+ left: 440px;
+    top: 273px;
+    width: 60px;
+    height: 17px;
+}
+.pidai7 {
+  left: 462px;
+  top: 210px;
+  transform: rotate(-90deg);
+  width: 80px;
+  height: 17px;
+}
+.pidai8 {
+  left: 486px;
+  top: 118px;
+  transform: rotate(-60deg);
+  width: 80px;
+  height: 17px;
+}
+.pidai9 {
+  left: 559px;
+  top: 61px;
+  width: 80px;
+  height: 17px;
+  transform: rotate(-10deg);
+}
+.pidai10 {
+  left: 1200px;
+  top: 410px;
+  width: 80px;
+  height: 17px;
+}
+.shexiangtou_container {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-image: url(摄像头.png);
+  background-size: cover;
+  position: absolute;
+}
+.shexiangtou1 {
+  top: 200px;
+  left: 470px;
+}
+.shexiangtou2 {
+  top: 240px;
+  left: 1270px;
+}
+.shexiangtou3 {
+  top: 450px;
+  left: 860px;
+}
+.caimeiji1 {
+  width: 133px;
+  height: 200px;
+  position: absolute;
+  top: 149px;
+  left: -31px;
+}
+.caimeiji2 {
+  width: 127px;
+  height: 197px;
+  position: absolute;
+  top: 393px;
+  left: 100px;
+}
+.tongcang {
+     width: 70px;
+    height: 70px;
+    position: absolute;
+    right: 50px;
+    bottom: 36px;
+
+  .tong {
+   width: 100%;
+    height: 100%;
+    background-image: url(筒仓.png);
+    background-size: cover;
+  }
+  .tong_info {
+    text-align: center;
+    color: #fff;
+  }
+}
+
+.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;
+  position: absolute;
+  right: 540px;
+  bottom: 20px;
+  color: #fff;
+  .bottom_info {
+    padding: 5px;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+    text-align: center;
+  }
+  .bottom_msg {
+    margin: 0;
+    padding: 5px;
+    outline: 1px rgba(255, 255, 255, 0.3) solid;
+    list-style: none;
+    .bottom_msg li {
+      text-align: center;
+      .bottom_msg li span {
+        color: #4adefe;
+      }
+    }
+  }
+}
+.buttons {
+  width: 95px;
+  height: 88px;
+  position: absolute;
+  top: 393px;
+  left: -13px;
+  button {
+    display: block;
+    background-color: rgb(226, 226, 218);
+    background-image: linear-gradient(
+      to bottom,
+      rgb(255, 255, 255) 0%,
+      rgb(38, 120, 228) 50%,
+      rgb(255, 255, 255) 100%
+    );
+    border-radius: 10px;
+    font-size: 13px;
+    font-family: "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif";
+    font-weight: bold;
+  }
+  .btn1 {
+    margin-left: 40px;
+    margin-top: 10%;
+    width: 100%;
+    height: 45%;
+  }
+  .btn2 {
+    margin-left: 40px;
+    margin-top: 10%;
+    width: 100%;
+    height: 45%;
+  }
+}
+</style>