|
@@ -1,68 +1,74 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="container">
|
|
<view class="container">
|
|
|
<view style="height: 0vh;place-items: center;display: grid;">
|
|
<view style="height: 0vh;place-items: center;display: grid;">
|
|
|
- <image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
|
|
|
|
|
|
|
+ <image style="height: 3vh;width: 27vw;margin-top: 1vh;top: 3vh;"
|
|
|
src="../../../static/images/new/starts/login/backImg2.png"></image>
|
|
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" style="top:20vh;height: 100vh" ref="showRight" mode="right"
|
|
|
|
|
|
|
+ <text @click="clickRight()"
|
|
|
|
|
+ style="font-size: 15px;margin: -5px 0 0 30vh;font-weight: bold;z-index: 9999;"><uni-icons v-show="!show" style="color: #ffffff;" size="30" type="more-filled"></uni-icons><uni-icons size="30" v-show="show" style="color: #57B03D;" type="more-filled"></uni-icons></text>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- <uni-drawer @change="changeDrawer" style="top:20vh;height: 100vh" ref="showRight" mode="right"
|
|
|
:mask-click="true">
|
|
: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>
|
|
|
|
|
|
|
+
|
|
|
|
|
+ </uni-drawer> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view >
|
|
|
|
|
+ <u-popup :show="show" mode="right" customStyle="top:14vh;bottom:200px;" :overlayOpacity="0" :closeOnClickOverlay="true" :zIndex="100" ref="showRight" :overlay="false" >
|
|
|
|
|
+ <view style="width: 100vw;height: 100vh;">
|
|
|
|
|
+ <scroll-view style="background: linear-gradient(#000000, #161615);font-size: 20px;height: 100vh;" scroll-y="true">
|
|
|
|
|
+ <view class="prop-item" @click="handleLogout()">
|
|
|
|
|
+ <!-- <view class="prop-item-image">
|
|
|
|
|
+ <image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="prop-item-right">{{i18('退出登录')}}</view>
|
|
|
|
|
+ <view class="prop-item-left">
|
|
|
|
|
+ <!-- <uni-icons type="forward" color="lightgray" size="16"></uni-icons> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-divider />
|
|
|
|
|
+ <view class="prop-item" @click="skipPage(3)">
|
|
|
|
|
+ <!-- <view class="prop-item-image">
|
|
|
|
|
+ <image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="prop-item-right">{{i18('关于我们')}}</view>
|
|
|
|
|
+ <view class="prop-item-left">
|
|
|
|
|
+ <!-- <uni-icons type="forward" color="lightgray" size="16"></uni-icons> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-divider />
|
|
|
|
|
+ <view class="prop-item" @click="skipPage(4)">
|
|
|
|
|
+ <!-- <view class="prop-item-image">
|
|
|
|
|
+ <image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="prop-item-right">{{i18('帮助')}}</view>
|
|
|
|
|
+ <view class="prop-item-left">
|
|
|
|
|
+ <!-- <uni-icons type="forward" color="lightgray" size="16"></uni-icons> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <u-divider />
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
</view>
|
|
|
- <view style=";position: relative;top: 10vh;margin-top:4vh;text-align: center;padding:0 28%;">
|
|
|
|
|
|
|
+ <view style=" position: relative;top: 10vh;margin-top: 4vh;text-align: center;display: flex;flex-direction: row;justify-content: center;">
|
|
|
<view class="progress_box" style="text-align: center">
|
|
<view class="progress_box" style="text-align: center">
|
|
|
- <canvas class="progress_bg" canvas-id="cpbg"></canvas>
|
|
|
|
|
|
|
+ <!-- <canvas class="progress_bg" canvas-id="cpbg"></canvas> -->
|
|
|
|
|
+ <view >
|
|
|
|
|
+ <image class="progress-barup" src="../../../static/images/new/starts/kedu.png"></image>
|
|
|
<canvas class="progress_bar" canvas-id="cpbar"></canvas>
|
|
<canvas class="progress_bar" canvas-id="cpbar"></canvas>
|
|
|
- <canvas class="progress_line" canvas-id="cpline"></canvas>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <canvas class="progress_line" canvas-id="cpline"></canvas> -->
|
|
|
<view class="progress_txt">
|
|
<view class="progress_txt">
|
|
|
<view class="progress_info">
|
|
<view class="progress_info">
|
|
|
<view class="p0" style="color: azure;" st="">{{ deviceInfo.qrcode}}</view>
|
|
<view class="p0" style="color: azure;" st="">{{ deviceInfo.qrcode}}</view>
|
|
|
<view class="p1">
|
|
<view class="p1">
|
|
|
- <view v-if="portStatus == 2" style="position: relative;
|
|
|
|
|
- left: -17px;">
|
|
|
|
|
|
|
+ <view v-if="portStatus == 2" style="position: relative;">
|
|
|
{{$t('charge.charging')}}
|
|
{{$t('charge.charging')}}
|
|
|
</view>
|
|
</view>
|
|
|
- <view v-else-if="portStatus == 6" style="position: relative;
|
|
|
|
|
- left: -17px;">
|
|
|
|
|
|
|
+ <view v-else-if="portStatus == 6" style="position: relative;">
|
|
|
{{$t('charge.planed')}}
|
|
{{$t('charge.planed')}}
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view v-else-if="portStatus == 5" style="position: relative;
|
|
|
|
|
- left: -17px;">
|
|
|
|
|
|
|
+ <view v-else-if="portStatus == 5" style="position: relative;">
|
|
|
{{$t('charge.connected')}}
|
|
{{$t('charge.connected')}}
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
@@ -118,25 +124,28 @@
|
|
|
|
|
|
|
|
</view>-->
|
|
</view>-->
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 5vh;">
|
|
<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 5vh;">
|
|
|
<view
|
|
<view
|
|
|
- style="background-color: black;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 36vh;;border-radius: 27px;">
|
|
|
|
|
- <view span="3" style="width: 9vh;">
|
|
|
|
|
|
|
+ style="background-color: #494E51;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 76vw;;border-radius: 27px;">
|
|
|
|
|
+ <view span="3" style="width: 19vw;">
|
|
|
<view class="item-value">{{ deviceV }}V</view>
|
|
<view class="item-value">{{ deviceV }}V</view>
|
|
|
<span class="item-text">{{$t('charge.voltage')}}</span>
|
|
<span class="item-text">{{$t('charge.voltage')}}</span>
|
|
|
</view>
|
|
</view>
|
|
|
<u-line direction="col" color="#6F84AC" length="50"></u-line>
|
|
<u-line direction="col" color="#6F84AC" length="50"></u-line>
|
|
|
- <view span="3" style="width: 9vh;">
|
|
|
|
|
|
|
+ <view span="3" style="width: 19vw;">
|
|
|
<view class="item-value">{{ gonglv }}W</view>
|
|
<view class="item-value">{{ gonglv }}W</view>
|
|
|
<span class="item-text">{{$t('charge.power')}}</span>
|
|
<span class="item-text">{{$t('charge.power')}}</span>
|
|
|
</view>
|
|
</view>
|
|
|
<u-line direction="col" color="#6F84AC" length="50"></u-line>
|
|
<u-line direction="col" color="#6F84AC" length="50"></u-line>
|
|
|
- <view span="3" style="width: 9vh;">
|
|
|
|
|
|
|
+ <view span="3" style="width: 19vw;">
|
|
|
<view class="item-value">{{deviceTemp}}℃</view>
|
|
<view class="item-value">{{deviceTemp}}℃</view>
|
|
|
<span class="item-text">{{$t('charge.devtemper')}}</span>
|
|
<span class="item-text">{{$t('charge.devtemper')}}</span>
|
|
|
</view>
|
|
</view>
|
|
|
<u-line direction="col" color="#6F84AC" length="50"></u-line>
|
|
<u-line direction="col" color="#6F84AC" length="50"></u-line>
|
|
|
- <view span="3" style="width: 9vh;">
|
|
|
|
|
|
|
+ <view span="3" style="width: 19vw;">
|
|
|
<view class="item-value" v-if="portDetail.voltage == 0">0 {{ i18('度') }}</view>
|
|
<view class="item-value" v-if="portDetail.voltage == 0">0 {{ i18('度') }}</view>
|
|
|
<view class="item-value" v-else>{{ dianliang }} {{ i18('度') }}</view>
|
|
<view class="item-value" v-else>{{ dianliang }} {{ i18('度') }}</view>
|
|
|
<span class="item-text">{{$t('charge.elec')}}</span>
|
|
<span class="item-text">{{$t('charge.elec')}}</span>
|
|
@@ -146,9 +155,9 @@
|
|
|
|
|
|
|
|
<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 3vh;">
|
|
<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 3vh;">
|
|
|
<view
|
|
<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: 80px;left:10%;position: absolute;font-size: 12px;">
|
|
|
|
|
- <view style="margin-left: 1vh;width: 100px">
|
|
|
|
|
|
|
+ style="position:relative;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 100%;height: 6vh;}">
|
|
|
|
|
+ <view style="width: 27vw;left:5vw;position: absolute;font-size: 11px;">
|
|
|
|
|
+ <view style="margin-left: 1vh;">
|
|
|
<view><span v-if="portDetail.portStatus == 6">{{i18('剩余时间')}}</span>
|
|
<view><span v-if="portDetail.portStatus == 6">{{i18('剩余时间')}}</span>
|
|
|
<span v-else>{{$t('charge.chargetime')}}</span></view>
|
|
<span v-else>{{$t('charge.chargetime')}}</span></view>
|
|
|
<view class="demo-layout bg-purple"
|
|
<view class="demo-layout bg-purple"
|
|
@@ -158,16 +167,16 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view span="2" style="width: 100px;left:36%;position: absolute">
|
|
|
|
|
|
|
+ <view span="2" style=";left:34vw;position: absolute">
|
|
|
<view v-if="portDetail.portStatus == 2"
|
|
<view v-if="portDetail.portStatus == 2"
|
|
|
- style="text-align: center;position: absolute;margin:-1vh 5vw;border: 0ch;height: 20vh;">
|
|
|
|
|
|
|
+ style="text-align: center;position: absolute;margin:-1vh 2vw;border: 0ch;height: 20vh;">
|
|
|
<u-button @click="toPage()" shape="circle"
|
|
<u-button @click="toPage()" shape="circle"
|
|
|
- style="background: #ec3e41;color:white;width: 100vm;border: 0ch;height: 6vh;">Charge</u-button>
|
|
|
|
|
|
|
+ style="background: #ec3e41;color:white;width: 28vw;border: 0ch;height: 6vh;">Charge</u-button>
|
|
|
</view>
|
|
</view>
|
|
|
<view v-if="portDetail.portStatus != 2"
|
|
<view v-if="portDetail.portStatus != 2"
|
|
|
- style="text-align: center;position: absolute;margin:-1vh 5vw;border: 0ch;height: 20vh;">
|
|
|
|
|
|
|
+ style="text-align: center;position: absolute;margin:-1vh 2vw;border: 0ch;height: 20vh;">
|
|
|
<u-button @click="toPage()" shape="circle"
|
|
<u-button @click="toPage()" shape="circle"
|
|
|
- style="background: #57B03D;color:white;width: 80px;border: 0ch;height: 6vh;">Charge</u-button>
|
|
|
|
|
|
|
+ style="background: #57B03D;color:white;width: 28vw;border: 0ch;height: 6vh;">Charge</u-button>
|
|
|
</view>
|
|
</view>
|
|
|
<!-- <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
|
|
<!-- <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
|
|
|
<image class="btn-image" src="/static/images/new/start/stop.png" >
|
|
<image class="btn-image" src="/static/images/new/start/stop.png" >
|
|
@@ -181,8 +190,8 @@
|
|
|
<view>{{ i18('立即充电') }}</view>
|
|
<view>{{ i18('立即充电') }}</view>
|
|
|
</view> -->
|
|
</view> -->
|
|
|
</view>
|
|
</view>
|
|
|
- <view span="3" style="width: 80px;left:65%;position: absolute">
|
|
|
|
|
- <view style="margin-left: 1vh;font-size: 12px;">
|
|
|
|
|
|
|
+ <view span="3" style="width: 26vw;left:65%;position: absolute">
|
|
|
|
|
+ <view style="margin-left: 3vw;font-size: 11px;">
|
|
|
<view> Ampere</view>
|
|
<view> Ampere</view>
|
|
|
<view class="demo-layout bg-purple"
|
|
<view class="demo-layout bg-purple"
|
|
|
style="border-radius: 8px;background-color: aliceblue;color: #000;">
|
|
style="border-radius: 8px;background-color: aliceblue;color: #000;">
|
|
@@ -217,7 +226,7 @@
|
|
|
</view> -->
|
|
</view> -->
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <view style="display: flex;align-items: center;justify-content: center;">
|
|
|
|
|
|
|
+ <view style="position:fixed;bottom:10px;display: flex;align-items: center;justify-content: center;text-align: center;left:0px;right:0px;">
|
|
|
<view @click="skipPage(0)">
|
|
<view @click="skipPage(0)">
|
|
|
<image src="../../../static/images/new/starts/tabbar/one_off.png"
|
|
<image src="../../../static/images/new/starts/tabbar/one_off.png"
|
|
|
style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
@@ -299,6 +308,7 @@
|
|
|
<view>3,{{i18('为保障您远程启动正常充电,请确保枪头完全连接充电口,同时确认您的爱车处于立即充电状态下')}};</view>
|
|
<view>3,{{i18('为保障您远程启动正常充电,请确保枪头完全连接充电口,同时确认您的爱车处于立即充电状态下')}};</view>
|
|
|
<view>4,{{i18('注意规范安全充电,停好车,锁好车。')}}</view>
|
|
<view>4,{{i18('注意规范安全充电,停好车,锁好车。')}}</view>
|
|
|
</view> -->
|
|
</view> -->
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -348,8 +358,9 @@
|
|
|
],
|
|
],
|
|
|
planInfo: null,
|
|
planInfo: null,
|
|
|
days: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
days: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
|
- clickRightTag: 0
|
|
|
|
|
-
|
|
|
|
|
|
|
+ clickRightTag: 0,
|
|
|
|
|
+ show:false,
|
|
|
|
|
+ timeFlg:true
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -375,7 +386,7 @@
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
mounted: function() {
|
|
mounted: function() {
|
|
|
- this.drawCircle(100);
|
|
|
|
|
|
|
+ this.drawCircle(25);
|
|
|
this.drawProgressbg();
|
|
this.drawProgressbg();
|
|
|
//参数为1-100
|
|
//参数为1-100
|
|
|
this.drawLine();
|
|
this.drawLine();
|
|
@@ -419,26 +430,36 @@
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
- changeDrawer(event) {
|
|
|
|
|
- if (event) {
|
|
|
|
|
- // 抽屉打开时的逻辑
|
|
|
|
|
-
|
|
|
|
|
- this.clickRightTag = 1
|
|
|
|
|
- } else {
|
|
|
|
|
- // 抽屉关闭时的逻辑
|
|
|
|
|
- this.clickRightTag = 0
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ close(){
|
|
|
|
|
+ this.show=false
|
|
|
|
|
+ },
|
|
|
|
|
+ open(){
|
|
|
|
|
+ this.show=true
|
|
|
},
|
|
},
|
|
|
- //自定义头右操作函数
|
|
|
|
|
|
|
+ // clickRight() {
|
|
|
|
|
+ // this.show=true
|
|
|
|
|
+ // },
|
|
|
|
|
+ // changeDrawer(event) {
|
|
|
|
|
+ // if (event) {
|
|
|
|
|
+ // // 抽屉打开时的逻辑
|
|
|
|
|
+
|
|
|
|
|
+ // this.clickRightTag = 1
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // // 抽屉关闭时的逻辑
|
|
|
|
|
+ // this.clickRightTag = 0
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
|
|
+ // //自定义头右操作函数
|
|
|
clickRight() {
|
|
clickRight() {
|
|
|
//打开抽屉
|
|
//打开抽屉
|
|
|
- if (this.clickRightTag == 0) {
|
|
|
|
|
- this.$refs.showRight.open();
|
|
|
|
|
- this.clickRightTag = 1
|
|
|
|
|
- } else {
|
|
|
|
|
- this.$refs.showRight.close()
|
|
|
|
|
- this.clickRightTag = 0
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ this.show=!this.show
|
|
|
|
|
+ // if (this.clickRightTag == 0) {
|
|
|
|
|
+ // this.show=true
|
|
|
|
|
+ // this.clickRightTag = 1
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // this.show=false
|
|
|
|
|
+ // this.clickRightTag = 0
|
|
|
|
|
+ // }
|
|
|
},
|
|
},
|
|
|
//开始充电按钮
|
|
//开始充电按钮
|
|
|
trigger() {
|
|
trigger() {
|
|
@@ -462,88 +483,55 @@
|
|
|
drawProgressbg: function() {
|
|
drawProgressbg: function() {
|
|
|
// 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
|
// 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
|
|
var ctx = uni.createCanvasContext('cpbg', this);
|
|
var ctx = uni.createCanvasContext('cpbg', this);
|
|
|
- ctx.setLineWidth(19); // 设置圆环的宽度
|
|
|
|
|
- ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
|
|
|
|
|
|
|
+ ctx.setLineWidth(20); // 设置圆环的宽度
|
|
|
|
|
+ ctx.setStrokeStyle('#35383A'); // 设置圆环的颜色
|
|
|
// ctx.setLineCap('round'); // 设置圆环端点的形状
|
|
// ctx.setLineCap('round'); // 设置圆环端点的形状
|
|
|
ctx.setLineCap('square'); // 设置圆环端点的形状
|
|
ctx.setLineCap('square'); // 设置圆环端点的形状
|
|
|
ctx.beginPath(); //开始一个新的路径
|
|
ctx.beginPath(); //开始一个新的路径
|
|
|
- ctx.arc(90, 90, 80, 0 * Math.PI, 2 * Math.PI, false);
|
|
|
|
|
|
|
+ ctx.arc(100, 100, 90, 0 * Math.PI, 2 * Math.PI, false);
|
|
|
//设置一个原点(110,110),半径为100的圆的路径到当前路径
|
|
//设置一个原点(110,110),半径为100的圆的路径到当前路径
|
|
|
ctx.stroke(); //对当前路径进行描边
|
|
ctx.stroke(); //对当前路径进行描边
|
|
|
ctx.draw();
|
|
ctx.draw();
|
|
|
},
|
|
},
|
|
|
drawCircle: function(step) {
|
|
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);
|
|
|
|
|
|
|
+ var ctx = uni.createCanvasContext('cpbar', this);
|
|
|
|
|
+ // 进度条的渐变(中心x坐标-半径-边宽,中心Y坐标,中心x坐标+半径+边宽,中心Y坐标)
|
|
|
|
|
+ var gradient = ctx.createLinearGradient(0, 0, 120, 0);
|
|
|
|
|
+
|
|
|
|
|
+ let increase = 0.15;
|
|
|
|
|
+ let end = (150 /100) * 2 * Math.PI ; // 最后的角度
|
|
|
|
|
+ let current = (50 / 100) * 2 * Math.PI-Math.PI/2 ; // 起始角度
|
|
|
|
|
+ if(this.portDetail.portStatus == 2){
|
|
|
|
|
+ if(this.timeFlg){
|
|
|
|
|
+ this.timeFlg=false
|
|
|
|
|
+ let timer = setInterval(() => {
|
|
|
|
|
+ gradient.addColorStop('0', '#57B03D');
|
|
|
|
|
+ gradient.addColorStop('1.0', '#57B03D');
|
|
|
|
|
+ ctx.setLineWidth(10);
|
|
|
|
|
+ ctx.setStrokeStyle(gradient);
|
|
|
|
|
+ ctx.setLineCap('square');
|
|
|
|
|
+ ctx.beginPath();
|
|
|
|
|
+ // 参数step 为绘制的百分比
|
|
|
|
|
+ if (current < end) {
|
|
|
|
|
+ current = current + increase;
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- // 画刻度
|
|
|
|
|
- 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();
|
|
|
|
|
|
|
+ if (current >= end) {
|
|
|
|
|
+ //current = end;
|
|
|
|
|
+ if(this.portDetail.portStatus != 2){
|
|
|
|
|
+ clearInterval(timer);
|
|
|
|
|
+ this.timeFlg=true
|
|
|
|
|
+ }else{
|
|
|
|
|
+ end = (150 /100) * 2 * Math.PI ; // 最后的角度
|
|
|
|
|
+ current = (50 / 100) * 2 * Math.PI-Math.PI/2 ; // 起始角度
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- context.stroke();
|
|
|
|
|
- context.draw();
|
|
|
|
|
|
|
+ ctx.arc(100, 100, 90, (50 / 100) * 2 * Math.PI-Math.PI/2, current, false);
|
|
|
|
|
+ ctx.stroke();
|
|
|
|
|
+ ctx.draw();
|
|
|
|
|
+
|
|
|
|
|
+ }, 20);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
toPage() {
|
|
toPage() {
|
|
@@ -719,7 +707,7 @@
|
|
|
self.deviceV = self.portDetail.voltage;
|
|
self.deviceV = self.portDetail.voltage;
|
|
|
self.$modal.closeLoading();
|
|
self.$modal.closeLoading();
|
|
|
if(self.portDetail.portStatus==2){
|
|
if(self.portDetail.portStatus==2){
|
|
|
- this.drawCircle(100);
|
|
|
|
|
|
|
+ this.drawCircle(25);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
initSocket(key) {
|
|
initSocket(key) {
|
|
@@ -793,7 +781,7 @@
|
|
|
if (portStatus == 5) {
|
|
if (portStatus == 5) {
|
|
|
this.$modal.confirm("确认开始充电么?").then(res => {
|
|
this.$modal.confirm("确认开始充电么?").then(res => {
|
|
|
this.startCharge();
|
|
this.startCharge();
|
|
|
- this.drawCircle(100); //参数为1-100
|
|
|
|
|
|
|
+ this.drawCircle(50); //参数为1-100
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -802,9 +790,9 @@
|
|
|
getInfo() {
|
|
getInfo() {
|
|
|
|
|
|
|
|
let self = this;
|
|
let self = this;
|
|
|
- this.$modal.loading("正在获取状态,请稍等...");
|
|
|
|
|
|
|
+ this.$modal.loading("正在获取状态,请稍等...",true);
|
|
|
sendPortDetailCmd(this.deviceInfo).then(res => {
|
|
sendPortDetailCmd(this.deviceInfo).then(res => {
|
|
|
- this.$modal.loading("正在获取状态,请稍等...");
|
|
|
|
|
|
|
+ this.$modal.loading("正在获取状态,请稍等...",true);
|
|
|
this.visitTime = res.msg;
|
|
this.visitTime = res.msg;
|
|
|
if (!this.visitTime) {
|
|
if (!this.visitTime) {
|
|
|
this.$modal.msg("请重新进入页面");
|
|
this.$modal.msg("请重新进入页面");
|
|
@@ -822,6 +810,7 @@
|
|
|
});
|
|
});
|
|
|
}, 500)
|
|
}, 500)
|
|
|
})
|
|
})
|
|
|
|
|
+ this.drawCircle(25)
|
|
|
},
|
|
},
|
|
|
stopCharge() {
|
|
stopCharge() {
|
|
|
let self = this;
|
|
let self = this;
|
|
@@ -942,14 +931,14 @@
|
|
|
color: #BCBCBF;
|
|
color: #BCBCBF;
|
|
|
}
|
|
}
|
|
|
.progress_box {
|
|
.progress_box {
|
|
|
- /* position: relative; */
|
|
|
|
|
- width: 35vh;
|
|
|
|
|
- height: 35vh;
|
|
|
|
|
- /* background-color: red; */
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ /* position: relative; */
|
|
|
|
|
+ width: 52vw;
|
|
|
|
|
+ height: 35vh;
|
|
|
|
|
+ /* background-color: red; */
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -960,35 +949,52 @@
|
|
|
|
|
|
|
|
.progress_bg {
|
|
.progress_bg {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 30vh;
|
|
|
|
|
- height: 30vh;
|
|
|
|
|
|
|
+ width: 60vw;
|
|
|
|
|
+ height: 50vh;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.progress_txt {
|
|
.progress_txt {
|
|
|
- position: absolute;
|
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 99;
|
|
|
|
|
+ width: 55vw;
|
|
|
|
|
+ /* text-align: center;
|
|
|
font-size: 28upx;
|
|
font-size: 28upx;
|
|
|
- margin-top: 54px;
|
|
|
|
|
- margin-left: 74px;
|
|
|
|
|
- color: #999999;
|
|
|
|
|
|
|
+ margin: 16vw;
|
|
|
|
|
+ /* margin-top: 54px;
|
|
|
|
|
+ margin-left: 74px;
|
|
|
|
|
+ color: #999999; */
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.progress_bar {
|
|
.progress_bar {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 30vh;
|
|
|
|
|
- height: 30vh;
|
|
|
|
|
|
|
+ width: 60vw;
|
|
|
|
|
+ margin: 2px;
|
|
|
|
|
+ height: 50vh;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ .progress-barup{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 200px;
|
|
|
|
|
+ margin: 2px;
|
|
|
|
|
+ height: 196px;
|
|
|
|
|
+ z-index: 1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.progress_line {
|
|
.progress_line {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 30vh;
|
|
|
|
|
- height: 30vh;
|
|
|
|
|
|
|
+ width: 60vw;
|
|
|
|
|
+ height: 50vh;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.progress_info {
|
|
.progress_info {
|
|
|
- font-size: 25upx;
|
|
|
|
|
- /* padding-left: 16upx; */
|
|
|
|
|
- letter-spacing: 2upx;
|
|
|
|
|
- margin: 1vh 0vh 0vh -3vh;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ font-size: 10px;
|
|
|
|
|
+ margin: 70px 30px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ /* height: 14vh; */
|
|
|
|
|
+ width: 35vw;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.header {
|
|
.header {
|
|
@@ -1492,7 +1498,8 @@
|
|
|
.item-text {
|
|
.item-text {
|
|
|
font-size: 11px;
|
|
font-size: 11px;
|
|
|
margin: 1px 0;
|
|
margin: 1px 0;
|
|
|
- color: #999999;
|
|
|
|
|
|
|
+ color: aliceblue;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.start {
|
|
.start {
|
|
@@ -1556,4 +1563,5 @@
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
</style>
|
|
</style>
|