techtron/pages/weitiandi/device/status.vue

<template>
	<view class="container">
		<view style="height: 0vh;place-items: center;display: grid;">
			<image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
				src="../../../static/images/new/starts/login/backImg2.png"></image>
			<text @click.stop="clickRight()"
				style="color: #ffffff;font-size: 15px;margin: 0 0 0 31vh;font-weight: bold;">· · ·</text>
			<view>
				<uni-drawer @change="changeDrawer" width=300 style="top:20vh;height: 100vh" ref="showRight" mode="right"
					:mask-click="true">
					<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;height: 100%;" 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>
				</uni-drawer>
			</view>
		</view>
		<view style=";position: relative;top: 10vh;margin-top:4vh;text-align: center;padding:0 28%;">
			<view class="progress_box" style="text-align: center">
				<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.qrcode}}</view>
						<view class="p1">
						  <view v-if="portStatus  == 2" style="position: relative;
    left: -17px;">
						    {{$t('charge.charging')}}
						  </view>
						  <view v-else-if="portStatus  == 6" style="position: relative;
    left: -17px;">
						    {{$t('charge.planed')}}
						  </view>
						
						  <view v-else-if="portStatus  == 5" style="position: relative;
    left: -17px;">
						    {{$t('charge.connected')}}
						  </view>
						
						  <view v-else>
						    {{$t('charge.nocharge')}}
						  </view>
						</view>
					</view>
				</view>
			</view>
			<!--     <view class="dtop">
        <view class="can" style="background-image: url(/static/images/new/quan.png);">

          <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>

          <view class="stip">

            <view class="p0" st="">{{ deviceInfo.qrcode}}</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;align-items: center;flex-direction: column;color: aliceblue;margin-top: 5vh;">
			<view
				style="background-color: black;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 32vh;;border-radius: 27px;">
				<view span="3" style="width: 8vh;">
					<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="3" style="width: 8vh;">
					<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="3" style="width: 8vh;">
					<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: 8vh;">
					<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: 30px;}">
				<view  style="width: 5vh;left:10%;position: absolute">
					<view style="margin-left: 1vh;width: 100px">
						<view><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;">
							<view >{{ chargeTime  }}{{ i18('分钟') }}</view>
							
						</view>
					</view>
				</view>
				<view span="2" style="width: 100px;left:36%;position: absolute">
					<view v-if="portDetail.portStatus == 2"
						style="text-align: center;position: absolute;margin:-1vh 5vw;border: 0ch;height: 20vh;">
						<u-button @click="toPage()" shape="circle"
							style="background: #ec3e41;color:white;width: 100vm;border: 0ch;height: 6vh;">Charge</u-button>
					</view>
					<view v-if="portDetail.portStatus != 2"
						style="text-align: center;position: absolute;margin:-1vh 5vw;border: 0ch;height: 20vh;">
						<u-button @click="toPage()" shape="circle"
							style="background: #57B03D;color:white;width: 80px;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: 80px;left:65%;position: absolute">
					<view style="margin-left: 1vh;">
						<view> Ampere</view>
						<view class="demo-layout bg-purple"
							style="border-radius: 8px;background-color: aliceblue;color: #000;">
							<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="toSetting">
				<image src="../../../static/images/new/starts/status/Setting.png"
					style="width: 60px;height: 60px;margin: 2vh 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 class="">
				<image src="../../../static/images/new/starts/status/Lock／Unlocked.png"
					style="width: 60px;height: 60px;margin: 2vh 2vh;"></image>
			</view> -->
			<view class="" @click="getInfo">
				<image src="../../../static/images/new/starts/status/Refresh.png"
					style="width: 60px;height: 60px;margin: 2vh 2vh;;"></image>
			</view>
			<!-- <view class="">
				<image src="../../../static/images/new/starts/status/Link.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view> -->
		</view>

		<view style="display: flex;align-items: center;justify-content: center;">
			<view @click="skipPage(0)">
				<image src="../../../static/images/new/starts/tabbar/one_off.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view>
			<view @click="skipPage(1)">
				<image src="../../../static/images/new/starts/tabbar/two_off.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view>
			<view @click="skipPage(2)">
				<image src="../../../static/images/new/starts/tabbar/three_off.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</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="portDetail.portStatus == 6">{{i18('剩余时间')}}</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" 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 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> -->
	</view>
