ewew

pages/home/index.js

@@ -1,19 +1,18 @@
 import * as echarts from '../../ec-canvas/echarts.min';
 import request from '~/api/request';
 const app = getApp();
-let height = []
+
-let weight = []
 function initChart(canvas, width, height, dpr) {
   const chart = echarts.init(canvas, null, {
     width: width,
     height: height,
-    devicePixelRatio: dpr // new
+    devicePixelRatio: dpr
   });
   canvas.setChart(chart);
 
   var option = {
     title: {
-      text: '身高（cm）',
+      text: '',
       left: 'left',
       fontSize: 6
     },
@@ -25,8 +24,8 @@ function initChart(canvas, width, height, dpr) {
     },
     grid: {
       containLabel: true,
-      top: '12%',
+      top: '5%',
-      left: '5%',
+      left: '1%',
       right: '5%',
       bottom: '10%'
     },
@@ -37,8 +36,7 @@ function initChart(canvas, width, height, dpr) {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      data: ['出生', '1月', '2月', '3月', '4月', '5月'],
-      // show: false
     },
     yAxis: {
       x: 'center',
@@ -48,13 +46,12 @@ function initChart(canvas, width, height, dpr) {
           type: 'dashed'
         }
       }
-      // show: false
     },
     series: [{
       name: '实际身高',
       type: 'line',
       smooth: true,
-      data: height
+      data: []
     }, {
       name: '标准范围',
       type: 'line',
@@ -71,13 +68,13 @@ function initChart2(canvas, width, height, dpr) {
   const chart = echarts.init(canvas, null, {
     width: width,
     height: height,
-    devicePixelRatio: dpr // new
+    devicePixelRatio: dpr
   });
   canvas.setChart(chart);
 
   var option = {
     title: {
-      text: '体重（kg）',
+      text: '',
       left: 'left', 
       fontSize: 12
     },
@@ -89,8 +86,8 @@ function initChart2(canvas, width, height, dpr) {
     },
     grid: {
       containLabel: true,
-      top: '12%',
+      top: '5%',
-      left: '5%',
+      left: '1%',
       right: '5%',
       bottom: '10%'
     },
@@ -101,8 +98,7 @@ function initChart2(canvas, width, height, dpr) {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      data: ['出生', '1月', '2月', '3月', '4月', '5月'],
-      // show: false
     },
     yAxis: {
       x: 'center',
@@ -112,13 +108,12 @@ function initChart2(canvas, width, height, dpr) {
           type: 'dashed'
         }
       }
-      // show: false
     },
     series: [{
       name: '实际体重',
       type: 'line',
       smooth: true,
-      data: weight
+      data: []
     }, {
       name: '标准范围',
       type: 'line',
@@ -142,16 +137,20 @@ Page({
   },
   data: {
     ec: {
-      onInit: ''
+      lazyLoad: true
     },
     ec2: {
-      onInit: ''
+      lazyLoad: true
     },
     activeIndex: 0,
     sfData:{},
     sfListLength: 0,
     articles:[],
-    articlesLength: 0
+    articlesLength: 0,
+    heightData: [],
+    weightData: [],
+    heightChart: null,
+    weightChart: null
   },
 
   // Helper function to strip HTML tags and convert to plain text
@@ -198,35 +197,205 @@ Page({
 
   async getChartData(){
     const res = await request('patient/chat/0', 'get')
+    const heightData = []
+    const weightData = []
+    
     if(res.list.length > 0){
       res.list.forEach(item => {
-        height.push(item.height)
+        heightData.push(item.height)
-        weight.push(item.weight)
+        weightData.push(item.weight)
       })
     }
+
     this.setData({
-      ec: {
+      heightData,
-        onInit: initChart
+      weightData
-      },
+    }, () => {
-      ec2: {
+      this.initCharts();
-        onInit: initChart2
+    });
-      },
-    })
   },
+
+  initCharts() {
+    // 初始化身高图表
+    if (!this.heightChart) {
+      const chart1 = this.selectComponent('#mychart-dom-height');
+      if (chart1) {
+        chart1.init((canvas, width, height, dpr) => {
+          const chart = echarts.init(canvas, null, {
+            width: width,
+            height: height,
+            devicePixelRatio: dpr
+          });
+          canvas.setChart(chart);
+
+          const option = {
+            title: {
+              text: '',
+              left: 'left',
+              fontSize: 6
+            },
+            legend: {
+              data: ['实际身高', '标准范围'],
+              bottom: 0,
+              left: 'center',
+              z: 100
+            },
+            grid: {
+              containLabel: true,
+              top: '5%',
+              left: '1%',
+              right: '5%',
+              bottom: '10%'
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: ['出生', '1月', '2月', '3月', '4月', '5月'],
+            },
+            yAxis: {
+              x: 'center',
+              type: 'value',
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed'
+                }
+              }
+            },
+            series: [{
+              name: '实际身高',
+              type: 'line',
+              smooth: true,
+              data: this.data.heightData
+            }, {
+              name: '标准范围',
+              type: 'line',
+              smooth: true,
+              data: [120, 130, 140, 150, 160, 170]
+            }]
+          };
+
+          chart.setOption(option);
+          this.heightChart = chart;
+          return chart;
+        });
+      }
+    }
+
+    // 初始化体重图表
+    if (!this.weightChart) {
+      const chart2 = this.selectComponent('#mychart-dom-weight');
+      if (chart2) {
+        chart2.init((canvas, width, height, dpr) => {
+          const chart = echarts.init(canvas, null, {
+            width: width,
+            height: height,
+            devicePixelRatio: dpr
+          });
+          canvas.setChart(chart);
+
+          const option = {
+            title: {
+              text: '',
+              left: 'left',
+              fontSize: 12
+            },
+            legend: {
+              data: ['实际体重', '标准范围'],
+              bottom: 0,
+              left: 'center',
+              z: 100
+            },
+            grid: {
+              containLabel: true,
+              top: '5%',
+              left: '1%',
+              right: '5%',
+              bottom: '10%'
+            },
+            tooltip: {
+              show: true,
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: ['出生', '1月', '2月', '3月', '4月', '5月'],
+            },
+            yAxis: {
+              x: 'center',
+              type: 'value',
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed'
+                }
+              }
+            },
+            series: [{
+              name: '实际体重',
+              type: 'line',
+              smooth: true,
+              data: this.data.weightData
+            }, {
+              name: '标准范围',
+              type: 'line',
+              smooth: true,
+              data: [120, 130, 140, 150, 160, 170]
+            }]
+          };
+
+          chart.setOption(option);
+          this.weightChart = chart;
+          return chart;
+        });
+      }
+    }
+  },
+
   onLoad(){
-    this.getChartData()
     this.getSfList()
+    setTimeout(() => {
+      this.getChartData().then(() => {
+        if (this.data.activeIndex === 0) {
+          this.initHeightChart();
+        } else {
+          this.initWeightChart();
+        }
+      });
+    }, 500);
+  },
+
+  onReady() {
+    // setTimeout(() => {
+    //   this.getChartData().then(() => {
+    //     if (this.data.activeIndex === 0) {
+    //       this.initHeightChart();
+    //     } else {
+    //       this.initWeightChart();
+    //     }
+    //   });
+    // }, 500);
   },
 
   changeChart(e) {
     const index = e.currentTarget.dataset.index;
-    console.log(index);
+    if(index == this.data.activeIndex){
+      return
+    }
     this.setData({
       activeIndex: index
-    })
+    }, () => {
-  },
+      setTimeout(() => {
-
+        if (index == 0) {
-  onReady() {
+          this.initHeightChart();
+        } else {
+          this.initWeightChart();
+        }
+      }, 100);
+    });
   },
 
   toClockIn(){
@@ -251,4 +420,64 @@ Page({
       url: '/pages/article/index',
     })
   },
+
+  onUnload() {
+    // 页面卸载时销毁图表实例
+    if (this.heightChart) {
+      this.heightChart.dispose();
+      this.heightChart = null;
+    }
+    if (this.weightChart) {
+      this.weightChart.dispose();
+      this.weightChart = null;
+    }
+  },
+
+  // 初始化身高图表
+  initHeightChart() {
+    const chartComp = this.selectComponent('#mychart-dom-height');
+    if (chartComp) {
+      chartComp.init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, { width, height, devicePixelRatio: dpr });
+        canvas.setChart(chart);
+        chart.setOption({
+          title: { text: '', left: 'left', fontSize: 6 },
+          legend: { data: ['实际身高', '标准范围'], bottom: 0, left: 'center', z: 100 },
+          grid: { containLabel: true, top: '5%', left: '1%', right: '5%', bottom: '10%' },
+          tooltip: { show: true, trigger: 'axis' },
+          xAxis: { type: 'category', boundaryGap: false, data: ['出生', '1月', '2月', '3月', '4月', '5月'] },
+          yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
+          series: [
+            { name: '实际身高', type: 'line', smooth: true, data: this.data.heightData },
+            { name: '标准范围', type: 'line', smooth: true, data: [120, 130, 140, 150, 160, 170] }
+          ]
+        });
+        return chart;
+      });
+    }
+  },
+
+  // 初始化体重图表
+  initWeightChart() {
+    const chartComp = this.selectComponent('#mychart-dom-weight');
+    if (chartComp) {
+      chartComp.init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, { width, height, devicePixelRatio: dpr });
+        canvas.setChart(chart);
+        chart.setOption({
+          title: { text: '', left: 'left', fontSize: 12 },
+          legend: { data: ['实际体重', '标准范围'], bottom: 0, left: 'center', z: 100 },
+          grid: { containLabel: true, top: '5%', left: '1%', right: '5%', bottom: '10%' },
+          tooltip: { show: true, trigger: 'axis' },
+          xAxis: { type: 'category', boundaryGap: false, data: ['出生', '1月', '2月', '3月', '4月', '5月'] },
+          yAxis: { x: 'center', type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
+          series: [
+            { name: '实际体重', type: 'line', smooth: true, data: this.data.weightData },
+            { name: '标准范围', type: 'line', smooth: true, data: [120, 130, 140, 150, 160, 170] }
+          ]
+        });
+        return chart;
+      });
+    }
+  },
 });

