techtron/pages/weitiandi/bluetooth/index.vue

<template>
  <view class="container">
    <!-- <view class="dboxs dport">
      <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/port.png"/>
        <view class="dboxtitle-text"> {{ i18('设备端口') }}</view>

      </view>


      <view class="dportitems">
        <view class="dportitem " v-for="item in curPort" @click="selectPort(item.id);">
          <p class="dpropitem-title "> {{ i18(item.text )}}</p>
          <view style="position: absolute;right: 0px;z-index: 9999" v-if="item.id == choosePort">
            <image class="dportitem-img" style="width: 15px;height: 15px" src="/static/images/new/start/choose.png"/>
          </view>
          <view class="dpropitem-block dportitem-block-2" v-if="item.status == 2">
            <image class="dportitem-img" src="/static/images/new/start/using.png"/>
            <view class="dpropitem-status">{{ i18('充电中') }}</view>
          </view>

          <view class="dpropitem-block dportitem-block-1" v-if="item.status == 1 || item.status == 7">
            <image class="dportitem-img" src="/static/images/new/start/free.png"/>
            <view class="dpropitem-status">{{ i18('空闲中') }}</view>
          </view>

          <view class="dpropitem-block dportitem-block-3" style="background: rgb(247,238,240);color:#FF6868" v-if="item.status == 3">
            <image class="dportitem-img" src="/static/images/new/start/ban.png"/>
            <view class="dpropitem-status">{{ i18('禁用中') }}</view>
          </view>

          <view class="dpropitem-block dportitem-block-3" style="background: rgb(248,244,230);color:#FFAA00" v-if="item.status == 4">
            <image class="dportitem-img" src="/static/images/new/start/bad.png"/>
            <view class="dpropitem-status">{{ i18('故障中') }}</view>
          </view>


          <view class="dpropitem-block dportitem-block-3" style=";" v-if="item.status == 5">
            <image class="dportitem-img" src="/static/images/new/start/lianjie.png"/>
            <view class="dpropitem-status">{{ i18('已连接') }}</view>
          </view>

          <view class="dpropitem-block dportitem-block-3" style="background: rgb(239,235,254);color:#A552FF" v-if="item.status == 6">
            <image class="dportitem-img" src="/static/images/new/start/yuyue.png"/>
            <view class="dpropitem-status">{{ i18('已预约') }}</view>
          </view>


        </view>


      </view>
    </view>

    <view class="dboxs dport" style="height: 100px" @click="planCharge">
      <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/clock.png"/>
        <view class="dboxtitle-text">{{ i18('预约充电') }}</view>
      </view>

      <view class="port-text" v-if="planInfo != null"  style="left:40px;top:48px;font-size: 14px">
        {{ i18('已预约') }}    <view  class="port-text" style="top:30px;">
        <text style="font-size: 10px">{{ planInfo.runTime }}</text>
      </view>
      </view>
      <view class="port-text" style="left:40px;top:55px;font-size: 14px" v-else>
        {{ i18('点击预约充电') }}
      </view>
      <view class="port-num" style="left:40px;top:70px;font-size: 12px" v-if="portDetail.portStatus == 6">
        {{ i18('可点击取消预约') }}
      </view>
      <view class="port-icon"  v-if="portDetail.portStatus !=6" style="width: 50px;height: 50px;right:10px;top:28%">
        <image class="btn-image" src="/static/images/new/start/clock.png" >
        </image>
      </view>
      <view class="port-icon" v-if="portDetail.portStatus == 6" style="width: 50px;height: 50px;right:10px;top:28%">
        <image class="btn-image"  src="/static/images/new/start/del.png" >
        </image>
      </view>
    </view>
    <u-picker @cancel="showPort=false" @confirm="confirmPort" :show="showPort" :columns="portList" keyName="text"></u-picker>


    <view class="dboxs dport" style="height: 200px">
      <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/oper.png"/>
        <view class="dboxtitle-text"> {{ i18('设备操作') }}</view>
      </view>
      <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
        <image class="btn-image" src="/static/images/new/start/stop.png" >
        </image>
        <view>{{ i18('停止充电') }}</view>
      </view>

      <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus != 2">
        <image class="btn-image"  src="/static/images/new/start/using.png" >
        </image>
        <view>{{ i18('立即充电') }}</view>
      </view>
      <view class="control-btn" @click="getInfo">
        <image class="btn-image"  src="/static/images/new/start/get.png" >
        </image>
        <view>{{ i18('获取状态') }}</view>
      </view>
      <view class="control-btn" @click="toSet">
        <image class="btn-image" src="/static/images/new/start/oper.png" >
        </image>
        <view>{{ i18('设备控制') }}</view>
      </view>

      <view class="control-btn" @click="goBack">
        <image class="btn-image" src="/static/images/new/start/back.png" >
        </image>
        <view>{{ i18('查看状态') }}</view>
      </view>

      <view class="control-btn" @click="restart">
        <image class="btn-image" src="/static/images/new/start/reset.png" >
        </image>
        <view>{{ i18('重置设备') }}</view>
      </view> -->
