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
安装依赖
# 使用国内镜像源安装依赖(推荐)
npm install --registry=https://registry.npmmirror.com
# 或使用默认源
npm install
开发环境运行
# 启动开发服务器
npm run dev
# 默认访问地址: http://localhost:80
# 后端接口代理: http://localhost:8080
构建部署
# 构建生产环境
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)
# 应用标题
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)
修改生产环境配置,确保后端接口地址正确:
VITE_APP_BASE_API = 'https://your-api-domain.com'
开发指南
API 接口开发
- 在
src/api/目录下创建对应的接口文件 - 定义 TypeScript 类型接口
- 使用 Axios 封装好的 request 方法
示例:
// 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
});
}
页面开发
- 在
src/views/目录下创建页面组件 - 使用 Composition API 编写逻辑
- 使用 Element Plus 组件构建 UI
示例:
<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 进行状态管理:
// 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;
}
}
});
权限控制
使用权限指令控制按钮显示:
<el-button v-hasPermi="['inspection:task:add']" type="primary">
新增任务
</el-button>
代码规范
ESLint & Prettier
# 代码检查
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,重新安装依赖:
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)
技术文档
License
MIT License
基于 RuoYi-Vue-Plus 前端脚手架开发