# mindray-frontend-display

**Repository Path**: elfbobo_admin_admin/mindray-frontend-display

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-03-15
- **Last Updated**: 2026-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mindray医疗设备模拟系统

这是一个基于Vue 3的医疗设备模拟系统前端应用，专为Mindray医疗设备设计，用于模拟医疗设备的操作界面和交互流程，让客户可以在线体验设备操作，无需实地访问。

## 功能特性

### 核心功能
- **设备分类管理**：按照Mindray产品线分类（急救与生命支持、体外诊断、输注泵、医学影像、外科设备）
- **层级导航**：分类 → 设备列表 → 设备详情的清晰导航结构
- **设备管理**：支持添加、编辑、删除医疗设备，包含完整的表单验证
- **界面模拟**：展示设备操作界面，支持点击交互和界面跳转
- **坐标识别**：上传坐标文件，自动识别和显示可点击区域
- **双模式支持**：演示模式（客户体验）和编辑模式（管理员配置）

### 技术特性
- **响应式设计**：适配不同屏幕尺寸
- **专业配色**：符合医疗行业严肃性要求的配色方案
- **文件上传**：支持设备图片和坐标文件上传
- **操作记录**：完整的用户操作历史追踪
- **后端接口预留**：完整的后端API接口预留

## 

## 系统要求

- Node.js >= 16.0.0
- npm >= 8.0.0

## 快速开始

```bash
# 克隆项目
git clone <repository-url>
cd medical_software

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

# 代码检查
npm run lint
```

## 项目结构

```
medical_software/
├── public/                 # 静态资源
│   ├── mindray-logo.svg   # Mindray品牌logo
│   └── ...
├── src/
│   ├── api/               # API接口模块
│   │   ├── device.js      # 设备相关API（含模拟数据）
│   │   └── backend.js     # 后端接口预留
│   ├── components/        # 公共组件
│   │   ├── DeviceDialog.vue        # 设备管理对话框
│   │   └── CoordinateOverlay.vue   # 坐标显示组件
│   ├── mock/              # 模拟数据
│   │   └── devices.js     # 设备模拟数据
│   ├── router/            # 路由配置
│   │   └── index.js
│   ├── stores/            # Pinia状态管理
│   │   └── device.js      # 设备状态管理
│   ├── utils/             # 工具函数
│   │   └── constants.js   # 常量定义
│   ├── views/             # 页面组件
│   │   ├── Home.vue       # 主页（设备分类和管理）
│   │   └── Simulator.vue  # 模拟器页面
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口
├── package.json           # 项目配置
├── vite.config.js         # Vite配置
└── README.md              # 项目文档
```

## 使用指南

### 基本操作流程

1. **访问首页**：查看设备分类
2. **选择分类**：点击设备分类卡片
3. **浏览设备**：查看该分类下的设备列表
4. **设备详情**：点击设备查看详细信息和界面图片
5. **开始模拟**：点击"开始模拟"进入设备操作体验

### 管理员功能

1. **添加设备**：点击右上角"添加设备"按钮
2. **编辑设备**：在设备卡片上点击"编辑"按钮
3. **删除设备**：在设备卡片上点击"删除"按钮
4. **上传文件**：在设备表单中上传界面图片和坐标文件
5. **坐标编辑**：在模拟器中切换到编辑模式进行坐标配置

### 坐标文件格式

支持的坐标文件格式：
- `.log` - 日志格式
- `.txt` - 文本格式  
- `.json` - JSON格式

JSON格式示例：
```json
{
  "img_1_1": [
    {
      "id": 1,
      "x": 300,
      "y": 200,
      "width": 200,
      "height": 60,
      "label": "开始测量",
      "action": "start_measurement",
      "nextImage": "img_1_2"
    }
  ]
}
```

## 开发指南

### 添加新设备分类

1. 在 `src/utils/constants.js` 中的 `DEVICE_CATEGORIES` 添加新分类
2. 更新相关组件的图标引用
3. 在模拟数据中添加对应分类的设备

### 扩展设备功能

1. 更新 `src/mock/devices.js` 中的设备数据结构
2. 修改 `src/components/DeviceDialog.vue` 表单字段
3. 更新 `src/api/device.js` 中的API接口

### 自定义坐标识别

1. 扩展 `src/components/CoordinateOverlay.vue` 组件
2. 实现坐标文件解析逻辑
3. 添加新的交互类型支持

## 部署配置

### 环境变量

创建对应环境的配置文件：

**.env.development**
```
VITE_API_BASE_URL=http://localhost:8000/api
```

**.env.production**
```
VITE_API_BASE_URL=https://api.mindray-simulator.com/api
```

### 生产部署

```bash
# 构建生产版本
npm run build

# 部署dist目录到Web服务器（如Nginx）
# 配置反向代理到后端API服务
```

### Docker部署

```dockerfile
FROM node:16-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 后端接口说明

项目已预留完整的后端API接口，位于 `src/api/backend.js`，包含：

- 设备CRUD操作
- 文件上传处理
- 坐标数据管理
- 模拟状态管理
- 数据分析接口

后端开发者可参考此文件实现对应的API端点。

## 贡献指南

1. Fork项目到个人仓库
2. 创建功能分支：`git checkout -b feature/new-feature`
3. 提交更改：`git commit -am 'Add new feature'`
4. 推送分支：`git push origin feature/new-feature`
5. 创建Pull Request

### 代码规范

- 遵循Google JavaScript风格指南
- 使用ESLint进行代码检查
- 提交前运行 `npm run lint` 确保代码质量
- 组件和函数需要包含完整的文档注释

## 许可证

MIT License - 详见 [LICENSE](LICENSE) 文件

## 技术支持

如有技术问题或功能建议，请通过以下方式联系：

- 创建GitHub Issue
- 发送邮件至技术支持团队
- 参与项目讨论区

---

**Mindray医疗设备模拟系统** - 让医疗设备体验更便捷，让客户服务更高效。