pages/home/index.less

@@ -17,7 +17,8 @@
   
   .home-content {
     // height: calc(100% - @nav-bar-height);
-    padding: 30rpx;
+    padding: 28rpx;
+    padding-bottom: 0;
     position: relative;
     z-index: 1;
     .item-title-img{
@@ -28,7 +29,7 @@
       height: 96rpx;
       position: relative;
       left: -24rpx;
-      margin-top: -28rpx;
+      // margin-top: -28rpx;
     }
     .item-title {
       font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
@@ -54,8 +55,8 @@
     .item-content {
       background-color: #fff;
       border-radius: 24rpx;
-      padding: 30rpx;
+      padding: 28rpx;
-      margin-bottom: 30rpx;
+      margin-bottom: 28rpx;
 
       
       
@@ -90,7 +91,7 @@
           vertical-align: middle;
           width: 36rpx;
           height: 36rpx;
-          margin-right: 10rpx;
+          margin-right: 20rpx;
         }
         .item-title-right-text {
           position: absolute;
@@ -186,6 +187,21 @@
       .item-title-icon{
         margin-right: 18rpx;
       }
+     
+    }
+    .item-content-2{
+      background: linear-gradient( 180deg, #E7F2F2 0%, #F7FCFC 100%);
+      box-shadow: 0rpx 2rpx 20rpx 0rpx #E9F4F3;
+      border-radius: 24rpx;
+      border: 2rpx solid #FFFFFF;
+      position: relative;
+      padding-top:0 ;
+      .item-title{
+        margin-bottom: 0;
+      }
+      .item-box{
+        margin-top: 0;
+      }
     }
   }
   .item-content-1{
@@ -195,13 +211,7 @@
     border: 2rpx solid #FFFFFF;
     position: relative;
   }
-  .item-content-2{
+  
-    background: linear-gradient( 180deg, #E7F2F2 0%, #F7FCFC 100%);
-    box-shadow: 0rpx 2rpx 20rpx 0rpx #E9F4F3;
-    border-radius: 24rpx;
-    border: 2rpx solid #FFFFFF;
-    position: relative;
-  }
   
 
 }
@@ -220,4 +230,150 @@
   align-items: center;
   justify-content: center;
   box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
+}
+
+.box_3 {
+  background-color: rgba(245,245,245,1.000000);
+  border-radius: 28rpx;
+  width: 250rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  padding: 4rpx 28rpx 4rpx 4rpx;
+  white-space: nowrap;
+  margin-bottom: 16rpx;
+  margin-left:-4rpx;
+}
+.text-wrapper_1 {
+  border-radius: 28rpx;
+  display: flex;
+  flex-direction: column;
+  padding: 12rpx 24rpx 12rpx 24rpx;
+}
+.text-act{
+  background-color: rgba(255,255,255,1.000000);
+
+}
+.text_2 {
+  overflow-wrap: break-word;
+  color: rgba(34,34,34,1);
+  font-size: 24rpx;
+  font-family: Alibaba-PuHuiTi-M;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24rpx;
+}
+.echarts-title{
+  font-size: 24rpx;
+  color: #909399;
+  line-height: 34rpx;
+}
+.image-text_3 {
+  width: 110rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+  margin: 32rpx 0rpx 18rpx 0;
+}
+.box_6 {
+  border-radius: 100%;
+  width: 16rpx;
+  height: 16rpx;
+  border: 2px solid rgba(0,91,162,1);
+  display: flex;
+  flex-direction: column;
+  margin: 6rpx 0 6rpx 0;
+  box-sizing: border-box;
+}
+.text-group_3 {
+  overflow-wrap: break-word;
+  color: rgba(34,34,34,1);
+  font-size: 28rpx;
+  font-family: Alibaba-PuHuiTi-M;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 28rpx;
+}
+.box_9 {
+  background-color: rgba(255,255,255,1.000000);
+  border-radius: 16rpx;
+  position: relative;
+  z-index: 1;
+  flex-direction: row;
+  display: flex;
+  justify-content: flex-center;
+  padding: 24rpx 24rpx 24rpx 24rpx;
+  margin-left: 30rpx;
+}
+.image-text_5 {
+  width: 298rpx;
+  flex-direction: row;
+  display: flex;
+  justify-content: space-between;
+}
+.box_10 {
+  border-radius: 16rpx;
+  background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/c46fcd8a7c644cbbb347a75b175350c6_mergeImage.png);
+  width: 100rpx;
+  height: 100rpx;
+  border: 1px solid rgba(0,91,162,0.1);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin-right:16rpx ;
+}
+.text-group_5 {
+  display: flex;
+  flex-direction: column;
+  margin: 12rpx 0 12rpx 0;
+}
+.text_21 {
+  overflow-wrap: break-word;
+  color: rgba(34,34,34,1);
+  font-size: 32rpx;
+  font-family: Alibaba-PuHuiTi-M;
+  font-weight: normal;
+  text-align: right;
+  white-space: nowrap;
+  line-height: 32rpx;
+  margin-right: 86rpx;
+}
+.text_22 {
+  overflow-wrap: break-word;
+  color: rgba(144,147,153,1);
+  font-size: 28rpx;
+  font-family: Alibaba-PuHuiTi-R;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 28rpx;
+  margin-top: 16rpx;
+}
+.box_11 {
+  background-color: rgba(237,243,248,1.000000);
+  width: 2rpx;
+  height: 62rpx;
+  display: flex;
+  flex-direction: column;
+  margin: 20rpx 0 18rpx 100rpx;
+}
+.text-wrapper_6 {
+  background-color: rgba(0,91,162,1.000000);
+  border-radius: 32rpx;
+  display: flex;
+  flex-direction: column;
+  margin: 22rpx 0 22rpx 24rpx;
+  padding: 12rpx 40rpx 12rpx 40rpx;
+}
+.text_23 {
+  overflow-wrap: break-word;
+  color: rgba(255,255,255,1);
+  font-size: 28rpx;
+  font-family: Alibaba-PuHuiTi-M;
+  font-weight: normal;
+  text-align: right;
+  white-space: nowrap;
+  line-height: 32rpx;
 }

