techtron/pages/weitiandi/bluetooth/status.vue

<template>
  <view class="container">
   <!-- <view  style="height: 20px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:30px;z-index: 9999;background: rgb(243,157,116);color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="goBack">
      {{$t('charge.break')}}
    </view>

    <view v-if="locale == 'en'" style="height: 40px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:120px;z-index: 9999;background: #1A87FF;color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="modifyPwd">
      {{$t('charge.modifypwd')}}
    </view>
    <view v-else style="height: 20px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:120px;z-index: 9999;background: #1A87FF;color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="modifyPwd">
      {{$t('charge.modifypwd')}}
    </view>
    <view style=";position: relative;height: 250px;margin-top:2vh;">
      <view class="dtop">
        <view class="can">

          <view class="box">
            <view class="three">
              <view class="four"></view>
              <view class="five"></view>
              <view class="six"></view>

            </view>

            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view> -->

          <!--            <canvas id="c">-->
          <!--            </canvas>-->
          <!-- <view class="stip">

            <view class="p0" st="">{{i18('设备号')}}:{{uuid}}</view>
            <view class="p1">
              <view v-if="portStatus == 2">
                {{$t('charge.charging')}}
              </view>

              <view v-else-if="portStatus == 6">
                {{$t('charge.planed')}}
              </view>

              <view v-else-if="portStatus == 5">
                {{$t('charge.connected')}}
              </view>

              <view v-else>
                {{$t('charge.nocharge')}}
              </view>

            </view>

          </view>
        </view>

      </view>
    </view>
    <view style="display: flex;flex-direction: row;margin:0 33%;" v-if="curPort.length>1">
      <view  class="port_item" :class="item.id==choosePort?'selected_item':''" v-for="item in curPort" @click="selectPort(item.id);">{{ i18(item.text )}}</view>
    </view>
    <view class="dstatus">
      <view class="ditem">
        <image class="itemimg" src="/static/images/new/tmp.png"/>
        <view class="item-value">{{deviceTemp}}℃</view>
        <span class="item-text">{{$t('charge.devtemper')}}</span>
      </view>
      <view class="ditem">
        <image class="itemimg" src="/static/images/new/dianya.png"/>
        <view class="item-value">{{ deviceV }}V</view>
        <span class="item-text">{{$t('charge.voltage')}}</span>
      </view>
      <view class="ditem">
        <image class="itemimg" src="/static/images/new/dianliu.png"/>
        <view class="item-value" v-if="deviceV==0">0A</view>
        <view class="item-value" v-else>
          {{currentValue}}A
        </view>
        <span class="item-text">{{$t('charge.current')}}</span>
      </view>

      <view class="ditem">
        <image class="itemimg" src="/static/images/new/shjian.png"/>
        <view class="item-value" >{{ chargeTime }}{{ i18('分钟') }}</view>
        <span class="item-text" v-if="portStatus == 6">{{$t('charge.lefttime')}}</span>
        <span class="item-text" v-else>{{$t('charge.chargetime')}}</span>
      </view>

      <view class="ditem">
        <image class="itemimg" src="/static/images/new/gonglv.png"/>
        <view class="item-value" >{{ gonglv }}W</view>
        <span class="item-text">{{$t('charge.power')}}</span>
      </view>

      <view class="ditem">
        <image class="itemimg" src="/static/images/new/dianliang.png"/>
        <view class="item-value" >{{ dianliang}} {{ i18('度') }}</view>
        <span class="item-text">{{$t('charge.elec')}}</span>
      </view>

    </view>

    <view class="dbtns">
      <view class="start" @click="toPage">
        <image style="width:25px;height: 25px;margin-right: 5px;" src="/static/images/new/start.png"/>
        <span>{{$t('charge.startcharge')}}</span>
      </view>


      <view class="get" @click="getInfo">
        <image style="width:25px;height: 25px;margin-right: 5px;" src="/static/images/new/get.png"/>
        <span>{{$t('charge.getinfo')}}</span>
      </view>

    </view>

    <view class="dtip">
      <view style="margin:10px 0px;color: #1A87FF;"><img style="width: 13px;height: 13px" src="/static/images/new/tip.png">{{i18('温馨提示')}}</view>
      <view>1，{{i18('桩控制最大输出电流，当功率没有达到请检查车的状态或者车的设置')}};</view>
      <view>2，{{i18('启动充电-&gt;设备管理->可设置设备最大输出电流')}}</view>
      <view>3，{{i18('为保障您远程启动正常充电，请确保枪头完全连接充电口，同时确认您的爱车处于立即充电状态下')}};</view>
      <view>4，{{i18('注意规范安全充电，停好车，锁好车。')}}</view>
    </view>
    <u-picker @cancel="showPort=false" @confirm="confirmPort" :show="showPort" :columns="portList" keyName="text"></u-picker>

    <u-picker @cancel="cancelPicker" @confirm="confirm" :show="showPlan" :columns="planCols" @change="changeHandler"></u-picker>
    <u-modal :show="showPwd" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="inputPwd" @cancel="cancel" :showCancelButton="true"  :title="$t('charge.modifypwd')" >
      <view class="slot-content">
        <view>
          <u--input
              type="number"
              :placeholder="$t('charge.oldpwd')"
              border="surround"
              v-model="oldPwd"
          ></u--input>
        </view>

        <view style="margin-top:5px">
          <u--input
              type="number"
              :placeholder="$t('charge.newpwd')"
              border="surround"
              v-model="pwd"
          ></u--input>
        </view>

      </view>
    </u-modal> -->
