From 9132824c612d633a0afef12429ec590f0bf5d8e1 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Sat, 20 Jun 2026 22:10:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=81=A5=E5=BA=B7=E6=A1=A3=E6=A1=88?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/health/chronicDiseaseManage.js       |   88 +
 src/api/health/statisticAnalysis.js          |   24 +
 src/router/index.js                          |   27 +-
 src/views/health/activityStatistic/index.vue |  582 +++++
 src/views/health/chronicDisease/index.vue    |  619 +++++-
 src/views/health/healthRecord/index.vue      |   21 +
 src/views/health/healthScreen/index.vue      | 1864 ++++++++++++++++
 src/views/health/medicationPlan/index.vue    |   34 +-
 src/views/health/recordScreen/index.vue      | 2039 ++++++++++++++++++
 src/views/index.vue                          |  118 +-
 10 files changed, 5386 insertions(+), 30 deletions(-)
 create mode 100644 src/api/health/chronicDiseaseManage.js
 create mode 100644 src/views/health/activityStatistic/index.vue
 create mode 100644 src/views/health/healthScreen/index.vue
 create mode 100644 src/views/health/recordScreen/index.vue

diff --git a/src/api/health/chronicDiseaseManage.js b/src/api/health/chronicDiseaseManage.js
new file mode 100644
index 0000000..de71409
--- /dev/null
+++ b/src/api/health/chronicDiseaseManage.js
@@ -0,0 +1,88 @@
+import request from '@/utils/request'
+
+// 查询慢病指标记录列表
+export function listIndicator(query) {
+  return request({
+    url: '/health/chronicDiseaseManage/indicator/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询慢病指标记录详细
+export function getIndicator(id) {
+  return request({
+    url: '/health/chronicDiseaseManage/indicator/' + id,
+    method: 'get'
+  })
+}
+
+// 新增慢病指标记录
+export function addIndicator(data) {
+  return request({
+    url: '/health/chronicDiseaseManage/indicator',
+    method: 'post',
+    data
+  })
+}
+
+// 修改慢病指标记录
+export function updateIndicator(data) {
+  return request({
+    url: '/health/chronicDiseaseManage/indicator',
+    method: 'put',
+    data
+  })
+}
+
+// 删除慢病指标记录
+export function delIndicator(id) {
+  return request({
+    url: '/health/chronicDiseaseManage/indicator/' + id,
+    method: 'delete'
+  })
+}
+
+// 查询复诊随访记录列表
+export function listFollowUp(query) {
+  return request({
+    url: '/health/chronicDiseaseManage/followUp/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增复诊随访记录
+export function addFollowUp(data) {
+  return request({
+    url: '/health/chronicDiseaseManage/followUp',
+    method: 'post',
+    data
+  })
+}
+
+// 修改复诊随访记录
+export function updateFollowUp(data) {
+  return request({
+    url: '/health/chronicDiseaseManage/followUp',
+    method: 'put',
+    data
+  })
+}
+
+// 删除复诊随访记录
+export function delFollowUp(id) {
+  return request({
+    url: '/health/chronicDiseaseManage/followUp/' + id,
+    method: 'delete'
+  })
+}
+
+// 查询状态变更历史
+export function listStatusHistory(query) {
+  return request({
+    url: '/health/chronicDiseaseManage/statusHistory/list',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/api/health/statisticAnalysis.js b/src/api/health/statisticAnalysis.js
index 797be1b..33cc312 100644
--- a/src/api/health/statisticAnalysis.js
+++ b/src/api/health/statisticAnalysis.js
@@ -24,6 +24,22 @@ export function getHealthAnalysis(query) {
   })
 }
 
+export function getActivityAnalysis(query) {
+  return request({
+    url: '/health/analysis/activityAnalysis',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getHealthScreen(query) {
+  return request({
+    url: '/health/analysis/healthScreen',
+    method: 'get',
+    params: query
+  })
+}
+
 export function getRecordAnalysis(query) {
   return request({
     url: '/health/analysis/recordAnalysis',
@@ -32,6 +48,14 @@ export function getRecordAnalysis(query) {
   })
 }
 
+export function getRecordScreen(query) {
+  return request({
+    url: '/health/analysis/recordScreen',
+    method: 'get',
+    params: query
+  })
+}
+
 export function getDoctorAnalysis(query) {
   return request({
     url: '/health/analysis/doctorAnalysis',
diff --git a/src/router/index.js b/src/router/index.js
index 77c192c..31e14e3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -65,28 +65,19 @@ export const constantRoutes = [
   {
     path: '',
     component: Layout,
-    redirect: '/accountCalendar'
-    // children: [
-    //   {
-    //     path: '/index',
-    //     component: () => import('@/views/index'),
-    //     name: 'Index',
-    //     meta: { title: '首页', icon: 'dashboard', affix: true }
-    //   }
-    // ]
+    redirect: '/index'
   },
   {
     path: '/index',
     component: Layout,
-    redirect: '/statisticanalysis/accountAnalysis'
-    // children: [
-    //   {
-    //     path: '/index',
-    //     component: () => import('@/views/index'),
-    //     name: 'Index',
-    //     meta: { title: '首页', icon: 'dashboard', affix: true }
-    //   }
-    // ]
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/index'),
+        name: 'Index',
+        meta: { title: '首页', icon: 'dashboard', affix: true }
+      }
+    ]
   },
   {
     path: '/user',
diff --git a/src/views/health/activityStatistic/index.vue b/src/views/health/activityStatistic/index.vue
new file mode 100644
index 0000000..30f60f7
--- /dev/null
+++ b/src/views/health/activityStatistic/index.vue
@@ -0,0 +1,582 @@
+<template>
+  <div class="app-container">
+    <div class="search-con">
+      <div class="title">查询条件</div>
+      <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
+        <el-form-item label="活动名称" prop="name">
+          <el-input v-model="queryParams.name" placeholder="请输入活动名称" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="活动类型" prop="activityType">
+          <el-select v-model="queryParams.activityType" placeholder="请选择活动类型" clearable>
+            <el-option v-for="dict in activity_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动量" prop="activityVolume">
+          <el-select v-model="queryParams.activityVolume" placeholder="请选择活动量" clearable>
+            <el-option v-for="dict in activity_exercise" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="活动地点" prop="place">
+          <el-input v-model="queryParams.place" placeholder="请输入活动地点" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="统计粒度" prop="type">
+          <el-radio-group v-model="queryParams.type" @change="handleTimeChange">
+            <el-radio-button :label="1">日</el-radio-button>
+            <el-radio-button :label="2">月</el-radio-button>
+            <el-radio-button :label="3">年</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="活动日期" prop="time" v-if="queryParams.type === 1">
+          <el-date-picker
+            v-model="queryParams.time"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="YYYY-MM-DD"
+            @calendar-change="calendarChange"
+          />
+        </el-form-item>
+        <el-form-item label="活动月份" prop="time" v-if="queryParams.type === 2">
+          <el-date-picker
+            v-model="queryParams.time"
+            type="monthrange"
+            range-separator="~"
+            format="YYYY-MM"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :disabled-date="disabledDateFun"
+            @calendar-change="calendarChange"
+          />
+        </el-form-item>
+        <el-form-item label="活动年份" prop="time" v-if="queryParams.type === 3">
+          <yearPicker
+            v-model="queryParams.time"
+            ref="statisticPicker"
+            labelText="选择年份"
+            :initYear="dateValue"
+            :showYear="showYearValue"
+            :maxLength="5"
+            sp="~"
+            @updateTimeRange="updateStatisticYear"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="search-btn-con">
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="info" icon="Refresh" @click="resetQuery">重置</el-button>
+      </div>
+    </div>
+
+    <div class="main-con activity-stat-main" style="height: calc(100% - 1.45rem)">
+      <div class="summary-con" style="height: 115px">
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Histogram /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">活动次数</div>
+            <div>
+              <span class="num">{{ activity.activityCount || 0 }}</span
+              ><span class="unit">次</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Calendar /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">活动天数</div>
+            <div>
+              <span class="num">{{ activity.activityDays || 0 }}</span
+              ><span class="unit">天</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Timer /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">总时长</div>
+            <div>
+              <span class="num">{{ activity.totalHours || 0 }}</span
+              ><span class="unit">小时</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Money /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">活动费用</div>
+            <div>
+              <span class="num">{{ activity.totalCost || 0 }}</span
+              ><span class="unit">元</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><DataLine /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">平均时长</div>
+            <div>
+              <span class="num">{{ activity.avgHours || 0 }}</span
+              ><span class="unit">小时/次</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="summary-con" style="height: 115px">
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Coin /></el-icon>
+          </div>
+          <div class="item-wrap">
+            <div class="title">平均费用</div>
+            <div>
+              <span class="num">{{ activity.avgCost || 0 }}</span
+              ><span class="unit">元/次</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Medal /></el-icon>
+          </div>
+          <div class="item-wrap highlight-item">
+            <div class="title">最高费用活动</div>
+            <div class="summary-detail">
+              <span class="num text-name">{{ activity.maxCostName || '--' }}</span>
+              <span class="unit">{{ activity.maxCost || 0 }}元</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Stopwatch /></el-icon>
+          </div>
+          <div class="item-wrap highlight-item">
+            <div class="title">最长活动</div>
+            <div class="summary-detail">
+              <span class="num text-name">{{ activity.longestName || '--' }}</span>
+              <span class="unit">{{ activity.longestHours || 0 }}小时</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Location /></el-icon>
+          </div>
+          <div class="item-wrap highlight-item">
+            <div class="title">常去地点</div>
+            <div class="summary-detail">
+              <span class="num text-name">{{ topPlace.name }}</span>
+              <span class="unit">{{ topPlace.count }}次</span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><User /></el-icon>
+          </div>
+          <div class="item-wrap highlight-item">
+            <div class="title">常参与成员</div>
+            <div class="summary-detail">
+              <span class="num text-name">{{ topPartner.name }}</span>
+              <span class="unit">{{ topPartner.count }}次</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="title-con" style="margin-top: 18px">
+        <div class="title">活动统计</div>
+        <div class="operate-btn-con">
+          <el-radio-group v-model="radioVal" @change="handleRadioChange">
+            <el-radio-button label="活动明细" />
+            <el-radio-button label="次数趋势" />
+            <el-radio-button label="费用趋势" />
+            <el-radio-button label="时长趋势" />
+            <el-radio-button label="类型分布" />
+            <el-radio-button label="地点排行" />
+            <el-radio-button label="成员排行" />
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="content-con">
+        <div v-show="radioVal === '次数趋势'" class="chart" id="activityCountChart" style="height: calc(100% - 245px); margin-top: -10px"></div>
+        <div v-show="radioVal === '费用趋势'" class="chart" id="activityCostChart" style="height: calc(100% - 245px); margin-top: -10px"></div>
+        <div v-show="radioVal === '时长趋势'" class="chart" id="activityDurationChart" style="height: calc(100% - 245px); margin-top: -10px"></div>
+        <div v-show="radioVal === '类型分布'" class="chart-grid" style="height: calc(100% - 245px)">
+          <div class="chart" id="activityTypeChart"></div>
+          <div class="chart" id="activityVolumeChart"></div>
+        </div>
+        <el-table v-show="radioVal === '地点排行'" v-loading="loading" :data="activity.placeList || []" height="calc(100% - 245px)" class="wrap-table">
+          <el-table-column label="序号" width="70" type="index" align="center" />
+          <el-table-column label="活动地点" align="center" prop="name" min-width="220" class-name="wrap-cell" />
+          <el-table-column label="活动次数" align="center" prop="count" />
+          <el-table-column label="累计时长（小时）" align="center" prop="hours" />
+          <el-table-column label="累计费用（元）" align="center" prop="cost" />
+        </el-table>
+        <el-table v-show="radioVal === '成员排行'" v-loading="loading" :data="activity.partnerList || []" height="calc(100% - 245px)" class="wrap-table">
+          <el-table-column label="序号" width="70" type="index" align="center" />
+          <el-table-column label="成员" align="center" prop="name" min-width="220" class-name="wrap-cell" />
+          <el-table-column label="参与次数" align="center" prop="count" />
+          <el-table-column label="累计时长（小时）" align="center" prop="hours" />
+          <el-table-column label="关联费用（元）" align="center" prop="cost" />
+        </el-table>
+        <el-table v-show="radioVal === '活动明细'" v-loading="loading" :data="activity.tableList || []" height="calc(100% - 245px)" class="wrap-table">
+          <el-table-column label="序号" width="60" type="index" align="center" />
+          <el-table-column label="活动名称" align="center" prop="name" min-width="180" class-name="wrap-cell" />
+          <el-table-column label="活动类型" align="center" prop="typeName" width="120" />
+          <el-table-column label="活动量" align="center" prop="activityVolumeName" width="110" />
+          <el-table-column label="活动地点" align="center" prop="place" min-width="160" class-name="wrap-cell" />
+          <el-table-column label="成员" align="center" prop="partner" min-width="180" class-name="wrap-cell" />
+          <el-table-column label="开始时间" align="center" prop="startTime" width="170" />
+          <el-table-column label="结束时间" align="center" prop="endTime" width="170" />
+          <el-table-column label="活动时长" align="center" prop="duration" width="130" />
+          <el-table-column label="费用（元）" align="center" prop="totalCost" width="110" />
+          <el-table-column label="饮食" align="center" prop="foods" min-width="220" class-name="wrap-cell" />
+          <el-table-column label="收获" align="center" prop="harvest" min-width="220" class-name="wrap-cell" />
+          <el-table-column label="备注" align="center" prop="remark" min-width="220" class-name="wrap-cell" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="ActivityStatistic">
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { ElMessage } from 'element-plus'
+import { Calendar, Coin, DataLine, Histogram, Location, Medal, Money, Stopwatch, Timer, User } from '@element-plus/icons-vue'
+import yearPicker from '@/components/YearPicker/index.vue'
+import { getActivityAnalysis } from '@/api/health/statisticAnalysis'
+
+const { proxy } = getCurrentInstance()
+const { activity_type, activity_exercise } = proxy.useDict('activity_type', 'activity_exercise')
+
+const loading = ref(false)
+const radioVal = ref('活动明细')
+const currentType = ref('活动明细')
+const firstChooseDate = ref('')
+const dateValue = ref({ startYear: 2000, endYear: new Date().getFullYear() })
+const showYearValue = ref({ startShowYear: '', endShowYear: '' })
+const activity = ref({})
+const chartData = ref({
+  name: [],
+  count: [],
+  cost: [],
+  duration: []
+})
+
+const dateValidate = (rules, value, callback) => {
+  const dateType = rules.dateType || 'months'
+  const num = rules.num || 23
+  const message = rules.message || `时间跨度不能超过${num}个月`
+  if (value && value.length === 2) {
+    const start = value[0]
+    const end = value[1]
+    if (dayjs(end).diff(dayjs(start), dateType) > num) {
+      queryParams.value.time = [start, dayjs(start).add(num, dateType)]
+      ElMessage.warning(message)
+    }
+  }
+}
+
+const data = reactive({
+  queryParams: {
+    type: 1,
+    time: null,
+    name: null,
+    activityType: null,
+    activityVolume: null,
+    place: null
+  },
+  rules: {
+    time: [{ validator: dateValidate, dateType: 'months', num: 23, message: '时间跨度不能大于24个月，默认选择开始日期的24个月' }]
+  }
+})
+
+const { queryParams, rules } = toRefs(data)
+
+const topPlace = computed(() => {
+  const item = (activity.value.placeList || [])[0] || {}
+  return { name: item.name || '--', count: item.count || 0 }
+})
+
+const topPartner = computed(() => {
+  const item = (activity.value.partnerList || [])[0] || {}
+  return { name: item.name || '--', count: item.count || 0 }
+})
+
+const updateStatisticYear = (startYear, endYear) => {
+  queryParams.value.time = [new Date(startYear, 0, 1), new Date(endYear, 0, 1)]
+  if (endYear - startYear > 5) {
+    ElMessage.warning('时间跨度不能大于5年，默认选择开始日期的5年')
+    queryParams.value.time = [new Date(startYear, 0, 1), new Date(startYear + 5, 0, 1)]
+  }
+}
+
+const disabledDateFun = (time) => {
+  const arr = [0, 30, 365, 365 * 5]
+  const days = arr[queryParams.value.type]
+  if (firstChooseDate.value) {
+    const one = days * 24 * 3600 * 1000
+    const minTime = firstChooseDate.value - one
+    const maxTime = firstChooseDate.value + one
+    const endTime = maxTime > Date.now() ? Date.now() : maxTime
+    return time.getTime() > endTime || time.getTime() < minTime
+  }
+  return time.getTime() > Date.now()
+}
+
+const calendarChange = (val) => {
+  firstChooseDate.value = val[0].getTime()
+  if (val[1]) firstChooseDate.value = ''
+}
+
+function handleTimeChange(type) {
+  queryParams.value.time = null
+  if (type === 1) {
+    const end = dayjs().format('YYYY-MM-DD')
+    queryParams.value.time = [dayjs(end).add(-60, 'day'), end]
+  } else if (type === 2) {
+    const end = dayjs().format('YYYY-MM')
+    queryParams.value.time = [dayjs(end).add(-11, 'months'), end]
+  } else if (type === 3) {
+    const endYear = new Date().getFullYear()
+    queryParams.value.time = [new Date(endYear - 2, 0, 1), new Date(endYear, 0, 1)]
+    showYearValue.value = { startShowYear: endYear - 2, endShowYear: endYear }
+  }
+  getList()
+}
+
+function getList() {
+  loading.value = true
+  chartData.value = { name: [], count: [], cost: [], duration: [] }
+  const { type, time, name, activityType, activityVolume, place } = queryParams.value
+  let formatValue = 'YYYY-MM-DD'
+  if (type === 2) formatValue = 'YYYY-MM'
+  if (type === 3) formatValue = 'YYYY'
+  const params = {
+    type,
+    startTime: time && time.length > 0 ? dayjs(time[0]).format(formatValue) : '',
+    endTime: time && time.length > 0 ? dayjs(time[1]).format(formatValue) : '',
+    name,
+    activityType,
+    activityVolume,
+    place
+  }
+  getActivityAnalysis(params)
+    .then((response) => {
+      activity.value = response.data || {}
+      const countMap = new Map((activity.value.countTrend || []).map((item) => [item.time, Number(item.value || 0)]))
+      const costMap = new Map((activity.value.costTrend || []).map((item) => [item.time, Number(item.value || 0)]))
+      const durationMap = new Map((activity.value.durationTrend || []).map((item) => [item.time, Number(item.value || 0)]))
+      const names = [
+        ...new Set(
+          [...(activity.value.countTrend || []), ...(activity.value.costTrend || []), ...(activity.value.durationTrend || [])].map((item) => item.time)
+        )
+      ].sort()
+      chartData.value = {
+        name: names,
+        count: names.map((time) => countMap.get(time) || 0),
+        cost: names.map((time) => costMap.get(time) || 0),
+        duration: names.map((time) => durationMap.get(time) || 0)
+      }
+      handleRadioChange(currentType.value)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleQuery() {
+  getList()
+}
+
+function resetQuery() {
+  proxy.resetForm('queryRef')
+  queryParams.value.name = null
+  queryParams.value.activityType = null
+  queryParams.value.activityVolume = null
+  queryParams.value.place = null
+  handleTimeChange(1)
+}
+
+function chartBaseOption(data, seriesName, unit, color) {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      formatter: (params) => `${params[0].name}<br/>${seriesName}：${params[0].value}${unit}`
+    },
+    grid: { left: '5%', right: '5%', bottom: '5%', containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: data.name,
+      axisTick: { alignWithLabel: true },
+      axisLine: { lineStyle: { width: 1, color: '#999' } }
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: { show: true },
+      axisLine: { show: true, lineStyle: { width: 1, color: '#999' } }
+    },
+    series: [
+      {
+        name: seriesName,
+        data: data.value,
+        type: data.type,
+        barWidth: 12,
+        smooth: true,
+        lineStyle: { color },
+        itemStyle: { color },
+        areaStyle:
+          data.type === 'line'
+            ? {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: `${color}99` },
+                  { offset: 1, color: `${color}16` }
+                ])
+              }
+            : undefined
+      }
+    ]
+  }
+}
+
+function renderTrendChart(id, value, name, unit, color, type = 'bar') {
+  if (document.getElementById(id) === null) return
+  echarts.dispose(document.getElementById(id))
+  const myChart = echarts.init(document.getElementById(id))
+  myChart.setOption(chartBaseOption({ name: chartData.value.name, value, type }, name, unit, color))
+  setTimeout(() => myChart.resize(), 100)
+}
+
+function renderPieChart(id, data, title) {
+  if (document.getElementById(id) === null) return
+  echarts.dispose(document.getElementById(id))
+  const myChart = echarts.init(document.getElementById(id))
+  myChart.setOption({
+    title: { text: title, left: 'center', top: 16 },
+    tooltip: { trigger: 'item' },
+    legend: { bottom: 10 },
+    series: [
+      {
+        type: 'pie',
+        radius: ['42%', '70%'],
+        center: ['50%', '48%'],
+        data,
+        label: { formatter: '{b}\n{c}次' }
+      }
+    ]
+  })
+  setTimeout(() => myChart.resize(), 100)
+}
+
+function handleRadioChange(type) {
+  currentType.value = type
+  nextTick(() => {
+    switch (type) {
+      case '次数趋势':
+        renderTrendChart('activityCountChart', chartData.value.count, '活动次数', '次', '#409EFF', 'bar')
+        break
+      case '费用趋势':
+        renderTrendChart('activityCostChart', chartData.value.cost, '活动费用', '元', '#E6A23C', 'line')
+        break
+      case '时长趋势':
+        renderTrendChart('activityDurationChart', chartData.value.duration, '活动时长', '小时', '#67C23A', 'line')
+        break
+      case '类型分布':
+        renderPieChart('activityTypeChart', activity.value.typeList || [], '活动类型分布')
+        renderPieChart('activityVolumeChart', activity.value.volumeList || [], '活动量分布')
+        break
+      default:
+        break
+    }
+  })
+}
+
+handleTimeChange(1)
+</script>
+
+<style lang="scss" scoped>
+.activity-stat-main {
+  .summary-con {
+    .right-con,
+    .icon-box,
+    .item-wrap,
+    .num,
+    .title {
+      list-style: none !important;
+
+      &::before,
+      &::after {
+        display: none !important;
+        content: none !important;
+      }
+    }
+  }
+}
+
+.text-name {
+  display: block;
+  max-width: 100%;
+  overflow: visible;
+  font-size: 22px !important;
+  line-height: 1.2;
+  text-overflow: initial;
+  white-space: normal;
+  word-break: break-all;
+}
+
+.highlight-item {
+  min-width: 0;
+}
+
+.summary-detail {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+
+  .unit {
+    display: block;
+    margin-left: 0;
+    line-height: 1.2;
+  }
+}
+
+.wrap-table {
+  :deep(.el-table__cell) {
+    vertical-align: top;
+  }
+
+  :deep(.wrap-cell .cell) {
+    overflow: visible;
+    line-height: 20px;
+    text-overflow: initial;
+    white-space: normal;
+    word-break: break-all;
+  }
+}
+
+.chart-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.chart-grid .chart {
+  min-height: 320px;
+}
+</style>
diff --git a/src/views/health/chronicDisease/index.vue b/src/views/health/chronicDisease/index.vue
index bff044e..af85c8b 100644
--- a/src/views/health/chronicDisease/index.vue
+++ b/src/views/health/chronicDisease/index.vue
@@ -138,21 +138,275 @@
         </div>
       </template>
     </el-dialog>
+    <el-drawer v-model="detailOpen" size="760px" append-to-body>
+      <template #header>
+        <div class="detail-title">慢性疾病详情</div>
+      </template>
+      <div v-loading="detailLoading" class="disease-detail">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="成员">{{ detailRecord.personName || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="疾病名称">{{ detailRecord.diseaseName || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="疾病编码">{{ detailRecord.diseaseCode || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="确诊日期">{{ parseTime(detailRecord.diagnosisDate, '{y}-{m}-{d}') || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="getStatusType(detailRecord.diseaseStatus)">
+              {{ getStatusLabel(detailRecord.diseaseStatus) }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="启用状态">{{ detailRecord.isActive === 1 ? '已启用' : '已停用' }}</el-descriptions-item>
+          <el-descriptions-item label="主治医生">{{ detailRecord.mainDoctor || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="就诊医院">{{ detailRecord.hospital || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="科室">{{ detailRecord.department || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="诊断结果">{{ detailRecord.notes || '--' }}</el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">{{ detailRecord.remark || '--' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="detail-section">
+          <div class="detail-section-title">
+            <span>关联用药计划</span>
+            <el-button type="primary" icon="Plus" size="small" @click="handleCreateMedicationPlan(detailRecord)" v-hasPermi="['health:medicationPlan:add']"
+              >创建用药计划</el-button
+            >
+          </div>
+          <el-table :data="detailPlanList" empty-text="暂无关联用药计划" border>
+            <el-table-column label="计划名称" prop="planName" min-width="140" show-overflow-tooltip />
+            <el-table-column label="药品" prop="medicineName" min-width="160" show-overflow-tooltip />
+            <el-table-column label="剂量" width="110">
+              <template #default="scope">{{ scope.row.dosagePerTime || '--' }} {{ scope.row.dosageUnit || '' }}</template>
+            </el-table-column>
+            <el-table-column label="开始日期" width="110">
+              <template #default="scope">{{ formatDate(scope.row.startDate) || '--' }}</template>
+            </el-table-column>
+            <el-table-column label="结束日期" width="110">
+              <template #default="scope">{{ scope.row.endDate ? formatDate(scope.row.endDate) : '长期' }}</template>
+            </el-table-column>
+            <el-table-column label="状态" width="90">
+              <template #default="scope">
+                <dict-tag :options="medication_plan_status" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div class="detail-section">
+          <div class="detail-section-title">
+            <span>指标监测</span>
+            <el-button type="primary" icon="Plus" size="small" @click="handleAddIndicator" v-hasPermi="['health:chronicDisease:add']">新增指标</el-button>
+          </div>
+          <div v-if="latestIndicatorList.length" class="indicator-summary">
+            <div v-for="item in latestIndicatorList" :key="item.id" class="indicator-summary-item">
+              <div class="indicator-name">{{ item.indicatorName || '--' }}</div>
+              <div class="indicator-value">
+                {{ item.indicatorValue ?? '--' }}
+                <span>{{ item.indicatorUnit || '' }}</span>
+              </div>
+              <el-tag size="small" :type="getIndicatorStatusType(item.status)">{{ getIndicatorStatusLabel(item.status) }}</el-tag>
+            </div>
+          </div>
+          <el-table :data="detailIndicatorList" empty-text="暂无指标监测记录" border>
+            <el-table-column label="指标" prop="indicatorName" min-width="110" show-overflow-tooltip />
+            <el-table-column label="数值" width="110">
+              <template #default="scope">{{ scope.row.indicatorValue ?? '--' }} {{ scope.row.indicatorUnit || '' }}</template>
+            </el-table-column>
+            <el-table-column label="目标范围" width="130">
+              <template #default="scope"> {{ scope.row.targetMin ?? '--' }} - {{ scope.row.targetMax ?? '--' }} </template>
+            </el-table-column>
+            <el-table-column label="状态" width="90">
+              <template #default="scope">
+                <el-tag :type="getIndicatorStatusType(scope.row.status)">{{ getIndicatorStatusLabel(scope.row.status) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="测量时间" width="160">
+              <template #default="scope">{{ parseTime(scope.row.measureTime, '{y}-{m}-{d} {h}:{i}') || '--' }}</template>
+            </el-table-column>
+            <el-table-column label="说明" prop="notes" min-width="120" show-overflow-tooltip />
+            <el-table-column label="操作" width="120" fixed="right">
+              <template #default="scope">
+                <el-button link type="primary" @click="handleUpdateIndicator(scope.row)" v-hasPermi="['health:chronicDisease:edit']">编辑</el-button>
+                <el-button link type="danger" @click="handleDeleteIndicator(scope.row)" v-hasPermi="['health:chronicDisease:remove']">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div class="detail-section">
+          <div class="detail-section-title">
+            <span>复诊随访</span>
+            <el-button type="primary" icon="Plus" size="small" @click="handleAddFollowUp" v-hasPermi="['health:chronicDisease:add']">新增随访</el-button>
+          </div>
+          <el-table :data="detailFollowUpList" empty-text="暂无复诊随访记录" border>
+            <el-table-column label="类型" width="80">
+              <template #default="scope">{{ getFollowUpTypeLabel(scope.row.followUpType) }}</template>
+            </el-table-column>
+            <el-table-column label="日期" width="110">
+              <template #default="scope">{{ formatDate(scope.row.followUpDate) || '--' }}</template>
+            </el-table-column>
+            <el-table-column label="医院/科室" min-width="150" show-overflow-tooltip>
+              <template #default="scope">{{ scope.row.hospital || '--' }} / {{ scope.row.department || '--' }}</template>
+            </el-table-column>
+            <el-table-column label="医生" prop="doctor" width="90" show-overflow-tooltip />
+            <el-table-column label="状态" width="90">
+              <template #default="scope">
+                <el-tag :type="getFollowUpStatusType(scope.row.status)">{{ getFollowUpStatusLabel(scope.row.status) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="下次日期" width="110">
+              <template #default="scope">{{ formatDate(scope.row.nextFollowUpDate) || '--' }}</template>
+            </el-table-column>
+            <el-table-column label="结果" prop="result" min-width="120" show-overflow-tooltip />
+            <el-table-column label="操作" width="120" fixed="right">
+              <template #default="scope">
+                <el-button link type="primary" @click="handleUpdateFollowUp(scope.row)" v-hasPermi="['health:chronicDisease:edit']">编辑</el-button>
+                <el-button link type="danger" @click="handleDeleteFollowUp(scope.row)" v-hasPermi="['health:chronicDisease:remove']">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div class="detail-section">
+          <div class="detail-section-title">
+            <span>状态历史</span>
+          </div>
+          <el-timeline v-if="detailStatusHistoryList.length">
+            <el-timeline-item v-for="item in detailStatusHistoryList" :key="item.id" :timestamp="parseTime(item.changeTime, '{y}-{m}-{d} {h}:{i}')">
+              <div class="status-history-row">
+                <el-tag :type="getStatusType(item.oldStatus)">{{ getStatusLabel(item.oldStatus) }}</el-tag>
+                <span>调整为</span>
+                <el-tag :type="getStatusType(item.newStatus)">{{ getStatusLabel(item.newStatus) }}</el-tag>
+              </div>
+              <div class="status-history-text">{{ item.reason || '档案状态调整' }}</div>
+              <div v-if="item.treatmentAdvice" class="status-history-text">建议：{{ item.treatmentAdvice }}</div>
+            </el-timeline-item>
+          </el-timeline>
+          <el-empty v-else description="暂无状态变更历史" />
+        </div>
+      </div>
+    </el-drawer>
+
+    <el-dialog :title="indicatorTitle" v-model="indicatorOpen" width="560px" append-to-body>
+      <el-form ref="indicatorRef" :model="indicatorForm" :rules="indicatorRules" label-width="100px">
+        <el-form-item label="指标类型" prop="indicatorType">
+          <el-select v-model="indicatorForm.indicatorType" placeholder="请选择指标类型" filterable @change="handleIndicatorTypeChange">
+            <el-option v-for="item in indicatorOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="指标名称" prop="indicatorName">
+          <el-input v-model="indicatorForm.indicatorName" placeholder="请输入指标名称" />
+        </el-form-item>
+        <el-form-item label="测量时间" prop="measureTime">
+          <el-date-picker
+            v-model="indicatorForm.measureTime"
+            type="datetime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择测量时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="指标值" prop="indicatorValue">
+          <el-input-number v-model="indicatorForm.indicatorValue" :precision="2" :step="1" controls-position="right" style="width: 180px" />
+          <el-input v-model="indicatorForm.indicatorUnit" placeholder="单位" style="width: 120px; margin-left: 12px" />
+        </el-form-item>
+        <el-form-item label="目标范围">
+          <el-input-number v-model="indicatorForm.targetMin" :precision="2" controls-position="right" placeholder="下限" style="width: 160px" />
+          <span class="range-separator">至</span>
+          <el-input-number v-model="indicatorForm.targetMax" :precision="2" controls-position="right" placeholder="上限" style="width: 160px" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="indicatorForm.status" placeholder="请选择状态">
+            <el-option v-for="item in indicatorStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="说明" prop="notes">
+          <el-input v-model="indicatorForm.notes" type="textarea" :rows="3" placeholder="请输入说明" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitIndicatorForm">确 定</el-button>
+          <el-button @click="indicatorOpen = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog :title="followUpTitle" v-model="followUpOpen" width="640px" append-to-body>
+      <el-form ref="followUpRef" :model="followUpForm" :rules="followUpRules" label-width="110px">
+        <el-form-item label="类型" prop="followUpType">
+          <el-select v-model="followUpForm.followUpType" placeholder="请选择类型">
+            <el-option v-for="item in followUpTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期" prop="followUpDate">
+          <el-date-picker v-model="followUpForm.followUpDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="医院" prop="hospital">
+          <el-input v-model="followUpForm.hospital" placeholder="请输入医院" />
+        </el-form-item>
+        <el-form-item label="科室/医生">
+          <el-input v-model="followUpForm.department" placeholder="科室" style="width: 220px" />
+          <el-input v-model="followUpForm.doctor" placeholder="医生" style="width: 220px; margin-left: 12px" />
+        </el-form-item>
+        <el-form-item label="复查项目" prop="checkItems">
+          <el-input v-model="followUpForm.checkItems" type="textarea" :rows="2" placeholder="请输入复查项目" />
+        </el-form-item>
+        <el-form-item label="结果" prop="result">
+          <el-input v-model="followUpForm.result" type="textarea" :rows="3" placeholder="请输入结果" />
+        </el-form-item>
+        <el-form-item label="下次日期" prop="nextFollowUpDate">
+          <el-date-picker v-model="followUpForm.nextFollowUpDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择下次日期" style="width: 100%" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="followUpForm.status" placeholder="请选择状态">
+            <el-option v-for="item in followUpStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="说明" prop="notes">
+          <el-input v-model="followUpForm.notes" type="textarea" :rows="2" placeholder="请输入说明" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitFollowUpForm">确 定</el-button>
+          <el-button @click="followUpOpen = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="ChronicDisease">
 import { listChronicDisease, getChronicDisease, delChronicDisease, addChronicDisease, updateChronicDisease } from '@/api/health/chronicDisease'
 import { listHealthDiseases } from '@/api/health/healthDiseases'
+import { listMedicationPlan } from '@/api/health/medicationPlan'
+import {
+  listIndicator,
+  addIndicator,
+  updateIndicator,
+  delIndicator,
+  listFollowUp,
+  addFollowUp,
+  updateFollowUp,
+  delFollowUp,
+  listStatusHistory
+} from '@/api/health/chronicDiseaseManage'
 import { listPerson } from '@/api/health/person'
 
 const { proxy } = getCurrentInstance()
-const { disease_status, is_active } = proxy.useDict('disease_status', 'is_active')
+const router = useRouter()
+const { disease_status, is_active, medication_plan_status } = proxy.useDict('disease_status', 'is_active', 'medication_plan_status')
 
 const chronicDiseaseList = ref([])
 const memberList = ref([])
 const diseaseList = ref([])
+const detailOpen = ref(false)
+const detailLoading = ref(false)
+const detailRecord = ref({})
+const detailPlanList = ref([])
+const detailIndicatorList = ref([])
+const detailFollowUpList = ref([])
+const detailStatusHistoryList = ref([])
 const open = ref(false)
+const indicatorOpen = ref(false)
+const followUpOpen = ref(false)
 const loading = ref(true)
 const showSearch = ref(true)
 const ids = ref([])
@@ -160,12 +414,53 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
+const indicatorTitle = ref('')
+const followUpTitle = ref('')
 const operateList = ref([
   { id: 'view', icon: 'View', title: '查看', hasPermi: ['health:chronicDisease:query'] },
   { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['health:chronicDisease:edit'] },
   { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['health:chronicDisease:remove'] }
 ])
 
+const indicatorOptions = [
+  { value: 'blood_pressure_systolic', label: '收缩压', unit: 'mmHg' },
+  { value: 'blood_pressure_diastolic', label: '舒张压', unit: 'mmHg' },
+  { value: 'heart_rate', label: '心率', unit: '次/分' },
+  { value: 'fasting_glucose', label: '空腹血糖', unit: 'mmol/L' },
+  { value: 'postprandial_glucose', label: '餐后血糖', unit: 'mmol/L' },
+  { value: 'weight', label: '体重', unit: 'kg' },
+  { value: 'uric_acid', label: '尿酸', unit: 'umol/L' },
+  { value: 'custom', label: '自定义', unit: '' }
+]
+const indicatorStatusOptions = [
+  { value: 1, label: '正常', type: 'success' },
+  { value: 2, label: '偏高', type: 'warning' },
+  { value: 3, label: '偏低', type: 'info' },
+  { value: 4, label: '需关注', type: 'danger' }
+]
+const followUpTypeOptions = [
+  { value: 1, label: '复诊' },
+  { value: 2, label: '复查' },
+  { value: 3, label: '随访' }
+]
+const followUpStatusOptions = [
+  { value: 1, label: '待完成', type: 'warning' },
+  { value: 2, label: '已完成', type: 'success' },
+  { value: 3, label: '已过期', type: 'danger' }
+]
+
+const indicatorForm = ref({})
+const followUpForm = ref({})
+const latestIndicatorList = computed(() => {
+  const latest = new Map()
+  detailIndicatorList.value.forEach((item) => {
+    if (!latest.has(item.indicatorType || item.indicatorName)) {
+      latest.set(item.indicatorType || item.indicatorName, item)
+    }
+  })
+  return Array.from(latest.values()).slice(0, 6)
+})
+
 const data = reactive({
   form: {},
   queryParams: {
@@ -180,10 +475,22 @@ const data = reactive({
     personId: [{ required: true, message: '成员不能为空', trigger: 'change' }],
     diseaseName: [{ required: true, message: '疾病名称不能为空', trigger: 'blur' }],
     diseaseStatus: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+  },
+  indicatorRules: {
+    indicatorType: [{ required: true, message: '指标类型不能为空', trigger: 'change' }],
+    indicatorName: [{ required: true, message: '指标名称不能为空', trigger: 'blur' }],
+    measureTime: [{ required: true, message: '测量时间不能为空', trigger: 'change' }],
+    indicatorValue: [{ required: true, message: '指标值不能为空', trigger: 'blur' }],
+    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+  },
+  followUpRules: {
+    followUpType: [{ required: true, message: '类型不能为空', trigger: 'change' }],
+    followUpDate: [{ required: true, message: '日期不能为空', trigger: 'change' }],
+    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
   }
 })
 
-const { queryParams, form, rules } = toRefs(data)
+const { queryParams, form, rules, indicatorRules, followUpRules } = toRefs(data)
 
 /** 获取状态类型 */
 function getStatusType(status) {
@@ -197,6 +504,36 @@ function getStatusLabel(status) {
   return labels[status] || '未知'
 }
 
+function getOptionLabel(options, value) {
+  const item = options.find((option) => option.value === Number(value))
+  return item ? item.label : '未知'
+}
+
+function getOptionType(options, value) {
+  const item = options.find((option) => option.value === Number(value))
+  return item ? item.type : 'info'
+}
+
+function getIndicatorStatusLabel(status) {
+  return getOptionLabel(indicatorStatusOptions, status)
+}
+
+function getIndicatorStatusType(status) {
+  return getOptionType(indicatorStatusOptions, status)
+}
+
+function getFollowUpTypeLabel(type) {
+  return getOptionLabel(followUpTypeOptions, type)
+}
+
+function getFollowUpStatusLabel(status) {
+  return getOptionLabel(followUpStatusOptions, status)
+}
+
+function getFollowUpStatusType(status) {
+  return getOptionType(followUpStatusOptions, status)
+}
+
 /** 操作按钮 */
 const handleOperate = (operate, row) => {
   switch (operate) {
@@ -304,9 +641,45 @@ function handleSelectionChange(selection) {
 
 // 查看
 const handleView = (row) => {
-  title.value = '查看慢性疾病档案'
-  form.value = { ...row }
-  open.value = true
+  detailOpen.value = true
+  detailLoading.value = true
+  detailRecord.value = { ...row }
+  detailPlanList.value = []
+  detailIndicatorList.value = []
+  detailFollowUpList.value = []
+  detailStatusHistoryList.value = []
+  Promise.all([
+    getChronicDisease(row.id),
+    listMedicationPlan({ pageNum: 1, pageSize: 1000, chronicDiseaseId: row.id }),
+    listIndicator({ pageNum: 1, pageSize: 1000, chronicDiseaseId: row.id }),
+    listFollowUp({ pageNum: 1, pageSize: 1000, chronicDiseaseId: row.id }),
+    listStatusHistory({ pageNum: 1, pageSize: 1000, chronicDiseaseId: row.id })
+  ])
+    .then(([detailRes, planRes, indicatorRes, followUpRes, historyRes]) => {
+      detailRecord.value = detailRes.data || row
+      detailPlanList.value = planRes.rows || []
+      detailIndicatorList.value = indicatorRes.rows || []
+      detailFollowUpList.value = followUpRes.rows || []
+      detailStatusHistoryList.value = historyRes.rows || []
+    })
+    .finally(() => {
+      detailLoading.value = false
+    })
+}
+
+function reloadDiseaseManageData() {
+  if (!detailRecord.value.id) {
+    return
+  }
+  Promise.all([
+    listIndicator({ pageNum: 1, pageSize: 1000, chronicDiseaseId: detailRecord.value.id }),
+    listFollowUp({ pageNum: 1, pageSize: 1000, chronicDiseaseId: detailRecord.value.id }),
+    listStatusHistory({ pageNum: 1, pageSize: 1000, chronicDiseaseId: detailRecord.value.id })
+  ]).then(([indicatorRes, followUpRes, historyRes]) => {
+    detailIndicatorList.value = indicatorRes.rows || []
+    detailFollowUpList.value = followUpRes.rows || []
+    detailStatusHistoryList.value = historyRes.rows || []
+  })
 }
 
 /** 新增按钮操作 */
@@ -349,6 +722,7 @@ function handleDiseaseChange(diseaseId) {
     const disease = diseaseList.value.find((item) => item.id === diseaseId)
     if (disease) {
       form.value.diseaseName = disease.name
+      form.value.diseaseCode = disease.code || form.value.diseaseCode
     }
   }
 }
@@ -394,10 +768,243 @@ function handleDelete(row) {
     .catch(() => {})
 }
 
+function formatDate(date) {
+  if (!date) return ''
+  if (Array.isArray(date)) {
+    return `${date[0]}-${String(date[1]).padStart(2, '0')}-${String(date[2]).padStart(2, '0')}`
+  }
+  if (typeof date === 'string') {
+    return date.substring(0, 10)
+  }
+  return ''
+}
+
+function padDate(value) {
+  return String(value).padStart(2, '0')
+}
+
+function nowDateTime() {
+  const date = new Date()
+  return `${date.getFullYear()}-${padDate(date.getMonth() + 1)}-${padDate(date.getDate())} ${padDate(date.getHours())}:${padDate(date.getMinutes())}:${padDate(
+    date.getSeconds()
+  )}`
+}
+
+function nowDate() {
+  return nowDateTime().substring(0, 10)
+}
+
+function handleCreateMedicationPlan(row) {
+  if (!row || !row.id) {
+    return
+  }
+  router.push({
+    path: '/health/medicationPlan',
+    query: {
+      personId: row.personId,
+      chronicDiseaseId: row.id,
+      diseaseName: row.diseaseName || ''
+    }
+  })
+}
+
+function resetIndicatorForm(row = detailRecord.value) {
+  indicatorForm.value = {
+    id: null,
+    chronicDiseaseId: row.id,
+    personId: row.personId,
+    indicatorType: 'blood_pressure_systolic',
+    indicatorName: '收缩压',
+    measureTime: nowDateTime(),
+    indicatorValue: null,
+    indicatorUnit: 'mmHg',
+    targetMin: null,
+    targetMax: null,
+    status: 1,
+    notes: null
+  }
+  proxy.resetForm('indicatorRef')
+}
+
+function handleIndicatorTypeChange(value) {
+  const option = indicatorOptions.find((item) => item.value === value)
+  if (option && value !== 'custom') {
+    indicatorForm.value.indicatorName = option.label
+    indicatorForm.value.indicatorUnit = option.unit
+  }
+}
+
+function handleAddIndicator() {
+  resetIndicatorForm()
+  indicatorTitle.value = '新增指标监测'
+  indicatorOpen.value = true
+}
+
+function handleUpdateIndicator(row) {
+  indicatorForm.value = { ...row }
+  indicatorTitle.value = '编辑指标监测'
+  indicatorOpen.value = true
+}
+
+function submitIndicatorForm() {
+  proxy.$refs.indicatorRef.validate((valid) => {
+    if (!valid) return
+    const request = indicatorForm.value.id ? updateIndicator : addIndicator
+    request(indicatorForm.value).then(() => {
+      proxy.$modal.msgSuccess(indicatorForm.value.id ? '修改成功' : '新增成功')
+      indicatorOpen.value = false
+      reloadDiseaseManageData()
+    })
+  })
+}
+
+function handleDeleteIndicator(row) {
+  proxy.$modal
+    .confirm('是否确认删除该指标记录？')
+    .then(() => {
+      return delIndicator(row.id)
+    })
+    .then(() => {
+      proxy.$modal.msgSuccess('删除成功')
+      reloadDiseaseManageData()
+    })
+    .catch(() => {})
+}
+
+function resetFollowUpForm(row = detailRecord.value) {
+  followUpForm.value = {
+    id: null,
+    chronicDiseaseId: row.id,
+    personId: row.personId,
+    followUpType: 1,
+    followUpDate: nowDate(),
+    hospital: row.hospital || null,
+    department: row.department || null,
+    doctor: row.mainDoctor || null,
+    checkItems: null,
+    result: null,
+    nextFollowUpDate: null,
+    status: 1,
+    notes: null
+  }
+  proxy.resetForm('followUpRef')
+}
+
+function handleAddFollowUp() {
+  resetFollowUpForm()
+  followUpTitle.value = '新增复诊随访'
+  followUpOpen.value = true
+}
+
+function handleUpdateFollowUp(row) {
+  followUpForm.value = { ...row }
+  followUpTitle.value = '编辑复诊随访'
+  followUpOpen.value = true
+}
+
+function submitFollowUpForm() {
+  proxy.$refs.followUpRef.validate((valid) => {
+    if (!valid) return
+    const request = followUpForm.value.id ? updateFollowUp : addFollowUp
+    request(followUpForm.value).then(() => {
+      proxy.$modal.msgSuccess(followUpForm.value.id ? '修改成功' : '新增成功')
+      followUpOpen.value = false
+      reloadDiseaseManageData()
+    })
+  })
+}
+
+function handleDeleteFollowUp(row) {
+  proxy.$modal
+    .confirm('是否确认删除该复诊随访记录？')
+    .then(() => {
+      return delFollowUp(row.id)
+    })
+    .then(() => {
+      proxy.$modal.msgSuccess('删除成功')
+      reloadDiseaseManageData()
+    })
+    .catch(() => {})
+}
+
 // 初始化
 getMemberList()
 getDiseaseList()
 getList()
 </script>
 
-<style scoped></style>
+<style scoped>
+.detail-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.disease-detail {
+  padding: 0 4px 24px;
+}
+
+.detail-section {
+  margin-top: 20px;
+}
+
+.detail-section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.indicator-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.indicator-summary-item {
+  padding: 12px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  background: #fafafa;
+}
+
+.indicator-name {
+  font-size: 13px;
+  color: #606266;
+}
+
+.indicator-value {
+  margin: 8px 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.indicator-value span {
+  margin-left: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #909399;
+}
+
+.range-separator {
+  margin: 0 10px;
+  color: #909399;
+}
+
+.status-history-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-history-text {
+  margin-top: 6px;
+  color: #606266;
+  line-height: 1.5;
+}
+</style>
diff --git a/src/views/health/healthRecord/index.vue b/src/views/health/healthRecord/index.vue
index 4430cea..ac6f18d 100644
--- a/src/views/health/healthRecord/index.vue
+++ b/src/views/health/healthRecord/index.vue
@@ -41,6 +41,7 @@
         <div class="operate-btn-con">
           <el-button @click="handleAdd" icon="Plus" v-hasPermi="['health:healthRecord:add']">新增</el-button>
           <el-button :disabled="multiple" icon="Delete" @click="handleDelete" v-hasPermi="['health:healthRecord:remove']">删除</el-button>
+          <el-button :disabled="single" icon="Download" @click="handleFullExport()" v-hasPermi="['health:healthRecord:export']">完整导出</el-button>
           <!-- <el-button @click="handleExport" icon="Download" v-hasPermi="['health:healthRecord:export']">导出</el-button> -->
         </div>
       </div>
@@ -323,6 +324,7 @@ const processRecordList = ref([])
 
 const operateList = ref([
   { id: 'view', icon: 'View', title: '查看', hasPermi: ['health:healthRecord:query'] },
+  { id: 'fullExport', icon: 'Download', title: '完整导出', hasPermi: ['health:healthRecord:export'] },
   { id: 'edit', icon: 'Edit', title: '修改', hasPermi: ['health:healthRecord:edit'] },
   { id: 'delete', icon: 'Delete', title: '删除', hasPermi: ['health:healthRecord:remove'] }
 ])
@@ -381,6 +383,9 @@ const handleOperate = (operate, row) => {
     case 'edit':
       handleUpdate(row)
       break
+    case 'fullExport':
+      handleFullExport(row)
+      break
     case 'delete':
       handleDelete(row)
       break
@@ -623,6 +628,22 @@ function handleExport() {
   )
 }
 
+function handleFullExport(row) {
+  const recordId = row && row.id ? row.id : ids.value[0]
+  const recordName = row && row.name ? row.name : '健康档案'
+  if (!recordId) {
+    proxy.$modal.msgWarning('请选择要导出的健康档案')
+    return
+  }
+  proxy.download(
+    'health/analysis/recordFullExport',
+    {
+      recordId
+    },
+    `${recordName}_完整信息_${new Date().getTime()}.xlsx`
+  )
+}
+
 getList()
 getPersonList()
 </script>
diff --git a/src/views/health/healthScreen/index.vue b/src/views/health/healthScreen/index.vue
new file mode 100644
index 0000000..3365e5f
--- /dev/null
+++ b/src/views/health/healthScreen/index.vue
@@ -0,0 +1,1864 @@
+<template>
+  <div class="health-overview-screen">
+    <div class="screen-layer screen-mesh"></div>
+    <div class="screen-layer screen-glow"></div>
+
+    <header class="screen-header">
+      <div class="brand">
+        <span class="brand-mark"></span>
+        <div>
+          <h1>健康总览态势大屏</h1>
+          <p>{{ screenScopeText }} · 健康档案、体温、就医、用药、活动数据监测</p>
+        </div>
+      </div>
+      <div class="header-center">
+        <div class="index-card" :class="healthIndexClass">
+          <span>综合健康指数</span>
+          <strong>{{ healthIndex }}</strong>
+          <em>{{ healthIndexText }}</em>
+        </div>
+      </div>
+      <div class="header-actions">
+        <el-select v-model="selectedPersonId" class="member-filter" placeholder="全部成员" filterable clearable :loading="personLoading" @change="loadScreen">
+          <el-option label="全部成员" :value="null" />
+          <el-option v-for="item in personOptions" :key="item.id" :label="item.name || '未命名成员'" :value="item.id" />
+        </el-select>
+        <div class="screen-status">
+          <span class="status-dot"></span>
+          <span class="status-date">{{ nowParts.date }}</span>
+          <strong>{{ nowParts.time }}</strong>
+        </div>
+        <el-button type="primary" icon="Refresh" :loading="loading" class="screen-btn" @click="loadScreen">刷新</el-button>
+      </div>
+    </header>
+
+    <main v-loading="loading" class="screen-main">
+      <section class="kpi-grid">
+        <div v-for="item in kpiItems" :key="item.key" class="kpi-card">
+          <div class="kpi-icon" :class="item.type">{{ item.icon }}</div>
+          <span>{{ item.label }}</span>
+          <strong :class="item.className">{{ item.value }}</strong>
+          <em>{{ item.desc }}</em>
+        </div>
+      </section>
+
+      <section class="dashboard-grid">
+        <div class="screen-panel grid-record">
+          <PanelHead
+            title="档案结构"
+            :sub-title="`人员档案数排行 · ${formatNumber(summary.personCount)} 人 / ${formatNumber(summary.healthRecordCount)} 份档案`"
+          />
+          <div class="double-chart">
+            <div ref="recordStateChartRef" class="chart"></div>
+            <div ref="recordTypeChartRef" class="chart"></div>
+          </div>
+          <div class="mini-stat-row">
+            <div>
+              <span>进行中</span>
+              <strong>{{ formatNumber(record.activeCount) }}</strong>
+            </div>
+            <div>
+              <span>已康复</span>
+              <strong>{{ formatNumber(record.recoveredCount) }}</strong>
+            </div>
+          </div>
+        </div>
+
+        <div class="screen-panel grid-index">
+          <PanelHead title="总览趋势" sub-title="体温 / 就医 / 用药 / 档案" />
+          <div class="index-layout">
+            <div class="score-ring" :style="{ '--score': `${healthIndex}%` }">
+              <strong>{{ healthIndex }}</strong>
+              <span>{{ healthIndexText }}</span>
+            </div>
+            <div class="risk-matrix">
+              <div v-for="item in riskCards" :key="item.label" :class="['risk-item', item.level]">
+                <span>{{ item.label }}</span>
+                <strong>{{ item.value }}</strong>
+                <em>{{ item.desc }}</em>
+              </div>
+            </div>
+          </div>
+          <div ref="trendChartRef" class="chart trend-chart"></div>
+        </div>
+
+        <div class="screen-panel grid-rank">
+          <PanelHead title="成员风险指数排行" :sub-title="`Top ${personRankList.length}`" />
+          <div class="person-rank-list">
+            <div
+              v-for="(item, index) in personRankList"
+              :key="`${item.personName}-${index}`"
+              class="person-rank-row"
+              :style="{ '--percent': `${item.percent}%` }"
+            >
+              <span>{{ String(index + 1).padStart(2, '0') }}</span>
+              <div>
+                <strong>{{ item.personName || '--' }}</strong>
+                <em
+                  >{{ item.riskLevel }} · 发热{{ formatNumber(item.feverDayCount) }}天 · 就医{{ formatNumber(item.doctorCount) }}次 · 用药{{
+                    formatNumber(item.marCount)
+                  }}次</em
+                >
+              </div>
+              <b>{{ item.riskScore }}<small>分</small></b>
+              <i></i>
+            </div>
+            <el-empty v-if="!personRankList.length" description="暂无排行数据" :image-size="72" />
+          </div>
+        </div>
+
+        <div class="screen-panel grid-temp">
+          <PanelHead title="体温风险监测" :sub-title="`最近 ${formatNumber(temperature.totalCount)} 条`" />
+          <div ref="temperatureChartRef" class="chart panel-chart"></div>
+          <div class="temp-bands">
+            <div v-for="item in tempBands" :key="item.label">
+              <span>{{ item.label }}</span>
+              <strong>{{ formatNumber(item.value) }}</strong>
+            </div>
+          </div>
+        </div>
+
+        <div class="screen-panel grid-medicine">
+          <PanelHead title="用药频次排行" :sub-title="`近一年 · 共 ${medicineRankList.length} 种药品 / 图表Top5`" />
+          <div ref="medicineChartRef" class="chart medicine-chart"></div>
+          <div class="medicine-list">
+            <div v-for="(item, index) in medicineRankList" :key="`${item.name}-${index}`" class="medicine-row" :style="{ '--percent': `${item.percent}%` }">
+              <span>{{ String(index + 1).padStart(2, '0') }}</span>
+              <strong>{{ item.name }}</strong>
+              <em>{{ formatNumber(item.count) }}次 / {{ formatNumber(item.useDays) }}天</em>
+              <i></i>
+            </div>
+            <el-empty v-if="!medicineRankList.length" description="暂无用药数据" :image-size="72" />
+          </div>
+        </div>
+
+        <div class="screen-panel grid-doctor">
+          <PanelHead title="就医费用分析" :sub-title="`近一年 · ${formatMoney(doctor.doctorCost)}`" />
+          <div ref="doctorChartRef" class="chart panel-chart"></div>
+          <div class="doctor-summary">
+            <div>
+              <span>平均就医费用</span>
+              <strong>{{ formatMoney(doctor.avgDoctorCost) }}</strong>
+            </div>
+            <div>
+              <span>医院数量</span>
+              <strong>{{ formatNumber(doctor.hospitalCount) }}</strong>
+            </div>
+            <div>
+              <span>医生数量</span>
+              <strong>{{ formatNumber(doctor.doctorTotalCount) }}</strong>
+            </div>
+          </div>
+        </div>
+
+        <div class="screen-panel grid-activity">
+          <PanelHead title="活动与费用趋势" sub-title="最新 50 条" />
+          <div class="activity-summary-line">
+            <span>{{ formatNumber(summary.activityCount) }} 次活动</span>
+            <span>费用 {{ formatMoney(summary.activityCost) }}</span>
+          </div>
+          <div ref="activityChartRef" class="chart panel-chart activity-chart"></div>
+          <div class="activity-list">
+            <div v-for="(item, index) in activity.recentList || []" :key="`${item.id || index}`">
+              <strong>{{ item.name || '活动记录' }}</strong>
+              <span>{{ formatDateTime(item.startTime) }}</span>
+              <em>{{ item.place || item.partner || '--' }}</em>
+              <b>费用 {{ formatMoney(item.totalCost) }}</b>
+            </div>
+            <el-empty v-if="!(activity.recentList || []).length" description="暂无活动记录" :image-size="72" />
+          </div>
+        </div>
+
+        <div class="screen-panel grid-events">
+          <PanelHead title="健康事件动态" :sub-title="`最新 ${eventList.length} / 50 条`" />
+          <div class="event-list">
+            <div v-for="(item, index) in eventList" :key="`${item.type}-${item.time}-${index}`" class="event-row">
+              <span :class="eventClass(item.type)">{{ item.type }}</span>
+              <strong>{{ item.title }}</strong>
+              <p>{{ item.personName }} · {{ item.time || '--' }}</p>
+              <em>{{ item.value }}</em>
+            </div>
+            <el-empty v-if="!eventList.length" description="暂无健康事件" :image-size="72" />
+          </div>
+        </div>
+
+        <div class="screen-panel grid-suggest">
+          <PanelHead title="健康运营建议" sub-title="自动生成" />
+          <div class="suggestion-list">
+            <div v-for="(item, index) in suggestionList" :key="`${item.title}-${index}`" :class="['suggestion-row', item.level]">
+              <span>{{ index + 1 }}</span>
+              <div>
+                <strong>{{ item.title }}</strong>
+                <p>{{ item.content }}</p>
+              </div>
+            </div>
+            <el-empty v-if="!suggestionList.length" description="暂无建议" :image-size="72" />
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup name="HealthScreen">
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import { getHealthScreen } from '@/api/health/statisticAnalysis'
+import { listPerson } from '@/api/health/person'
+
+const PanelHead = defineComponent({
+  name: 'PanelHead',
+  props: {
+    title: { type: String, required: true },
+    subTitle: { type: String, default: '' }
+  },
+  setup(props) {
+    return () => h('div', { class: 'panel-head' }, [h('span', props.title), h('em', props.subTitle)])
+  }
+})
+
+const loading = ref(false)
+const personLoading = ref(false)
+const screenData = ref({})
+const selectedPersonId = ref(null)
+const personOptions = ref([])
+const nowTime = ref('')
+const recordStateChartRef = ref(null)
+const recordTypeChartRef = ref(null)
+const trendChartRef = ref(null)
+const temperatureChartRef = ref(null)
+const medicineChartRef = ref(null)
+const doctorChartRef = ref(null)
+const activityChartRef = ref(null)
+
+let recordStateChart = null
+let recordTypeChart = null
+let trendChart = null
+let temperatureChart = null
+let medicineChart = null
+let doctorChart = null
+let activityChart = null
+let clockTimer = null
+
+const nowParts = computed(() => {
+  const [date = '', time = ''] = nowTime.value.split(' ')
+  return { date, time }
+})
+const summary = computed(() => screenData.value.summary || {})
+const temperature = computed(() => screenData.value.temperature || {})
+const medicine = computed(() => screenData.value.medicine || {})
+const doctor = computed(() => screenData.value.doctor || {})
+const activity = computed(() => screenData.value.activity || {})
+const record = computed(() => screenData.value.record || {})
+const eventList = computed(() => screenData.value.eventList || [])
+const suggestionList = computed(() => screenData.value.suggestionList || [])
+const healthIndex = computed(() => Number(summary.value.healthIndex || 0))
+const visibleRecordStateList = computed(() => filterUnsetList(record.value.stateList))
+const visiblePersonRecordList = computed(() => (record.value.personRecordList || []).filter((item) => String(item.name || '').trim()))
+const healthIndexText = computed(() => {
+  if (healthIndex.value >= 85) return '整体平稳'
+  if (healthIndex.value >= 70) return '持续观察'
+  return '重点关注'
+})
+const healthIndexClass = computed(() => {
+  if (healthIndex.value >= 85) return 'good'
+  if (healthIndex.value >= 70) return 'watch'
+  return 'danger'
+})
+const screenScopeText = computed(() => {
+  if (!selectedPersonId.value) return '全部成员视角'
+  return `${selectedPersonName.value || '当前成员'}视角`
+})
+const selectedPersonName = computed(() => {
+  const person = personOptions.value.find((item) => item.id === selectedPersonId.value)
+  return person?.name || summary.value.selectedPersonName || ''
+})
+
+const kpiItems = computed(() => [
+  { key: 'person', label: '成员总数', value: formatNumber(summary.value.personCount), desc: '纳入健康管理成员', icon: '人', type: 'blue' },
+  {
+    key: 'record',
+    label: '健康档案',
+    value: formatNumber(summary.value.healthRecordCount),
+    desc: `人均 ${formatNumber(summary.value.avgRecordPerPerson)} 份`,
+    icon: '档',
+    type: 'green'
+  },
+  {
+    key: 'doctor',
+    label: '就医次数',
+    value: formatNumber(summary.value.doctorCount),
+    desc: `费用 ${formatMoney(summary.value.doctorCost)}`,
+    icon: '医',
+    type: 'gold'
+  },
+  {
+    key: 'temperature',
+    label: '体温记录',
+    value: formatNumber(summary.value.temperatureTotalCount),
+    desc: `发热 ${formatNumber(summary.value.feverDayCount)} 天`,
+    icon: '温',
+    type: 'red',
+    className: Number(summary.value.feverDayCount || 0) > 0 ? 'warning' : ''
+  },
+  {
+    key: 'medicine',
+    label: '用药记录',
+    value: formatNumber(summary.value.marCount),
+    desc: `${formatNumber(summary.value.medicalTypeCount)} 种药品`,
+    icon: '药',
+    type: 'green'
+  },
+  {
+    key: 'activity',
+    label: '活动记录',
+    value: formatNumber(summary.value.activityCount),
+    desc: `费用 ${formatMoney(summary.value.activityCost)}`,
+    icon: '动',
+    type: 'blue'
+  }
+])
+
+const riskCards = computed(() => [
+  {
+    label: '发热风险',
+    value: `${formatNumber(summary.value.feverDayCount)}天`,
+    desc: Number(summary.value.feverDayCount || 0) > 0 ? '存在发热记录' : '未见明显异常',
+    level: Number(summary.value.feverDayCount || 0) > 0 ? 'warning' : 'normal'
+  },
+  {
+    label: '档案活跃',
+    value: `${formatNumber(record.value.activeCount)}份`,
+    desc: '仍需持续跟踪',
+    level: Number(record.value.activeCount || 0) > 0 ? 'warning' : 'normal'
+  },
+  {
+    label: '就医压力',
+    value: formatMoney(summary.value.doctorCost),
+    desc: `${formatNumber(summary.value.doctorCount)}次就医`,
+    level: Number(summary.value.doctorCount || 0) > 0 ? 'normal' : 'info'
+  },
+  {
+    label: '数据完整度',
+    value: `${formatNumber(summary.value.temperatureTotalCount)}条`,
+    desc: '体温监测样本',
+    level: Number(summary.value.temperatureTotalCount || 0) > 0 ? 'normal' : 'info'
+  }
+])
+
+const tempBands = computed(() => [
+  { label: '正常', value: temperature.value.normalTempCount },
+  { label: '低热', value: temperature.value.lowerTempCount },
+  { label: '中热', value: temperature.value.middleTempCount },
+  { label: '高热', value: temperature.value.higherTempCount }
+])
+
+const medicineRankList = computed(() => {
+  const data = (medicine.value.marMapList || []).map((item) => ({
+    name: item.medicalName || item.name || '未命名药品',
+    count: Number(item.count || item.value || 0),
+    useDays: Number(item.useDays || 0)
+  }))
+  const max = Math.max(...data.map((item) => item.count), 1)
+  return data
+    .sort((a, b) => b.count - a.count)
+    .map((item, index) => ({
+      ...item,
+      rankLabel: `Top${index + 1}`,
+      shortName: formatMedicineShortName(item.name),
+      percent: Math.round((item.count / max) * 100)
+    }))
+})
+
+const personRankList = computed(() => {
+  const data = (screenData.value.personRankList || []).map((item) => ({
+    ...item,
+    riskScore: Number(item.riskScore || 0),
+    doctorCount: Number(item.doctorCount || 0),
+    feverDayCount: Number(item.feverDayCount || 0),
+    marCount: Number(item.marCount || 0)
+  }))
+  return data.map((item) => ({
+    ...item,
+    percent: Math.max(8, Math.min(100, Math.round(item.riskScore)))
+  }))
+})
+
+function loadScreen() {
+  loading.value = true
+  const query = selectedPersonId.value ? { id: selectedPersonId.value } : {}
+  return getHealthScreen(query)
+    .then((response) => {
+      screenData.value = response.data || {}
+      nextTick(renderCharts)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function loadPersonOptions() {
+  personLoading.value = true
+  return listPerson({ pageNum: 1, pageSize: 999 })
+    .then((response) => {
+      personOptions.value = response.rows || response.data || []
+      if (!selectedPersonId.value && personOptions.value.length) {
+        selectedPersonId.value = personOptions.value[0].id
+      }
+    })
+    .finally(() => {
+      personLoading.value = false
+    })
+}
+
+function initScreen() {
+  return loadPersonOptions().finally(loadScreen)
+}
+
+function renderCharts() {
+  renderRecordStateChart()
+  renderRecordTypeChart()
+  renderTrendChart()
+  renderTemperatureChart()
+  renderMedicineChart()
+  renderDoctorChart()
+  renderActivityChart()
+}
+
+function textStyle(size = 11) {
+  return { color: '#9eb8d8', fontSize: size }
+}
+
+function tooltipStyle(color = '#27e0ff') {
+  return {
+    backgroundColor: 'rgba(5,18,42,0.94)',
+    borderColor: color,
+    borderWidth: 1,
+    textStyle: { color: '#e8fbff' },
+    confine: true,
+    extraCssText: 'box-shadow:0 8px 24px rgba(0,0,0,.35);border-radius:6px;'
+  }
+}
+
+function filterUnsetList(list = []) {
+  return (list || []).filter((item) => {
+    const name = String(item.name || '').trim()
+    return name && name !== '未设置' && name.toLowerCase() !== 'unknown'
+  })
+}
+
+function formatChartLabel(value, rowLength = 9, maxRows = 2) {
+  const text = String(value || '')
+  if (text.length <= rowLength) return text
+  const rows = []
+  for (let i = 0; i < text.length && rows.length < maxRows; i += rowLength) {
+    rows.push(text.slice(i, i + rowLength))
+  }
+  if (text.length > rowLength * maxRows) {
+    rows[rows.length - 1] = `${rows[rows.length - 1].slice(0, Math.max(rowLength - 1, 1))}…`
+  }
+  return rows.join('\n')
+}
+
+function formatMedicineShortName(value) {
+  const text = String(value || '未命名药品').trim()
+  if (text.length <= 8) return text
+  return `${text.slice(0, 8)}…`
+}
+
+function renderRecordStateChart() {
+  if (!recordStateChartRef.value) return
+  recordStateChart && recordStateChart.dispose()
+  recordStateChart = echarts.init(recordStateChartRef.value)
+  const data = visibleRecordStateList.value
+  recordStateChart.setOption({
+    color: ['#27e0ff', '#58ffb7', '#ffcf5a', '#ff6f91'],
+    title: { text: '状态', left: 'center', top: '43%', textStyle: { color: '#dff7ff', fontSize: 13, fontWeight: 600 } },
+    tooltip: { trigger: 'item', ...tooltipStyle() },
+    series: [
+      {
+        type: 'pie',
+        radius: ['48%', '66%'],
+        center: ['50%', '56%'],
+        avoidLabelOverlap: true,
+        label: { color: '#dff7ff', formatter: '{b}\n{c}', lineHeight: 16, fontSize: 11 },
+        labelLine: { length: 8, length2: 10, lineStyle: { color: 'rgba(188,225,255,0.45)' } },
+        data
+      }
+    ]
+  })
+}
+
+function renderRecordTypeChart() {
+  if (!recordTypeChartRef.value) return
+  recordTypeChart && recordTypeChart.dispose()
+  recordTypeChart = echarts.init(recordTypeChartRef.value)
+  const data = visiblePersonRecordList.value.slice(0, 8).reverse()
+  recordTypeChart.setOption({
+    color: ['#58ffb7', '#148dff', '#ffcf5a', '#ff7a59', '#b681ff'],
+    grid: { left: 58, right: 28, top: 18, bottom: 24, containLabel: false },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      ...tooltipStyle('#58ffb7'),
+      formatter: (params) => {
+        const item = Array.isArray(params) ? params[0] : params
+        return `${escapeHtml(item.name)}<br/>健康档案：${formatNumber(item.value)}份`
+      }
+    },
+    xAxis: {
+      type: 'value',
+      minInterval: 1,
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: textStyle()
+    },
+    yAxis: {
+      type: 'category',
+      data: data.map((item) => item.name),
+      axisLabel: { color: '#dff7ff', fontSize: 11, formatter: (value) => formatChartLabel(value, 4, 1) },
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } },
+      axisTick: { show: false }
+    },
+    series: [
+      {
+        name: '健康档案',
+        type: 'bar',
+        barWidth: 12,
+        data: data.map((item) => Number(item.value || 0)),
+        label: { show: true, position: 'right', color: '#dff7ff', fontSize: 11, formatter: '{c}份' },
+        itemStyle: {
+          borderRadius: [0, 8, 8, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: '#148dff' },
+            { offset: 1, color: '#58ffb7' }
+          ])
+        }
+      }
+    ]
+  })
+}
+
+function renderTrendChart() {
+  if (!trendChartRef.value) return
+  trendChart && trendChart.dispose()
+  trendChart = echarts.init(trendChartRef.value)
+  const recordMonth = record.value.monthList || []
+  const temperatureDays = temperature.value.tableList || []
+  const medicineDays = medicine.value.marList || []
+  const doctorDays = doctor.value.doctorCountList || []
+  const xData = mergeTimes(recordMonth, temperatureDays, medicineDays, doctorDays).slice(-12)
+  trendChart.setOption({
+    color: ['#27e0ff', '#ff6f91', '#58ffb7', '#ffcf5a'],
+    grid: { left: 42, right: 18, top: 28, bottom: 28 },
+    tooltip: { trigger: 'axis', ...tooltipStyle() },
+    legend: { top: 0, right: 8, textStyle: textStyle(), itemWidth: 10, itemHeight: 8 },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: textStyle(),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: textStyle()
+    },
+    series: [
+      { name: '档案', type: 'line', smooth: true, data: mapSeries(recordMonth, xData), symbolSize: 6 },
+      { name: '体温', type: 'line', smooth: true, data: mapSeries(temperatureDays, xData, 'count'), symbolSize: 6 },
+      { name: '用药', type: 'line', smooth: true, data: mapSeries(medicineDays, xData), symbolSize: 6 },
+      { name: '就医', type: 'bar', barWidth: 12, data: mapSeries(doctorDays, xData), itemStyle: { borderRadius: [6, 6, 0, 0] } }
+    ]
+  })
+}
+
+function renderTemperatureChart() {
+  if (!temperatureChartRef.value) return
+  temperatureChart && temperatureChart.dispose()
+  temperatureChart = echarts.init(temperatureChartRef.value)
+  const data = temperature.value.tableList || []
+  temperatureChart.setOption({
+    color: ['#27e0ff', '#ff6f91'],
+    grid: { left: 42, right: 18, top: 30, bottom: 34 },
+    tooltip: { trigger: 'axis', ...tooltipStyle() },
+    xAxis: {
+      type: 'category',
+      data: data.map((item) => item.time),
+      axisLabel: textStyle(),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } }
+    },
+    yAxis: {
+      type: 'value',
+      min: (value) => Math.max(34, Math.floor(value.min) - 1),
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: textStyle()
+    },
+    series: [
+      {
+        name: '最高体温',
+        type: 'line',
+        smooth: true,
+        data: data.map((item) => item.max),
+        symbolSize: 7,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(39,224,255,0.32)' },
+            { offset: 1, color: 'rgba(39,224,255,0.02)' }
+          ])
+        },
+        markLine: {
+          symbol: 'none',
+          label: { color: '#ffcf5a', formatter: '37.3℃' },
+          lineStyle: { color: '#ffcf5a', type: 'dashed' },
+          data: [{ yAxis: 37.3 }]
+        }
+      }
+    ]
+  })
+}
+
+function renderMedicineChart() {
+  if (!medicineChartRef.value) return
+  medicineChart && medicineChart.dispose()
+  medicineChart = echarts.init(medicineChartRef.value)
+  const data = medicineRankList.value.slice(0, 5).reverse()
+  medicineChart.setOption({
+    color: ['#58ffb7'],
+    grid: { left: 54, right: 24, top: 18, bottom: 24, containLabel: false },
+    tooltip: {
+      trigger: 'item',
+      ...tooltipStyle('#58ffb7'),
+      formatter: (params) => {
+        const item = data[params.dataIndex] || {}
+        return `${escapeHtml(item.name || params.name)}<br/>用药次数：${formatNumber(params.value)}次<br/>用药天数：${formatNumber(item.useDays)}天`
+      }
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: textStyle()
+    },
+    yAxis: {
+      type: 'category',
+      data: data.map((item) => item.rankLabel),
+      axisLabel: {
+        color: '#dff7ff',
+        fontSize: 12,
+        fontWeight: 700
+      },
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } },
+      axisTick: { show: false }
+    },
+    series: [
+      {
+        type: 'bar',
+        barWidth: 12,
+        data: data.map((item) => item.count),
+        label: {
+          show: true,
+          position: 'right',
+          color: '#dff7ff',
+          fontSize: 11,
+          formatter: (params) => {
+            const item = data[params.dataIndex] || {}
+            return item.shortName || ''
+          }
+        },
+        itemStyle: {
+          borderRadius: [0, 8, 8, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: '#148dff' },
+            { offset: 1, color: '#58ffb7' }
+          ])
+        }
+      }
+    ]
+  })
+}
+
+function renderDoctorChart() {
+  if (!doctorChartRef.value) return
+  doctorChart && doctorChart.dispose()
+  doctorChart = echarts.init(doctorChartRef.value)
+  const data = doctor.value.doctorCostList || []
+  doctorChart.setOption({
+    color: ['#ffcf5a'],
+    grid: { left: 46, right: 18, top: 24, bottom: 30 },
+    tooltip: { trigger: 'axis', ...tooltipStyle('#ffcf5a') },
+    xAxis: {
+      type: 'category',
+      data: data.map((item) => item.time),
+      axisLabel: textStyle(),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: textStyle()
+    },
+    series: [
+      {
+        name: '费用',
+        type: 'bar',
+        barWidth: 14,
+        data: data.map((item) => item.value),
+        itemStyle: {
+          borderRadius: [8, 8, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#ffcf5a' },
+            { offset: 1, color: 'rgba(255,117,85,0.36)' }
+          ])
+        }
+      }
+    ]
+  })
+}
+
+function renderActivityChart() {
+  if (!activityChartRef.value) return
+  activityChart && activityChart.dispose()
+  activityChart = echarts.init(activityChartRef.value)
+  const countData = activity.value.countTrend || []
+  const costData = activity.value.costTrend || []
+  const xData = mergeTimes(countData, costData).slice(-14)
+  activityChart.setOption({
+    color: ['#27e0ff', '#ffcf5a'],
+    grid: { left: 42, right: 58, top: 38, bottom: 28 },
+    tooltip: {
+      trigger: 'axis',
+      ...tooltipStyle(),
+      formatter(params) {
+        const list = Array.isArray(params) ? params : [params]
+        const title = list[0]?.axisValue || ''
+        const rows = list.map((item) => {
+          const value = item.seriesName === '活动费用' ? formatMoney(item.value) : `${formatNumber(item.value)} 次`
+          return `${item.marker}${item.seriesName}：${value}`
+        })
+        return [title, ...rows].join('<br/>')
+      }
+    },
+    legend: { top: 4, left: 58, textStyle: textStyle(), itemWidth: 10, itemHeight: 8 },
+    xAxis: {
+      type: 'category',
+      data: xData,
+      axisLabel: textStyle(),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } }
+    },
+    yAxis: [
+      { type: 'value', name: '次数', nameTextStyle: textStyle(), splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } }, axisLabel: textStyle() },
+      {
+        type: 'value',
+        name: '费用',
+        nameTextStyle: textStyle(),
+        splitLine: { show: false },
+        axisLabel: { ...textStyle(), formatter: (value) => (Number(value) >= 10000 ? `${(Number(value) / 10000).toFixed(1)}万` : value) }
+      }
+    ],
+    series: [
+      { name: '活动次数', type: 'bar', barWidth: 12, data: mapSeries(countData, xData), itemStyle: { borderRadius: [6, 6, 0, 0] } },
+      { name: '活动费用', type: 'line', yAxisIndex: 1, smooth: true, data: mapSeries(costData, xData), symbolSize: 6 }
+    ]
+  })
+}
+
+function resizeCharts() {
+  recordStateChart && recordStateChart.resize()
+  recordTypeChart && recordTypeChart.resize()
+  trendChart && trendChart.resize()
+  temperatureChart && temperatureChart.resize()
+  medicineChart && medicineChart.resize()
+  doctorChart && doctorChart.resize()
+  activityChart && activityChart.resize()
+}
+
+function disposeCharts() {
+  recordStateChart && recordStateChart.dispose()
+  recordTypeChart && recordTypeChart.dispose()
+  trendChart && trendChart.dispose()
+  temperatureChart && temperatureChart.dispose()
+  medicineChart && medicineChart.dispose()
+  doctorChart && doctorChart.dispose()
+  activityChart && activityChart.dispose()
+}
+
+function updateClock() {
+  nowTime.value = new Date().toLocaleString('zh-CN', {
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+function mergeTimes(...lists) {
+  return [...new Set(lists.flatMap((list) => (list || []).map((item) => item.time).filter(Boolean)))].sort()
+}
+
+function mapSeries(list, xData, valueKey = 'value') {
+  const map = new Map((list || []).map((item) => [item.time, Number(item[valueKey] || 0)]))
+  return xData.map((time) => map.get(time) || 0)
+}
+
+function formatNumber(value) {
+  const num = Number(value || 0)
+  if (!Number.isFinite(num)) return '0'
+  return num.toLocaleString('zh-CN')
+}
+
+function formatMoney(value) {
+  const num = Number(value || 0)
+  if (Math.abs(num) >= 10000) return `￥${(num / 10000).toFixed(1)}万`
+  return `￥${num.toFixed(2)}`
+}
+
+function formatDateTime(value) {
+  if (!value) return '--'
+  return String(value).replace('T', ' ').slice(0, 16)
+}
+
+function eventClass(type) {
+  const map = {
+    档案: 'record',
+    就医: 'doctor',
+    用药: 'medicine',
+    体温: 'temperature',
+    活动: 'activity'
+  }
+  return ['event-tag', map[type] || 'record']
+}
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => {
+    const map = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    }
+    return map[char]
+  })
+}
+
+onMounted(() => {
+  updateClock()
+  clockTimer = window.setInterval(updateClock, 1000)
+  initScreen()
+  window.addEventListener('resize', resizeCharts)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeCharts)
+  window.clearInterval(clockTimer)
+  disposeCharts()
+})
+</script>
+
+<style scoped lang="scss">
+.health-overview-screen {
+  position: relative;
+  isolation: isolate;
+  height: calc(100vh - 84px);
+  min-height: 720px;
+  padding: 16px 20px 24px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: #dff7ff;
+  background: radial-gradient(circle at 48% -14%, rgba(39, 224, 255, 0.24), transparent 32%), linear-gradient(145deg, #04162f 0%, #071d3d 42%, #031022 100%);
+  box-sizing: border-box;
+  scrollbar-color: #27e0ff rgba(4, 19, 42, 0.82);
+  scrollbar-width: thin;
+}
+
+.health-overview-screen::-webkit-scrollbar {
+  width: 8px;
+}
+
+.health-overview-screen::-webkit-scrollbar-track {
+  background: rgba(4, 19, 42, 0.82);
+}
+
+.health-overview-screen::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #27e0ff, #148dff);
+  border-radius: 8px;
+}
+
+.screen-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.screen-mesh {
+  background: linear-gradient(90deg, rgba(39, 224, 255, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(39, 224, 255, 0.06) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.92), transparent 82%);
+}
+
+.screen-glow {
+  background: radial-gradient(circle at 9% 18%, rgba(88, 255, 183, 0.14), transparent 22%),
+    radial-gradient(circle at 91% 30%, rgba(255, 207, 90, 0.13), transparent 24%);
+}
+
+.screen-header,
+.screen-main {
+  position: relative;
+  z-index: 1;
+}
+
+.screen-header {
+  display: grid;
+  grid-template-columns: minmax(420px, 1fr) 260px minmax(340px, 1fr);
+  align-items: center;
+  gap: 16px;
+  min-height: 76px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 0;
+
+  h1 {
+    margin: 0;
+    color: #effcff;
+    font-size: 32px;
+    font-weight: 800;
+    letter-spacing: 1px;
+    text-shadow: 0 0 22px rgba(39, 224, 255, 0.72);
+  }
+
+  p {
+    margin: 7px 0 0;
+    color: #9eb8d8;
+    font-size: 13px;
+  }
+}
+
+.brand-mark {
+  width: 72px;
+  height: 36px;
+  background: linear-gradient(90deg, #27e0ff, rgba(39, 224, 255, 0)), linear-gradient(180deg, rgba(39, 224, 255, 0.16), rgba(39, 224, 255, 0));
+  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
+}
+
+.header-center {
+  display: flex;
+  justify-content: center;
+}
+
+.index-card,
+.header-actions,
+.kpi-card,
+.screen-panel {
+  background: linear-gradient(145deg, rgba(8, 36, 75, 0.9), rgba(4, 20, 44, 0.78));
+  border: 1px solid rgba(92, 205, 255, 0.26);
+  box-shadow: inset 0 0 28px rgba(39, 224, 255, 0.05), 0 12px 34px rgba(0, 7, 18, 0.34);
+  backdrop-filter: blur(10px);
+}
+
+.index-card {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0 12px;
+  min-width: 220px;
+  min-height: 62px;
+  padding: 8px 18px;
+  border-radius: 8px;
+
+  span,
+  em {
+    color: #9eb8d8;
+    font-size: 12px;
+    font-style: normal;
+  }
+
+  strong {
+    grid-row: 1 / 3;
+    grid-column: 2;
+    color: #58ffb7;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+    font-size: 36px;
+    line-height: 1;
+  }
+}
+
+.index-card.watch strong {
+  color: #ffcf5a;
+}
+
+.index-card.danger strong {
+  color: #ff6f91;
+}
+
+.header-actions {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  min-height: 44px;
+  padding: 6px 8px 6px 12px;
+  border-radius: 8px;
+}
+
+.member-filter {
+  width: 168px;
+
+  :deep(.el-input__wrapper) {
+    height: 34px;
+    background: rgba(3, 18, 40, 0.78);
+    border: 1px solid rgba(92, 205, 255, 0.22);
+    border-radius: 4px;
+    box-shadow: inset 0 0 14px rgba(39, 224, 255, 0.08);
+  }
+
+  :deep(.el-input__inner) {
+    color: #dff7ff;
+    font-size: 12px;
+  }
+
+  :deep(.el-select__caret) {
+    color: #27e0ff;
+  }
+}
+
+.screen-status {
+  display: grid;
+  grid-template-columns: 8px auto auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 236px;
+  height: 32px;
+  padding: 0 12px;
+  color: #cfeeff;
+  background: linear-gradient(90deg, rgba(39, 224, 255, 0.14), rgba(88, 255, 183, 0.06));
+  border: 1px solid rgba(92, 205, 255, 0.22);
+  border-radius: 4px;
+
+  .status-dot {
+    width: 7px;
+    height: 7px;
+    background: #58ffb7;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(88, 255, 183, 0.86);
+  }
+
+  .status-date {
+    color: #9eb8d8;
+    font-size: 12px;
+  }
+
+  strong {
+    color: #effcff;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1;
+  }
+}
+
+.screen-btn {
+  width: 88px;
+  height: 36px;
+  border: none;
+  border-radius: 4px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  background: linear-gradient(90deg, #148dff, #27e0ff);
+  box-shadow: 0 0 16px rgba(39, 224, 255, 0.28);
+}
+
+.screen-main {
+  margin-top: 12px;
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.kpi-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  grid-template-rows: 18px 31px 18px;
+  gap: 1px 10px;
+  min-height: 94px;
+  padding: 14px 14px 12px;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 14px;
+    bottom: 14px;
+    width: 2px;
+    background: linear-gradient(180deg, #27e0ff, rgba(88, 255, 183, 0.45));
+  }
+
+  span,
+  em {
+    min-width: 0;
+    overflow: hidden;
+    color: #9eb8d8;
+    font-size: 12px;
+    font-style: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  strong {
+    min-width: 0;
+    overflow: hidden;
+    color: #27e0ff;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+    font-size: 25px;
+    line-height: 31px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  strong.warning {
+    color: #ff6f91;
+  }
+}
+
+.kpi-icon {
+  grid-row: 1 / 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  align-self: center;
+  color: #dff7ff;
+  background: rgba(39, 224, 255, 0.12);
+  border: 1px solid rgba(39, 224, 255, 0.28);
+  border-radius: 6px;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.kpi-icon.green {
+  color: #58ffb7;
+  border-color: rgba(88, 255, 183, 0.35);
+}
+
+.kpi-icon.gold {
+  color: #ffcf5a;
+  border-color: rgba(255, 207, 90, 0.35);
+}
+
+.kpi-icon.red {
+  color: #ff6f91;
+  border-color: rgba(255, 111, 145, 0.35);
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: minmax(320px, 0.95fr) minmax(520px, 1.42fr) minmax(340px, 1fr);
+  grid-template-rows: 360px 360px 340px;
+  grid-template-areas:
+    'record index rank'
+    'temp medicine doctor'
+    'activity events suggest';
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.screen-panel {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 72px;
+    height: 2px;
+    background: linear-gradient(90deg, #27e0ff, transparent);
+  }
+}
+
+.panel-head {
+  flex: 0 0 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  min-height: 42px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(126, 189, 255, 0.14);
+
+  span {
+    min-width: 0;
+    overflow: hidden;
+    color: #effcff;
+    font-size: 16px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    flex: 0 0 auto;
+    max-width: 58%;
+    overflow: hidden;
+    color: #8fb8d8;
+    font-size: 12px;
+    font-style: normal;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.chart {
+  width: 100%;
+  min-height: 0;
+}
+
+.grid-record {
+  grid-area: record;
+
+  .double-chart {
+    min-height: 218px;
+    padding-top: 8px;
+    grid-template-columns: 0.86fr 1.14fr;
+  }
+
+  .chart {
+    min-height: 218px;
+  }
+
+  .mini-stat-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.grid-index {
+  grid-area: index;
+}
+
+.grid-rank {
+  grid-area: rank;
+}
+
+.grid-temp {
+  grid-area: temp;
+}
+
+.grid-medicine {
+  grid-area: medicine;
+}
+
+.grid-doctor {
+  grid-area: doctor;
+}
+
+.grid-activity {
+  grid-area: activity;
+  display: grid;
+  grid-template-rows: 42px 30px minmax(142px, 1fr) minmax(118px, 0.72fr);
+}
+
+.grid-events {
+  grid-area: events;
+}
+
+.grid-suggest {
+  grid-area: suggest;
+}
+
+.double-chart {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.mini-stat-row,
+.temp-bands,
+.doctor-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  padding: 0 12px 12px;
+
+  div {
+    min-width: 0;
+    padding: 9px 10px;
+    background: rgba(3, 18, 40, 0.52);
+    border: 1px solid rgba(126, 189, 255, 0.12);
+    border-radius: 4px;
+  }
+
+  span,
+  strong {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    color: #8fb8d8;
+    font-size: 12px;
+  }
+
+  strong {
+    margin-top: 4px;
+    color: #27e0ff;
+    font-size: 18px;
+  }
+}
+
+.temp-bands {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.doctor-summary {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.index-layout {
+  display: grid;
+  grid-template-columns: 170px minmax(0, 1fr);
+  gap: 14px;
+  min-height: 138px;
+  padding: 16px 16px 8px;
+}
+
+.score-ring {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 142px;
+  height: 142px;
+  justify-self: center;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(4, 20, 44, 0.96) 55%, transparent 56%), conic-gradient(#58ffb7 var(--score), rgba(126, 189, 255, 0.16) 0);
+  box-shadow: 0 0 24px rgba(88, 255, 183, 0.18);
+
+  strong {
+    color: #effcff;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+    font-size: 38px;
+    line-height: 1;
+  }
+
+  span {
+    margin-top: 8px;
+    color: #9eb8d8;
+    font-size: 12px;
+  }
+}
+
+.risk-matrix {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 9px;
+}
+
+.risk-item {
+  min-width: 0;
+  padding: 10px 12px;
+  background: rgba(3, 18, 40, 0.52);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  span,
+  strong,
+  em {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span {
+    color: #8fb8d8;
+    font-size: 12px;
+  }
+
+  strong {
+    margin-top: 5px;
+    color: #27e0ff;
+    font-size: 20px;
+  }
+
+  em {
+    margin-top: 5px;
+    color: #9eb8d8;
+    font-size: 12px;
+    font-style: normal;
+  }
+}
+
+.risk-item.warning strong {
+  color: #ff6f91;
+}
+
+.risk-item.info strong {
+  color: #ffcf5a;
+}
+
+.trend-chart {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.panel-chart {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.activity-chart {
+  min-height: 150px;
+  padding: 0 8px;
+}
+
+.activity-summary-line {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  min-width: 0;
+  padding: 6px 14px 0;
+
+  span {
+    flex: 0 1 auto;
+    max-width: 48%;
+    overflow: hidden;
+    padding: 3px 8px;
+    color: #dff7ff;
+    background: rgba(39, 224, 255, 0.1);
+    border: 1px solid rgba(39, 224, 255, 0.2);
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 16px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.person-rank-list,
+.medicine-list,
+.event-list,
+.suggestion-list,
+.activity-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 12px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.person-rank-list::-webkit-scrollbar,
+.medicine-list::-webkit-scrollbar,
+.event-list::-webkit-scrollbar,
+.suggestion-list::-webkit-scrollbar,
+.activity-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.person-rank-list::-webkit-scrollbar-thumb,
+.medicine-list::-webkit-scrollbar-thumb,
+.event-list::-webkit-scrollbar-thumb,
+.suggestion-list::-webkit-scrollbar-thumb,
+.activity-list::-webkit-scrollbar-thumb {
+  background: rgba(39, 224, 255, 0.42);
+  border-radius: 6px;
+}
+
+.person-rank-row,
+.medicine-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 54px;
+  margin-bottom: 9px;
+  padding: 9px 10px;
+  overflow: hidden;
+  background: rgba(3, 18, 40, 0.54);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  i {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: var(--percent);
+    height: 2px;
+    background: linear-gradient(90deg, #148dff, #58ffb7);
+  }
+
+  > span {
+    color: #27e0ff;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+    font-size: 17px;
+  }
+
+  strong,
+  em {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  strong {
+    color: #effcff;
+    font-size: 14px;
+  }
+
+  em {
+    margin-top: 5px;
+    color: #8fb8d8;
+    font-size: 12px;
+    font-style: normal;
+  }
+
+  b {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 2px;
+    color: #ffcf5a;
+    font-size: 20px;
+
+    small {
+      font-size: 11px;
+      font-weight: 500;
+    }
+  }
+}
+
+.medicine-chart {
+  flex: 0 0 150px;
+  min-height: 150px;
+}
+
+.medicine-list {
+  padding-top: 0;
+}
+
+.medicine-row {
+  grid-template-columns: 32px minmax(0, 1fr) auto;
+  min-height: 50px;
+  margin-bottom: 7px;
+}
+
+.medicine-row strong,
+.medicine-row em {
+  overflow: visible;
+  text-overflow: initial;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.medicine-row strong {
+  line-height: 18px;
+}
+
+.medicine-row em {
+  line-height: 16px;
+}
+
+.event-row {
+  display: grid;
+  grid-template-columns: 48px minmax(150px, 0.86fr) minmax(220px, 1.1fr) minmax(70px, auto);
+  align-items: start;
+  gap: 10px;
+  min-height: 48px;
+  margin-bottom: 8px;
+  padding: 9px 10px;
+  background: rgba(3, 18, 40, 0.54);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  strong,
+  p,
+  em {
+    display: block;
+    min-width: 0;
+  }
+
+  strong {
+    color: #effcff;
+    font-size: 14px;
+    line-height: 20px;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  p {
+    margin: 0;
+    color: #8fb8d8;
+    font-size: 12px;
+    line-height: 18px;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  em {
+    color: #ffcf5a;
+    font-size: 12px;
+    font-style: normal;
+    line-height: 18px;
+    text-align: right;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+}
+
+.event-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  color: #27e0ff;
+  background: rgba(39, 224, 255, 0.12);
+  border: 1px solid rgba(39, 224, 255, 0.25);
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.event-tag.doctor,
+.event-tag.就医 {
+  color: #ffcf5a;
+  border-color: rgba(255, 207, 90, 0.32);
+}
+
+.event-tag.medicine,
+.event-tag.用药 {
+  color: #58ffb7;
+  border-color: rgba(88, 255, 183, 0.32);
+}
+
+.event-tag.temperature,
+.event-tag.体温 {
+  color: #ff6f91;
+  border-color: rgba(255, 111, 145, 0.32);
+}
+
+.activity-list {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 9px;
+}
+
+.activity-list > div {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px 10px;
+  padding: 10px;
+  background: rgba(3, 18, 40, 0.54);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  strong,
+  span,
+  em,
+  b {
+    min-width: 0;
+  }
+
+  strong {
+    overflow: hidden;
+    color: #effcff;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  span,
+  em,
+  b {
+    color: #8fb8d8;
+    font-size: 12px;
+    font-style: normal;
+  }
+
+  em {
+    overflow-wrap: anywhere;
+  }
+
+  b {
+    justify-self: end;
+    color: #ffcf5a;
+    font-weight: 600;
+  }
+}
+
+.suggestion-row {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr);
+  gap: 10px;
+  margin-bottom: 10px;
+  padding: 11px;
+  background: rgba(3, 18, 40, 0.54);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    color: #27e0ff;
+    background: rgba(39, 224, 255, 0.12);
+    border: 1px solid rgba(39, 224, 255, 0.28);
+    border-radius: 50%;
+    font-weight: 700;
+  }
+
+  strong {
+    color: #effcff;
+    font-size: 14px;
+  }
+
+  p {
+    margin: 6px 0 0;
+    color: #9eb8d8;
+    font-size: 12px;
+    line-height: 1.5;
+    word-break: break-word;
+  }
+}
+
+.suggestion-row.warning > span {
+  color: #ffcf5a;
+  border-color: rgba(255, 207, 90, 0.34);
+}
+
+.suggestion-row.info > span {
+  color: #58ffb7;
+  border-color: rgba(88, 255, 183, 0.34);
+}
+
+:deep(.el-loading-mask) {
+  background-color: rgba(3, 16, 34, 0.62);
+}
+
+:deep(.el-empty__description p) {
+  color: #8fb8d8;
+}
+
+@media (max-width: 1500px) {
+  .screen-header {
+    grid-template-columns: minmax(340px, 1fr) 220px minmax(310px, auto);
+    gap: 12px;
+  }
+
+  .brand {
+    gap: 12px;
+
+    h1 {
+      font-size: 28px;
+    }
+  }
+
+  .brand-mark {
+    width: 58px;
+  }
+
+  .index-card {
+    min-width: 200px;
+    padding-inline: 14px;
+  }
+
+  .screen-status {
+    min-width: 218px;
+    padding-inline: 10px;
+  }
+
+  .kpi-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .dashboard-grid {
+    grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.3fr);
+    grid-template-rows: repeat(5, 340px);
+    grid-template-areas:
+      'index index'
+      'record rank'
+      'temp medicine'
+      'doctor activity'
+      'events suggest';
+  }
+}
+
+@media (max-width: 1080px) {
+  .screen-header {
+    grid-template-columns: 1fr;
+  }
+
+  .header-center,
+  .header-actions {
+    justify-self: stretch;
+  }
+
+  .header-actions {
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .screen-status {
+    flex: 1 1 240px;
+    min-width: 0;
+  }
+
+  .screen-btn {
+    flex: 0 0 88px;
+  }
+
+  .dashboard-grid,
+  .kpi-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-grid {
+    grid-template-rows: none;
+    grid-template-areas:
+      'index'
+      'record'
+      'rank'
+      'temp'
+      'medicine'
+      'doctor'
+      'activity'
+      'events'
+      'suggest';
+  }
+
+  .screen-panel {
+    min-height: 340px;
+  }
+}
+</style>
diff --git a/src/views/health/medicationPlan/index.vue b/src/views/health/medicationPlan/index.vue
index a94b570..51e7025 100644
--- a/src/views/health/medicationPlan/index.vue
+++ b/src/views/health/medicationPlan/index.vue
@@ -104,10 +104,10 @@
                 <el-tooltip v-if="scope.row.status === 1" class="item" effect="dark" content="暂停" placement="top">
                   <el-button icon="VideoPause" v-hasPermi="['health:medicationPlan:edit']" circle @click="handlePause(scope.row)"></el-button>
                 </el-tooltip>
-                <el-tooltip v-if="scope.row.status === 2 || scope.row.status === 3" class="item" effect="dark" content="恢复" placement="top">
+                <el-tooltip v-if="scope.row.status === 2" class="item" effect="dark" content="恢复" placement="top">
                   <el-button icon="VideoPlay" v-hasPermi="['health:medicationPlan:edit']" circle @click="handleResume(scope.row)"></el-button>
                 </el-tooltip>
-                <el-tooltip v-if="scope.row.status !== 2" class="item" effect="dark" content="结束" placement="top">
+                <el-tooltip v-if="scope.row.status !== 3" class="item" effect="dark" content="结束" placement="top">
                   <el-button icon="Finished" v-hasPermi="['health:medicationPlan:edit']" circle @click="handleEnd(scope.row)"></el-button>
                 </el-tooltip>
                 <el-tooltip class="item" effect="dark" content="修改" placement="top">
@@ -234,6 +234,7 @@ import { listChronicDiseaseByMember } from '@/api/health/chronicDisease'
 import { Close } from '@element-plus/icons-vue'
 
 const { proxy } = getCurrentInstance()
+const route = useRoute()
 const { medication_frequency_type, medication_plan_status, medical_unit } = proxy.useDict('medication_frequency_type', 'medication_plan_status', 'medical_unit')
 
 const planList = ref([])
@@ -257,9 +258,11 @@ const data = reactive({
     pageSize: 10,
     planName: null,
     personId: null,
+    chronicDiseaseId: null,
     frequencyType: null,
     status: null,
-    keys: null
+    keys: null,
+    keyword: null
   },
   rules: {
     personId: [{ required: true, message: '请选择人员', trigger: 'change' }],
@@ -274,7 +277,8 @@ const { queryParams, form, rules } = toRefs(data)
 /** 查询用药计划列表 */
 function getList() {
   loading.value = true
-  listMedicationPlan(queryParams.value).then((response) => {
+  const params = { ...queryParams.value, keyword: queryParams.value.keys }
+  listMedicationPlan(params).then((response) => {
     planList.value = response.rows
     total.value = response.total
     loading.value = false
@@ -340,6 +344,7 @@ function handleQuery() {
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm('queryRef')
+  queryParams.value.chronicDiseaseId = null
   handleQuery()
 }
 
@@ -449,6 +454,26 @@ function handleAdd() {
   title.value = '添加用药计划'
 }
 
+function handleAddFromChronicDisease() {
+  const personId = route.query.personId ? Number(route.query.personId) : null
+  const chronicDiseaseId = route.query.chronicDiseaseId ? Number(route.query.chronicDiseaseId) : null
+  if (!personId || !chronicDiseaseId) {
+    return
+  }
+  reset()
+  form.value.personId = personId
+  form.value.chronicDiseaseId = chronicDiseaseId
+  form.value.planName = route.query.diseaseName ? `${route.query.diseaseName}用药计划` : null
+  queryParams.value.personId = personId
+  queryParams.value.chronicDiseaseId = chronicDiseaseId
+  listChronicDiseaseByMember(personId).then((res) => {
+    chronicDiseaseList.value = res.data || []
+  })
+  open.value = true
+  title.value = '添加用药计划'
+  getList()
+}
+
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset()
@@ -616,6 +641,7 @@ function handlePersonChange(personId) {
 getPersonList()
 getMedicineList()
 getList()
+handleAddFromChronicDisease()
 </script>
 
 <style scoped>
diff --git a/src/views/health/recordScreen/index.vue b/src/views/health/recordScreen/index.vue
new file mode 100644
index 0000000..ab1c8bb
--- /dev/null
+++ b/src/views/health/recordScreen/index.vue
@@ -0,0 +1,2039 @@
+<template>
+  <div class="health-screen">
+    <div class="screen-bg screen-bg-a"></div>
+    <div class="screen-bg screen-bg-b"></div>
+    <div class="screen-grid-bg"></div>
+
+    <header class="cockpit-header">
+      <div class="title-block">
+        <div class="title-wing"></div>
+        <div>
+          <h1>健康档案态势大屏</h1>
+          <p>{{ recordInfo.personName || '全部成员' }} · {{ recordInfo.name || '全部健康档案' }}</p>
+          <div class="title-meta">
+            <span>当前时间 {{ nowParts.date }} {{ nowParts.time }}</span>
+            <span>健康档案全量态势监测</span>
+          </div>
+        </div>
+        <div class="title-wing title-wing-right"></div>
+      </div>
+      <div class="screen-actions">
+        <span class="filter-label">筛选</span>
+        <el-select
+          v-model="queryParams.id"
+          placeholder="选择人员"
+          clearable
+          filterable
+          class="filter-select person-select"
+          popper-class="health-screen-popper"
+          @change="handlePersonChange"
+        >
+          <el-option v-for="person in personList" :key="person.id" :label="person.name" :value="person.id" />
+        </el-select>
+        <el-select
+          v-model="queryParams.recordId"
+          placeholder="选择健康档案"
+          clearable
+          filterable
+          class="filter-select record-select"
+          popper-class="health-screen-popper"
+          @change="handleRecordChange"
+        >
+          <el-option v-for="record in healthRecordList" :key="record.id" :label="record.name" :value="record.id" />
+        </el-select>
+        <el-button type="primary" icon="Refresh" :loading="loading" class="screen-btn screen-btn-primary" @click="loadScreen">刷新</el-button>
+        <el-button icon="Download" :disabled="!queryParams.recordId" class="screen-btn screen-btn-plain" @click="handleFullExport">导出</el-button>
+        <el-button icon="RefreshLeft" class="screen-btn screen-btn-plain" @click="resetQuery">重置</el-button>
+      </div>
+    </header>
+
+    <main v-loading="loading" class="cockpit-main">
+      <section class="top-overview">
+        <div class="record-focus">
+          <div class="record-main">
+            <div>
+              <div class="record-kicker">档案画像</div>
+              <div class="record-name">{{ recordInfo.name || '请选择健康档案' }}</div>
+            </div>
+            <div class="record-meta">
+              <span v-for="item in recordMetaItems" :key="item.label">{{ item.label }}：{{ item.value }}</span>
+            </div>
+          </div>
+          <div class="record-timeline">
+            <div>
+              <span>发生时间</span>
+              <strong>{{ formatDateTime(recordInfo.occurTime) }}</strong>
+            </div>
+            <div>
+              <span>康复时间</span>
+              <strong>{{ formatDateTime(recordInfo.rehabilitationTime) }}</strong>
+            </div>
+          </div>
+        </div>
+        <div class="metric-strip">
+          <div v-for="item in metricItems" :key="item.key" class="metric-card">
+            <span>{{ item.label }}</span>
+            <div class="metric-value">
+              <strong :class="item.className">{{ item.value }}</strong>
+              <em>{{ item.unit }}</em>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="fact-strip-panel">
+        <div class="fact-strip-head">
+          <span>档案要点</span>
+          <em>症状 / 原因</em>
+        </div>
+        <div class="fact-strip">
+          <div v-for="item in recordFacts" :key="item.label" class="fact-item">
+            <span>{{ item.label }}</span>
+            <strong>{{ item.value }}</strong>
+          </div>
+        </div>
+      </section>
+
+      <section class="cockpit-grid">
+        <div class="screen-panel profile-panel grid-profile">
+          <div class="panel-head">
+            <span>健康风险雷达</span>
+            <em>{{ healthScoreText }}</em>
+          </div>
+          <div class="risk-score">
+            <div class="score-ring">
+              <strong>{{ healthScore }}</strong>
+              <span>健康指数</span>
+            </div>
+            <div class="risk-list">
+              <div v-for="item in riskItems" :key="item.label" class="risk-row" :class="item.level">
+                <span>{{ item.label }}</span>
+                <strong>{{ item.value }}</strong>
+                <em>{{ item.desc }}</em>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="screen-panel main-trend-panel grid-trend">
+          <div class="panel-head">
+            <span>体温趋势</span>
+            <em>{{ temperatureList.length }}条体温数据 · 预警线37.3℃</em>
+          </div>
+          <div ref="temperatureChartRef" class="chart chart-large"></div>
+        </div>
+
+        <div class="screen-panel medicine-panel grid-medicine">
+          <div class="panel-head">
+            <span>用药频次排行</span>
+            <em>共 {{ medicineRankList.length }} 种药品 / 图表Top5</em>
+          </div>
+          <div ref="medicineChartRef" class="chart chart-mid"></div>
+          <div class="rank-list">
+            <div v-for="(item, index) in medicineRankList" :key="`${item.name}-${index}`" class="rank-row" :style="{ '--rank-width': `${item.percent}%` }">
+              <span>{{ item.rankNo }}</span>
+              <strong>{{ item.name }}</strong>
+              <em>{{ item.count }}次</em>
+              <i></i>
+            </div>
+            <el-empty v-if="!medicineRankList.length" description="暂无用药数据" :image-size="70" />
+          </div>
+        </div>
+
+        <div class="screen-panel grid-mix">
+          <div class="panel-head">
+            <span>数据结构</span>
+            <em>记录类型占比</em>
+          </div>
+          <div ref="recordMixChartRef" class="chart chart-mid"></div>
+        </div>
+
+        <div class="screen-panel timeline-panel grid-events">
+          <div class="panel-head">
+            <span>健康事件动态</span>
+            <em>最新 {{ eventItems.length }} 条</em>
+          </div>
+          <div class="event-stream">
+            <div v-for="item in eventItems" :key="`${item.type}-${item.time}-${item.title}`" class="event-row">
+              <span :class="['event-tag', item.type]">{{ item.label }}</span>
+              <div>
+                <strong>{{ item.title }}</strong>
+                <em>{{ item.time }}</em>
+              </div>
+              <b>{{ item.value }}</b>
+            </div>
+            <el-empty v-if="!eventItems.length" description="暂无健康事件" :image-size="70" />
+          </div>
+        </div>
+
+        <div class="screen-panel doctor-panel grid-doctor">
+          <div class="panel-head">
+            <span>就医费用趋势</span>
+            <em>{{ formatMoney(summary.doctorCost) }}</em>
+          </div>
+          <div ref="doctorChartRef" class="chart chart-mid"></div>
+        </div>
+      </section>
+
+      <section class="detail-grid">
+        <div class="screen-panel detail-panel">
+          <div class="panel-head detail-head">
+            <div>
+              <span>档案全量明细</span>
+              <strong>过程、就医、体温、用药记录联动展示</strong>
+            </div>
+            <em>{{ detailCountText }}</em>
+          </div>
+          <el-tabs v-model="activeTab" class="screen-tabs">
+            <el-tab-pane label="过程记录" name="process">
+              <el-table :data="processRecordList" height="260">
+                <el-table-column label="记录时间" prop="recordingTime" width="180" />
+                <el-table-column label="记录内容" prop="content" show-overflow-tooltip />
+                <!-- <el-table-column label="备注" prop="remark" show-overflow-tooltip /> -->
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="就医记录" name="doctor">
+              <el-table :data="doctorRecordList" height="260">
+                <el-table-column label="医院" prop="hospitalName" width="270" />
+                <el-table-column label="科室" prop="departments" width="220" />
+                <el-table-column label="医生" prop="doctor" width="110" />
+                <el-table-column label="就诊时间" prop="visitingTime" width="170" />
+                <el-table-column label="费用" prop="totalCost" width="150" />
+                <el-table-column label="诊断结果" prop="diagnosis" show-overflow-tooltip />
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="体温记录" name="temperature">
+              <el-table :data="temperatureRecordList" height="260">
+                <el-table-column label="测量时间" prop="measureTime" width="180" />
+                <el-table-column label="体温" prop="temperature" width="100" />
+                <el-table-column label="人员" prop="personName" width="120" />
+                <el-table-column label="备注" prop="remark" show-overflow-tooltip />
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="用药记录" name="medicine">
+              <el-table :data="marRecordList" height="260">
+                <el-table-column label="用药时间" prop="dosingTime" width="180" />
+                <el-table-column label="药品" prop="name" min-width="170" show-overflow-tooltip />
+                <el-table-column label="剂量" prop="dosage" width="90" />
+                <el-table-column label="类型" prop="type" width="110">
+                  <template #default="scope">
+                    <dict-tag :options="mar_type" :value="scope.row.type" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="备注" prop="remark" show-overflow-tooltip />
+              </el-table>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup name="HealthRecordScreen">
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import { listPerson } from '@/api/health/person'
+import { listHealthRecord } from '@/api/health/healthRecord'
+import { getRecordScreen } from '@/api/health/statisticAnalysis'
+
+const { proxy } = getCurrentInstance()
+const { mar_type, record_type, health_record_state, etiology } = proxy.useDict('mar_type', 'record_type', 'health_record_state', 'etiology')
+
+const loading = ref(false)
+const activeTab = ref('process')
+const personList = ref([])
+const healthRecordList = ref([])
+const recordInfo = ref({})
+const screenData = ref({})
+const nowTime = ref('')
+const nowParts = computed(() => {
+  const [date = '', time = ''] = nowTime.value.split(' ')
+  return { date, time }
+})
+const temperatureChartRef = ref(null)
+const medicineChartRef = ref(null)
+const doctorChartRef = ref(null)
+const recordMixChartRef = ref(null)
+let temperatureChart = null
+let medicineChart = null
+let doctorChart = null
+let recordMixChart = null
+let clockTimer = null
+
+const queryParams = ref({
+  id: null,
+  recordId: null,
+  type: '1'
+})
+
+const summary = computed(() => screenData.value.summary || {})
+const doctor = computed(() => screenData.value.doctor || {})
+const temperature = computed(() => screenData.value.temperature || {})
+const medicine = computed(() => screenData.value.medicine || {})
+const processRecordList = computed(() => screenData.value.processRecordList || [])
+const doctorRecordList = computed(() => screenData.value.doctorRecordList || [])
+const temperatureRecordList = computed(() => screenData.value.temperatureRecordList || [])
+const marRecordList = computed(() => screenData.value.marRecordList || [])
+const temperatureList = computed(() => temperature.value.temperatureList || [])
+const medicineItems = computed(() => medicine.value.marMapList || [])
+const detailCountText = computed(() => {
+  const total = processRecordList.value.length + doctorRecordList.value.length + temperatureRecordList.value.length + marRecordList.value.length
+  return `共 ${total} 条明细`
+})
+const recordMetaItems = computed(() => [
+  { label: '类型', value: getDictLabel(record_type.value, recordInfo.value.type, recordInfo.value.typeName) },
+  { label: '状态', value: getDictLabel(health_record_state.value, recordInfo.value.state, recordInfo.value.stateName) },
+  { label: '周期', value: recordInfo.value.duration || '暂无' }
+])
+
+const metricItems = computed(() => [
+  { key: 'process', label: '过程记录', value: formatNumber(summary.value.processRecordCount), unit: '条' },
+  { key: 'doctor', label: '就医次数', value: formatNumber(summary.value.doctorCount), unit: '次' },
+  { key: 'doctorCost', label: '就医费用', value: formatShortMoney(summary.value.doctorCost), unit: '元', className: 'value-gold' },
+  { key: 'medicineDays', label: '用药天数', value: formatNumber(summary.value.marDayCount), unit: '天' },
+  { key: 'medicineCount', label: '用药次数', value: formatNumber(summary.value.marCount), unit: '次' },
+  {
+    key: 'feverDays',
+    label: '发烧天数',
+    value: formatNumber(summary.value.feverDayCount),
+    unit: '天',
+    className: Number(summary.value.feverDayCount || 0) > 0 ? 'value-warning' : ''
+  },
+  {
+    key: 'maxTemp',
+    label: '最高体温',
+    value: formatTemperature(temperature.value.maxTemp),
+    unit: '℃',
+    className: Number(temperature.value.maxTemp || 0) >= 37.3 ? 'value-warning' : ''
+  },
+  { key: 'avgTemp', label: '平均体温', value: formatTemperature(temperature.value.averageTemp), unit: '℃' }
+])
+
+const healthScore = computed(() => {
+  let score = 100
+  score -= Math.min(Number(summary.value.feverDayCount || 0) * 8, 32)
+  score -= Math.min(Number(summary.value.doctorCount || 0) * 3, 18)
+  if (Number(temperature.value.maxTemp || 0) >= 39) score -= 16
+  else if (Number(temperature.value.maxTemp || 0) >= 37.3) score -= 8
+  if (!queryParams.value.recordId) score -= 10
+  return Math.max(score, 35)
+})
+
+const healthScoreText = computed(() => {
+  if (healthScore.value >= 85) return '整体平稳'
+  if (healthScore.value >= 70) return '持续观察'
+  return '重点关注'
+})
+
+const riskItems = computed(() => [
+  {
+    label: '体温风险',
+    value: formatTemperature(temperature.value.maxTemp) + '℃',
+    desc: Number(temperature.value.maxTemp || 0) >= 37.3 ? '存在发热记录' : '未见明显异常',
+    level: Number(temperature.value.maxTemp || 0) >= 37.3 ? 'warning' : 'normal'
+  },
+  {
+    label: '就医压力',
+    value: `${formatNumber(summary.value.doctorCount)}次`,
+    desc: `${formatMoney(summary.value.doctorCost)}累计费用`,
+    level: Number(summary.value.doctorCount || 0) > 3 ? 'warning' : 'normal'
+  },
+  {
+    label: '用药负荷',
+    value: `${formatNumber(summary.value.marCount)}次`,
+    desc: `${formatNumber(summary.value.marDayCount)}天用药记录`,
+    level: Number(summary.value.marCount || 0) > 20 ? 'warning' : 'normal'
+  }
+])
+
+const recordFacts = computed(() => [
+  { label: '发生原因', value: getDictLabel(etiology.value, recordInfo.value.etiology, recordInfo.value.etiologyName) },
+  { label: '初期症状', value: recordInfo.value.initialSymptoms || '--' },
+  { label: '中期症状', value: recordInfo.value.mediumTermSymptoms || '--' },
+  { label: '后期症状', value: recordInfo.value.laterStageSymptoms || '--' }
+])
+
+const medicineRankList = computed(() => {
+  const data = medicineItems.value.map((item) => ({
+    name: item.medicalName || item.name || '未命名药品',
+    count: Number(item.count || item.value || 0)
+  }))
+  const max = Math.max(...data.map((item) => item.count), 1)
+  return data
+    .sort((a, b) => b.count - a.count)
+    .map((item, index) => ({
+      ...item,
+      rankNo: String(index + 1).padStart(2, '0'),
+      percent: Math.round((item.count / max) * 100)
+    }))
+})
+
+const medicineChartList = computed(() => medicineRankList.value.slice(0, 5))
+
+const eventItems = computed(() => {
+  const processEvents = processRecordList.value.map((item) => ({
+    type: 'process',
+    label: '过程',
+    title: item.content || item.remark || '过程记录',
+    time: formatDateTime(item.recordingTime),
+    value: item.healthRecordName || recordInfo.value.name || '--',
+    sortTime: getTimeValue(item.recordingTime)
+  }))
+  const doctorEvents = doctorRecordList.value.map((item) => ({
+    type: 'doctor',
+    label: '就医',
+    title: item.hospitalName || item.departments || '就医记录',
+    time: formatDateTime(item.visitingTime),
+    value: formatMoney(item.totalCost),
+    sortTime: getTimeValue(item.visitingTime)
+  }))
+  const tempEvents = temperatureRecordList.value.map((item) => ({
+    type: 'temperature',
+    label: '体温',
+    title: `${formatTemperature(item.temperature)}℃`,
+    time: formatDateTime(item.measureTime),
+    value: Number(item.temperature || 0) >= 37.3 ? '发热' : '正常',
+    sortTime: getTimeValue(item.measureTime)
+  }))
+  const medicineEvents = marRecordList.value.map((item) => ({
+    type: 'medicine',
+    label: '用药',
+    title: item.name || item.medicalName || '用药记录',
+    time: formatDateTime(item.dosingTime),
+    value: item.dosage ? `${item.dosage}` : '--',
+    sortTime: getTimeValue(item.dosingTime)
+  }))
+  return [...processEvents, ...doctorEvents, ...tempEvents, ...medicineEvents].sort((a, b) => b.sortTime - a.sortTime).slice(0, 10)
+})
+
+function handlePersonChange(personId) {
+  queryParams.value.recordId = null
+  recordInfo.value = {}
+  screenData.value = {}
+  renderCharts()
+  loadHealthRecords(personId, true)
+}
+
+function handleRecordChange(recordId) {
+  if (recordId) {
+    loadScreen()
+    return
+  }
+  recordInfo.value = {}
+  screenData.value = {}
+  renderCharts()
+}
+
+function resetQuery() {
+  queryParams.value = { id: null, recordId: null, type: '1' }
+  recordInfo.value = {}
+  screenData.value = {}
+  healthRecordList.value = []
+  renderCharts()
+  getPersonList()
+}
+
+function handleFullExport() {
+  if (!queryParams.value.recordId) {
+    proxy.$modal.msgWarning('请选择要导出的健康档案')
+    return
+  }
+  proxy.download(
+    'health/analysis/recordFullExport',
+    {
+      recordId: queryParams.value.recordId
+    },
+    `${recordInfo.value.name || '健康档案'}_完整信息_${new Date().getTime()}.xlsx`
+  )
+}
+
+function loadHealthRecords(personId, autoSelect = false) {
+  if (!personId) {
+    healthRecordList.value = []
+    return Promise.resolve([])
+  }
+  return listHealthRecord({ pageNum: 1, pageSize: 1000, personId }).then((response) => {
+    healthRecordList.value = response.rows || []
+    if (autoSelect) {
+      queryParams.value.recordId = healthRecordList.value.length ? healthRecordList.value[0].id : null
+      if (queryParams.value.recordId) {
+        return loadScreen()
+      }
+      recordInfo.value = {}
+      screenData.value = {}
+      renderCharts()
+    }
+    return healthRecordList.value
+  })
+}
+
+function getPersonList() {
+  return listPerson({ pageNum: 1, pageSize: 1000 }).then((response) => {
+    personList.value = response.rows || []
+    if (personList.value.length) {
+      queryParams.value.id = personList.value[0].id
+      return loadHealthRecords(queryParams.value.id, true)
+    }
+    queryParams.value.id = null
+    queryParams.value.recordId = null
+    healthRecordList.value = []
+    recordInfo.value = {}
+    screenData.value = {}
+    renderCharts()
+    return []
+  })
+}
+
+function loadScreen() {
+  if (!queryParams.value.recordId) {
+    proxy.$modal.msgWarning('请选择健康档案后再查询')
+    recordInfo.value = {}
+    screenData.value = {}
+    renderCharts()
+    return Promise.resolve()
+  }
+  loading.value = true
+  return getRecordScreen(queryParams.value)
+    .then((response) => {
+      screenData.value = response.data || {}
+      recordInfo.value = screenData.value.record || {}
+      nextTick(renderCharts)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function renderCharts() {
+  renderTemperatureChart()
+  renderMedicineChart()
+  renderDoctorChart()
+  renderRecordMixChart()
+}
+
+function getChartTextStyle() {
+  return { color: '#9eb8d8', fontSize: 11 }
+}
+
+function renderTemperatureChart() {
+  if (!temperatureChartRef.value) return
+  temperatureChart && temperatureChart.dispose()
+  temperatureChart = echarts.init(temperatureChartRef.value)
+  const data = temperatureList.value
+  temperatureChart.setOption({
+    color: ['#27e0ff'],
+    grid: { left: 44, right: 24, top: 34, bottom: 34 },
+    tooltip: { trigger: 'axis', backgroundColor: 'rgba(6,18,40,0.92)', borderColor: '#23d5ff', textStyle: { color: '#dff7ff' } },
+    xAxis: {
+      type: 'category',
+      data: data.map((item) => item.time),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } },
+      axisLabel: getChartTextStyle()
+    },
+    yAxis: {
+      type: 'value',
+      min: (value) => Math.max(34, Math.floor(value.min) - 1),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } },
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: getChartTextStyle()
+    },
+    series: [
+      {
+        name: '体温',
+        type: 'line',
+        smooth: true,
+        data: data.map((item) => item.value),
+        symbolSize: 8,
+        lineStyle: { width: 3 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(39,224,255,0.38)' },
+            { offset: 1, color: 'rgba(39,224,255,0.02)' }
+          ])
+        },
+        markLine: {
+          symbol: 'none',
+          label: { color: '#ffcf5a', formatter: '发热线 37.3℃' },
+          lineStyle: { color: '#ffcf5a', type: 'dashed' },
+          data: [{ yAxis: 37.3 }]
+        }
+      }
+    ]
+  })
+}
+
+function renderMedicineChart() {
+  if (!medicineChartRef.value) return
+  medicineChart && medicineChart.dispose()
+  medicineChart = echarts.init(medicineChartRef.value)
+  const data = medicineChartList.value.slice().reverse()
+  medicineChart.setOption({
+    color: ['#58ffb7'],
+    grid: { left: 34, right: 18, top: 18, bottom: 22, containLabel: false },
+    tooltip: {
+      trigger: 'item',
+      confine: true,
+      backgroundColor: 'rgba(4,16,36,0.96)',
+      borderColor: '#58ffb7',
+      borderWidth: 1,
+      extraCssText: 'box-shadow:0 8px 24px rgba(0,0,0,.35);border-radius:6px;padding:10px 12px;max-width:260px;',
+      formatter: (params) => {
+        const item = params.data || {}
+        const name = escapeHtml(item.name || '未命名药品')
+        const rankNo = escapeHtml(item.rankNo || '--')
+        const count = escapeHtml(item.count || 0)
+        return `
+          <div style="min-width:180px;color:#e8fff7;">
+            <div style="margin-bottom:8px;color:#58ffb7;font-weight:700;">TOP ${rankNo}</div>
+            <div style="line-height:1.45;white-space:normal;word-break:break-all;">${name}</div>
+            <div style="margin-top:8px;color:#ffcf5a;">用药次数：${count}次</div>
+          </div>
+        `
+      }
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: getChartTextStyle()
+    },
+    yAxis: {
+      type: 'category',
+      data: data.map((item) => item.rankNo),
+      axisLabel: { color: '#27e0ff', fontSize: 11, margin: 8 },
+      axisTick: { show: false },
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.3)' } }
+    },
+    series: [
+      {
+        type: 'bar',
+        barWidth: 12,
+        data: data.map((item) => ({
+          value: item.count,
+          name: item.name,
+          count: item.count,
+          rankNo: item.rankNo
+        })),
+        itemStyle: {
+          borderRadius: [0, 8, 8, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+            { offset: 0, color: '#1d8fff' },
+            { offset: 1, color: '#58ffb7' }
+          ])
+        }
+      }
+    ]
+  })
+}
+
+function renderDoctorChart() {
+  if (!doctorChartRef.value) return
+  doctorChart && doctorChart.dispose()
+  doctorChart = echarts.init(doctorChartRef.value)
+  const data = doctor.value.doctorCostList || []
+  doctorChart.setOption({
+    color: ['#ffcf5a'],
+    grid: { left: 46, right: 18, top: 24, bottom: 30 },
+    tooltip: { trigger: 'axis', backgroundColor: 'rgba(6,18,40,0.92)', borderColor: '#ffcf5a', textStyle: { color: '#fff8df' } },
+    xAxis: {
+      type: 'category',
+      data: data.map((item) => item.time),
+      axisLabel: getChartTextStyle(),
+      axisLine: { lineStyle: { color: 'rgba(126,189,255,0.35)' } }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { color: 'rgba(126,189,255,0.12)' } },
+      axisLabel: getChartTextStyle()
+    },
+    series: [
+      {
+        name: '费用',
+        type: 'bar',
+        barWidth: 16,
+        data: data.map((item) => item.value),
+        itemStyle: {
+          borderRadius: [8, 8, 0, 0],
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#ffcf5a' },
+            { offset: 1, color: 'rgba(255,117,85,0.35)' }
+          ])
+        }
+      }
+    ]
+  })
+}
+
+function renderRecordMixChart() {
+  if (!recordMixChartRef.value) return
+  recordMixChart && recordMixChart.dispose()
+  recordMixChart = echarts.init(recordMixChartRef.value)
+  const data = [
+    { name: '过程记录', value: Number(summary.value.processRecordCount || 0) },
+    { name: '就医记录', value: Number(summary.value.doctorCount || 0) },
+    { name: '体温记录', value: temperatureRecordList.value.length },
+    { name: '用药记录', value: Number(summary.value.marCount || 0) }
+  ]
+  recordMixChart.setOption({
+    color: ['#27e0ff', '#ffcf5a', '#ff6f91', '#58ffb7'],
+    tooltip: { trigger: 'item', backgroundColor: 'rgba(6,18,40,0.92)', borderColor: '#23d5ff', textStyle: { color: '#dff7ff' } },
+    legend: { bottom: 6, textStyle: getChartTextStyle() },
+    series: [
+      {
+        type: 'pie',
+        radius: ['52%', '74%'],
+        center: ['50%', '43%'],
+        avoidLabelOverlap: true,
+        label: { color: '#dff7ff', formatter: '{b}\n{c}' },
+        labelLine: { lineStyle: { color: 'rgba(188,225,255,0.45)' } },
+        data
+      }
+    ]
+  })
+}
+
+function resizeCharts() {
+  temperatureChart && temperatureChart.resize()
+  medicineChart && medicineChart.resize()
+  doctorChart && doctorChart.resize()
+  recordMixChart && recordMixChart.resize()
+}
+
+function updateClock() {
+  nowTime.value = new Date().toLocaleString('zh-CN', {
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+function formatNumber(value) {
+  return Number(value || 0).toLocaleString('zh-CN')
+}
+
+function formatMoney(value) {
+  return `￥${Number(value || 0).toFixed(2)}`
+}
+
+function formatShortMoney(value) {
+  const num = Number(value || 0)
+  if (Math.abs(num) >= 10000) return (num / 10000).toFixed(1) + '万'
+  return num.toFixed(0)
+}
+
+function formatTemperature(value) {
+  return Number(value || 0).toFixed(1)
+}
+
+function formatDateTime(value) {
+  if (!value) return '--'
+  return String(value).replace('T', ' ').slice(0, 16)
+}
+
+function getTimeValue(value) {
+  const time = value ? new Date(value).getTime() : 0
+  return Number.isNaN(time) ? 0 : time
+}
+
+function getDictLabel(options, value, fallback) {
+  if (fallback) return fallback
+  const option = (options || []).find((item) => String(item.value) === String(value))
+  return option ? option.label : '--'
+}
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => {
+    const map = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    }
+    return map[char]
+  })
+}
+
+onMounted(() => {
+  updateClock()
+  clockTimer = window.setInterval(updateClock, 1000)
+  getPersonList()
+  window.addEventListener('resize', resizeCharts)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeCharts)
+  window.clearInterval(clockTimer)
+  temperatureChart && temperatureChart.dispose()
+  medicineChart && medicineChart.dispose()
+  doctorChart && doctorChart.dispose()
+  recordMixChart && recordMixChart.dispose()
+})
+</script>
+
+<style scoped lang="scss">
+.health-screen {
+  position: relative;
+  height: 100vh;
+  padding: 16px 22px 24px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: #dff7ff;
+  background: radial-gradient(circle at 50% -12%, rgba(39, 224, 255, 0.28), transparent 34%), linear-gradient(145deg, #04162f 0%, #071d3d 42%, #031022 100%);
+  box-sizing: border-box;
+  scrollbar-color: #27e0ff rgba(4, 19, 42, 0.82);
+  scrollbar-width: thin;
+}
+
+.health-screen::-webkit-scrollbar {
+  width: 8px;
+}
+
+.health-screen::-webkit-scrollbar-track {
+  background: rgba(4, 19, 42, 0.82);
+}
+
+.health-screen::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #27e0ff, #148dff);
+  border-radius: 8px;
+}
+
+.screen-bg,
+.screen-grid-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.screen-bg-a {
+  background: linear-gradient(90deg, rgba(39, 224, 255, 0.08) 1px, transparent 1px), linear-gradient(0deg, rgba(39, 224, 255, 0.06) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 82%);
+}
+
+.screen-bg-b {
+  background: radial-gradient(circle at 10% 25%, rgba(88, 255, 183, 0.16), transparent 24%),
+    radial-gradient(circle at 90% 35%, rgba(255, 207, 90, 0.13), transparent 28%);
+}
+
+.screen-grid-bg {
+  border: 1px solid rgba(103, 205, 255, 0.16);
+  position: fixed;
+  margin: 12px 18px 12px 12px;
+}
+
+.cockpit-header,
+.cockpit-main {
+  position: relative;
+  z-index: 1;
+}
+
+.cockpit-header {
+  display: grid;
+  grid-template-columns: minmax(420px, 1fr) minmax(560px, auto);
+  gap: 16px;
+  align-items: center;
+  min-height: 74px;
+  padding: 2px 2px 0;
+}
+
+.screen-actions,
+.screen-panel,
+.record-focus,
+.metric-card {
+  background: linear-gradient(145deg, rgba(8, 36, 75, 0.88), rgba(4, 20, 44, 0.78));
+  border: 1px solid rgba(92, 205, 255, 0.26);
+  box-shadow: inset 0 0 28px rgba(39, 224, 255, 0.05), 0 12px 34px rgba(0, 7, 18, 0.34);
+  backdrop-filter: blur(10px);
+}
+
+.title-block {
+  grid-column: 1;
+  justify-self: start;
+  width: min(760px, 100%);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  text-align: left;
+  pointer-events: none;
+
+  h1 {
+    margin: 0;
+    color: #effcff;
+    font-size: 32px;
+    font-weight: 800;
+    letter-spacing: 1px;
+    text-shadow: 0 0 22px rgba(39, 224, 255, 0.72);
+  }
+
+  p {
+    margin: 6px 0 0;
+    color: #9eb8d8;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.title-meta {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 8px;
+  margin-top: 7px;
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    min-height: 24px;
+    padding: 0 10px;
+    color: #bfefff;
+    background: linear-gradient(90deg, rgba(39, 224, 255, 0.16), rgba(88, 255, 183, 0.08));
+    border: 1px solid rgba(92, 205, 255, 0.24);
+    border-radius: 3px;
+    font-size: 12px;
+  }
+}
+
+.title-wing {
+  width: 74px;
+  height: 36px;
+  background: linear-gradient(90deg, #27e0ff, rgba(39, 224, 255, 0)), linear-gradient(180deg, rgba(39, 224, 255, 0.16), rgba(39, 224, 255, 0));
+  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 12% 50%);
+}
+
+.title-wing-right {
+  display: none;
+}
+
+.screen-actions {
+  grid-column: 2;
+  justify-self: end;
+  z-index: 2;
+  width: auto;
+  max-width: min(820px, 60vw);
+  display: grid;
+  grid-template-columns: 52px 168px minmax(260px, 320px) 82px 82px 82px;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 9px;
+  padding: 8px 10px;
+  border-radius: 8px;
+}
+
+.filter-label {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 4px 0 0;
+  color: #8fffe0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+  white-space: nowrap;
+
+  &::before {
+    content: '';
+    width: 3px;
+    height: 14px;
+    margin-right: 7px;
+    background: linear-gradient(180deg, #27e0ff, #58ffb7);
+    border-radius: 2px;
+    box-shadow: 0 0 10px rgba(39, 224, 255, 0.6);
+  }
+}
+
+.filter-select {
+  flex: 0 0 auto;
+}
+
+.person-select {
+  width: 160px;
+}
+
+.record-select {
+  width: 260px;
+}
+
+.screen-actions :deep(.el-input__wrapper) {
+  min-height: 36px;
+  background: linear-gradient(180deg, rgba(7, 31, 65, 0.96), rgba(4, 19, 42, 0.92));
+  border: 1px solid rgba(92, 205, 255, 0.38);
+  border-radius: 4px;
+  box-shadow: inset 0 0 16px rgba(39, 224, 255, 0.08), 0 0 12px rgba(39, 224, 255, 0.06);
+}
+
+.screen-actions :deep(.el-input__wrapper:hover),
+.screen-actions :deep(.el-input__wrapper.is-focus) {
+  border-color: rgba(39, 224, 255, 0.86);
+  box-shadow: inset 0 0 18px rgba(39, 224, 255, 0.14), 0 0 18px rgba(39, 224, 255, 0.18);
+}
+
+.screen-actions :deep(.el-input__inner) {
+  color: #dff7ff;
+  font-size: 13px;
+}
+
+.screen-actions :deep(.el-input__inner::placeholder) {
+  color: rgba(158, 184, 216, 0.7);
+}
+
+.screen-actions :deep(.el-select .el-input .el-select__caret) {
+  color: #27e0ff;
+}
+
+.screen-actions :deep(.el-input__suffix-inner .el-icon) {
+  color: #27e0ff;
+}
+
+.screen-btn {
+  height: 36px;
+  width: 82px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.screen-btn-primary {
+  border: none;
+  background: linear-gradient(90deg, #148dff, #27e0ff);
+  box-shadow: 0 0 16px rgba(39, 224, 255, 0.28);
+}
+
+.screen-btn-plain {
+  color: #bfefff;
+  background: linear-gradient(180deg, rgba(8, 35, 72, 0.9), rgba(4, 19, 42, 0.86));
+  border-color: rgba(92, 205, 255, 0.34);
+
+  &:hover,
+  &:focus {
+    color: #ffffff;
+    background: linear-gradient(180deg, rgba(12, 54, 108, 0.94), rgba(6, 31, 68, 0.9));
+    border-color: rgba(39, 224, 255, 0.72);
+  }
+}
+
+.cockpit-main {
+  margin-top: 10px;
+}
+
+.top-overview {
+  display: grid;
+  grid-template-columns: minmax(560px, 0.78fr) minmax(0, 1.62fr);
+  align-items: stretch;
+  gap: 12px;
+}
+
+.record-focus {
+  position: relative;
+  min-height: 172px;
+  padding: 16px 18px;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: -48px;
+    top: -48px;
+    width: 150px;
+    height: 150px;
+    border: 26px solid rgba(39, 224, 255, 0.08);
+    border-radius: 50%;
+  }
+}
+
+.record-main {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: start;
+}
+
+.record-kicker,
+.panel-head em,
+.metric-card span {
+  color: #8fb8d8;
+  font-size: 13px;
+}
+
+.record-name {
+  margin-top: 7px;
+  overflow: hidden;
+  color: #ffffff;
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.record-meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  max-width: 230px;
+  margin-top: 2px;
+
+  span {
+    padding: 4px 10px;
+    color: #c8f7ff;
+    background: rgba(39, 224, 255, 0.12);
+    border: 1px solid rgba(39, 224, 255, 0.24);
+    border-radius: 3px;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+}
+
+.record-timeline {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-top: 14px;
+
+  div {
+    padding: 10px;
+    background: rgba(2, 12, 28, 0.38);
+    border: 1px solid rgba(126, 189, 255, 0.16);
+    border-radius: 4px;
+  }
+
+  span {
+    display: block;
+    color: #8fb8d8;
+    font-size: 12px;
+  }
+
+  strong {
+    display: block;
+    margin-top: 6px;
+    overflow: hidden;
+    color: #e8fbff;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.metric-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  align-self: stretch;
+  gap: 9px;
+  min-height: 172px;
+}
+
+.metric-card {
+  position: relative;
+  display: grid;
+  grid-template-rows: 18px minmax(28px, 1fr);
+  align-content: center;
+  height: auto;
+  min-height: 0;
+  padding: 9px 12px 8px 14px;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 12px;
+    bottom: 12px;
+    width: 2px;
+    background: linear-gradient(180deg, #27e0ff, rgba(88, 255, 183, 0.45));
+  }
+
+  span {
+    display: block;
+    min-height: 18px;
+    overflow: hidden;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.metric-value {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-height: 28px;
+  margin-top: 3px;
+  overflow: visible;
+
+  strong {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    color: #27e0ff;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+    font-size: clamp(20px, 1.08vw, 25px);
+    line-height: 28px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    display: block;
+    color: #9eb8d8;
+    font-style: normal;
+    font-size: 12px;
+    line-height: 18px;
+  }
+
+  .value-gold {
+    color: #ffcf5a;
+  }
+
+  .value-warning {
+    color: #ff6f91;
+  }
+}
+
+.fact-strip-panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 112px minmax(0, 1fr);
+  align-items: start;
+  gap: 12px;
+  min-height: 56px;
+  margin-top: 12px;
+  padding: 9px 14px;
+  overflow: hidden;
+  background: linear-gradient(145deg, rgba(8, 36, 75, 0.88), rgba(4, 20, 44, 0.78));
+  border: 1px solid rgba(92, 205, 255, 0.26);
+  border-radius: 8px;
+  box-shadow: inset 0 0 28px rgba(39, 224, 255, 0.05), 0 12px 34px rgba(0, 7, 18, 0.34);
+  backdrop-filter: blur(10px);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 72px;
+    height: 2px;
+    background: linear-gradient(90deg, #27e0ff, transparent);
+  }
+}
+
+.fact-strip-head {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+
+  span {
+    color: #effcff;
+    font-size: 16px;
+    font-weight: 700;
+    white-space: nowrap;
+  }
+
+  em {
+    color: #8fb8d8;
+    font-size: 12px;
+    font-style: normal;
+    white-space: nowrap;
+  }
+}
+
+.fact-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 10px;
+  min-width: 0;
+}
+
+.fact-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+  min-width: 0;
+  min-height: 36px;
+  height: auto;
+  padding: 8px 10px;
+  background: rgba(3, 18, 40, 0.58);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  span {
+    padding-top: 1px;
+    color: #8fb8d8;
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  strong {
+    min-width: 0;
+    overflow: visible;
+    color: #e8fbff;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.45;
+    text-overflow: initial;
+    white-space: normal;
+    word-break: break-all;
+  }
+}
+
+.cockpit-grid {
+  display: grid;
+  grid-template-columns: minmax(310px, 0.9fr) minmax(540px, 1.5fr) minmax(330px, 0.95fr);
+  grid-template-rows: 336px 292px;
+  grid-template-areas:
+    'profile trend medicine'
+    'mix events doctor';
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.screen-panel {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 72px;
+    height: 2px;
+    background: linear-gradient(90deg, #27e0ff, transparent);
+  }
+}
+
+.panel-head {
+  flex: 0 0 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  min-height: 42px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(126, 189, 255, 0.14);
+
+  span {
+    min-width: 0;
+    overflow: hidden;
+    color: #effcff;
+    font-size: 16px;
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    flex: 0 0 auto;
+    max-width: 54%;
+    overflow: hidden;
+    font-style: normal;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.chart {
+  width: 100%;
+  min-height: 0;
+}
+
+.chart-mid {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+}
+
+.chart-large {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+}
+
+.grid-profile {
+  grid-area: profile;
+}
+
+.grid-trend {
+  grid-area: trend;
+}
+
+.grid-medicine {
+  grid-area: medicine;
+}
+
+.grid-mix {
+  grid-area: mix;
+}
+
+.grid-events {
+  grid-area: events;
+}
+
+.grid-doctor {
+  grid-area: doctor;
+}
+
+.risk-score {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 108px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  min-height: 0;
+  padding: 14px 14px 12px;
+}
+
+.score-ring {
+  align-self: center;
+  justify-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 108px;
+  height: 108px;
+  border: 6px solid rgba(39, 224, 255, 0.24);
+  border-top-color: #27e0ff;
+  border-right-color: #58ffb7;
+  border-radius: 50%;
+  box-shadow: 0 0 28px rgba(39, 224, 255, 0.2);
+
+  strong {
+    color: #58ffb7;
+    font-size: 31px;
+    line-height: 1;
+  }
+
+  span {
+    margin-top: 8px;
+    color: #9eb8d8;
+    font-size: 12px;
+  }
+}
+
+.risk-list {
+  display: grid;
+  align-content: stretch;
+  gap: 6px;
+  min-width: 0;
+}
+
+.risk-row {
+  min-width: 0;
+  padding: 7px 10px;
+  background: rgba(3, 18, 40, 0.58);
+  border-left: 3px solid #58ffb7;
+
+  span,
+  em {
+    display: block;
+    color: #9eb8d8;
+    font-size: 12px;
+    font-style: normal;
+  }
+
+  strong {
+    display: block;
+    margin: 3px 0;
+    overflow: hidden;
+    color: #e8fbff;
+    font-size: 17px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.warning {
+    border-left-color: #ff6f91;
+
+    strong {
+      color: #ffcf5a;
+    }
+  }
+}
+
+.main-trend-panel {
+  min-height: 0;
+}
+
+.timeline-panel {
+  min-height: 0;
+}
+
+.medicine-panel {
+  min-height: 0;
+}
+
+.medicine-panel .chart-mid {
+  flex: 0 0 132px;
+  height: 132px;
+}
+
+.doctor-panel {
+  min-height: 0;
+}
+
+.doctor-panel .chart-mid {
+  flex: 1;
+  min-height: 0;
+}
+
+.event-stream,
+.rank-list {
+  padding: 10px 14px 12px;
+}
+
+.event-stream {
+  display: grid;
+  grid-template-columns: 1fr;
+  flex: 1;
+  align-content: start;
+  gap: 7px;
+  min-height: 0;
+  max-height: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-color: #27e0ff rgba(4, 19, 42, 0.82);
+  scrollbar-width: thin;
+}
+
+.event-stream::-webkit-scrollbar {
+  width: 6px;
+}
+
+.event-stream::-webkit-scrollbar-track {
+  background: rgba(4, 19, 42, 0.82);
+}
+
+.event-stream::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #27e0ff, #148dff);
+  border-radius: 6px;
+}
+
+.event-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 50px minmax(0, 1fr) minmax(68px, auto);
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 7px 10px 7px 13px;
+  overflow: hidden;
+  background: linear-gradient(90deg, rgba(3, 18, 40, 0.78), rgba(5, 28, 58, 0.48));
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 9px;
+    bottom: 9px;
+    width: 2px;
+    background: linear-gradient(180deg, #27e0ff, rgba(88, 255, 183, 0.25));
+  }
+
+  strong {
+    display: block;
+    overflow: hidden;
+    color: #e8fbff;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    display: block;
+    margin-top: 5px;
+    color: #8fb8d8;
+    font-size: 12px;
+    font-style: normal;
+  }
+
+  b {
+    overflow: hidden;
+    color: #ffcf5a;
+    font-size: 12px;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.event-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  color: #00172c;
+  background: #27e0ff;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 700;
+
+  &.doctor {
+    background: #ffcf5a;
+  }
+
+  &.temperature {
+    background: #ff6f91;
+  }
+
+  &.medicine {
+    background: #58ffb7;
+  }
+}
+
+.rank-list {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-top: 8px;
+  scrollbar-color: #27e0ff rgba(4, 19, 42, 0.82);
+  scrollbar-width: thin;
+}
+
+.rank-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.rank-list::-webkit-scrollbar-track {
+  background: rgba(4, 19, 42, 0.82);
+}
+
+.rank-list::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #27e0ff, #148dff);
+  border-radius: 6px;
+}
+
+.rank-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr) 52px;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 5px 8px;
+  overflow: hidden;
+  background: rgba(3, 18, 40, 0.6);
+  border: 1px solid rgba(126, 189, 255, 0.12);
+  border-radius: 4px;
+
+  span,
+  em,
+  strong {
+    position: relative;
+    z-index: 1;
+  }
+
+  span {
+    color: #27e0ff;
+    font-family: DIN, 'Microsoft YaHei', sans-serif;
+  }
+
+  strong {
+    overflow: hidden;
+    color: #e8fbff;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    color: #ffcf5a;
+    font-size: 12px;
+    font-style: normal;
+    text-align: right;
+  }
+
+  i {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--rank-width);
+    background: linear-gradient(90deg, rgba(39, 224, 255, 0.25), rgba(88, 255, 183, 0.08));
+  }
+}
+
+.detail-grid {
+  margin-top: 12px;
+}
+
+.detail-panel {
+  min-height: 326px;
+}
+
+.detail-head {
+  min-height: 54px;
+  background: linear-gradient(90deg, rgba(39, 224, 255, 0.08), rgba(4, 22, 48, 0));
+
+  div {
+    display: grid;
+    gap: 5px;
+    min-width: 0;
+  }
+
+  strong {
+    overflow: hidden;
+    color: #8fb8d8;
+    font-size: 12px;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  em {
+    padding: 4px 10px;
+    color: #58ffb7;
+    background: rgba(88, 255, 183, 0.1);
+    border: 1px solid rgba(88, 255, 183, 0.2);
+    border-radius: 3px;
+    font-size: 12px;
+  }
+}
+
+.screen-tabs {
+  padding: 0 14px 16px;
+}
+
+.screen-tabs :deep(.el-tabs__header) {
+  margin: 0;
+}
+
+.screen-tabs :deep(.el-tabs__item) {
+  color: #8fb8d8;
+}
+
+.screen-tabs :deep(.el-tabs__item.is-active) {
+  color: #27e0ff;
+}
+
+.screen-tabs :deep(.el-tabs__active-bar) {
+  background-color: #27e0ff;
+}
+
+.screen-tabs :deep(.el-tabs__nav-wrap::after) {
+  background-color: rgba(126, 189, 255, 0.14);
+}
+
+.detail-panel :deep(.el-table) {
+  color: #dff7ff;
+  background: transparent !important;
+  --el-table-header-bg-color: rgba(4, 22, 48, 0.98);
+  --el-table-tr-bg-color: rgba(3, 18, 40, 0.38);
+  --el-table-row-hover-bg-color: rgba(39, 224, 255, 0.1);
+}
+
+.detail-panel :deep(.el-table__inner-wrapper),
+.detail-panel :deep(.el-table__body-wrapper),
+.detail-panel :deep(.el-table__header-wrapper),
+.detail-panel :deep(.el-scrollbar__view) {
+  background: transparent !important;
+}
+
+.detail-panel :deep(.el-table__header-wrapper tr),
+.detail-panel :deep(.el-table thead),
+.detail-panel :deep(.el-table th.el-table__cell) {
+  color: #9ecfff !important;
+  background: rgba(4, 22, 48, 0.98) !important;
+  border-bottom-color: rgba(92, 205, 255, 0.22) !important;
+  font-weight: 700;
+}
+
+.detail-panel :deep(.el-table tr),
+.detail-panel :deep(.el-table td.el-table__cell) {
+  color: #dff7ff;
+  background: rgba(3, 18, 40, 0.38) !important;
+  border-bottom-color: rgba(126, 189, 255, 0.12) !important;
+}
+
+.detail-panel :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
+  background: rgba(39, 224, 255, 0.1) !important;
+}
+
+.detail-panel :deep(.el-table__inner-wrapper::before) {
+  background-color: rgba(126, 189, 255, 0.12);
+}
+
+.detail-panel :deep(.el-table__empty-block) {
+  background: rgba(3, 18, 40, 0.38);
+}
+
+.detail-panel :deep(.el-table__empty-text) {
+  color: #8fb8d8;
+}
+
+.health-screen :deep(.el-loading-mask) {
+  background-color: rgba(2, 10, 24, 0.66);
+}
+
+@media (max-width: 1680px) {
+  .cockpit-header {
+    grid-template-columns: minmax(360px, 1fr) minmax(520px, auto);
+    min-height: 72px;
+  }
+
+  .title-block {
+    width: min(640px, 100%);
+
+    h1 {
+      font-size: 29px;
+    }
+  }
+
+  .screen-actions {
+    max-width: min(760px, 62vw);
+    grid-template-columns: 48px 150px minmax(230px, 280px) 76px 76px 76px;
+  }
+
+  .top-overview {
+    grid-template-columns: minmax(520px, 0.82fr) minmax(0, 1.52fr);
+  }
+
+  .metric-card {
+    min-height: 0;
+    padding: 8px 10px 8px 12px;
+  }
+
+  .cockpit-grid {
+    grid-template-columns: minmax(300px, 0.9fr) minmax(480px, 1.46fr) minmax(310px, 0.92fr);
+    grid-template-rows: 318px 276px;
+  }
+}
+
+@media (max-width: 1500px) {
+  .cockpit-header {
+    grid-template-columns: minmax(320px, 1fr) minmax(0, auto);
+  }
+
+  .screen-actions {
+    max-width: 620px;
+    grid-template-columns: 48px 140px 210px;
+  }
+
+  .metric-strip {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+
+  .cockpit-grid {
+    grid-template-columns: 292px minmax(0, 1fr) 306px;
+    grid-template-rows: 316px 272px;
+  }
+
+  .record-main {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .record-meta {
+    justify-content: flex-start;
+    max-width: none;
+  }
+
+  .risk-score {
+    grid-template-columns: 1fr;
+    align-content: center;
+    justify-items: center;
+    overflow-y: auto;
+  }
+
+  .score-ring {
+    justify-self: center;
+    width: 96px;
+    height: 96px;
+  }
+
+  .fact-strip-panel {
+    grid-template-columns: 100px minmax(0, 1fr);
+  }
+
+  .fact-strip {
+    grid-template-columns: repeat(4, minmax(180px, 1fr));
+  }
+}
+
+@media (max-width: 1280px) {
+  .cockpit-header,
+  .top-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .cockpit-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+    grid-template-areas:
+      'profile'
+      'trend'
+      'medicine'
+      'mix'
+      'events'
+      'doctor';
+  }
+
+  .screen-panel {
+    min-height: 280px;
+  }
+
+  .cockpit-header {
+    display: grid;
+    gap: 14px;
+    min-height: auto;
+  }
+
+  .screen-actions,
+  .title-block {
+    position: relative;
+    left: auto;
+    top: auto;
+    z-index: 2;
+    width: 100%;
+    transform: none;
+  }
+
+  .title-block {
+    order: -1;
+    pointer-events: auto;
+  }
+
+  .screen-actions {
+    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr);
+    right: auto;
+    bottom: auto;
+    justify-self: stretch;
+    margin-top: 0;
+    justify-content: flex-start;
+    max-width: none;
+  }
+
+  .screen-btn {
+    min-width: 92px;
+  }
+
+  .metric-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: repeat(4, minmax(64px, auto));
+  }
+
+  .event-stream {
+    grid-template-columns: 1fr;
+    max-height: 340px;
+  }
+
+  .fact-strip-panel {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .fact-strip {
+    grid-template-columns: repeat(4, minmax(210px, 1fr));
+    overflow-x: auto;
+    padding-bottom: 2px;
+  }
+}
+
+@media (max-width: 900px) {
+  .health-screen {
+    padding: 12px;
+  }
+
+  .screen-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .filter-label {
+    display: none;
+  }
+
+  .person-select,
+  .record-select {
+    width: 100%;
+  }
+
+  .record-timeline,
+  .metric-strip {
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+  }
+
+  .fact-strip {
+    grid-template-columns: repeat(4, minmax(190px, 1fr));
+  }
+}
+</style>
+
+<style lang="scss">
+.health-screen-popper {
+  background: rgba(4, 18, 42, 0.98) !important;
+  border: 1px solid rgba(39, 224, 255, 0.52) !important;
+  border-radius: 4px !important;
+  box-shadow: 0 12px 34px rgba(0, 7, 18, 0.48), 0 0 24px rgba(39, 224, 255, 0.18) !important;
+
+  .el-popper__arrow::before {
+    background: rgba(4, 18, 42, 0.98) !important;
+    border-color: rgba(39, 224, 255, 0.52) !important;
+  }
+
+  .el-select-dropdown {
+    background: transparent !important;
+  }
+
+  .el-select-dropdown__wrap {
+    max-height: 280px;
+  }
+
+  .el-select-dropdown__item {
+    height: 36px;
+    color: #bfefff;
+    line-height: 36px;
+    font-size: 13px;
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    color: #ffffff;
+    background: linear-gradient(90deg, rgba(39, 224, 255, 0.24), rgba(88, 255, 183, 0.08)) !important;
+  }
+
+  .el-select-dropdown__item.selected {
+    color: #58ffb7;
+    font-weight: 700;
+    background: rgba(88, 255, 183, 0.1);
+  }
+
+  .el-select-dropdown__empty {
+    color: #8fb8d8;
+  }
+
+  .el-scrollbar__bar.is-vertical > div {
+    background-color: #27e0ff;
+  }
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 45a6cf2..9b32642 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,7 +1,121 @@
 <template>
-  <h1>首页</h1>
+  <section class="welcome-page">
+    <div class="welcome-content">
+      <p class="eyebrow">WELCOME</p>
+      <h1>欢迎使用智聪综合管理平台</h1>
+      <p class="subtitle">让数据管理更清晰，让日常协作更高效。</p>
+      <div class="welcome-notes">
+        <span>统一入口</span>
+        <span>高效管理</span>
+        <span>稳定运行</span>
+      </div>
+    </div>
+  </section>
 </template>
 
 <script setup name="Index"></script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.welcome-page {
+  position: relative;
+  min-height: calc(100vh - 84px);
+  padding: 64px;
+  overflow: hidden;
+  background: linear-gradient(90deg, rgba(8, 24, 54, 0.94), rgba(10, 47, 92, 0.82) 46%, rgba(15, 82, 128, 0.54)),
+    linear-gradient(135deg, rgba(41, 171, 226, 0.28) 0 1px, transparent 1px 42px), linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 58px),
+    radial-gradient(circle at 82% 18%, rgba(81, 198, 255, 0.42), transparent 28%), radial-gradient(circle at 72% 72%, rgba(76, 220, 178, 0.22), transparent 34%),
+    #071832;
+  color: #fff;
+}
+
+.welcome-page::before {
+  content: '';
+  position: absolute;
+  right: 8%;
+  top: 18%;
+  width: 420px;
+  height: 420px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 42px rgba(255, 255, 255, 0.03), inset 0 0 0 108px rgba(255, 255, 255, 0.025), 0 0 48px rgba(44, 180, 255, 0.18);
+}
+
+.welcome-page::after {
+  content: '';
+  position: absolute;
+  right: 12%;
+  bottom: 14%;
+  width: 34%;
+  max-width: 520px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
+  transform: rotate(-18deg);
+}
+
+.welcome-content {
+  position: relative;
+  z-index: 1;
+  max-width: 720px;
+  padding-top: 9vh;
+}
+
+.eyebrow {
+  margin: 0 0 18px;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+}
+
+h1 {
+  margin: 0;
+  font-size: 44px;
+  font-weight: 800;
+  line-height: 1.22;
+  letter-spacing: 0;
+}
+
+.subtitle {
+  max-width: 520px;
+  margin: 22px 0 0;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 18px;
+  line-height: 1.8;
+}
+
+.welcome-notes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 34px;
+
+  span {
+    padding: 10px 18px;
+    color: rgba(255, 255, 255, 0.88);
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    border-radius: 6px;
+    backdrop-filter: blur(8px);
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 768px) {
+  .welcome-page {
+    min-height: calc(100vh - 50px);
+    padding: 36px 22px;
+  }
+
+  .welcome-content {
+    padding-top: 7vh;
+  }
+
+  h1 {
+    font-size: 30px;
+  }
+
+  .subtitle {
+    font-size: 15px;
+  }
+}
+</style>