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
|