|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view style="height: 0vh;place-items: center;display: grid;">
|
|
|
- <image style="height: 3vh;width: 27vw;margin-top: 1vh;top: 3vh;"
|
|
|
+ <view style=" margin: 2vh 0 0 22vw;place-items: center;display: flex;flex-direction: row;justify-content: space-evenly;">
|
|
|
+ <image style="height: 3vh;width: 35vw;"
|
|
|
src="../../../static/images/new/starts/login/backImg2.png"></image>
|
|
|
- <text @click="clickRight()"
|
|
|
- style="font-size: 15px;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>
|
|
|
+ <view @click="clickRight()"
|
|
|
+ style="font-size: 15px;font-weight: bold;z-index: 9999;height: 3vh;"><uni-icons v-show="!show" style="color: #ffffff;" size="30" type="more-filled"></uni-icons><uni-icons size="30" v-show="show" style="color: #57B03D;" type="more-filled"></uni-icons></view>
|
|
|
|
|
|
<!-- <uni-drawer @change="changeDrawer" style="top:20vh;height: 100vh" ref="showRight" mode="right"
|
|
|
:mask-click="true">
|
|
|
@@ -12,7 +12,7 @@
|
|
|
</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" >
|
|
|
+ <u-popup :show="show" mode="right" customStyle="top:10vh;bottom:200px;" :overlayOpacity="0" :closeOnClickOverlay="true" :zIndex="100" ref="showRight" :overlay="false" >
|
|
|
<view style="width: 100vw;height: 100vh;">
|
|
|
<scroll-view style="background: linear-gradient(#000000, #161615);font-size: 20px;height: 100vh;" scroll-y="true">
|
|
|
<view class="prop-item" @click="handleLogout()">
|
|
|
@@ -49,7 +49,7 @@
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
- <view style=" position: relative;top: 10vh;margin-top: 4vh;text-align: center;display: flex;flex-direction: row;justify-content: center;">
|
|
|
+ <view style=" position: relative;top: 4vh;margin-top: 4vh;text-align: center;display: flex;flex-direction: row;justify-content: center;">
|
|
|
<view class="progress_box" style="text-align: center">
|
|
|
<!-- <canvas class="progress_bg" canvas-id="cpbg"></canvas> -->
|
|
|
<view >
|
|
|
@@ -59,7 +59,7 @@
|
|
|
<!-- <canvas class="progress_line" canvas-id="cpline"></canvas> -->
|
|
|
<view class="progress_txt">
|
|
|
<view class="progress_info">
|
|
|
- <view class="p0" style="color: azure;" st="">{{ deviceInfo.qrcode}}</view>
|
|
|
+ <view class="p0" style="color: azure;font-size: 13px;" st="">{{ deviceInfo.qrcode}}</view>
|
|
|
<view class="p1">
|
|
|
<view v-if="portStatus == 2" style="position: relative;">
|
|
|
{{$t('charge.charging')}}
|
|
|
@@ -131,7 +131,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
- <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: 6vh;">
|
|
|
<view
|
|
|
style="background-color: #494E51;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 75vw;;border-radius: 27px;">
|
|
|
<view span="4" style="width: 25vw;">
|
|
|
@@ -164,9 +164,10 @@
|
|
|
<view style="font-weight: bold;"><span v-if="portDetail.portStatus == 6">{{i18('剩余时间')}}</span>
|
|
|
<span v-else>{{$t('charge.chargetime')}}</span></view>
|
|
|
<view class="demo-layout bg-purple"
|
|
|
- style="border-radius: 8px;background-color: aliceblue;color: #000;">
|
|
|
- <view >{{ chargeTime }}{{ i18('分钟') }}</view>
|
|
|
-
|
|
|
+ style="border-radius: 8px;background-color: aliceblue;color: #000;display: flex;padding-top: 5px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;">
|
|
|
+ <view style="">{{ chargeTime }}{{ i18('分钟') }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -197,7 +198,9 @@
|
|
|
<view style="margin-left: 3vw;font-size: 11px;">
|
|
|
<view style="font-weight: bold;"> Ampere</view>
|
|
|
<view class="demo-layout bg-purple"
|
|
|
- style="border-radius: 8px;background-color: aliceblue;color: #000;">
|
|
|
+ style="border-radius: 8px;background-color: aliceblue;color: #000;display: flex;padding-top: 5px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;">
|
|
|
<view v-if="deviceV == 0">0A</view>
|
|
|
<view v-else>{{currentValue}}A</view>
|
|
|
</view>
|
|
|
@@ -229,20 +232,20 @@
|
|
|
</view> -->
|
|
|
</view>
|
|
|
|
|
|
- <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)">
|
|
|
- <image src="../../../static/images/new/starts/tabbar/one_off.png"
|
|
|
- style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
|
- </view>
|
|
|
- <view @click="skipPage(1)">
|
|
|
- <image src="../../../static/images/new/starts/tabbar/two_off.png"
|
|
|
- style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
|
- </view>
|
|
|
- <view @click="skipPage(2)">
|
|
|
- <image src="../../../static/images/new/starts/tabbar/three_off.png"
|
|
|
- style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view style="position:fixed;bottom:1vh;display: flex;align-items: center;justify-content: center;text-align: center;left:0px;right:0px;">
|
|
|
+ <view @click="skipPage(0)" style="margin:0px 10px;">
|
|
|
+ <image src="@/static/images/new/starts/tabbar/one_off.png"
|
|
|
+ style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
|
+ </view>
|
|
|
+ <view @click="skipPage(1)" style="margin:0px 10px;">
|
|
|
+ <image src="@/static/images/new/starts/tabbar/two_on.png"
|
|
|
+ style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
|
+ </view>
|
|
|
+ <view @click="skipPage(2)" style="margin:0px 10px;">
|
|
|
+ <image src="@/static/images/new/starts/tabbar/three_off.png"
|
|
|
+ style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
|
|
|
|
|
|
@@ -331,6 +334,7 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ consolee:0, //测试参数
|
|
|
refreshTimer: null,
|
|
|
curPort: [],
|
|
|
chargeTime: 0,
|
|
|
@@ -390,9 +394,9 @@
|
|
|
|
|
|
mounted: function() {
|
|
|
this.drawCircle(25);
|
|
|
- this.drawProgressbg();
|
|
|
+ //this.drawProgressbg();
|
|
|
//参数为1-100
|
|
|
- this.drawLine();
|
|
|
+ //this.drawLine();
|
|
|
},
|
|
|
methods: {
|
|
|
resetMainboard() {
|
|
|
@@ -483,28 +487,29 @@
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- drawProgressbg: function() {
|
|
|
- // 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
|
|
- var ctx = uni.createCanvasContext('cpbg', this);
|
|
|
- ctx.setLineWidth(20); // 设置圆环的宽度
|
|
|
- ctx.setStrokeStyle('#35383A'); // 设置圆环的颜色
|
|
|
- // ctx.setLineCap('round'); // 设置圆环端点的形状
|
|
|
- ctx.setLineCap('square'); // 设置圆环端点的形状
|
|
|
- ctx.beginPath(); //开始一个新的路径
|
|
|
- ctx.arc(100, 100, 90, 0 * Math.PI, 2 * Math.PI, false);
|
|
|
- //设置一个原点(110,110),半径为100的圆的路径到当前路径
|
|
|
- ctx.stroke(); //对当前路径进行描边
|
|
|
- ctx.draw();
|
|
|
- },
|
|
|
+ // drawProgressbg: function() {
|
|
|
+ // // 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
|
|
|
+ // var ctx = uni.createCanvasContext('cpbg', this);
|
|
|
+ // ctx.setLineWidth(20); // 设置圆环的宽度
|
|
|
+ // ctx.setStrokeStyle('#35383A'); // 设置圆环的颜色
|
|
|
+ // // ctx.setLineCap('round'); // 设置圆环端点的形状
|
|
|
+ // ctx.setLineCap('square'); // 设置圆环端点的形状
|
|
|
+ // ctx.beginPath(); //开始一个新的路径
|
|
|
+ // ctx.arc(120, 120, 90, 0 * Math.PI, 2 * Math.PI, false);
|
|
|
+ // //设置一个原点(110,110),半径为100的圆的路径到当前路径
|
|
|
+ // ctx.stroke(); //对当前路径进行描边
|
|
|
+ // ctx.draw();
|
|
|
+ // },
|
|
|
drawCircle: function(step) {
|
|
|
var ctx = uni.createCanvasContext('cpbar', this);
|
|
|
// 进度条的渐变(中心x坐标-半径-边宽,中心Y坐标,中心x坐标+半径+边宽,中心Y坐标)
|
|
|
var gradient = ctx.createLinearGradient(0, 0, 120, 0);
|
|
|
|
|
|
let increase = 0.15;
|
|
|
- let end = (150 /100) * 2 * Math.PI ; // 最后的角度
|
|
|
- let current = (50 / 100) * 2 * Math.PI-Math.PI/2 ; // 起始角度
|
|
|
+ let end = (120 /100) * 2 * Math.PI ; // 最后的角度
|
|
|
+ let current = (50 / 100) * 2 * Math.PI-Math.PI/3 ; // 起始角度
|
|
|
if(this.portDetail.portStatus == 2){
|
|
|
+ this.consolee+=1
|
|
|
if(this.timeFlg){
|
|
|
this.timeFlg=false
|
|
|
let timer = setInterval(() => {
|
|
|
@@ -523,16 +528,15 @@
|
|
|
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 ; // 起始角度
|
|
|
}
|
|
|
+ end = (120 /100) * 2 * Math.PI ; // 最后的角度
|
|
|
+ current = (50 / 100) * 2 * Math.PI-Math.PI/3 ; // 起始角度
|
|
|
}
|
|
|
- ctx.arc(100, 100, 90, (50 / 100) * 2 * Math.PI-Math.PI/2, current, false);
|
|
|
+ ctx.arc(120, 120, 115, (50 / 100) * 2 * Math.PI-Math.PI/2, current, false);
|
|
|
ctx.stroke();
|
|
|
ctx.draw();
|
|
|
|
|
|
- }, 20);
|
|
|
+ }, 40);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -936,8 +940,8 @@
|
|
|
.progress_box {
|
|
|
|
|
|
/* position: relative; */
|
|
|
- width: 52vw;
|
|
|
- height: 35vh;
|
|
|
+ /* width: 60vw; */
|
|
|
+ height: 38vh;
|
|
|
/* background-color: red; */
|
|
|
display: flex;
|
|
|
text-align: center;
|
|
|
@@ -957,9 +961,9 @@
|
|
|
}
|
|
|
|
|
|
.progress_txt {
|
|
|
- position: absolute;
|
|
|
+ /* position: absolute; */
|
|
|
z-index: 99;
|
|
|
- width: 55vw;
|
|
|
+ /* width: 55vw; */
|
|
|
/* text-align: center;
|
|
|
font-size: 28upx;
|
|
|
margin: 16vw;
|
|
|
@@ -970,16 +974,16 @@
|
|
|
|
|
|
.progress_bar {
|
|
|
position: absolute;
|
|
|
- width: 60vw;
|
|
|
- margin: 2px;
|
|
|
+ width: 64vw;
|
|
|
+ margin: 7px 0px 0px 5px;
|
|
|
height: 50vh;
|
|
|
|
|
|
}
|
|
|
.progress-barup{
|
|
|
position: absolute;
|
|
|
- width: 200px;
|
|
|
- margin: 2px;
|
|
|
- height: 196px;
|
|
|
+ width: 250px;
|
|
|
+ margin: 0px;
|
|
|
+ height: 250px;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
@@ -993,11 +997,11 @@
|
|
|
.progress_info {
|
|
|
display: flex;
|
|
|
font-size: 10px;
|
|
|
- margin: 70px 30px;
|
|
|
+ margin: 80px 30px;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
/* height: 14vh; */
|
|
|
- width: 35vw;
|
|
|
+ width: 190px;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
@@ -1555,7 +1559,7 @@
|
|
|
}
|
|
|
|
|
|
.p1 {
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 22px;
|
|
|
color: white;
|
|
|
font-weight: bold;
|
|
|
margin-top: 10px;
|
|
|
@@ -1563,7 +1567,7 @@
|
|
|
}
|
|
|
.p2{
|
|
|
color: #888;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 22px;
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|