Environment-Monitoring-System/ems-frontend/DESIGN.md

环境监督系统 - 前端详细设计说明书 (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)

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 方法来获取和设置角色的权限。