电池包逻辑调整

components/circle-progress/circle-progress.js

@@ -19,27 +19,27 @@ Component({
           this.updateDisabled(newVal);
         }
       },
-    width: {
-        type: Number,
-        value: 100,
-        observer(newVal) {
-            this.updateWidth(newVal);
-        }
-    },
-    r: {
-        type: Number,
-        value: 90,
-        observer(newVal) {
-            this.updateR(newVal);
-        }
-    },
-    lw: {
-        type: Number,
-        value: 5,
-        observer(newVal) {
-            this.updateLw(newVal);
-        }
-    },
+    // width: {
+    //     type: Number,
+    //     value: 100,
+    //     observer(newVal) {
+    //         this.updateWidth(newVal);
+    //     }
+    // },
+    // r: {
+    //     type: Number,
+    //     value: 90,
+    //     observer(newVal) {
+    //         this.updateR(newVal);
+    //     }
+    // },
+    // lw: {
+    //     type: Number,
+    //     value: 5,
+    //     observer(newVal) {
+    //         this.updateLw(newVal);
+    //     }
+    // },
   },
 
   
@@ -54,9 +54,20 @@ Component({
       r:110,
       lw:7,
     },
-  
+    
     lifetimes: {
       attached() {
+
+        const container = this.selectComponent('#container')
+        // const width = container.offsetWidth;
+        // const height = container.offsetHeight;
+        console.log("xxxxxxxxxxxxxxxxxxxxxxx")
+        console.log(container)
+        // console.log(width)
+        // console.log(height)
+        console.log("xxxxxxxxxxxxxxxxxxxxxxx")
+
+
         // 组件加载后准备绘制
         this.initCanvas();
       },
@@ -70,11 +81,28 @@ Component({
        * 初始化 Canvas 上下文
        */
       initCanvas() {
+          let that = this
         // 获取两个canvas元素的上下文
         this.bgContext = wx.createCanvasContext('canvasProgressbg', this);
         this.progressContext = wx.createCanvasContext('canvasProgress', this);
-        this.drawProgressbg();
-        this.drawCircle(this.data.progress);
+
+
+        const container = this.selectComponent('#container')
+        var query = wx.createSelectorQuery().in(this);
+        query.select('#container').boundingClientRect()
+        query.exec(function (res) {
+            //res就是 所有标签为publicImg的元素的信息 的数组
+            console.log(res);
+            that.data.width = res[0].width / 2
+            that.data.r = that.data.width - 1
+            that.data.lw = 1
+
+            that.drawProgressbg();
+            that.drawCircle(that.data.progress);
+        })
+
+                    
+
       },
   
       /**
@@ -100,10 +128,6 @@ Component({
 
         this.progressContext.setFillStyle('red');
 
-
-    
-
-
       },
 
       /**
@@ -133,33 +157,33 @@ Component({
                   /**
       * 更新并画disabled
       */
-     updateWidth(dis) {
-        this.setData({
-            width:dis
-        })
-        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
-        if(this.progressContext){
-            this.drawCircle(this.data.progressPercentage);
-        }
-      }, 
-      updateR(dis) {
-        this.setData({
-            r:dis
-        })
-        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
-        if(this.progressContext){
-            this.drawCircle(this.data.progressPercentage);
-        }
-      },
-      updateLw(dis) {
-        this.setData({
-            r:dis
-        })
-        //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
-        if(this.progressContext){
-            this.drawCircle(this.data.progressPercentage);
-        }
-      },
+    //  updateWidth(dis) {
+    //     this.setData({
+    //         width:dis
+    //     })
+    //     //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
+    //     if(this.progressContext){
+    //         this.drawCircle(this.data.progressPercentage);
+    //     }
+    //   }, 
+    //   updateR(dis) {
+    //     this.setData({
+    //         r:dis
+    //     })
+    //     //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
+    //     if(this.progressContext){
+    //         this.drawCircle(this.data.progressPercentage);
+    //     }
+    //   },
+    //   updateLw(dis) {
+    //     this.setData({
+    //         r:dis
+    //     })
+    //     //const normalizedProgress = (progressPercentage / 100) * 2; // 转换成弧度，最大值为2（对应100%）
+    //     if(this.progressContext){
+    //         this.drawCircle(this.data.progressPercentage);
+    //     }
+    //   },
       /**
        * 画progress进度
        */

components/circle-progress/circle-progress.wxml

@@ -1,6 +1,6 @@
 <!--components/circle/circle.wxml-->
 
-<view class='container'>
+<view class='container' id="container">
   <view class='progress_box'>
     <!-- 绘制圆环背景 -->
     <canvas class="progress_bg" canvas-id="canvasProgressbg" />

components/circle-progress/circle-progress.wxss

@@ -51,7 +51,7 @@
   }
    
   .progress_info {
-    font-size: 12rpx;
+    font-size: 16rpx;
     text-align: center;
     /* letter-spacing: 2rpx; */
     color: #21ADFF;

pages/charginfo/eleCarMap.js

@@ -1,4 +1,5 @@
 // pages/charginfo/eleCarMap.js
+
 Page({
 
   /**

pages/charginfo/eleCarMap.wxml

@@ -1,6 +1,7 @@
 
 <view class='view'>
   <!-- <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" show-location> -->
+  <view class="mapBox">
 <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" bindcallouttap="callouttap">
     <cover-view slot="callout">
         <!--  电池包 -->
@@ -23,6 +24,7 @@
         </block>
       </cover-view>
   </map>
+</view>
   <view class="txt">请选择可用车位和电池包</view>
   <button class="{{car_active?'login_button':'login_button_disable'}}" bindtap="callCar">呼叫充电车</button>
 </view>

pages/charginfo/eleCarMap.wxss

@@ -9,12 +9,19 @@ width: 100%;
 height: 100%;
 }
    
-  map {
+.mapBox{
     margin: 0 20rpx;
     width: calc(100% - 40rpx);
-    height: 70%;
-    background-color: #FFF;
-  }
+    height: 80%;
+    overflow: hidden;
+}
+map {
+margin: 0 20rpx;
+width: calc(100% - 40rpx);
+height: calc(100% + 50rpx);
+background-color: #FFF;
+
+}
 
 
   
@@ -57,7 +64,7 @@ height: 100%;
     border-radius: 40rpx;
     height: 80rpx;
     border: none;
-    margin: 75rpx 135rpx 0 135rpx;
+    margin: 70rpx 135rpx 0 135rpx;
   }
   
   .login_button.button-hover {

pages/index/index.wxss

@@ -112,6 +112,7 @@
   height: 38rpx;
   display:block;
   margin: 24rpx;
+ 
 }
 
 .map_location_hover{

pages/scan_result/elpackage.wxml

@@ -18,15 +18,15 @@
       </view>
     </view>
     <!-- <text style='margin-bottom:10rpx;'>地址：{{chargPile.address}}</text> -->
-    <rich-text space='nbsp' nodes="地址：{{chargPile.address}}" style='line-height:30rpx;font-size:24rpx;margin-bottom:10rpx;word-wrap: break-word;' ></rich-text>
-    <text style="font-size:28rpx;line-height:28rpx;">请选择电池包</text>
+    <text style='line-height:24rpx;height:24rpx;font-size:24rpx;margin-top: 16rpx;' >地址：{{chargPile.address}}</text>
+    <text style="line-height:24rpx;height:24rpx;font-size:24rpx;margin: 20rpx 0;">请选择电池包</text>
     <view class="cardHub">
         <block wx:for="{{eleList}}" wx:key="*this"  >
         <view class="card {{item.active?'':'dis'}}" bindtap="selectEle" data-idx="{{index}}">
-                <view class="circleOut"><view class="circleIn">{{index + 1}}</view></view>
+                <view class="circleOut">{{index + 1}}</view>
                 <view class="main">
                     <view style="width:60rpx;height:60rpx;margin: 0 auto;margin-top: 30rpx;">
-                        <circle-progress name="circle-progress" progress="{{item.currentSoc}}" disabled="{{!item.active}}" width="{{15}}" r="{{14}}" lw="{{1}}"/>
+                        <circle-progress name="circle-progress" progress="{{item.currentSoc}}" disabled="{{!item.active}}"/>
                     </view>
                     <view class="no">编号:{{item.chargPileId}}</view>
                 </view>

pages/scan_result/elpackage.wxss

@@ -22,7 +22,7 @@ page {
     height: 105rpx;
     width: 100%;
     display: flex;
-    margin-bottom: 20rpx;
+    margin-bottom: 0rpx;
   }
   
   .charging_text_title1 {
@@ -225,7 +225,9 @@ page {
   }
 
   .cardHub .card .circleOut{
-    background-color: #21ADFF;
+    background-color: #ebf8ff;
+    border:1rpx solid #21ADFF;
+    color:#21ADFF;
     position: absolute;
     width: 28rpx;
     height: 28rpx;
@@ -233,9 +235,12 @@ page {
     padding: 0;
     top:10rpx;
     left:10rpx;
+    font-size: 18rpx;
+    line-height: 28rpx;
+    text-align: center;
   }
 
-  .cardHub .card .circleOut .circleIn{
+  /* .cardHub .card .circleOut .circleIn{
     background-color: #ebf8ff;
     color:#21ADFF;
     font-size: 18rpx;
@@ -246,7 +251,7 @@ page {
     border-radius: 50%;
     margin: 3rpx;
     padding: 0;
-  }
+  } */
 
   .cardHub .card .main{
     width:100%;
@@ -287,7 +292,9 @@ page {
   }
 
   .cardHub .card.dis .circleOut{
-    background-color: #B6B3B1;
+    border:1rpx solid #B6B3B1;
+    background-color: #EEEEEE;
+    color:#A4A3A3;
   }
 
   .cardHub .card.dis .no{