APP-SLOWHEALTH/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      健康助手
    </ion-title>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 下拉刷新 -->
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <!-- 用户统计信息卡片 -->
  <ion-card class="user-card">
    <ion-grid>
      <ion-row class="ion-align-items-center">
        <!-- 用户信息 -->
        <ion-col size="4">
          <ion-avatar class="user-avatar">
            <img src="assets/images/avatar.png" />
          </ion-avatar>
          <ion-text class="ion-text-nowrap">
            <h2>王先生</h2>
            <ion-chip color="danger" outline>糖尿病</ion-chip>
          </ion-text>
        </ion-col>

        <!-- 健康指数 -->
        <ion-col size="5">
          <div class="health-index">
            <ion-text color="light">综合健康指数</ion-text>
            <div class="index-value">
              85
              <ion-icon name="caret-up" color="success"></ion-icon>
            </div>
          </div>
        </ion-col>

        <!-- 健康动态 -->
        <ion-col size="3">
          <ion-text color="light" class="dynamic-text">
            您的血糖控制良好，继续保持！
            <ion-button fill="clear" size="small">更多</ion-button>
          </ion-text>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

  <!-- 健康数据概览 -->
  <ion-card class="data-card">
    <ion-grid>
      <ion-row>
        <ion-col size="6" *ngFor="let metric of metrics">
          <div class="metric-item" [class.abnormal]="metric.abnormal">
            <div class="metric-header">
              <ion-text>{{metric.name}}</ion-text>
              <ion-icon [name]="metric.trend" [color]="metric.trendColor"></ion-icon>
            </div>
            <div class="metric-value">
              {{metric.value}}
              <ion-text class="unit">{{metric.unit}}</ion-text>
            </div>
            <ion-text color="medium" class="reference">参考: {{metric.reference}}</ion-text>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button (click)="addData()">
        <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </ion-card>
<!--今日任务-->
  <ion-card class="task-card">
    <ion-item lines="none">
      <ion-label (click)="importData()">今日任务 (3/5)</ion-label>
      <ion-progress-bar value="0.6" color="primary"></ion-progress-bar>
    </ion-item>

    <ion-list lines="none">
      <ion-item *ngFor="let task of tasks" [class.recommended]="task.recommended">
        <ion-icon :icon="task.icon" slot="start" color="primary"></ion-icon>
        <ion-label>
          <h3>{{task.title}}</h3>
          <p>{{task.description}}</p>
          <ion-text color="medium">{{task.time}}</ion-text>
        </ion-label>
        <ion-icon 
          :name="task.completed ? 'checkmark-circle' : 'ellipse'" 
          slot="end" 
          [color]="task.completed ? 'success' : 'medium'">
        </ion-icon>
      </ion-item>
    </ion-list>
  </ion-card>
  
  <!-- 健康数据记录 -->
<ion-card class="health-data-card">
  <ion-item lines="none">
    <ion-label>健康数据记录</ion-label>
    <ion-button fill="clear" size="small" (click)="loadHealthData()">
      <ion-icon name="refresh" slot="icon-only"></ion-icon>
    </ion-button>
  </ion-item>

  <!-- 加载状态 -->
  <div *ngIf="healthData.loading" class="loading-spinner">
    <ion-spinner name="crescent"></ion-spinner>
  </div>

  <!-- 血糖数据 -->
  <ion-card *ngIf="healthData.bloodGlucose.length > 0" class="data-section">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="water" color="primary"></ion-icon>
        血糖记录
      </ion-card-title>
    </ion-card-header>
    <ion-list lines="none">
      <ion-item *ngFor="let item of healthData.bloodGlucose">
        <ion-label>
          <h3>{{item.get('glucoseValue')}} mmol/L</h3>
          <p>{{item.get('measurementType')}} · {{item.get('measurementTime') | date: 'MM/dd HH:mm'}}</p>
          <ion-text color="medium">{{item.get('notes')}}</ion-text>
        </ion-label>
        <ion-badge slot="end" color="success" *ngIf="item.get('glucoseValue') <= 6.1">正常</ion-badge>
        <ion-badge slot="end" color="warning" *ngIf="item.get('glucoseValue') > 6.1 && item.get('glucoseValue') <= 7.0">偏高</ion-badge>
        <ion-badge slot="end" color="danger" *ngIf="item.get('glucoseValue') > 7.0">过高</ion-badge>
      </ion-item>
    </ion-list>
  </ion-card>

  <!-- 血压数据 -->
  <ion-card *ngIf="healthData.bloodPressure.length > 0" class="data-section">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="speedometer" color="danger"></ion-icon>
        血压记录
      </ion-card-title>
    </ion-card-header>
    <ion-list lines="none">
      <ion-item *ngFor="let item of healthData.bloodPressure">
        <ion-label>
          <h3>{{item.get('systolic')}}/{{item.get('diastolic')}} mmHg</h3>
          <p>脉搏: {{item.get('pulse')}} · {{item.get('measurementTime') | date: 'MM/dd HH:mm'}}</p>
          <ion-text color="medium">{{item.get('notes')}}</ion-text>
        </ion-label>
        <ion-badge slot="end" color="success" *ngIf="item.get('systolic') <= 120 && item.get('diastolic') <= 80">正常</ion-badge>
        <ion-badge slot="end" color="warning" *ngIf="(item.get('systolic') > 120 && item.get('systolic') <= 140) || (item.get('diastolic') > 80 && item.get('diastolic') <= 90)">偏高</ion-badge>
        <ion-badge slot="end" color="danger" *ngIf="item.get('systolic') > 140 || item.get('diastolic') > 90">过高</ion-badge>
      </ion-item>
    </ion-list>
  </ion-card>

  <!-- 心率数据 -->
  <ion-card *ngIf="healthData.heartRate.length > 0" class="data-section">
    <ion-card-header>
      <ion-card-title>
        <ion-icon name="heart" color="danger"></ion-icon>
        心率记录
      </ion-card-title>
    </ion-card-header>
    <ion-list lines="none">
      <ion-item *ngFor="let item of healthData.heartRate">
        <ion-label>
          <h3>{{item.get('heartRate')}} 次/分</h3>
          <p>{{item.get('measurementMethod')}} · {{item.get('measurementTime') | date: 'MM/dd HH:mm'}}</p>
          <ion-text color="medium">{{item.get('notes')}}</ion-text>
        </ion-label>
        <ion-badge slot="end" color="success" *ngIf="item.get('heartRate') >= 60 && item.get('heartRate') <= 100">正常</ion-badge>
        <ion-badge slot="end" color="warning" *ngIf="item.get('heartRate') < 60 || item.get('heartRate') > 100">异常</ion-badge>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-card>

<!--对话智能体-->
  <ion-card class="doctor-card">
  <div class="card-content">
    <div class="doctor-avatar">
      <img src="/assets/images/0.jpg" alt="慢性病医师头像" class="avatar-image">
    </div>
    
    <div class="doctor-info">
      <h2 class="doctor-name">丁医生</h2>
      <p class="doctor-title">慢性病管理主任医师</p>
      <div class="doctor-specialty">
        <ion-badge color="primary">糖尿病</ion-badge>
        <ion-badge color="primary">高血压</ion-badge>
        <ion-badge color="primary">冠心病</ion-badge>
      </div>
      <p class="doctor-desc">10年慢性病管理经验。擅长个性化治疗方案制定和长期健康管理。</p>
    </div>
  </div>
  
  <ion-button (click)="openConsult()" expand="block" color="success" class="consult-btn">
    <ion-icon name="medical" slot="start"></ion-icon>
    立即咨询
  </ion-button>
</ion-card>