feat:增加健康模块睡眠时间监控

src/components/Bill/BillChart.vue

@@ -42,6 +42,7 @@ import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/
 import { useBillStore } from '@/store/bill.ts'
 import { useAppStore } from '@/store/app.ts'
 import { isMobile } from 'vue3-common/utils/layoutUtil'
+import { formatDate } from 'vue3-common/utils/dateUtil'
 
 const billStore = useBillStore()
 const appStore = useAppStore()
@@ -68,7 +69,9 @@ const updateChart = () => {
   const MAX_CATEGORY_COUNT = 5
 
   // 收支统计图
-  const dailyXAxis = billStore.billDateStatsList.map((item) => item.name)
+  const dailyXAxis = billStore.billDateStatsList.map((item) => {
+    return formatDate(item.name, 'MM-DD')
+  })
   const dailyYAxis = billStore.billDateStatsList.map((item) => item.value)
   billDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '金额（元）', dailyYAxis))
   billDailyChart.setOption({

src/components/Health/HealthChart.vue

@@ -9,6 +9,13 @@
       <div class="chart" ref="weightDailyChartRef"/>
     </div>
 
+    <div class="chart-container card-item">
+      <div class="content">
+        <span class="title">📊睡眠时长统计图</span>
+      </div>
+      <div class="chart" ref="sleepDailyChartRef"/>
+    </div>
+
     <div class="chart-container card-item">
       <div class="content">
         <span class="title">📊运动时长统计</span>
@@ -31,15 +38,18 @@ import * as echarts from 'echarts'
 import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
 import { useHealthStore } from '@/store/health'
 import { useAppStore } from '@/store/app.ts'
+import { formatDate } from 'vue3-common/utils/dateUtil'
 
 const healthStore = useHealthStore()
 const appStore = useAppStore()
 
 const weightDailyChartRef = ref<HTMLElement>()
+const sleepDailyChartRef = ref<HTMLElement>()
 const healthDurationChartRef = ref<HTMLElement>()
 const healthCategoryChartRef = ref<HTMLElement>()
 
 let weightDailyChart: echarts.ECharts
+let sleepDailyChart: echarts.ECharts
 let healthDurationChart: echarts.ECharts
 let healthCategoryChart: echarts.ECharts
 
@@ -49,6 +59,7 @@ watch(() => healthStore.isRefresh, () => {
 
 onMounted(() => {
   weightDailyChart = echarts.init(weightDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
+  sleepDailyChart = echarts.init(sleepDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   healthDurationChart = echarts.init(healthDurationChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
   healthCategoryChart = echarts.init(healthCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
 })
@@ -57,9 +68,15 @@ const updateChart = () => {
   const MAX_CATEGORY_COUNT = 5
 
   // 体重趋势统计图
-  const weightXAxis = healthStore.healthRecordList.map((item) => item.date).reverse()
-  const weightYAxis = healthStore.healthRecordList.map((item) => item.weight).reverse()
-  const sortedRecordList = healthStore.healthRecordList.sort((a, b) => a.weight - b.weight)
+  const weightRecordList = healthStore.healthRecordList
+    .filter((item) => item.weight !== 0)
+
+  const weightXAxis = weightRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
+  const weightYAxis = weightRecordList.map((item) => item.weight).reverse()
+  const sortedRecordList = weightRecordList.sort((a, b) => a.weight - b.weight)
+
   weightDailyChart.setOption(lineChartOptions('日期', weightXAxis, '体重（千克）', weightYAxis))
   weightDailyChart.setOption({
     yAxis: {
@@ -68,10 +85,28 @@ const updateChart = () => {
     }
   })
 
+  // 睡眠时长统计图
+  const sleepRecordList = healthStore.healthRecordList
+    .filter((item) => item.sleepDuration !== null)
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+
+  const sleepXAxis = sleepRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
+  const sleepYAxis = sleepRecordList.map((item) => item.sleepDuration).reverse() as number[]
+
+  sleepDailyChart.setOption(barChartOptions('日期', sleepXAxis, '时间（小时）', sleepYAxis))
+
   // 运动量统计图
-  const sportRecordList = healthStore.healthRecordList.filter((item) => item.sportProject !== '')
-  const durationXAxis = sportRecordList.map((item) => item.date).reverse()
+  const sportRecordList = healthStore.healthRecordList
+    .filter((item) => item.sportProject !== '')
+    .sort((a, b) => (a.date > b.date ? -1 : 1))
+
+  const durationXAxis = sportRecordList.map((item) => {
+    return formatDate(item.date, 'MM-DD')
+  }).reverse()
   const durationYAxis = sportRecordList.map((item) => item.sportDuration).reverse()
+
   healthDurationChart.setOption(barChartOptions('日期', durationXAxis, '时间（分钟）', durationYAxis))
 
   // 类别统计图

src/components/Health/HealthForm.vue

@@ -49,6 +49,40 @@
       <span style="margin-left: 5px;">千克</span>
     </el-form-item>
 
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-moon"></i>
+        <span>睡眠开始时间</span>
+      </template>
+
+      <el-date-picker
+          v-model="healthStore.currentHealth.sleepStartTime"
+          type="datetime" clearable
+          placeholder="选择时间"
+          style="width: 180px"
+          format="YYYY-MM-DD HH:mm"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @clear="healthStore.currentHealth.sleepStartTime = ''"
+      />
+    </el-form-item>
+
+    <el-form-item>
+      <template #label>
+        <i class="fa-solid fa-sun"></i>
+        <span>睡眠结束时间</span>
+      </template>
+
+      <el-date-picker
+          v-model="healthStore.currentHealth.sleepEndTime"
+          type="datetime" clearable
+          placeholder="选择时间"
+          style="width: 180px"
+          format="YYYY-MM-DD HH:mm"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @clear="healthStore.currentHealth.sleepEndTime = ''"
+      />
+    </el-form-item>
+
     <el-form-item style="align-self: center;">
       <el-button type="primary" @click="onSubmit"
                  :disabled="isBeforeDate(formatDate(new Date()), healthStore.selectDate)">
@@ -68,8 +102,10 @@ const healthStore = useHealthStore()
 const projectList = ['羽毛球', '乒乓球', '跑步', '其他']
 
 const onSubmit = async () => {
-  const { sportProject, sportDuration, weight } = healthStore.currentHealth
-  if (sportProject === '' && sportDuration === 0 && weight === 0) {
+  const { sportProject, sportDuration, weight,
+    sleepStartTime, sleepEndTime } = healthStore.currentHealth
+  if (sportProject === '' && sportDuration === 0 && weight === 0
+      && sleepStartTime === '' && sleepEndTime === '') {
     return
   }
 
@@ -80,6 +116,11 @@ const onSubmit = async () => {
     }
   }
 
+  if (sleepStartTime && sleepEndTime && !sleepStartTime && sleepEndTime) {
+    ElMessage.error('睡眠结束时间应大于睡眠开始时间')
+    return
+  }
+
   await healthStore.updateHealthDay()
   healthStore.currentHealth = healthStore.getHealthDay(healthStore.selectDate)
 }