# hld-test

**Repository Path**: ftl1/hld-test

## Basic Information

- **Project Name**: hld-test
- **Description**: 123
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-01
- **Last Updated**: 2025-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1>vue-pure-admin精简版（国际化版本）</h1>

[![license](https://img.shields.io/github/license/pure-admin/vue-pure-admin.svg)](LICENSE)

**中文** | [English](./README.en-US.md)

## 介绍

精简版是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`

## 核心功能

### 🏠 首页概览

- **工作概览模块**：提供服务用户数、处理文档数、处理任务数等关键指标的实时展示

  - 支持时间筛选（过去一周、过去一个月、过去一季度）
  - 详细的用户分类统计（高管、高管家属）
  - 文档处理统计（档案、报告）
  - 任务处理统计（随访、检查、疫苗）

- **高管健康概况模块**：专业的健康数据可视化分析
  - **健康分类占比**：饼状图展示健康、亚健康、需重点关注、慢性病稳定等分类占比
  - **健康标注分布**：柱状图展示糖尿病、高血压、脂肪肝等健康标签的月度分布趋势
  - **交互功能**：点击图表元素可弹出详细信息对话框，提供更深层次的数据洞察

### 🛣️ 智能动态路由系统

- **后端驱动的路由管理**：完全基于后端返回的菜单配置动态加载路由模块

  - 支持 `menuType` 分类，自动过滤页面类型路由（`menuType === 2`）
  - 智能匹配本地路由定义库与后端 `component` 配置
  - 多种匹配策略，支持带斜杠或不带斜杠的路径格式

- **路由定义库架构**：

  - `async.ts` 作为路由定义库，不直接注册到系统中
  - 只有后端返回的路由才会被实际注册和启用
  - 避免了本地预注册路由与动态路由的冲突问题

- **路由元信息智能合并**：

  - 保持本地路由的技术配置（keepAlive、roles、auths等）
  - 动态应用后端菜单信息（title、icon、rank、showLink等）
  - 自动标记后端路由（backstage: true）便于调试和管理
  - 支持父子路由结构的智能构建

- **完善的错误处理与日志**：

  - 详细的路由匹配过程日志，便于开发调试
  - 匹配失败的路由记录和原因分析
  - 路由添加过程的错误捕获和处理
  - 统计匹配成功和失败的路由数量

- **路由系统特性**：
  - 防止重复添加相同路由
  - 自动路由排序（根据 rank 或 sort 字段）
  - 数据一致性保证
  - 404路由自动处理

### 🎯 技术特性

- 采用 **ECharts** 进行数据可视化，支持丰富的图表交互
- **响应式设计**，完美适配各种屏幕尺寸
- **详细日志输出**，便于开发调试和问题排查
- **完善的错误处理机制**，确保应用稳定运行
- **模块化架构**，便于功能扩展和维护

### 📊 数据接口

- `getHomesummaryData`：获取首页工作概览统计数据
- `getHealthCategorySummary`：获取健康分类占比数据
- `getHealthTagSummary`：获取健康标签分布数据

### 📈 数据可视化功能

#### 智能范围指示器

- **动态最大值计算**：针对报告详情页面的 `v-range-indicator` 组件，实现了基于指标正常范围上限的智能最大显示值计算

  **计算逻辑规则**：

  - **小范围指标**（unitMax ≤ 100）：设置最大显示值为 100，适用于百分比类指标（如体脂率、血氧饱和度等）
  - **中等范围指标**（100 < unitMax < 500）：设置最大显示值为 500，适用于中等数值范围指标（如血糖、心率等）
  - **大范围指标**（unitMax ≥ 500）：设置最大显示值为 1000，适用于大数值范围指标（如胆固醇、肌酐等）

- **功能特点**：

  - **自适应显示**：根据不同类型的健康指标自动调整图表显示范围，确保数值标记在合理的位置显示
  - **完善的错误处理**：对无效或缺失的 unitMax 值提供默认值处理，保证系统稳定性
  - **详细的过程日志**：每个计算步骤都有详细的控制台日志输出，便于开发调试和问题追踪
  - **类型安全**：使用 TypeScript 确保参数类型正确性，避免运行时类型错误

- **使用场景**：

  - 报告详情页面的异常指标记录展示
  - 完整报告中的检查指标可视化
  - 为不同类型的医学指标提供最适合的图表展示效果

- **技术实现**：
  - 函数名：`calculateMaxDisplayValue(unitMax?: string)`
  - 返回值：number类型的最大显示值
  - 集成位置：`src/views/report/detail.vue` 中的 `v-range-indicator` 组件

## 版本选择

当前是国际化版本，如果您需要非国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin)

## 配套视频

[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)

## 配套保姆级文档

[点我查看 vue-pure-admin 文档](https://pure-admin.cn/)
[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)

## 高级服务

[点我查看详情](https://pure-admin.cn/pages/service/)

## 预览

[查看预览](https://pure-admin-thin.netlify.app/#/login)

## 维护者

[xiaoxian521](https://github.com/xiaoxian521)

## ⚠️ 注意

精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提，谢谢！

## 许可证

[MIT © 2020-present, pure-admin](./LICENSE)