125 lines
7.5 KiB
Markdown
125 lines
7.5 KiB
Markdown
# 环境监督系统 - 前端详细设计说明书 (V1.0)
|
||
|
||
本文档旨在为环境监督系统前端应用的开发提供一个全面、具体、可执行的详细设计方案。
|
||
|
||
## 1. 总体设计
|
||
- **技术栈**: Vue 3 (Composition API), Vite, Element Plus, Pinia, Vue Router, ECharts, Animate.css
|
||
- **设计语言**: 现代、专业、数据驱动。认证页面采用"高级灰"与"青金色"主题，主应用界面采用清晰、标准的后台布局，以蓝色为主色调，强调科技感和可靠性。
|
||
- **核心交互**:
|
||
- 页面切换: 全局采用 `Animate.css` 的 `fadeIn`/`fadeOut` 动画，时长 `0.35s`，提供流畅体验。
|
||
- 响应式布局: 所有页面布局优先使用 `el-row`, `el-col` 栅格系统，确保在不同分辨率下的良好展示效果。
|
||
- 操作反馈: 关键操作（如保存、删除）后，使用 `ElMessage` 或 `ElNotification` 给出明确的全局反馈。复杂操作前，使用 `ElMessageBox.confirm` 进行二次确认。
|
||
|
||
## 2. 核心用户流程 (UML)
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[用户访问应用] --> B{是否已登录?};
|
||
B -- 否 --> C[登录页面 /login];
|
||
B -- 是 --> F[主应用界面];
|
||
C --> D{有无账户?};
|
||
C --> P[找回密码页面 /forgot-password];
|
||
P -- 重置成功 --> C;
|
||
D -- 无 --> E[注册页面 /register];
|
||
D -- 有 --> C;
|
||
E -- 注册成功 --> C;
|
||
C -- 登录成功 --> F;
|
||
|
||
subgraph 主应用界面 /
|
||
direction LR
|
||
G[主布局] --> H[数据概览 /dashboard];
|
||
G --> J[实时监控 /monitoring/map];
|
||
G --> K[数据分析 /data/query];
|
||
G --> L[告警管理 /alarms];
|
||
G -- 系统运维 --> M[设备管理 /devices];
|
||
G -- 系统运维 --> N[系统管理 /system];
|
||
end
|
||
```
|
||
|
||
## 3. 认证页面
|
||
|
||
### 3.1 登录页面 (`LoginView.vue`)
|
||
- **路径**: `/login`
|
||
- **数据结构**: `loginForm: { username: '', password: '' }`
|
||
- **组件实现**:
|
||
- 整体布局: `.login-container` 全屏flex居中，背景图覆盖。
|
||
- 登录卡片: `el-card`，`width: 480px`，`border-radius: 25px`，磨砂玻璃效果 (`background: rgba(245, 245, 245, 0.85); backdrop-filter: blur(15px);`)。
|
||
- 表单: `el-form`，`label-position="top"`，`hide-required-asterisk`。
|
||
- 输入框: `el-input`, `size="large"`, `border-radius: 10px`。密码框配置 `show-password`。
|
||
- 按钮: `el-button`, `size="large"`, `border-radius: 10px`，主题色 `#004d40`。
|
||
- 链接: `el-link`，`@click="$router.push('/register')"` 和 `@click="$router.push('/forgot-password')"` 实现跳转。
|
||
- **交互逻辑**: 点击登录，调用 `form.validate()`，成功后请求登录接口，通过 `Pinia` 管理用户token和信息，并跳转至 `/dashboard`。
|
||
|
||
### 3.2 注册页面 (`RegisterView.vue`)
|
||
- **路径**: `/register`
|
||
- **数据结构**: `registerForm: { email: '', phone: '', name: '', password: '', confirmPassword: '', role: '', code: '' }`
|
||
- **组件实现**:
|
||
- 布局与风格: 与登录页保持完全一致。
|
||
- 表单:
|
||
- 姓名/手机号: 使用 `el-row` 和 `el-col` 实现并排布局。
|
||
- 验证码: `el-input` 与 `el-button` 组合。按钮绑定 `sendCode` 方法，通过 `disabled` 和 `loading` 属性控制状态，通过 `countdown` ref 实现60秒倒计时。
|
||
- 密码确认: 通过自定义 `validator` 函数实现两次密码输入一致性校验。
|
||
- 身份选择: `el-select` 组件。
|
||
- **交互逻辑**: 表单校验通过后，调用注册接口，成功后使用 `ElMessage.success` 提示，并引导用户返回登录页。
|
||
|
||
### 3.3 找回密码页面 (`ForgotPasswordView.vue`)
|
||
- **路径**: `/forgot-password`
|
||
- **数据结构**: `form: { email: '', code: '', password: '', confirmPassword: '' }`
|
||
- **组件实现**:
|
||
- 布局与风格: 与登录/注册页保持完全一致的视觉风格。
|
||
- 表单:
|
||
- 邮箱输入: `el-input`。
|
||
- 验证码: `el-input` 与 `el-button` 组合，按钮有发送状态和倒计时功能。
|
||
- 新密码/确认密码: `el-input`，`type="password"`，带有一致性校验。
|
||
- 按钮: "确认重置"按钮，`type="primary"`。
|
||
- 链接: "返回登录"链接。
|
||
- **交互逻辑**: 填写邮箱后可获取验证码。全部表单校验通过后，调用重置密码接口，成功后提示用户并自动跳转回登录页面。
|
||
|
||
## 4. 主应用核心功能页面
|
||
|
||
### 4.1 数据概览 (`DashboardView.vue`)
|
||
- **路径**: `/dashboard`
|
||
- **数据结构**: `overviewData: { kpi: {}, alarmStats: {}, trendData: [], deviceStatus: [] }`
|
||
- **组件实现**:
|
||
- 布局: `el-row` `el-col` 栅格，`gutter="20"`。
|
||
- 核心指标卡: 4个 `el-col`，每个内部是 `el-card`，使用 `el-statistic` 组件展示数值。
|
||
- 趋势图: ECharts 实例，`type: 'line'`，渲染 `trendData`。
|
||
- 状态分布图: ECharts 实例，`type: 'pie'`，渲染 `deviceStatus`。
|
||
- **交互逻辑**: 页面加载时 `onMounted`，调用接口获取所有概览数据并更新到 ref。可设置定时器定时刷新。
|
||
|
||
### 4.2 实时监控 (`MonitoringMapView.vue`)
|
||
- **路径**: `/monitoring/map`
|
||
- **数据结构**: `monitorPoints: [{ id, lng, lat, status, data: {} }]`
|
||
- **组件实现**:
|
||
- GIS地图: 引入第三方地图SDK（如高德JS API），在 `onMounted` 中初始化地图实例。
|
||
- 点标记: 遍历 `monitorPoints`，使用 `AMap.Marker` 创建标记，并根据 `status` 赋予不同颜色的 `icon`。
|
||
- 信息窗体: 为每个 Marker 绑定 `click` 事件，创建 `AMap.InfoWindow` 实例，内容可由 Vue 组件 (`render`) 生成，展示该点位的详细 `data`。
|
||
- **交互逻辑**: 通过 WebSocket 或定时轮询，持续更新 `monitorPoints` 数据，并实时反映在地图标记和状态上。
|
||
|
||
### 4.3 数据查询与分析 (`DataQueryView.vue`)
|
||
- **路径**: `/data/query`
|
||
- **数据结构**: `queryParams: {}, chartData: {}, tableData: []`
|
||
- **组件实现**:
|
||
- 查询区: `el-card` 包裹 `el-form`，使用 `el-date-picker` (type="datetimerange"), `el-cascader`, `el-select`。
|
||
- 图表/表格切换: `el-tabs` 组件 (`v-model="activeTab"`)。
|
||
- 图表 Tab: ECharts 实例，根据 `chartData` 渲染。
|
||
- 表格 Tab: `el-table`，`v-loading="loading"`，数据绑定 `tableData`。`el-pagination` 组件实现分页。
|
||
- **交互逻辑**: 点击查询，将 `queryParams` 发送至后端，获取数据后分别更新 `chartData` 和 `tableData`。
|
||
|
||
### 4.4 告警管理 (`AlarmListView.vue`)
|
||
- **路径**: `/alarms`
|
||
- **组件实现**:
|
||
- 筛选区: `el-form`，`layout="inline"`。
|
||
- 表格: `el-table`。
|
||
- 告警级别/处理状态列: 使用 `el-tag` 并根据值设置不同的 `type` (e.g., `danger`, `success`)。
|
||
- 操作列: 使用 `el-button` `link` `size="small"`。点击"处理"按钮，弹出 `el-dialog`，内部包含一个表单供用户提交处理记录。
|
||
- **交互逻辑**: 标准的 CRUD (Create, Read, Update, Delete) 列表页逻辑。
|
||
|
||
### 4.5 设备管理 (`DeviceListView.vue`)
|
||
- **路径**: `/devices`
|
||
- **组件实现**: 与告警管理页面类似，是另一个标准的CRUD页面。新增/编辑功能使用 `el-dialog` 弹出表单。
|
||
|
||
### 4.6 系统管理
|
||
- **路径**: `/system`
|
||
- **设计**: 使用二级路由和嵌套布局。顶层为 `el-tabs`，切换用户管理、角色管理等。
|
||
- **角色管理**: 核心是权限分配，使用 `el-tree`，`show-checkbox`，`node-key="id"`，通过 `getCheckedKeys` 和 `setCheckedKeys` 方法来获取和设置角色的权限。 |