# 数据流与前端UI优化分析报告

> **文档类型**: 分析报告
> **版本**: v1.0
> **日期**: 2026-06-20

---

## 一、三甲医院业务数据流 vs 项目实现对比

### 1.1 十大核心流程对比

| 业务流程 | 三甲要求 | 项目实现 | 差距 | 优先级 |
|---------|---------|---------|------|--------|
| **门诊流程** | 挂号→候诊→就诊→检查检验→处方→收费→取药→随访 | ✅ 挂号/候诊/就诊/检查/检验/处方/收费/发药 | 随访已实现前端 | ✅ |
| **住院流程** | 入院→医嘱→护理→检查检验→手术→用药→出院→结算→病案 | ✅ 全流程实现 | 数据流已打通 | ✅ |
| **急诊流程** | 急诊挂号→分诊→抢救→留观→会诊→住院/出院 | ⚠️ 基础急诊 | 缺分诊分级/绿色通道 | 🟡 P1 |
| **手术流程** | 术前讨论→手术申请→麻醉评估→手术→术后恢复→病理 | ✅ 术前/申请/麻醉/手术/术后 | 病理送检待完善 | 🟡 P1 |
| **护理流程** | 入院评估→护理计划→医嘱执行→体征→护理记录→交接班 | ✅ 全流程实现 | 数据流已打通 | ✅ |
| **药品流程** | 采购→验收→入库→处方→调配→发药→退药→库存→盘点 | ✅ 全流程实现 | 效期管理待完善 | 🟡 P1 |
| **检验流程** | 申请→采集→送检→检验→审核→报告→危急值→随访 | ✅ 全流程实现 | 危急值链路已打通 | ✅ |
| **检查流程** | 申请→预约→排队→检查→报告→审核→3D重建→图文报告 | ✅ 全流程实现 | 报告反馈链路已新增 | ✅ |
| **病案流程** | 归档→质控→借阅→封存→统计→DRG→上报 | ✅ 全流程实现 | DRG入组已补全 | ✅ |
| **院感流程** | 监测→预警→上报→抗菌药物→消毒供应→统计 | ✅ 全流程实现 | 基本完整 | ✅ |

### 1.2 数据流链路实现状态

| 链路 | 业务场景 | Event | Handler | 状态 | 说明 |
|------|---------|-------|---------|------|------|
| 1 | 门诊→住院诊断同步 | AdmissionSavedEvent | DiagnosisSyncHandler | ✅ | 入院时自动复制门诊诊断 |
| 2 | 医嘱→执行反馈 | OrderExecutedEvent | OrderExecutionFeedbackHandler | ✅ | 执行后记录到EMR |
| 3 | 药品→自动计费 | MedicationDispensedEvent | AutoBillingHandler | ✅ | 发药后自动创建收费项 |
| 4 | 检验→危急值推送 | LabReportPublishedEvent | CriticalValueHandler | ✅ | 危急值自动保存+联动停嘱 |
| 5 | 病案→DRG入组 | DischargeEvent | DrgGroupingHandler | ✅ | 出院后自动DRG分组 |
| 6 | 护理→质控检查 | NursingRecordSavedEvent | NursingQualityHandler | ✅ | 记录后自动质控评分 |
| 7 | 统计→实时推送 | StatisticsPushEvent | StatisticsPushHandler | ✅ | WebSocket推送仪表盘 |
| 8 | 手术→术后恢复 | SurgeryCompletedEvent | PostSurgeryRecoveryHandler | ✅ | 手术后生成护理计划 |
| 9 | 检查→报告→医嘱 | ExamReportPublishedEvent | ExamReportFeedbackHandler | ✅ | 报告后关联医嘱状态 |
| 10 | 入院评估→护理计划 | AdmissionAssessmentCompletedEvent | NursingPlanAutoGenerateHandler | ✅ | 评估后生成护理计划 |

### 1.3 缺失的业务链路