<view style=" margin: 2vh 0 0 22vw;place-items: center;display: flex;flex-direction: row;justify-content: space-evenly;">
			<image style="height: 3vh;width: 35vw;"
				src="../../../static/images/new/starts/login/backImg2.png"></image>
			<text @click="clickRight()"
					style="font-size: 15px;font-weight: bold;z-index: 9999;height: 3vh;"><uni-icons v-show="!show" style="color: #ffffff;" size="30" type="more-filled"></uni-icons><uni-icons size="30" v-show="show" style="color: #57B03D;" type="more-filled"></uni-icons></text>
					
					<!-- <uni-drawer @change="changeDrawer"  style="top:20vh;height: 100vh" ref="showRight" mode="right"
						:mask-click="true">
					
					</uni-drawer> -->
			</view>
			<view >
				<u-popup :show="show" mode="right" customStyle="top:10vh;bottom:200px" :overlayOpacity="0" :closeOnClickOverlay="true" :zIndex="100" ref="showRight" :overlay="false" >
				            <view style="width: 100vw;height: 100vh;">
				               <scroll-view  style="background: linear-gradient(#000000, #161615);font-size: 20px;height: 100vh;" scroll-y="true">
				               	<view class="prop-item" @click="handleLogout()">
				               		<!-- <view class="prop-item-image">
				               								<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
				               							</view> -->
				               		<view class="prop-item-right">{{i18('退出登录')}}</view>
				               		<view class="prop-item-left">
				               			<!-- <uni-icons type="forward" color="lightgray" size="16"></uni-icons> -->
				               		</view>
				               	</view>
				               	<u-divider />
				               	<view class="prop-item" @click="skipPage(3)">
				               		<!-- <view class="prop-item-image">
				               								<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
				               							</view> -->
				               		<view class="prop-item-right">{{i18('关于我们')}}</view>
				               		<view class="prop-item-left">
				               			<!-- <uni-icons type="forward" color="lightgray" size="16"></uni-icons> -->
				               		</view>
				               	</view>
				               	<u-divider />
				               	<view class="prop-item" @click="skipPage(4)">
				               		<!-- <view class="prop-item-image">
				               								<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
				               							</view> -->
				               		<view class="prop-item-right">{{i18('帮助')}}</view>
				               		<view class="prop-item-left">
				               			<!-- <uni-icons type="forward" color="lightgray" size="16"></uni-icons> -->
				               		</view>
				               	</view>
				               	<u-divider />
				               </scroll-view>
				            </view>
						</u-popup>
			</view>
    <view style="    position: relative;top: 4vh;margin-top: 4vh;text-align: center;display: flex;flex-direction: row;justify-content: center;">
      <view class="progress_box" style="text-align: center">
		  <view >
		  <image class="progress-barup" src="../../../static/images/new/starts/kedu.png"></image>
		  <canvas class="progress_bar" canvas-id="cpbar"></canvas>
		  </view>
	  		<!-- <canvas class="progress_bg" canvas-id="cpbg"></canvas>
	  		<canvas class="progress_bar" canvas-id="cpbar"></canvas>
	  		<canvas class="progress_line" canvas-id="cpline"></canvas> -->
	  		<view class="progress_txt">
	  			<view class="progress_info">
	  				<view class="p0" style="color: azure;" st="">{{ deviceInfo.deviceId}}</view>
	  				<view class="p1" >
	  				  <view v-if="portStatus  == 2" style="position: relative;">
	  				    {{$t('charge.charging')}}
	  				  </view>
	  				  <view v-else-if="portStatus  == 6" style="position: relative;">
	  				    {{$t('charge.planed')}}
	  				  </view>
	  				
	  				  <view v-else-if="portStatus  == 5" style="position: relative">
	  				    {{$t('charge.connected')}}
	  				  </view>
	  				
	  				  <view v-else>
	  				    {{$t('charge.nocharge')}}
	  				  </view>
	  				</view>
					<view class="p2">
					<view class="item-value" v-if="portDetail.voltage == 0">0 {{ i18('度') }}</view>
					<view class="item-value" v-else>{{ dianliang }} {{ i18('度') }}</view>
					</view>
	  			</view>
	  		</view>
	  	</view>
		</view>
		<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 6vh;">
			 <view  class="port_item" v-if="curPort.length>1" :class="item.id==choosePort?'selected_item':''" v-for="item in curPort" @click="selectPort(item.id);">{{ i18(item.text )}}</view>
			<view
				style="background-color:#494E51 ;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 75vw;;border-radius: 27px;">
				<view span="4" style="width: 25vw;">
					<view class="item-value">{{ deviceV  }}V</view>
					<span class="item-text">{{$t('charge.voltage')}}</span>
				</view>
				<u-line direction="col" color="#6F84AC" length="50"></u-line>
				<view span="4" style="width: 25vw;">
					<view class="item-value">{{ gonglv  }}W</view>
					<span class="item-text">{{$t('charge.power')}}</span>
				</view>
				<u-line direction="col" color="#6F84AC" length="50"></u-line>
				<view span="4" style="width: 25vw;margin-top: -5px;">
					<view class="item-value">{{deviceTemp}}℃</view>
					<span class="item-text">{{$t('charge.devtemper')}}</span>
				</view>
				<!-- <u-line direction="col" color="#6F84AC" length="50"></u-line> -->
				<!-- <view span="3" style="width: 19vw;">
					<view class="item-value" v-if="portDetail.voltage == 0">0 {{ i18('度') }}</view>
					<view class="item-value" v-else>{{ dianliang }} {{ i18('度') }}</view>
					<span class="item-text">{{$t('charge.elec')}}</span>
				</view> -->
			</view>
		</view>
		
		<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 3vh;">
			<view
				style="position:relative;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 100%;height: 6vh;}">
				<view  style="width: 27vw;left:5vw;position: absolute;font-size: 11px;">
					<view style="margin-left: 1vh;">
						<view style="font-weight: bold;"><span v-if="portDetail.portStatus == 6">{{i18('剩余时间')}}</span>
							<span  v-else>{{$t('charge.chargetime')}}</span></view>
						<view class="demo-layout bg-purple"
							style="border-radius: 8px;background-color: aliceblue;color: #000;display: flex;padding-top: 5px;
    justify-content: center;
    align-items: center;">
							<view >{{ chargeTime  }}{{ i18('分钟') }}</view>
							
						</view>
					</view>
				</view>
				<view span="2" style=";left:34vw;position: absolute">
					<view v-if="portDetail.portStatus == 2"
						style="text-align: center;position: absolute;margin:-1vh 2vw;border: 0ch;height: 20vh;">
						<u-button @click="toPage()" shape="circle"
							style="background: #ec3e41;color:white;width: 28vw;border: 0ch;height: 6vh;">STOP</u-button>
					</view>
					<view v-if="portDetail.portStatus != 2"
						style="text-align: center;position: absolute;margin:-1vh 2vw;border: 0ch;height: 20vh;">
						<u-button @click="toPage()" shape="circle"
							style="background: #57B03D;color:white;width: 28vw;border: 0ch;height: 6vh;">Charge</u-button>
					</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>
				<view span="3" style="width: 26vw;left:65%;position: absolute">
					<view style="margin-left: 3vw;font-size: 11px;">
						<view style="font-weight: bold;"> Ampere</view>
						<view class="demo-layout bg-purple"
							style="border-radius: 8px;background-color: aliceblue;color: #000;display: flex;padding-top: 5px;
    justify-content: center;
    align-items: center;">
							<view v-if="deviceV  == 0">0A</view>
							<view v-else>{{currentValue}}A</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="display: flex;align-items: center;justify-content: center;margin-top: 0vh;">
			<view @click="toPage">
				<image src="../../../static/images/new/starts/status/Setting.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view>
			<!-- <view class="" @click="wifi">
				<image src="../../../static/images/new/starts/status/WiFi.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view> -->
			<view @click="modifyPwd">
				<image src="../../../static/images/new/starts/status/Lock／Unlocked.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view
			>
			<view class="" @click="getInfo">
				<image src="../../../static/images/new/starts/status/Refresh.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;;"></image>
			</view>
			<view class="" @click="goBack">
				<image src="../../../static/images/new/starts/status/Link.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view>
		</view>
		
		<view style="position:fixed;bottom:1vh;display: flex;align-items: center;justify-content: center;text-align: center;left:0px;right:0px;">
		  <view @click="skip(0)" style="margin:0px 10px;">
		    <image src="@/static/images/new/starts/tabbar/one_off.png"
		           style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
		  </view>
		  <view @click="skip(1)" style="margin:0px 10px;">
		    <image src="@/static/images/new/starts/tabbar/two_on.png"
		           style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
		  </view>
		  <view @click="skip(2)" style="margin:0px 10px;">
		    <image src="@/static/images/new/starts/tabbar/three_off.png"
		           style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
		  </view>
		  </view>
    <u-modal :show="showInitPwd" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="inputPwd" @cancel="cancelInitDlg" :showCancelButton="true"  :title="i18('当前密码为初始密码，请修改')" >
      <view class="slot-content">
        <view style="margin-bottom:10px;">
          {{i18('请保存好设备序列号。可用于找回密码')}}
        </view>
        <view style="margin-bottom:10px;text-decoration: underline" @click="copyPwd">
          {{i18('设备序列号')}} :{{uuid}}
        </view>
        <view>
          <u--input
              type="number"
              :placeholder="$t('charge.oldpwd')"
              border="surround"
              v-model="oldPwd"
          ></u--input>
        </view>

        <view style="margin-top:5px">
          <u--input
              type="number"
              :placeholder="$t('charge.newpwd')"
              border="surround"
              v-model="pwd"
          ></u--input>
        </view>

      </view>
    </u-modal>
	<u-modal :show="showPwd" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="inputPwd" @cancel="cancel" :showCancelButton="true"  :title="$t('charge.modifypwd')" >
	  <view class="slot-content">
	    <view>
	      <u--input
	          type="number"
	          :placeholder="$t('charge.oldpwd')"
	          border="surround"
	          v-model="oldPwd"
	      ></u--input>
	    </view>
	
	    <view style="margin-top:5px">
	      <u--input
	          type="number"
	          :placeholder="$t('charge.newpwd')"
	          border="surround"
	          v-model="pwd"
	      ></u--input>
	    </view>
	
	  </view>
	</u-modal>
  </view>