</template>

<script>
	import {
		getDeviceInfo,
		getPortDetail,
		startCharge,
		stopCharge,
		sendPortDetailCmd,
		checkStatusChange,
		getPlanInfo,
		cancelPlan
	} from "@/api/device/device";
	import websocket from '@/utils/websocket'
	import i18 from '@/utils/i18.js'
	export default {
		data() {
			return {
				refreshTimer: null,
				curPort: [],
				chargeTime: 0,
				deviceTemp: 0,
				deviceV: 0,
				currentValue: 0,
				gonglv: 0,
				dianliang: 0,
				portStatus: 0,
				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: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
				clickRightTag: 0

			}
		},
		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.startTimer();
		},
		onShow() {
			this.getInfo();
			this.getPlanInfo();
		},
		onUnload() {
			this.closeSocket();
			if (this.refreshTimer != null) {
				clearTimeout(this.refreshTimer)
			}
		},

		mounted: function() {
			this.drawCircle(100);
			this.drawProgressbg();
			 //参数为1-100
			this.drawLine();
		},
		methods: {
			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)
			  })
			},
			skipPage(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() {
				//打开抽屉
				if (this.clickRightTag == 0) {
					this.$refs.showRight.open();
					this.clickRightTag = 1
				} else {
					this.$refs.showRight.close()
					this.clickRightTag = 0
				}
			},
			//开始充电按钮
			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();
						})
					}

				}
			},
			drawProgressbg: function() {
				// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
				var ctx = uni.createCanvasContext('cpbg', this);
				ctx.setLineWidth(19); // 设置圆环的宽度
				ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
				// ctx.setLineCap('round'); // 设置圆环端点的形状
				ctx.setLineCap('square'); // 设置圆环端点的形状
				ctx.beginPath(); //开始一个新的路径
				ctx.arc(90, 90, 80, 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, 130, 0);

				let increase = 0.05;
				let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
				let current = -Math.PI / 2; // 起始角度
				if(this.portDetail.portStatus != 2){
				let timer = setInterval(() => {
					gradient.addColorStop('0', '#57B03D');
					gradient.addColorStop('1.0', '#57B03D');
					ctx.setLineWidth(12);
					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);	
						}else{
							current = -Math.PI / 2; // 起始角度
						}
						
						
					}
					ctx.arc(90, 90, 80, -Math.PI / 2, current, false);
					ctx.stroke();
					ctx.draw();
					
				}, 20);
				}
			},
			// 画刻度
			drawLine() {
				var context = uni.createCanvasContext("cpline", this);
				var r = 80;
				var x0 = 90;
				var y0 = 90;
				var x;
				var y;
				var lineWidth = 15;

				for (let i = 0; i < 60; i++) {
					context.beginPath();
					context.setLineWidth(lineWidth);
					context.setStrokeStyle("#FFFFFF");

					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();
			},

			toPage() {
				let imei = this.deviceInfo.deviceId;
				let ccid = this.deviceInfo.ccid;
				this.closeSocket();
				uni.navigateTo({
					url: '/pages/weitiandi/device/index?id=' + imei + '&ccid=' + ccid
				});
			},
      toSetting(){
        let imei = this.deviceInfo.deviceId;
        let ccid = this.deviceInfo.ccid;
        this.closeSocket();
        uni.navigateTo({
          url: '/pages/weitiandi/device/setting?id=' + imei + '&ccid=' + ccid
        });
      },
			i18(text) {
				return i18(text)
			},
			planCharge() {
				if (this.planInfo != null) {
					this.$modal.confirm("确认取消预约？").then(res => {
						this.cancelPlan();
					})
				} else {
					this.toPlan()
				}
			},
			cancelPlan() {
				cancelPlan(this.planInfo.id).then(res => {
					this.$modal.msg("取消成功");
					this.planInfo = null;
					this.getPlanInfo();
				})
			},
			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;
						}
					}
				})
			},
			startTimer() {
				let self = this;
				if (this.refreshTimer != null) {
					clearTimeout(this.refreshTimer);
				}
				self.refreshTimer = setTimeout(function() {
					self.getInfo();
					self.startTimer();
				}, 30000);
			},
			confirmPort(e) {
				let value = e.value[0]
				this.choosePort = value.port;
				this.showPort = false;
				this.getInfo()
			},
			parsePortCmd(real_data) {
				let self = this;
				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);
				}
			},
			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.parsePortCmd(real_data);
					}
					if (type == 116) {
						self.$modal.closeLoading();
						self.getInfo();
					}
					if (type == 113) {
						self.$modal.closeLoading();
						self.getInfo();
					}
					if (type == 96) {
						self.mainBoardInfo = real_data;
						self.formatMainboardData();
						self.$modal.closeLoading();
					}
					self.$forceUpdate();
					console.log('收到服务器内容：' + JSON.stringify(data));
				});
				scriptTask.onClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},
			toSet() {
				this.closeSocket();
				uni.navigateTo({
					url: '/pages/weitiandi/device/setting?id=' + this.deviceInfo.deviceId + "&ccid=" + this
						.deviceInfo.ccid
				});
			},
			toPlan() {
				uni.navigateTo({
					url: '/pages/weitiandi/device/plan?port=' + this.choosePort + '&id=' + this.deviceInfo
						.deviceId + "&ccid=" + this.deviceInfo.ccid
				});
			},
			trigger() {
					
				let portStatus = this.portDetail.portStatus;
				if (portStatus == 2) { //需要停止充电
					this.$modal.confirm("需要停止充电么？").then(res => {
						this.stopCharge();
						this.drawCircle(0);
					})
				} else {
					if (portStatus == 1) {
						this.$modal.msg("请先将充电枪插入后再点击充电");
					}
					if (portStatus == 5) {
						this.$modal.confirm("确认开始充电么？").then(res => {
							this.startCharge();
						this.drawCircle(100); //参数为1-100
						})
					}

				}
			},
			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)
				})
			},
			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;
			},
			closeSocket() {
				this.scriptTask.close();
				this.scriptTask = null;
			},
			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);
			},
			wifi() {
				uni.navigateTo({
					url: '/pages/bluetooth/index/wifi'
				});
			},
		}
	}
