# EnvironmentDashboard

**Repository Path**: fenlinu/environment-dashboard

## Basic Information

- **Project Name**: EnvironmentDashboard
- **Description**: 本项目是一个环境监测数据可视化大屏，旨在实时展示空气质量、温湿度、水质、能源消耗等环境数据。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-22
- **Last Updated**: 2025-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 环境监测数据可视化大屏

## 项目介绍

本项目是一个环境监测数据可视化大屏，旨在实时展示空气质量、温湿度、水质、能源消耗等环境数据。通过 WebSocket 实现数据的实时更新，并提供直观的图表和地图展示，帮助用户快速了解环境状况。


## 文件结构
```
环境监测数据可视化大屏
├── .env
├── .gitignore
├── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md
├── vite.config.js
├── .vscode/
│   └── extensions.json
├── public/
│   └── favicon.ico
├── server/
│   ├── index.js
│   ├── data/
│   │   ├── air-quality.json
│   │   ├── energy-consumption.json
│   │   ├── monitoring-stations.json
│   │   ├── overview-stats.json
│   │   ├── pollution-ranking.json
│   │   ├── temperature-humidity.json
│   │   └── water-quality.json
│   └── modules/
│       ├── dataGenerator.js
│       ├── fileUtils.js
│       ├── routes.js
│       ├── scheduler.js
│       └── websocket.js
└── src/
    ├── App.vue
    ├── main.js
    ├── assets/
    │   ├── logo.svg
    │   └── maps/
    └── components/
        ├── AirQualityChart.vue
        └── ...
```

## 文件结构说明
以下是项目中关键文件和目录的作用说明：

### 根目录

- **`.env`**：存储环境变量，例如 API 密钥、端口号等配置。
- **`.gitignore`**：定义 Git 忽略的文件和目录，例如 `node_modules`、日志文件等。
- **`index.html`**：前端应用的入口 HTML 文件，包含 Vue 应用的挂载点。
- **`package.json`**：项目的依赖管理文件，定义了依赖、脚本和项目信息。
- **`pnpm-lock.yaml`**：锁定依赖版本，确保团队成员安装的依赖一致。
- **`vite.config.js`**：Vite 的配置文件，用于定义开发服务器和构建行为。

### `public`

- **`favicon.ico`**：网站的图标文件。

### `server`

- **`index.js`**：后端服务的入口文件，启动 Koa 应用并配置 API 和 WebSocket。
- **`data/`**：存储模拟数据的 JSON 文件。
  - **`air-quality.json`**：空气质量数据。
  - **`energy-consumption.json`**：能源消耗数据。
  - **`monitoring-stations.json`**：监测站点信息。
  - **`overview-stats.json`**：概览统计数据。
  - **`pollution-ranking.json`**：污染物排名数据。
  - **`temperature-humidity.json`**：温湿度数据。
  - **`water-quality.json`**：水质数据。
- **`modules/`**：后端功能模块。
  - **`dataGenerator.js`**：生成模拟数据的工具。
  - **`fileUtils.js`**：文件操作工具，例如读取和写入 JSON 文件。
  - **`routes.js`**：定义后端 API 路由。
  - **`scheduler.js`**：定时任务模块，用于定期生成数据。
  - **`websocket.js`**：WebSocket 服务模块，用于实时推送数据。

### `src`

- **`App.vue`**：Vue 应用的根组件。
- **`main.js`**：Vue 应用的入口文件，初始化应用并挂载到 DOM。
- **`assets/`**：存放静态资源。
  - **`logo.svg`**：应用的 Logo。
  - **`maps/`**：地图相关资源。
- **`components/`**：存放 Vue 组件。
  - **`AirQualityChart.vue`**：用于展示空气质量数据的图表组件。
  - **`...`**：其余各种相关组件

## 项目说明

本项目分为前端和后端两部分：
- **前端**：基于 Vue 3 和 Element Plus 构建，使用 ECharts 进行数据可视化。
- **后端**：基于 Koa 框架，提供 API 和 WebSocket 服务，定时生成数据并广播给前端。


## 所用技术栈

### 前端
- **Vue 3**：构建用户界面
- **Element Plus**：UI 组件库
- **ECharts**：数据可视化库
- **Vite**：前端构建工具

### 后端
- **Koa**：轻量级 Node.js Web 框架
- **WebSocket**：实现实时通信
- **dotenv**：环境变量管理
- **fs**：文件操作


## 项目功能

1. **实时数据展示**：
   - 空气质量
   - 温湿度
   - 水质
   - 能源消耗
   - 污染物排名
   - 监测站点地图

2. **数据更新**：
   - 后端定时生成模拟数据
   - WebSocket 实时推送更新

3. **交互功能**：
   - 切换暗色模式
   - 手动刷新数据

4. **预警功能**：
   - 随机生成环境预警信息

---

## 项目运行步骤

### 1. 安装项目依赖
```bash
pnpm install
```

### 2. 运行项目
```bash
pnpm run start
# 或者
pnpm start
```

### 3.（可选）添加环境变量
`项目根目录下创建.env文件，内容如下：`
```txt
# 后端服务端口
PORT=3000

# 数据刷新间隔，单位：毫秒
REFRESH_INTERVAL=1000

# 警告弹窗间隔，单位：毫秒
WARNING_INTERVAL=15000
```