<template>
<div id="GroundFloor">
<div class="videoBox" v-show="!flag"></div>
<div class="videoBoxActive" v-show="flag"></div>
<div class="rightBox">
<div class="topVideo">
<div class="title">视频监控</div>
<div class="myiframe">
<iframe
scrolling="no"
frameborder="0"
webkitallowfullscreen="true"
mozallowfullscreen="true"
allowfullscreen="true"
src="http://mn.mingnew.com/live/hls.html?hls=http%3A%2F%2Fhls.open.ys7.com%2Fopenlive%2F05023b7fad89489585128af2f00591ba.m3u8"
style="width: 100%;height:100%"
></iframe>
</div>
</div>
<div class="middle">
<div class="title">控制台</div>
<div class="statue">
设备状态：
<span class="circle" v-show="flag"></span>
<span class="circle1" v-show="!flag"></span>
</div>
<div class="controlBtn">
<div @click="start">
<span>启 动</span>
</div>
<div @click="stop">
<span>停 止</span>
</div>
</div>
</div>
<div class="bottomMessage">
<div class="title">监控数据</div>
<div class="detail">
<div>
<span class="label">电压(V)</span>
<span class="value">{{stopV}}</span>
<span class="label">电流(A)</span>
<span class="value">{{startA}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "GroundFloor",
data: function() {
return {
sid: localStorage.getItem("SID"),
userName: localStorage.getItem("userName"),
flag: false,
stopV: "",
startA: ""
};
},
methods: {
getInitStatue() {
let params1 = "1\r\n设备状态1";
let url1 = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=R`;
this.$http
.post(url1, params1, {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
this.flag = false;
} else if (Ary[0] == "OK" && Ary[2] == 1) {
this.flag = true;
} else {
this.$message({
message: Ary[2] + "请检查硬件设备连接是否正常",
type: "warning"
});
}
});
},
readData() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=R`;
let params = "2\r\n电流\r\n电压";
this.$http
.post(url, params, {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
this.startA = Ary[2];
this.stopV = Ary[3];
});
},
//水泵控制台
start() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, "1\r\n泵关M1\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
this.$http
.post(url, "1\r\n泵开M1\r\n1", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
this.$http
.post(url, "1\r\n泵开M1\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
// this.record(2);
this.$http
.post(this.nozzle.engineeringWorkOpenPump)
.then(res => {}); //开水泵
this.flag = true;
this.$message({
message: "水泵开启成功",
type: "success"
});
}
});
}
});
}
});
},
stop() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, "1\r\n泵开M1\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
this.$http
.post(url, "1\r\n泵关M1\r\n1", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
this.$http
.post(url, "1\r\n泵关M1\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
// this.record(3);
this.$http
.post(this.nozzle.engineeringWorkClosePump)
.then(res => {}); //关水泵
this.flag = false;
this.$message({
message: "水泵已关闭",
type: "success"
});
}
});
}
});
}
});
},
// 获取时间
getDate() {
let date = new Date();
this.year = date.getFullYear();
this.month = date.getMonth() + 1;
this.day = date.getDate();
switch (date.getDay()) {
case 1:
this.week = "一";
break;
case 2:
this.week = "二";
break;
case 3:
this.week = "三";
break;
case 4:
this.week = "四";
break;
case 5:
this.week = "五";
break;
case 6:
this.week = "六";
break;
case 7:
this.week = "天";
break;
}
this.hour = date.getHours();
this.minutes =
date.getMinutes() < 10 ? 0 + "" + date.getMinutes() : date.getMinutes();
this.seconds =
date.getSeconds() < 10 ? 0 + "" + date.getSeconds() : date.getSeconds();
this.noon = this.hour >= 12 ? "PM" : "AM";
},
formatterData(data) {
var str = data;
var strs = new Array();
strs = str.split("\r\n");
var Ary = [];
for (var i = 0; i < strs.length; i++) {
Ary.push(strs[i]);
}
return Ary;
},
record(type) {
// let url = "/dataApi/LogCloudPlatformsController/addPlatformsLog";
// let params = {
// log_user_name: this.userName,
// log_type: type
// };
// this.$http.post(url, params).then(res => {});
}
},
mounted: function() {
this.getInitStatue();
this.readData();
this.timer = setInterval(this.readData, 4000);
},
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
};
</script>
<style scoped>
#GroundFloor {
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
}
#page1 {
height: 100%;
/*background: #0d2027;*/
padding: 0 20px 20px 20px;
display: flex;
box-sizing: border-box;
}
.videoBox {
width: 73%;
background: url("./../../../static/img/工业物联网云平台/泵站_红.jpg")
no-repeat center;
background-size: 100% 100%;
}
.videoBoxActive {
width: 73%;
background: url("./../../../static/img/工业物联网云平台/start.gif") no-repeat
center;
background-size: 100% 100%;
}
.rightBox {
width: 27%;
margin-left: 20px;
box-sizing: border-box;
}
.title {
height: 50px;
line-height: 50px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
padding-left: 20px;
}
.topVideo {
height: 40%;
background: #0a2e37;
border-radius: 3px;
}
.myiframe {
width: 95%;
margin: 0 auto;
height: calc(100% - 60px);
}
.middle {
height: 20%;
margin-top: 2%;
background: #0a2e37;
border-radius: 3px;
}
.statue {
height: 20px;
line-height: 20px;
color: #ffffff;
padding-left: 20px;
display: flex;
align-items: center;
}
.start {
color: #17f6c3;
}
.circle {
display: inline-block;
background: #1bbe60;
height: 16px;
width: 16px;
border-radius: 50%;
margin-left: 15px;
}
.circle1 {
display: inline-block;
background: #ee3b3b;
height: 16px;
width: 16px;
border-radius: 50%;
margin-left: 15px;
}
.controlBtn {
height: calc(100% - 70px);
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
padding: 0 20px;
}
.controlBtn div:first-child {
height: 25%;
min-height: 28px;
width: 45%;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-around;
background: #1bbe60;
font-size: 18px;
cursor: pointer;
}
.controlBtn div:last-child {
height: 25%;
min-height: 28px;
width: 45%;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-around;
background: #e33636;
font-size: 18px;
cursor: pointer;
}
.bottomMessage {
height: 37%;
margin-top: 2%;
background: #0a2e37;
border-radius: 3px;
}
.time {
display: flex;
height: 40px;
color: #ffffff;
justify-content: space-between;
padding: 0 20px;
line-height: 40px;
}
.time > div > span {
font-size: 25px;
color: #18ffc9;
}
.detail {
margin-top: 30px;
}
.detail div {
display: flex;
padding: 0 20px;
}
.detail div .label {
display: inline-block;
width: 15%;
color: #ffffff;
}
.detail div .value {
display: inline-block;
width: 27%;
margin-right: 4%;
border: 1px solid #18ffc9;
padding: 0 10px;
color: #ffffff;
}
</style>
