优化

src/pages/index/index.tsx

@@ -229,7 +229,7 @@ class Index extends Component<any, any> {
     let token = getStorageSync("token");
     if (!token) {
       // 如果token过期，先登录，登录完成后自动初始化
-      await this.WCUserLogin();
+      // await this.WCUserLogin();
     } else {
       // token没过期，直接请求数据
       this.initPageData();

src/pages/iotCarePlan/components/Echart/index.less

@@ -7,6 +7,7 @@
   padding: 35rpx 25rpx 25rpx 35rpx;
   box-sizing: border-box;
   position: relative;
+  z-index: 0;
 }
 .box_background {
   position: absolute;
@@ -23,7 +24,7 @@
     font-size: 18rpx;
     color: #cccccc;
   }
-  .full{
+  .full {
     width: 24rpx;
     height: 24rpx;
     position: absolute;
@@ -50,7 +51,6 @@
     }
   }
 
-
   .time {
     position: absolute;
     bottom: 22rpx;
@@ -61,9 +61,6 @@
   }
 }
 
-
-
-
 page {
   background: #f8f8f8;
   background: #f3f3f3;
@@ -88,11 +85,11 @@ page {
   border-radius: 30rpx;
   margin: 27rpx 30rpx 22rpx;
   position: relative;
-  box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
   .img {
     width: 690rpx;
     height: 690rpx;
-    box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
     position: relative;
     border-radius: 20rpx;
     margin: auto;
@@ -325,7 +322,7 @@ page {
   }
 }
 .infobox1 .info1 .block .tip1,
-  .infobox1 .info1 .block .dang {
+.infobox1 .info1 .block .dang {
   font-size: 26rpx;
   font-weight: 500;
   color: #000000;
@@ -401,7 +398,7 @@ page {
   width: 100%;
   height: 138rpx;
   background: #ffffff;
-  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173,191,207,0.21);
+  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
   border-bottom: 15rpx solid #ffffff;
   .line {
     position: absolute;
@@ -420,7 +417,7 @@ page {
     height: 36rpx;
   }
   .disabled {
-    opacity: 0.5!important;
+    opacity: 0.5 !important;
   }
   .end_img {
     width: 36rpx;
@@ -527,7 +524,7 @@ page {
     height: 100%;
     border-radius: 20rpx;
     overflow: hidden;
-    box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
     .block1 {
       .block1_1 {
         height: 100%;
@@ -550,11 +547,11 @@ page {
       display: inline-block;
       height: 100%;
       width: 0;
-      transition: all .3s;
+      transition: all 0.3s;
       .block2_info {
         width: 140rpx;
         text-align: center;
-        box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+        box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
         height: calc(140rpx - 10rpx);
         border-radius: 20rpx;
         align-items: flex-end;
@@ -576,7 +573,7 @@ page {
           -o-filter: grayscale(100%);
           filter: grayscale(100%);
           filter: gray;
-          opacity: .5;
+          opacity: 0.5;
         }
         .block2_bg {
           position: absolute;
@@ -584,7 +581,7 @@ page {
           left: 0;
           right: 0;
           bottom: 0;
-          opacity: .5;
+          opacity: 0.5;
         }
         .block2_info1 {
           height: 100%;
@@ -621,7 +618,7 @@ page {
     background: #fff;
     height: 162rpx;
     border-radius: 20rpx;
-    box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
     .block1 {
       padding: 0 16rpx;
     }
@@ -669,25 +666,25 @@ page {
   }
 }
 .infobox3 .info1 .block1,
-  .infobox3 .info2 .block1 {
+.infobox3 .info2 .block1 {
   flex-direction: column;
   display: inline-block;
   height: 100%;
   text-align: center;
 }
 .infobox3 .info1 .tip1,
-  .infobox3 .info2 .tip1 {
+.infobox3 .info2 .tip1 {
   color: #202020;
   font-size: 22rpx;
   font-weight: bold;
 }
 .infobox3 .info1 .tip2,
-  .infobox3 .info2 .tip2 {
+.infobox3 .info2 .tip2 {
   color: #202020;
   font-size: 22rpx;
 }
 .infobox3 .info1 .quan1,
-  .infobox3 .info2 .quan1 {
+.infobox3 .info2 .quan1 {
   border-radius: 50%;
   width: 30rpx;
   height: 30rpx;
@@ -698,7 +695,7 @@ page {
   border: 4rpx solid #f1f1f1;
 }
 .infobox3 .info1 .quan1 .quan2,
-  .infobox3 .info2 .quan1 .quan2 {
+.infobox3 .info2 .quan1 .quan2 {
   position: absolute;
   border-radius: 50%;
   background: #000000;
@@ -732,7 +729,7 @@ page {
 .infobox4 {
   height: 300rpx;
   border-radius: 20rpx;
-  box-shadow: -2rpx 0 12rpx .5rpx rgba(129, 129, 129, 0.05);
+  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
   margin: 22rpx 20rpx;
   background: #fff;
   position: relative;
@@ -1084,7 +1081,13 @@ ec-canvas {
   }
 }
 .water_test {
-  padding: 22rpx 46rpx;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 42rpx 48rpx;
+  width: 690rpx;
+  height: 292rpx;
+  background: #ffffff;
+  border-radius: 30rpx;
   .test_step {
     .step_block {
       flex-direction: column;
@@ -1118,6 +1121,7 @@ ec-canvas {
       color: #000000;
       margin-left: 14rpx;
       padding-top: 12rpx;
+      letter-spacing: 2rpx;
     }
   }
   .test_txt {
@@ -1125,6 +1129,8 @@ ec-canvas {
     font-weight: 500;
     color: #999999;
     padding-top: 48rpx;
+    line-height: 36rpx;
+    letter-spacing: 2rpx;
   }
 }
 .testing {
@@ -1158,7 +1164,7 @@ ec-canvas {
     height: 228rpx;
     background: #ffffff;
     border-radius: 0rpx 0rpx 30rpx 30rpx;
-    padding: 51rpx 28rpx 0 39rpx;
+    padding: 51rpx 30rpx 0 36rpx;
     box-sizing: border-box;
     .progress_box {
       width: 100%;
@@ -1170,6 +1176,7 @@ ec-canvas {
         color: #000000;
         min-width: 200rpx;
         margin-right: 60rpx;
+        letter-spacing: 2rpx;
       }
     }
     .tips {
@@ -1177,6 +1184,8 @@ ec-canvas {
       font-weight: 500;
       color: #999999;
       margin-top: 45rpx;
+      line-height: 36rpx;
+      letter-spacing: 2rpx;
     }
     .progress_block {
       flex: 1;
@@ -1390,6 +1399,83 @@ image {
     }
   }
 }
+
+.gear_adjustment {
+  box-sizing: border-box;
+  width: 690rpx;
+  height: 300rpx;
+  background: #ffffff;
+  border-radius: 30rpx;
+  padding: 30rpx;
+  margin: 30rpx auto 200rpx;
+  .gear_box {
+    .gear {
+      margin-bottom: 30rpx;
+      .pos {
+        font-size: 26rpx;
+        font-weight: 500;
+        color: #666666;
+        min-width: 76rpx;
+        margin-right: 32rpx;
+      }
+      .gear_button {
+        width: 500rpx;
+        height: 60rpx;
+        background: #f8f8f8;
+        border-radius: 30rpx;
+        justify-content: space-between;
+        font-size: 20rpx;
+
+        .button_minus {
+          width: 90rpx;
+          height: 60rpx;
+          background: #e5e5e5;
+          border-radius: 30rpx 0rpx 0rpx 30rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .image {
+            width: 28rpx;
+            height: 28rpx;
+          }
+        }
+
+        .button_plus {
+          width: 90rpx;
+          height: 60rpx;
+          background: #e5e5e5;
+          border-radius: 0rpx 30rpx 30rpx 0rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .image {
+            width: 28rpx;
+            height: 28rpx;
+          }
+        }
+
+        .button_value {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 24rpx;
+          width: 320rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          color: #666;
+          .number {
+            font-family: PingFang SC;
+            font-weight: 800;
+            font-size: 30rpx;
+            color: #000000;
+            margin-right: 4rpx;
+          }
+        }
+      }
+    }
+  }
+}
+
 .level_box {
   padding-left: 109rpx;
   .level_num {
@@ -1428,9 +1514,9 @@ image {
   }
 }
 .current-button {
-  background: #CCCC;
+  background: #cccc;
   .level {
-    color: #CCCC;
+    color: #cccc;
   }
 }
 .success_popup {

src/pages/iotCarePlan/components/Echart/index.tsx

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro';
 import classnames from 'classnames';
-import { Block, View, Image, Text } from '@tarojs/components';
+import { Block, View, Image, Text, Input } from '@tarojs/components';
 import { Popup, Progress, Slider } from '@antmjs/vantui';
 import { useRef } from 'react'
 import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts'
@@ -52,6 +52,10 @@ function Index() {
       right: '28rpx',
       bottom: '17rpx'
     },
+    legend: {
+      show: false,
+      zlevel: -1
+    },
     xAxis: {
       // name: '',
       // nameGap: 5,
@@ -369,21 +373,23 @@ function Index() {
                 {/*  <view class='progress_block flex aitems'> */}
                 <Progress
                   style={{
-                    width: '6.75rem',
+                    width: '300rpx',
                   }}
                   percentage='80'
-                  strokeWidth='6'
+                  strokeWidth='14'
+                  showPivot={false}
+                  color='#C2E5F3'
                 ></Progress>
                 {stepList[stepIndex].finish && 80 >= 99 ? (
                   <Image
                     className='finish_img'
-                    src={require('@/img/full-scran.png')}
+                    src={require('@/img/finished.png')}
                     mode='aspectFill'
                   ></Image>
                 ) : (
                   <Image
                     className='finish_img'
-                    src={require('@/img/full-scran.png')}
+                    src={require('@/img/no-finish.png')}
                     mode='aspectFill'
                   ></Image>
                 )}
@@ -403,7 +409,7 @@ function Index() {
                           color: '#000000',
                         }}
                       >
-                        {stepList[stepIndex].name + '区域。'}
+                        {stepList[stepIndex].name + '区域'}
                       </Text>
                     )}
                   {testIndex == 1 && (
@@ -556,6 +562,36 @@ function Index() {
             </View>
           </View>
         </View>
+
+
+        <View className='gear_adjustment'>
+          <View className='gear_box'>
+            <View className='gear flex aitems'>
+              <View className='pos'>额头</View>
+              <View className='gear_button flex aitems'>
+                <View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
+                <View className='button_value'><View className='number'>1</View>档</View>
+                <View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
+              </View>
+            </View>
+            <View className='gear flex aitems'>
+              <View className='pos'>左脸颊</View>
+              <View className='gear_button flex aitems'>
+                <View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
+                <View className='button_value'><View className='number'>1</View>档</View>
+                <View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
+              </View>
+            </View>
+            <View className='gear flex aitems'>
+              <View className='pos'>右脸颊</View>
+              <View className='gear_button flex aitems'>
+                <View className='button_minus'><Image className='image' src={require('@/img/fr200/minus.png')}></Image></View>
+                <View className='button_value'><View className='number'>1</View>档</View>
+                <View className='button_plus'><Image className='image' src={require('@/img/fr200/add.png')}></Image></View>
+              </View>
+            </View>
+          </View>
+        </View>
       </Block>
     </Block>
 

src/pages/iotCarePlan/iotCarePlan.tsx

@@ -2101,7 +2101,7 @@ class IotCarePlan extends Component<any, any> {
               ActiveModeItem={ActiveModeItem}
             />
 
-            {/* <Echarts></Echarts> */}
+            <Echarts></Echarts>
           </View>
 
           <Footer