# 疾控五期移动端

**Repository Path**: cking/h5

## Basic Information

- **Project Name**: 疾控五期移动端
- **Description**: 疾控五期移动端
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-07
- **Last Updated**: 2025-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 应急值守移动端H5应用

## 项目简介

这是一个基于 Vue.js 和 Element UI 的移动端H5应用，采用单文件组件（.vue）开发，主要用于应急值守管理系统。

## 功能特点

- ✅ 响应式移动端设计
- ✅ 右上角菜单切换功能
- ✅ 数据搜索与过滤
- ✅ 卡片式数据展示
- ✅ 模拟数据演示
- ✅ 组件化开发，代码结构清晰
- ✅ 易于维护和扩展

## 主要模块

1. **报卡督导工具** - 传染病、职业病等报告卡督导管理
2. **个人信息管理** - 用户个人信息维护
3. **应急值守任务** - 值守任务管理
4. **事件上报** - 突发事件上报
5. **数据统计** - 数据统计分析
6. **消息通知** - 系统消息推送
7. **系统设置** - 应用配置管理

## 技术栈

- **Vue.js 2.6** - 渐进式JavaScript框架
- **Element UI 2.15** - 饿了么开源的组件库
- **Vite 5.0** - 下一代前端构建工具

## 快速开始

### 安装依赖

```bash
npm install
# 或使用 yarn
yarn install
# 或使用 pnpm
pnpm install
```

### 开发模式

```bash
npm run dev
```

启动后访问 `http://localhost:8080`

### 构建生产版本

```bash
npm run build
```

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

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
.
├── src/
│   ├── components/          # 组件目录
│   │   ├── AppHeader.vue    # 顶部导航栏组件
│   │   ├── SearchBar.vue    # 搜索栏组件
│   │   ├── DataList.vue     # 数据列表组件
│   │   ├── DataCard.vue     # 数据卡片组件
│   │   └── MenuDrawer.vue   # 菜单抽屉组件
│   ├── data/               # 数据目录
│   │   ├── menuData.js     # 菜单配置数据
│   │   └── mockData.js     # 模拟业务数据
│   ├── styles/             # 样式目录
│   │   └── global.css      # 全局样式
│   ├── App.vue             # 根组件
│   └── main.js             # 应用入口
├── index.html              # HTML 模板
├── vite.config.js          # Vite 配置
├── package.json            # 项目配置
└── README.md               # 项目说明
```

## 使用说明

1. **切换菜单**：点击右上角的"切换菜单"按钮，在侧边抽屉中选择不同的功能模块

2. **搜索数据**：在搜索框中输入数据名称关键词进行筛选

3. **查看详情**：点击卡片中的"统计分析"或"督导管理"按钮查看详细信息

4. **返回操作**：点击左上角的"返回"按钮返回上一页

## 开发指南

### 组件说明

#### AppHeader.vue
顶部导航栏组件，包含返回按钮、标题和菜单切换按钮。

**Props:**
- `title`: 页面标题

**Events:**
- `go-back`: 返回事件
- `toggle-menu`: 切换菜单事件

#### SearchBar.vue
搜索栏组件，支持双向数据绑定。

**Props:**
- `value`: 搜索关键词

**Events:**
- `input`: 输入事件
- `search`: 搜索事件

#### DataCard.vue
数据卡片组件，展示单条数据详情。

**Props:**
- `data`: 数据对象

**Events:**
- `analysis`: 统计分析事件
- `manage`: 督导管理事件

#### MenuDrawer.vue
菜单抽屉组件，展示功能菜单列表。

**Props:**
- `visible.sync`: 显示状态（支持双向绑定）
- `menuList`: 菜单列表
- `currentIndex`: 当前选中索引

**Events:**
- `switch-menu`: 切换菜单事件

### 添加新菜单

在 `src/data/menuData.js` 中添加新的菜单项：

```javascript
{
  id: 8,
  name: '新功能',
  icon: 'el-icon-star-off'
}
```

### 添加新数据

在 `src/data/mockData.js` 中添加对应的数据：

```javascript
const newFeatureData = [
  {
    id: 701,
    name: '示例数据',
    timeRange: '2025-01-01~2025-12-31',
    region: '示例地区',
    createTime: '2025-01-01',
    finishTime: '2025-01-05',
    missCount: 0,
    delayCount: 0
  }
];

// 在 getDataByMenuIndex 函数中添加映射
export function getDataByMenuIndex(menuIndex) {
  const dataMap = {
    // ... 其他映射
    7: newFeatureData
  };
  return dataMap[menuIndex] || [];
}
```

### 创建新组件

1. 在 `src/components/` 目录下创建 `.vue` 文件
2. 按照 Vue 单文件组件规范编写代码
3. 在需要使用的地方导入并注册组件

### 调整样式

- **组件样式**：在各个 `.vue` 文件的 `<style scoped>` 中修改
- **全局样式**：在 `src/styles/global.css` 中修改

## 移动端适配

- 使用 `viewport` 进行缩放控制
- 采用响应式布局设计
- 触摸友好的交互体验
- 适配不同屏幕尺寸

## 浏览器兼容性

- ✅ Chrome (推荐)
- ✅ Safari
- ✅ Firefox
- ✅ Edge
- ✅ 移动端浏览器

## 后续扩展建议

### 功能扩展
1. 集成真实的后端API接口（推荐使用 Axios）
2. 添加用户认证和权限管理
3. 使用 Vue Router 实现多页面路由
4. 集成 Vuex 进行状态管理
5. 添加数据持久化（LocalStorage / IndexedDB）
6. 接入图表库（ECharts / Chart.js）进行数据可视化
7. 添加离线缓存支持（PWA）
8. 实现下拉刷新、上拉加载更多功能

### 性能优化
1. 路由懒加载
2. 组件异步加载
3. 图片懒加载
4. 虚拟列表（长列表优化）
5. 代码分割

### 用户体验提升
1. 添加骨架屏加载效果
2. 添加页面切换动画
3. 优化移动端触摸交互
4. 添加手势操作支持

## 注意事项

- ✅ 项目采用 Vue 2.6 版本，如需升级到 Vue 3，需要调整部分语法
- ✅ 模拟数据仅供演示，实际使用需对接后端API
- ✅ Element UI 主要为桌面端设计，移动端可考虑使用 Vant 等专门的移动端组件库
- ✅ 生产环境部署前请检查并优化构建配置

## 常见问题

### Q: 如何修改开发服务器端口？
A: 在 `vite.config.js` 中修改 `server.port` 配置。

### Q: 如何处理跨域问题？
A: 在 `vite.config.js` 中配置代理：
```javascript
server: {
  proxy: {
    '/api': {
      target: 'http://your-api-server.com',
      changeOrigin: true
    }
  }
}
```

### Q: 如何添加环境变量？
A: 创建 `.env.development` 和 `.env.production` 文件，使用 `VITE_` 前缀定义变量。

## 开发者

应急值守系统开发团队

## 更新日志

### v1.0.0 (2025-11-04)
- ✨ 改用 .vue 单文件组件开发
- ✨ 采用 Vite 构建工具
- ✨ 实现组件化架构
- ✨ 实现基础功能模块
- ✨ 完成移动端适配
- ✨ 添加模拟数据演示
- ✨ 代码结构清晰，易于维护和扩展