# Vue2 模型检测系统

一个基于 Vue2 + Three.js 的3D模型检测系统，支持PC端和移动端自适应。

## 功能特性

- 📱 响应式设计，自动适配PC端和移动端
- 🎨 Three.js 3D模型渲染
- 🏷️ 模型标注打点系统
- 📊 检测内容表格展示
- 🎯 点击标注高亮显示
- 📋 三类检查内容：总体外观、主要参数、关键元器件

## 技术栈

- Vue 2.6.14
- Vue Router 3.5.3
- Three.js 0.150.0
- Element UI 2.15.13

## 项目结构

```
vue-model-review/
├── public/
│   ├── index.html
│   └── models/              # GLB模型文件目录
│       ├── 交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb
│       ├── 交流棒形悬式复合绝缘子，FXBW-10/70.glb
│       └── 10kV 三相隔离开关.glb
├── src/
│   ├── components/
│   │   ├── ThreeViewer.vue  # 3D模型查看器
│   │   └── CheckTable.vue   # 检测表格组件
│   ├── views/
│   │   ├── ModelList.vue    # 模型列表页
│   │   └── ModelDetail.vue  # 模型详情页
│   ├── router/
│   │   └── index.js         # 路由配置
│   ├── data/
│   │   └── data.json        # 模型数据
│   ├── App.vue
│   └── main.js
├── package.json
├── vue.config.js
└── README.md
```

## 安装依赖

```bash
npm install
```

## 开发运行

```bash
npm run serve
```

访问 http://localhost:8080

## 生产构建

```bash
npm run build
```

## 使用说明

### 1. 准备GLB模型文件

将GLB模型文件放置在 `public/models/` 目录下，文件名需与 `data.json` 中的 `modelName` 字段对应。

例如：`交流避雷器，AC10kV,13kV, 硅橡胶，40kV, 带间隙。外间隙，带支撑件间隙，不兼做绝缘子.glb`

### 2. 配置模型数据

编辑 `src/data/data.json`，添加或修改模型数据：

```json
[
  {
    "modelName": "模型名称",
    "appearanceCheck": [...],
    "mainDataCheck": [...],
    "componentCheck": [...]
  }
]
```

### 3. 页面布局

#### PC端布局
- 顶部：模型名称
- 左侧：3D模型展示
- 右侧：检测内容表格

#### 移动端布局
- 顶部：模型名称
- 中间：3D模型展示
- 底部：检测内容表格

### 4. 交互功能

- 点击3D模型上的标注点，会高亮对应部件
- PC端：右侧表格自动展开对应检查项
- 移动端：弹出抽屉显示检查要求

## 注意事项

1. GLB模型文件需要放在 `public/models/` 目录下
2. 模型文件名必须与 `data.json` 中的 `modelName` 完全一致
3. 标注点位置采用圆形分布算法自动计算
4. 移动端判断阈值为屏幕宽度 768px

## 浏览器支持

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 系统要求

- Node.js >= 14.x
- npm >= 6.x

推荐使用 Node.js 16.x 或更高版本以获得最佳兼容性。

## License

MIT