暂存本地

README.md

@@ -0,0 +1,133 @@
+# 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