|
|
@@ -1,563 +0,0 @@
|
|
|
-<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%;
|
|
|
- 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>
|
