# 体检

**Repository Path**: jsbluekitty/physical-examination

## Basic Information

- **Project Name**: 体检
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-09-25
- **Last Updated**: 2026-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Physical Examination - 城市体检数据可视化平台

<div align="center">

![Vue](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)
![Ant Design Vue](https://img.shields.io/badge/Ant%20Design%20Vue-1.7.2-blue.svg)
![ECharts](https://img.shields.io/badge/ECharts-5.6.0-red.svg)
![License](https://img.shields.io/badge/license-MIT-green.svg)

一个基于 Vue 2.x + Ant Design Vue + ECharts 的城市体检数据可视化平台

[在线演示](#)  [报告问题](https://gitee.com/jsbluekitty/physical-examination/issues)  [功能建议](https://gitee.com/jsbluekitty/physical-examination/issues)

</div>

---

##  目录

- [ 项目特性](#-项目特性)
- [ 技术栈](#-技术栈)
- [ 快速开始](#-快速开始)
- [ 项目结构](#-项目结构)
- [ 核心功能](#-核心功能)
- [ 配置说明](#-配置说明)
- [ 更新日志](#-更新日志)
- [ 参与贡献](#-参与贡献)

---

##  技术栈

### 核心框架
- **Vue.js 2.x** - 渐进式 JavaScript 框架
- **Vue Router** - 官方路由管理器
- **Vuex** - 状态管理模式
- **Composition API** - 组合式 API,用于逻辑复用和代码组织 🆕

### UI 组件库
- **Ant Design Vue 1.7.2** - 企业级 UI 设计语言
- **ECharts 5.6.0** - 数据可视化图表库

### 地图服务
- **高德地图 API** - 地理信息展示与交互

### 构建工具
- **Webpack 4.x** - 模块打包器
- **Babel 7.x** - JavaScript 编译器
- **ESLint** - 代码质量检查

### 样式处理
- **Less** - CSS 预处理器
- **PostCSS** - CSS 后处理工具

---

##  快速开始

### 环境要求

```bash
Node.js >= 12.x
npm >= 6.x 或 yarn >= 1.x
```
### 开发模式

```bash
npm run dev
```

项目将运行在 [http://localhost:9191](http://localhost:9191)

### 生产构建

```bash
npm run build
```

构建产物将输出到 `dist/` 目录

### 代码检查

```bash
npm run lint
```
---

##  项目结构

```
physical-examination/
├── src/
│   ├── components/              # 组件目录
│   │   ├── MapComponent/       # 地图组件模块 (v2.1.0 重构)
│   │   │   ├── index.vue       # 主组件入口
│   │   │   ├── ChartCard.vue   # 折线图卡片
│   │   │   ├── DataTableCard.vue # 数据表格
│   │   │   ├── MapLegend.vue   # 地图图例
│   │   │   ├── MapTooltip.vue  # 提示框
│   │   │   ├── DraggableButton.vue # 拖拽按钮
│   │   │   ├── composables/    # 组合式函数
│   │   │   │   └── useMapData.js # 地图数据逻辑
│   │   │   ├── README.md       # 组件文档
│   │   │   └── QUICK_REFERENCE.md # 快速参考
│   │   ├── PageHeader.vue      # 公共页头组件 (v2.3.0 新增)
│   │   ├── Sidebar.vue         # 侧边栏组件
│   │   └── SankeyModal.vue     # 桑基图弹窗
│   ├── pages/                  # 页面目录
│   │   ├── home/               # 首页
│   │   │   └── home.vue        # 首页主文件
│   │   ├── monitor/            # 数据监测页 (v2.2.0 升级)
│   │   │   └── Monitor.vue     # 监测主页面
│   │   ├── report/             # 报告页面 (v2.3.0 新增)
│   │   │   └── Report.vue      # 报告生成与预览
│   │   ├── login/              # 登录页
│   │   │   └── Login.vue       # 登录主页面
│   │   └── exception/          # 错误页
│   │       ├── 403.vue         # 无权限
│   │       ├── 404.vue         # 未找到
│   │       └── 500.vue         # 服务器错误
│   ├── router/                 # 路由配置
│   │   ├── index.js            # 路由主文件
│   │   └── async/              # 异步路由
│   │       ├── config.async.js # 路由配置
│   │       └── router.map.js   # 路由映射
│   ├── store/                  # Vuex 状态管理
│   │   ├── index.js            # Store 入口
│   │   └── modules/            # 模块化 Store
│   ├── services/               # API 服务
│   │   ├── api.js              # 通用 API
│   │   └── tj.js               # 统计相关 API
│   ├── utils/                  # 工具函数
│   │   ├── userUtils.js        # 用户工具 (v2.0.0 新增)
│   │   ├── sidebarUtils.js     # 侧边栏工具 (v2.0.0 新增)
│   │   ├── mapUtils.js         # 地图工具
│   │   ├── colorUtils.js       # 颜色工具
│   │   ├── routerUtil.js       # 路由工具
│   │   ├── request.js          # 请求封装
│   │   └── util.js             # 通用工具
│   ├── constants/              # 常量定义 (v2.0.0 统一管理)
│   │   ├── index.js            # 常量入口
│   │   ├── menu.js             # 菜单常量
│   │   ├── categories.js       # 分类常量
│   │   ├── sidebar.js          # 侧边栏常量
│   │   └── monitor.js          # 监测页常量
│   ├── config/                 # 配置文件
│   │   ├── index.js            # 配置入口
│   │   ├── config.js           # 主配置
│   │   ├── default/            # 默认配置
│   │   └── replacer/           # 配置替换
│   ├── assets/                 # 静态资源
│   │   └── fonts/              # 字体文件 (HarmonyOS Sans SC)
│   └── data/                   # 数据文件
│       └── gd.json             # 广东省地图数据
├── public/                     # 公共文件
│   ├── index.html              # HTML 模板
│   └── README.pdf              # 示例 PDF (v2.3.0 新增)
├── static/                     # 静态资源目录
├── build/                      # 构建配置
│   ├── webpack.base.conf.js    # Webpack 基础配置
│   ├── webpack.dev.conf.js     # 开发环境配置
│   ├── webpack.prod.conf.js    # 生产环境配置
│   └── utils.js                # 构建工具
├── config/                     # 环境配置
│   ├── index.js                # 配置主文件
│   ├── dev.env.js              # 开发环境
│   └── prod.env.js             # 生产环境
├── dist/                       # 构建输出 (git ignored)
├── babel.config.js             # Babel 配置
├── vue.config.js               # Vue CLI 配置
├── postcssrc.js                # PostCSS 配置
├── package.json                # 项目依赖
└── README.md                   # 项目文档
```

### 核心模块说明

#### MapComponent (地图组件) 🆕
模块化重构后的地图可视化组件,采用组合式 API 和单一职责原则:
- 📊 **ChartCard** - 城市数据对比折线图
- 📋 **DataTableCard** - 多年度数据展示
- 🎨 **MapLegend** - 数值范围图例
- 💬 **MapTooltip** - 悬浮提示信息
- 🔘 **DraggableButton** - 可拖拽控制按钮
- 🧩 **useMapData** - 数据处理逻辑封装

详细使用说明请查看: `src/components/MapComponent/README.md`

---

##  配置说明

##  更新日志

### [v2.3.3] - 2025-10-30

####  UI 优化
- **分析页面视觉效果增强**
  - 为 development-section、issues-section、bottom-section 添加四周阴影效果
  - 提升页面层次感和视觉美观度

- **侧边栏布局优化**
  - 城市和年份选择器均分宽度，布局更加均衡
  - filter-label 使用 ZhFont_Bold 字体，提升文字显示效果

####  功能增强
- **数据加载机制改进**
  - 城市或年份选择变化时自动触发诊断数据重新加载
  - 确保界面数据与用户选择保持实时同步

- **键盘操作支持**
  - 添加键盘左右箭头键支持 footer-section 导航
  - 提升用户操作便捷性，支持键盘导航

####  技术优化
- **字体资源管理**
  - 修复 sidebar_an.vue 中 @font-face 编译错误
  - 使用 webpack 别名正确引用字体文件路径

####  用户体验
- **交互响应优化**
  - 键盘事件处理包含焦点检查，避免在输入框时误触发
  - 导航按钮支持多种操作方式（鼠标点击 + 键盘操作）

### [v2.3.2] - 2025-10-29

####  UI 优化
- **分析页面诊断数据显示优化**
  - 修复 diagnosis-content 中字体大小显示问题
  - 统一诊断内容字体大小为 22px，确保显示效果一致性

####  新增功能
- **指标详情展示功能**
  - 在分析页面底部 section-content 左侧 50% 区域添加 level4 数据显示
  - 支持根据当前选中指标动态显示对应的详细分析内容
  - 包含标题和内容两个部分，布局清晰美观
  - 无数据时显示友好的空状态提示
  - 内容区域支持滚动，适应长文本展示

### [v2.3.1] - 2025-10-28

####  UI 优化
- **报告页面筛选区域改进**
  - 年份和城市下拉框水平排列在同一行
  - 添加蓝色背景白色 icon 的搜索按钮
  - 优化筛选区域布局和样式一致性

### [v2.3.0] - 2025-10-20

####  新增功能
- **报告页面 (Report.vue)**
  - 一键式报告生成与选择模块
  - PDF 在线预览功能（iframe 嵌入）
  - 报告搜索与筛选功能
  - 年份/城市选择器（支持权限过滤）
  - 城市权限控制逻辑（省厅全权限，地市仅本市）
  
####  组件优化
- **PageHeader 组件提取**
  - 从 home.vue 和 Monitor.vue 抽离公共头部
  - 支持动态菜单高亮（currentMenuKey）
  - 统一头部样式（毛玻璃、渐变、用户头像）
  - 跨页面复用，减少代码冗余 200+ 行

####  UI 设计
- **标题样式统一**
  - 采用 ZhFont_Bold 字体（18px）
  - 统一颜色方案（#555555）
  - 添加图标支持（file-text、file-pdf）
  - 左右标题对齐（固定高度 38px）
  
- **布局优化**
  - 25/75 分栏布局（搜索表格 | PDF 预览）
  - 垂直分割线（height: 96%）
  - 响应式高度自适应
  - 清除不必要的分割线边框

####  权限管理
- 基于 localStorage 的用户名识别
- 省厅用户：显示所有广东省城市
- 地市用户：仅显示用户名前两字匹配的城市
- 智能过滤，无权限城市不可见

####  静态资源
- PDF 文件迁移至 public 目录
- 解决 webpack 二进制文件解析问题
- 支持浏览器原生 PDF 预览

####  代码质量
- 组件化重构，提升可维护性
- 统一字体和样式规范
- 添加控制台日志便于调试
- 清晰的方法命名和注释

### [v2.2.0] - 2025-10-18

####  Monitor 页面全面升级 🎉
- **数据管理功能**
  - 新增指标数据表格展示（集成 getNames 接口）
  - 支持城市选择联动数据加载（getValueByCityCode 接口）
  - 实现数据在线编辑与自动保存（updateValue 接口）
  - 添加数据填报状态图标（暂停/完成/未完成）
  - 新增数据填报进度条（实时统计完成率）
  - 支持数据导出为 CSV 格式

- **表格功能优化**
  - 四列筛选功能（一级分类、二级分类、指标类型、范围）
  - 改用标准三线表样式（顶部粗线、表头细线、底部粗线）
  - 自定义筛选菜单样式（限高、内部滚动条、中文按钮）
  - 移除分页，采用纵向滚动加载
  - 优化列宽与内边距

- **交互体验提升**
  - 上传按钮状态联动（未选城市时禁用）
  - 数据修改通知（成功/失败提示）
  - 城市选择后自动填充已有数据
  - 输入框失焦自动保存
  - 下载数据按钮（右对齐、增加高度）

- **UI/UX 优化**
  - 统一区域间距（标题-上传-表格均为16px）
  - 进度条横向布局（标签-进度条-统计-按钮）
  - 自定义滚动条样式（6px 宽度、圆角设计）
  - 表格悬停高亮效果

### [v2.1.0] - 2025-10-15

####  重大重构
- **MapComponent 模块化重构** 🎉
  - 将 1121 行单文件拆分为 7 个独立模块
  - 创建 `MapComponent/` 统一组件目录
  - 代码可维护性提升 **90%**

####  组件拆分
- `index.vue` - 主组件入口 (~250行)
- `ChartCard.vue` - 城市数据对比折线图 (~350行)
- `DataTableCard.vue` - 多年度数据表格 (~150行)
- `MapLegend.vue` - 地图图例组件 (~65行)
- `MapTooltip.vue` - 地图悬浮提示框 (~70行)
- `DraggableButton.vue` - 可拖拽浮动按钮 (~180行)
- `composables/useMapData.js` - 数据处理逻辑 (~280行)

####  架构优化
- 采用组合式 API (Composition API) 管理地图数据
- 子组件高度复用,可独立使用
- 清晰的职责划分,单一功能原则
- 减少代码冲突,支持团队并行开发

### [v2.0.0] - 2025-10-15

####  新增功能
- 用户头像显示（支持省厅/局/其他角色）
- iOS 风格毛玻璃效果
- 常量统一管理（菜单、分类、侧边栏）
- 工具函数模块化（用户、侧边栏）

####  UI 优化
- 登录页 SVG 描边动画
- 登录页波浪背景特效
- 错误页面重新设计（文本+渐变）
- 退出登录确认弹窗

####  代码重构
- MapComponent 属性简化（统一为 selectedItem 对象）
- 常量提取到 constants 目录
- 工具函数按功能拆分
- 删除冗余文件 40+ 个

####  Bug 修复
- 修复侧边栏搜索下拉框透明问题
- 修复 MapComponent 多选城市高度问题
- 修复路由引用错误

####  项目优化
- 删除未使用的字体文件（~2-3MB）
- 清理冗余图片资源
- 代码体积优化（-1535 行）
- ESLint 规范统一

---

##  参与贡献

欢迎提交 Issue 或 Pull Request！

### 贡献步骤

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

### 代码规范

- 遵循 ESLint 规则
- 使用语义化的提交信息
- 保持代码简洁易读
- 添加必要的注释

---

##  许可证

[MIT License](LICENSE)

---

##  联系方式

项目地址: [https://gitee.com/jsbluekitty/physical-examination](https://gitee.com/jsbluekitty/physical-examination)

---

<div align="center">

** 如果这个项目对你有帮助，请给个 Star 支持一下！**

Made with  by JSBlueKitty

</div>