health-mp/src/pages/stats/index.vue

<template>
  <view class="min-h-screen flex flex-col bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
    <view class="self-center py-3 flex items-center gap-2 text-gray-800">
      <view class="flex min-w-0 flex-col">
        <text class="truncate text-lg text-white font-semibold">
          最近7次趋势
        </text>
      </view>
    </view>

    <wd-card v-if="profileStore.statsList.includes('weight')" title="体重">
      <qiun-data-charts
          v-if="weightChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="weightChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>

    <wd-card v-if="profileStore.statsList.includes('sleep')" title="睡眠">
      <qiun-data-charts
          v-if="sleepChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="sleepChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>

    <wd-card v-if="profileStore.statsList.includes('sport')" title="运动">
      <qiun-data-charts
          v-if="sportChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="sportChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>

    <wd-card v-if="profileStore.statsList.includes('bloodPressure')" title="血压">
      <qiun-data-charts
          v-if="bloodPressureChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="bloodPressureChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>

    <wd-card v-if="profileStore.statsList.includes('bloodPressure')" title="心率">
      <qiun-data-charts
          v-if="heartRateChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="heartRateChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>

    <wd-card v-if="profileStore.statsList.includes('bloodSugar')" title="血糖">
      <qiun-data-charts
          v-if="bloodSugarChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="bloodSugarChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>

    <wd-card v-if="profileStore.statsList.includes('temperature')" title="体温">
      <qiun-data-charts
          v-if="temperatureChartData.categories?.length"
          type="line"
          :opts="chartOpts"
          :chartData="temperatureChartData"
      />

      <wd-empty v-else icon="no-content" tip="暂无记录" />
    </wd-card>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getRecentRecords } from '@/utils/record'
import { onShow } from "@dcloudio/uni-app";
import { useProfileStore } from '@/store/profile'
import { getStats } from "@/utils/profile";

const profileStore = useProfileStore()

const weightChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})
const sleepChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})
const sportChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})
const bloodPressureChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})
const heartRateChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})
const bloodSugarChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})
const temperatureChartData = ref({
  categories: [] as string[],
  series: [] as any[]
})

// 图表配置
const chartOpts = {
  color: ['#1890FF', '#EE6666', '#91CB74', '#FAC858', '#73C0DE'],
  padding: [15, 10, 0, 15],
  enableScroll: false,
  legend: { show: true },
  xAxis: { disableGrid: true },
  yAxis: {
    gridType: 'dash',
    dashLength: 2,
    data: [
      { min: 0, format: (val: number) => val.toFixed(1) }
    ]
  },
  extra: {
    line: { type: 'straight', width: 2, activeType: 'hollow'},
  },
}

function getWeightChartData() {
  const list = getRecentRecords('weight', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    weightChartData.value = {
      categories,
      series: [
        {
          name: '体重（Kg）',
          data: list.map((r) => r.value),
        },
      ],
    }
  } else {
    weightChartData.value = {
      categories: [], series: []
    }
  }
}

function getSleepChartData() {
  const list = getRecentRecords('sleep', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    sleepChartData.value = {
      categories,
      series: [
        {
          name: '睡眠（小时）',
          data: list.map((r) => r.duration),
        },
      ],
    }
  } else {
    sleepChartData.value = {
      categories: [], series: []
    }
  }
}

function getSportChartData() {
  const list = getRecentRecords('sport', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    sportChartData.value = {
      categories,
      series: [
        {
          name: '运动（分钟）',
          data: list.map((r) => r.duration),
        },
      ],
    }
  } else {
    sportChartData.value = {
      categories: [], series: []
    }
  }
}

function getBloodPressureChartData() {
  const list = getRecentRecords('bloodPressure', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    bloodPressureChartData.value = {
      categories,
      series: [
        { name: '收缩压（mmHg）', data: list.map((r) => r.systolic) },
        { name: '舒张压（mmHg）', data: list.map((r) => r.diastolic) },
      ],
    }
  } else {
    bloodPressureChartData.value = {
      categories: [], series: []
    }
  }
}

function getHeartRateChartData() {
  const list = getRecentRecords('bloodPressure', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    heartRateChartData.value = {
      categories,
      series: [
        { name: '心率（bpm）', data: list.map((r) => r.heartRate) },
      ],
    }
  } else {
    heartRateChartData.value = {
      categories: [], series: []
    }
  }
}

function getBloodSugarChartData() {
  const list = getRecentRecords('bloodSugar', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    bloodSugarChartData.value = {
      categories,
      series: [
        {
          name: '血糖（mmol/L）',
          data: list.map((r) => r.value),
        },
      ],
    }
  } else {
    bloodSugarChartData.value = {
      categories: [], series: []
    }
  }
}

function getTemperatureChartData() {
  const list = getRecentRecords('temperature', 7)

  if (list.length) {
    const categories = list.map((_, index) => String(index + 1))

    temperatureChartData.value = {
      categories,
      series: [
        {
          name: '体温（℃）',
          data: list.map((r) => r.value),
        },
      ],
    }
  } else {
    temperatureChartData.value = {
      categories: [], series: []
    }
  }
}

onShow(() => {
  profileStore.statsList = getStats()
  getWeightChartData()
  getSleepChartData()
  getSportChartData()
  getBloodPressureChartData()
  getHeartRateChartData()
  getBloodSugarChartData()
  getTemperatureChartData()
})
</script>