1

2025-10-19 20:31:01 +08:00
parent cfd054f0d9
commit 4ce487588a
287 changed files with 59148 additions and 0 deletions
--- a/ems-frontend/.idea/MarsCodeWorkspaceAppSettings.xml
+++ b/ems-frontend/.idea/MarsCodeWorkspaceAppSettings.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="com.codeverse.userSettings.MarscodeWorkspaceAppSettingsState">
+    <option name="ckgOperationStatus" value="SUCCESS" />
+    <option name="progress" value="0.8795181" />
+  </component>
+</project>
--- a/ems-frontend/.idea/ems-frontend.iml
+++ b/ems-frontend/.idea/ems-frontend.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/ems-frontend/.idea/misc.xml
+++ b/ems-frontend/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_24" default="true" project-jdk-name="24" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
--- a/ems-frontend/.idea/vcs.xml
+++ b/ems-frontend/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>
--- a/ems-frontend/.idea/workspace.xml
+++ b/ems-frontend/.idea/workspace.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="17e838e2-c808-459f-9804-3ff048b3ba04" name="更改" comment="">
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/css.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/document copy.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/document.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/frontend-rules.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/general copy.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/general.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/git copy.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/git.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/gitflow copy.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/gitflow.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/java.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/myproject.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/springboot.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/toolcalling.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/typescript.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.cursor/rules/vuejs.mdc" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.idea/dataSources.local.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../.idea/dataSources.local.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/../.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../ems-backend/API测试文档.md" beforeDir="false" afterPath="$PROJECT_DIR$/../ems-backend/API测试文档.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../ems-backend/src/main/java/com/dne/ems/EmsBackendApplication.java" beforeDir="false" afterPath="$PROJECT_DIR$/../ems-backend/src/main/java/com/dne/ems/EmsBackendApplication.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../ems-backend/业务流程.md" beforeDir="false" afterPath="$PROJECT_DIR$/../ems-backend/业务流程.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../path.txt" beforeDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;customColor&quot;: &quot;&quot;,
+  &quot;associatedIndex&quot;: 0
+}</component>
+  <component name="ProjectId" id="2ynQ1bCeWIlwadCh2M20tUsV9aI" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ModuleVcsDetector.initialDetectionPerformed": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "git-widget-placeholder": "master",
+    "last_opened_file_path": "D:/Work/TTC/FY25/ems/emsfinally/ems-frontend",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-jdk-9823dce3aa75-fbdcb00ec9e3-intellij.indexing.shared.core-IU-251.26094.121" />
+        <option value="bundled-js-predefined-d6986cc7102b-b26f3e71634d-JavaScript-IU-251.26094.121" />
+      </set>
+    </attachedChunks>
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="默认任务">
+      <changelist id="17e838e2-c808-459f-9804-3ff048b3ba04" name="更改" comment="" />
+      <created>1750467647840</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1750467647840</updated>
+      <workItem from="1750467650135" duration="12000" />
+      <workItem from="1750467846865" duration="61000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>
--- a/ems-frontend/ems-monitoring-system/.gitattributes
+++ b/ems-frontend/ems-monitoring-system/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
--- a/ems-frontend/ems-monitoring-system/.gitignore
+++ b/ems-frontend/ems-monitoring-system/.gitignore
@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
--- a/ems-frontend/ems-monitoring-system/.prettierrc.json
+++ b/ems-frontend/ems-monitoring-system/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}
--- a/ems-frontend/ems-monitoring-system/.vscode/extensions.json
+++ b/ems-frontend/ems-monitoring-system/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "esbenp.prettier-vscode"
+  ]
+}
--- a/ems-frontend/ems-monitoring-system/DESIGN.md
+++ b/ems-frontend/ems-monitoring-system/DESIGN.md
@@ -0,0 +1,125 @@
+# 环境监督系统 - 前端详细设计说明书 (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` 方法来获取和设置角色的权限。 
--- a/ems-frontend/ems-monitoring-system/env.d.ts
+++ b/ems-frontend/ems-monitoring-system/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/ems-frontend/ems-monitoring-system/index.html
+++ b/ems-frontend/ems-monitoring-system/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2342b883'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21.34L5.71 22l1.95-4.22A5.8 5.8 0 0 0 16 13.2V13A3 3 0 0 0 13 10a1 1 0 0 0 0 2 1 1 0 0 1 1 1v.2a7.8 7.8 0 0 1-8.22 8l-1.94.43.09-.43C6.38 17.38 9 11 19 9a3 3 0 0 0-2-1z'/%3E%3C/svg%3E">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>环境监测系统</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>