</template>

<script>
import {getDeviceInfo,getPortDetail,startCharge,stopCharge,sendPortDetailCmd,checkStatusChange,getPlanInfo,cancelPlan,parseDataObj,planCharge,getPwd,setPwd,getUUID} 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 {
      chargeTime:0,
      deviceTemp:0,
      deviceV:0,
      currentValue:0,
      gonglv:0,
      dianliang:0,
      portStatus:0,
      locale:"",
      oldPwd:"",
      pwd:"",
      showPwd:false,
      planCols:[ ],
      columnData:[],
      showPlan:false,
      deviceInfo:{},
      visitTime:"",
      timer:null,
      showPort:false,
      portDetail:{portStatus:0,power:0,voltage:0,time:0,dev_temper:0,elec:0,dev_temper:0},
      statusTimer:"",
      connected:false,
      scriptTask:null,
      choosePort:1,
      portList:[[{port:1,text:"端口一"}]],
      planInfo:null,
      days:["","周一","周二","周三","周四","周五","周六","周日"],
      textRevData: '',
      picker:null,
      firstInit:false,
      hasRight:false,
      startAutoCharge:true,
      initPwd:"123456",
      showInitPwd:false,
      uuid:"",
      curPort:[],
      firstRender:false,
      refreshTimer:null,
	  clickRightTag:0,
	  show:false,
	  timeFlg:true
    }
  },
  computed: {
    imgUrl() {
      return getApp().globalData.config.imgUrl;
    }
  },
  onLoad() {
    // #ifdef MP
    this.firstRender = true;
    // #endif
    this.locale = uni.getLocale();
    console.log("status comeing")
    this.checkPassword();
    // this.messageCallback({"type":103,"real_data":{"port_first_status":1,"power":0,"elec":0,"money":0,"time":0,"port_second_status":2,"power_1":0,"elec_1":3,"money_1":50000,"time_1":367,"dev_temper":17,"voltage":228,"":249,"portStatus":1,"currentValue":"0.0"}})
  },
  onShow(){
    uni.setNavigationBarTitle({
      title:' '
    })
    this.buletooth();

  },
  onUnload (){
    this.closeSocket();
    if(this.refreshTimer != null){
      clearTimeout(this.refreshTimer)
    }
  },
  mounted: function() {
  	this.drawCircle(25);
  	this.drawProgressbg();
  	 //参数为1-100
  	this.drawLine();
  },
  methods: {
	  drawProgressbg: function() {
	  	// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
	  	var ctx = uni.createCanvasContext('cpbg', this);
	  	ctx.setLineWidth(20); // 设置圆环的宽度
	  	ctx.setStrokeStyle('#35383A'); // 设置圆环的颜色
	  	// ctx.setLineCap('round'); // 设置圆环端点的形状
	  	ctx.setLineCap('square'); // 设置圆环端点的形状
	  	ctx.beginPath(); //开始一个新的路径
	  	ctx.arc(100, 100, 90, 0 * Math.PI, 2 * Math.PI, false);
	  	//设置一个原点(110,110)，半径为100的圆的路径到当前路径
	  	ctx.stroke(); //对当前路径进行描边
	  	ctx.draw();
	  },
	  drawCircle: function(step) {
	  	
	  	var ctx = uni.createCanvasContext('cpbar', this);
	  	// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
	  	var gradient = ctx.createLinearGradient(0, 0, 120, 0);
	  
	  	let increase = 0.15;
	  	let end = (120/100 ) * 2 * Math.PI ; // 最后的角度
	  	let current = (50 / 100) * 2 * Math.PI-Math.PI/3 ; // 起始角度
	  	if(this.portDetail.portStatus == 2){
			if(this.timeFlg){
				this.timeFlg=false
	  	let timer = setInterval(() => {
	  		gradient.addColorStop('0', '#57B03D');
	  		gradient.addColorStop('1.0', '#57B03D');
	  		ctx.setLineWidth(10);
	  		ctx.setStrokeStyle(gradient);
	  		ctx.setLineCap('square');
	  		ctx.beginPath();
	  		// 参数step 为绘制的百分比
	  		if (current < end) {
	  			current = current + increase;
	  			
	  		}
	  		if (current >= end) {
	  			current = end;
	  			if(this.portDetail.portStatus != 2){
	  			clearInterval(timer);	
				this.timeFlg=true
	  			}
	  				end = (120/100 ) * 2 * Math.PI ; // 最后的角度
	  				current = (50 / 100) * 2 * Math.PI-Math.PI/3 ; // 起始角度
	  			
	  		}
	  		ctx.arc(120, 120, 115, (50 / 100) * 2 * Math.PI-Math.PI/2, current, false);
	  		ctx.stroke();
	  		ctx.draw();
	  		
	  	}, 40);
	  	}
		}
	  },
	  // 画刻度
	  drawLine() {
	  	var context = uni.createCanvasContext("cpline", this);
	  	var r = 90;
	  	var x0 = 100;
	  	var y0 = 100;
	  	var x;
	  	var y;
	  	var lineWidth = 15;
	  
	  	for (let i = 0; i < 60; i++) {
	  		context.beginPath();
	  		context.setLineWidth(lineWidth);
	  		context.setStrokeStyle("#35383A");
	  
	  		x = x0 - r * Math.sin(((6 * (i + 1) - 3) * Math.PI) / 180);
	  		y = y0 - r * Math.cos(((6 * (i + 1) - 3) * Math.PI) / 180);
	  
	  		// console.log('x0:' + x0 + '   y0:' + y0 + '    x:' + x + '    y:' + y);
	  		context.moveTo(x, y);
	  		context.arc(
	  			x0,
	  			y0,
	  			r,
	  			((270 - 6 * (i + 1) + 3) * Math.PI) / 180,
	  			((270 - 6 * i) * Math.PI) / 180,
	  			false
	  		);
	  		context.stroke();
	  		context.closePath();
	  	}
	  	context.stroke();
	  	context.draw();
	  },
	  
	  getInfo() {
	  	let self = this;
	  	this.$modal.loading("正在获取状态，请稍等...");
	  	sendPortDetailCmd(this.deviceInfo).then(res => {
	  		this.$modal.loading("正在获取状态，请稍等...");
	  		this.visitTime = res.msg;
	  		if (!this.visitTime) {
	  			this.$modal.msg("请重新进入页面");
	  			return;
	  		}
	  		if (!this.scriptTask) {
	  			this.initSocket(this.deviceInfo.deviceId);
	  		}
	  		setTimeout(function() {
	  			getPortDetail(self.deviceInfo, self.visitTime).then(res => {
	  				let data = res.data;
	  				if (data != null) {
	  					self.parsePortCmd(data);
	  				} else {}
	  			});
	  		}, 500)
	  	})
	  },
	  skip(type){
	  	if(type==0){
	  		uni.navigateTo({
	  			url:'/pages/index'
	  		})
	  	}else if(type==1){
	  		uni.navigateTo({
	  			url:'/pages/weitiandi/deviceList'
	  		})
	  		}else if(type==2){
	  			uni.navigateTo({
	  				url:'/pages/mine/index'
	  			})
	  			}else{
        this.$modal.showToast("功能开发中..");
      }
	  },
	  handleLogout() {
	  	this.$modal.confirm('确定注销并退出系统吗？').then(() => {
	  		this.$store.dispatch('LogOut').then(() => {
	  			this.$tab.reLaunch('/pages/index')
	  		})
	  	})
	  },
	  changeDrawer(event) {
	  	if (event) {
	  		// 抽屉打开时的逻辑
	  
	  		this.clickRightTag = 1
	  	} else {
	  		// 抽屉关闭时的逻辑
	  		this.clickRightTag = 0
	  	}
	  },
	  //自定义头右操作函数
	  clickRight() {
	  	//打开抽屉
		this.show=!this.show
	  	// if (this.clickRightTag == 0) {
	  	// 	this.$refs.showRight.open();
	  	// 	this.clickRightTag = 1
	  	// } else {
	  	// 	this.$refs.showRight.close()
	  	// 	this.clickRightTag = 0
	  	// }
	  },
    cancelInitDlg(){
      this.showInitPwd = false;
    },
    selectPort(id){
      this.choosePort = id;
      console.log(this.choosePort)
      this.getInfo();
    },
    copyPwd(){
      uni.setClipboardData({
        data: this.uuid,
        success: function () {
          this.$modal.showToast("复制成功");
        }
      });
    },
    i18(text){
      return i18(text)
    },
    toPage(){
      uni.navigateTo({
        url: '/pages/weitiandi/bluetooth/index'
      });
    },
    toSetting(){
      let imei = this.deviceInfo.deviceId;
      let ccid = this.deviceInfo.ccid;
      uni.navigateTo({
        url: '/pages/weitiandi/bluetooth/setting'
      });
    },
    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 == "000000"){
        this.$modal.showToast("密码不能设置为000000");
        return;
      }
      if(this.pwd == "123456"){
        this.$modal.showToast("密码不能设置为123456");
        return;
      }
      if(!this.pwd){
        this.$modal.showToast("密码不能为空");
      }else {
        setPwd(this.pwd);
        this.oldPwd = this.pwd;
        uni.removeStorageSync("pwd");
        this.$modal.showToast("密码修改成功");
        this.showPwd = false;
        this.showInitPwd = false;
        // this.goBack();
      }

    },
    confirm(e) {
      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.substr(0,hour.length-1),10);
      let min = value[2]+"";
      min = parseInt(min.substr(0,min.length-1),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("今日" == 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 == "今日"){
          picker.setColumnValues(1, this.columnData[1])
        }else{
          picker.setColumnValues(1, this.columnData[0])
        }
      }
    },
    checkPassword(){
      setTimeout(function (){
        getUUID();
      },500);
      let rightPwd = uni.getStorageSync("pwd");
      if(rightPwd === this.initPwd){
        this.showInitPwd = true;
        this.oldPwd = rightPwd;
      }
    },
    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();
      self.startTimer();
    },
    startTimer(){
      let self = this;
      if(this.refreshTimer != null){
        clearTimeout(this.refreshTimer);
      }
      self.refreshTimer = setTimeout(function(){
        self.getInfo();
        self.startTimer();
      },30000);
    },
    messageCallback(data,flag){
      let self = this;
      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:"端口一"});
          self.curPort.push({
            text:"端口一",
            status:port_first_status,
            id:1,
          })
          let power = self.portDetail.power;
          let voltage = parseInt(self.portDetail.voltage);
          if(voltage >0){
            let current = power/voltage;
            current = current.toFixed(1);
            self.portDetail.currentValue = current;

          }
        }
        if(port_second_status){
          self.portList[0].push({port:2,text:"端口二"});
          self.curPort.push({
            text:"端口二",
            status:port_second_status,
            id:2
          })
          let power = self.portDetail.power_1;
          let voltage = parseInt(self.portDetail.voltage);
          if(voltage >0){
            let current = power/voltage;
            current = current.toFixed(1);
            self.portDetail.currentValue_1 = current;

          }
        }
        let choosePort = self.choosePort
        /**
         *  chargeTime:0,
         *      deviceTemp:0,
         *      deviceV:0,
         *      currentValue:0,
         *      gonglv:0,
         *      dianliang:0,
         *      portStatus:0,
         */
        if(choosePort == 1){
          self.portDetail.portStatus = port_first_status;
          self.chargeTime = self.portDetail.time;
          self.gonglv = self.portDetail.power;
          self.dianliang = self.portDetail.elec/100;
          self.currentValue =  self.portDetail.currentValue;
          if(port_first_status != 2){
            self.chargeTime = 0;
            if(port_first_status == 6){
              self.chargeTime = self.portDetail.time;
            }
            self.gonglv = 0;
            self.dianliang = 0;
            self.currentValue =  0;
          }
        }else if(choosePort == 2){
          self.portDetail.portStatus = port_second_status;
          self.chargeTime = self.portDetail.time_1;
          self.gonglv = self.portDetail.power_1;
          self.dianliang = self.portDetail.elec_1/100;
          self.currentValue =  self.portDetail.currentValue_1;
          if(port_second_status != 2){
            self.chargeTime = 0;
            if(port_first_status == 6){
              self.chargeTime = self.portDetail.time_1;
            }
            self.gonglv = 0;
            self.dianliang = 0;
            self.currentValue =  0;
          }
        }
        self.portStatus = self.portDetail.portStatus;
        self.deviceTemp = self.portDetail.dev_temper;
        self.deviceV = self.portDetail.voltage;
        self.$modal.closeLoading();
		if(self.portDetail.portStatus==2){
			this.drawCircle(100);
		}
      }
      if(type == 116){
        self.$modal.closeLoading();
        self.getInfo();
      }
      if(type == 113){
        self.$modal.closeLoading();
        self.getInfo();
      }
      if(type == 96){
      }
      if(type == 253){
        self.$modal.closeLoading();
        self.uuid = real_data.substr(0,6);
      }
      self.$forceUpdate();
      if(!flag){
        console.log('收到服务器内容：' + JSON.stringify(data));
      }
      console.log("当前对象内容")
      console.log(self.portDetail)
      if(!this.firstInit){
        this.firstInit = true;
        let autoCharge = self.getAutoChargeValue()
        if(self.portDetail.portStatus == 5 && autoCharge == 1){
          self.startCharge();
        }
      }
    },
    getAutoChargeValue(){
      let autoCharge = uni.getStorageSync("autoCharge");
      if(!autoCharge ){
        autoCharge = 0;
      }
	   uni.setStorageSync("autoCharge",autoCharge);
      return autoCharge;
    },
    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 = ["今日", "明日"];
      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();
		  this.drawCircle(100); //参数为1-100
        })
      }else{
        if(portStatus == 1){
          this.$modal.msg("请先将充电枪插入后再点击充电");
        }
        if(portStatus == 5){
          this.$modal.confirm("确认开始充电么？").then(res=>{
            this.startCharge();
			this.drawCircle(100); //参数为1-100
          })
        }else {
          this.$modal.msg("端口无法开始充电");
        }

      }
    },
    getInfo(flag) {
      let self = this;
      // setTimeout(function (){
      //   self.messageCallback({"type":103,"real_data":{"port_first_status":1,"power":0,"elec":0,"money":0,"time":0,"port_second_status":2,"power_1":0,"elec_1":3,"money_1":50000,"time_1":367,"dev_temper":17,"voltage":228,"":249,"portStatus":1,"currentValue":"0.0"}})
      //
      // },50);
      //
      // setTimeout(function (){
      //   self.messageCallback({"type":103,"real_data":{"port_first_status":1,"power":0,"elec":0,"money":0,"time":0,"port_second_status":2,"power_1":0,"elec_1":3,"money_1":50000,"time_1":367,"dev_temper":17,"voltage":228,"":249,"portStatus":1,"currentValue":"0.0"}})
      //
      // },150);
      //
      // setTimeout(function (){
      //   self.messageCallback({"type":103,"real_data":{"port_first_status":1,"power":0,"elec":0,"money":0,"time":0,"port_second_status":2,"power_1":0,"elec_1":3,"money_1":50000,"time_1":367,"dev_temper":17,"voltage":228,"":249,"portStatus":1,"currentValue":"0.0"}})
      //
      // },250);

      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(() => {})
      ecBLE.closeBLEConnection()
      uni.removeStorageSync('blueid');
    },
    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: rgb(249, 252, 255); */
  background-image: url('../../../static/images/new/starts/bg1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  inset: 0;
  position: absolute;
}

