feat:增加健康统计图表功能

src/views/health/calendar.vue

@@ -12,14 +12,15 @@
 <script lang="ts" setup>
 import HealthForm from '@/components/Health/HealthForm.vue'
 import { CalendarDay } from 'v-calendar/dist/types/src/utils/page'
-import { formatDate, getStartEndDate } from 'vue3-common/utils/dateUtil'
-import { onMounted, reactive, watch } from 'vue'
+import { formatDate } from 'vue3-common/utils/dateUtil'
+import { onMounted, reactive, ref, watch } from 'vue'
 import { useHealthStore } from '@/store/health'
 import { useAppStore } from '@/store/app.ts'
 import { IHealth } from '@/types/health'
 
 const healthStore = useHealthStore()
 const appStore = useAppStore()
+const calendarRef = ref()
 
 const dailyInfo = reactive({
   calendarDate: '',
@@ -32,10 +33,9 @@ watch(() => healthStore.isRefresh, () => {
 })
 
 onMounted(async () => {
-  const result = getStartEndDate(formatDate(new Date()), 'month')
-  healthStore.queryInfo = { startDate: result[0], endDate: result[1] }
-
+  calendarRef.value.move(new Date(healthStore.queryMonth))
   await healthStore.refreshInfo()
+
   healthStore.selectDate = formatDate(new Date())
   healthStore.currentHealth = healthStore.getHealthDay(formatDate(new Date()))
 })
@@ -58,9 +58,7 @@ const dateClick = (day: CalendarDay) => {
  * 选择月份事件
  */
 const changeMonthClick = async (value) => {
-  const result = getStartEndDate(value[0].id, 'month')
-  healthStore.queryInfo = { startDate: result[0], endDate: result[1] }
-
+  healthStore.queryMonth = value[0].id
   await healthStore.refreshInfo()
 }
 </script>

src/views/health/chart.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="mobile-bill-view common-mobile-view">
+    <el-date-picker v-model="healthStore.queryMonth"
+                    type="month" :editable="false" style="width: 120px;"
+                    @change="changeDateEvent"/>
+
+    <health-stats />
+    <health-chart />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import HealthStats from '@/components/Health/HealthStats.vue'
+import HealthChart from '@/components/Health/HealthChart.vue'
+import { onMounted } from 'vue'
+import { useHealthStore } from '@/store/health'
+
+const healthStore = useHealthStore()
+
+onMounted(async () => {
+  await healthStore.refreshInfo()
+})
+
+const changeDateEvent = async () => {
+  await healthStore.refreshInfo()
+}
+</script>
+
+<style lang="scss">
+@use "@/styles/home/bill.mobile.module";
+</style>

src/views/meta.ts

@@ -89,6 +89,10 @@ export const mobileHomeMeta: IRouteMetaConfig = {
     title: '记录',
     icon: ''
   },
+  '/health/chart': {
+    title: '统计',
+    icon: ''
+  },
   '/plan': {
     title: '时光日程',
     icon: 'home-calendar',