<template>
  <div id="pageOne" v-cloak>
    <div class="header" v-show="false">
      <!-- <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/lv0.png"
        v-if="list.state == 0 && list.flow == 0"
      />
      <img
        src=" ./../../../static/img/ZhuangtaiJianKong/lv30.png"
        v-if="list.state == 0 && list.openLevel <= 35.00 && list.flow != 0"
      />
      <img
        src=" ./../../../static/img/ZhuangtaiJianKong/lv50.png"
        v-if="list.state == 0 && 35 < list.openLevel  &&  list.openLevel <= 55 && list.flow != 0"
      />
      <img
        src=" ./../../../static/img/ZhuangtaiJianKong/lv75.png"
        v-if="list.state == 0 && 55 < list.openLevel  && list.openLevel <= 75.00 && list.flow != 0"
      />
      <img
        src=" ./../../../static/img/ZhuangtaiJianKong/lv100.png"
        v-if="list.state == 0 && 75 < list.openLevel && list.openLevel <= 100.00 && list.flow != 0"
      />
      <div class="watermessage">
        <span class="waterMsg">
          水位：
          <span class="NumValue">{{list.waterLevel}}</span>
          {{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"
          style="background: rgba(0,0,0,.3);"
        >
          <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">
          开合度：
          <span class="NumValue">{{list.openLevel}}</span>
          {{list.openLevelUnit}}
        </span>
      </div>
      <div class="liuliang">
        <span class="waterMsg">
          流量：
          <span class="NumValue">{{list.flow}}</span>
          {{list.flowUnit}}
        </span>
      </div>
      <div class="bengji" v-if="list.stateDetail">
        <div class="waterMsg bjbox">
          泵机状态：
          <span
            :class="{openstate:list.state == 0,closestate:list.state == 1}"
          >{{list.stateZn}}</span>
        </div>
        <div class="waterMsg bjbox">
          A相电压/电流 ：
          <span class="NumValue valueLength">{{list.stateDetail.voltage1}}</span>
          V&nbsp;&nbsp;&nbsp;&nbsp;
          <span
            class="NumValue valueLength"
          >{{list.stateDetail.electricity1}}</span>
          A
        </div>
        <div class="waterMsg bjbox">
          B相电压/电流：
          <span class="NumValue valueLength">{{list.stateDetail.voltage2}}</span>
          V&nbsp;&nbsp;&nbsp;&nbsp;
          <span
            class="NumValue valueLength"
          >{{list.stateDetail.electricity2}}</span>
          A
        </div>
        <div class="waterMsg bjbox">
          C相电压/电流：
          <span class="NumValue valueLength">{{list.stateDetail.voltage3}}</span>
          V&nbsp;&nbsp;&nbsp;&nbsp;
          <span
            class="NumValue valueLength"
          >{{list.stateDetail.electricity3}}</span>
          A
        </div>
      </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 style="color: rgb(0,164,255);">{{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">
              <span class="NumValue">{{item1.value}}</span>
              {{item1.unit}}
            </span>
          </div>
        </div>
      </div>
      <div class="right">
        <h2>
          手动
          <span>（正常）</span>
        </h2>
        <div>
          <span class="confirmbtn">确认报警</span>
        </div>
        <div>
          <span
            class="togglebtn"
            style="background:rgb(10,184,210)"
            v-show="list.automatic == 1"
            @click="controlBj(2)"
          >切手动</span>
          <span class="togglebtn backblack" v-show="list.automatic == 0">切手动</span>
          <span
            class="togglebtn"
            style="background:rgb(10,114,210)"
            v-show="list.manual == 1"
            @click="controlBj(3)"
          >切自动</span>
          <span class="togglebtn backblack" v-show="list.manual == 0">切自动</span>
        </div>
        <div>
          <span class="togglebtn start" @click="controlBj(0)" v-if="list.state == 1">启动水泵</span>
          <span class="togglebtn start backblack" v-if="list.state == 0">启动水泵</span>
          <span class="togglebtn stop" @click="controlBj(1)" v-if="list.state == 0">关闭水泵</span>
          <span class="togglebtn stop backblack" v-if="list.state == 1">关闭水泵</span>
        </div>
      </div>
    </div>
    <div id="myVideo">
      <iframe
        id="videobox"
        src="./../../../static/video/video.html"
        allowfullscreen
        autoplay="autoplay"
      ></iframe>
    </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: "",
      OldValue: "",
      list: {},
      waterLevel: 0,
      icount: "",
      loading: ""
    };
  },
  mounted() {
    //   this.getdata()
    //   let _this = this
    //   this.icount = setInterval(function () {
    //     _this.getdata()
    //   }, 2000)
    this.startWS();
  },
  methods: {
    startWS() {
      let _this = this;
      // let ws = new WebSocket('ws://192.168.30.205:8300/websocket');
      let ws = new WebSocket("ws://139.155.49.237:8300/websocket");
      ws.onopen = function(msg) {
        console.log("WebSocket opened!");
      };
      ws.onmessage = function(message) {
        _this.list = JSON.parse(message.data);
        _this.value = _this.list.openLevel;
        _this.OldValue = _this.value;
        //   console.log(_this.list)
      };
      ws.onerror = function(error) {
        console.log("Error: " + error.name + error.number);
      };
      ws.onclose = function() {
        console.log("WebSocket closed!");
      };
    },
    //开启遮罩
    openFullScreen2() {
      this.loading = this.$loading({
        lock: true,
        text: "远程控制指令发送中，请稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    closeFullScreen2() {
      this.loading.close();
    },
    getdata() {
      // let url1 = '/ZhuangTaiJianKong/telemetry/listTelemetry'
      //    this.$http.get(
      //   url1
      // ).then(res => {
      //   this.list = res.data.data
      // })
    },
    controlBj(i) {
      this.openFullScreen2();
      // clearInterval(this.icount);

      let params = {
        data: {
          stationid: 1,
          pumpid: 1,
          deviceid: 1,
          state: i
        }
      };
      let url = "/ZhuangTaiJianKong/telesignal/controlPump";
      this.$http
        .post(url, params)
        .then(res => {
          this.closeFullScreen2();
          //   this.startIcount()
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(res => {
          this.closeFullScreen2();
          //   this.startIcount()
          this.$message({
            message: "网络超时，请刷新后再次请求",
            type: "error"
          });
        });
    },
    selControl(val) {
      this.openFullScreen2();
      // clearInterval(this.icount);
      let params = {
        data: {
          stationid: 1,
          pumpid: 1,
          deviceid: 1,
          state: 4,
          openValue: val
        }
      };
      let url = "/ZhuangTaiJianKong/telesignal/controlOpenValue";
      this.$http
        .post(url, params)
        .then(res => {
          this.closeFullScreen2();
          //   this.startIcount()
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
          // 操作成功后保存此次的状态 zhangqy
          this.OldValue = this.value;
        })
        .catch(res => {
          this.closeFullScreen2();
          //   this.startIcount()
          this.$message({
            message: "网络超时，请刷新后再次请求",
            type: "error"
          });
          // 操作失败后还原到记录的OldValue状态 zhangqy
          this.value = this.OldValue;
        });
    }
  }
  // destroyed: function() {
  //   console.log("我已经离开了！");
  //   clearInterval(this.icount);
  // }
};
</script>
<style>
[v-cloak] {
  display: none;
}

#pageOne {
  height: 100%;
  min-width: 1200px;
  position: relative;
}

#myVideo {
  position: absolute;
  width: 300px;
  height: 150px;
  top: 88px;
  right: 50px;
  box-sizing: border-box;
}

#videobox {
  width: 100%;
  height: 100%;
  border: none;
}

.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: 0px;
  /* border: 1px solid red; */
}

.openstate {
  color: #26be67;
}

.closestate {
  color: red;
}

.picbox {
  height: calc(100% - 220px);
  /* 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: 20%;
  width: 92px;
  text-align: center;
}

.waterposition {
  position: absolute;
  /* border: 1px solid red; */
  top: 48%;
  left: 20%;
  width: 220px;
  height: 20px;
  -webkit-transform: rotate(90deg);
  transform: rotate(-90deg);
  text-align: center;
}

.openpersent {
  position: absolute;
  top: 29%;
  left: 48%;
  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: 29.3%;
  left: 54%;
}

.liuliang {
  position: absolute;
  top: 45%;
  left: 76%;
}

.bengji {
  position: absolute;
  top: 69%;
  left: 42%;
}

.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 {
  white-space: nowrap;
  margin: 0 !important;
  display: block;
}

.footer {
  height: 200px;
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}

.left {
  width: 12%;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(9, 133, 222);
  box-shadow: inset 0px 0px 15px rgb(9, 133, 222);
}

.middle {
  width: 72%;
  display: flex;
  justify-content: space-between;
}

.middlebox {
  width: 18.9%;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  overflow: hidden;
  border: 1px solid rgb(9, 133, 222);
  box-shadow: inset 0px 0px 15px rgb(9, 133, 222);
  font-weight: 300;
}

.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%;
  height: 22px;
  line-height: 22px;
}

.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;
  padding-left: 10px;
  font-size: 14px;
}

.value {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  font-size: 14px;
}

.NumValue {
  font-family: "LCD";
  font-size: 18px;
}

.right {
  width: 14%;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgb(9, 133, 222);
  box-shadow: inset 0px 0px 15px rgb(9, 133, 222);
}

h2 {
  color: rgb(0, 164, 255);
  font-size: 21px;
  font-weight: bold;
  padding: 0 10px;
  margin: 15px 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: 180px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: rgb(217, 41, 41);
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

.togglebtn {
  height: 33px;
  line-height: 33px;
  display: inline-block;
  width: 88px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.backblack {
  background: #999 !important;
  cursor: not-allowed;
}

.start {
  background: rgb(34, 178, 82);
}

.stop {
  background: rgb(217, 41, 41);
}

.left {
  color: rgb(0, 164, 255);
  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;
}
.valueLength {
  display: inline-block;
  width: 60px;
}
</style>