<template>
<div id="pageOne">
<div class="header">
<!-- <div class="logo"><img src=" ./../../../static/img/ZhuangtaiJianKong/logo_img.png" alt=""></div> -->
<div>
<img src="./../../../static/img/ZhuangtaiJianKong/bt_img.png" />
</div>
<!-- <div class="date">time</div> -->
</div>
<div class="message">
<!-- <van-notice-bar text="通知内容" left-icon="volume-o" /> -->
</div>
<div class="picbox">
<img src="./../../../static/img/ZhuangtaiJianKong/hong.png" v-if="list.state == 1" />
<img
src="./../../../static/img/ZhuangtaiJianKong/lv30.png"
v-if="list.state == 0 && list.openLevel <= 35.00"
/>
<img
src="./../../../static/img/ZhuangtaiJianKong/lv50.png"
v-if="list.state == 0 && 35 < list.openLevel && list.openLevel <= 55"
/>
<img
src="./../../../static/img/ZhuangtaiJianKong/lv75.png"
v-if="list.state == 0 && 55 < list.openLevel && list.openLevel <= 75.00"
/>
<img
src="./../../../static/img/ZhuangtaiJianKong/lv100.png"
v-if="list.state == 0 && 75 < list.openLevel && list.openLevel <= 100.00"
/>
<div class="watermessage">
<span class="waterMsg">水位：{{list.waterLevel}} {{list.waterLevelUnit}}</span>
</div>
<div class="waterposition">
<el-progress :text-inside="true" :stroke-width="16" :percentage="list.percentage"></el-progress>
</div>
<div class="controlpersent" v-show="controlFlag">
<el-select size="mini" v-model="value" placeholder="请选择" @change="selControl">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="openpersent" @click="controlFlag = !controlFlag">
<span class="waterMsg">开合度：{{list.openLevel}} {{list.openLevelUnit}}</span>
</div>
<div class="liuliang">
<span class="waterMsg">流量：{{list.flow}} {{list.flowUnit}}</span>
</div>
<div class="bengji" v-if="list.stateDetail">
<span class="waterMsg bjbox">
泵机状态：
<span
:class="{openstate:list.state == 0,closestate:list.state == 1}"
>{{list.stateZn}}</span>
</span>
<span class="waterMsg bjbox">
A相电压/电流：{{list.stateDetail.voltage1}}
V {{list.stateDetail.electricity1}} A
</span>
<span class="waterMsg bjbox">
B相电压/电流：{{list.stateDetail.voltage2}}
V {{list.stateDetail.electricity2}} A
</span>
<span class="waterMsg bjbox">
C相电压/电流：{{list.stateDetail.voltage3}}
V {{list.stateDetail.electricity3}} A
</span>
</div>
</div>
<div class="footer">
<div class="left">
<div v-if="list.state == 0">
<span class="leftlabel">DI01</span>
<span class="circle"></span>
{{list.stateZn}}
</div>
<div v-else>
<span class="leftlabel">DI01</span>
<span class="circle circle1"></span>
{{list.stateZn}}
</div>
</div>
<div class="middle">
<div class="middlebox" v-for="(item,i) in list.data" :key="i">
<h1>{{item.titleName}}</h1>
<div class="valurbox" v-for="(item1,j) in item.field" :key="j">
<span class="label" :title="item1.key">{{item1.key}}</span>
<span class="value" :title="item1.value">{{item1.value}}{{item1.unit}}</span>
</div>
</div>
</div>
<div class="right">
<h2>
手动
<span>（正常）</span>
</h2>
<div>
<span class="confirmbtn">确认报警</span>
</div>
<div>
<span class="togglebtn" v-show="list.automatic == 1" @click="controlBj(2)">切手动</span>
<span class="togglebtn backblack" v-show="list.automatic == 0">切手动</span>
<span class="togglebtn" v-show="list.manual == 1" @click="controlBj(3)">切自动</span>
<span class="togglebtn backblack" v-show="list.manual == 0">切自动</span>
</div>
<div>
<span class="confirmbtn start" @click="controlBj(0)" v-if="startFlag == 0">启动水泵</span>
<!-- <span class="confirmbtn start backblack" v-if='list.state == 1 && startFlag != 0'>指令发送中...</span>
<span class="confirmbtn start backblack" v-if='list.state == 0'>启动水泵</span>-->
<span class="confirmbtn start backblack" v-else>指令发送中...</span>
<!-- <span class="confirmbtn start backblack" v-if='list.state == 0'>启动水泵</span> -->
</div>
<div>
<span class="confirmbtn stop" @click="controlBj(1)" v-if="stopFlag == 0">关闭水泵</span>
<span class="confirmbtn start backblack" v-else>指令发送中...</span>
<!-- <span class="confirmbtn stop backblack" v-if="list.state == 1">关闭水泵</span> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
controlFlag: false,
options: [
{
value: 30,
label: "30%"
},
{
value: 50,
label: "50%"
},
{
value: 75,
label: "75%"
},
{
value: 100,
label: "100%"
}
],
value: "",
list: {},
waterLevel: 0,
startFlag: 0,
stopFlag: 0,
icount: ""
};
},
mounted() {
this.getdata();
let _this = this;
this.icount = setInterval(function() {
_this.getdata();
}, 2500);
},
methods: {
getdata() {
let url1 = "/ZhuangTaiJianKong/telemetry/listTelemetry";
this.$http.get(url1).then(res => {
this.list = res.data.data;
});
},
controlBj(i) {
this.$message("指令发送中，请稍后...");
clearInterval(this.icount);
if (i == 0) {
this.startFlag = -1;
} else if (i == 1) {
this.stopFlag = -1;
}
let params = {
data: {
stationid: 3,
pumpid: 1,
deviceid: 1,
state: i
}
};
let url = "/ZhuangTaiJianKong/telesignal/controlPump";
this.$http
.post(url, params)
.then(res => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: "success"
});
} else {
this.$message({
message: res.data.msg,
type: "error"
});
}
this.startIcount();
if (i == 0) {
this.startFlag = 0;
} else if ((i = 1)) {
this.stopFlag = 0;
}
})
.catch(res => {
this.$message({
message: "网络超时，请刷新后再次请求",
type: "error"
});
this.startIcount();
if (i == 0) {
this.startFlag = 0;
} else if ((i = 1)) {
this.stopFlag = 0;
}
});
},
selControl(val) {
this.$message("指令发送中，请稍后...");
clearInterval(this.icount);
let params = {
data: {
stationid: 3,
pumpid: 1,
deviceid: 1,
state: 4,
openValue: val
}
};
let url = "/ZhuangTaiJianKong/telesignal/controlOpenValue";
this.$http
.post(url, params)
.then(res => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: "success"
});
} else {
this.$message({
message: res.data.msg,
type: "error"
});
}
this.startIcount();
})
.catch(res => {
this.$message({
message: "网络超时，请刷新后再次请求",
type: "error"
});
});
},
startIcount() {
this.getdata();
let _this = this;
this.icount = setInterval(function() {
_this.getdata();
}, 2000);
}
}
};
</script>
<style>
#pageOne {
height: 100%;
min-width: 1200px;
}
.header {
height: 60px;
/* border: 1px solid red; */
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
padding: 20px;
}
.date {
padding: 0 20px;
color: #fff;
}
.message {
height: 40px;
/* border: 1px solid red; */
}
.openstate {
color: #26be67;
}
.closestate {
color: red;
}
.picbox {
height: calc(100% - 310px);
/* border: 1px solid red; */
position: relative;
display: flex;
justify-content: space-around;
/* min-width: 1400px; */
}
.picbox > img {
width: 100%;
height: 100%;
}
.watermessage {
position: absolute;
/* border: 1px solid red; */
top: 48%;
left: 4%;
width: 92px;
text-align: center;
}
.waterposition {
position: absolute;
/* border: 1px solid red; */
top: 48%;
left: 5%;
width: 220px;
height: 20px;
-webkit-transform: rotate(90deg);
transform: rotate(-90deg);
text-align: center;
}
.openpersent {
position: absolute;
top: 14%;
left: 33%;
cursor: pointer;
}
.el-input--mini .el-input__inner {
height: 28px;
line-height: 28px;
background: none;
border: 1px solid #999;
color: #fff;
width: 96px;
font-weight: bold;
}
.controlpersent {
width: 200px;
height: 30px;
position: absolute;
top: 14.3%;
left: 44%;
}
.liuliang {
position: absolute;
top: 45%;
left: 60%;
}
.bengji {
position: absolute;
top: 56%;
left: 27%;
width: 250px;
height: 96px;
}
.waterMsg {
color: #fff;
background: rgba(0, 0, 0, 0.4);
font-weight: bold;
font-size: 15px;
padding: 6px 12px;
display: inline-block;
margin-bottom: 5px;
}
.bjbox {
width: 250px;
margin: 0 !important;
}
.footer {
height: 205px;
/* border: 1px solid red; */
display: flex;
justify-content: space-around;
}
.left {
width: 12%;
background: rgba(0, 0, 0, 0.1);
}
.middle {
width: 72%;
display: flex;
justify-content: space-between;
}
.middlebox {
width: 19.9%;
background: rgba(0, 0, 0, 0.1);
color: #0066ff;
overflow: hidden;
}
.middlebox h1 {
margin: 0;
font-size: 21px;
font-weight: bold;
text-align: center;
padding: 4% 0;
padding-bottom: 0;
}
.middlebox > div {
text-align: center;
font-weight: bold;
font-size: 16px;
margin-top: 4%;
}
.valurbox {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
}
.label {
display: inline-block;
width: 105px;
overflow: hidden;
text-align: left;
white-space: nowrap;
padding-right: 10px;
}
.value {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-align: left;
}
.right {
width: 14%;
background: rgba(0, 0, 0, 0.1);
}
h2 {
color: #0066ff;
font-size: 21px;
font-weight: bold;
padding: 0 10px;
margin: 5px 0;
}
h2 > span {
font-size: 16px;
font-weight: bold;
color: #00cc00;
}
.right > div {
text-align: center;
padding-bottom: 10px;
}
.confirmbtn {
height: 33px;
line-height: 33px;
display: inline-block;
width: 145px;
color: #fff;
font-size: 16px;
font-weight: bold;
background: #f2535f;
text-align: center;
border-radius: 3px;
cursor: pointer;
}
.togglebtn {
height: 33px;
line-height: 33px;
display: inline-block;
width: 70px;
color: #fff;
font-size: 16px;
font-weight: bold;
background: #396af5;
text-align: center;
border-radius: 3px;
cursor: pointer;
user-select: none;
}
.backblack {
background: #999 !important;
cursor: not-allowed;
}
.start {
background: #26be67;
}
.left {
color: #0066ff;
font-size: 18px;
font-weight: bold;
padding-top: 20px;
}
.left > div {
text-align: center;
margin: 10px 0;
}
.left .circle {
display: inline-block;
width: 15px;
height: 15px;
background: #00cc00;
border-radius: 15px;
margin: 0 20px;
}
.circle1 {
background: red !important;
}
</style>
