<template>
<div id="Attic">
<div class="videoBox" v-show="show == 1"></div>
<div class="videoBox1" v-show="show == 2"></div>
<div class="videoBox2" v-show="show == 3"></div>
<div class="videoBox3" v-show="show == 4"></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%2F0e9121002de649f1b2ac6c4c905401d3.m3u8"
style="width: 100%;height:100%"
></iframe>
</div>
</div>
<div class="middle">
<div class="middleLeft">
<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="middleRight">
<div class="title">阀门控制台</div>
<div class="statue">
阀门状态：
<span class="circle" v-show="flag1"></span>
<span class="circle1" v-show="!flag1"></span>
</div>
<div class="controlBtn">
<div @click="start1">
<span>启 动</span>
</div>
<div @click="stop1">
<span>停 止</span>
</div>
</div>
</div>
</div>
<div class="middle middleWater">
<div class="middleLeft">
<div class="title">阀门开度</div>
<div class="setWater">
<input v-model="setwaterValue" @input="checkFt" />
<span id="waterbtn" @click="waterMath">确定</span>
</div>
<div class="setWater1">
<span>最小值：0</span>
<span>最大值：100</span>
<span class="tip">提示：阀门开度尽量不要超过50</span>
</div>
<div class="setWater1">
<span>阀门开度值：{{ waterValue }}%</span>
</div>
</div>
</div>
<div class="bottomMessage">
<div class="title">监控数据</div>
<!--<div class="time">
<div><span>13:23:50</span> (pm)</div>
<div>2019年05月15日 星期一</div>
</div>-->
<div class="detail">
<div>
<span class="label">流量</span>
<span class="value">{{ Liuliang }}</span>
<span class="label">水位</span>
<span class="value">{{ shuiwei }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Attic",
data: function() {
return {
sid: localStorage.getItem("SID"),
userName: localStorage.getItem("userName"),
flag: false,
flag1: false,
show: "4",
setwaterValue: "",
waterValue: "",
Liuliang: "",
shuiwei: "",
timer: null
};
},
methods: {
//初始运行状态
getInitStatue() {
let params1 = "1\r\n设备状态";
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;
this.flag1 = false;
this.readStatue();
} else if (Ary[0] == "OK" && Ary[2] == 1) {
this.flag = true;
this.flag1 = true;
this.readStatue();
this.$message({
message: "设备运行中",
type: "success"
});
} else {
this.$message({
message: Ary[2],
type: "warning"
});
// this.$router.push({
// path: "/login"
// });
}
});
},
readData() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=R`;
let params = "3\r\n流量\r\n水位\r\n阀门开度";
this.$http
.post(url, params, {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
this.Liuliang = Ary[2];
this.shuiwei = Ary[3];
this.waterValue = Ary[4];
});
},
readStatue() {
if (this.flag == true && this.flag1 == true) {
this.show = 2;
} else if (this.flag == false && this.flag1 == false) {
this.show = 4;
} else if (this.flag == true && this.flag1 == false) {
this.show = 1;
} else if (this.flag == false && this.flag1 == true) {
this.show = 3;
}
},
//水泵控制台
start() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, "1\r\n泵关M\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泵开M\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泵开M\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
// this.record(4);
this.$http
.post(this.nozzle.engineeringWorkOpenPump)
.then(res => {}); //开水泵
this.flag = true;
this.readStatue();
this.$message({
message: "水泵开启成功",
type: "success"
});
}
});
}
});
}
});
// var url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
// var xhr = new XMLHttpRequest();
// xhr.open('POST', url, true);
// xhr.send('1\r\n泵开M\r\n0');
// xhr.onreadystatechange = function () {
// //后端接受完毕
// if(xhr.readyState == 4){
// var obj = JSON.parse(xhr.responseText);
// console.log(obj);
// }
// };
},
stop() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, "1\r\n泵开M\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泵关M\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泵关M\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
// this.record(5);
this.$http
.post(this.nozzle.engineeringWorkClosePump)
.then(res => {}); //关水泵
this.flag = false;
this.readStatue();
this.$message({
message: "水泵已关闭",
type: "success"
});
}
});
}
});
}
});
},
//阀门控制台
start1() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, "1\r\n阀门开\r\n1", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
// this.record(6);
this.$http
.post(this.nozzle.engineeringWorkopenValve)
.then(res => {}); //开阀门
this.flag1 = true;
this.readStatue();
this.$message({
message: "阀门已开启",
type: "success"
});
}
});
},
stop1() {
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, "1\r\n阀门开\r\n0", {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
// this.record(7);
this.$http
.post(this.nozzle.engineeringWorkcloseValve)
.then(res => {}); //关阀门
this.flag1 = false;
this.readStatue();
this.$message({
message: "阀门已关闭",
type: "success"
});
}
});
},
//阀门开度
waterMath() {
let params = "1\r\n阀门开度\r\n" + this.setwaterValue;
let url = `http:\/\/120.27.155.137:7080/exdata?SID=${this.sid}&OP=W`;
this.$http
.post(url, params, {
headers: {
"content-type": "text/plain"
}
})
.then(res => {
var Ary = this.formatterData(res.data);
if (Ary[0] == "OK" && Ary[2] == 0) {
this.$message({
message: "阀门开度设置成功",
type: "success"
});
}
});
},
//监听阀门开度输入值
checkFt() {
var isCheck = isNaN(
parseInt(this.setwaterValue.substr(this.setwaterValue.length - 1))
);
if (isCheck) {
this.setwaterValue = "";
this.$message({
message: "请输入数字格式",
type: "error"
});
} else if (this.setwaterValue > 50) {
this.setwaterValue = "";
this.$message({
message: "阀门开度不能超过50",
type: "error"
});
}
},
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>
#Attic {
width: 100%;
height: 100%;
display: flex;
box-sizing: border-box;
}
#page1 {
height: 100%;
padding: 0 20px 20px 20px;
display: flex;
box-sizing: border-box;
}
.videoBox {
width: 73%;
background: url("./../../../static/img/工业物联网云平台/检测操作室hl.jpg")
no-repeat center;
background-size: 100% 100%;
}
.videoBox1 {
width: 73%;
background: url("./../../../static/img/工业物联网云平台/实验操作室.gif")
no-repeat center;
background-size: 100% 100%;
}
.videoBox2 {
width: 73%;
background: url("./../../../static/img/工业物联网云平台/检测操作室_红.jpg")
no-repeat center;
background-size: 100% 100%;
}
.videoBox3 {
width: 73%;
background: url("./../../../static/img/工业物联网云平台/检测操作室hh.jpg")
no-repeat center;
background-size: 100% 100%;
}
.rightBox {
width: 27%;
margin-left: 20px;
box-sizing: border-box;
overflow: auto;
}
.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;
display: flex;
}
.middle > div {
width: 50%;
}
.middleWater > div {
width: 100%;
}
.setWater {
padding-left: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.setWater > input {
border: 1px solid #cccccc;
height: 26px;
background: none;
outline: none;
color: #ffffff;
font-size: 15px;
width: 130px;
}
.setWater > span {
background: #1bbe60;
display: inline-block;
font-size: 18px;
cursor: pointer;
height: 30px;
line-height: 30px;
text-align: center;
width: 80px;
color: #ffffff;
}
.setWater1 {
padding-left: 20px;
padding-top: 10px;
display: flex;
align-items: center;
justify-content: flex-start;
color: #ffffff;
font-size: 13px;
}
.setWater1 > .tip {
color: #e33636;
font-weight: bold;
}
.middleLeft {
border-right: 1px solid #0d2027;
}
.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: 16%;
margin-top: 2%;
background: #0a2e37;
border-radius: 3px;
overflow: hidden;
}
.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: 10px 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>