pages/home/index.wxml

@@ -6,17 +6,19 @@
       <image class="item-title-icon" src="../../assets/images/home/icon_1.svg"></image>
       宝宝成长曲线</view>
     <view class="item-content">
-      <view class="echarts-legend">
+      
-        <view class="{{ activeIndex == 0 ? 'active' : '' }}" data-index="0" bindtap="changeChart">
+      <view class="box_3">
-          身高曲线
+        <view class="{{activeIndex == 0 ? 'text-wrapper_1 text-act' : 'text-wrapper_1'}}" data-index="0" bindtap="changeChart">
+          <text lines="1" class="text_2">身高曲线</text>
         </view>
-        <view class="{{ activeIndex == 1 ? 'active' : '' }}" data-index="1" bindtap="changeChart">
+        <view class="{{activeIndex == 1 ? 'text-wrapper_1 text-act' : 'text-wrapper_1'}}" data-index="1" bindtap="changeChart">
-          体重曲线
+          <text lines="1" class="text_2">体重曲线</text>
         </view>
       </view>
+      <text class="echarts-title">{{activeIndex == 0 ? '身高（cm）':'体重（g）'}}</text>
       <view class="echarts-canvas-container">
-        <ec-canvas wx:if="{{ activeIndex == 0 }}" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
+        <ec-canvas wx:if="{{ activeIndex == 0 }}" id="mychart-dom-height" canvas-id="mychart-height" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
-        <ec-canvas wx:else id="mychart-dom-bar" canvas-id="mychart-bar2" ec="{{ ec2 }}"></ec-canvas>
+        <ec-canvas wx:else id="mychart-dom-weight" canvas-id="mychart-weight" ec="{{ ec2 }}" force-use-old-canvas="true"></ec-canvas>
       </view>
     </view>
     <view class="item-content item-content-1">
