406 lines
9.9 KiB
Markdown
406 lines
9.9 KiB
Markdown
# AR智能巡检平台 - Web管理端
|
|
|
|
## 项目简介
|
|
|
|
AR智能巡检平台 Web管理端是基于 Vue3 + TypeScript + Element Plus 开发的现代化前端应用,为电力设施巡检管理提供可视化的操作界面。
|
|
|
|
## 技术栈
|
|
|
|
- **框架**: Vue 3.5.13
|
|
- **开发语言**: TypeScript 5.8.3
|
|
- **构建工具**: Vite 6.3.2
|
|
- **UI 框架**: Element Plus 2.9.8
|
|
- **状态管理**: Pinia 3.0.2
|
|
- **路由管理**: Vue Router 4.5.0
|
|
- **HTTP 客户端**: Axios 1.8.4
|
|
- **表格组件**: vxe-table 4.13.7
|
|
- **图表库**: ECharts 5.6.0
|
|
- **CSS 预处理**: Sass 1.87.0
|
|
- **样式引擎**: UnoCSS 66.5.2
|
|
- **国际化**: Vue I18n 11.1.3
|
|
|
|
## 核心功能模块
|
|
|
|
### 1. 巡检管理
|
|
- 巡检任务列表与详情
|
|
- 任务创建与分配
|
|
- 巡检进度实时监控
|
|
- 巡检路线管理
|
|
|
|
### 2. 设备管理
|
|
- 设备台账管理
|
|
- AR 点位配置
|
|
- 设备信息查询
|
|
- 设备状态监控
|
|
|
|
### 3. 缺陷管理
|
|
- 缺陷记录查看
|
|
- 缺陷处理流程
|
|
- 缺陷统计分析
|
|
- 缺陷图片浏览
|
|
|
|
### 4. 数据统计
|
|
- 巡检完成率图表
|
|
- 缺陷趋势分析
|
|
- 设备健康度统计
|
|
- 可视化报表展示
|
|
|
|
### 5. 系统管理
|
|
- 用户管理
|
|
- 角色权限配置
|
|
- 部门组织管理
|
|
- 菜单配置
|
|
- 字典管理
|
|
- 操作日志
|
|
|
|
## 快速开始
|
|
|
|
### 环境要求
|
|
|
|
- Node.js >= 18.18.0
|
|
- npm >= 8.9.0
|
|
|
|
推荐使用以下浏览器:
|
|
- Chrome >= 87
|
|
- Edge >= 88
|
|
- Safari >= 14
|
|
- Firefox >= 78
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
# 使用国内镜像源安装依赖(推荐)
|
|
npm install --registry=https://registry.npmmirror.com
|
|
|
|
# 或使用默认源
|
|
npm install
|
|
```
|
|
|
|
### 开发环境运行
|
|
|
|
```bash
|
|
# 启动开发服务器
|
|
npm run dev
|
|
|
|
# 默认访问地址: http://localhost:80
|
|
# 后端接口代理: http://localhost:8080
|
|
```
|
|
|
|
### 构建部署
|
|
|
|
```bash
|
|
# 构建生产环境
|
|
npm run build:prod
|
|
|
|
# 构建开发环境
|
|
npm run build:dev
|
|
|
|
# 预览生产构建
|
|
npm run preview
|
|
```
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
plus-ui/
|
|
├── public/ # 静态资源
|
|
├── src/
|
|
│ ├── api/ # API 接口定义
|
|
│ │ ├── login.ts # 登录接口
|
|
│ │ ├── menu.ts # 菜单接口
|
|
│ │ ├── system/ # 系统管理接口
|
|
│ │ ├── monitor/ # 监控模块接口
|
|
│ │ ├── tool/ # 工具模块接口
|
|
│ │ └── workflow/ # 工作流接口
|
|
│ ├── assets/ # 资源文件
|
|
│ │ ├── icons/ # 图标
|
|
│ │ ├── images/ # 图片
|
|
│ │ └── styles/ # 样式
|
|
│ ├── components/ # 全局组件
|
|
│ │ ├── IconSelect/ # 图标选择器
|
|
│ │ └── ... # 其他组件
|
|
│ ├── directive/ # 自定义指令
|
|
│ │ ├── permission/ # 权限指令
|
|
│ │ └── common/ # 通用指令
|
|
│ ├── hooks/ # 组合式函数
|
|
│ ├── lang/ # 国际化语言包
|
|
│ │ ├── zh_CN.ts # 简体中文
|
|
│ │ └── en_US.ts # 英文
|
|
│ ├── layout/ # 布局组件
|
|
│ ├── plugins/ # 插件封装
|
|
│ │ ├── auth.ts # 权限插件
|
|
│ │ ├── cache.ts # 缓存插件
|
|
│ │ ├── modal.ts # 弹窗插件
|
|
│ │ └── tab.ts # 标签页插件
|
|
│ ├── router/ # 路由配置
|
|
│ │ └── index.ts # 路由主文件
|
|
│ ├── store/ # Pinia 状态管理
|
|
│ │ ├── modules/
|
|
│ │ │ ├── app.ts # 应用配置
|
|
│ │ │ ├── user.ts # 用户信息
|
|
│ │ │ ├── permission.ts # 权限菜单
|
|
│ │ │ ├── settings.ts # 系统设置
|
|
│ │ │ └── tagsView.ts # 标签视图
|
|
│ │ └── index.ts
|
|
│ ├── types/ # TypeScript 类型定义
|
|
│ │ ├── axios.d.ts # Axios 类型
|
|
│ │ ├── global.d.ts # 全局类型
|
|
│ │ └── router.d.ts # 路由类型
|
|
│ ├── utils/ # 工具函数
|
|
│ │ ├── request.ts # Axios 封装
|
|
│ │ ├── auth.ts # 认证工具
|
|
│ │ └── ... # 其他工具
|
|
│ ├── views/ # 页面视图
|
|
│ │ ├── index.vue # 首页
|
|
│ │ ├── login.vue # 登录页
|
|
│ │ ├── system/ # 系统管理
|
|
│ │ ├── monitor/ # 监控管理
|
|
│ │ └── ... # 其他页面
|
|
│ ├── App.vue # 根组件
|
|
│ ├── main.ts # 入口文件
|
|
│ ├── permission.ts # 路由权限控制
|
|
│ └── settings.ts # 全局配置
|
|
├── vite/ # Vite 插件配置
|
|
│ └── plugins/
|
|
├── .env.development # 开发环境变量
|
|
├── .env.production # 生产环境变量
|
|
├── eslint.config.ts # ESLint 配置
|
|
├── tsconfig.json # TypeScript 配置
|
|
├── vite.config.ts # Vite 配置
|
|
└── package.json # 项目依赖
|
|
|
|
```
|
|
|
|
## 环境配置
|
|
|
|
### 开发环境 (.env.development)
|
|
|
|
```bash
|
|
# 应用标题
|
|
VITE_APP_TITLE = AR智能巡检平台
|
|
|
|
# 开发环境标识
|
|
VITE_APP_ENV = 'development'
|
|
|
|
# 后端接口地址(通过 Vite 代理)
|
|
VITE_APP_BASE_API = '/dev-api'
|
|
|
|
# 应用访问路径
|
|
VITE_APP_CONTEXT_PATH = '/'
|
|
|
|
# 应用端口
|
|
VITE_APP_PORT = 80
|
|
|
|
# 接口加密功能开关
|
|
VITE_APP_ENCRYPT = true
|
|
|
|
# 客户端 ID
|
|
VITE_APP_CLIENT_ID = 'e5cd7e4891bf95d1d19206ce24a7b32e'
|
|
|
|
# WebSocket 开关
|
|
VITE_APP_WEBSOCKET = false
|
|
|
|
# SSE 推送开关
|
|
VITE_APP_SSE = true
|
|
```
|
|
|
|
### 生产环境 (.env.production)
|
|
|
|
修改生产环境配置,确保后端接口地址正确:
|
|
|
|
```bash
|
|
VITE_APP_BASE_API = 'https://your-api-domain.com'
|
|
```
|
|
|
|
## 开发指南
|
|
|
|
### API 接口开发
|
|
|
|
1. 在 `src/api/` 目录下创建对应的接口文件
|
|
2. 定义 TypeScript 类型接口
|
|
3. 使用 Axios 封装好的 request 方法
|
|
|
|
示例:
|
|
|
|
```typescript
|
|
// src/api/inspection/task.ts
|
|
import request from '@/utils/request';
|
|
import { InspectionTaskVO, InspectionTaskForm } from './types';
|
|
|
|
// 获取巡检任务列表
|
|
export function listInspectionTask(query: any) {
|
|
return request({
|
|
url: '/inspection/task/list',
|
|
method: 'get',
|
|
params: query
|
|
});
|
|
}
|
|
|
|
// 创建巡检任务
|
|
export function addInspectionTask(data: InspectionTaskForm) {
|
|
return request({
|
|
url: '/inspection/task',
|
|
method: 'post',
|
|
data: data
|
|
});
|
|
}
|
|
```
|
|
|
|
### 页面开发
|
|
|
|
1. 在 `src/views/` 目录下创建页面组件
|
|
2. 使用 Composition API 编写逻辑
|
|
3. 使用 Element Plus 组件构建 UI
|
|
|
|
示例:
|
|
|
|
```vue
|
|
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" inline>
|
|
<el-form-item label="任务名称">
|
|
<el-input v-model="queryParams.taskName" placeholder="请输入任务名称" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleQuery">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-table :data="taskList">
|
|
<el-table-column prop="taskName" label="任务名称" />
|
|
<el-table-column prop="status" label="状态" />
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { listInspectionTask } from '@/api/inspection/task';
|
|
|
|
const taskList = ref([]);
|
|
const queryParams = ref({
|
|
taskName: ''
|
|
});
|
|
|
|
const handleQuery = async () => {
|
|
const res = await listInspectionTask(queryParams.value);
|
|
taskList.value = res.rows;
|
|
};
|
|
|
|
onMounted(() => {
|
|
handleQuery();
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### 状态管理
|
|
|
|
使用 Pinia 进行状态管理:
|
|
|
|
```typescript
|
|
// src/store/modules/inspection.ts
|
|
import { defineStore } from 'pinia';
|
|
|
|
export const useInspectionStore = defineStore('inspection', {
|
|
state: () => ({
|
|
currentTask: null,
|
|
taskList: []
|
|
}),
|
|
actions: {
|
|
setCurrentTask(task: any) {
|
|
this.currentTask = task;
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
### 权限控制
|
|
|
|
使用权限指令控制按钮显示:
|
|
|
|
```vue
|
|
<el-button v-hasPermi="['inspection:task:add']" type="primary">
|
|
新增任务
|
|
</el-button>
|
|
```
|
|
|
|
## 代码规范
|
|
|
|
### ESLint & Prettier
|
|
|
|
```bash
|
|
# 代码检查
|
|
npm run lint:eslint
|
|
|
|
# 自动修复
|
|
npm run lint:eslint:fix
|
|
|
|
# 代码格式化
|
|
npm run prettier
|
|
```
|
|
|
|
### TypeScript 规范
|
|
|
|
- 所有组件使用 `<script setup lang="ts">`
|
|
- 定义明确的类型接口
|
|
- 避免使用 `any` 类型
|
|
- 导出的函数和变量添加类型注解
|
|
|
|
### 组件规范
|
|
|
|
- 组件文件名使用 PascalCase
|
|
- 单文件组件使用完整的 `<template>` `<script>` `<style>` 结构
|
|
- Props 定义使用 TypeScript 接口
|
|
- 使用 Composition API
|
|
|
|
## 常见问题
|
|
|
|
### 1. 启动报错
|
|
|
|
确保 Node.js 版本 >= 18.18.0,建议使用 nvm 管理 Node 版本。
|
|
|
|
### 2. 接口跨域
|
|
|
|
开发环境已配置代理,无需担心跨域问题。生产环境需要后端配置 CORS。
|
|
|
|
### 3. 构建失败
|
|
|
|
删除 `node_modules` 和 `package-lock.json`,重新安装依赖:
|
|
|
|
```bash
|
|
rm -rf node_modules package-lock.json
|
|
npm install --registry=https://registry.npmmirror.com
|
|
```
|
|
|
|
### 4. 端口冲突
|
|
|
|
修改 `.env.development` 中的 `VITE_APP_PORT` 配置。
|
|
|
|
## 性能优化
|
|
|
|
- 使用 Vite 的代码分割和懒加载
|
|
- 图片资源使用 WebP 格式
|
|
- 组件按需引入
|
|
- 路由懒加载
|
|
- 使用 UnoCSS 减少 CSS 体积
|
|
|
|
## 浏览器兼容性
|
|
|
|
支持现代浏览器和 IE11+(需要 polyfill)
|
|
|
|
## 技术文档
|
|
|
|
- [Vue 3 官方文档](https://cn.vuejs.org/)
|
|
- [Element Plus 文档](https://element-plus.org/zh-CN/)
|
|
- [Vite 文档](https://cn.vitejs.dev/)
|
|
- [TypeScript 文档](https://www.typescriptlang.org/zh/)
|
|
- [Pinia 文档](https://pinia.vuejs.org/zh/)
|
|
|
|
## License
|
|
|
|
MIT License
|
|
|
|
---
|
|
|
|
> 基于 [RuoYi-Vue-Plus](https://gitee.com/dromara/RuoYi-Vue-Plus) 前端脚手架开发
|