techtron/pages/weitiandi/device/setting.vue

<template>
  <view class="container">
    <view class="setting">

      <view class="prop-item">
        <view class="prop-title">充电电流</view>
        <view class="prop-value">
          <view :style="item.style" class="value-tag" @click="checkItem(current,item)" v-for="item in current.items">
            {{ item.text }}
          </view>
        </view>
        <view class="prop-input" v-if="current.custom">
          <input v-model="current.customValue" class="input" placeholder="请输入电流"/>
          <view style="color: #0E9F9B">A</view>
        </view>
      </view>

    </view>


    <view class="bottom-area">

      <view class="btn" @click="confirm">确认</view>


      <view class="areas">
        <view class="areas-item" @click="sendMainboardCmd">
          <view class="areas-img">
            <image style="width: 50px;height: 50px" :src="imgUrl+'/seting/mainboard.png'"></image>

          </view>
          <view>
            <view>获取主板配置</view>
          </view>
        </view>

        <view class="areas-item" @click="resetMainboard">
          <view class="areas-img">
            <image style="width: 50px;height: 50px" :src="imgUrl+'/seting/reset.png'"></image>
          </view>
          <view>
            <view >恢复默认配置</view>
          </view>
        </view>

        <view class="areas-item" @click="restartMainboard">
          <view class="areas-img">
            <image style="width: 50px;height: 50px" :src="imgUrl+'/seting/restart.png'"></image>
          </view>
          <view>
            <view>重启充电桩</view>
          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import {setCurrent, getMainbordConfig,sendMainboardCmd, getDeviceInfo, reset, restart} from '@/api/device/current.js'
import websocket from '@/utils/websocket'
export default {
  data() {
    return {

      scriptTask:null,
      deviceId: "",
      ccid:"",
      visitTime: "",
      mainBoardInfo:{},
      current: {
        items: [
          {text: "8A", style: "", value: 8},
          {text: "10A", style: "", value: 10},
          {text: "16A", style: "", value: 16},
          {text: "32A", style: "", value: 32},
          {text: "自定义", style: "", value: -1}
        ],
        custom: false,
        customValue: ''
      }

    }

  },
  onUnload (){
    this.closeSocket();
  },
  computed: {
    imgUrl: function () {
      return getApp().globalData.config.imgUrl;
    }
  },
  onLoad(opt) {
    this.deviceId = opt.id;
    this.ccid = opt.ccid;
    this.sendMainboardCmd();
  },
  methods: {
    closeSocket(){
      this.scriptTask.close();
    },
    initSocket(key){
      let self = this;
      let socketUrl =  getApp().globalData.config.socketUrl
      this.scriptTask = websocket({
        url:"/"+key+"/",
      });
      let scriptTask = this.scriptTask;
      scriptTask.onOpen(function (res) {
        console.log('WebSocket连接已打开！');
        self.connected = true;
      });
      scriptTask.onError(function (res) {
        self.connected = false;
        console.log(res);
      });
      scriptTask.onMessage(function (res) {
        let data = JSON.parse(res.data);
        let type = data.type;
        let real_data = data.real_data;
        if(type == 103){
          self.portDetail = real_data;
          self.$modal.closeLoading();
        }
        if(type == 116){
          self.$modal.closeLoading();
        }
        if(type == 96){
          self.mainBoardInfo = real_data;
          self.formatMainboardData();
          self.$modal.closeLoading();
        }
        console.log('收到服务器内容：' + JSON.stringify(data));
      });
      scriptTask.onClose(function (res) {
        self.connected = true;
        console.log('WebSocket 已关闭！');
      });
    },
    formatMainboardData(){
      let mainBoardInfo = this.mainBoardInfo;
      let max_current = mainBoardInfo.max_current;
      max_current = max_current/100;
      this.setCurrent(max_current);
    },
    setCurrent(max_current){
      this.current.currenValue = max_current;
      let items = this.current.items;
      let len = items.length;
      let hasValue = false;
      this.current.custom = false;
      for (let i = 0; i < len; i++) {
        let dian = items[i];
        if(dian.value == max_current){
          hasValue = true;
          dian.style = ";  background: #0E9F9B;color:white"
        }else{
          dian.style = ";  background: rgb(227, 242, 245);color: #0E9F9B;"
        }
      }
      if(!hasValue){
        this.current.custom = true;
        items[len-1].style = ";  background: #0E9F9B;color:white"
      }
      this.current.customValue = max_current;
    },
    async checkItem(obj, item) {
      let items = obj.items;
      let len = items.length;
      for (let i = 0; i < len; i++) {
        let dian = items[i];
        dian.style = ";  background: rgb(227, 242, 245);color: #0E9F9B;"
      }
      item.style = ";  background: #0E9F9B;color:white"
      if (item.value == -1) {
        obj.custom = true;
        obj.customValue = 0;
      } else {
        obj.custom = false;
        obj.customValue = item.value;
      }
    },
    async confirm() {
      let currenValue = this.current.customValue;
      currenValue = currenValue *100;
      let deviceId = this.deviceId;
      // 发送到后端
      let self = this;
      this.$modal.loading("保存中。。");
      setCurrent({deviceId: deviceId,ccid:this.ccid},currenValue).then(res => {
          setTimeout(function(){
            self.sendMainboardCmd();
          },1000)
      })
    },
    sendMainboardCmd() {
      this.$modal.loading("正在获取状态，请稍等...");
      let deviceId = this.deviceId;
      // 获取主板配置
      sendMainboardCmd({deviceId: deviceId,ccid:this.ccid}).then(res => {
        this.visitTime = res.msg;
        if(!this.visitTime){
          this.$modal.msg("请重新进入页面");
          return;
        }
        if(!this.scriptTask){
          this.initSocket(this.deviceId)
        }
      })
    },
    getMainboardConfig(){
      this.startTimer();
    },
    startTimer(){
      let self = this;
      this.timer = setTimeout(function (){
        getMainbordConfig({deviceId: self.deviceId,ccid:this.ccid},self.visitTime).then(res=>{
          let data = res.data;
          if(data != null){
            self.mainBoardInfo = data;
            self.formatMainboardData();
            self.$modal.closeLoading();
          }else{
            self.startTimer();
          }
        });
      },1000);
    },
    resetMainboard() {
      let deviceId = this.deviceId;
      // 恢复默认配置
      let self = this;
      this.$modal.loading("正在重置，请稍等...");
      reset({deviceId:deviceId,ccid:this.ccid}).then(res => {
        setTimeout(function(){
          self.sendMainboardCmd();
        },1000)
      })
    },
    async restartMainboard() {
      let deviceId = this.deviceId;
      this.$modal.loading("正在重启中，请稍等...");
      // 重启充电桩
      let self = this;
      restart({deviceId:deviceId,ccid:this.ccid}).then(res => {
        setTimeout(function(){
          self.sendMainboardCmd();
        },1000)
      })
    }
  }
}
</script>

