diff --git a/project.private.config.json b/project.private.config.json
new file mode 100644
index 0000000..f22c5fe
--- /dev/null
+++ b/project.private.config.json
@@ -0,0 +1,16 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/face_report_one/face_report_one",
+          "pathName": "pages/face_report_one/face_report_one",
+          "query": "id=60&recordId=undefined&report=false",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/img/face-report/Head_lift_Pro.png b/src/img/face-report/Head_lift_Pro.png
new file mode 100644
index 0000000..d0dfdaa
Binary files /dev/null and b/src/img/face-report/Head_lift_Pro.png differ
diff --git a/src/img/face-report/Mandibular_Pro.png b/src/img/face-report/Mandibular_Pro.png
new file mode 100644
index 0000000..5c16d10
Binary files /dev/null and b/src/img/face-report/Mandibular_Pro.png differ
diff --git a/src/img/face-report/eye.png b/src/img/face-report/eye.png
new file mode 100644
index 0000000..93049a2
Binary files /dev/null and b/src/img/face-report/eye.png differ
diff --git a/src/img/face-report/face.png b/src/img/face-report/face.png
new file mode 100644
index 0000000..d58fab8
Binary files /dev/null and b/src/img/face-report/face.png differ
diff --git a/src/img/face-report/nasolabial_Pro.png b/src/img/face-report/nasolabial_Pro.png
new file mode 100644
index 0000000..be98a0d
Binary files /dev/null and b/src/img/face-report/nasolabial_Pro.png differ
diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.less
new file mode 100644
index 0000000..fbe4ead
--- /dev/null
+++ b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.less
@@ -0,0 +1,1654 @@
+.box {
+  width: 690rpx;
+  height: 320rpx;
+  margin: 28rpx auto;
+  background-color: #fff;
+  border-radius: 30rpx;
+  padding: 35rpx 25rpx 25rpx 35rpx;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 0;
+}
+.box_background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 690rpx;
+  height: 320rpx;
+  border-radius: 30rpx;
+  background-color: #fff;
+  .power {
+    margin: 34rpx 0 28rpx 28rpx;
+    font-family: PingFang-SC;
+    font-weight: 500;
+    font-size: 18rpx;
+    color: #cccccc;
+  }
+  .full {
+    width: 24rpx;
+    height: 24rpx;
+    position: absolute;
+    top: 32rpx;
+    right: 26rpx;
+  }
+  .line {
+    margin: 0 0 6rpx 35rpx;
+    font-family: PingFang-SC;
+    font-size: 14rpx;
+    color: #cccccc;
+    display: flex;
+    position: relative;
+    height: 18rpx;
+    .bottom_line {
+      border-bottom: 1rpx #ccc dashed;
+      width: 550rpx;
+      margin-left: 20rpx;
+      position: absolute;
+      bottom: -6rpx;
+      right: 74rpx;
+      height: 4rpx;
+      color: #fff;
+    }
+  }
+
+  .time {
+    position: absolute;
+    bottom: 22rpx;
+    right: 24rpx;
+    font-family: PingFang-SC;
+    font-size: 18rpx;
+    color: #cccccc;
+  }
+  .Seconds{
+    position: absolute;
+    font-size: 18rpx;
+    color: #cccccc;
+    margin: 0 0 6rpx 65rpx;
+    font-family: PingFang-SC;
+    font-size: 14rpx;
+    color: #cccccc;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    position: relative;
+    height: 18rpx;
+    width: 550rpx;
+    background-color: red;
+    .Seconds_item{
+      background-color: #bf8e49;
+      flex: 1;
+    }
+  }
+}
+
+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_face/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx
new file mode 100644
index 0000000..c5ce263
--- /dev/null
+++ b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx
@@ -0,0 +1,373 @@
+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 { useRef } from "react";
+import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
+import echarts from "@/utils/echarts.min.js";
+
+import "./index.less";
+
+interface Props {
+  Electricity: any;
+  matrixElectricity: any;
+  facialMaskConnectStatus: any;
+}
+
+function Index() {
+   
+  const echartsRef = useRef<EchartsHandle>(null);
+  function generateColorArray(startColor, endColor, steps) {
+    var startRGB = hexToRgb(startColor);
+    var endRGB = hexToRgb(endColor);
+    var colors = [];
+    for (var i = 0; i < steps; i++) {
+      var r = interpolate(startRGB.r, endRGB.r, steps, i);
+      var g = interpolate(startRGB.g, endRGB.g, steps, i);
+      var b = interpolate(startRGB.b, endRGB.b, steps, i);
+      colors.push(rgbToHex(r, g, b));
+    }
+    return colors;
+  }
+  
+  function hexToRgb(hex) {
+    var bigint = parseInt(hex.slice(1), 16);
+    var r = (bigint >> 16) & 255;
+    var g = (bigint >> 8) & 255;
+    var b = bigint & 255;
+    return { r: r, g: g, b: b };
+  }
+  
+  function rgbToHex(r, g, b) {
+    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  }
+  
+  function interpolate(start, end, steps, count) {
+    return start + ((end - start) / steps) * count;
+  }
+  
+  const startColor = '#FFFF00'; // 黄色
+  const endColor = '#FF0000'; // 红色
+  const steps = 100; // 50个颜色
+  
+  const colors = generateColorArray(startColor, endColor, steps);
+  const xList = [...new Array(361).fill(0).map((item, key) => key)];
+  // const seriesData = [
+  //   ...xList.map((item) => {
+  //     return Math.random() * 100;
+  //   })
+  // ];
+  let seriesData=[
+    1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
+    1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
+    1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,8,5,1,2,3,
+    1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+    ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
+  ]
+  console.log(seriesData,'seriesData',xList);
+  
+  // const option: EChartOption ={
+  //   grid: {
+  //         // 让图表占满容器
+  //         top: "28rpx",
+  //         left: "18rpx",
+  //         right: "28rpx",
+  //         bottom: "17rpx",
+  //       },
+  //       xAxis: {
+  //         type: 'category',
+  //         data: [...xList],
+  //         axisLabel: {
+  //           interval: 59
+  //         },
+  //         axisTick: {
+  //           alignWithLabel: true,
+  //           interval: 10,
+  //           show: false,
+  //         },
+  //          axisLine: {
+  //             show: false,
+  //           },
+            
+            
+  //       },
+  //   yAxis: {
+  //     min: 0,
+  //     max: 8,
+  //     splitNumber: 8,
+  //     type: 'value',
+  //      axisLine: {
+  //         show: false,
+  //       },
+  //       axisLabel: {
+  //         show: false,
+  //       },
+  //       axisTick: {
+  //         show: false,
+  //       },
+  //   },
+  //   series: [
+  //     {
+  //       data: seriesData,
+  //       type: 'bar',
+  //       // barWidth: 15,
+  //       itemStyle: {
+  //         normal: {
+  //           color: function (params) {
+  //             var value = params.data;
+  //             var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+  //               {
+  //                 offset: 0,
+  //                 color: colors[parseInt(value)] // 红色
+  //               },
+  //               {
+  //                 offset: 1,
+  //                 color: colors[0] // 黄色
+  //               }
+  //             ]);
+  //             return value === 100 ? '#FF0000' : color;
+  //           }
+  //         }
+  //       }
+  //     }
+  //   ]
+  // }
+  const option: EChartOption = {
+    grid: {
+      // 让图表占满容器
+      top: "28rpx",
+      left: "18rpx",
+      right: "28rpx",
+      bottom: "17rpx",
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisTick: { show: false },
+        data: ['2012', '2013', '2014', '2015', '2016'],
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+         
+      }
+    ],
+  yAxis: {
+        type: "value",
+        min: 0,
+        max: 8,
+        splitNumber: 8,
+        splitLine: {
+          show: false,
+          // lineStyle: {
+          //   color: "#cccccc",
+          //   type: [4, 2],
+          //   dashOffset: 4,
+          // },
+        },
+        axisLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+    
+    series: [
+      { barCategoryGap:'0%',
+        name: 'Forest',
+        type: 'bar',
+        barGap: 0,
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'Steppe',
+        type: 'bar',
+        // label: labelOption,
+        emphasis: {
+          focus: 'series'
+        },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'Desert',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'Wetland',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'demo1',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'demo2',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'demo3',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'demo4',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      { barCategoryGap:'0%',
+        name: 'demo5',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      },
+      {
+        color:'red',
+        barCategoryGap:'0%',
+        name: 'demo6',
+        type: 'bar',
+        // label: labelOption,
+        // emphasis: {
+        //   focus: 'series'
+        // },
+        data: [2, 4, 4, 5, 7]
+      }
+    ]
+    // grid: {
+    //   // 让图表占满容器
+    //   top: "28rpx",
+    //   left: "18rpx",
+    //   right: "28rpx",
+    //   bottom: "17rpx",
+    // },
+    // xAxis: {
+    //   type: 'category',
+    //   // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    //   show: false,
+    //   // axisLine: {
+    //   //   show: false,
+    //   // },
+     
+    // },
+    // yAxis: {
+    //   type: "value",
+    //   min: 0,
+    //   max: 50,
+    //   splitNumber: 10,
+    //   splitLine: {
+    //     show: false,
+    //     // lineStyle: {
+    //     //   color: "#cccccc",
+    //     //   type: [4, 2],
+    //     //   dashOffset: 4,
+    //     // },
+    //   },
+    //   axisLine: {
+    //     show: false,
+    //   },
+    //   axisLabel: {
+    //     show: false,
+    //   },
+    //   axisTick: {
+    //     show: false,
+    //   },
+    // },
+    // series: [
+    //   {
+    //     data: [1, 6, 3, 4, 7, 6, 0,8, 0, 10, 11, 12, 13, 14,15, 16, 17, 18, 19, 20, 21,22, 23, 24, 25, 26, 27, 28,29, 30, 31, 32, 33, 34, 35,36],
+    //     type: 'bar',
+    //     barWidth:30,   //设置柱子的宽度
+    //     barGap:'100%', 
+    //       barCategoryGap:'0%',
+    //   }
+    // ]
+  };
+
+  const level = [8, 7, 6, 5, 4, 3, 2];
+  let arr =[2,3,4,5,6,7]
+  return (
+    <Block>
+      <View className="box">
+        <Echarts
+          echarts={echarts}
+          option={option}
+          ref={echartsRef}
+          // isPage={false}
+          // style自定义设置echarts宽高
+          style={{ width: "630rpx", height: "167rpx" }}
+        />
+        <View className="box_background">
+        
+        {level.map((item) => (
+          <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>
+        {/* <View className="time">时间</View> */}
+        <View className="Seconds">
+          {
+            arr.map(item =>(
+              <View key={item} className="Seconds_item">{item}</View>
+            ))
+          }
+        </View>
+      </View>
+      </View>
+
+      
+    </Block>
+  );
+}
+
+export default Index;
diff --git a/src/pages/face_report_one/face_report_one.less b/src/pages/face_report_one/face_report_one.less
index 0bde6db..93c6a9f 100644
--- a/src/pages/face_report_one/face_report_one.less
+++ b/src/pages/face_report_one/face_report_one.less
@@ -76,7 +76,7 @@ page {
   // margin: 48rpx 0 34rpx;
 }
 .eacharts{
-  background-color: red;
+  // background-color: red;
   margin-top: 14px;
   margin-bottom: 45rpx;
   /* margin: 52rpx 0rpx; */
@@ -283,7 +283,7 @@ page {
   height: 211rpx;
   border-radius: 20rpx;
   margin-right: 37rpx;
-  background-color: red;
+  // background-color: red;
 }
 
 .content {
diff --git a/src/pages/face_report_one/face_report_one.tsx b/src/pages/face_report_one/face_report_one.tsx
index a07a121..d35c1bc 100644
--- a/src/pages/face_report_one/face_report_one.tsx
+++ b/src/pages/face_report_one/face_report_one.tsx
@@ -14,6 +14,8 @@ import Navbar from "../../components/navbar/navbar";
 import PopupAlert from "../../components/popup/popup-alert";
 import { InstrumentInfo } from "../../utils/Interface";
 
+// 引入ecahrts图表
+import EchartsForm from '../../moduleIOT/pages/iotCarePlan/components/Echart_face'
 /** 自定义组件 **/
 import "./face_report_one.less";
 
@@ -26,7 +28,9 @@ export default class Index extends Component<any, any> {
       name: "template模板页",
       statistics: {},
       recordList: [],
-      recordData: {},
+      recordData: {
+        modeImage:require("@/img/face-report/face.png")
+      },
       year: new Date().getFullYear(),
       show: false,
       clockStatistics: [],
@@ -329,7 +333,9 @@ export default class Index extends Component<any, any> {
             </View>
           </View>
           <View className="main_title">能量等级图谱-{face_Tyep}</View>
-          <View className="eacharts">echarts图标</View>
+          <View className="eacharts">
+      <EchartsForm></EchartsForm>
+          </View>
          
         </View>
         <View className="bottom-title">