431b72d49a
- 日期/时间/次数选择器统一改为底部弹出Cupertino滚轮，无单位标签，双横线选区 - App更名为"小脉健康"，副标题"血管病患者的AI健康管理助手" - 健康仪表盘及侧边栏移除体重指标，侧边栏背景改为蓝白渐变 - 健康档案按钮移入功能入口网格，与其他入口样式统一 - 记数据智能体配色改为绿色渐变(#A1FFCE→#69DB8F) - 隐私协议/关于页从Text改为MarkdownBody正确渲染 - 运动计划/饮食记录卡片添加边框和阴影 - 服药次数从chip改为滚轮选择器 - 日期显示格式统一为空格分隔(1999 01 01) - 健康档案页背景改为纯白
680 lines
23 KiB
Dart
680 lines
23 KiB
Dart
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import '../../core/app_colors.dart';
|
|
import '../../core/app_theme.dart';
|
|
import '../../providers/auth_provider.dart';
|
|
import '../../providers/data_providers.dart';
|
|
|
|
/// 健康概览趋势页 — 五大指标合到一个页面
|
|
class TrendPage extends ConsumerStatefulWidget {
|
|
final String? metricType; // 可选初始选中指标
|
|
const TrendPage({super.key, this.metricType});
|
|
|
|
@override
|
|
ConsumerState<TrendPage> createState() => _TrendPageState();
|
|
}
|
|
|
|
class _TrendPageState extends ConsumerState<TrendPage> {
|
|
String _selected = 'blood_pressure';
|
|
List<Map<String, dynamic>> _allRecords = [];
|
|
List<Map<String, dynamic>> _filtered = [];
|
|
bool _loading = true;
|
|
|
|
static const _metrics = [
|
|
{'key': 'blood_pressure', 'label': '血压', 'color': Color(0xFFEF4444)},
|
|
{'key': 'heart_rate', 'label': '心率', 'color': Color(0xFFF59E0B)},
|
|
{'key': 'glucose', 'label': '血糖', 'color': Color(0xFF4F6EF7)},
|
|
{'key': 'spo2', 'label': '血氧', 'color': Color(0xFF20C997)},
|
|
];
|
|
|
|
static const _units = {
|
|
'blood_pressure': 'mmHg',
|
|
'heart_rate': 'bpm',
|
|
'glucose': 'mmol/L',
|
|
'spo2': '%',
|
|
};
|
|
|
|
static const _names = {
|
|
'blood_pressure': '血压',
|
|
'heart_rate': '心率',
|
|
'glucose': '血糖',
|
|
'spo2': '血氧',
|
|
};
|
|
|
|
String get _unit => _units[_selected] ?? '';
|
|
String get _name => _names[_selected] ?? '';
|
|
bool get _isBP => _selected == 'blood_pressure';
|
|
Color get _color =>
|
|
_metrics.firstWhere((m) => m['key'] == _selected)['color'] as Color;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
if (widget.metricType != null) _selected = widget.metricType!;
|
|
_loadAll();
|
|
}
|
|
|
|
Future<void> _loadAll() async {
|
|
setState(() => _loading = true);
|
|
try {
|
|
final api = ref.read(apiClientProvider);
|
|
final types = ['BloodPressure', 'HeartRate', 'Glucose', 'SpO2'];
|
|
final all = <Map<String, dynamic>>[];
|
|
for (final t in types) {
|
|
try {
|
|
final res = await api.get(
|
|
'/api/health-records/trend',
|
|
queryParameters: {'type': t, 'period': 365},
|
|
);
|
|
final list =
|
|
(res.data['data'] as List?)?.cast<Map<String, dynamic>>() ?? [];
|
|
for (final r in list) {
|
|
all.add({
|
|
'id': r['id'],
|
|
'type': t,
|
|
'date':
|
|
DateTime.tryParse(r['recordedAt']?.toString() ?? '') ??
|
|
DateTime.now(),
|
|
'systolic': r['systolic'],
|
|
'diastolic': r['diastolic'],
|
|
'value': r['value'],
|
|
'unit': r['unit'] ?? '',
|
|
'isAbnormal': r['isAbnormal'] == true,
|
|
});
|
|
}
|
|
} catch (e) {
|
|
debugPrint('[Trend] 加载趋势失败: $e');
|
|
}
|
|
}
|
|
all.sort(
|
|
(a, b) => (b['date'] as DateTime).compareTo(a['date'] as DateTime),
|
|
);
|
|
if (mounted) {
|
|
setState(() {
|
|
_allRecords = all;
|
|
_loading = false;
|
|
});
|
|
_filter();
|
|
}
|
|
} catch (_) {
|
|
if (mounted) setState(() => _loading = false);
|
|
}
|
|
}
|
|
|
|
void _filter() {
|
|
final typeName = _selected == 'blood_pressure'
|
|
? 'BloodPressure'
|
|
: _selected == 'heart_rate'
|
|
? 'HeartRate'
|
|
: _selected == 'glucose'
|
|
? 'Glucose'
|
|
: 'SpO2';
|
|
setState(() {
|
|
_filtered = _allRecords.where((r) => r['type'] == typeName).toList();
|
|
_filtered.sort(
|
|
(a, b) => (a['date'] as DateTime).compareTo(b['date'] as DateTime),
|
|
);
|
|
});
|
|
}
|
|
|
|
void _switchMetric(String key) {
|
|
setState(() => _selected = key);
|
|
_filter();
|
|
}
|
|
|
|
// ---- 手动录入 ----
|
|
void _showAddDialog() {
|
|
final ctrl1 = TextEditingController();
|
|
final ctrl2 = TextEditingController();
|
|
showModalBottomSheet(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
shape: const RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
|
),
|
|
builder: (ctx) => Padding(
|
|
padding: EdgeInsets.only(
|
|
bottom: MediaQuery.of(ctx).viewInsets.bottom,
|
|
left: 20,
|
|
right: 20,
|
|
top: 20,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
'录入$_name',
|
|
style: const TextStyle(fontSize: 21, fontWeight: FontWeight.w700),
|
|
),
|
|
const SizedBox(height: 16),
|
|
if (_isBP) ...[
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
controller: ctrl1,
|
|
keyboardType: TextInputType.number,
|
|
decoration: const InputDecoration(
|
|
labelText: '收缩压 (mmHg)',
|
|
border: OutlineInputBorder(),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: TextField(
|
|
controller: ctrl2,
|
|
keyboardType: TextInputType.number,
|
|
decoration: const InputDecoration(
|
|
labelText: '舒张压 (mmHg)',
|
|
border: OutlineInputBorder(),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
] else
|
|
TextField(
|
|
controller: ctrl1,
|
|
keyboardType: TextInputType.number,
|
|
decoration: InputDecoration(
|
|
labelText: '$_name ($_unit)',
|
|
border: const OutlineInputBorder(),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: () async {
|
|
final v1 = double.tryParse(ctrl1.text.trim());
|
|
if (v1 == null) return;
|
|
try {
|
|
final api = ref.read(apiClientProvider);
|
|
final body = <String, dynamic>{
|
|
'type': _selected == 'blood_pressure'
|
|
? 'BloodPressure'
|
|
: _selected == 'heart_rate'
|
|
? 'HeartRate'
|
|
: _selected == 'glucose'
|
|
? 'Glucose'
|
|
: 'SpO2',
|
|
'source': 'Manual',
|
|
'recordedAt': DateTime.now().toUtc().toIso8601String(),
|
|
'unit': _unit,
|
|
};
|
|
if (_isBP) {
|
|
body['systolic'] = v1.toInt();
|
|
body['diastolic'] = int.tryParse(ctrl2.text.trim()) ?? 0;
|
|
} else {
|
|
body['value'] = v1;
|
|
}
|
|
await api.post('/api/health-records', data: body);
|
|
if (!ctx.mounted || !mounted) {
|
|
return;
|
|
}
|
|
Navigator.pop(ctx);
|
|
ref.invalidate(latestHealthProvider);
|
|
_loadAll();
|
|
} catch (_) {
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
ScaffoldMessenger.of(
|
|
context,
|
|
).showSnackBar(const SnackBar(content: Text('录入失败')));
|
|
}
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: _color,
|
|
foregroundColor: Colors.white,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
padding: const EdgeInsets.symmetric(vertical: 14),
|
|
),
|
|
child: const Text('确认录入', style: TextStyle(fontSize: 19)),
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GradientScaffold(
|
|
appBar: AppBar(title: const Text('健康概览'), centerTitle: true),
|
|
floatingActionButton: FloatingActionButton(
|
|
onPressed: _showAddDialog,
|
|
backgroundColor: _color,
|
|
child: const Icon(Icons.add),
|
|
),
|
|
body: _loading
|
|
? const Center(
|
|
child: CircularProgressIndicator(color: AppTheme.primary),
|
|
)
|
|
: RefreshIndicator(
|
|
onRefresh: _loadAll,
|
|
child: SingleChildScrollView(
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
padding: const EdgeInsets.all(14),
|
|
child: Column(
|
|
children: [
|
|
_buildMetricTabs(),
|
|
const SizedBox(height: 16),
|
|
_buildChart(),
|
|
const SizedBox(height: 20),
|
|
_buildHistory(),
|
|
const SizedBox(height: 80),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ---- 指标选择标签 ----
|
|
Widget _buildMetricTabs() {
|
|
return SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: _metrics.map((m) {
|
|
final key = m['key'] as String;
|
|
final color = m['color'] as Color;
|
|
final sel = _selected == key;
|
|
return GestureDetector(
|
|
onTap: () => _switchMetric(key),
|
|
child: Container(
|
|
margin: const EdgeInsets.only(right: 8),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: sel ? color : Colors.white,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: Border.all(color: sel ? color : AppColors.border),
|
|
),
|
|
child: Text(
|
|
m['label'] as String,
|
|
style: TextStyle(
|
|
fontSize: 17,
|
|
fontWeight: FontWeight.w600,
|
|
color: sel ? Colors.white : AppColors.textSecondary,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ---- 趋势图 ----
|
|
Widget _buildChart() {
|
|
if (_filtered.isEmpty) {
|
|
return Container(
|
|
height: 220,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: AppColors.border),
|
|
boxShadow: AppColors.cardShadowLight,
|
|
),
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.show_chart,
|
|
size: 48,
|
|
color: AppColors.textHint.withValues(alpha: 0.45),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'暂无$_name数据',
|
|
style: const TextStyle(color: AppColors.textHint),
|
|
),
|
|
const SizedBox(height: 4),
|
|
const Text(
|
|
'点击右下角 + 手动录入',
|
|
style: TextStyle(fontSize: 15, color: AppColors.textHint),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
final spots = <FlSpot>[];
|
|
double minV = double.infinity, maxV = double.negativeInfinity;
|
|
for (int i = 0; i < _filtered.length; i++) {
|
|
final r = _filtered[i];
|
|
final v = _isBP
|
|
? (r['systolic'] as num?)?.toDouble()
|
|
: (r['value'] as num?)?.toDouble();
|
|
if (v == null) continue;
|
|
if (v < minV) minV = v;
|
|
if (v > maxV) maxV = v;
|
|
spots.add(FlSpot(i.toDouble(), v));
|
|
}
|
|
|
|
if (spots.isEmpty) return const SizedBox.shrink();
|
|
final range = maxV - minV;
|
|
final padding = range * 0.15;
|
|
if (padding < 1) {
|
|
minV -= 5;
|
|
maxV += 5;
|
|
} else {
|
|
minV -= padding;
|
|
maxV += padding;
|
|
}
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.fromLTRB(8, 20, 16, 12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: AppColors.border),
|
|
boxShadow: AppColors.cardShadowLight,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
_name,
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: _color,
|
|
),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
'趋势 (${_filtered.length}条)',
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
'单位: $_unit',
|
|
style: const TextStyle(fontSize: 14, color: AppColors.textHint),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
SizedBox(
|
|
height: 200,
|
|
child: LineChart(
|
|
LineChartData(
|
|
minX: 0,
|
|
maxX: (spots.length - 1).toDouble(),
|
|
minY: minV,
|
|
maxY: maxV,
|
|
gridData: FlGridData(
|
|
show: true,
|
|
drawVerticalLine: false,
|
|
horizontalInterval: range > 50
|
|
? 10
|
|
: range > 20
|
|
? 5
|
|
: range > 5
|
|
? 2
|
|
: 1,
|
|
),
|
|
borderData: FlBorderData(show: false),
|
|
titlesData: FlTitlesData(
|
|
leftTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 40,
|
|
getTitlesWidget: (v, meta) => Text(
|
|
v.toStringAsFixed(v.truncateToDouble() == v ? 0 : 1),
|
|
style: const TextStyle(
|
|
fontSize: 13,
|
|
color: AppColors.textHint,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
reservedSize: 24,
|
|
interval: spots.length > 30
|
|
? 7
|
|
: spots.length > 14
|
|
? 3
|
|
: 1,
|
|
getTitlesWidget: (v, meta) {
|
|
final idx = v.toInt();
|
|
if (idx < 0 || idx >= _filtered.length) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
final d = _filtered[idx]['date'] as DateTime;
|
|
return Text(
|
|
'${d.month}/${d.day}',
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
color: AppColors.textHint,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
topTitles: const AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
rightTitles: const AxisTitles(
|
|
sideTitles: SideTitles(showTitles: false),
|
|
),
|
|
),
|
|
lineBarsData: [
|
|
LineChartBarData(
|
|
spots: spots,
|
|
isCurved: true,
|
|
color: _color,
|
|
barWidth: 2.5,
|
|
dotData: FlDotData(
|
|
show: spots.length <= 60,
|
|
getDotPainter: (spot, _, _, _) => FlDotCirclePainter(
|
|
radius: 3,
|
|
color: _color,
|
|
strokeWidth: 1,
|
|
strokeColor: Colors.white,
|
|
),
|
|
),
|
|
belowBarData: BarAreaData(
|
|
show: true,
|
|
color: _color.withAlpha(20),
|
|
),
|
|
),
|
|
],
|
|
lineTouchData: LineTouchData(
|
|
touchTooltipData: LineTouchTooltipData(
|
|
getTooltipItems: (spots) => spots.map((s) {
|
|
final idx = s.x.toInt();
|
|
if (idx < 0 || idx >= _filtered.length) return null;
|
|
final r = _filtered[idx];
|
|
final d = r['date'] as DateTime;
|
|
final v = _isBP
|
|
? '${r['systolic']}/${r['diastolic']}'
|
|
: '${r['value']}';
|
|
return LineTooltipItem(
|
|
'${d.month}/${d.day} ${d.hour}:${d.minute.toString().padLeft(2, '0')}\n$v $_unit',
|
|
TextStyle(
|
|
color: _color,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// ---- 历史记录列表 ----
|
|
Widget _buildHistory() {
|
|
if (_filtered.isEmpty) return const SizedBox.shrink();
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
const Text(
|
|
'历史记录',
|
|
style: TextStyle(fontSize: 19, fontWeight: FontWeight.w700),
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
'${_filtered.length}条',
|
|
style: const TextStyle(
|
|
fontSize: 16,
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
..._filtered.reversed.take(30).map((r) {
|
|
final date = r['date'] as DateTime;
|
|
final abnormal = r['isAbnormal'] == true;
|
|
final id = r['id']?.toString() ?? '';
|
|
String display;
|
|
if (_isBP) {
|
|
display = '${r['systolic'] ?? '--'}/${r['diastolic'] ?? '--'}';
|
|
} else {
|
|
display = '${r['value'] ?? '--'}';
|
|
}
|
|
return Dismissible(
|
|
key: Key(id),
|
|
direction: DismissDirection.endToStart,
|
|
background: Container(
|
|
margin: const EdgeInsets.only(bottom: 6),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.error,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
alignment: Alignment.centerRight,
|
|
padding: const EdgeInsets.only(right: 20),
|
|
child: const Icon(Icons.delete_outline, color: Colors.white),
|
|
),
|
|
confirmDismiss: (_) async {
|
|
try {
|
|
final api = ref.read(apiClientProvider);
|
|
await api.delete('/api/health-records/$id');
|
|
setState(() {
|
|
_allRecords.removeWhere((x) => x['id']?.toString() == id);
|
|
_filtered.removeWhere((x) => x['id']?.toString() == id);
|
|
});
|
|
return true;
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
},
|
|
child: Container(
|
|
margin: const EdgeInsets.only(bottom: 6),
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: AppColors.border),
|
|
boxShadow: AppColors.cardShadowLight,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: _color.withAlpha(20),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
_getMetricIcon(_selected),
|
|
style: const TextStyle(fontSize: 21),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'${date.month}月${date.day}日 ${date.hour}:${date.minute.toString().padLeft(2, '0')}',
|
|
style: const TextStyle(
|
|
fontSize: 15,
|
|
color: AppColors.textHint,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
'$display $_unit',
|
|
style: TextStyle(
|
|
fontSize: 23,
|
|
fontWeight: FontWeight.w700,
|
|
color: abnormal
|
|
? AppColors.error
|
|
: AppColors.textPrimary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (abnormal)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 3,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.errorLight,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: const Text(
|
|
'异常',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: AppColors.error,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
],
|
|
);
|
|
}
|
|
|
|
String _getMetricIcon(String key) {
|
|
switch (key) {
|
|
case 'blood_pressure':
|
|
return '🫀';
|
|
case 'heart_rate':
|
|
return '💓';
|
|
case 'glucose':
|
|
return '🩸';
|
|
case 'spo2':
|
|
return '🫁';
|
|
default:
|
|
return '📊';
|
|
}
|
|
}
|
|
}
|