From 09b8bdb39b601cd20fe262c3b9b9e8bab7b3b7d2 Mon Sep 17 00:00:00 2001
From: rongweikang <1174906669@qq.com>
Date: Fri, 15 Mar 2024 17:22:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iotCarePlan/components/Echart/index.less  | 1567 -----------------
 .../iotCarePlan/components/Echart/index.tsx   |  323 +---
 .../iotCarePlan/components/Gears/index.less   |  266 +++
 .../iotCarePlan/components/Gears/index.tsx    |  235 +++
 .../components/WaterTest/index.less           |  557 ++++++
 .../components/WaterTest/index.tsx            |  139 ++
 6 files changed, 1207 insertions(+), 1880 deletions(-)
 create mode 100644 src/moduleIOT/pages/iotCarePlan/components/Gears/index.less
 create mode 100644 src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx
 create mode 100644 src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less
 create mode 100644 src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx

diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
index 3813c5a..516b404 100644
--- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
+++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
@@ -65,1570 +65,3 @@ page {
   background: #f8f8f8;
   background: #f3f3f3;
 }
-.titlemain {
-  position: fixed;
-  z-index: 99;
-  width: 100%;
-  top: 0;
-  .logoicon {
-    width: 223rpx;
-  }
-  .title {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-.infobox1 {
-  background: #fff;
-  border-radius: 30rpx;
-  margin: 27rpx 30rpx 22rpx;
-  position: relative;
-  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
-  .img {
-    width: 690rpx;
-    height: 690rpx;
-    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
-    position: relative;
-    border-radius: 20rpx;
-    margin: auto;
-    .imgz {
-      border-radius: 20rpx;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      .video_tip {
-        position: absolute;
-        z-index: 99;
-        background: rgba(0, 0, 0, 0.5);
-        color: #fff;
-        font-size: 28rpx;
-        top: 50%;
-        left: 50%;
-        margin-top: -25rpx;
-        padding: 11rpx 34rpx;
-        font-weight: 500;
-        border-radius: 30rpx;
-        width: 500rpx;
-        transform: translateX(-50%);
-        text-align: center;
-        word-break: break-word;
-        box-sizing: border-box;
-        .icon {
-          width: 30rpx;
-          height: 30rpx;
-          margin-right: 17rpx;
-        }
-      }
-      .music {
-        width: 54rpx;
-        height: 54rpx;
-        background: rgba(255, 255, 255, 0.6);
-        border-radius: 50%;
-        position: absolute;
-        right: 20rpx;
-        top: 20rpx;
-        image {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .tipbox2 {
-      position: absolute;
-      z-index: 999999;
-      width: 500rpx;
-      bottom: -290rpx;
-      background: linear-gradient(#e2c6a3, #c7a274);
-      border-radius: 20rpx;
-      padding: 0 0 16rpx 0;
-      .jicon {
-        width: 26rpx;
-        position: absolute;
-        top: -20rpx;
-        left: 54rpx;
-      }
-      .tip1 {
-        color: #fefeff;
-        font-size: 36rpx;
-        padding: 34rpx 24rpx 0 24rpx;
-      }
-      .tip_btn {
-        background: #ffffff;
-        border-radius: 26rpx;
-        width: 154rpx;
-        height: 52rpx;
-        line-height: 52rpx;
-        text-align: center;
-        font-size: 30rpx;
-        font-weight: bold;
-        color: #c69962;
-        margin-top: 16rpx;
-        position: relative;
-        left: calc(500rpx - 36rpx - 154rpx);
-      }
-    }
-    .dottedLine {
-      border: 4rpx dashed #e2c6a3;
-      height: 100%;
-      position: absolute;
-      z-index: 999999;
-      border-radius: 20rpx;
-      right: 0;
-      left: 0;
-    }
-    .tipbox1 {
-      position: absolute;
-      z-index: 999999;
-      width: 480rpx;
-      bottom: -330rpx;
-      background: linear-gradient(#e2c6a3, #c7a274);
-      border-radius: 20rpx;
-      padding: 0 0 16rpx 0;
-      margin-left: 8rpx;
-      .jicon {
-        width: 26rpx;
-        position: absolute;
-        top: -20rpx;
-        left: 54rpx;
-      }
-      .tip1 {
-        color: #fefeff;
-        font-size: 36rpx;
-        padding: 34rpx 2rpx 0 24rpx;
-      }
-      .tip_btn {
-        background: #ffffff;
-        border-radius: 26rpx;
-        width: 154rpx;
-        height: 52rpx;
-        line-height: 52rpx;
-        text-align: center;
-        font-size: 30rpx;
-        font-weight: bold;
-        color: #c69962;
-        margin-top: 14rpx;
-        position: relative;
-        left: calc(460rpx - 22rpx - 154rpx);
-      }
-    }
-  }
-  .info1 {
-    height: 92rpx;
-    background: #fff;
-    border-radius: 20rpx;
-    position: relative;
-    .dottedLine {
-      border: 4rpx dashed #e2c6a3;
-      height: 100%;
-      position: absolute;
-      z-index: 999999;
-      border-radius: 20rpx;
-      right: 0;
-      left: 0;
-    }
-    .block {
-      width: 33%;
-      text-align: center;
-      .num {
-        font-size: 30rpx;
-        font-weight: 800;
-        color: #000000;
-      }
-      .color {
-        font-size: 30rpx;
-        font-weight: 800;
-        color: #000000;
-      }
-      .icon {
-        position: relative;
-        margin-left: 10rpx;
-        .num {
-          position: absolute;
-          color: #e8d3b0;
-          font-size: 22rpx;
-          font-weight: bold;
-          left: 50%;
-          margin-left: -8rpx;
-          top: 50%;
-          margin-top: -18rpx;
-        }
-      }
-      .dianliang1 {
-        background: linear-gradient(0deg, #efdcc2, #fff2df);
-        width: 10rpx;
-        height: 24rpx;
-        border-radius: 5rpx;
-        margin: 0 12rpx 0 0;
-      }
-      .dianliang2 {
-        background: #f8f8f8;
-        width: 10rpx;
-        height: 24rpx;
-        border-radius: 5rpx;
-        margin: 0 12rpx 0 0;
-      }
-    }
-    .border {
-      background: #dddddd;
-      width: 1rpx;
-      height: 50rpx;
-    }
-  }
-  .border_img {
-    position: absolute;
-    width: 700rpx;
-    z-index: 9999999;
-    bottom: -6rpx;
-    border: 6rpx dashed #e2c6a3;
-    border-radius: 20rpx;
-    padding: 4rpx;
-    left: -4rpx;
-  }
-  .tipbox4 {
-    position: absolute;
-    z-index: 999999;
-    width: 460rpx;
-    bottom: -260rpx;
-    background: linear-gradient(#e2c6a3, #c7a274);
-    border-radius: 20rpx;
-    padding: 0 0 16rpx 0;
-    .jicon {
-      width: 26rpx;
-      position: absolute;
-      top: -20rpx;
-      left: 54rpx;
-    }
-    .tip1 {
-      color: #fefeff;
-      font-size: 36rpx;
-      padding: 34rpx 0 0 24rpx;
-    }
-    .tip_btn {
-      background: #ffffff;
-      border-radius: 26rpx;
-      width: 154rpx;
-      height: 52rpx;
-      line-height: 52rpx;
-      text-align: center;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #c69962;
-      margin-top: 14rpx;
-      position: relative;
-      left: calc(460rpx - 22rpx - 154rpx);
-    }
-  }
-}
-.infobox1 .info1 .block .tip1,
-.infobox1 .info1 .block .dang {
-  font-size: 26rpx;
-  font-weight: 500;
-  color: #000000;
-}
-.infobox2 {
-  position: relative;
-  border-radius: 20rpx;
-  height: 74rpx;
-  margin: 60rpx 20rpx 0;
-  .block {
-    width: 50%;
-    .icon {
-      width: 46rpx;
-    }
-    .name {
-      margin-left: 14rpx;
-      color: #202020;
-      font-size: 22rpx;
-    }
-  }
-  .border {
-    background: #696460;
-    width: 2rpx;
-    height: 16rpx;
-  }
-  .border_img4 {
-    height: 94rpx;
-    border: 6rpx dashed #e2c6a3;
-    position: absolute;
-    z-index: 99999;
-    left: -8rpx;
-    width: calc(100% + 8rpx);
-    border-radius: 20rpx;
-  }
-  .tipbox5 {
-    position: fixed;
-    z-index: 999999;
-    width: 460rpx;
-    background: linear-gradient(#e2c6a3, #c7a274);
-    border-radius: 20rpx;
-    padding: 0 0 24rpx 0;
-    left: 60rpx;
-    .jicon {
-      width: 26rpx;
-      position: absolute;
-      bottom: -20rpx;
-      left: 54rpx;
-    }
-    .tip1 {
-      color: #fefeff;
-      font-size: 36rpx;
-      padding: 26rpx 0 0 34rpx;
-    }
-    .tip_btn {
-      background: #ffffff;
-      border-radius: 26rpx;
-      width: 154rpx;
-      height: 52rpx;
-      line-height: 52rpx;
-      text-align: center;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #c69962;
-      margin-top: 14rpx;
-      position: relative;
-      left: calc(460rpx - 22rpx - 154rpx);
-    }
-  }
-}
-.action_box {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  height: 138rpx;
-  background: #ffffff;
-  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
-  border-bottom: 15rpx solid #ffffff;
-  .line {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 2rpx;
-    height: 70rpx;
-    background: #dddddd;
-  }
-  .items {
-    flex: 1;
-  }
-  .start_img {
-    width: 36rpx;
-    height: 36rpx;
-  }
-  .disabled {
-    opacity: 0.5 !important;
-  }
-  .end_img {
-    width: 36rpx;
-    height: 36rpx;
-  }
-  .text {
-    font-size: 32rpx;
-    font-weight: bold;
-    color: #000000;
-    margin-left: 18rpx;
-  }
-  .start_test {
-    width: 100%;
-    padding: 0 30rpx;
-    .txt {
-      width: 100%;
-      height: 90rpx;
-      line-height: 90rpx;
-      background: #000000;
-      border-radius: 45rpx;
-      text-align: center;
-      font-size: 32rpx;
-      font-weight: bold;
-      color: #ffffff;
-    }
-  }
-}
-.infobox3 {
-  margin: 4rpx 0 0 0;
-  height: 162rpx;
-  position: relative;
-  border-radius: 20rpx;
-  .tipbox4 {
-    position: absolute;
-    z-index: 999999;
-    width: 460rpx;
-    bottom: -260rpx;
-    background: linear-gradient(#e2c6a3, #c7a274);
-    border-radius: 20rpx;
-    padding: 0 0 16rpx 0;
-    .jicon {
-      width: 26rpx;
-      position: absolute;
-      top: -20rpx;
-      left: 54rpx;
-    }
-    .tip1 {
-      color: #fefeff;
-      font-size: 36rpx;
-      padding: 34rpx 0 0 24rpx;
-    }
-    .tip_btn {
-      background: #ffffff;
-      border-radius: 26rpx;
-      width: 154rpx;
-      height: 52rpx;
-      line-height: 52rpx;
-      text-align: center;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #c69962;
-      margin-top: 14rpx;
-      position: relative;
-      left: calc(460rpx - 22rpx - 154rpx);
-    }
-  }
-  .dottedLine {
-    border: 4rpx dashed #e2c6a3;
-    height: 100%;
-    position: absolute;
-    z-index: 999999;
-    border-radius: 20rpx;
-    right: 0;
-    left: 0;
-  }
-  .left {
-    display: inline-block;
-    width: 134rpx;
-    background: #fff;
-    border-radius: 0 18rpx 18rpx 0;
-    margin: 0 22rpx 0 0;
-    overflow: hidden;
-    .img {
-      width: 78rpx;
-      height: 78rpx;
-      margin-top: 10rpx;
-      margin: 4rpx auto 0;
-    }
-    .tip {
-      color: #000;
-      font-size: 22rpx;
-      padding: 4rpx 0;
-      text-align: center;
-    }
-    .checked {
-      text-align: center;
-    }
-  }
-  .info1 {
-    display: inline-block;
-    white-space: nowrap;
-    background: #fff;
-    flex-direction: column;
-    height: 100%;
-    border-radius: 20rpx;
-    overflow: hidden;
-    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
-    .block1 {
-      .block1_1 {
-        height: 100%;
-        padding: 0 20rpx;
-        flex-direction: column;
-        .tip1 {
-          font-size: 26rpx;
-          font-weight: bold;
-          color: #000000;
-        }
-        .tip2 {
-          font-size: 24rpx;
-          font-weight: 500;
-          color: #666666;
-          padding-top: 3rpx;
-        }
-      }
-    }
-    .block2 {
-      display: inline-block;
-      height: 100%;
-      width: 0;
-      transition: all 0.3s;
-      .block2_info {
-        width: 140rpx;
-        text-align: center;
-        box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
-        height: calc(140rpx - 10rpx);
-        border-radius: 20rpx;
-        align-items: flex-end;
-        padding: 0 0 10rpx 0;
-        display: inline-block;
-        position: relative;
-        overflow: hidden;
-        .block2_img {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-        .block3_img {
-          -webkit-filter: grayscale(100%);
-          -moz-filter: grayscale(100%);
-          -ms-filter: grayscale(100%);
-          -o-filter: grayscale(100%);
-          filter: grayscale(100%);
-          filter: gray;
-          opacity: 0.5;
-        }
-        .block2_bg {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          opacity: 0.5;
-        }
-        .block2_info1 {
-          height: 100%;
-          position: relative;
-          z-index: 99;
-          background: transparent;
-          .block2_info1_tip1 {
-            color: #202020;
-            font-weight: bold;
-            font-size: 22rpx;
-            position: absolute;
-            bottom: 20rpx;
-            width: 100%;
-            text-align: center;
-          }
-          .block2_info1_tip2 {
-            color: #202020;
-            font-size: 16rpx;
-            position: absolute;
-            bottom: 0;
-            text-align: center;
-            width: 100%;
-          }
-        }
-      }
-    }
-    .icon {
-      width: 28rpx;
-      margin-top: 20rpx;
-    }
-  }
-  .info2 {
-    width: calc(100% - 130rpx - 20rpx);
-    background: #fff;
-    height: 162rpx;
-    border-radius: 20rpx;
-    box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
-    .block1 {
-      padding: 0 16rpx;
-    }
-  }
-  .border_img2 {
-    width: calc(100% + 8rpx);
-    position: absolute;
-    z-index: 999999;
-    left: -8rpx;
-  }
-  .tipbox3 {
-    position: absolute;
-    z-index: 999999;
-    width: 460rpx;
-    bottom: -290rpx;
-    background: linear-gradient(#e2c6a3, #c7a274);
-    border-radius: 20rpx;
-    padding: 0 0 16rpx 0;
-    margin-left: 8rpx;
-    .jicon {
-      width: 26rpx;
-      position: absolute;
-      top: -20rpx;
-      left: 54rpx;
-    }
-    .tip1 {
-      color: #fefeff;
-      font-size: 36rpx;
-      padding: 34rpx 0 0 24rpx;
-    }
-    .tip_btn {
-      background: #ffffff;
-      border-radius: 26rpx;
-      width: 154rpx;
-      height: 52rpx;
-      line-height: 52rpx;
-      text-align: center;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #c69962;
-      margin-top: 14rpx;
-      position: relative;
-      left: calc(460rpx - 22rpx - 154rpx);
-    }
-  }
-}
-.infobox3 .info1 .block1,
-.infobox3 .info2 .block1 {
-  flex-direction: column;
-  display: inline-block;
-  height: 100%;
-  text-align: center;
-}
-.infobox3 .info1 .tip1,
-.infobox3 .info2 .tip1 {
-  color: #202020;
-  font-size: 22rpx;
-  font-weight: bold;
-}
-.infobox3 .info1 .tip2,
-.infobox3 .info2 .tip2 {
-  color: #202020;
-  font-size: 22rpx;
-}
-.infobox3 .info1 .quan1,
-.infobox3 .info2 .quan1 {
-  border-radius: 50%;
-  width: 30rpx;
-  height: 30rpx;
-  position: relative;
-  margin: 18rpx auto 0;
-  background: #fff;
-  box-sizing: border-box;
-  border: 4rpx solid #f1f1f1;
-}
-.infobox3 .info1 .quan1 .quan2,
-.infobox3 .info2 .quan1 .quan2 {
-  position: absolute;
-  border-radius: 50%;
-  background: #000000;
-  width: 14rpx;
-  height: 14rpx;
-}
-.tipbox {
-  position: absolute;
-  z-index: 999999;
-  width: 100%;
-  bottom: 50rpx;
-  .tip1 {
-    color: #fefeff;
-    font-size: 36rpx;
-    text-align: center;
-  }
-  .tip_btn {
-    background: #e2c6a3;
-    border-radius: 32rpx;
-    width: 212rpx;
-    height: 66rpx;
-    line-height: 66rpx;
-    text-align: center;
-    margin: auto;
-    font-size: 30rpx;
-    font-weight: bold;
-    color: #ffffff;
-    margin-top: 54rpx;
-  }
-}
-.infobox4 {
-  height: 300rpx;
-  border-radius: 20rpx;
-  box-shadow: -2rpx 0 12rpx 0.5rpx rgba(129, 129, 129, 0.05);
-  margin: 22rpx 20rpx;
-  background: #fff;
-  position: relative;
-  .dottedLine {
-    border: 4rpx dashed #e2c6a3;
-    height: 100%;
-    position: absolute;
-    z-index: 999999;
-    border-radius: 20rpx;
-    right: 0;
-    left: 0;
-  }
-  .border_img3 {
-    width: calc(100% + 16rpx);
-    position: absolute;
-    z-index: 999999;
-    top: -15rpx;
-    left: -8rpx;
-  }
-  .tipbox5 {
-    position: absolute;
-    z-index: 999999;
-    width: 460rpx;
-    top: -280rpx;
-    background: linear-gradient(#e2c6a3, #c7a274);
-    border-radius: 20rpx;
-    padding: 0 0 24rpx 0;
-    margin-left: 60rpx;
-    .jicon {
-      width: 26rpx;
-      position: absolute;
-      bottom: -20rpx;
-      left: 54rpx;
-    }
-    .tip1 {
-      color: #fefeff;
-      font-size: 36rpx;
-      padding: 26rpx 0 0 34rpx;
-    }
-    .tip_btn {
-      background: #ffffff;
-      border-radius: 26rpx;
-      width: 154rpx;
-      height: 52rpx;
-      line-height: 52rpx;
-      text-align: center;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #c69962;
-      margin-top: 14rpx;
-      position: relative;
-      left: calc(460rpx - 22rpx - 154rpx);
-    }
-  }
-}
-ec-canvas {
-  width: 100%;
-  height: 100%;
-}
-.popbox2 {
-  width: 670rpx;
-  height: 1102rpx;
-  background: #ffffff;
-  border-radius: 30rpx;
-  & > .title {
-    text-align: center;
-    padding: 49rpx 0 61rpx;
-    font-size: 36rpx;
-    font-weight: bold;
-    color: #030000;
-    line-height: 1;
-  }
-  & > .tipimg {
-    margin: 20rpx 28rpx 0;
-  }
-  & > .tipvideo {
-    margin: 0 auto;
-    width: 600rpx;
-    height: 600rpx;
-  }
-  & > .tiptext {
-    margin: 65rpx 0 63rpx;
-    padding: 0 48rpx 0 36rpx;
-    font-size: 28rpx;
-    font-weight: 500;
-    color: #000000;
-    min-height: 76rpx;
-  }
-  & > .popbox2btn {
-    & > .nextbtn {
-      text-align: center;
-      color: #fff;
-      width: 270rpx;
-      height: 90rpx;
-      line-height: 90rpx;
-      background: #000000;
-      border-radius: 45rpx;
-      font-size: 32rpx;
-      font-weight: bold;
-      margin: 0 auto;
-      box-sizing: border-box;
-    }
-    & > .prebtn {
-      text-align: center;
-      width: 270rpx;
-      height: 90rpx;
-      line-height: 90rpx;
-      border-radius: 45rpx;
-      font-weight: bold;
-      font-size: 32rpx;
-      color: #000000;
-      border: 2rpx solid #000000;
-      background: #ffffff;
-      margin: 0 auto;
-      box-sizing: border-box;
-    }
-  }
-  & > .icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 90rpx;
-    height: 90rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    & > image {
-      width: 24rpx;
-      height: 24rpx;
-    }
-  }
-}
-.popbox2btn {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 25rpx;
-}
-.quantityTipShow {
-  position: absolute;
-  top: -50rpx;
-  right: 0;
-  background: rgba(0, 0, 0, 0.3);
-  font-size: 22rpx;
-  color: #fff;
-  border-radius: 30rpx;
-  padding: 8rpx 0rpx;
-  width: 260rpx;
-  .sanjiao {
-    position: absolute;
-    left: 50%;
-    margin-left: -15rpx;
-    width: 30rpx;
-    height: 30rpx;
-    transform: rotate(45deg);
-    bottom: -15rpx;
-    background: rgba(0, 0, 0, 0.3);
-  }
-}
-.async_box {
-  padding: 0 50rpx;
-  .title {
-    font-weight: bold;
-    text-align: center;
-    font-size: 32rpx;
-    padding: 30rpx 0;
-  }
-  .jindubox {
-    background: #dddddd;
-    height: 30rpx;
-    border-radius: 30rpx;
-    overflow: hidden;
-    position: relative;
-    .jindu {
-      width: 80%;
-      background: #dfc3a2;
-      height: 100%;
-      border-radius: 30rpx;
-    }
-    .baifenbi {
-      position: absolute;
-      font-size: 22rpx;
-      right: 20rpx;
-      color: #999;
-      top: 0;
-    }
-  }
-  .tip1 {
-    font-size: 26rpx;
-    padding: 30rpx 0 40rpx;
-  }
-}
-.infobox5 {
-  margin: 24rpx 20rpx 0;
-  border-radius: 18rpx;
-  background: #fff;
-  height: 260rpx;
-  padding: 20rpx;
-  position: relative;
-  .icon {
-    position: absolute;
-    width: 24rpx;
-    height: 24rpx;
-    right: 26rpx;
-    top: 32rpx;
-  }
-  .title {
-    color: #ccc;
-    font-size: 18rpx;
-    height: 42rpx;
-    line-height: 42rpx;
-  }
-  .info1 {
-    font-size: 14rpx;
-    color: #ccc;
-    display: flex;
-    margin-top: 10rpx;
-    .left {
-      border-right: 1px solid #e3e3e3;
-      padding: 0 8rpx;
-      width: 16rpx;
-      height: 180rpx;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      justify-content: center;
-      .numblock {
-        padding: 0rpx 0;
-      }
-    }
-    .right {
-      width: calc(100% - 20rpx - 100rpx);
-      height: 180rpx;
-      border-bottom: 1px solid #e3e3e3;
-      padding: 0 10rpx 4rpx 20rpx;
-      position: relative;
-      .block {
-        flex-direction: column;
-        justify-content: flex-end;
-        position: relative;
-        .num {
-          position: absolute;
-          bottom: -30rpx;
-        }
-        .block_b0 {
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b1 {
-          background: #ffcf55;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b2 {
-          background: #febb22;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b3 {
-          background: #ffad28;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b4 {
-          background: #ff8510;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b5 {
-          background: #f85803;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b6 {
-          background: #e02e13;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b7 {
-          background: #b40016;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-        .block_b8 {
-          background: #750010;
-          border-radius: 10rpx;
-          width: 38rpx;
-          height: 18rpx;
-          margin: 4rpx 0 0;
-        }
-      }
-      .timetip {
-        position: absolute;
-        right: -40rpx;
-        bottom: -25rpx;
-      }
-    }
-  }
-  .tipbox5 {
-    position: absolute;
-    z-index: 999999;
-    width: 460rpx;
-    top: -280rpx;
-    background: linear-gradient(#e2c6a3, #c7a274);
-    border-radius: 20rpx;
-    padding: 0 0 24rpx 0;
-    margin-left: 60rpx;
-    .jicon {
-      width: 26rpx;
-      position: absolute;
-      bottom: -20rpx;
-      left: 54rpx;
-    }
-    .tip1 {
-      color: #fefeff;
-      font-size: 36rpx;
-      padding: 26rpx 0 0 34rpx;
-    }
-    .tip_btn {
-      background: #ffffff;
-      border-radius: 26rpx;
-      width: 154rpx;
-      height: 52rpx;
-      line-height: 52rpx;
-      text-align: center;
-      font-size: 30rpx;
-      font-weight: bold;
-      color: #c69962;
-      margin-top: 14rpx;
-      position: relative;
-      left: calc(460rpx - 22rpx - 154rpx);
-    }
-  }
-}
-.water_test {
-  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;
-    }
-    .step_top {
-      position: relative;
-      .line {
-        position: absolute;
-        top: 50%;
-        right: -117rpx;
-        width: 97rpx;
-        height: 0;
-        border-top: 2rpx dashed #f1f1f1;
-      }
-      .drop {
-        width: 10rpx;
-        height: 10rpx;
-        background: #999999;
-        border-radius: 50%;
-      }
-      .step_num {
-        font-size: 24rpx;
-        font-weight: 500;
-        color: #666666;
-        margin-left: 14rpx;
-      }
-    }
-    .step_name {
-      font-size: 26rpx;
-      font-weight: bold;
-      color: #000000;
-      margin-left: 14rpx;
-      padding-top: 12rpx;
-      letter-spacing: 2rpx;
-    }
-  }
-  .test_txt {
-    font-size: 24rpx;
-    font-weight: 500;
-    color: #999999;
-    padding-top: 48rpx;
-    line-height: 36rpx;
-    letter-spacing: 2rpx;
-  }
-}
-.testing {
-  .testing_header {
-    .items {
-      flex: 1;
-      border-radius: 30rpx 30rpx 0rpx 0rpx;
-      padding: 25rpx 0 21rpx;
-      justify-content: space-evenly;
-      .finish_img {
-        width: 24rpx;
-        height: 24rpx;
-        border-radius: 50%;
-      }
-      .value {
-        font-size: 24rpx;
-        font-weight: 500;
-        color: #666666;
-        line-height: 1;
-      }
-      .name {
-        font-size: 26rpx;
-        font-weight: bold;
-        color: #000000;
-        line-height: 1;
-      }
-    }
-  }
-  .testing_content {
-    width: 100%;
-    height: 228rpx;
-    background: #ffffff;
-    border-radius: 0rpx 0rpx 30rpx 30rpx;
-    padding: 51rpx 30rpx 0 36rpx;
-    box-sizing: border-box;
-    .progress_box {
-      width: 100%;
-      height: 36rpx;
-      line-height: 36rpx;
-      .title {
-        font-size: 28rpx;
-        font-weight: bold;
-        color: #000000;
-        min-width: 200rpx;
-        margin-right: 60rpx;
-        letter-spacing: 2rpx;
-      }
-    }
-    .tips {
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #999999;
-      margin-top: 45rpx;
-      line-height: 36rpx;
-      letter-spacing: 2rpx;
-    }
-    .progress_block {
-      flex: 1;
-    }
-    .finish_img {
-      width: 36rpx;
-      height: 36rpx;
-      margin-left: 49rpx;
-    }
-  }
-}
-.isquanpingclass {
-  position: fixed;
-  width: calc(100% - 100rpx);
-  padding: 20rpx 50rpx;
-  margin: 0;
-  z-index: 999;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100vh;
-}
-.canvas {
-  position: fixed;
-  top: -9999999px;
-}
-.popbox1 {
-  width: 600rpx;
-  height: 360rpx;
-  border-radius: 28rpx;
-  flex-direction: column;
-  .tip1 {
-    font-size: 40rpx;
-    color: #000000;
-    text-align: center;
-    font-weight: 400;
-    margin-top: 28rpx;
-  }
-  .tip2 {
-    font-size: 32rpx;
-    color: #000000;
-    text-align: center;
-    font-weight: 400;
-    margin-top: 36rpx;
-    height: 110rpx;
-  }
-  .btnbox {
-    .btn1 {
-      font-size: 30rpx;
-      color: #000000;
-      text-align: center;
-      font-weight: 400;
-      width: 240rpx;
-      height: 100rpx;
-      line-height: 100rpx;
-      border: 2rpx solid rgba(0, 0, 0, 0.3);
-      border-radius: 28rpx;
-    }
-    .btn2 {
-      font-size: 30rpx;
-      color: #000000;
-      text-align: center;
-      font-weight: 400;
-      width: 240rpx;
-      height: 100rpx;
-      line-height: 100rpx;
-      margin-left: 40rpx;
-      background: #e2c5a3;
-      border-radius: 28rpx;
-    }
-  }
-}
-.van-tabs__scroll--line {
-  background: transparent !important;
-}
-image {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-/* .color{
-    color: #F1AB15;
-  } */
-.ellipsis2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-.nodata {
-  color: #666666;
-  text-align: center;
-  margin-top: 50rpx;
-  font-size: 28rpx;
-}
-.MT30 {
-  margin-top: 30rpx;
-}
-.submitbtn {
-  position: absolute;
-  bottom: 100rpx;
-  width: 400rpx;
-  left: 50%;
-  margin-left: -200rpx;
-  .btn {
-    position: absolute;
-    top: 20rpx;
-    color: #fff;
-    font-weight: bold;
-    font-size: 32rpx;
-    text-align: center;
-    width: 100%;
-    bottom: 0;
-  }
-}
-.avatar-wrapper {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 99;
-  opacity: 0;
-}
-.permeate_model_box {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  padding: 52rpx 30rpx 38rpx 30rpx;
-  box-sizing: border-box;
-  .my_moisture_box {
-    width: 600rpx;
-    height: 600rpx;
-    margin: 0 auto;
-  }
-  .permeate_title {
-    font-size: 36rpx;
-    font-weight: bold;
-    color: #030000;
-    line-height: 1;
-    padding-bottom: 54rpx;
-    box-sizing: border-box;
-  }
-  .permeate_tips {
-    font-size: 28rpx;
-    font-weight: 500;
-    color: #030000;
-    line-height: 60rpx;
-    padding: 37rpx 0;
-    box-sizing: border-box;
-    .txt {
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #666666;
-      margin-left: 12rpx;
-    }
-  }
-  .permeate_btn {
-    height: 90rpx;
-    line-height: 90rpx;
-    background: #000000;
-    border-radius: 45rpx;
-    font-size: 32rpx;
-    font-weight: bold;
-    color: #ffffff;
-    padding: 0 72rpx;
-  }
-  .close_box {
-    position: absolute;
-    top: 34rpx;
-    right: 29rpx;
-    padding: 50rpx;
-  }
-  .close_img {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 24rpx;
-    height: 24rpx;
-  }
-}
-.gear_adjust {
-  padding: 2rpx 10rpx 40rpx 18rpx;
-  .title {
-    font-size: 28rpx;
-    font-weight: bold;
-    color: #000000;
-  }
-  .gear_box {
-    margin-top: 14rpx;
-    .slider_class {
-      height: 12rpx;
-      box-sizing: border-box;
-      flex: 1;
-      border-radius: 6rpx;
-    }
-    .gear {
-      padding: 20rpx 0;
-    }
-    .pos {
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #666666;
-      min-width: 76rpx;
-      margin-right: 32rpx;
-    }
-  }
-}
-
-.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 {
-    font-size: 16rpx;
-    font-weight: 500;
-    color: #cccccc;
-  }
-}
-.custom-button {
-  position: relative;
-  width: 32rpx;
-  height: 32rpx;
-  background: linear-gradient(90deg, #ffe9c7, #eecda1);
-  border: 4rpx solid #ffffff;
-  border-radius: 50%;
-  box-sizing: border-box;
-  .circle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 12rpx;
-    height: 12rpx;
-    background: #ffffff;
-    border-radius: 50%;
-  }
-  .level {
-    position: absolute;
-    top: -30rpx;
-    left: 0;
-    width: 44rpx;
-    font-size: 20rpx;
-    font-weight: 500;
-    color: #bf8e49;
-    height: 28rpx;
-  }
-}
-.current-button {
-  background: #cccc;
-  .level {
-    color: #cccc;
-  }
-}
-.success_popup {
-  width: calc(100% - 110rpx);
-  box-sizing: border-box;
-  .popup_content {
-    width: 100%;
-    padding: 52rpx 0 60rpx;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: #030000;
-    .title {
-      font-size: 36rpx;
-      font-weight: bold;
-    }
-    .success_icon {
-      width: 120rpx;
-      height: 120rpx;
-      margin: 52rpx 0;
-    }
-    .tips {
-      font-size: 30rpx;
-    }
-  }
-  & > .infobox1 {
-    padding: 0rpx 0 35rpx;
-    .tip {
-      font-size: 36rpx;
-      font-weight: bold;
-      color: #030000;
-      text-align: center;
-    }
-    .tip1 {
-      text-align: center;
-      margin-top: 71rpx;
-      font-size: 30rpx;
-      color: #030000;
-    }
-    .tip2 {
-      color: #202020;
-      font-size: 40rpx;
-      text-align: center;
-    }
-    .btnbox {
-      margin-top: 71rpx;
-      padding: 0 3rpx 10rpx 15rpx;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .btn1 {
-        background: #fff;
-        width: 212rpx;
-        height: 66rpx;
-        line-height: 66rpx;
-        text-align: center;
-        font-size: 30rpx;
-        color: #e2c6a3;
-        border-radius: 32rpx;
-        border: 2rpx solid #e2c6a3;
-        font-style: normal;
-        width: 270rpx;
-        height: 90rpx;
-        line-height: 90rpx;
-        background: #ffffff;
-        text-align: center;
-        border: 2rpx solid #000000;
-        border-radius: 45rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #000000;
-      }
-      .btn2 {
-        width: 270rpx;
-        height: 90rpx;
-        line-height: 90rpx;
-        text-align: center;
-        background: #000000;
-        border-radius: 45rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #ffffff;
-        font-style: normal;
-        width: 270rpx;
-        height: 90rpx;
-        line-height: 90rpx;
-        background: #000000;
-        text-align: center;
-        border-radius: 45rpx;
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #ffffff;
-      }
-    }
-  }
-}
-.flex {
-  display: flex;
-}
-.aitems {
-  align-items: center;
-}
-.jcenter {
-  justify-content: center;
-}
-.sb {
-  justify-content: space-between;
-}
-.sa {
-  justify-content: space-around;
-}
-.wrap {
-  flex-wrap: wrap;
-}
diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
index 273c20d..414a36f 100644
--- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
+++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
@@ -287,7 +287,7 @@ function Index() {
 
   return (
     <Block>
-      <View className="box">
+      <View className='box'>
         <Echarts
           echarts={echarts}
           option={option}
@@ -296,324 +296,21 @@ function Index() {
           // style自定义设置echarts宽高
           style={{ width: "630rpx", height: "260rpx" }}
         />
-        <View className="box_background">
-          <Image className="full" src={require("@/img/full-scran.png")}></Image>
-          <View className="power">实时能量</View>
+        <View className='box_background'>
+          <Image className='full' src={require("@/img/full-scran.png")}></Image>
+          <View className='power'>实时能量</View>
           {level.map((item) => (
-            <View className="line" key={item}>
-              <View className="number">{item}</View>
-              <View className="bottom_line">8</View>
+            <View className='line' key={item}>
+              <View className='number'>{item}</View>
+              <View className='bottom_line'>8</View>
             </View>
           ))}
-          <View className="line">
-            <View className="number">1</View>
+          <View className='line'>
+            <View className='number'>1</View>
           </View>
-          <View className="time">时间</View>
+          <View className='time'>时间</View>
         </View>
       </View>
-
-      <Block>
-        <View>
-          <View className="water_test">
-            <View className="test_step flex aitems sb">
-              {stepList.map((item, index) => {
-                return (
-                  <View className="step_block flex aitems" key={index}>
-                    <View className="step_top flex aitems">
-                      <View className="drop"></View>
-                      <View className="step_num">{item.value}</View>
-                      {index != 2 && <View className="line"></View>}
-                    </View>
-                    <View className="step_name">{item.name}</View>
-                  </View>
-                );
-              })}
-            </View>
-            <View className="test_txt">
-              通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案
-            </View>
-          </View>
-
-          <View className="testing">
-            <View className="testing_header flex aitems">
-              {stepList.map((item, index) => {
-                return (
-                  <View
-                    className="items flex aitems jcenter"
-                    key={index}
-                    style={stepIndex == index ? "background: #fff" : ""}
-                  >
-                    {stepIndex > index && (
-                      <Image
-                        className="finish_img"
-                        src={require("@/img/full-scran.png")}
-                        mode="aspectFill"
-                      ></Image>
-                    )}
-                    <View className="value">{item.value}</View>
-                    <View className="name">{item.name}</View>
-                  </View>
-                );
-              })}
-            </View>
-            <View className="testing_content">
-              <View className="progress_box flex aitems">
-                <View className="title">
-                  {stepList[stepIndex].name + "水分测试"}
-                </View>
-                {/*  <view class='progress_block flex aitems'> */}
-                <Progress
-                  style={{
-                    width: "300rpx",
-                  }}
-                  percentage="80"
-                  strokeWidth="14"
-                  showPivot={false}
-                  color="#C2E5F3"
-                ></Progress>
-                {stepList[stepIndex].finish && 80 >= 99 ? (
-                  <Image
-                    className="finish_img"
-                    src={require("@/img/finished.png")}
-                    mode="aspectFill"
-                  ></Image>
-                ) : (
-                  <Image
-                    className="finish_img"
-                    src={require("@/img/no-finish.png")}
-                    mode="aspectFill"
-                  ></Image>
-                )}
-                {/*  </view> */}
-              </View>
-              {/*  <view class='tips' wx:if='{{!finish}}'> */}
-              {/*  请参考视频指引，将仪器紧贴<text style='color: #000000'>额头区域</text> */}
-              {/*  </view> */}
-              <View className="tips flex sb">
-                <View>
-                  请参考视频指引，将仪器紧贴
-                  {(testIndex == 1 || testIndex == 2 || testIndex == 4) && (
-                    <Text
-                      style={{
-                        color: "#000000",
-                      }}
-                    >
-                      {stepList[stepIndex].name + "区域"}
-                    </Text>
-                  )}
-                  {testIndex == 1 && (
-                    <Text>，并点击下方启动检测按钮进行测试</Text>
-                  )}
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-
-        <View>
-          <View className="gear_adjust">
-            <View className="title">档位调节</View>
-            <View className="gear_box">
-              <View className="gear flex aitems">
-                <View className="pos">额头</View>
-                <Slider
-                  style={{
-                    flex: "1",
-                  }}
-                  value={gearLevel.forehead}
-                  min={1}
-                  max={10}
-                  inactiveColor="#F8F8F8"
-                  activeColor={
-                    gearLevel.currentGearMode == "forehead"
-                      ? "#EECDA1"
-                      : "#CCCCCC"
-                  }
-                  disabled={gearLevel.currentGearMode !== "forehead"}
-                  barHeight={6}
-                  // useButtonSlot
-                  data-key="forehead"
-                  // onDrag={this.onDrag}
-                  // onChange={this.onChange}
-                  renderButton={
-                    <Block>
-                      <View
-                        className={
-                          "custom-button " +
-                          (gearLevel.currentGearMode !== "forehead" &&
-                            "current-button")
-                        }
-                      >
-                        <View className="circle"></View>
-                        <View className="level">
-                          {gearLevel.forehead + "档"}
-                        </View>
-                      </View>
-                    </Block>
-                  }
-                ></Slider>
-              </View>
-              <View className="gear flex aitems">
-                <View className="pos">左脸颊</View>
-                <Slider
-                  style={{
-                    flex: "1",
-                  }}
-                  value={gearLevel.leftCheek}
-                  min={1}
-                  max={10}
-                  inactiveColor="#F8F8F8"
-                  activeColor={
-                    gearLevel.currentGearMode == "leftCheek"
-                      ? "#EECDA1"
-                      : "#CCCCCC"
-                  }
-                  disabled={gearLevel.currentGearMode !== "leftCheek"}
-                  barHeight={6}
-                  // useButtonSlot
-                  data-key="leftCheek"
-                  // onDrag={this.onDrag}
-                  // onChange={this.onChange}
-                  renderButton={
-                    <Block>
-                      <View
-                        className={
-                          "custom-button " +
-                          (gearLevel.currentGearMode !== "leftCheek" &&
-                            "current-button")
-                        }
-                      >
-                        <View className="circle"></View>
-                        <View className="level">
-                          {gearLevel.leftCheek + "档"}
-                        </View>
-                      </View>
-                    </Block>
-                  }
-                ></Slider>
-              </View>
-              <View className="gear flex aitems">
-                <View className="pos">右脸颊</View>
-                <Slider
-                  style={{
-                    flex: "1",
-                  }}
-                  value={gearLevel.rightCheek}
-                  min={1}
-                  max={10}
-                  inactiveColor="#F8F8F8"
-                  activeColor={
-                    gearLevel.currentGearMode == "rightCheek"
-                      ? "#EECDA1"
-                      : "#CCCCCC"
-                  }
-                  disabled={gearLevel.currentGearMode !== "rightCheek"}
-                  barHeight={6}
-                  // useButtonSlot
-                  data-key="rightCheek"
-                  // onDrag={this.onDrag}
-                  // onChange={this.onChange}
-                  renderButton={
-                    <Block>
-                      <View
-                        className={
-                          "custom-button flex jcenter aitems " +
-                          (gearLevel.currentGearMode !== "rightCheek" &&
-                            "current-button")
-                        }
-                      >
-                        <View className="circle"></View>
-                        <View className="level">
-                          {gearLevel.rightCheek + "档"}
-                        </View>
-                      </View>
-                    </Block>
-                  }
-                ></Slider>
-              </View>
-              {/* <View className='level_box flex aitems'>
-                {(10).map((item, index) => {
-                  return (
-                    <View key={item}
-                      className='level_num'
-                      style={{
-                        marginRight: '1.225rem',
-                      }}
-                    >
-                      {item + 1}
-                    </View>
-                  )
-                })}
-              </View> */}
-            </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>
   );
 }
diff --git a/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less
new file mode 100644
index 0000000..a25487c
--- /dev/null
+++ b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.less
@@ -0,0 +1,266 @@
+
+page {
+  background: #f8f8f8;
+  background: #f3f3f3;
+}
+
+.gear_adjust {
+  padding: 2rpx 10rpx 40rpx 18rpx;
+  .title {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #000000;
+  }
+  .gear_box {
+    margin-top: 14rpx;
+    .slider_class {
+      height: 12rpx;
+      box-sizing: border-box;
+      flex: 1;
+      border-radius: 6rpx;
+    }
+    .gear {
+      padding: 20rpx 0;
+    }
+    .pos {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #666666;
+      min-width: 76rpx;
+      margin-right: 32rpx;
+    }
+  }
+}
+
+.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 {
+    font-size: 16rpx;
+    font-weight: 500;
+    color: #cccccc;
+  }
+}
+.custom-button {
+  position: relative;
+  width: 32rpx;
+  height: 32rpx;
+  background: linear-gradient(90deg, #ffe9c7, #eecda1);
+  border: 4rpx solid #ffffff;
+  border-radius: 50%;
+  box-sizing: border-box;
+  .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 12rpx;
+    height: 12rpx;
+    background: #ffffff;
+    border-radius: 50%;
+  }
+  .level {
+    position: absolute;
+    top: -30rpx;
+    left: 0;
+    width: 44rpx;
+    font-size: 20rpx;
+    font-weight: 500;
+    color: #bf8e49;
+    height: 28rpx;
+  }
+}
+.current-button {
+  background: #cccc;
+  .level {
+    color: #cccc;
+  }
+}
+.success_popup {
+  width: calc(100% - 110rpx);
+  box-sizing: border-box;
+  .popup_content {
+    width: 100%;
+    padding: 52rpx 0 60rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #030000;
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+    }
+    .success_icon {
+      width: 120rpx;
+      height: 120rpx;
+      margin: 52rpx 0;
+    }
+    .tips {
+      font-size: 30rpx;
+    }
+  }
+  & > .infobox1 {
+    padding: 0rpx 0 35rpx;
+    .tip {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #030000;
+      text-align: center;
+    }
+    .tip1 {
+      text-align: center;
+      margin-top: 71rpx;
+      font-size: 30rpx;
+      color: #030000;
+    }
+    .tip2 {
+      color: #202020;
+      font-size: 40rpx;
+      text-align: center;
+    }
+    .btnbox {
+      margin-top: 71rpx;
+      padding: 0 3rpx 10rpx 15rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .btn1 {
+        background: #fff;
+        width: 212rpx;
+        height: 66rpx;
+        line-height: 66rpx;
+        text-align: center;
+        font-size: 30rpx;
+        color: #e2c6a3;
+        border-radius: 32rpx;
+        border: 2rpx solid #e2c6a3;
+        font-style: normal;
+        width: 270rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        background: #ffffff;
+        text-align: center;
+        border: 2rpx solid #000000;
+        border-radius: 45rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #000000;
+      }
+      .btn2 {
+        width: 270rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: center;
+        background: #000000;
+        border-radius: 45rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #ffffff;
+        font-style: normal;
+        width: 270rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        background: #000000;
+        text-align: center;
+        border-radius: 45rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+}
+.aitems {
+  align-items: center;
+}
+.jcenter {
+  justify-content: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.sa {
+  justify-content: space-around;
+}
+.wrap {
+  flex-wrap: wrap;
+}
diff --git a/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx
new file mode 100644
index 0000000..cfcc78b
--- /dev/null
+++ b/src/moduleIOT/pages/iotCarePlan/components/Gears/index.tsx
@@ -0,0 +1,235 @@
+import Taro from "@tarojs/taro";
+import classnames from "classnames";
+import { Block, View, Image, Text, Input } from "@tarojs/components";
+import { Popup, Progress, Slider } from "@antmjs/vantui";
+
+import "./index.less";
+
+interface Props {
+  Electricity: any;
+  matrixElectricity: any;
+  facialMaskConnectStatus: any;
+}
+
+function Index() {
+  const gearLevel = {
+    currentGear: null,
+    //现在工作的档位
+    currentGearMode: "forehead",
+    //现在工作模式
+    forehead: 5,
+    leftCheek: 5,
+    rightCheek: 5,
+  };
+
+
+  return (
+      <Block>
+        <View>
+          <View className='gear_adjust'>
+            <View className='title'>档位调节</View>
+            <View className='gear_box'>
+              <View className='gear flex aitems'>
+                <View className='pos'>额头</View>
+                <Slider
+                  style={{
+                    flex: "1",
+                  }}
+                  value={gearLevel.forehead}
+                  min={1}
+                  max={10}
+                  inactiveColor='#F8F8F8'
+                  activeColor={
+                    gearLevel.currentGearMode == "forehead"
+                      ? "#EECDA1"
+                      : "#CCCCCC"
+                  }
+                  disabled={gearLevel.currentGearMode !== "forehead"}
+                  barHeight={6}
+                  // useButtonSlot
+                  data-key='forehead'
+                  // onDrag={this.onDrag}
+                  // onChange={this.onChange}
+                  renderButton={
+                    <Block>
+                      <View
+                        className={
+                          "custom-button " +
+                          (gearLevel.currentGearMode !== "forehead" &&
+                            "current-button")
+                        }
+                      >
+                        <View className='circle'></View>
+                        <View className='level'>
+                          {gearLevel.forehead + "档"}
+                        </View>
+                      </View>
+                    </Block>
+                  }
+                ></Slider>
+              </View>
+              <View className='gear flex aitems'>
+                <View className='pos'>左脸颊</View>
+                <Slider
+                  style={{
+                    flex: "1",
+                  }}
+                  value={gearLevel.leftCheek}
+                  min={1}
+                  max={10}
+                  inactiveColor='#F8F8F8'
+                  activeColor={
+                    gearLevel.currentGearMode == "leftCheek"
+                      ? "#EECDA1"
+                      : "#CCCCCC"
+                  }
+                  disabled={gearLevel.currentGearMode !== "leftCheek"}
+                  barHeight={6}
+                  // useButtonSlot
+                  data-key='leftCheek'
+                  // onDrag={this.onDrag}
+                  // onChange={this.onChange}
+                  renderButton={
+                    <Block>
+                      <View
+                        className={
+                          "custom-button " +
+                          (gearLevel.currentGearMode !== "leftCheek" &&
+                            "current-button")
+                        }
+                      >
+                        <View className='circle'></View>
+                        <View className='level'>
+                          {gearLevel.leftCheek + "档"}
+                        </View>
+                      </View>
+                    </Block>
+                  }
+                ></Slider>
+              </View>
+              <View className='gear flex aitems'>
+                <View className='pos'>右脸颊</View>
+                <Slider
+                  style={{
+                    flex: "1",
+                  }}
+                  value={gearLevel.rightCheek}
+                  min={1}
+                  max={10}
+                  inactiveColor='#F8F8F8'
+                  activeColor={
+                    gearLevel.currentGearMode == "rightCheek"
+                      ? "#EECDA1"
+                      : "#CCCCCC"
+                  }
+                  disabled={gearLevel.currentGearMode !== "rightCheek"}
+                  barHeight={6}
+                  // useButtonSlot
+                  data-key='rightCheek'
+                  // onDrag={this.onDrag}
+                  // onChange={this.onChange}
+                  renderButton={
+                    <Block>
+                      <View
+                        className={
+                          "custom-button flex jcenter aitems " +
+                          (gearLevel.currentGearMode !== "rightCheek" &&
+                            "current-button")
+                        }
+                      >
+                        <View className='circle'></View>
+                        <View className='level'>
+                          {gearLevel.rightCheek + "档"}
+                        </View>
+                      </View>
+                    </Block>
+                  }
+                ></Slider>
+              </View>
+              {/* <View className='level_box flex aitems'>
+                {(10).map((item, index) => {
+                  return (
+                    <View key={item}
+                      className='level_num'
+                      style={{
+                        marginRight: '1.225rem',
+                      }}
+                    >
+                      {item + 1}
+                    </View>
+                  )
+                })}
+              </View> */}
+            </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>
+  );
+}
+
+export default Index;
diff --git a/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less
new file mode 100644
index 0000000..ca80bb4
--- /dev/null
+++ b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.less
@@ -0,0 +1,557 @@
+page {
+  background: #f8f8f8;
+  background: #f3f3f3;
+}
+
+.water_test {
+  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;
+    }
+    .step_top {
+      position: relative;
+      .line {
+        position: absolute;
+        top: 50%;
+        right: -117rpx;
+        width: 97rpx;
+        height: 0;
+        border-top: 2rpx dashed #f1f1f1;
+      }
+      .drop {
+        width: 10rpx;
+        height: 10rpx;
+        background: #999999;
+        border-radius: 50%;
+      }
+      .step_num {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #666666;
+        margin-left: 14rpx;
+      }
+    }
+    .step_name {
+      font-size: 26rpx;
+      font-weight: bold;
+      color: #000000;
+      margin-left: 14rpx;
+      padding-top: 12rpx;
+      letter-spacing: 2rpx;
+    }
+  }
+  .test_txt {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #999999;
+    padding-top: 48rpx;
+    line-height: 36rpx;
+    letter-spacing: 2rpx;
+  }
+}
+.testing {
+  .testing_header {
+    .items {
+      flex: 1;
+      border-radius: 30rpx 30rpx 0rpx 0rpx;
+      padding: 25rpx 0 21rpx;
+      justify-content: space-evenly;
+      .finish_img {
+        width: 24rpx;
+        height: 24rpx;
+        border-radius: 50%;
+      }
+      .value {
+        font-size: 24rpx;
+        font-weight: 500;
+        color: #666666;
+        line-height: 1;
+      }
+      .name {
+        font-size: 26rpx;
+        font-weight: bold;
+        color: #000000;
+        line-height: 1;
+      }
+    }
+  }
+  .testing_content {
+    width: 100%;
+    height: 228rpx;
+    background: #ffffff;
+    border-radius: 0rpx 0rpx 30rpx 30rpx;
+    padding: 51rpx 30rpx 0 36rpx;
+    box-sizing: border-box;
+    .progress_box {
+      width: 100%;
+      height: 36rpx;
+      line-height: 36rpx;
+      .title {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #000000;
+        min-width: 200rpx;
+        margin-right: 60rpx;
+        letter-spacing: 2rpx;
+      }
+    }
+    .tips {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #999999;
+      margin-top: 45rpx;
+      line-height: 36rpx;
+      letter-spacing: 2rpx;
+    }
+    .progress_block {
+      flex: 1;
+    }
+    .finish_img {
+      width: 36rpx;
+      height: 36rpx;
+      margin-left: 49rpx;
+    }
+  }
+}
+.isquanpingclass {
+  position: fixed;
+  width: calc(100% - 100rpx);
+  padding: 20rpx 50rpx;
+  margin: 0;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+}
+.canvas {
+  position: fixed;
+  top: -9999999px;
+}
+.popbox1 {
+  width: 600rpx;
+  height: 360rpx;
+  border-radius: 28rpx;
+  flex-direction: column;
+  .tip1 {
+    font-size: 40rpx;
+    color: #000000;
+    text-align: center;
+    font-weight: 400;
+    margin-top: 28rpx;
+  }
+  .tip2 {
+    font-size: 32rpx;
+    color: #000000;
+    text-align: center;
+    font-weight: 400;
+    margin-top: 36rpx;
+    height: 110rpx;
+  }
+  .btnbox {
+    .btn1 {
+      font-size: 30rpx;
+      color: #000000;
+      text-align: center;
+      font-weight: 400;
+      width: 240rpx;
+      height: 100rpx;
+      line-height: 100rpx;
+      border: 2rpx solid rgba(0, 0, 0, 0.3);
+      border-radius: 28rpx;
+    }
+    .btn2 {
+      font-size: 30rpx;
+      color: #000000;
+      text-align: center;
+      font-weight: 400;
+      width: 240rpx;
+      height: 100rpx;
+      line-height: 100rpx;
+      margin-left: 40rpx;
+      background: #e2c5a3;
+      border-radius: 28rpx;
+    }
+  }
+}
+.van-tabs__scroll--line {
+  background: transparent !important;
+}
+image {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+/* .color{
+    color: #F1AB15;
+  } */
+.ellipsis2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.nodata {
+  color: #666666;
+  text-align: center;
+  margin-top: 50rpx;
+  font-size: 28rpx;
+}
+.MT30 {
+  margin-top: 30rpx;
+}
+.submitbtn {
+  position: absolute;
+  bottom: 100rpx;
+  width: 400rpx;
+  left: 50%;
+  margin-left: -200rpx;
+  .btn {
+    position: absolute;
+    top: 20rpx;
+    color: #fff;
+    font-weight: bold;
+    font-size: 32rpx;
+    text-align: center;
+    width: 100%;
+    bottom: 0;
+  }
+}
+.avatar-wrapper {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 99;
+  opacity: 0;
+}
+.permeate_model_box {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 52rpx 30rpx 38rpx 30rpx;
+  box-sizing: border-box;
+  .my_moisture_box {
+    width: 600rpx;
+    height: 600rpx;
+    margin: 0 auto;
+  }
+  .permeate_title {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #030000;
+    line-height: 1;
+    padding-bottom: 54rpx;
+    box-sizing: border-box;
+  }
+  .permeate_tips {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #030000;
+    line-height: 60rpx;
+    padding: 37rpx 0;
+    box-sizing: border-box;
+    .txt {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #666666;
+      margin-left: 12rpx;
+    }
+  }
+  .permeate_btn {
+    height: 90rpx;
+    line-height: 90rpx;
+    background: #000000;
+    border-radius: 45rpx;
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #ffffff;
+    padding: 0 72rpx;
+  }
+  .close_box {
+    position: absolute;
+    top: 34rpx;
+    right: 29rpx;
+    padding: 50rpx;
+  }
+  .close_img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 24rpx;
+    height: 24rpx;
+  }
+}
+.gear_adjust {
+  padding: 2rpx 10rpx 40rpx 18rpx;
+  .title {
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #000000;
+  }
+  .gear_box {
+    margin-top: 14rpx;
+    .slider_class {
+      height: 12rpx;
+      box-sizing: border-box;
+      flex: 1;
+      border-radius: 6rpx;
+    }
+    .gear {
+      padding: 20rpx 0;
+    }
+    .pos {
+      font-size: 26rpx;
+      font-weight: 500;
+      color: #666666;
+      min-width: 76rpx;
+      margin-right: 32rpx;
+    }
+  }
+}
+
+.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 {
+    font-size: 16rpx;
+    font-weight: 500;
+    color: #cccccc;
+  }
+}
+.custom-button {
+  position: relative;
+  width: 32rpx;
+  height: 32rpx;
+  background: linear-gradient(90deg, #ffe9c7, #eecda1);
+  border: 4rpx solid #ffffff;
+  border-radius: 50%;
+  box-sizing: border-box;
+  .circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 12rpx;
+    height: 12rpx;
+    background: #ffffff;
+    border-radius: 50%;
+  }
+  .level {
+    position: absolute;
+    top: -30rpx;
+    left: 0;
+    width: 44rpx;
+    font-size: 20rpx;
+    font-weight: 500;
+    color: #bf8e49;
+    height: 28rpx;
+  }
+}
+.current-button {
+  background: #cccc;
+  .level {
+    color: #cccc;
+  }
+}
+.success_popup {
+  width: calc(100% - 110rpx);
+  box-sizing: border-box;
+  .popup_content {
+    width: 100%;
+    padding: 52rpx 0 60rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #030000;
+    .title {
+      font-size: 36rpx;
+      font-weight: bold;
+    }
+    .success_icon {
+      width: 120rpx;
+      height: 120rpx;
+      margin: 52rpx 0;
+    }
+    .tips {
+      font-size: 30rpx;
+    }
+  }
+  & > .infobox1 {
+    padding: 0rpx 0 35rpx;
+    .tip {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #030000;
+      text-align: center;
+    }
+    .tip1 {
+      text-align: center;
+      margin-top: 71rpx;
+      font-size: 30rpx;
+      color: #030000;
+    }
+    .tip2 {
+      color: #202020;
+      font-size: 40rpx;
+      text-align: center;
+    }
+    .btnbox {
+      margin-top: 71rpx;
+      padding: 0 3rpx 10rpx 15rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .btn1 {
+        background: #fff;
+        width: 212rpx;
+        height: 66rpx;
+        line-height: 66rpx;
+        text-align: center;
+        font-size: 30rpx;
+        color: #e2c6a3;
+        border-radius: 32rpx;
+        border: 2rpx solid #e2c6a3;
+        font-style: normal;
+        width: 270rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        background: #ffffff;
+        text-align: center;
+        border: 2rpx solid #000000;
+        border-radius: 45rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #000000;
+      }
+      .btn2 {
+        width: 270rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        text-align: center;
+        background: #000000;
+        border-radius: 45rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #ffffff;
+        font-style: normal;
+        width: 270rpx;
+        height: 90rpx;
+        line-height: 90rpx;
+        background: #000000;
+        text-align: center;
+        border-radius: 45rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #ffffff;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+}
+.aitems {
+  align-items: center;
+}
+.jcenter {
+  justify-content: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.sa {
+  justify-content: space-around;
+}
+.wrap {
+  flex-wrap: wrap;
+}
diff --git a/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx
new file mode 100644
index 0000000..1446a2f
--- /dev/null
+++ b/src/moduleIOT/pages/iotCarePlan/components/WaterTest/index.tsx
@@ -0,0 +1,139 @@
+import Taro from "@tarojs/taro";
+import classnames from "classnames";
+import { Block, View, Image, Text, Input } from "@tarojs/components";
+import { Popup, Progress, Slider } from "@antmjs/vantui";
+
+import "./index.less";
+
+interface Props {
+  Electricity: any;
+  matrixElectricity: any;
+  facialMaskConnectStatus: any;
+}
+
+function Index() {
+  const stepIndex = 0;
+  const testIndex = 1;
+
+  const stepList = [
+    {
+      value: "Step1",
+      name: "额头",
+      finish: false,
+    },
+    {
+      value: "Step2",
+      name: "左脸颊",
+      finish: false,
+    },
+    {
+      value: "Step3",
+      name: "右脸颊",
+      finish: false,
+    },
+  ];
+  return (
+      <Block>
+        <View>
+          <View className='water_test'>
+            <View className='test_step flex aitems sb'>
+              {stepList.map((item, index) => {
+                return (
+                  <View className='step_block flex aitems' key={index}>
+                    <View className='step_top flex aitems'>
+                      <View className='drop'></View>
+                      <View className='step_num'>{item.value}</View>
+                      {index != 2 && <View className='line'></View>}
+                    </View>
+                    <View className='step_name'>{item.name}</View>
+                  </View>
+                );
+              })}
+            </View>
+            <View className='test_txt'>
+              通过小紫弹的水分测试功能，对脸部的额头、左脸颊、右脸颊三个区域进行水分检测，并定制适合您的促渗档位方案
+            </View>
+          </View>
+
+          <View className='testing'>
+            <View className='testing_header flex aitems'>
+              {stepList.map((item, index) => {
+                return (
+                  <View
+                    className='items flex aitems jcenter'
+                    key={index}
+                    style={stepIndex == index ? "background: #fff" : ""}
+                  >
+                    {stepIndex > index && (
+                      <Image
+                        className='finish_img'
+                        src={require("@/img/full-scran.png")}
+                        mode='aspectFill'
+                      ></Image>
+                    )}
+                    <View className='value'>{item.value}</View>
+                    <View className='name'>{item.name}</View>
+                  </View>
+                );
+              })}
+            </View>
+            <View className='testing_content'>
+              <View className='progress_box flex aitems'>
+                <View className='title'>
+                  {stepList[stepIndex].name + "水分测试"}
+                </View>
+                {/*  <view class='progress_block flex aitems'> */}
+                <Progress
+                  style={{
+                    width: "300rpx",
+                  }}
+                  percentage='80'
+                  strokeWidth='14'
+                  showPivot={false}
+                  color='#C2E5F3'
+                ></Progress>
+                {stepList[stepIndex].finish && 80 >= 99 ? (
+                  <Image
+                    className='finish_img'
+                    src={require("@/img/finished.png")}
+                    mode='aspectFill'
+                  ></Image>
+                ) : (
+                  <Image
+                    className='finish_img'
+                    src={require("@/img/no-finish.png")}
+                    mode='aspectFill'
+                  ></Image>
+                )}
+                {/*  </view> */}
+              </View>
+              {/*  <view class='tips' wx:if='{{!finish}}'> */}
+              {/*  请参考视频指引，将仪器紧贴<text style='color: #000000'>额头区域</text> */}
+              {/*  </view> */}
+              <View className='tips flex sb'>
+                <View>
+                  请参考视频指引，将仪器紧贴
+                  {(testIndex == 1 || testIndex == 2 || testIndex == 4) && (
+                    <Text
+                      style={{
+                        color: "#000000",
+                      }}
+                    >
+                      {stepList[stepIndex].name + "区域"}
+                    </Text>
+                  )}
+                  {testIndex == 1 && (
+                    <Text>，并点击下方启动检测按钮进行测试</Text>
+                  )}
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        
+      </Block>
+  );
+}
+
+export default Index;