feat :1.橙宝日志 喂养记录得页面新增。

src/components/height/h-echarts.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="w-full box-border h-[1120rpx] px-4 pt-32 pb-4">
-    <view id="chart" style="width: 100%; height: 100%"></view>
+  <view class="w-full box-border h-[1120rpx] px-4 pt-8 pb-4">
+    <view id="chart" style="width: 100%; height: 1120rpx"></view>
   </view>
 </template>
 <script setup>
@@ -12,19 +12,42 @@
     name: 'HEcharts',
   })
 
-  defineProps({
-    item: {
-      type: Object,
-      default: {},
+  const props = defineProps({
+    yAxisData: {
+      type: Array,
+      default: [],
+    },
+    seriesData: {
+      type: Array,
+      default: [],
+    },
+    xAxisData: {
+      type: Array,
+      default: [],
+    },
+    unit: {
+      type: String,
+      default: '(cm)',
     },
   })
 
-  // const chart = ref(null)
+  // const unit = defineModel('unit')
+  const yAxisData = defineModel('yAxisData')
+  const xAxisData = defineModel('xAxisData')
+
   const option = ref({
     grid: {
       left: '10%', // 左侧间距
       right: '10%', // 右侧间距
     },
+    title: {
+      subtext: props.unit, // 图表标题下方显示单位
+      // subtext: unit.value, // 图表标题下方显示单位
+      subtextStyle: {
+        fontSize: 12,
+        color: '#666',
+      },
+    },
     tooltip: {
       trigger: 'axis', // 鼠标移到或触摸时显示的内容
       // trigger: 'item', // 鼠标移到或触摸时显示的内容
@@ -48,7 +71,9 @@
     },
     xAxis: {
       type: 'category',
-      data: ['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'],
+      // ['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁']
+      // data: xAxisData.value,
+      data: [...props.xAxisData],
       axisLabel: {
         interval: 0, // 每隔一个标签显示一次
         show: true, // 显示 X 轴标签
@@ -75,6 +100,12 @@
       // axisLine: {
       //   show: true, // 隐藏 X 轴的线
       // },
+      // data: [...props.yAxisData], // 手动设置 Y 轴的刻度
+      data: [0, 10, 20, 30, 40, 50], // 手动设置 Y 轴的刻度
+      // min: 0, // 设置 Y 轴的最小值
+      // max: 100, // 设置 Y 轴的最大值
+      // interval: 20, // 设置 Y 轴的间隔
+
       gridIndex: 0,
     },
     series: [
@@ -97,8 +128,8 @@
           // { type: 'max', name: '最大值' },   // 标记最大值
           // { type: 'min', name: '最小值' },   // 标记最小值
           ...[55, 65, 75, 85, 85, 88, 90].map((value, index) => ({
-            name: ``,
-            coord: value + '4',
+            name: '数量',
+            coord: value,
             value: value,
             label: {
               show: true, // 显示文本
@@ -144,7 +175,9 @@
     // 指定图表的配置项和数据
 
     // 使用刚指定的配置项和数据显示图表
-    myChart.setOption(option.value)
+    nextTick(() => {
+      myChart.setOption(option.value)
+    })
   }
 
   onLoad(() => {

src/components/height/r-echarts.vue

@@ -1,6 +1,7 @@
 <template>
-  <view class="w-full box-border h-[1120rpx] px-4 pt-32 pb-4">
-    <view id="chart" style="width: 100%; height: 100%"></view>
+  <view class="relative w-full box-border h-[604rpx] p-4">
+    <view class="absolute right-4 top-7 z-[10] text-xs text-[#333]">喂奶次数</view>
+    <view id="chart" class="w-full box-border" style="height: 100%"></view>
   </view>
 </template>
 <script setup>
@@ -12,18 +13,59 @@
     name: 'REcharts',
   })
 
-  defineProps({
-    item: {
-      type: Object,
-      default: {},
+  const props = defineProps({
+    yAxisData: {
+      type: Array,
+      default: [],
+    },
+    seriesData: {
+      type: Array,
+      default: [],
+    },
+    xAxisData: {
+      type: Array,
+      default: [],
+    },
+    unit: {
+      type: String,
+      default: '(cm)',
     },
   })
 
+  const colorList = ['#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#F88842']
   // const chart = ref(null)
   const option = ref({
+    title: {
+      subtext: props.unit, // 图表标题下方显示单位
+      // subtext: unit.value, // 图表标题下方显示单位
+      subtextStyle: {
+        fontSize: 12,
+        color: '#666',
+      },
+    },
     xAxis: {
       type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      data: ['3.1', '3.2', '3.3', '3.4', '3.5', '3.6', '3.7'],
+      axisLabel: {
+        interval: 0, // 每隔一个标签显示一次
+        show: true, // 显示 X 轴标签
+        color: '#666', // 设置字体颜色为红色
+        fontSize: 12, // 设置字体大小
+        // fontWeight: 'bold', // 设置字体加粗
+      },
+      axisLine: {
+        // show: false, // 隐藏 X 轴的线
+        alignWithLabel: true,
+        lineStyle: {
+          color: '#f2f2f2', // 设置 X 轴线的颜色为红色
+          width: 2, // 设置线的宽度
+          type: 'solid', // 设置线的类型，'solid', 'dashed', 'dotted'
+        },
+      },
+      axisTick: {
+        show: false, // 隐藏 X 轴的刻度线（短线）
+      },
+      boundaryGap: true, // 不让第一个和最后一个数据点贴着轴的两端
     },
     yAxis: {
       type: 'value',
@@ -32,8 +74,24 @@
       {
         data: [120, 200, 150, 80, 70, 110, 130],
         type: 'bar',
+        barWidth: 24, // 设置柱子的宽度为 30px
+
+        itemStyle: {
+          color: '#FFAC78', // 设置柱子的颜色为绿色
+          color: (params) => {
+            return colorList[params.dataIndex] // 根据柱子的索引设置不同的颜色
+          },
+          borderRadius: [16, 16, 0, 0], // 设置柱子的圆角，上两个角为10px，下两个角不圆角
+        },
+        // barGap: '30%',
       },
     ],
+    barCategoryGap: '100%', // 增加系列之间的间隔
+    grid: {
+      right: 0,
+      bottom: '10%',
+      // top: '10%',
+    },
   })
   function initChart() {
     // 获取 DOM 元素

src/pages/feed-statistics/feed-statistics.vue

@@ -0,0 +1,409 @@
+<route lang="json5" type="growth">
+{
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '%growth.records%',
+  },
+}
+</route>
+
+<template>
+  <view class="min-h-screen bg-white box-border">
+    <wd-navbar
+      title="统计"
+      left-arrow
+      fixed
+      :bordered="false"
+      :placeholder="true"
+      :safeAreaInsetTop="true"
+      @click-left="handleClickLeft"
+    ></wd-navbar>
+
+    <wd-tabs
+      style="--wot-tabs-nav-height: 96rpx"
+      :swipeable="true"
+      v-model="tabIndex"
+      color="#F88842"
+      @change="changeIndex"
+      inactiveColor="#666666"
+    >
+      <block class="h-full" v-for="(item, idnex) in tabList" :key="'tabs' + item.id">
+        <wd-tab :title="item.title">
+          <template v-if="tabIndex === 0">
+            <REcharts :unit="unit" />
+          </template>
+        </wd-tab>
+      </block>
+    </wd-tabs>
+
+    <!-- 提示信息区域 -->
+    <view
+      class="mx-4 px-3 py-1 mb-3 rounded-full flex items-center text-sm bg-[#F88842]/[0.2] text-[#F88842]"
+    >
+      过去 7 天平均每天喂奶 450ml
+    </view>
+
+    <!-- 数据统计区域 -->
+    <div class="grid grid-cols-3 gap-4 mx-4 mt-4">
+      <!-- 喂奶时长 -->
+      <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
+        <span class="text-2xl font-medium text-gray-900">45min</span>
+        <span class="text-sm text-gray-500 mt-1">母乳时长</span>
+      </div>
+
+      <!-- 母乳喂养量 -->
+      <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
+        <span class="text-2xl font-medium text-gray-900">450ml</span>
+        <span class="text-sm text-gray-500 mt-1">母乳喂养</span>
+      </div>
+
+      <!-- 配方奶喂养量 -->
+      <div class="bg-white rounded-lg p-4 flex flex-col items-center justify-center shadow-sm">
+        <span class="text-2xl font-medium text-gray-900">450ml</span>
+        <span class="text-sm text-gray-500 mt-1">配方奶</span>
+      </div>
+    </div>
+
+    <!-- <view v-else class="h-full flex items-center justify-center">
+                <Empty />
+              </view> -->
+    <!-- <wd-loadmore v-if="tabIndex == 0" :state="state" @reload="loadmore" /> -->
+    <wd-gap bg-color="#F2F2F2"></wd-gap>
+    <view class="p-4 flex justify-between items-center">
+      <text class="text-base">2020年12月15日</text>
+      <text class="text-xs text-[#666]">2岁4个月4天</text>
+    </view>
+
+    <RecordList :dataList="records" />
+    <!-- 悬浮添加按钮 -->
+    <view
+      @click="goToPage('')"
+      style="box-shadow: 0px 2px 12px rgba(255, 184, 137, 0.5)"
+      class="fixed right-4 bottom-25 w-12 h-12 bg-[#F88842] rounded-full flex items-center justify-center"
+    >
+      <wd-icon name="add" size="52rpx" color="white"></wd-icon>
+    </view>
+  </view>
+</template>
+<script setup>
+  import HeightItem from '@/components/height/height-item.vue'
+  import REcharts from '@/components/height/r-echarts.vue'
+  import data from '@/components/feed-wd-popup/data.json'
+  import Empty from '@/components/empty/empty.vue'
+  import { ref } from 'vue'
+  import { onLoad, onReachBottom } from '@dcloudio/uni-app'
+  import RecordList from '@/components/record-list/record-list.vue'
+  const hList = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+  const wList = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
+  const tList = [0, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52]
+
+  const tabList = ref(data)
+
+  const tabIndex = ref(0)
+
+  const xAxisData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
+  const yAxisData = ref([])
+  // const seriesData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
+  const unit = ref('(cm)')
+  const records = ref([
+    {
+      id: '0',
+      type: 1,
+      time: '13:00',
+      title: '喂奶 200ml',
+      desc: '宝宝今天胃口很好',
+
+      recorder: '妈妈 王小美',
+      // image: 'https://ai-public.mastergo.com/ai/img_res/3a46635d73b74316cd39813502beb964.jpg',
+    },
+    {
+      id: '1',
+      type: 2,
+      time: '10:00-13:00',
+      title: '母乳喂养',
+      desc: '持续了30分钟',
+      recorder: '妈妈 王小美',
+      image: 'https://ai-public.mastergo.com/ai/img_res/3d04b8dc21d0fe5f0f639f125fbd5c53.jpg',
+    },
+    {
+      id: '2',
+      type: 3,
+      time: '10:00',
+      title: '辅食 50ml',
+      desc: '今天尝试了新的米糊，宝宝很喜欢',
+      recorder: '妈妈 王小美',
+      image: '',
+    },
+  ])
+  // const parmas = ref({
+  //   pageSize: 10,
+  //   pageNum: 1,
+  // })
+
+  const state = ref('')
+  const num = ref(0)
+  const max = ref(10)
+
+  function handleClickLeft() {
+    uni.navigateBack()
+  }
+
+  function goToPage(hid) {
+    uni.navigateTo({
+      url: `/pages/height-details/height-details?id=${hid}`,
+    })
+  }
+
+  const growthRecordList = ref([])
+  // 获取生长记录
+  async function getGrowthRecordList() {
+    let data = await [
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+    ]
+
+    growthRecordList.value = data
+    // http.post('/')
+  }
+
+  function loadmore() {
+    let data = [
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+      {
+        id: 'Record',
+        date: '2025-03-07',
+        old: '2岁4个月3天',
+        height: '85.0cm',
+        weight: '3kg',
+        headC: '30cm',
+      },
+    ]
+    setTimeout(() => {
+      num.value = num.value + 3
+      growthRecordList.value.push(...data)
+      state.value = 'loading'
+    }, 200)
+  }
+
+  onReachBottom(() => {
+    if (num.value > 45) {
+      state.value = 'finished'
+    } else if (num.value < max.value) {
+      loadmore()
+    } else if (num.value === max.value) {
+      state.value = 'finished'
+    }
+  })
+  function changeIndex({ index, name }) {
+    console.log('index: ', index)
+    tabIndex.value = index
+    nextTick(() => {
+      if (index == 1) {
+        yAxisData.value = hList
+        unit.value = '(cm)'
+      }
+      if (index == 2) {
+        yAxisData.value = wList
+        unit.value = '(kg)'
+      }
+      if (index == 3) {
+        yAxisData.value = tList
+        unit.value = '(cm)'
+      }
+    })
+  }
+
+  onLoad(() => {
+    getGrowthRecordList()
+  })
+
+  const { safeAreaInsets } = uni.getSystemInfoSync()
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    line-height: 120px;
+    text-align: center;
+  }
+</style>

src/pages/feed/feed.vue

@@ -169,7 +169,9 @@
 
   // const { show: showToast } = useToast()
   function handleClickRight() {
-    // showToast('按钮')
+    uni.navigateTo({
+      url: '/pages/feed-statistics/feed-statistics',
+    })
   }
 
   function handleClickLeft() {

src/pages/growth/growth.vue

@@ -24,12 +24,13 @@
       :swipeable="true"
       v-model="tabIndex"
       color="#F88842"
+      @change="changeIndex"
       inactiveColor="#666666"
     >
       <block class="h-full" v-for="(item, idnex) in tabList" :key="'tabs' + index">
         <wd-tab :title="item">
           <template v-if="tabIndex === 0">
-            <view style="height: calc(100vh - 194rpx); border: 1px solid red" class="w-full">
+            <view style="height: calc(100vh - 194rpx)" class="w-full">
               <template v-if="growthRecordList.length">
                 <HeightItem
                   v-for="(item, index) in growthRecordList"
@@ -49,7 +50,9 @@
         </wd-tab>
       </block>
     </wd-tabs>
-    <HEcharts v-if="tabIndex === 1" />
+    <HEcharts v-if="tabIndex === 1" :yAxisData="hList" :xAxisData="xAxisData" :unit="unit" />
+    <HEcharts v-if="tabIndex === 2" :yAxisData="wList" :xAxisData="xAxisData" :unit="unit" />
+    <HEcharts v-if="tabIndex === 3" :yAxisData="tList" :xAxisData="xAxisData" :unit="unit" />
     <!-- 悬浮添加按钮 -->
     <view
       @click="goToPage('')"
@@ -68,10 +71,19 @@
   import { ref } from 'vue'
   import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 
+  const hList = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+  const wList = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
+  const tList = [0, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52]
+
   const tabList = ref(['记录列表', '身高曲线', '体重曲线', '头围曲线'])
 
   const tabIndex = ref(0)
 
+  const xAxisData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
+  const yAxisData = ref([])
+  // const seriesData = ref(['1岁', '14个月', '16个月', '1岁半', '20个月', '2岁'])
+  const unit = ref('(cm)')
+
   // const parmas = ref({
   //   pageSize: 10,
   //   pageNum: 1,
@@ -264,7 +276,7 @@
         headC: '30cm',
       },
     ]
-    data = []
+
     growthRecordList.value = data
     // http.post('/')
   }
@@ -312,6 +324,24 @@
       state.value = 'finished'
     }
   })
+  function changeIndex({ index, name }) {
+    console.log('index: ', index)
+    tabIndex.value = index
+    nextTick(() => {
+      if (index == 1) {
+        yAxisData.value = hList
+        unit.value = '(cm)'
+      }
+      if (index == 2) {
+        yAxisData.value = wList
+        unit.value = '(kg)'
+      }
+      if (index == 3) {
+        yAxisData.value = tList
+        unit.value = '(cm)'
+      }
+    })
+  }
 
   onLoad(() => {
     getGrowthRecordList()