@@ -27,8 +29,8 @@
             更多
           </view>
       </view>
-      <view class="item-box">
+      <!-- <view class="item-box"> -->
-        <view class="item-box-title">
+        <!-- <view class="item-box-title">
           <view class="item-box-title-left">
             中午 12:00 
           </view>
@@ -36,18 +38,33 @@
             未完成
           </view>
         </view>
-        <!-- 药品名字 -->
         <view class="drug-name">
           布洛芬
         </view>
        
-        <!-- 药品用量 -->
         <view class="drug-usage">
           1片 饭后复用
         </view>
        
-        <t-button theme="primary" block>打卡</t-button>
+        <t-button theme="primary" block>打卡</t-button> -->
-      </view>
+        <view class="image-text_3">
+          <view class="box_6"></view>
+          <text lines="1" class="text-group_3">08:00</text>
+        </view>
+        <view class="box_9">
+          <view class="image-text_5">
+            <view class="box_10"></view>
+            <view class="text-group_5">
+              <text lines="1" class="text_21">优思弗</text>
+              <text lines="1" class="text_22">1片，饭后服用</text>
+            </view>
+          </view>
+          <view class="box_11"></view>
+          <view class="text-wrapper_6">
+            <text lines="1" class="text_23">打卡</text>
+          </view>
+        </view>
+      <!-- </view> -->
     </view>
     <view class="item-content item-content-2" wx:if="{{sfListLength > 0}}">
       <image class="item-content-1-bg" src="../../assets/images/home/img_2.png" mode="widthFix"></image>

pages/my/index.less

@@ -169,9 +169,9 @@
   height: 120rpx;
   margin-bottom: 48rpx;
   background-color: rgba(255,255,255,0.5);
-  padding: 20rpx;
+  // padding: 20rpx;
   border-radius: 120rpx;
-  border: 4rpx solid rgba(255,255,255,1);
+  // border: 4rpx solid rgba(255,255,255,1);
   image{
     width: 100%;
     height: 100%;