<style>

.container {
  position: absolute;
  inset: 0;
  background: rgb(249, 252, 255);
}

.prop-item {
  padding: 2vh;
}

.prop-value {
  display: flex;
  flex-direction: row;
}

.prop-title {
  color: #252525;
  font-weight: bold;
  margin-bottom: 2.5vh;
}

.value-tag {
  background: rgb(227, 242, 245);
  color: #0E9F9B;
  width: 14vw;
  height: 4vh;
  line-height: 4vh;
  border-radius: 3vw;
  text-align: center;
  margin: 0 1vw;
  font-weight: bold;
  font-size: 12px;
}

.prop-input {
  display: flex;
  flex-direction: row;
  line-height: 4vh;
  margin: 2vh 0;
}

.input {
  background: rgb(227, 242, 245);
  border-radius: 30px;
  font-size: 12px;
  height: 4vh;
  padding: 0 2vw;
  margin: 0 1vw;
  width: 90%;
}

.bottom-area {
  position: absolute;
  bottom: 0px;
  height: 24vh;
  left: 0;
  right: 0;
}

.btn {
  background: #0E9F9B;
  text-align: center;
  color: white;
  height: 6vh;
  line-height: 6vh;
  margin: 0 5vh;
  border-radius: 1vh;
  border-style: none;
}

.btn1 {
  background: #f9fcff;
  /*  text-align: center;
    color: white;
    height:6vh;
    line-height: 6vh;
    margin:0 5vh;
    border-radius: 1vh; */
  border-color: transparent;
}

.areas {
  display: flex;
  flex-direction: row;
  text-align: center;
  margin-top: 3vh
}

.areas-item {
  width: 33%;
}

.areas-img {
  text-align: center;
}
</style>