.header {
  position: relative;
  margin-top:4vw;
}
.prop-item {
		position: relative;
		display: flex;
		flex-direction: row;
		height: 40px;
		line-height: 40px;
		margin: 0 20rpx;
	}

	.prop-item-left {
		color: #BCBCBF;
		;
		width: 30%;
		font-size: 14px;
		//margin-left: 36px;
	}

	.prop-item-image {
		width: 15px;
		height: 15px;
		position: absolute;
		left: 2vw;
		top: 0.5vh;
	}

	.prop-item-right {
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		color: #BCBCBF;
	}
	.progress_box {
		/* position: relative; */
		/* position: relative; */
		/* width: 60vw; */
		height: 38vh;
		/* background-color: red; */
		display: flex;
		text-align: center;
		flex-direction: row;

	}

	.pcds {
		margin-top: 90rpx;
		color: black;
	}

.progress_bg {
		position: absolute;
		width: 60vw;
		height: 50vh;
	}
.progress_txt {
		    /* position: absolute; */
		    z-index: 99;
		    /* width: 55vw; */
	/* 	text-align: center;
		font-size: 28upx;
		margin: 16vw;
		/* margin-top: 54px;
		margin-left: 74px; 
		color: #999999; */
	}

	.progress_bar {
		position: absolute;
		width: 64vw;
		margin:  7px 0px 0px 5px;
		height: 50vh;
		
	}
	.progress-barup{
	        position: absolute;
	        width: 250px;
	        margin: 0px;
	        height: 250px;
	        z-index: 1;
	}

	
	.progress_line {
		position: absolute;
		width: 60vw;
		height: 50vh;
	}
