|
@@ -0,0 +1,569 @@
|
|
|
+<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="bottom_left">
|
|
|
+ 煤 <br /><br />
|
|
|
+ 仓
|
|
|
+ </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> {{ shearerState[0].coalCutters }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>回采米数</span>
|
|
|
+ <span> {{ shearerState[0].miningMeters }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>出煤量</span>
|
|
|
+ <span
|
|
|
+ >
|
|
|
+ {{ shearerState[0].coalOutput }}</span
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="xcspwt-box2">
|
|
|
+ <div class="tipName">采煤机状态</div>
|
|
|
+ <ul class="msg1">
|
|
|
+ <li>
|
|
|
+ <span>割煤刀数</span>
|
|
|
+ <span> {{ shearerState[1].coalCutters }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>回采米数</span>
|
|
|
+ <span> {{ shearerState[1].miningMeters }}</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span>出煤量</span>
|
|
|
+ <span
|
|
|
+ >
|
|
|
+ {{ 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%;
|
|
|
+ background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%),
|
|
|
+ linear-gradient(
|
|
|
+ to top,
|
|
|
+ rgba(255, 255, 255, 0.4) 0%,
|
|
|
+ rgba(0, 0, 0, 0.25) 200%
|
|
|
+ );
|
|
|
+ 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: 576px;
|
|
|
+}
|
|
|
+.warning6 {
|
|
|
+ top: 22px;
|
|
|
+ left: 518px;
|
|
|
+}
|
|
|
+.warning7 {
|
|
|
+ top: 22px;
|
|
|
+ left: 585px;
|
|
|
+}
|
|
|
+.warning8 {
|
|
|
+ top: 190px;
|
|
|
+ left: 700px;
|
|
|
+}
|
|
|
+.warning9 {
|
|
|
+ top: 165px;
|
|
|
+ left: 757px;
|
|
|
+}
|
|
|
+// .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 {
|
|
|
+ position: absolute;
|
|
|
+ left: 416px;
|
|
|
+ top: 339px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 3px;
|
|
|
+ outline: 1px rgba(255, 255, 255, 0.3) solid;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.pidai5 {
|
|
|
+ left: 301px;
|
|
|
+ top: 314px;
|
|
|
+ transform: rotate(-60deg);
|
|
|
+ width: 80px;
|
|
|
+ height: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+.pidai6 {
|
|
|
+ left: 379px;
|
|
|
+ top: 277px;
|
|
|
+ // transform: rotate(-45deg);
|
|
|
+ width: 80px;
|
|
|
+ height: 17px;
|
|
|
+}
|
|
|
+.pidai7 {
|
|
|
+ left: 421px;
|
|
|
+ top: 210px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ width: 80px;
|
|
|
+ height: 17px;
|
|
|
+}
|
|
|
+.pidai8 {
|
|
|
+ left: 448px;
|
|
|
+ top: 118px;
|
|
|
+ transform: rotate(-60deg);
|
|
|
+ width: 80px;
|
|
|
+ height: 17px;
|
|
|
+}
|
|
|
+.pidai9 {
|
|
|
+ left: 521px;
|
|
|
+ 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: 200px;
|
|
|
+ height: 220px;
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ bottom: 20px;
|
|
|
+ .tong {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-image: url(筒仓.jpg);
|
|
|
+ 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>
|