fix(health): 趋势图数据不显示 — 后端 DTO 元组→结构体 + 前端解包修复

- 后端 IndicatorTimeseriesResp.data 从 Vec<(NaiveDate, f64)> 改为 Vec<DataPoint> 解决 JSON 序列化为数组而非对象导致前端无法识别的问题 - 前端 VitalSignsChart 正确解包 API 返回的 { indicator, data } 响应结构 - 移除趋势图无用的指标下拉选择器，固定显示收缩压(晨)趋势 - 修复 PatientDetail Card body padding 三层嵌套空白问题
2026-04-26 09:35:05 +08:00
parent 6c60be0047
commit 1f8fd0465d
4 changed files with 60 additions and 105 deletions
--- a/apps/web/src/pages/health/PatientDetail.tsx
+++ b/apps/web/src/pages/health/PatientDetail.tsx
@@ -142,6 +142,7 @@ export default function PatientDetail() {

  return (
    <div>
+      <style>{`.patient-detail-tabs-card .ant-card-body { padding: 0 !important; }`}</style>
      {/* 顶部导航 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <Button
@@ -216,10 +217,10 @@ export default function PatientDetail() {
        </Descriptions>
      </Card>

-      {/* 标签页 */}
-      <Card style={cardStyle}>
+      <Card style={cardStyle} className="patient-detail-tabs-card">
        <Tabs
          defaultActiveKey="info"
+          style={{ paddingLeft: 16, paddingRight: 16 }}
          items={[
            {
              key: 'info',
@@ -272,6 +273,7 @@ export default function PatientDetail() {
              children: id ? (
                <Tabs
                  defaultActiveKey="vital"
+                  size="small"
                  items={[
                    { key: 'vital', label: '体征数据', children: <VitalSignsTab patientId={id} /> },
                    { key: 'lab', label: '化验报告', children: <LabReportsTab patientId={id} /> },
--- a/apps/web/src/pages/health/components/VitalSignsChart.tsx
+++ b/apps/web/src/pages/health/components/VitalSignsChart.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Line } from '@ant-design/charts';
-import { Spin, Select, Alert, Typography } from 'antd';
+import { Spin, Alert, Typography } from 'antd';
 import { LineChartOutlined } from '@ant-design/icons';
 import { healthDataApi } from '../../../api/health/healthData';

@@ -8,129 +8,86 @@ const { Text } = Typography;

 interface Props {
  patientId: string;
-  indicator?: string;
 }

-const INDICATORS = [
-  { value: 'systolic_bp_morning', label: '收缩压(晨)' },
-  { value: 'diastolic_bp_morning', label: '舒张压(晨)' },
-  { value: 'heart_rate', label: '心率' },
-  { value: 'weight', label: '体重' },
-  { value: 'blood_sugar', label: '血糖' },
-];
+const DEFAULT_INDICATOR = 'systolic_bp_morning';
+const UNIT = 'mmHg';
+const LABEL = '收缩压(晨)';

-const INDICATOR_UNITS: Record<string, string> = {
-  systolic_bp_morning: 'mmHg',
-  diastolic_bp_morning: 'mmHg',
-  heart_rate: 'bpm',
-  weight: 'kg',
-  blood_sugar: 'mmol/L',
-};
-
-export function VitalSignsChart({ patientId, indicator: initialIndicator }: Props) {
-  const [indicator, setIndicator] = useState(initialIndicator ?? 'systolic_bp_morning');
+export function VitalSignsChart({ patientId }: Props) {
  const [data, setData] = useState<{ date: string; value: number }[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
-    if (!patientId || !indicator) return;
+    if (!patientId) return;
    setLoading(true);
    setError(false);
    healthDataApi
-      .getIndicatorTimeseries(patientId, indicator)
-      .then(setData)
+      .getIndicatorTimeseries(patientId, DEFAULT_INDICATOR)
+      .then((res) => {
+        const raw = (res as { data?: { date: string; value: number }[] })?.data;
+        const points = Array.isArray(res) ? res : Array.isArray(raw) ? raw : [];
+        setData(points.filter((d) => d?.value != null));
+      })
      .catch(() => setError(true))
      .finally(() => setLoading(false));
-  }, [patientId, indicator]);
-
-  const unit = INDICATOR_UNITS[indicator] ?? '';
-
-  // 头部：选择器 + 最新值摘要
-  const latestValue = data.length > 0 ? data[data.length - 1].value : null;
-
-  const renderHeader = () => (
-    <div style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginBottom: 12,
-    }}>
-      <Select
-        value={indicator}
-        onChange={setIndicator}
-        options={INDICATORS}
-        style={{ width: 160 }}
-        size="small"
-      />
-      {latestValue != null && (
-        <Text type="secondary" style={{ fontSize: 13 }}>
-          最新：{latestValue} {unit}
-        </Text>
-      )}
-    </div>
-  );
+  }, [patientId]);

  if (loading) {
    return (
-      <div style={{ height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Spin size="small" />
      </div>
    );
  }

  if (error) {
-    return (
-      <div>
-        {renderHeader()}
-        <Alert type="error" message="加载数据失败" showIcon style={{ borderRadius: 8 }} />
-      </div>
-    );
+    return <Alert type="error" message="加载趋势数据失败" showIcon style={{ borderRadius: 8 }} />;
  }

  if (data.length === 0) {
    return (
-      <div>
-        {renderHeader()}
-        <div style={{
-          height: 120,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: 'var(--ant-color-bg-container, #fafafa)',
-          borderRadius: 8,
-          border: '1px dashed var(--ant-color-border, #d9d9d9)',
-        }}>
-          <LineChartOutlined style={{ fontSize: 24, color: '#bfbfbf', marginBottom: 4 }} />
-          <Text type="secondary" style={{ fontSize: 13 }}>暂无趋势数据</Text>
-        </div>
+      <div style={{
+        height: 48,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'var(--ant-color-bg-container, #fafafa)',
+        borderRadius: 6,
+        border: '1px dashed var(--ant-color-border, #d9d9d9)',
+      }}>
+        <LineChartOutlined style={{ fontSize: 14, color: '#bfbfbf', marginRight: 6 }} />
+        <Text type="secondary" style={{ fontSize: 12 }}>暂无{LABEL}趋势数据</Text>
      </div>
    );
  }

-  const config = {
-    data,
-    xField: 'date',
-    yField: 'value',
-    smooth: true,
-    height: 180,
-    point: { shapeField: 'circle', sizeField: 3 },
-    axis: {
-      x: { labelAutoRotate: false },
-      y: { title: unit || undefined },
-    },
-    style: {
-      lineWidth: 2,
-    },
-  };
+  const latestValue = data[data.length - 1].value;

  return (
    <div>
-      {renderHeader()}
-      <div style={{ width: '100%' }}>
-        <Line {...config} />
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+        <Text style={{ fontSize: 12, color: 'var(--ant-color-text-secondary)' }}>{LABEL}趋势</Text>
+        {latestValue != null && (
+          <Text style={{ fontSize: 12, color: 'var(--ant-color-text-secondary)' }}>
+            最新：{latestValue} {UNIT}
+          </Text>
+        )}
      </div>
+      <Line
+        data={data}
+        xField="date"
+        yField="value"
+        smooth
+        height={140}
+        point={{ shapeField: 'circle', sizeField: 3 }}
+        axis={{
+          x: { labelAutoRotate: false },
+          y: { title: UNIT },
+        }}
+        style={{ lineWidth: 2 }}
+      />
    </div>
  );
 }