# 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) 前端脚手架开发