</script>

<style>
	.container {
		/* //background: rgb(208, 208, 208); */
		background-image: url('../../../static/images/new/starts/bg1.jpg');
		inset: 0;
		position: absolute;
		background-size: cover;
		background-repeat: no-repeat;
	}
.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; */
		width: 35vh;
		height: 35vh;
		/* background-color: red; */
		display: inline-block;
		align-items: center;
		justify-content: center;
		text-align: center;

	}

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

	.progress_bg {
		position: absolute;
		width: 30vh;
		height: 30vh;
	}

	.progress_txt {
		position: absolute;
		font-size: 28upx;
		margin-top: 54px;
		margin-left: 74px;
		color: #999999;
	}

	.progress_bar {
		position: absolute;
		width: 30vh;
		height: 30vh;
	}

	.progress_line {
		position: absolute;
		width: 30vh;
		height: 30vh;
	}

	.progress_info {
		font-size: 25upx;
		/* padding-left: 16upx; */
		letter-spacing: 2upx;
	    margin: 1vh 0vh 0vh -3vh;
	}

	.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: 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;
	}

	/* 顶部的两个旋转小球 */
	.top_ball {
		width: 200px;
		height: 200px;
		border-radius: 35%;
		opacity: 0.5;
		position: absolute;
		top: 20px;
		z-index: 10;
		/* 从中心向外剪切圆，相当于掏空 */
		-webkit-mask: radial-gradient(transparent 95px, white 0px);
	}

	/* 顶部的两个旋转小球 */
	.top_ball.one {
		background: var(--c);
		animation: ballZhuan 5s linear infinite;
	}

	/* 顶部的两个旋转小球 */
	.top_ball.two {
		background: var(--c);
		animation: ballZhuan 8s linear infinite;
	}

	.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-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: 4px 0;
	}

	.item-text {
		font-size: 11px;
		margin: 1px 0;
		color: #999999;
	}

	.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;
		/* margin-left: -1vh;; */
	}

	.stip {
		text-align: center;
		z-index: 9999;
	}
</style>