ProAdvanced/pages/personal-page/personal/personal.vue

<template>
	<view class="content bg-person " :class="bEFHitShake?' screen-jitter ':''">
		<!-- :title="title" @clickRight="onNavAppInfo()" -->
		<!-- 自定义导航栏 backgroundColor="rgba(164, 136, 220, 1)"  @clickRight="onSyncData" @clickRight="onTestShare"-->
		<uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)"
			@clickLeft="showClickEvent()" title="PK模式" color="#FFFFFF" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="png-more" src="/static/more.png"></image>
				</view>
			</view>
			<!-- @clickRight="onNavFcGame()" -->
			<view slot="right">
				<view style="position: relative; border: 1rpx solid #FFFFFF;">
					<view
						style="position: absolute;top: 0;left: -155rpx;right: 0;bottom: 0;margin: auto; width: 194rpx;height: 52rpx; border-radius: 26rpx 0 0 26rpx; background-color: rgba(255,255,255,0.12);"
						class="flex align-center justify-center">
						<image style="width: 26rpx;height: 24rpx; margin-right: 12rpx;"
							src="/static/personal/linkWhite.png"></image>
						<view class="text-14px ">连接设备</view>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<!-- 导航栏下面滚动区域 -->
		<scroll-view class="scroll-class" @scroll="mainScroll" :scroll-top="scrollTop" :scroll-into-view="toView"
			scroll-y="true" :style="{ height: scrollviewHight + 'px' }">
			<view class="flex align-center">
				<view class="justify-center">
					<!-- 计划显示 区域 topScrollHight :style="{ height: + '100%' }"-->
					<scroll-view scroll-y="true" style="height: 100%; width: 100%;">
						<view class="plan-view">
							<!-- 拳击模块 -->
							<view v-if="currentMode == 'pkMode' && 0 === currentModeIndex"
								style="display: flex; flex-direction: row; height: 200rpx; margin-top: 140rpx; justify-content: space-around;align-items: center;">
								<view>
									<view class="cu-avatar-group" style="position: relative;">
										<view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
											:style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
										<HitEffect ref="aiHitEffectRef"></HitEffect>
									</view>
									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
										{{userName}}
									</view>
								</view>

								<view>
									<image style="width: 104rpx; height: 42rpx ;margin-bottom: 60rpx;"
										src="/static/personal/pk@2x.png"></image>
								</view>
								<view>
									<view class="cu-avatar-group" style="position: relative;">
										<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
											:style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
										<HitEffect ref="hitEffectRef"></HitEffect>
									</view>
									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
										{{aiObj.name}}
									</view>
								</view>

								<view
									style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
									<HitFistEffect ref="hitFistRef"></HitFistEffect>
								</view>

							</view>

							<!-- pk模式下的跳绳 -->
							<view v-if="currentMode == 'pkMode' && 1 === currentModeIndex" class="flex justify-around "
								style="height: 180rpx; margin-top: 20rpx; ">
								<view class="flex flex-direction justify-center align-center">
									<view class="cu-avatar-group" style="position: relative;">
										<view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
											:style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
										<HitEffect ref="aiHitEffectRef"></HitEffect>
									</view>
									<view style="margin-top: 20rpx; width: 165rpx; "
										class="text-cut text-white text-center">
										{{userName}}
									</view>
								</view>

								<view class="flex justify-center align-center ">
									<LEDFont style="" :showValue='99' :size="30" color='#FFFFFF'>
									</LEDFont>
									<view class="text-white text-bold">:</view>
									<LEDFont style="" :showValue='99' :size="30" color='#FFFFFF'>
									</LEDFont>
								</view>
								<view v-if="friendObj" class="flex flex-direction justify-center align-center">
									<view class="cu-avatar-group" style="position: relative;">
										<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
											:style="[{ backgroundImage:'url('+friendObj.avatar+')' }]"></view>
										<HitEffect ref="hitEffectRef"></HitEffect>
									</view>
									<view style="margin-top: 20rpx; width: 165rpx;"
										class="text-cut text-white text-center">
										{{friendObj.name}}
									</view>
								</view>
								<view v-else  class="flex flex-direction justify-center align-center" @click="onNavToSelectFriend()">
									<image style="width: 100rpx ;height: 100rpx;" src="/static/friend/friend-add.png"></image>
									<view style="margin-top: 20rpx; width: 165rpx;"
										class="text-cut text-white text-center">
										选择好友
									</view>
								</view>

								<view
									style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
									<HitFistEffect ref="hitFistRef"></HitFistEffect>
								</view>

							</view>

							<!-- 圆形进度条 -->
							<view
								v-if="(currentMode == 'pkMode' && 1 === currentModeIndex)||currentMode== 'calorieMode'"
								class="qiun-charts-arcbar">
								<!-- 进度条 -->
								<canvas canvas-id="canvasArcbar" id="canvasArcbar" class="charts-arcbar "></canvas>
								<!-- 图标 -->
								<view class="personal-fruit-container">
									<image style="width: 36rpx;height: 56rpx; margin-top: -100px;"
										src="../../../static/modal/action-jump/arcbarJumpIcon.png"></image>
								</view>
								<!-- 水果卡路里-->
								<!-- <view class="personal-fruit-container">
									<fruit ref="personalFruitRef" :calorie="planData.allCalorie"></fruit>
								</view> -->

								<!-- 计划运动时间提示 -->
								<view class="personal-fruit-container">
									<LEDFont style="margin-top: 50px;" :showValue='99' :size="66" color='#FFFFFF'>
									</LEDFont>
									<!-- <view style="margin-top: 130px;font-size:12px;color: #FFFFFF;">计划时间{{planData.sportTime}}分钟</view> -->
								</view>
								<!-- 计划按钮 -->
								<!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
									<view class="flex justify-center" style="width: 100%;">
										<view class="charts-pring-button  make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
										 @tap="openPlan">
											<image src="/static/reform.png" class="p-data-png" mode="aspectFit"></image>
											<view class="text-11px">改计划</view>
										</view>
									</view>
								</view> -->

								<!-- 计时器 -->
								<view class="personal-fruit-container">
									<arcbarCountDown style="margin-top: 200px;" ref="arcbarCountDownRef"
										:show-day="false" :second="0" color="#FFFFFF"
										background-color="rgba(255,255,255,0);" border-color="#007AFF"
										splitorColor="#FFFFFF" />
								</view>


								<!-- 卡路里提示 -->
								<view class="personal-fruit-container">
									<prompt-box :calorie="planData.allCalorie"></prompt-box>
								</view>
							</view>
							<!-- 钻石和金币部分 -->
							<view class="charts-pring-bottom" style="margin-top: 34rpx;">
								<view class="flex justify-center align-center"
									style="height: 52rpx; width: 412rpx; background-color: rgba(255,255,255,0.11); border-radius: 12rpx;">
									<view class=" flex align-center justify-center" style="color: #fff;">
										<view class="flex  align-center">
											<image class="png-more" style="margin-right: 18rpx;"
												src="/static/personal/cDiamond.png"></image>
											<view>{{cDiamond}}</view>
										</view>
										<view class="flex  align-center" style="margin-left: 60rpx;">
											<image class="png-more" style="margin-right: 18rpx;"
												src="/static/personal/cGold.png"></image>
											<view>{{cGold}}</view>
										</view>
									</view>
								</view>
							</view>

							<!-- 计划按钮 -->
							<!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
								<view class="flex justify-center" style="width: 100%;">
									<view class="charts-pring-button  make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
									 @tap="openPlan">
										<image src="/static/reform.png" class="p-data-png" mode="aspectFit"></image>
										<view class="text-11px">改计划</view>
									</view>
								</view>
							</view> -->

							<!-- 用于定位 -->
							<!-- <view id="boxingHitID" style="position: absolute;top: 180rpx; pointer-events: none;" ></view> -->
							<view id="boxingHitID" v-if="currentModeIndex == 0" class="charts-pring-bottom">
								<!-- 添加一个 ConnectBindingDevice 测试 -->
								<boxing-hit ref="boxingPostRef"
									:bUpdate="!bHide&&(ConnectBindingDevice!=null)||(cIndex!=-1 && BLEConnectDevice!=null &&
								 (BLEConnectDevice.deviceType == 'mySelf'||BLEConnectDevice.deviceType == 'BLEHandle' || BLEConnectDevice.deviceType == 'BLERope' ))"
									:showTime="localSportTime"
									:bRebound="BLEConnectDevice&&BLEConnectDevice.limitType == 'rebound'"
									@updateCalorie="boxingUpdateCalorie" @boxingPostCheck="onPersonalCheck"
									@shake="onScreenShake" @updateSportTime="onUpdateSportTime"
									@boxingGuideFinish="onBoxingGuideFinish"
									@boxingPostControlPlay="onBoxingPostControlPlay" @modeEvent="onModeEvent"
									@hitEvent="onHitEvent" @aiHitEvent="onAiHitEvent" @gameOver="onBoxingGameOver"
									@closeBoxingControl="onCloseBoxingHit"></boxing-hit>

							</view>

							<view id='actionJumpID' v-if="true" class="charts-pring-bottom">
								<action-jump ref="actionJumpRef" @actionJumpCheck="onPersonalCheck"
									@actionJumpControllerPlay="onBoxingPostControlPlay"></action-jump>
							</view>
							<!-- <button @tap="onTestAddLocalCalorie">11</button> -->
						</view>

					</scroll-view>
					<!-- <view class="margin flex flex-direction">
						<view class="title">当前游戏链接：{{LocationGameUrl}}</view>
						<input style="border: 1rpx solid #000000;margin: 10rpx;" @input="onKeyInput" placeholder="输入同步到view中" />
					</view> -->
					<!-- <button  @tap="onShowBoxingHitTip">11</button> -->
					<!--数据展示部分 -->
					<view class="bottom-view" style="position: relative;">
						<view
							style="position: absolute; z-index: 1; background-color: #FFFFFF; width: 100%; height: 217px; "
							class="flex justify-center">
							<view
								style="border: 3px solid #9797ff; width: 35px; height: 3px; border-radius: 5px; margin-top: 9px;">
							</view>
						</view>
						<view style="height: 26px ;"></view>

						<view class="card-view">
							<view class="flex justify-between margin-top margin-left">
								<view class="flex justify-start">
									<image src="/static/sync.png" class=" data-png" mode="aspectFit" @tap="onSyncData">
									</image>
									<view class="text-gray" style="margin-left: 10rpx;">{{ currentDate }}同步</view>
								</view>
								<!-- <view class="flex justify-start margin-right">
									<view class="text-gray">标准体重:</view>
									<view class="make-text-bPurple" style="margin-left: 10rpx;">120斤</view>
								</view> -->
							</view>
							<view class="text-xl padding text-center">
								<view class="make-text-bPurple">
									{{ weight }}公斤
									<!-- <span class="text-11px text-gray "> (过重)</span> -->
								</view>
							</view>
							<!-- 曲线图绘制部分 -->
							<view class="qiun-charts-area">
								<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-area"
									@touchstart.prevent="touchLineA" @touchmove.prevent="moveLineA"
									@touchend.prevent="touchEndLineA"></canvas>
							</view>
							<view class="bg-white qiun-charts-bottom-container">
								<view class="avatar-bg-arrow"></view>
								<view class="avatar-bg-personal">
									<image mode="aspectFit" :src="avatarUrl"
										style="width: 100%;height: 100%; border-radius: 45px;background-color: #000000;">
									</image>
								</view>
								<view class="qiun-charts-bottom-right" @tap.prevent="showModal"
									data-target="bottomModal">
									<image src="/static/weightEdit.png" class="png-size-34" mode="aspectFit"></image>
								</view>
							</view>
						</view>

						<view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''">
							<view class="cu-dialog"
								style=" border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;">
								<myPicker :pickerObj="pickerObj" @confirmEvent="onConfirm" @cancelEvent="hideModal">
								</myPicker>
							</view>
						</view>

						<view class="card-view">
							<!-- 累计消耗和计划 -->
							<view class="flex margin-top-sm margin-bottom-sm justify-center">
								<view class=" padding-sm margin-right plan-l-tip-view flex align-center">
									<image src="/static/middlePlant.png" class="data-png-26 margin-sm" mode="aspectFit">
									</image>
									<view class="flex justify-start flex-direction">
										<text
											style="text-align: start; line-height: 24px; font-weight: 400;">累计消耗</text>
										<view class="text-11px "
											style="text-align: start;font-weight: 400; line-height: 28px;">
											{{ planData.cumulativeCalorie }}/ka
										</view>
										<view class="text-gray" style="font-size: 10px;">始于{{ planData.startTime }}
										</view>
									</view>

								</view>
								<view style="height: 56px; width: 1rpx;margin-top: 16px; background-color: #EEEEEE;">
								</view>
								<view
									class="padding-sm margin-left-xs margin-right-xl plan-r-tip-view  flex align-center">

									<image src="/static/middleDay.png" class="data-png-26 margin-sm" mode="aspectFit">
									</image>
									<view class="flex justify-start flex-direction">
										<text style="text-align: start; line-height: 24px;font-weight: 400;">剩余天数</text>
										<view class="text-11px "
											style="text-align: start;font-weight: 400;line-height: 28px;">
											{{ remainingDays }}/day
										</view>
										<view class="text-gray" style="font-size: 10px;">计划天数{{ days }}</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 添加设备部分 -->
						<view class="card-view">
							<view class="text-left padding margin-xs flex justify-between">
								<text class="text-black text-15px  margin-left">我的设备</text>
								<!-- <view @tap="onNavToMore" class="flex  text-center justify-center align-center  margin-right">
									<text class="text-gray text-11px">查看更多</text>
									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx;" src="/static/right-g.png"></image>
								</view> -->

							</view>
							<!-- 绑定的设备列表 拳击柱-->
							<!-- <view class="container-device">
								<view class="width-device flex align-center" v-for="(item, index) in DeviceBindingList" :key="index" @tap="onBindingDevice(item, index)"
								 :data-index="index" :id="'bing-'+item.ename">

									<view style="position: relative; height: 100%;">
										<image :src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'" class="data-png-64" mode="aspectFit"></image>
										<image :src="index == cIndex ?item.icon:item.mIcon" class="data-png-add" mode="aspectFit"></image>
									</view>

									<view class="flex-sub text-center">
										<image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'" class="data-png-32" mode="aspectFit"></image>
										<view class="text-gray">{{ item.cname }}</view>
									</view>
								</view>
								<view id="QRDeviceView" class="width-device flex align-center" @tap="openQRCode">
									<view style="position: relative;height: 100%;">
										<image src="/static/deviceBg.png" class="data-png-64" mode="aspectFit"></image>
										<image src="/static/deviceAdd.png" class="data-png-add" mode="aspectFit"></image>
									</view>

									<view class="flex-sub text-center">
										<view class="text-gray">扫码添加设备</view>
									</view>
								</view>
							</view> -->
							<!-- 开启手机加速计和陀螺仪数据 -->
							<!-- <view class="container-device" id="openAccGyroView">
								<view class="width-device flex align-center" v-for="(item, index) in DeviceBindingList" @tap="onBindingDevice(item, 0)"
								 :key="'key-'+index" :id="'bing-'+item.ename">

									<view style="position: relative; height: 100%;">
										<image :src="ConnectBindingDevice? '/static/deviceBg.png' : '/static/deviceBg_off.png'" class="data-png-64"
										 mode="aspectFit"></image>
										<image :src="ConnectBindingDevice?item.icon:item.mIcon" class="data-png-add" mode="aspectFit"></image>
									</view>

									<view class="flex-sub text-center">
										<image :src="ConnectBindingDevice? '/static/wifi_on.png' : '/static/wifi_off.png'" class="data-png-32" mode="aspectFit"></image>
										<view class="text-gray">{{ item.cname }}</view>
									</view>
								</view>
							</view> -->
							<!-- 隐藏设备处 -->
							<view class="container-device">
								<view class="width-device flex align-center" v-for="(item, index) in BLEDeviceShowList"
									:key="index" @tap="onDevice(item, $event)" :data-index="index">
									<view style="position: relative; height: 100%;">
										<image
											:src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'"
											class="data-png-64" mode="aspectFit"></image>
										<image :src="item.mIcon" class="data-png-add" mode="aspectFit"></image>
									</view>

									<view class="flex-sub text-center">
										<image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'"
											class="data-png-32" mode="aspectFit"></image>
										<view class="text-gray">{{ item.cname }}</view>
									</view>

									<view style="position: absolute;right: 0;top: 0;"
										@tap.stop="onCloseDevice(item, $event)" :data-index="index">
										<image :src="index == cIndex ? '/static/d_on.png' : '/static/d_off.png'"
											class="data-png-26" mode="aspectFit"></image>
									</view>
								</view>
								<view id="addDeviceView" class="width-device flex align-center" @tap="openDeviceList">
									<view style="position: relative;height: 100%;">
										<image src="/static/deviceBg.png" class="data-png-64" mode="aspectFit"></image>
										<image src="/static/deviceAdd.png" class="data-png-add" mode="aspectFit">
										</image>
									</view>

									<view class="flex-sub text-center">
										<view class="text-gray">添加设备</view>
									</view>
								</view>
							</view>

						</view>

						<!-- 游戏推荐 -->
						<view class="card-view"
							v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showGame && gameList.length !== 0)">
							<view class="text-left padding margin-xs flex justify-between">
								<text class="text-black text-15px margin-left">游戏推荐</text>
								<view data-type="game" @tap="onNavToGameMore"
									class="flex text-center justify-center align-center margin-right">
									<view class="text-gray text-11px " style=" line-height: 12px; ">查看更多</view>
									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; "
										src="/static/right-g.png"></image>
								</view>
							</view>
							<view class="cu-item shadow">
								<view class="cu-form-group margin-top">
									<view class="grid col-3 homepage-grid-square flex-sub ">
										<view v-for="(item, index) in gameList" :key="index" @tap="onNavDetail(item)">
											<image class="item-img" :src="item.gamePicture" mode="aspectFill"></image>
											<view class="border text-center">{{ item.gameName }}</view>
										</view>
									</view>
								</view>
							</view>

							<!-- <view @tap="onNavToGameMore" class="flex  text-center justify-center align-center padding-lg make-text-bPurple solid-top margin text-15px text-bold">
								查看更多
								<image style="margin-left: 20rpx; width: 28rpx;height: 28rpx;" src="../../../static/right-d.png"></image>
							</view> -->
						</view>
						<!-- <button class="margin" @click="onWriteBLEConnectionValue({value:'V'})">设备版本</button> -->
						<!-- <button class="margin" @click="openAcc">开启手机加速计和方向传感器</button> -->
						<!-- <button class="margin" @click="closeAcc">关闭手机加速计和方向传感器</button> -->
						<!-- <button class="margin" @click="openGyro">开启手机加速计和方向传感器</button> -->
						<!-- <button class="margin" @click="stopGyro">关闭手机加速计和方向传感器</button> -->
						<!-- <button class="margin" @click="getBLEDeviceServices">getBLEDeviceServices</button> -->

						<!-- <keyboard-listener @keydown="onKeyDown"></keyboard-listener> -->
						<!-- 	<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
						<button type="primary" @click="startSyncFunc">startSyncFunc</button>
						<button type="primary" @click="stopSyncFunc">stopSyncFunc</button> -->
						<!-- 视频推荐 -->
						<view class="card-view"
							v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showVideo && videoList.length !== 0)">
							<view class="text-left padding margin-xs flex justify-between">
								<text class="text-black text-15px margin-left">视频推荐</text>
								<view data-type="video" @tap="onNavToGameMore"
									class="flex text-center justify-center align-center margin-right">
									<view class="text-gray text-11px " style=" line-height: 12px; ">查看更多</view>
									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; "
										src="/static/right-g.png"></image>
								</view>
							</view>
							<view class="cu-item shadow">
								<view class="cu-form-group margin-top">
									<view class="grid col-3 homepage-grid-square flex-sub ">
										<view v-for="(item, index) in videoList" :key="index" @tap="onNavDetail(item)">
											<image class="item-img" :src="item.gamePicture" mode="aspectFill"></image>
											<view class="border text-center">{{ item.gameName }}</view>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部中间上滑按钮 -->
		<view
			style="z-index: 10; position: absolute;bottom: -10px;right: 0;left: 0; margin: auto; width: 750rpx; height: 68rpx; "
			class="flex flex-direction justify-center align-center">
			<image style="width: 156rpx; height: 32rpx;" src="../../../static/personal/slideUp.png" @tap="showModal"
				data-target="slideUpModal"></image>
			<view style="width: 100%;,height: 36rpx; background-color: #FFFFFF; color: #FFFFFF;">0</view>
		</view>

		<!-- 右下角导航栏 -->
		<!-- <round-menu @trigger="onRoundTrigger"></round-menu> -->
		<!-- 底部操作条 -->
		<!-- <myTabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" ></myTabbar> -->

		<!-- 侧边栏 -->
		<sideBar ref="sideBar"></sideBar>

		<!-- 训练卡 -->
		<view class="cu-modal" :class="modalName == 'sportCompletion' ? 'show' : ''">

			<view style="
			position: relative; 
			width: 586rpx;
			height: 766rpx;
			background-color: #FFFFFF; 
			border-radius: 25px;
			display: inline-block;
			vertical-align: middle;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;">
				<view style="position: relative; width: 100%; height: 328rpx;">
					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
						src="../../../static/sidebar_top_bg.png"></image>
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 100%;">
						<view class="text-white">已在哔嘣健身训练了</view>
						<view class="text-white"><span style="font-size: 43px;">{{sportData.time}}</span> 分钟</view>
						<view class="text-white">本次达标率{{sportData.percent}}%</view>
					</view>
				</view>
				<view class="flex justify-around">
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 162rpx;">
						<view class="text-grey">消耗</view>
						<view class="text-grey"><span
								style="font-size: 18px; color: #000000;">{{sportData.calorie}}</span> 卡</view>
					</view>
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 162rpx;">
						<view class="text-grey">踩中</view>
						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.hit}}</span>
							次</view>
					</view>
					<view class="flex flex-direction justify-around align-center"
						style="position: relative; height: 162rpx;">
						<view class="text-grey">失误</view>
						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.miss}}</span>
							次</view>
					</view>
				</view>
				<view class="flex flex-direction justify-around align-center margin-top-sm">
					<view style="position: relative; width: 500rpx; border:1rpx solid #EEEEEE ;"></view>
				</view>
				<view class="flex flex-direction justify-around align-center" style="height: 230rpx;">
					<view class="text-black text-16px">非常优秀，继续加油!</view>
					<view class="flex justify-center align-center text-white make-bg-bPurple round text-16px"
						style="width: 300rpx;height: 80rpx;" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
		<!-- :class="modalName == 'jumpAnimation' ? 'show' : ''" -->
		<view class="cu-modal " :class="modalName == 'jumpAnimation' ? '' : ''">

			<view style="
			position: relative; 
			width: 586rpx;
			height: 400rpx;
			background-color: #FFFFFF; 
			border-radius: 4px;
			display: inline-block;
			vertical-align: middle;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;">
				<view style="height: 100%;display: flex;justify-content: center;align-items: center;">
					<character></character>
				</view>
			</view>
		</view>

		<!-- 引导蒙层 bGuidePages guideCurrent-->
		<code-elf-guide ref="codeElfGuide" v-if="bGuidePages" @hide="guideHide" @change="onGuideChange"
			:current="guideCurrent" :currentMode="currentMode"></code-elf-guide>

		<!-- <view v-if="bStartBoxingPost" class="CountDownMask">
			{{BoxingPostCountDownText}}
		</view> -->

		<view class="cu-modal " :class="modalName=='showPlanTipModal'?'show':''"
			@touchmove.stop.prevent="moveBoxingHandle">
			<view class="cu-bind-modal">
				<view style="position: absolute; top: 0; left: 0; width: 100%; height:100%;">
					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
						src="/static/modelBg.png"></image>
				</view>
				<view class="flex flex-direction justify-between " style="position: relative; height: 100%;">
					<view class="flex justify-around justify-center align-center" style="margin: 170rpx 30rpx 0 30rpx;">
						<view style="width: 80rpx;height: 2rpx;border-radius: 2px; background-color: #cbcdcf;"></view>
						<view class="make-text-bPurple" style=" font-size: 20px;">提示</view>
						<view style="width: 80rpx;height: 2rpx;border-radius: 2px;background-color: #cbcdcf;"></view>
					</view>
					<view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">
						{{planTip[planTipIndex]}}
					</view>

					<view class="flex justify-around align-center"
						style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;"
							@tap="hidePlanTipModal">取消</view>
						<view style="height: 123rpx;width: 1px;background-color: #EEEEEE;"></view>
						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;"
							@tap="confirmPlanTipModal">确定</view>
					</view>
				</view>


			</view>
		</view>

		<ModalTip ref='modalTipRef' :class="modalName=='showModalTip'?' show':''" @hide="onModalTipHide"
			@confirm="onModalTipConfirm"></ModalTip>

		<!-- 任务栏 -->
		<view class="cu-modal bottom-modal" :class="modalName=='slideUpModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg-white" style=" border-radius: 15px 15px 0 0 ;" @tap.stop="">
				<view class="flex justify-center align-center" style="width: 100%; height: 60rpx;" @tap="hideModal">
					<view class="text-blue make-bg-bPurple radius" style="width: 80rpx; height: 4px;"></view>
				</view>
				<view class="flex justify-between" style="width: 100%; padding: 34rpx 60rpx 46rpx 81rpx;">
					<view class="flex align-center justify-center" >
						<view class="text-16px text-bold make-text-bPurple" style="line-height: 32rpx;  margin-right: 18rpx;">PK模式</view>
						<image style="width: 42rpx;height: 24rpx;" src="/static/common/modal/right-arrow.png"></image>
					</view>
					<view>
						<button class="make-bg-bPurple flex justify-center align-center" >
							<view class="flex align-center justify-center" style="width: 190rpx;height: 60rpx;">
								<image style="width: 24rpx;height: 22rpx; margin-right: 18rpx;"
									src="/static/personal/switchWhite.png"></image>
								<view class="text-14px text-white" style="line-height: 28rpx;">健身模式</view>
							</view>
						</button>
					</view>
					
				</view>
				<view class="my-column-cu-steps">
					<view class="cu-item" :class="index>basics?'':'make-text-bPurple'"
						v-for="(item,index) in basicsList" :key="index">
						<!-- <text :class="'cuIcon-' + item.cuIcon"></text> -->
						<image v-if="index>basics" class="my-column-cu-image"
							src="../../../static/common/modal/lock.png"></image>
						<image v-else class="my-column-cu-image" src="../../../static/common/modal/unLock.png"></image>
						<view class="content">
							<!-- 这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ -->
							<view class="text-15px text-bold text-cut text-left "
								style="margin-left: 48rpx; width: 360rpx;">
								{{index+1}}. 拉伸运动拉伸运动拉伸运动拉伸运动
							</view>
							<view class="flex justify-start align-center" style="margin-left: 86rpx;">
								<!-- 居中绘制星星样式 -->
								<view class="flex align-center justify-center"
									style="margin-right: 36rpx;margin-top: 4rpx;">
									<image style="width: 24rpx;height: 26rpx; margin-right: 18rpx;"
										src="/static/common/modal/reward.png"></image>
									<view class="text-13px" style="line-height: 26rpx;">{{cDiamond}}</view>
								</view>
								<view class="flex flex-direction align-center" v-for="(item, index) in 5" :key="index">
									<image style="width: 34rpx;height: 32rpx;"
										src="../../../static/modal/action-jump/stars.png">
									</image>
								</view>
							</view>
							<view class="text-13px text-grey text-left" style="margin: 20rpx 20rpx 0 86rpx;">
								本关卡是为了让用户开始放松，需要在两分钟内跳100下</view>
						</view>

						<image class="my-column-cu-right-image" src="../../../static/common/modal/medal.png"></image>

					</view>
				</view>

				<button class="cu-btn make-bg-bPurple text-white" style="width: 604rpx;height: 88rpx;margin-bottom: 32rpx;" @tap="BasicsSteps">开始</button>

			</view>
		</view>


	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	import myPicker from '@/components/slambb-picker/slambb-picker.vue';
	import pickerData from '@/components/slambb-picker/picker.js';
	import date from '@/util/util-js/date.js';
	import sideBar from '@/components/side-bar/side-bar.vue';

	import reqUtil from '@/util/util-js/requstUtil.js';
	import config from '@/common/config.js';

	import uniCountDown from '@/components/uni-count-down/uni-count-down.vue'

	import elect from "@/components/electAni/electAnimation.vue"
	import character from "@/components/electAni/character.vue"
	import fruit from "@/components/fruitMachine/fruitMachine.vue"

	import promptBox from "@/components/prompt-box/prompt-box.vue"

	import roundMenu from "@/components/round-menu/round-menu.vue"
	import myTabbar from "@/components/hans-tabbar/hans-tabbar.vue"

	import codeElfGuide from '@/components/code-elf-guide/code-elf-guide.vue'

	import boxingPost from "@/components/modal/boxing-post/boxing-post.vue"

	import boxingHit from "@/components/modal/boxing-hit/boxing-hit.vue"

	import actionJump from "@/components/modal/action-jump/action-jump.vue"

	import AccAndOri from "@/util/util-js/AccAndOri.js"

	import AvatarConfig from "@/util/util-js/avatar.js"

	import HitEffect from "@/components/effectHit/hitEffect.vue"
	import HitFistEffect from "@/components/effectHit/hitFistEffect.vue"

	import ModalTip from "@/components/modal-tip/modalTip.vue"

	import keyboardListener from '@/components/keyboard-listener/keyboard-listener.vue'

	import LEDFont from '@/components/LEDFont/LEDFont.vue'

	import arcbarCountDown from '@/components/uni-count-down/uni-count-down.vue'

	// 获取 module 
	// var testModule = uni.requireNativePlugin("MyAttitude")
	// const modal = uni.requireNativePlugin('modal');


	import {
		mapState,
		mapMutations
	} from 'vuex';

	var _self;
	var canvaArcbar1;
	var canvaLineA = null;
	var sportSpeedInterval = null;
	var personalAcc = null;

	export default {
		computed: mapState(['bCanvasShow', 'forcedLogin', 'hasLogin', 'userName', 'avatarUrl', 'days', 'remainingDays',
			'signature', 'weight', 'height', 'planData', 'BLEDeviceShowList', 'BLEConnectDevice', 'bPlanExpired',
			'bPlanFinish',
			'bGuidePages',
			'globalAcc', 'globalOri', 'DeviceBindingList', 'ConnectBindingDevice', 'cIndex', 'bNewGuide',
			'localSportTime',
			'currentModeIndex', 'oldArcbarProCalorie', 'oldArcbarAllCalorie', 'bOpenBluetooth', 'bOpenSuccess',
			'bListenAdapterStateChange', 'bConnection', 'bVerifiedConnection', 'currentInstruction',
			'instructionState',
			'LocationGameUrl',
			'bPhoneMatched',
			'versionCodeState',
			'platform',
			'cDiamond', 'cGold'
		]),
		components: {
			uniNavBar,
			myPicker,
			sideBar,
			uniCountDown,
			elect,
			character,
			fruit,

			roundMenu,
			myTabbar,

			codeElfGuide,
			boxingPost,
			boxingHit,
			promptBox,
			HitEffect,
			HitFistEffect,
			ModalTip,
			keyboardListener,

			actionJump,
			LEDFont,
			arcbarCountDown
		},

		data() {
			return {
				title: 'pk模式', //pk模式 健身模式
				modalName: null,
				originalDate: '', //记录new date
				currentDate: '', //当前日期
				cWidthArcbar: '', //圆弧进度图
				cHeightArcbar: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio: 1,
				// textarea: '',
				// arcbarImagePath: '/static/logo.png',
				cWidth: '',
				cHeight: '',
				scrollviewHight: '',
				// 顶部区域部分
				topScrollHight: '',
				// 选择器
				pickerObj: {},
				// lineAImagePath: '/static/logo.png',
				// visible: true,
				// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
				//设备列表
				deviceList: [{
					name: '蹦床',
					icon: '/static/trampoline.png'
				}],
				cState: 1,
				//游戏列表
				gameList: [],
				//视频列表,现在视频是和游戏一起管理
				videoList: [],
				//运动数据
				sportData: {
					calorie: 0,
					hit: 0,
					miss: 0,
					percent: 0,
					time: 0,
					allData: 0
				},

				//设置滚动栏高度
				scrollTop: 0,
				//scroll view 跳转到对应的组件上
				toView: '',
				guideCurrent: 0,

				bHide: false,

				//屏幕抖动
				bEFHitShake: false,
				bStartBoxingPost: false,
				BoxingPostCountDownText: 3,
				b_countDown: null,

				countDownUrl: [
					"/static/personal/audio/GO.mp3",
					"/static/personal/audio/1.mp3",
					"/static/personal/audio/2.mp3",
					"/static/personal/audio/3.mp3"
				],
				threeUrl: "/static/personal/audio/3.mp3",
				twoUrl: "/static/personal/audio/2.mp3",
				oneUrl: "/static/personal/audio/1.mp3",
				goUrl: "/static/personal/audio/GO.mp3",

				dangdang: "/static/personal/audio/dangdang.mp3",
				personalAudioContext: null,

				planTip: [
					'您今天的目标已经达成,是否进行自由训练.',
					'您今天的目标还没完成,是否结束训练.'
				],
				planTipIndex: 0,

				//匹配的ai信息
				aiObj: {
					name: '匿名',
					avatar: '/static/defaultAvatar.png'
				},
				aiOldObj: {
					name: '匿名',
					avatar: '/static/defaultAvatar.png'
				},
				//pk的信息。好友pk
				friendObj:null,
				friendDefaultObj:{
					name: '名字',
					avatar: '/static/defaultAvatar.png'
				},
				
				currentMode: 'pkMode', //pkMode calorieMode

				bHitShake: false,

				bAiHitShake: false,
				//限制重连，比如去了对应硬件连接页面，限制这个页面的重连操作
				bLimitReconnection: false,

				/**
				 * 首页这里连接了蓝牙，然后选择框回来后show会触发，触发时候检测一下是否有对应的
				 * 匹配蓝牙
				 */
				bGetBondTesting: false,

				basicsList: [{
						cuIcon: 'usefullfill',
						name: '开始',
						bLock: false,
					}, {
						cuIcon: 'radioboxfill',
						name: '等待',
						bLock: true,
					},
					{
						cuIcon: 'roundclosefill',
						name: '错误'
					}, {
						cuIcon: 'roundcheckfill',
						name: '完成'
					},
				],
				basics: 1,
			};
		},
		onLoad() {
			//设置self
			_self = this;
			// 圆形进度条样式
			this.cWidthArcbar = uni.upx2px(480); //这里要与样式的宽高对应
			this.cHeightArcbar = uni.upx2px(600); //这里要与样式的宽高对应
			this.arcbarWidth = uni.upx2px(14);
			// 体重数据样式
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(300);
			// 心电图数据样式
			this.eWidth = uni.upx2px(464);
			this.eHeight = uni.upx2px(140);
			// #ifdef APP-PLUS || H5
			//监听
			uni.$on('personalShowLineA', this.personalShowLineA);
			uni.$on('updateArcbarData', this.updateArcbarData);
			// #endif
			// #ifdef MP
			this.personalShowLineA();
			// #endif

			//监听
			uni.$on('callbackCloseBLE', this.callbackCloseBLE);
			// uni.$on('callbackBLEState', this.callbackBLEState);

			//获得游戏列表
			reqUtil
				.requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
					recommendType: 2,
					endTime: config.endTime
				})
				.then(
					res => {
						console.log('GAMERECOMMEND =====', res);
						if (res.code == 0) {
							if (res.data.gameList.length > 3) {
								this.gameList = this.gameList.concat(res.data.gameList.slice(0, 3));
							} else {
								this.gameList = this.gameList.concat(res.data.gameList);
							}
						}
					},
					e => {
						console.log(e);
					}
				);
			//获得视频列表
			reqUtil
				.requestData(config.URL.GAMERECOMMENDBYPLATFORM, {
					recommendType: 1,
					endTime: config.endTime
				})
				.then(
					res => {
						if (res.code == 0) {
							if (res.data.gameList.length > 3) {
								this.videoList = this.videoList.concat(res.data.gameList.slice(0, 3));
							} else {
								this.videoList = this.videoList.concat(res.data.gameList);
							}
						}
					},
					e => {
						console.log(e);
					}
				);

			this.personalShowLineA();

			//初始化后设置一下pickerObj
			this.pickerObj = {
				pickerLeftList: pickerData.getWeightList().leftList,
				pickerRightList: pickerData.getWeightList().rightList,
				pickerType: 'doubleItem',
				pickerUnit: '公斤',
				pickerTitle: '记体重',
				defaultValue: this.weight,
				showInput: true,
			};


			this.getPlanData(function() {
				// 如果个人页面直接获取数据
				_self.showArcbar();

			});

			this.testList = [{
				cname: "拳击柱",
				ename: "boxingPost",
				icon: "/static/modal/boxing-post/left-hook-h@2x.png",
				mIcon: "/static/modal/boxing-post/left-hook-m@2x.png",
			}];

			this.personalAudioContext = uni.createInnerAudioContext();
			this.personalAudioContext.autoplay = false;
			this.personalAudioContext.src = this.dangdang;
			this.personalAudioContext.volume = 1;

			//获取本地记录的运动时间
			uni.getStorage({
				key: 'localSportTime',
				success: function(res) {
					// console.log("本地的时间:",res.data);
					_self.$store.state.localSportTime = res.data;
				}
			});

			//获取设备信息，上报服务器
			this.gOnAddClientInfo();

		},
		onShow() {
			_self.bHide = false;

			if (canvaArcbar1)
				_self.updateArcbarData();

			//this.bConnection && 
			if (this.bVerifiedConnection && this.BLEConnectDevice) {
				this.updateBLECIndex();

				// setTimeout(() => {
				// 	/**
				// 	 * 如果是首页连接，则检测
				// 	 */
				// 	if (this.bGetBondTesting) {
				// 		this.onGetBondDevice();
				// 		this.bGetBondTesting = false;
				// 	}
				// }, 5000)

			}
			//如果是测试数据
			if (this.ConnectBindingDevice) {
				if (this.$refs.boxingPostRef) {
					this.$refs.boxingPostRef.onSetMode('pkMode');
				} else {
					setTimeout(() => {
						this.$refs.boxingPostRef.onSetMode('pkMode');
					}, 500)
				}
			}

			console.log('personal show');

			this.bLimitReconnection = false;

			//测试环境检测，给个modal提示 active
			// if (config.active == 'dev') {
			// 	function thanDate(date2) {
			// 		var oDate1 = new Date();
			// 		console.log("检测日期", oDate1);
			// 		var oDate2 = new Date(date2);
			// 		if (oDate1.getTime() > oDate2.getTime()) {
			// 			return true;
			// 		} else {
			// 			return false;
			// 		}
			// 	}
			// 	if (thanDate('2021-05-31 13:10:36')) {
			// 		uni.showModal({
			// 			title: "提示",
			// 			content: "此版本为测试版本，有需要请和开发者联系。微信 sweetdontcry"
			// 		})
			// 	}
			// }

		},
		onReady() {
			// 计算屏幕剩余高度  填补剩余高度
			uni.getSystemInfo({
				success(res) {
					_self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('#nav-bar');
					view.boundingClientRect(data => {
						// console.log('data===:', data);
						if (data != null) {
							_self.navHeight = data.height;
							_self.scrollviewHight = _self.phoneHeight - _self.navHeight;
							_self.topScrollHight = _self.phoneHeight - _self.navHeight - 30;
						}
					}).exec();
				}
			});

		},
		onUnload() {
			console.log("personal ********* onUnload *********");
			// #ifndef APP-PLUS||H5
			//监听
			console.log('移除监听');
			uni.$off('personalShowLineA', this.personalShowLineA);
			uni.$off('updateArcbarData', this.updateArcbarData);
			// #endif
			//*****注释蓝牙操作******
			uni.$off('callbackCloseBLE', this.callbackCloseBLE);
			// uni.$off('callbackBLEState', this.callbackBLEState);
			uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);

			// // 停掉对应的interval

			if (sportSpeedInterval) {
				clearInterval(sportSpeedInterval);
				sportSpeedInterval = null;
			}
			//unload 时候清除timeout
			this.onUnloadCreateBLEConnectionTimeout();

		},
		onHide() {
			_self.bHide = true;
			console.log("personal ******* onHide *******");
			//时间暂停 ,隐藏了 需要判断是否为空
			if (_self.$refs.countDownObj)
				_self.$refs.countDownObj.timePause('pause');
			//心电图暂停
			if (_self.$refs.electRef)
				_self.$refs.electRef.pausedElect(true);

		},
		methods: {
			...mapMutations(['accountLogin', 'getPlanData', 'addlocalCalorie', 'setLocalCalorie', 'setShowCalorie',
				'syncLocalDataToServer', 'syncRequestEvent', 'setLocalSportTime',
				'initAdapter', 'onCreateBLEConnection', 'onUnloadCreateBLEConnectionTimeout', 'onCloseBLEConnection',
				'gOnAddClientInfo', 'onWriteBLEConnectionValue',
				'gCreateFilterObj', 'gUpdateFilter', 'B_GetBondedDevices', 'B_OpenBLESetting', 'B_OpenRopeSkipping',
				'B_CloseRopeSkipping',
				'gCreateSandbagAlgorithm', 'gUpdateSandbagAlgorithm', 'gStartSimulateBLEUpdate',
				'gStopSimulateBLEUpdate'
			]),
			BasicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
			},
			onKeyDown(e) {
				console.log(e);
			},
			//登录的回调初始化
			personalShowLineA() {

				//获得体重列表
				reqUtil.requestData(config.URL.USERGETWEIGHT).then(
					res => {
						// console.log('USERGETWEIGHT =====', res);
						// this.$store.state.weight = res.data;
						if (res.code == 0 && res.data) {
							let list = [];
							for (let i = 0; i < res.data.timestamp.length; i++) {
								//String.fromCharCode(65 + i)
								list.push(date.getWeightDate(res.data.timestamp[i]));
							}

							let lineData = {
								// ["2012", "2013", "2014", "2015", "2016", "2017"]
								categories: list,
								series: [{
									color: '#9797FF',
									//["100", "10", "20", "50", "60", "70"]
									data: res.data.weightList,
									index: 0,
									legendShape: 'curve',
									name: '体重变化',
									pointShape: 'circle',
									show: true,
									type: 'area'
								}]
							};
							_self.showLineA('canvasLineA', lineData);
						}
					},
					e => {
						console.log(e);
					}
				);
			},

			showClickEvent() {
				this.$refs.sideBar.showModal();
				this.$store.state.bCanvasShow = false;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				this.$store.state.bCanvasShow = false;
			},
			hideModal(e) {
				if (this.modalName == "sportCompletion") {
					console.log("关闭卡片");
					this.sportData = {
						calorie: 0,
						hit: 0,
						miss: 0,
						percent: 0,
						time: 0,
						allData: 0,
					}
				}
				this.modalName = null;
				this.$store.state.bCanvasShow = true;
			},

			//获取体重数据
			onConfirm(e) {
				// detail.__args__[0]
				console.log('当前输出的体重：', e);
				//把体重传上服务器
				reqUtil
					.requestData(
						config.URL.USERADDWEIGHT, {
							weight: e.value
						},
						'POST'
					)
					.then(
						res => {
							// console.log('USERADDWEIGHT =====', res);
							_self.$store.state.weight = res.data.currentWeight;
							let listData = res.data.weightList;
							let list = [];
							for (let i = 0; i < listData.timestamp.length; i++) {
								//String.fromCharCode(65 + i)
								list.push(date.getWeightDate(listData.timestamp[i]));
							}

							let lineData = {
								// ["2012", "2013", "2014", "2015", "2016", "2017"]
								categories: list,
								series: [{
									color: '#9797FF',
									data: listData.weightList,
									index: 0,
									legendShape: 'curve',
									name: '体重变化',
									pointShape: 'circle',
									show: true,
									type: 'area'
								}]
							};

							canvaLineA.updateData(lineData);
						},
						e => {
							console.log(e);
						}
					);
				this.hideModal();
			},
			onTestAddLocalCalorie() {
				let _add = (10 * 1.875) / (4 * 30);
				console.log(_add);
				this.onUpdateCaloriePlane(10);
			},
			// 进度条数据
			arcbarData(_planData) {
				let showCal = _planData.calorie,
					showLCal = _planData.allCalorie,
					LCalTip = '大卡',
					showTip = '（未达标）';

				// 如果运动的卡路里大于目标卡路里，设置为目标卡路里值，即为Max
				if (showLCal >= showCal) {
					showTip = '（达标）';
				}

				let series = [{
					name: showTip,
					data: _planData.allCalorie == 0 ? 0 : _planData.allCalorie / showCal,
					color: '#2fc25b'
				}];
				return {
					showCal,
					showLCal,
					LCalTip,
					showTip,
					series
				}
			},
			// 圆形进度条
			showArcbar() {
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = this.arcbarData(_self.planData);
				// console.log("series==", series[0]);
				canvaArcbar1 = new uCharts({
					$this: _self,
					canvasId: 'canvasArcbar',
					type: 'myGradualChangeArcbar',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: 1,
					series: series,
					animation: true,
					width: _self.cWidthArcbar,
					height: _self.cHeightArcbar,
					dataLabel: true,
					//  Math.round(chartData.series[0].data * 100) + '%'
					// title: {
					// 	// arcbarDate: date.formatDate(_self.originalDate),
					// 	name: showLCal,
					// 	molecularUnit: LCalTip, //单位的分子部分
					// 	denominatorUnit: showCal, //单位的分母部分
					// 	unitFontSize: 11, //单位字符大小
					// 	color: 'rgba(255, 255, 255, 1)',
					// 	fontSize: 28,
					// 	offsetX: -30,
					// 	offsetY: 10
					// },
					// subtitle: {
					// 	name: series[0].name,
					// 	color: 'rgba(255, 255, 255, 1)',
					// 	fontSize: 13,
					// 	offsetY: -75
					// },
					extra: {
						arcbar: {
							type: 'default',
							backgroundColor: 'rgba(234, 234, 255, 1)',
							backgroundEndColor: 'rgba(234, 234, 255, 1)',
							backgroundMiddle: '#9291FF', //'rgba(158, 158, 255, 1)',
							width: _self.arcbarWidth, //圆弧的宽度
							lineColor: '#51EDFE',
							lineEndColor: '#F7C75D'
						}
					}
				});

				// 更新位置同步
				this.syncLocalDataToServer((res) => {
					this.originalDate = res.newDate;
					this.currentDate = date.formatTime(res.newDate);
					this.updateArcbarData();
				});
			},
			updateArcbarData(data) {
				// if (data == "plan") {
				// 	// 加入设置的卡路里小于本地，则更新本地最小值
				// 	_self.addlocalCalorie(0);
				// 	console.log("**************updateArcbarData");
				// 	// 如果是计划设置好后
				// 	// this.$store.state.bPlanFinish = true;
				// 	// setTimeout(() => {
				// 	// 	this.$store.state.bPlanFinish = false;
				// 	// }, 10000)
				// }
				// console.log("updateArcbarData：",this.planData);
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = _self.arcbarData(_self.planData);

				if (showCal == _self.oldArcbarProCalorie && showLCal == _self.oldArcbarAllCalorie) {
					// console.log("没有改变值，不刷新表盘：", showCal, _self.oldArcbarProCalorie, showLCal, _self.oldArcbarAllCalorie);
					return;
				}
				//这个是显示当前的总卡路里
				_self.$store.state.oldArcbarAllCalorie = showLCal;
				//这个是计划的卡路里
				_self.$store.state.oldArcbarProCalorie = showCal;

				canvaArcbar1.updateData({
					series: series,
					// title: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: showLCal,
					// 	molecularUnit: LCalTip, //单位的分子部分
					// 	denominatorUnit: showCal, //单位的分母部分
					// }
					//,
					// subtitle: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: series[0].name
					// }
				});
			},
			//没有限制下的更新表盘
			updateNoLimit() {
				let {
					showCal,
					showLCal,
					LCalTip,
					series
				} = _self.arcbarData(_self.planData);

				//这个是显示当前的总卡路里
				_self.$store.state.oldArcbarAllCalorie = showLCal;
				//这个是计划的卡路里
				_self.$store.state.oldArcbarProCalorie = showCal;

				canvaArcbar1.updateData({
					series: series,
					// title: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: showLCal,
					// 	molecularUnit: LCalTip, //单位的分子部分
					// 	denominatorUnit: showCal, //单位的分母部分
					// }
					// ,
					// subtitle: {
					// 	//这里的文案是自定义的，不写是不变的
					// 	name: series[0].name
					// }
				});
			},
			// 数据列表
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [15, 40, 0, 15],
					legend: {
						show: false,
						padding: 0,
						lineHeight: 10,
						margin: 0
					},
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'solid',
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					enableBottomSolid: false,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 7,
						calibration: true,
						scrollShow: false,
						scrollAlign: 'left',
						gridColor: 'rgba(175, 175, 175, 1)',
						dashLength: 8
						// boundaryGap: 'justify' //两端不留白配置
					},
					yAxis: {
						// disabled: false,
						disableGrid: true,
						disableLine: true,
						splitNumber: 10,
						min: 0,
						// max: 50,
						format: val => {
							// console.log("=======",val)
							// return val.toFixed(0) + '斤'
							return '';
						}
					},
					width: _self.cWidth,
					height: _self.cHeight,
					extra: {
						area: {
							type: 'straight', //curve
							opacity: 1,
							addLine: true,
							gradient: true,
							width: 2
						}
					}
				});

			},
			touchLineA(e) {
				// console.log("touchLineA:", e);
				if (canvaLineA) canvaLineA.scrollStart(e);
			},
			moveLineA(e) {
				if (canvaLineA) {
					canvaLineA.scroll(e);
				}
			},
			touchEndLineA(e) {
				if (canvaLineA) {
					canvaLineA.scrollEnd(e);
				}
			},
			// 跳转计划页面
			openPlan(e) {
				// console.log(e);
				uni.navigateTo({
					url: '../plan/plan?newsid=' + 11,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			// 跳转转换页面
			onNavConver() {
				uni.reLaunch({
					url: '../../conversion-page/conversion/conversion',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 跳转我的页面
			onNavMyPage() {
				uni.navigateTo({
					url: '../../my-page/homepage/homepage',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			updateBLECIndex() {
				for (let i = 0; i < this.BLEDeviceShowList.length; i++) {
					let eq = this.BLEDeviceShowList[i];
					if ((eq.ename.indexOf("mobilePhoneBandage") > -1 && this.BLEConnectDevice.id == 0) ||
						(eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) ||
						(eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) ||
						(eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3)) {

						eq.bRatio = true;
						this.$store.state.cIndex = i;

					}

					if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
						if (this.$refs.boxingPostRef) {
							this.$refs.boxingPostRef.onSetMode('pkMode');
						} else {
							setTimeout(() => {
								this.$refs.boxingPostRef.onSetMode('pkMode');
							}, 500)
						}

					} else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
						if (this.$refs.boxingPostRef) {
							this.$refs.boxingPostRef.onSetMode('calorieMode');
						} else {
							setTimeout(() => {
								this.$refs.boxingPostRef.onSetMode('calorieMode');
							}, 500)
						}
					} else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
						//todo 暂时设置兼容跑步模式
						// if (this.$refs.boxingPostRef) {
						// 	this.$refs.boxingPostRef.onSetMode('ropeMode');
						// } else {
						// 	setTimeout(() => {
						// 		this.$refs.boxingPostRef.onSetMode('ropeMode');
						// 	}, 500)
						// }
					}
				}
			},

			//蓝牙断开连接时候
			callbackCloseBLE() {
				// this.$store.state.cIndex = -1;

				if (0 == this.currentModeIndex) {
					//蓝牙断开连接后，直接关闭
					this.$refs.boxingPostRef.onCloseDevices();
				}

				// if (!this.BLEConnectDevice) {
				// 	console.log('连接蓝牙对象为空，不进行重连！');
				// 	return;
				// }
				// //如果限制不走重连
				// if (this.bLimitReconnection) return;
				// //连接蓝牙
				// this.onCreateBLEConnection({
				// 	item: this.BLEConnectDevice,
				// 	initItem: false,
				// 	getSuccess: () => {
				// 		this.updateBLECIndex();

				// 		if (this.bHide) {
				// 			//弹出框时候,是隐藏状态
				// 			this.bGetBondTesting = true;
				// 		} else {
				// 			//没有弹出框时候,直接检测
				// 			setTimeout(() => {
				// 				this.onGetBondDevice();
				// 			}, 5000)
				// 		}
				// 	},
				// 	getinitAdapter: () => {
				// 		// this.onDevice(item, e);
				// 		// console.log("未开启蓝牙模块？");
				// 	}
				// });
			},
			//蓝牙状态回调
			callbackBLEState(res) {
				console.log("callbackBLEState==", res);
				if (this.cState != res.state) this.cState = res.state;
			},
			//设备回调事件
			callbackUpdateBLEData(data) {
				//如果在监听状态时候隐藏页面，返回
				if (_self.bHide) return;
				// console.log("callbackDeviceState==", data);

				if (this.ConnectBindingDevice) {
					this.gUpdateSandbagAlgorithm({
						data: data,
						callback: (res) => {
							if (res.type == 'hit') {
								this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
							}
						}
					});
					return;
				}

				//连接了手柄模式
				//没有开启指令不刷新
				if (!this.instructionState.bOpen) return;

				if (this.BLEConnectDevice.usageMode == "hotman") {
					this.gUpdateFilter({
						data: data,
						callback: (res) => {
							if (res.type == 'hit') {
								this.$refs.boxingPostRef.onBLEHotmanUpdate(res);
							}
						}
					});
				} else if (this.BLEConnectDevice.usageMode == "general") {
					//这个是普通打击模式
					this.$refs.boxingPostRef.onBLEHandleUpdate(data);
				} else if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
					//跳绳蓝牙反馈
					this.$refs.actionJumpRef.onBLERopeUpdate(data);

				}


			},
			//绑定设备函数
			onBindingDevice(item, index) {
				if (item == null) {
					item = this.DeviceBindingList[0];
				}
				if (this.BLEConnectDevice) {
					uni.showToast({
						icon: "none",
						title: "已连接硬件设备",
						duration: 1000
					})
					return;
				}

				if (this.ConnectBindingDevice) {
					this.$store.state.ConnectBindingDevice = null;
					setTimeout(() => {
						uni.showToast({
							icon: "none",
							title: "断开连接",
							duration: 1000
						})
					}, 300)
				} else {
					this.$store.state.ConnectBindingDevice = item;
					setTimeout(() => {
						uni.showToast({
							icon: "none",
							title: "已连接",
							duration: 1000
						})
					}, 300)
					//连接后保存最近连接的设备
				}

				//刷新状态
				this.$refs.boxingPostRef.onSetMode('pkMode');

			},
			//关闭设备函数
			onCloseBindingDevice(item, e) {
				if (e.currentTarget.dataset.index == this.cIndex) {
					uni.showModal({
						title: '设备状态',
						content: '是否断开连接',
						ConfirmColor: '#A488DC',
						success: res => {
							if (res.confirm) {
								this.$store.state.cIndex = -1;
								this.$store.state.ConnectBindingDevice = null;
							}
						}
					});
				}
			},
			onNavBindingDevice() {
				this.toView = "addDeviceView";
			},
			onDevice(item, e) {
				if (this.ConnectBindingDevice) {
					uni.showToast({
						title: '当前已开启数据',
						icon: 'none',
						mask: true
					})
					return;
				}
				if (this.cIndex !== -1) {
					uni.showToast({
						title: '当前已连接设备',
						icon: 'none',
						mask: true
					})
					return;
				}
				//连接蓝牙
				this.onCreateBLEConnection({
					item: item,
					index: e.currentTarget.dataset.index,
					initItem: true,
					getinitAdapter: () => {
						this.onDevice(item, e);
					},
					getSuccess: () => {
						if (this.bHide) {
							//弹出框时候,是隐藏状态
							this.bGetBondTesting = true;
						} else {
							//没有弹出框时候,直接检测
							// setTimeout(() => {
							// 	this.onGetBondDevice();
							// }, 5000)
						}

						//刷新状态
						if (this.cIndex != -1) {
							let eq = this.BLEDeviceShowList[this.cIndex];
							// console.log(eq,this.BLEConnectDevice);
							if (eq.ename.indexOf("hotman") > -1 && this.BLEConnectDevice.id == 1) {
								this.$refs.boxingPostRef.onSetMode('pkMode');
							} else if (eq.ename.indexOf("BLEHandle") > -1 && this.BLEConnectDevice.id == 2) {
								this.$refs.boxingPostRef.onSetMode('calorieMode');
							} else if (eq.ename.indexOf("rope") > -1 && this.BLEConnectDevice.id == 3) {
								// this.$refs.boxingPostRef.onSetMode('ropeMode');
							}
						}
					}
				});
			},
			/**
			 * 检测获取匹配的设备
			 */
			onGetBondDevice() {
				/**
				 * 假如手机没有匹配，断开连接
				 */
				console.log("****", this.BLEConnectDevice);
				if (!this.BLEConnectDevice) return;

				this.B_GetBondedDevices({
					deviceId: this.BLEConnectDevice.deviceId,
					success: (bondedDevice) => {
						// console.error("===========", bondedDevice);
						// uni.hideToast();
						if (bondedDevice == null) {
							// if (plus.os.name == 'Android') 
							{
								//此问题 华为手机容易出现
								//android手机已配对的设备 不存在，但是app 又直接连接成功了。提示，并且断开app连接
								//1.关闭当前连接
								this.onCloseBLEConnection({
									getSuccess: () => {}
								});
								uni.hideToast();
								//2.跳转蓝牙设置
								uni.showModal({
									title: '蓝牙配对失败',
									content: '请跳转后点击配对BGBox_2020,成功后手动跳转回哔蹦重新连接。',
									success: (res) => {
										if (res.confirm) {
											this.B_OpenBLESetting();
										}
									}
								})
							}
						}
					}
				});

			},

			openDeviceList(e) {

				if (this.ConnectBindingDevice) {
					uni.showToast({
						title: '当前已开启数据',
						icon: 'none',
						mask: true
					})
					return;
				}

				//先判断蓝牙是否初始化
				/**
				 * 蓝牙部分操作,转全局变量操作
				 * */
				console.log("openDeviceList bOpenBluetooth", this.bOpenBluetooth);
				// #ifdef APP-PLUS
				if (!this.bOpenBluetooth) {

					this.initAdapter(() => {
						uni.navigateTo({
							// url: '../devices-category/devices-category',
							url: '../devices-hardware/devices-hardware',
							success: res => {
								this.bLimitReconnection = true;
							},
							fail: () => {},
							complete: () => {}
						});
					});

					return;
				}
				// #endif
				uni.navigateTo({
					url: '../devices-hardware/devices-hardware',
					success: res => {
						this.bLimitReconnection = true;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onNavToMore() {
				uni.navigateTo({
					url: '../more/more?index=' + this.cIndex,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			onAddDevice() {
				let deviceItem = {
					name: '蹦床',
					icon: '/static/trampoline.png'
				};
				if (this.deviceList.length != 0) {
					this.deviceList = this.deviceList.concat(deviceItem);
				} else {
					this.deviceList = deviceItem;
				}
			},
			onCloseDevice(item, e) {
				//如果不是连接状态，则删除
				if (e.currentTarget.dataset.index != this.cIndex) {
					if (this.cIndex != -1) {
						uni.showToast({
							icon: 'none',
							title: "请先断开已连接设备",
							duration: 2000,
							mask: true
						})
						return;
					}
					uni.showModal({
						title: '设备状态',
						content: '是否删除设备?',
						ConfirmColor: '#A488DC',
						success: res => {
							if (res.confirm) {
								this.$store.commit('deleteBLEDevice', e.currentTarget.dataset.index);
							}
						}
					});
					return;
				}
				uni.showModal({
					title: '设备状态',
					content: '是否断开连接?',
					/**
					 * 如果需要强制，不显示取消按钮
					 */
					showCancel: true,
					ConfirmColor: '#A488DC',
					success: res => {
						if (res.confirm) {
							this.onCloseBLEConnection({
								getSuccess: () => {}
							});

						}
					}
				});
			},

			onNavDetail(item) {
				console.log(item);
				let temItem = encodeURIComponent(JSON.stringify(item));
				// return;
				uni.navigateTo({
					url: '../../game-page/game-detail/game-detail?item=' + temItem
				});
			},
			onNavToGameMore(e) {

				uni.reLaunch({
					url: '../../game-page/game/game?type=' + e.currentTarget.dataset.type
				});
			},

			//判断是否有其他限制
			onStartCheck() {
				//#ifdef H5
				// 直接走测试，如果是h5
				this.onBoxingGuideFinish();
				return;
				//#endif
				//分类型判断
				if (0 === this.currentModeIndex) {
					//拳击运动类型
					// 1.检测是否有对应设备,没有ConnectBindingDevice,再进行下一步
					if (this.ConnectBindingDevice == null) {
						uni.showToast({
							title: '开启连接数据',
							icon: 'none'
						})
						this.toView = "openAccGyroView";
						return;

					}
					// TODO,目前去掉蓝牙设备
					// //2.检测是否有设备
					// if (this.BLEDeviceShowList.length == 0) {
					// 	this.$store.state.bGuidePages = true;
					// 	this.guideCurrent = 3;
					// 	uni.showToast({
					// 		title: '请添加蓝牙设备',
					// 		icon: 'none'
					// 	})
					// 	this.toView = "addDeviceView";
					// 	return;
					// }
					// //2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
					// if (this.cIndex == -1) {
					// 	//没有连接设备，提示去连接设备
					// 	uni.showToast({
					// 		title: '请连接蓝牙设备',
					// 		icon: 'none'
					// 	})
					// 	this.toView = "addDeviceView";
					// 	return;
					// }

				} else if (1 === this.currentModeIndex) {
					//2.检测是否连接设备 || this.BLEConnectDevice.ename !== 'BT04'
					if (this.cIndex == -1) {
						//没有连接设备，提示去连接设备
						uni.showToast({
							title: '请连接蓝牙设备',
							icon: 'none'
						})
						this.toView = "addDeviceView";
						return;
					}
				}


				//3.检测一下计划日期
				console.log(this.remainingDays);
				// if (this.planData.startTime > this.planData.endTime || this.remainingDays == 0) {
				// 	if (!this.$store.state.bPlanExpired) {
				// 		this.$store.state.bPlanExpired = true;
				// 		setTimeout(() => {
				// 			this.$store.state.bPlanExpired = false;
				// 		}, 3000)
				// 		uni.showToast({
				// 			title: "计划到期,请制定计划。",
				// 			icon: 'none'
				// 		})
				// 	}

				// 	this.$store.state.bGuidePages = true;
				// 	setTimeout(() => {
				// 		this.$refs.codeElfGuide.setCurrent(0);
				// 	}, 0)
				// 	this.toView = "projectButtonView";
				// 	return;
				// }

				if (0 === this.currentModeIndex) {

					//如果新手，调用新手教程
					console.log("this.bNewGuide:", this.bNewGuide);
					// this.$store.state.bNewGuide = true;
					if (this.bNewGuide) {
						// this.$refs.boxingPostRef.onGuideBoxingPostPlay();
						// 拳击的新手提示
						this.$store.state.bGuidePages = true;
						this.guideCurrent = 5;
						this.toView = "boxingHitID";
						this.$store.state.bNewGuide = false;
					} else {
						if (this.ConnectBindingDevice) {
							//假如有连接bingding设备
							this.gCreateSandbagAlgorithm();
							this.gStartSimulateBLEUpdate();
						} else {
							//todo 跳绳模式 发送开启指令
							if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
								//打开跳绳模式
								this.B_OpenRopeSkipping();
							} else {
								//初始化filter快速打击对象
								if (this.BLEConnectDevice.usageMode == "hotman") {
									this.gCreateFilterObj();
								}
								//打开加速计
								this.onWriteBLEConnectionValue({
									value: "3"
								});

								// setTimeout(() => {
								// 	//设置加速计b:20ms a:10ms
								// 	this.onWriteBLEConnectionValue({
								// 		value: config.refreshRate
								// 	});

								// }, 1000)
							}

						}

						//监听蓝牙回调
						uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);


						this.onBoxingGuideFinish();
					}

				} else if (1 == this.currentModeIndex) {
					if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
						//打开跳绳模式
						// this.B_OpenRopeSkipping();
						this.onWriteBLEConnectionValue({
							value: "3"
						});
					}
					//监听蓝牙回调
					uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);

					//调用开始
					this.$refs.actionJumpRef.onActionJumpPlay();

				}
			},
			onShowBoxingHitTip() {
				this.$store.state.bGuidePages = true;
				this.guideCurrent = 5;
				this.toView = "boxingHitID";
				this.$store.state.bNewGuide = false;
			},
			//检测是否符合要求，没有的话进行新手提示
			onPersonalCheck() {
				// //判断一下，是否达标，给moadal 提示 
				// if (this.planData.allCalorie >= this.planData.calorie) {
				// 	this.modalName = 'showPlanTipModal';
				// 	this.planTipIndex = 0;
				// } else {
				// 	//如果是一开始，还没达标，就不给modal 提示
				// 	this.onStartCheck();
				// }
				this.onStartCheck();
			},
			//
			onBoxingGuideFinish() {

				if (this.b_countDown) {
					clearInterval(this.b_countDown);
					this.b_countDown = null;
				}


				if (this.currentMode == 'calorieMode' || this.currentMode == 'ropeMode') {
					this.personalAudioContext.stop();
					this.personalAudioContext.play();

					setTimeout(() => {
						this.$refs.boxingPostRef.onBoxingPostPlay(true);
					}, 600);
				} else {
					this.BoxingPostCountDownText = 3;
					this.$refs.boxingPostRef.onSetRingAnimation(true);
					uni.showToast({
						title: '匹配中...',
						mask: true,
						icon: 'loading',
						duration: 2000
					})

					setTimeout(() => {
						//ai信息
						this.onGetAiRandom();

						// this.b_countDown = setInterval(() => {

						// 	if (this.BoxingPostCountDownText <= 1) {
						// 		if (this.b_countDown) {
						// 			clearInterval(this.b_countDown);
						// 			this.b_countDown = null;
						// 		}
						// 		setTimeout(() => {
						// 			this.personalAudioContext.stop();
						// 			this.personalAudioContext.play();
						// 			this.$refs.boxingPostRef.onBoxingPostPlay(true);
						// 			this.$refs.boxingPostRef.onSetRingAnimation(false);
						// 			uni.hideToast();
						// 		}, 800)
						// 	}
						// 	this.BoxingPostCountDownText--;
						// }, 1000)
						setTimeout(() => {
							this.personalAudioContext.stop();
							this.personalAudioContext.play();
							this.$refs.boxingPostRef.onBoxingPostPlay(true);
							this.$refs.boxingPostRef.onSetRingAnimation(false);
							uni.hideToast();
						}, 800)
					}, 2000);

				}


			},
			//运动时间
			onUpdateSportTime(res) {
				// console.log("同步的运动时间",res);
				this.setLocalSportTime(res);
			},

			//更新运动数据
			onUpdateCaloriePlane(data) {

				// 记录卡路里到本地
				this.addlocalCalorie(data);

				this.updateArcbarData();
			},

			onRoundTrigger(data) {
				// console.log("onRoundTrigger==", data);
				// return;
				let url = '';
				switch (data.item.type) {
					case "personal":
						//个人中心页面
						url = '../../personal-page/personal/personal';
						break;
					case "game":
						url = '../../game-page/game/game';
						break;
					default:
						url = '../../personal-page/personal/personal';
						break;
				}
				uni.reLaunch({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			/**
			 * 同步本地数据到服务器
			 */
			onSyncData() {
				this.syncRequestEvent({
					success: () => {
						this.updateArcbarData();
					}
				});
				// 更新显示日期
				this.originalDate = new Date();
				this.currentDate = date.formatTime(this.originalDate);
			},
			hidePlanTipModal() {
				this.modalName = null;
				if (this.planTipIndex === 1) {
					// 您今天的目标还没完成  是否结束训练
					this.onBoxingPause(false);
				}
			},
			confirmPlanTipModal() {
				this.modalName = null;
				if (this.planTipIndex === 0) {
					this.onStartCheck()
				} else if (this.planTipIndex === 1) {
					// 您今天的目标还没完成  是否结束训练
					this.onBoxingPause(true);
				}
			},
			//断开连接时候，关闭
			onCloseBoxingHit() {
				console.log('关闭训练');
				if (this.currentMode == 'pkMode') {
					this.$refs.hitEffectRef.onStop();
				}
				this.onBoxingPause(true);
			},
			//点击暂停时候，判断一下是否完成目标
			onBoxingPostControlPlay(bPlay) {
				if (!bPlay) {

					if (this.planData.allCalorie < this.planData.calorie) {
						this.modalName = 'showPlanTipModal';
						this.planTipIndex = 1;
					} else {
						//假如完成了目标，更新卡路里
						this.onBoxingPause(true);
					}
				}
			},
			//点击切换模式
			onModeEvent(data) {
				console.log("当前模式:", data);
				this.currentMode = data.mode;
				this.title = data.name;

				if (this.currentMode == 'calorieMode' || this.currentMode == 'ropeMode') {
					setTimeout(() => {
						this.updateNoLimit();
					}, 0)

				}
			},
			onAiHitEvent(bloodPoint) {

				// this.onPlay({
				// 	bloodPoint: num,
				// 	createType: 'red',
				// 	callback: (res) => {
				// 		console.log("红色拳头击中对方：", res);
				// 	}
				// });
				this.$refs.hitFistRef.onPlay({
					bloodPoint: bloodPoint,
					createType: 'red',
					callback: () => {
						if (this.bAiHitShake) return;
						this.bAiHitShake = true;
						this.$refs.aiHitEffectRef.onPlay();
						this.$refs.aiHitEffectRef.onAIHit();
						setTimeout(() => {
							this.bAiHitShake = false;
						}, 500)
					}
				});


			},
			//打击时候头像修改
			onHitEvent(bloodPoint) {
				// console.log("this.bHitShake:",this.bHitShake);

				this.$refs.hitFistRef.onPlay({
						bloodPoint: bloodPoint,
						createType: 'blue',
						callback: () => {
							if (this.bHitShake) return;
							this.bHitShake = true;
							this.$refs.hitEffectRef.onPlay();
							this.$refs.hitEffectRef.onMyHit();
							setTimeout(() => {
								this.bHitShake = false;
							}, 500)
						}
					}

				);
			},

			//弹出目标提示后，进行下一步
			onBoxingPause(bFinish) {
				if (bFinish) {

					if (this.ConnectBindingDevice) {
						this.gStopSimulateBLEUpdate();
					} else {
						if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
							this.B_CloseRopeSkipping();
						} else {
							console.log("停止时候，上传卡路里");
							this.$refs.boxingPostRef.onBoxingPostStop();


							//停止时候，重置ai信息
							this.aiObj.name = this.aiOldObj.name;
							this.aiObj.avatar = this.aiOldObj.avatar;

							//停止蓝牙加速计
							this.onWriteBLEConnectionValue({
								value: "4"
							});
						}

					}
					uni.$off('updateBLEDeviceData', this.callbackUpdateBLEData);

					this.syncRequestEvent({
						success: () => {
							this.updateArcbarData();
						}
					});


				} else {
					if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
						this.$refs.actionJumpRef.onActionJumpPlay();
					} else {
						//如果不是，继续调用播放
						this.$refs.boxingPostRef.onBoxingPostPlay(true);
					}
				}

			},

			/**
			 * 新手任务引导
			 */
			onGuideChange(e) {
				let tempCurrent = e.detail.current;
				if (tempCurrent == 1) {
					_self.toView = "addDeviceView";
				} else if (tempCurrent == 0) {
					_self.toView = "projectButtonView";
				}

			},

			guideHide(e) {
				this.$store.state.bGuidePages = false;
				if (e.current == 0 && !e.onlyHide) {
					//跳转计划页面
					this.openPlan();
				} else if (e.current == 1 && !e.onlyHide) {
					console.log('guideHide:', e.current);
					//跳转搜索设备页面
					// this.openDeviceList();
				} else if (e.current == 3 && !e.onlyHide) {
					//新手引导跳转扫码页面，直接走绑定 再check
					// this.openQRCode((res) => {
					// 	setTimeout(() => {
					// 		this.onPersonalCheck();
					// 	}, 200);
					// });
					// 跳转连接蓝牙页面
					this.openDeviceList();
				} else if (e.current == 4 && !e.onlyHide) {
					//连接绑定设备
					// this.openQRCode();
					console.log(e);
					// this.testList[e.dataset.index] DeviceBindingList
					let _index = Number(e.device.dataset.index);
					this.onBindingDevice(this.DeviceBindingList[_index], _index);

					//连接设备后，再
					setTimeout(() => {
						this.onPersonalCheck();
					}, 200);
				} else if (e.current == 5 && !e.onlyHide) {
					console.log("==:", e);
					//todo 跳绳模式 新手引导
					if (this.BLEConnectDevice.usageMode == "ropeSkipping") {
						this.B_OpenRopeSkipping();
					} else {
						//初始化filter快速打击对象
						if (this.BLEConnectDevice.usageMode == "hotman") {
							this.gCreateFilterObj();
						}
						//打开加速计
						this.onWriteBLEConnectionValue({
							value: "3"
						});

						// setTimeout(() => {
						// 	//设置加速计b:20ms a:10ms
						// 	this.onWriteBLEConnectionValue({
						// 		value: config.refreshRate
						// 	});

						// }, 1000)
					}

					//监听蓝牙回调
					uni.$on('updateBLEDeviceData', this.callbackUpdateBLEData);
					this.onBoxingGuideFinish();
				}
			},

			mainScroll(e) {
				if (_self.toView == "addDeviceView") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					let view = uni.createSelectorQuery().select('#addDeviceView');
					view.boundingClientRect(data => {
						_self.$refs.codeElfGuide.setDeviceObj(data);
					}).exec();
				} else if (_self.toView == "projectButtonView") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					_self.onGetProjectView();
				} else if (_self.toView == "QRDeviceView") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					let view = uni.createSelectorQuery().select('#QRDeviceView');
					view.boundingClientRect(data => {
						_self.$refs.codeElfGuide.setDeviceObj(data);
					}).exec();
				} else if (_self.toView == "bing-boxingPost") {
					_self.toView = "";
					if (!_self.bGuidePages) return;
					let view = uni.createSelectorQuery().select('#bing-boxingPost');
					view.boundingClientRect(data => {
						_self.$refs.codeElfGuide.setDeviceObj(data);

						console.log(data);
					}).exec();
				} else if (_self.toView == "boxingHitID") {
					_self.toView = "";

					// let view = uni.createSelectorQuery().select('#boxingHitID');
					// view.boundingClientRect(data => {
					// 	_self.$refs.codeElfGuide.setModalObj(data);

					// 	console.log(data);
					// }).exec();
				} else if (_self.toView == "openAccGyroView") {
					_self.toView = "";
				}
			},

			onGetProjectView() {
				let view = uni.createSelectorQuery().select('#projectButtonView');
				view.boundingClientRect(data => {
					_self.$refs.codeElfGuide.setProjectObj(data);
				}).exec();
			},

			//拳击模块的回调
			boxingUpdateCalorie(calorie) {
				if (this.currentMode != 'pkMode') {
					//这里调用一下设置可以播放音效
					this.$refs.personalFruitRef.onCanPlay();
				}

				this.onUpdateCaloriePlane(calorie);


			},
			//扫码添加设备
			openQRCode(callback) {
				let that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						let obj = JSON.parse(res.result)
						let data = {
							type: obj.type,
							uuid: obj.uuid,
						}
					}
				});
			},

			//屏幕抖动
			onScreenShake() {
				this.bEFHitShake = true;
				setTimeout(() => {
					this.bEFHitShake = false;
				}, 500)
			},

			onGetAiRandom() {
				let _self = this;

				let avatarlist = AvatarConfig.getAvatarList().avatarList;
				let _length = avatarlist.length;
				let _index = Math.floor(Math.random() * _length);

				console.log(avatarlist);

				_self.aiObj.name = avatarlist[_index].name;
				_self.aiObj.avatar = avatarlist[_index].url;
			},
			onBoxingGameOver(res) {
				this.$refs.hitEffectRef.onStop();

				this.onBoxingPause(true);

				let _title = res.myWin ? "胜利" : "失败";
				let _context = res.myWin ? "你已经赢得PK胜利！" : "你在PK中被打败了！";
				this.modalName = "showModalTip"

				this.$refs.modalTipRef.setShowData({
					title: _title,
					context: _context
				});
			},
			onModalTipHide() {
				this.modalName = null;

			},
			onModalTipConfirm() {
				this.modalName = null;
				//再来一局
			},
			onTestShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			openAcc() {
				if (!this.globalAcc) {
					AccAndOri.bindAcc((accId) => {
						this.$store.state.globalAcc = accId;
						console.log("初始化：globalAcc=", this.globalAcc);
					});
				}

				if (!this.globalOri) {
					AccAndOri.bindOri((oriId) => {
						this.$store.state.globalOri = oriId;
						console.log("初始化：globalOri=", this.globalOri);
					});
				}
			},
			closeAcc() {
				AccAndOri.unBindAcc(this.globalAcc);
				this.$store.state.globalAcc = null;

				AccAndOri.unBindOri(this.globalOri);
				this.$store.state.globalOri = null;
			},
			outGyro(o) {
				console.log("Orientation\nAlpha:" + o.alpha + "\nBeta:" + o.beta + "\nGamma:" + o.gamma);
			},
			openGyro() {
				if (!this.globalOri) {
					AccAndOri.bindOri((oriId) => {
						this.$store.state.globalOri = oriId;
						console.log("初始化：globalOri=", this.globalOri);
					});
				}
				uni.$on('watchOrientation', this.outGyro);
			},
			stopGyro() {
				uni.$off('watchOrientation', this.outGyro);
				AccAndOri.unBindOri(this.globalOri);
				this.$store.state.globalOri = null;
			},

			onKeyInput: function(event) {
				this.$store.state.LocationGameUrl = event.target.value
			},

			onNavFcGame() {
				// console.log(0);
				uni.navigateTo({
					url: "../../fc-page/fc/fc"
				})
			},

			onNavAppInfo() {
				uni.navigateTo({
					url: '../../info-page/app-info/app-info'
				})
			},

			getBLEDeviceServices() {
				console.log("getBLEDeviceServices");

				// uni.getBLEDeviceServices({
				// 	deviceId: "C5:5C:19:04:00:30",
				// 	success: res => {
				// 		console.log("getBLEDeviceServices==", JSON.stringify(res));
				// 	},
				// 	fail: failRes => {
				// 		console.log('device services:', failRes)

				// 	}
				// });
			},

			// testAsyncFunc() {
			// 	// 调用异步方法
			// 	testModule.testAsyncFunc({
			// 			'name': 'unimp',
			// 			'age': 1
			// 		},
			// 		(ret) => {
			// 			modal.toast({
			// 				message: ret,
			// 				duration: 1.5
			// 			});
			// 		})
			// },
			// startSyncFunc() {
			// 	// 调用同步方法
			// 	var ret = testModule.onStartAccAndGyro({
			// 		'name': 'unimp',
			// 		'age': 1
			// 	})
			// 	modal.toast({
			// 		message: ret,
			// 		duration: 1.5
			// 	});
			// },

			// stopSyncFunc() {
			// 	// 调用同步方法
			// 	var ret = testModule.onStopAccAndGyro({
			// 		'name': 'unimp',
			// 		'age': 1
			// 	})
			// 	modal.toast({
			// 		message: ret,
			// 		duration: 1.5
			// 	});
			// },
			
			onNavToSelectFriend(){
				uni.navigateTo({
					url:'../../friend-page/select/select'
				})
			}
		}
	};
</script>

<style>
	.bg-person {
		background-color: #9797ff;
	}

	.plan-view {
		overflow: hidden;
		background-color: #9797ff;
	}

	.plan-l-tip-view {
		border-radius: 80upx 0 0 80upx;
		background-color: rgba(255, 255, 255, 0.05);
	}

	.plan-r-tip-view {
		border-radius: 0 80upx 80upx 0;
		background-color: rgba(255, 255, 255, 0.05);
	}

	.bottom-view {
		background-color: rgba(246, 243, 249, 255);
		padding-bottom: 20rpx;
		border-radius: 80rpx 80rpx 0 0;
		width: 750rpx;
		overflow: hidden;
	}

	.time-view {
		width: 100%;
		margin-top: 53rpx;
		/* border: 1rpx solid #DD514C; */
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts-arcbar {
		/* padding: 20rpx 15rpx; */
		/* margin-top: 60rpx; */
		height: 600rpx;
		position: relative;
		width: 750rpx;
		/* border: 1rpx solid #000000; */
	}

	.charts-arcbar {
		position: absolute;
		/* margin-left: 81upx;
		 */
		left: 0;
		right: 0;
		top: 0;
		/* bottom: 0; */
		margin: auto;
		width: 556upx;
		height: 600upx;
		/* border: 1rpx solid #FFFFFF; */
	}

	.charts-arcbar-img {
		position: absolute;
		left: 135upx;
		width: 480upx;
		height: 480upx;
	}

	.charts-pring-bottom {
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.charts-pring-button {
		width: 178rpx;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
		border-radius: 0 25px 25px 0;
	}

	/* 心电图 */
	/* .qiun-charts-elect {
		width: 500rpx;
		height: 136rpx;
	} */

	.charts-elect {
		width: 464rpx;
		height: 96rpx;
		border: 1rpx solid #000000;
	}

	.e-button {
		background-color: rgba(255, 255, 255, 0.25);
		border-radius: 45px;
		margin: 5px 12px;
		box-shadow: 1px 1px 3px #888888;
		display: flex;
		justify-content: center;
	}

	/* 曲线图 */
	.qiun-charts-area {
		width: calc(750rpx - 40rpx);
		height: 300upx;
		/* background-color: #007AFF; */
		position: relative;
	}

	.charts-area {
		position: absolute;
		width: 750upx;
		height: 300upx;
	}

	.qiun-charts-bottom-container {
		height: 63px;
		position: relative;
		width: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: row;
	}


	.qiun-charts-bottom-right {
		position: absolute;
		left: calc(50% + 50rpx);
		top: 15px;
		margin-left: 20rpx;
	}

	/* picker */
	.mpvue-picker-view {
		width: calc(50% - 5px);
		height: 300px;
		/* background-color: rgba(255, 255, 255, 1); */
		border-radius: 20px;
	}

	.item {
		text-align: center;
		width: calc(100% - 0px);
		background-color: rgba(255, 255, 255, 1);
		height: 88upx;
		line-height: 88upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 40upx;
	}

	.picker-unit {
		position: absolute;
		right: 70px;
		top: 43%;
	}

	.left-button,
	.right-button {
		margin: 20px 0;
		padding: 10px 30px;
		background-color: #ffffff;
	}

	.left-button {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		border-right: 1px solid #e6e6e6;
	}

	.right-button {
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.png-size-28 {
		width: 24px;
		height: 24px;
		margin-bottom: 4px;
	}

	.png-size-32 {
		width: 32px;
		height: 32px;
	}

	.png-size-34 {
		width: 34px;
		height: 34px;
	}

	/* 图标大小 */
	.data-play {
		width: 16px;
		height: 16px;
		margin-top: 10rpx;
	}

	.p-data-png {
		width: 16px;
		height: 16px;
		margin: 5rpx 20rpx;
	}

	.data-png {
		width: 16px;
		height: 16px;
		margin: 5rpx;
	}

	.data-png-20 {
		width: 20px;
		height: 20px;
		margin: 0 14rpx;
	}

	.data-png-54 {
		width: 54px;
		height: 54px;
		margin: 0 14rpx;
	}

	.data-png-add {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 34px;
		height: 37px;
	}

	.time-container {
		margin-top: 13px;
		width: 100%;
		height: 218rpx;
		position: relative;
		/* border: 1rpx solid #007AFF; */
	}

	.time-png {
		width: 503rpx;
		height: 222rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 1;
	}

	.time-text {
		font-size: 9px;
		z-index: 10;
		position: relative;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.padding {
		padding: 10rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.float-png {
		position: absolute;
		right: 15px;
		bottom: 200px;
		width: 56px;
		height: 56px;
	}

	.moveCanvas {
		position: fixed;
		top: 9999rpx;
		left: 0;
		width: 188rpx;
		height: 188rpx;
	}

	.scroll-class {
		width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
		/* border: 1rpx solid #000000; */
	}

	.homepage-grid-square {
		width: 250rpx;
		/* height: 250rpx; */
		align-items: start;
	}

	.homepage-grid-square image {
		width: 176rpx;
		height: 176rpx;
	}

	.border {
		/* width: 176rpx; */
		font-size: 30rpx;
		color: rgba(175, 175, 175, 1);
		font-weight: 400;
		text-align: center;
		margin-top: 22rpx;
		margin-bottom: 40rpx;
	}

	.item-img {
		border-radius: 20rpx;
		/* border: 1rpx solid #EEEEEE; */
		box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23);
	}

	.plan-Tip-child {
		height: 120rpx;
	}

	.plan-mode-tip {
		height: 90rpx;
	}

	.plan-grid-square {
		width: 250rpx;
		/* height: 250rpx; */
		align-items: start;
	}

	.plan-grid-square image {
		width: 168rpx;
		height: 58rpx;
	}

	.plan-mode {
		/* height: 54px; */
		border-radius: 10px;
		padding: 3px;
		margin: 0 5px 10px 5px;
		border: 1rpx solid #eeeeee;
		/* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
		position: relative;
	}

	.plan-mode-selected {
		/* height: 54px; */
		padding: 3px;
		margin: 0 5px 10px 5px;
		background-size: contain;
		background-clip: border-box;
		background-repeat: no-repeat;
		background-image: url(../../../static/plan-select-bg.png);
		/* box-shadow: 0px 1px 2px 0px rgba(113, 113, 219, 0.23); */
		position: relative;
	}

	.plan-mode-border {
		/* width: 176rpx; */
		font-size: 26rpx;
		color: rgba(151, 151, 255, 1);
		font-weight: 400;
		text-align: center;
	}

	.button-fav {
		background-color: rgba(153, 150, 252, 255);
		color: #ffffff;
		/* border-radius: 10px; */
		/* width: 184rpx; */
		height: 122rpx;
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		font-size: 14px;
	}

	.card-view-small {
		/* border: 1rpx solid #000000; */
		width: 80%;
		border-radius: 20px;
		margin-left: 50rpx;
		overflow: hidden;
		background-color: #ffffff;
		box-shadow: 0px 2px 4px 0px rgba(113, 113, 219, 0.23);
	}

	.right-bg {
		/* border: 1rpx solid #000000; */
		border-radius: 8px;
		background-color: #9797ff;
		padding: 15rpx;
		position: absolute;
		right: 5%;
		margin-top: 4%;
	}

	.plan-small-child {
		background-color: #f5f5ff;
		border-radius: 20px;
		width: 480rpx;
		height: 90rpx;
		margin: 0 0 30rpx 30rpx;
		/* margin-top: 60rpx; */
	}

	.cu-btn-plan {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 4upx 25upx 4upx 4upx;
		margin-left: 5px;
		font-size: 22upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	.cu-btn-plan-child {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 4upx;
		font-size: 22upx;
		height: 56upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	.cu-btn-plan-right {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 4upx 4upx 4upx 19upx;
		margin-left: 5px;
		font-size: 22upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}

	/* 粗线条 */
	.line-make {
		margin-top: 11px;
		margin-left: 8px;
		border: 4rpx solid #FFFFFF;
		width: 152rpx;
		border-radius: 3px;
	}


	/* 头像背景处理 */
	.avatar-bg-personal {
		width: 34px;
		height: 34px;
		border-radius: 45px;
		border: 2px solid #9997fc;
		background-color: #9997fc;
		box-sizing: border-box;
	}


	.avatar-bg-arrow {
		position: absolute;
		top: 12px;
		left: calc(50% - 10px);
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #9997fc;
	}

	.elect-round-image {
		width: 48px;
		height: 48px;
		z-index: 10;
		box-shadow: 1px 1px 3px #888888;
		border-radius: 45px;
	}

	.elect-personal {
		/* width: 100%; */
		height: 120rpx;
		/* margin: 50rpx 0; */
		margin-bottom: 50rpx;
		border-radius: 45px;
		padding: 10rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.11);
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	/* 呼吸灯 */
	.breathing-lamp {
		animation-duration: 1s;
		animation-timing-function: ease-out;
		animation-fill-mode: inherit;
		animation-iteration-count: infinite;
		animation-name: run-lamp;
		animation-play-state: running;
	}

	@keyframes run-lamp {

		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: 0.6;
			transform: scale(0.9);
		}

	}

	.personal-fruit-container {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 1rpx solid #F0F0F0; */
	}


	.screen-jitter {
		animation-duration: 1s;
		animation-timing-function: ease-out;
		animation-fill-mode: inherit;
		animation-iteration-count: infinite;
		animation-name: personal-shake;
		animation-play-state: running;
	}

	.screen-red {
		border: 1rpx solid #ff0000;
	}

	@keyframes personal-shake {

		0%,
		100% {
			transform: translateX(0)
		}

		10% {
			transform: translateX(-9px)
		}

		20% {
			transform: translateX(8px)
		}

		30% {
			transform: translateX(-7px)
		}

		40% {
			transform: translateX(6px)
		}

		50% {
			transform: translateX(-5px)
		}

		60% {
			transform: translateX(4px)
		}

		70% {
			transform: translateX(-3px)
		}

		80% {
			transform: translateX(2px)
		}

		90% {
			transform: translateX(-1px)
		}
	}

	.CountDownMask {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 100px;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>