|
|
@@ -0,0 +1,450 @@
|
|
|
+<template>
|
|
|
+ <div id="outer">
|
|
|
+ <div class="title">
|
|
|
+ <p>生产流程整体监控</p>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ <div class="pidai_box">
|
|
|
+ <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>
|
|
|
+ <div class="caimeiji1"><CaiMeiJi :ref="10" info_number="1#"></CaiMeiJi></div>
|
|
|
+ <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">
|
|
|
+ <div class="bottom_info">井底煤仓料位</div>
|
|
|
+ <ul class="bottom_msg">
|
|
|
+ <li>1#煤仓料位   XXXX</li>
|
|
|
+ <li>9+10煤仓料位   XXXX</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="bottom_right">
|
|
|
+ <div class="bottom_info">算仓料位</div>
|
|
|
+ <ul class="bottom_msg">
|
|
|
+ <li>末煤算仓料位   XXXX</li>
|
|
|
+ <li>末煤算仓料位   XXXX</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="buttons">
|
|
|
+ <button class="btn1" @click="start">模拟皮带启动</button>
|
|
|
+ <button class="btn2" @click="end">模拟皮带停止</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import WarningInfo from './WarningInfo.vue'
|
|
|
+import CaiMeiJi from './CaiMeiJi.vue'
|
|
|
+import Pidai from './Pidai.vue'
|
|
|
+export default {
|
|
|
+ name:'Main',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{WarningInfo,Pidai,CaiMeiJi},
|
|
|
+ mounted() {
|
|
|
+ // this.initWebSocket()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ closeWebSocket() {
|
|
|
+ this.websocket.close();
|
|
|
+ },
|
|
|
+ initWebSocket(){
|
|
|
+ // var websocket = null;
|
|
|
+ //判断当前浏览器是否支持WebSocket
|
|
|
+ if ('WebSocket' in window) {
|
|
|
+ var serviceIp ="localhost:8081";
|
|
|
+ this.websocket = new WebSocket("ws://"+serviceIp+"/Belt");
|
|
|
+ }else if ('MozWebSocket' in window) {
|
|
|
+ var serviceIp ="localhost:8081";
|
|
|
+ this.websocket = new WebSocket("ws://"+serviceIp+"/Belt");
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log('当前浏览器 Not support websocket');
|
|
|
+ let that = this;
|
|
|
+ this.interval = window.setInterval(function(){ //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
|
|
|
+ that.forgeWebSocket();
|
|
|
+ },30000);
|
|
|
+ }
|
|
|
+ let that = this;
|
|
|
+ this.interval = window.setInterval(function(){ //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
|
|
|
+ if(that.websocket!=null){
|
|
|
+ that.websocket.send("HeartBeat");
|
|
|
+ console.log("发送心跳包：HeartBeat");
|
|
|
+ }
|
|
|
+ },30000);
|
|
|
+
|
|
|
+ //连接发生错误的回调方法
|
|
|
+ this.websocket.onerror = function (ev) {
|
|
|
+ console.log("WebSocket连接发生错误");
|
|
|
+ };
|
|
|
+
|
|
|
+ //连接成功建立的回调方法
|
|
|
+ this.websocket.onopen = function (ev) {
|
|
|
+ console.log("WebSocket连接成功");
|
|
|
+ this.send("addsocket");
|
|
|
+ }
|
|
|
+
|
|
|
+ //接收到消息的回调方法
|
|
|
+ this.websocket.onmessage = function (event) {
|
|
|
+ let obj = JSON.parse(event.data)
|
|
|
+ // let {obj1,obj2} = obj
|
|
|
+ console.log(event.data)
|
|
|
+ if(obj.id>=0&&obj.id<=9){
|
|
|
+ let {broken,coal_stack,deviated,locked,slippery,smoke,speed,temperature,tore,vertical_tore} = obj
|
|
|
+ let infoList = {
|
|
|
+ tore: {
|
|
|
+ info:tore, info_msg:'撕裂'
|
|
|
+ },
|
|
|
+ locked: {
|
|
|
+ info:locked, info_msg:'闭锁'
|
|
|
+ },
|
|
|
+ deviated: {
|
|
|
+ info:deviated, info_msg:'跑偏'
|
|
|
+ },
|
|
|
+ smoke: {
|
|
|
+ info:smoke, info_msg:'烟雾'
|
|
|
+ },
|
|
|
+ coal_stack: {
|
|
|
+ info:coal_stack, info_msg:'堆煤'
|
|
|
+ },
|
|
|
+ speed: {
|
|
|
+ info:speed, info_msg:'速度'
|
|
|
+ },
|
|
|
+ temperature: {
|
|
|
+ info:temperature, info_msg:'温度'
|
|
|
+ },
|
|
|
+ slippery: {
|
|
|
+ info:slippery, info_msg:'打滑'
|
|
|
+ },
|
|
|
+ vertical_tore: {
|
|
|
+ info:vertical_tore, info_msg:'纵撕'
|
|
|
+ },
|
|
|
+ broken: {
|
|
|
+ info:broken, info_msg:'断带'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ that.$refs[obj.id].setInfo(infoList)
|
|
|
+ }else if(obj.id>=10&&obj.id<=11){
|
|
|
+ let {knife_num,meter,coal_num} = obj
|
|
|
+ let msg ={
|
|
|
+ '割煤刀数':knife_num,
|
|
|
+ '回采米数':meter,
|
|
|
+ '出煤量':coal_num
|
|
|
+ }
|
|
|
+ that.$refs[obj.id].getData(msg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //连接关闭的回调方法
|
|
|
+ this.websocket.onclose = function (ev) {
|
|
|
+ console.log("WebSocket连接关闭");
|
|
|
+ this.websocket=null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ start(){
|
|
|
+ this.initWebSocket()
|
|
|
+ },
|
|
|
+ end(){
|
|
|
+ this.closeWebSocket()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy(){
|
|
|
+ // this.websocket.onclose()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ #outer{
|
|
|
+ width: 100%;
|
|
|
+ height: 85%;
|
|
|
+ background-image: linear-gradient(to right, rgb(6,19,60) 0%, rgb(1,22,105)50%, rgb(6,19,60)100%);
|
|
|
+ position: relative;
|
|
|
+ .title{
|
|
|
+ position: relative;
|
|
|
+ height: 10%;
|
|
|
+ p{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 40px;
|
|
|
+ margin: 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning_box{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .pidai_box{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .shexiangtou_box{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning_container{
|
|
|
+ width: 100px;
|
|
|
+ height: 200px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .warning1{
|
|
|
+ top: 20px;
|
|
|
+ left: 650px;
|
|
|
+ }
|
|
|
+ .warning2{
|
|
|
+ top: 20px;
|
|
|
+ left: 800px;
|
|
|
+ }
|
|
|
+ .warning3{
|
|
|
+ top: 20px;
|
|
|
+ left: 950px;
|
|
|
+ }
|
|
|
+ .warning4{
|
|
|
+ top: 20px;
|
|
|
+ left: 1100px;
|
|
|
+ }
|
|
|
+ .warning5{
|
|
|
+ top: -50px;
|
|
|
+ right: 200px;
|
|
|
+ }
|
|
|
+ .warning6{
|
|
|
+ top: -50px;
|
|
|
+ right: 50px;
|
|
|
+ }
|
|
|
+ .warning7{
|
|
|
+ top: 270px;
|
|
|
+ left: 350px;
|
|
|
+ }
|
|
|
+ .warning8{
|
|
|
+ top: 480px;
|
|
|
+ left: 680px;
|
|
|
+ }
|
|
|
+ .warning9{
|
|
|
+ top: 480px;
|
|
|
+ left: 830px;
|
|
|
+ }
|
|
|
+ .warning10{
|
|
|
+ top: 490px;
|
|
|
+ left: 1230px;
|
|
|
+ }
|
|
|
+ .pidai_container{
|
|
|
+ width: 200px;
|
|
|
+ height: 30px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .pidai1{
|
|
|
+ left: 280px;
|
|
|
+ top: 50px;
|
|
|
+ width: 250px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai2{
|
|
|
+ left: 452px;
|
|
|
+ top: 170px;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ width: 150px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai3{
|
|
|
+ left: 510px;
|
|
|
+ top: 280px;
|
|
|
+ width: 300px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai4{
|
|
|
+ left: 820px;
|
|
|
+ top: 280px;
|
|
|
+ width: 300px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai5{
|
|
|
+ left: 150px;
|
|
|
+ top: 580px;
|
|
|
+ width: 300px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai6{
|
|
|
+ left: 425px;
|
|
|
+ top: 500px;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ width: 250px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai7{
|
|
|
+ left: 660px;
|
|
|
+ top: 415px;
|
|
|
+ width: 270px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai8{
|
|
|
+ left: 950px;
|
|
|
+ top: 350px;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ width: 600px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai9{
|
|
|
+ left: 1500px;
|
|
|
+ top: 310px;
|
|
|
+ width: 350px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .pidai10{
|
|
|
+ left: 1500px;
|
|
|
+ top: 410px;
|
|
|
+ width: 250px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ .shexiangtou_container{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-image: url(摄像头.png);
|
|
|
+ background-size:cover;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .shexiangtou1{
|
|
|
+ top: 200px;
|
|
|
+ left: 570px;
|
|
|
+ }
|
|
|
+ .shexiangtou2{
|
|
|
+ top: 100px;
|
|
|
+ left: 1470px;
|
|
|
+ }
|
|
|
+ .shexiangtou3{
|
|
|
+ top: 350px;
|
|
|
+ left: 960px;
|
|
|
+ }
|
|
|
+ .caimeiji1{
|
|
|
+ width: 250px;
|
|
|
+ height: 240px;
|
|
|
+ position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .caimeiji2{
|
|
|
+ width: 250px;
|
|
|
+ height: 240px;
|
|
|
+ position: absolute;
|
|
|
+ top: 400px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .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_left{
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ right: 715px;
|
|
|
+ bottom: 20px;
|
|
|
+ color: #fff;
|
|
|
+ .bottom_info{
|
|
|
+ padding: 5px;
|
|
|
+ outline: 1px rgba(255, 255, 255, .3) solid;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .bottom_msg{
|
|
|
+ margin: 0;
|
|
|
+ padding: 5px;
|
|
|
+ outline: 1px rgba(255, 255, 255, .3) solid;
|
|
|
+ list-style: none;
|
|
|
+ li{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom_right{
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ right: 315px;
|
|
|
+ bottom: 20px;
|
|
|
+ color: #fff;
|
|
|
+ .bottom_info{
|
|
|
+ padding: 5px;
|
|
|
+ outline: 1px rgba(255, 255, 255, .3) solid;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .bottom_msg{
|
|
|
+ margin: 0;
|
|
|
+ padding: 5px;
|
|
|
+ outline: 1px rgba(255, 255, 255, .3) solid;
|
|
|
+ list-style: none;
|
|
|
+ li{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buttons{
|
|
|
+ width: 240px;
|
|
|
+ height: 150px;
|
|
|
+ // background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 230px;
|
|
|
+ left: 20px;
|
|
|
+ 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: 20px;
|
|
|
+ font-family: "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif";
|
|
|
+ font-weight:bold
|
|
|
+ }
|
|
|
+ .btn1{
|
|
|
+ width: 100%;
|
|
|
+ height: 45%;
|
|
|
+ }
|
|
|
+ .btn2{
|
|
|
+ margin-top: 5%;
|
|
|
+ width: 100%;
|
|
|
+ height: 45%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