| # | 链路 | 业务价值 | 三甲依据 | 优先级 |
|---|------|---------|---------|--------|
| 1 | **手术→病理送检** | 手术后标本自动送检，病理闭环 | 手术闭环/肿瘤诊疗 | 🔴 P0 |
| 2 | **检验→临床决策** | 检验结果联动用药调整 | 合理用药评审 | 🟡 P1 |
| 3 | **药品→库存→预警** | 库存不足时联动处方拦截 | 药品管理规范 | 🟡 P1 |
| 4 | **护理→交接班** | 交接班完成率统计 | 护理质量指标 | 🟡 P1 |
| 5 | **会诊→时限监控** | 会诊超时预警 | 会诊制度 | 🟡 P1 |

---

## 二、前端数据展示与操作界面分析

### 2.1 现有页面状态

| 模块 | 前端路径 | 状态 | 优化点 |
|------|---------|------|--------|
| **危急值管理** | `criticalvalue/pending/` | ✅ | 缺实时推送通知 |
| **护理质量** | `nursingquality/` | ✅ | 缺图表展示 |
| **仪表盘** | `dashboard/` | ✅ | 缺实时数据推送 |
| **随访管理** | `followup/` | ✅ | 已有plan/task/record/survey/complaint |
| **DRG分析** | `drganalysis/` | ✅ | 缺费用预警 |
| **护理评估** | `nursing/` | ✅ | 已实现5种量表 |

### 2.2 前端优化建议

#### 2.2.1 危急值管理页面优化

**当前状态：** 基础表格展示+手动操作

**优化方向：**
1. **实时推送通知** — 接收WebSocket推送，新危急值自动弹窗提醒
2. **声音提醒** — 危急值到达时播放提示音
3. **快捷处理** — 一键确认+预设处理模板
4. **超时倒计时** — 可视化显示超时剩余时间

```vue
<!-- 优化后的危急值通知组件示例 -->
<template>
  <div class="critical-value-notify">
    <el-badge :value="pendingCount" :hidden="pendingCount === 0">
      <el-button @click="showDrawer = true">
        ⚠️ 危急值 ({{ pendingCount }})
      </el-button>
    </el-badge>
    
    <el-drawer v-model="showDrawer" title="危急值处理" size="400px">
      <div v-for="item in pendingList" :key="item.id" class="notify-item">
        <el-alert :title="item.patientName + ' - ' + item.itemName" type="error" show-icon>
          <div>结果: {{ item.resultValue }} (参考: {{ item.referenceRange }})</div>
          <div>报告时间: {{ item.reportTime }}</div>
          <el-button-group style="margin-top: 8px">
            <el-button size="small" type="primary" @click="quickConfirm(item)">确认接收</el-button>
            <el-button size="small" type="warning" @click="quickProcess(item)">处理</el-button>
          </el-button-group>
        </el-alert>
      </div>
    </el-drawer>
  </div>
</template>
```

#### 2.2.2 仪表盘实时数据优化

**当前状态：** 静态数据展示

**优化方向：**
1. **WebSocket实时推送** — 关键指标实时更新
2. **数据趋势图** — 添加折线图/柱状图展示趋势
3. **预警卡片** — 高亮显示异常指标
4. **快捷入口** — 根据用户角色显示常用功能

```vue
<!-- 优化后的仪表盘统计卡片 -->
<template>
  <el-row :gutter="16">
    <el-col :span="6" v-for="item in realtimeStats" :key="item.label">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-value" :style="{color: item.color}">
            {{ item.value }}
            <el-icon v-if="item.trend > 0" style="color: #67C23A"><Top /></el-icon>
            <el-icon v-else-if="item.trend < 0" style="color: #F56C6C"><Bottom /></el-icon>
          </div>
          <div class="stat-label">{{ item.label }}</div>
        </div>
        <div v-if="item.alert" class="stat-alert">
          <el-tag type="danger" size="small">{{ item.alert }}</el-tag>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
```