.progress_info {
	      display: flex;
	      font-size: 10px;
	      margin: 80px 30px;
	      align-items: center;
	      flex-direction: column;
		  /* height: 14vh; */
		  width: 190px;
	}

.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: black;
}
.control-btn .btn-image{
}

#box {
  /* width: 300px; */
  height: 280px;
  position: relative;
  /* 背景色 */
  /* background: #f7f6f6; */
  overflow: hidden;
  /* padding: 50px 0; */
  box-sizing: border-box;
;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  /* 此处尽量不要设置背景色,可以选择在父标签上设置背景色，否则没有黏黏的效果 */
  filter: url("#goo");
}

/* 电量文字 */
.text {
  font-weight: 200;
  font-size: 20px;
  margin-top: 5px;
  text-align: center;
  color: #ff6600;
}

/* 电量文字 */
.text span {
  font-size: 15px;
}


.three {
  width: 170px;
  height: 170px;
  border-radius: 300px;
  opacity: 1;
  position: absolute;
  top: 20px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #ffffff;
  /* animation: ballZhuan 9s linear infinite; */
  overflow: hidden;
  box-shadow: 0px 0px 19px 1px #2196f3;
}
.four {
  width: 200px;
  height: 200px;
  border-radius: 80px;
  opacity: 0.3;
  position: absolute;
  top: 10px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #2196f3;
  animation: ballZhuan1 linear infinite;
  animation-duration: 11s;
}
.five {
  width: 270px;
  height: 270px;
  border-radius: 99px;
  opacity: 0.6;
  position: absolute;
  top: 30px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #2196f3;
  animation: ballZhuan1 linear infinite;
  /* transform: rotate(120deg); */
  animation-duration: 9s;
  left: -67px;
}
.six {
  width: 270px;
  height: 270px;
  border-radius: 99px;
  opacity: 0.6;
  position: absolute;
  top:30px;
  z-index: 10;
  /* 从中心向外剪切圆，相当于掏空 */
  /* -webkit-mask: radial-gradient(transparent 95px, white 0px); */
  background: #2196f3;
  animation: ballZhuan1 7s linear infinite;
  /* transform: rotate(120deg); */
  right: -67px;
}

