feat: 增加数据统计页面
This commit is contained in:
@@ -1,62 +1,224 @@
|
||||
<template>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="line"
|
||||
:opts="opts"
|
||||
:chartData="chartData"
|
||||
/>
|
||||
<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 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 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 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 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 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 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 setup>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { getRecentRecords } from '@/utils/record'
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
|
||||
const chartData = ref({})
|
||||
const weightChartData = ref({
|
||||
categories: []
|
||||
})
|
||||
const sleepChartData = ref({
|
||||
categories: []
|
||||
})
|
||||
const sportChartData = ref({
|
||||
categories: []
|
||||
})
|
||||
const bloodPressureChartData = ref({
|
||||
categories: []
|
||||
})
|
||||
const bloodSugarChartData = ref({
|
||||
categories: []
|
||||
})
|
||||
const temperatureChartData = ref({
|
||||
categories: []
|
||||
})
|
||||
|
||||
const opts = {
|
||||
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||||
// 图表配置
|
||||
const chartOpts = {
|
||||
color: ['#1890FF', '#EE6666', '#91CB74', '#FAC858', '#73C0DE'],
|
||||
padding: [15, 10, 0, 15],
|
||||
enableScroll: false,
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
gridType: "dash",
|
||||
dashLength: 2
|
||||
},
|
||||
legend: { show: true },
|
||||
xAxis: { disableGrid: true },
|
||||
yAxis: { gridType: 'dash', dashLength: 2 },
|
||||
extra: {
|
||||
line: {
|
||||
type: "straight",
|
||||
width: 2,
|
||||
activeType: "hollow"
|
||||
}
|
||||
line: { type: 'straight', width: 2, activeType: 'hollow'},
|
||||
},
|
||||
}
|
||||
|
||||
function getWeightChartData() {
|
||||
const list = getRecentRecords('weight', 7)
|
||||
if (!list.length) return { categories: [], series: [] }
|
||||
|
||||
const categories = list.map((_, index) => String(index + 1))
|
||||
|
||||
weightChartData.value = {
|
||||
categories,
|
||||
series: [
|
||||
{
|
||||
name: '体重（Kg）',
|
||||
data: list.map((r) => r.value),
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function getSleepChartData() {
|
||||
const list = getRecentRecords('sleep', 7)
|
||||
if (!list.length) return { categories: [], series: [] }
|
||||
|
||||
const categories = list.map((_, index) => String(index + 1))
|
||||
|
||||
sleepChartData.value = {
|
||||
categories,
|
||||
series: [
|
||||
{
|
||||
name: '睡眠（小时）',
|
||||
data: list.map((r) => r.duration),
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function getSportChartData() {
|
||||
const list = getRecentRecords('sport', 7)
|
||||
if (!list.length) return { categories: [], series: [] }
|
||||
|
||||
const categories = list.map((_, index) => String(index + 1))
|
||||
|
||||
sportChartData.value = {
|
||||
categories,
|
||||
series: [
|
||||
{
|
||||
name: '运动（分钟）',
|
||||
data: list.map((r) => r.duration),
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function getBloodPressureChartData() {
|
||||
const list = getRecentRecords('bloodPressure', 7)
|
||||
if (!list.length) return { categories: [], series: [] }
|
||||
|
||||
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) },
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function getBloodSugarChartData() {
|
||||
const list = getRecentRecords('bloodSugar', 7)
|
||||
if (!list.length) return { categories: [], series: [] }
|
||||
|
||||
const categories = list.map((_, index) => String(index + 1))
|
||||
|
||||
bloodSugarChartData.value = {
|
||||
categories,
|
||||
series: [
|
||||
{
|
||||
name: '血糖（mmol/L）',
|
||||
data: list.map((r) => r.value),
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
function getTemperatureChartData() {
|
||||
const list = getRecentRecords('temperature', 7)
|
||||
if (!list.length) return { categories: [], series: [] }
|
||||
|
||||
const categories = list.map((_, index) => String(index + 1))
|
||||
|
||||
temperatureChartData.value = {
|
||||
categories,
|
||||
series: [
|
||||
{
|
||||
name: '体温（℃）',
|
||||
data: list.map((r) => r.value),
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
getServerData()
|
||||
getWeightChartData()
|
||||
getSleepChartData()
|
||||
getSportChartData()
|
||||
getBloodPressureChartData()
|
||||
getBloodSugarChartData()
|
||||
getTemperatureChartData()
|
||||
})
|
||||
|
||||
function getServerData() {
|
||||
setTimeout(() => {
|
||||
const res = {
|
||||
categories: ["2018","2019","2020","2021","2022","2023"],
|
||||
series: [
|
||||
{ name: "成交量A", data: [35, 8, 25, 37, 4, 20] },
|
||||
{ name: "成交量B", data: [70, 40, 65, 100, 44, 68] },
|
||||
{ name: "成交量C", data: [100, 80, 95, 150, 112, 132] }
|
||||
]
|
||||
}
|
||||
chartData.value = res
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user