#### 2.2.3 护理质量图表展示

**当前状态：** 表格数据展示

**优化方向：**
1. **达标率趋势图** — 折线图展示月度达标率变化
2. **科室对比图** — 柱状图展示各科室达标情况
3. **指标分布图** — 饼图展示各类指标占比
4. **预警提示** — 未达标指标高亮提醒

#### 2.2.4 DRG分析页面优化

**当前状态：** 基础分析

**优化方向：**
1. **费用预警** — 超支病例自动标记
2. **入组成功率** — 展示DRG入组成功率趋势
3. **科室DRG绩效** — 科室维度DRG绩效排名
4. **时间效率** — 平均住院日 vs DRG标准对比

---

## 三、数据流驱动的UI优化方案

### 3.1 基于Chain 7(统计推送)的实时仪表盘

```javascript
// 前端WebSocket连接管理
class DashboardWebSocket {
  constructor() {
    this.ws = null
    this.handlers = new Map()
  }
  
  connect() {
    this.ws = new WebSocket('ws://localhost:18082/ws/dashboard')
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data)
      const handler = this.handlers.get(data.type)
      if (handler) handler(data)
    }
  }
  
  subscribe(type, handler) {
    this.handlers.set(type, handler)
  }
}

// 订阅统计推送
const ws = new DashboardWebSocket()
ws.connect()
ws.subscribe('STATISTICS', (data) => {
  // 实时更新仪表盘数据
  updateDashboardStats(data)
})
ws.subscribe('CRITICAL_VALUE', (data) => {
  // 弹窗提醒危急值
  showCriticalValueAlert(data)
})
```

### 3.2 基于Chain 4(危急值)的实时通知

```javascript
// 危急值通知组件
const CriticalValueNotify = {
  setup() {
    const pendingCount = ref(0)
    const showNotification = ref(false)
    
    // WebSocket监听危急值推送
    onMounted(() => {
      ws.subscribe('CRITICAL_VALUE', (data) => {
        pendingCount.value++
        showNotification.value = true
        // 播放提示音
        playAlertSound()
        // 浏览器通知
        if (Notification.permission === 'granted') {
          new Notification('危急值提醒', {
            body: `${data.patientName} - ${data.itemName}: ${data.resultValue}`
          })
        }
      })
    })
    
    return { pendingCount, showNotification }
  }
}
```

### 3.3 基于Chain 10(护理计划)的智能推荐

```javascript
// 护理计划智能推荐
const NursingPlanRecommend = {
  methods: {
    async generatePlan(assessment) {
      // 根据入院评估结果推荐护理计划
      const riskLevel = assessment.riskLevel
      const plans = await fetchNursingPlanTemplates(riskLevel)
      
      return {
        highRisk: plans.filter(p => p.riskLevel === 'HIGH'),
        mediumRisk: plans.filter(p => p.riskLevel === 'MEDIUM'),
        lowRisk: plans.filter(p => p.riskLevel === 'LOW')
      }
    }
  }
}
```

---

## 四、实施优先级

### Phase 1: 实时通知 (1周)
1. 危急值WebSocket推送+弹窗提醒
2. 仪表盘实时数据更新
3. 浏览器通知集成

### Phase 2: 图表展示 (1周)
1. 护理质量趋势图
2. DRG分析图表
3. 科室对比图

### Phase 3: 智能推荐 (1周)
1. 护理计划智能推荐
2. DRG费用预警
3. 库存预警联动

---

## 五、验证清单

| 验证项 | 命令 | 预期结果 |
|--------|------|---------|
| 前端编译 | `npm run build:dev` | BUILD SUCCESS |
| WebSocket连接 | 浏览器控制台 | 连接成功 |
| 实时推送 | 触发危急值 | 弹窗提醒 |
| 图表展示 | 访问护理质量页 | 图表正常渲染 |

---

> **文档版本**: v1.0 | **最后更新**: 2026-06-20