<view class="dboxs dport">
			<view class="dboxtitle">
				<image class="portimg" src="../../../static/images/new/starts/mine/symbol (1).png" />
				<view class="dboxtitle-text"> {{ i18('设备端口') }}</view>
			</view>
			<view class="dportitems">
				<view class="dportitem " v-for="item in curPort" @click="selectPort(item.id);">
					<p class="dpropitem-title "> {{ item.text }}</p>
					<view style="position: absolute;right: 0px;z-index: 9999" v-if="item.id == choosePort">
						<image class="dportitem-img" style="width: 15px;height: 15px"
							src="/static/images/new/start/choose.png" />
					</view>
					<view class="dpropitem-block dportitem-block-2" v-if="item.status == 2">
						<image class="dportitem-img" src="/static/images/new/starts/charnging.png" />
						<view class="dpropitem-status">{{ i18('充电中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-1" v-if="item.status == 1 || item.status == 7">
						<image class="dportitem-img" src="/static/images/new/starts/free.png" />
						<view class="dpropitem-status">{{ i18('空闲中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(247,238,240);color:#FF6868"
						v-if="item.status == 3">
						<image class="dportitem-img" src="/static/images/new/starts/ban.png" />
						<view class="dpropitem-status">{{ i18('禁用中') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(248,244,230);color:#FFAA00"
						v-if="item.status == 4">
						<image class="dportitem-img" src="/static/images/new/starts/bad.png" />
						<view class="dpropitem-status">{{ i18('故障中') }}</view>
					</view>


					<view class="dpropitem-block dportitem-block-3" style=";" v-if="item.status == 5">
						<image class="dportitem-img" src="/static/images/new/port.png" />
						<view class="dpropitem-status">{{ i18('已连接') }}</view>
					</view>

					<view class="dpropitem-block dportitem-block-3" style="background: rgb(239,235,254);color:#A552FF"
						v-if="item.status == 6">
						<image class="dportitem-img" src="/static/images/new/start/yuyue.png" />
						<view class="dpropitem-status">{{ i18('已预约') }}</view>
					</view>
				</view>


			</view>
		</view>
		<view class="dboxs dport" style="height: 100px" @click="planCharge">
			<view class="dboxtitle">
				<image class="portimg" src="../../../static/images/new/starts/index/yuyue.png" />
				<view class="dboxtitle-text">{{ i18('预约充电') }}</view>
			</view>

			<view class="port-text" v-if="planInfo != null" style="left:40px;top:48px;font-size: 14px">
				{{ i18('已预约') }} {{planInfo.runTime}}
			</view>
			<view class="port-text" style="left:40px;top:55px;font-size: 14px" v-else>
				{{ i18('点击预约充电') }}
			</view>
			<view class="port-num" style="left:40px;top:70px;font-size: 12px" v-if="planInfo != null">
				{{ i18('可点击取消预约') }}
			</view>
			<!-- <view class="port-icon" v-if="planInfo == null" style="width: 50px;height: 50px;right:10px;top:28%">
				<image class="btn-image" src="../../../static/images/new/starts/index/yuyue.png">
				</image>
			</view>
			<view class="port-icon" v-if="planInfo != null" style="width: 50px;height: 50px;right:10px;top:28%">
				<image class="btn-image" src="/static/images/new/start/del.png">
				</image>
			</view> -->
		</view>
		<view class="dboxs dport" style="height: 200px">
			<view class="dboxtitle">
				<image class="portimg" src="/static/images/new/starts/mine/list.png" />
				<view class="dboxtitle-text"> {{ i18('设备操作') }}</view>
			</view>
			<view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
				<image class="btn-image" src="/static/images/new/start/stop.png">
				</image>
				<view>{{ i18('停止充电') }}</view>
			</view>

			<view class="control-btn" @click="trigger()" v-if="portDetail.portStatus != 2">
				<image class="btn-image" src="/static/images/new/starts/index/using.png">
				</image>
				<view>{{ i18('立即充电') }}</view>
			</view>
			<view class="control-btn" @click="getInfo">
				<image class="btn-image" src="../../../static/images/new/starts/index/icon_pull.png">
				</image>
				<view>{{ i18('获取状态') }}</view>
			</view>
			<view class="control-btn" @click="toSet">
				<image class="btn-image" src="../../../static/images/new/starts/index/list.png">
				</image>
				<view>{{ i18('设备控制') }}</view>
			</view>

			<!-- <view class="control-btn" @click="goBack">
				<image class="btn-image" src="../../../static/images/new/starts/index/return.png">
				</image>
				<view>{{ i18('查看状态') }}</view>
			</view> -->
			<view class="control-btn" @click="restart">
				<image class="btn-image" src="/static/images/new/starts/index/return.png">
				</image>
				<view>{{ i18('重置设备') }}</view>
			</view>
      <!--      <view class="control-btn">-->
      <!--        <image class="btn-image" :src="imgUrl+'/control/record.png'" >-->
      <!--        </image>-->
      <!--        <view>使用记录</view>-->
      <!--      </view>-->
    </view>
    <u-picker ref="uPicker" @cancel="cancelPicker" @confirm="confirm" :show="showPlan" :columns="planCols" @change="changeHandler"></u-picker>
    <u-modal :show="showPwd" :confirmText="i18('确认')" @confirm="inputPwd" @cancel="cancel" :showCancelButton="true"  title="修改密码" >
      <view class="slot-content">
        <view>
          <u--input
              type="number"
              :placeholder="i18('原密码')"
              border="surround"
              v-model="oldPwd"
          ></u--input>
        </view>

        <view style="margin-top:5px">
          <u--input
              type="number"
              :placeholder="i18('6位数字新密码')"
              border="surround"
              v-model="pwd"
          ></u--input>
        </view>

      </view>
    </u-modal>
  </view>
</template>

<script>
import { restart,getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange,getPlanInfo,cancelPlan,parseDataObj,planCharge,getPwd,setPwd} 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 {
      oldPwd:"",
      pwd:"",
      showPwd:false,
      planCols:[ ],
      columnData:[],
      showPlan:false,
      deviceInfo:{},
      visitTime:"",
      timer:null,
      showPort:false,
      portDetail:{portStatus:0,POWER:0,voltage:0},
      statusTimer:"",
      connected:false,
      scriptTask:null,
      choosePort:1,
      portList:[[{port:1,text:"端口一"}]],
      planInfo:null,
      days:["","周一","周二","周三","周四","周五","周六","周日"],
      textRevData: '',
      picker:null,
      firstInit:false,
      hasRight:false,
      startAutoCharge:true,
      curPort:[]
    }
  },
  computed: {
    imgUrl() {
      return getApp().globalData.config.imgUrl;
    }
  },
  onLoad(opt) {
    this.deviceInfo.deviceId = opt.id;
    this.deviceInfo.ccid = opt.ccid;
    this.deviceInfo.qrcode = opt.qrcode;
    this.checkPassword();
  },
  onShow(){
    uni.setNavigationBarTitle({
      title: this.$t('page.control')
    })
    this.buletooth();

  },
  onUnload (){
    this.closeSocket();
  },
  methods: {
    restart(){
      let self = this;
      this.$modal.loading("正在重置，请稍等...");
      restart().then(res => {
        setTimeout(function(){
          self.getInfo();
        },5000)
      })
      setTimeout(function (){
        self.$modal.loading("正在重置，请稍等...");
      },1000);
    },
    i18(text){
      return i18(text)
    },
    selectPort(id){
      this.choosePort = id;
      console.log(this.choosePort)
      this.getInfo();
    },
    cancel(){
      this.showPwd = false;
    },
    modifyPwd(){
      this.showPwd = true;
    },
    inputPwd(){
      let rightPwd = uni.getStorageSync("pwd");
      if(!this.oldPwd){
        this.$modal.showToast("原密码不能为空");
        return;
      }
      if(rightPwd != this.oldPwd){
        this.$modal.showToast("原密码不对");
        return;
      }
      if(!this.pwd){
        this.$modal.showToast("密码不能为空");
      }else {
        setPwd(this.pwd);
        this.$modal.showToast("密码修改成功");
        this.goBack();
      }

    },
    confirm(e) {
      if(this.portDetail.portStatus == 7){
        this.$modal.showToast("当前无法预约。请再次插枪后操作");
        return;
      }
      let value = e.value;
      console.log('confirm', value)
      let day = value[0];
      let date = new Date();
      let nowDay = date.getDate();
      let hour = value[1]+"";
      hour = parseInt(hour,10);
      let min = value[2]+"";
      min = parseInt(min,10);
      let todayTotalMin = 0;
      let planDate = {min:min,hour:hour};
      let nowHour = date.getHours();
      let nowMin = date.getMinutes();
      let nowDate ={min:nowMin,hour:nowHour};
      if(i18("今日") == day){
        todayTotalMin = this.getGapMin(planDate,nowDate)
      }else {
        let nowHour = date.getHours();
        let min = date.getMinutes();
        let maxDate ={min:59,hour:23};
        todayTotalMin = this.getGapMin(maxDate,nowDate);
        let minDate = {min:0,hour:0};
        todayTotalMin +=this.getGapMin(planDate,minDate);
      }
      console.log(todayTotalMin);
      this.cancelPicker();
      if(todayTotalMin<=0 || todayTotalMin>1440){
        this.$modal.showToast("最大预约时间为24小时");
      }else{
        planCharge(this.choosePort,todayTotalMin).then(res=>{
          this.getInfo(true);
        });
      }
    },
    getGapMin(date1,date2){
      let min1 = date1.min;
      let hour1 = date1.hour;
      let min2 = date2.min;
      let hour2 = date2.hour;
      let total1 = min1+hour1*60;
      let total2 = min2+hour2*60;
      return total1-total2;
    },
    cancelPicker(e) {
      this.showPlan = false
    },
    changeHandler(e){
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      let day = e.value[0];
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      this.picker = picker;
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        if(day == i18("今日")){
          picker.setColumnValues(1, this.columnData[1])
        }else{
          picker.setColumnValues(1, this.columnData[0])
        }
      }
    },
    checkPassword(){
    },
    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) {
              uni.reLaunch({
                url: '/pages/bluetooth/index/index'
              });
              // self.recon()
            } 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("收到消息:"+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.getInfo();
    },
    messageCallback(data){
      let self = this;
      console.log(data);
      let type = data.type;
      let real_data = data.real_data;
      if(type == 103){
        self.portDetail = real_data
        self.portList = [[]];
        self.curPort = [];
        let port_first_status = self.portDetail["port_first_status"];
        let port_second_status = self.portDetail["port_second_status"]
        if(port_first_status){
          self.portList[0].push({port:1,text:i18("端口一")});
          self.curPort.push({
            text: i18("端口一"),
            status:port_first_status,
            id:1,
          })
        }
        if(port_second_status){
          self.portList[0].push({port:2,text:i18("端口二")});
          self.curPort.push({
            text:i18("端口二"),
            status:port_second_status,
            id:2
          })
        }
        let choosePort = self.choosePort
        if(choosePort == 1){
          self.portDetail.portStatus = port_first_status;
        }else if(choosePort == 2){
          self.portDetail.portStatus = port_second_status;
        }
        self.$modal.closeLoading();
      }
      if(type == 116){
        self.$modal.closeLoading();
        self.getInfo();
      }
      if(type == 113){
        self.$modal.closeLoading();
        self.getInfo();
      }
      if(type == 96){
      }
      self.$forceUpdate();
      console.log('收到服务器内容：' + JSON.stringify(data));
    },
    planCharge(){
      if(this.portDetail.portStatus == 6){
        this.$modal.confirm("确认取消预约？").then(res=>{
          this.cancelPlan();
        })
      }else{
        this.toPlan()
      }
    },
    sendBlueData(){
      ecBLE.writeBLECharacteristicValue(tempSendData, false)
    },
    cancelPlan(){
      cancelPlan(this.choosePort).then(res=>{
        this.$modal.msg("取消成功");
        this.getInfo(true);
      })
    },
    getPlanInfo(){
      getPlanInfo(this.deviceInfo.deviceId,this.choosePort).then(res=>{
        let data = res.data;
        if(data != null){
          let planType = data.planType;
          if(planType == 1){//单次预约
            let planInfo = {};
            planInfo.runTime = data.runTime;
            this.planInfo = planInfo;
            this.planInfo.id = data.id;
          }else{
            let planInfo = {};
            planInfo.runTime = data.runTime;
            let repeatDays = data.repeatDays;
            let days = repeatDays.split(",")
            let strs = "";
            for (let i = 0; i < days.length; i++) {
              if(strs.length>0){
                strs+=",";
              }
              strs +=this.days[days[i]];
            }
            this.planInfo = planInfo;
            this.planInfo.runTime = strs+" "+data.repeatTime;
            this.planInfo.id = data.id;
          }
        }
      })
    },
    confirmPort(e){
      let value = e.value[0]
      this.choosePort = value.port;
      this.showPort = false;
      this.getInfo()
    },
    initSocket(key){
      let self = this;
    },
    toSet(){
      // this.closeSocket();
      uni.navigateTo({
        url: '/pages/weitiandi/bluetooth/setting'
      });
    },
    toPlan(){
      let arr = [];

      let date = new Date();
      let min = date.getMinutes();
      let hour = date.getHours();
      let arr1 = [i18("今日"), i18("明日")];
      let arr2 = []
      let arr3 = [];
      let arr4 = [];
      for (let i = 0; i < hour; i++) {
        arr2.push(i)
      }
      this.columnData[0] = arr2;
      for (let i = hour+1; i < 24; i++) {
        arr3.push(i)
      }
      this.columnData[1] = arr3;
      for (let i = 0; i <= 59; i++) {
        arr4.push(i)
      }
      this.planCols = [arr1, arr3, arr4]
      this.showPlan = true;
    },
    trigger(){
      let portStatus = this.portDetail.portStatus;
      if(portStatus == 2){//需要停止充电
        this.$modal.confirm("需要停止充电么？").then(res=>{
          this.stopCharge();
        })
      }else{
        if(portStatus == 1){
          this.$modal.msg("请先将充电枪插入后再点击充电");
        }
        if(portStatus == 5){
          this.$modal.confirm("确认开始充电么？").then(res=>{
            this.startCharge();
          })
        }else {
          this.$modal.msg("端口无法开始充电");
        }

      }
    },
    getInfo(flag) {

      // let str = "AA 67 0D 01 00 00 00 00 00 00 00 00 00 25 E2 00 80";
      // let data = parseDataObj(str);
      // this.messageCallback(data);
      //
      //
      this.$modal.loading("正在获取状态，请稍等...");
      if(flag){
        setTimeout(function (){
          sendPortDetailCmd().then(res => {

          })
        },500)
      }else{
        sendPortDetailCmd().then(res => {

        })
      }

    },
    stopCharge(){
      let self = this;
      this.deviceInfo.port = this.choosePort;
      stopCharge(this.deviceInfo).then(()=>{
        self.$modal.loading("停止成功");
        setTimeout((()=>{
          self.getInfo();
        }),1000);
      })
    },
    startCharge(){
      let self = this;
      this.deviceInfo.port = this.choosePort;
      startCharge(this.deviceInfo).then(res=>{
        self.$modal.loading("启动成功");
        setTimeout((()=>{
          self.getInfo();
        }),1000);
      })
    },
    getPortInfo(){
      this.startPortDetailTimer();
    },
    startPortDetailTimer(){
      let self = this;
      this.timer = setTimeout(function (){
        getPortDetail(self.deviceInfo,self.visitTime).then(res=>{
          let data = res.data;
          if(data != null){
            self.portDetail = data;
            self.checkStatusCheck();
            self.$modal.closeLoading();
          }else{
            self.startPortDetailTimer();
          }
        });
      },1000);
    },
    checkStatusCheck(){
      this.statusChangeTimer();
    },
    checkOnPage(){
      var pages = getCurrentPages() // 获取栈实例
      let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
      if("pages/weitiandi/device/index" != currentRoute){
        return false;
      }
      return  true;
    },
    goBack(){
      this.closeSocket();
      uni.navigateBack({
      });
    },
    closeSocket(){
      ecBLE.onBLEConnectionStateChange(() => {})
      ecBLE.onBLECharacteristicValueChange(() => {})
    },
    statusChangeTimer(){
      let self = this;
      this.statusTimer = setTimeout(function(){
        if(!this.checkOnPage()){
          return;
        }
        checkStatusChange(self.deviceInfo,self.visitTime).then(res=>{
          let data = res.data;
          if(data != null){
            self.getInfo();
          }else{
            self.statusChangeTimer();
          }
        });
      },3000);
    }
  }
}
</script>

<style>
.container {
  background-image: url('../../../static/images/new/starts/bg2.jpg');
  inset: 0;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
}

.header {
  position: relative;
  margin-top:4vw;
}

.header-status-desc {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom:1vh;
  font-size: 5vw;
  font-weight: bold;
  color: #0E9F9B;
  margin-bottom: 5vw;
}

.header-status {
  font-weight: bold;
  text-align: center;
}

.chong-active {
  color: #0E9F9B
}

.header-img {
  width: 100%;
  padding: 5% 10%;
  text-align: center;

}

.header-img image {
  width: 100%;
  height: 23vh;
}
.info-body{
  background: #0E9F9B;
  height: 20vh;
  margin: 0 2%;
  border-radius: 1vw;
  margin-top:2vh;
  color: #F8FCFF;
  line-height: 3vh;
}
.info-content{
  display: inline-block;
  width: 23%;
  text-align: center;
  margin: 1%;
  margin-top:2.5vh;
}
.info-content-value{
  font-weight: bold;
}
.info-content-text{

}
.info-summary{
  display: flex;
  flex-direction: row;
  text-align: center;
  margin:3vh 0;
}
.summary{
  width: 33%;
  line-height: 2.5vh;
}
.charge-num{
  color: #0E9F9B;
  font-weight: bold;
  font-size: 4.5vw;
}
.charge-title{
  color: #B2B2B2;
  font-weight: 400;
}
.btn-image{
  width: 90%;
  height: 100%;
}
.info-bottom-btn{
  display: flex;
  flex-direction: row;
  text-align: center;
  position: relative;
  margin-top: 10vh
;
}
.btn-area{
  width: 50%;
  height: 50px;
}
.left{
  position: relative;
  left: 10px;
  text-align: right;
}
.right{
  text-align: left;
  position: relative;
  right: 10px;
}
.info-plan{
  text-align: center;
  color: #0E9F9B;
  margin-top:1vh;
  font-weight: 400;
}
.setting{
  position: fixed;
  right: -1px;
  top: 10vh;
  z-index: 999;
  background: rgb(227,243,245);
  color: #0E9F9B;
  font-size: 10px;
  border-radius: 5px;
  padding: 3px;
}
.port{
  height: 70px;
  background: #F8FCFF;
  border: 0px solid #F8FCFF;
  box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
  border-radius: 4px;
  margin:0 10px;
  position: relative;
  margin-top:10px;
}

.plan{
  height: 70px;
  background: #F8FCFF;
  border: 0px solid #F8FCFF;
  box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
  border-radius: 4px;
  margin:0 10px;
  position: relative;
  margin-top:15px;
}
.port-image{
  height: 40px;
  width: 40px;
  position: absolute;
  top:15px;
  left:20px;
}
.port-text{
  position: absolute;
  top:13px;
  left:75px;
  font-weight: bold;
}
.port-num{
  position: absolute;
  top:38px;
  left:75px;
  color: #B2B2B2;
}
.port-icon{
  position: absolute;
  top:30px;
  right:5px;
  width: 10px;
  height: 16px;
}
.port-icon image{
  width: 90%;
}
.body-bottom{
  padding:0 22px;
}
.body-bottom .info-content{
  width: 30%;
}
.bottom-control{
  height: 22vh;
  margin: 0 2%;
  margin-top:2vh;
  line-height: 3vh;
  background: #F8FCFF;
  border: 0px solid #F8FCFF;
  box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
  border-radius: 4px;
  padding:3%;
}
.control-btn{
  display: inline-block;;
  height: 60px;
  width: 25%;
  padding:10px 20px;
  text-align: center;
  font-size: 12px;
  color: white;
}
.control-btn .btn-image{
}
.dportitem{
  color: #60af7b
}
.dboxs{
  /* background: #F8FCFF; */
  background: linear-gradient(#303030, #050609);
  border: 0px solid #F8FCFF;
  box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
  border-radius: 4px;
  padding: 20px;
  font-size: 0.24rem;
  color: #57B03D;
  margin:20px;
  position: relative;
}
.portimg{
  width: 20px;
  height: 20px;
}
.dportitem-img{
  width: 50px;
  height: 50px;
}
.dpropitem-block{
  /* padding: 0.12rem 0.37rem;
  background: #e6f6f1; */
  display: flex;
  width: 70px;
  height: 70px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dportitem{
  margin:10px;
  width: 70px;
  position: relative;
  display: inline-block;
}
.dportitem-block-2{
  /* background: #f9f4e5; */
  color: #FFAA00;
}
.dpropitem-title{
  text-align: center;
  margin-bottom: 5px;
  font-size: 16px;
}
.dpropitem-status{
  font-size: 14px;
}
.dboxtitle{
  font-size: 18px;
  position: relative;
}
.dboxtitle-text{
  display: inline-block;
  position: absolute;
  top: -2px;
  left: 25px;
  color: #b0b0b0;
}
.btn-image{
  width: 30px;
  height: 30px;
}
.control-btn{
  font-size: 14px;
}
</style>