techtron/pages/weitiandi/bluetooth/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 class="prop-item-auto">
		  
        <view class="prop-title-auto"><view>Bluetooth settings:</view> <view style="font-size: 9px;">{{i18('连接自动充电')}}</view></view>
        <view class="prop-value">
			<u-switch style="margin-left: 100px;border-color: aliceblue;" v-model="value" asyncChange activeColor="#57B03D" inactiveColor="#080808" :activeValue="0" :inactiveValue="1"  @change="setAutoCharge"></u-switch>
          <!-- <view :style="item.style" class="value-tag" @click=" setAutoCharge(item.value)" v-for="item in autoCharge">
            {{ i18(item.title) }}
          </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, reset, restart,parseDataObj} from "@/utils/weitiandi/device/device.js";
// #ifdef APP
import ecUI from '@/utils/ecUI.js'
import ecBLE from '@/utils/ecBLE/ecBLE.js'
// #endif
// #ifdef MP
const ecUI = require('@/utils/ecUI.js')
const ecBLE = require('@/utils/ecBLE/ecBLE.js')
// #endif
import i18 from '@/utils/i18.js'
let ctx
let isCheckScroll = true
let isCheckRevHex = false
let isCheckSendHex = false
let sendData = ''
export default {
  data() {
    return {

      scriptTask:null,
      deviceId: "",
      ccid:"",
      visitTime: "",
      mainBoardInfo:{},
      autoCharge:[
        {
          title:"开启",
          value:1,
          style: ""
        },
        {
          title:"关闭",
          value:2,
          style: ""
        }],
      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: ''
      },
	  value:0

    }

  },
  onUnload (){
    this.closeSocket();
  },
  computed: {
    imgUrl: function () {
      return getApp().globalData.config.imgUrl;
    }
  },
  onLoad(opt) {
    this.deviceId = opt.id;
    this.ccid = opt.ccid;
    this.checkAutoCharge();
    this.buletooth();

  },
  onShow(){
    uni.setNavigationBarTitle({
      title: this.$t('page.setting')
    })
  },
  methods: {
    i18(text){
      return i18(text)
    },
    checkAutoCharge(){
       let autoCharge = this.getAutoChargeValue();
       this.setAutoCharge(autoCharge,true);
    },
    getAutoChargeValue(){
      let autoCharge = uni.getStorageSync("autoCharge");
      if(!autoCharge ){
        autoCharge = 0;
      }
      return autoCharge;
    },
    setAutoCharge(value,tip){
		console.log("value>>>>"+value)
		this.value=value
    //   for (let i = 0; i < this.autoCharge.length; i++) {
    //     let obj = this.autoCharge[i];
    //     if(obj.value == value){
    //       // obj.style = ";  background: #57B03D;color:white";
		  // this.value=0
    //     }else{
    //       // obj.style = ";  background: rgb(227, 242, 245);color: #000000;"
		  // this.value=1
    //     }
    //     if(obj.text ==i18('自定义')){
    //       obj.style +=";width:100px;"
    //     }
    //   }
      uni.setStorageSync("autoCharge",value);
      if(!tip){
        this.$modal.showToast("设置成功")
      }
    },
    closeSocket(){
      ecBLE.onBLEConnectionStateChange(() => {})
      ecBLE.onBLECharacteristicValueChange(() => {})
    },
    recon(){
      let self = this;
      ecUI.showLoading('设备连接中')
      let blueid = uni.getStorageSync('blueid');
      ecBLE.onBLEConnectionStateChange(res => {
        ecUI.hideLoading()
        if (res.ok) {
          self.buletooth();
        } else {
          uni.removeStorageSync('blueid');
          ecUI.showModal(
              '提示',
              '连接失败,errCode=' + res.errCode + ',errMsg=' + res.errMsg
          )
        }
      })
      ecBLE.createBLEConnection(blueid);
    },
    buletooth(){
      let self = this;
      ctx = this
      isCheckScroll = true
      isCheckRevHex = false
      isCheckSendHex = false
      sendData = ''

      //on disconnect
      ecBLE.onBLEConnectionStateChange(() => {
        uni.showModal({
          title: '提示',
          content: '蓝牙断开连接',
          confirmText:"点击重连",
          showCancel:false,
          success: function (res) {
            if (res.confirm) {
              // self.recon();
              uni.reLaunch({
                url: '/pages/bluetooth/index/index'
              });
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      })
      //receive data
      ecBLE.onBLECharacteristicValueChange((str, strHex) => {
        isCheckRevHex = true;
        let data =
            (isCheckRevHex ? strHex.replace(/[0-9a-fA-F]{2}/g, ' $&') : str)
        // console.log(data)
        self.$modal.closeLoading();
        console.log("settting:"+data);
        //AA 67 0D 05 00 00 00 00 00 00 00 00 00 25 E2 00 80
        data = parseDataObj(data);
        self.messageCallback(data);
      })
      self.sendMainboardCmd();
    },
    messageCallback(data){
        let self = this;
        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));
    },
    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.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(currenValue).then(res => {
        this.$modal.showToast("保存成功");
          setTimeout(function(){
            self.sendMainboardCmd();
          },1000)
      })
    },
    sendMainboardCmd() {
      // let str = "AA 60 21 01 08 F4 01 E7 03 00 D0 20 07 09 05 16 08 00 00 00 05 80 0C 00 00 FC 0D 0C 0F 12 08 07 08 07 08 07 80";
      // let data = parseDataObj(str);
      // this.messageCallback(data);
      this.$modal.loading("正在获取配置信息");
      sendMainboardCmd().then(res => {
      })
    },
    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().then(res => {
        this.$modal.loading("正在重置，请稍等...");
        setTimeout(function(){
          self.sendMainboardCmd();
        },5000)
      })
      setTimeout(function (){
        self.$modal.loading("正在重置，请稍等...");
      },1000);
    },
    async restartMainboard() {
      let deviceId = this.deviceId;
      this.$modal.loading("正在重置，请稍等...");
      // 重启充电桩
      let self = this;
      restart().then(res => {
        this.$modal.loading("正在重置，请稍等...");
        setTimeout(function(){
          self.sendMainboardCmd();
        },5000)
      })
      setTimeout(function (){
        self.$modal.loading("正在重置，请稍等...");
      },1000);
    }
  }
}
</script>

<style>

.container {
  position: absolute;
  inset: 0;
  left:0px;
  top: 0px;
  right: 0px;
  bottom:0px;
  background-image: url('../../../static/images/new/starts/bg2.jpg');
  background-size: cover;
  background-repeat: no-repeat;;
}

.prop-item {
  padding: 2vh;
}
.prop-item-auto{
	padding: 2vh;
	display: flex;
}

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

.prop-title {
  color: white;
  font-weight: bold;
  margin-bottom: 2.5vh;
}
.prop-title-auto {
	display: grid;
	justify-items: start;
  color: white;
  font-weight: bold;
  margin-bottom: 2.5vh;
}

.value-tag {
  background: rgb(227, 242, 245);
  color: #000000;
  width: 15vw;
  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: aliceblue;
}

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