@keyframes ballZhuan {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes ballZhuan1 {
  100% {
    transform: rotate(360deg);
  }
}

/* 底部的小球 */
.dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(101,192,255,0.28);
  position: absolute;
  z-index: 1000;
  bottom: -50px;
}

.dot:nth-of-type(1) {
  width: 40px;
  height: 40px;
  right: 116px;
  animation: dotMove 5s linear infinite;
}

.dot:nth-of-type(2) {
  width: 50px;
  height: 50px;
  left: 120px;
  animation: dotMove 4s linear infinite;
}

.dot:nth-of-type(3) {
  animation: dotMove 2s linear infinite;
}

.dot:nth-of-type(4) {
  width: 15px;
  height: 15px;
  left: 130px;
  animation: dotMove 2s linear infinite;
}

.dot:nth-of-type(5) {
  width: 30px;
  height: 30px;
  animation: dotMove 3s linear infinite;
}

@keyframes dotMove {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    transform: translateY(-260px);
    opacity: 0;
  }
}

.w-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 0px 25px;
}
.w-flex__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.w-item{
  text-align: center;
  padding: 5px;
}
.w-item-tit{
  font-size: 14px;
  color: #888;
}
.w-item-num{
  font-size: 18px;
  color: #111;
}
.can{
  position: relative;
  z-index: 0;
  width: 211px;
  height: 211px;
  background-image: url(/static/images/new/quan.png);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dtop{
  background: url(/static/images/new/box1.png);
  background-size: cover;
  width: 260px;
  height: 236px;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 15%;
  position: relative;
}
.dstatus{
  margin-top: 0.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: center;
}
.ditem{
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.3rem;
  margin-top: 10px;
}
.itemimg{
  width: 50px;
  height: 50px;
}

.item-value{
  font-weight: bold;
  font-size: 15px;
  margin:8px 0 0 0;
}
.item-text{
  font-size: 11px;
  margin:1px 0;
  color: #eeeeee;
}
.start{
  background: #1A87FF;
  color: #fff;
  width: 45%;
  height: 50px;
  min-height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.dbtns{
  display: flex;
  margin-top:10px;
  justify-content: space-between;
  padding: 0 30px;
}
.get{
  background: #fff;
  border: 1px solid #1A87FF;
  color: #1A87FF;
  width: 45%;
  height: 50px;
  min-height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.dtip{
  margin: 20px 20px;
  padding: 10px;
  background: rgba(127,200,251,0.1);
  border: 1px solid #7FC8FB;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.19);
  border-radius: 5px;
  font-size: 17px;
  font-weight: 400;
  color: #B8B9BA;
  margin-bottom: 10px;
}
/* .p1{
  font-size: 20px;
  color: white;
  font-weight: bold;
  margin-top:10px;
} */
.p1 {
		font-size: 20px;
		color: white;
		font-weight: bold;
		margin-top: 10px;
		/* margin-left: -1vh;; */
	}
	.p2{
		font-size: 20px;
		color: #888;
		font-weight: bold;
		
	}
.stip{
  text-align: center;
  z-index: 9999;
}
.port_item{
  color: #1A87FF;
  padding: 5px;
  border: 1px solid #1A87FF;
}
.selected_item{
  color: white !important;
  padding: 5px;
  background: #1A87FF !important;
}
</style>