techtron/pages/weitiandi/device/setting.vue

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

      <view class="prop-item">
        <view class="prop-title">{{i18('充电电流')}}</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" style="width: 100%" v-if="current.custom">
         <view style="width: 80%">
           <u-slider min="8" max="32" step="2" v-model="current.customValue"></u-slider>
         </view>
          <view style="color: #57B03D">{{current.customValue}}A</view>
        </view>
      </view>

    </view>


    <view class="bottom-area">

	<view style="text-align: center;width: 100%;">
      <view class="btn" @click="confirm">{{i18('确认')}}</view>
	</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>{{i18('获取主板配置')}}</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 >{{i18('恢复默认配置')}}</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>{{i18('重启充电桩')}}</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'
import i18 from '@/utils/i18.js'
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: i18("自定义"), style: "", value: -1}
        ],
        custom: false,
        customValue: 8
      }

    }

  },
  onUnload (){
    this.closeSocket();
  },
  computed: {
    imgUrl: function () {
      return getApp().globalData.config.imgUrl;
    }
  },
  onLoad(opt) {
    this.deviceId = opt.id;
    this.ccid = opt.ccid;
    this.sendMainboardCmd();
  },
  methods: {
    i18(text){
      return i18(text)
    },
    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: #57B03D;color:white"
        }else{
          dian.style = ";  background: rgb(227, 242, 245);color: #000000;"
        }
        if(dian.text ==i18('自定义')){
          dian.style +=";width:100px;"
        }
      }
      if(!hasValue){
        this.current.custom = true;
        items[len-1].style = ";  background: #57B03D;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: #000000;"
      }
      item.style = ";  background: #57B03D;color:white;"
      if(item.text ==i18('自定义')){
        item.style +=";width:100px;"
      }
      if (item.value == -1) {
        obj.custom = true;
        obj.customValue = 8;
      } 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 => {
        this.$modal.showToast("保存成功");
          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 => {
        this.$modal.loading("正在重置，请稍等...");
        setTimeout(function(){
          self.sendMainboardCmd();
        },5000)
      })
    },
    async restartMainboard() {
      let deviceId = this.deviceId;
      this.$modal.loading("正在重置中，请稍等...");
      // 重启充电桩
      let self = this;
      restart({deviceId:deviceId,ccid:this.ccid}).then(res => {
        this.$modal.loading("正在重置中，请稍等...");
        setTimeout(function(){
          self.sendMainboardCmd();
        },5000)
      })
    }
  }
}
</script>

<style>

.container {
	background-image: url('../../../static/images/new/starts/bg1.jpg');
	background-size: cover;
	background-repeat: no-repeat;
  position: absolute;
  inset: 0;
  /* background: rgb(249, 252, 255); */
}

.prop-item {
  padding: 2vh;
}

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

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

.value-tag {
  background: rgb(227, 242, 245);
  color: #000000;
  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 {
	width: 40vw;
  background: #57B03D;
  color: white;
  height: 6vh;
  line-height: 6vh;
  margin: 0 30vw;
  border-radius: 20vh;
  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%;
  color: #e6e6e6;
}

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