init: init proj
This commit is contained in:
405
plus-ui/README.md
Normal file
405
plus-ui/README.md
Normal file
@@ -0,0 +1,405 @@
|
||||
# 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) 前端脚手架开发
|
||||
Reference in New Issue
Block a user