134 lines
2.9 KiB
Markdown
134 lines
2.9 KiB
Markdown
|
# 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
|