<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>