# monitor-dashboard

**Repository Path**: linze-v2/monitor-dashboard

## Basic Information

- **Project Name**: monitor-dashboard
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-25
- **Last Updated**: 2026-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# monitor-dashboard

> 企业低压用电智能体态势大屏 · 独立前端项目 (Vue 3 + Vite + TypeScript + Pinia + Konva + Element Plus + ECharts)
>
> 设计文档位于 `../openspec/changes/add-monitoring-dashboard/`，必读：
> - `proposal.md`：背景/目标/范围/验收
> - `design.md`：架构/目录/画布数据模型/Nginx 模板
> - `tasks.md`：分阶段实施清单
> - `research/API_REQUIREMENTS.md`：复用与待评估接口清单

## 1. 本地开发

> 前提：Node.js >= 18（本仓库测试环境是 v24.15.0），可用 `npm` 或 `pnpm`。

```bash
# 仅首次
npm install

# 启动开发服务（默认 http://localhost:8587）
npm run dev

# 类型检查
npm run typecheck

# 构建生产产物（输出到 dist/）
npm run build

# 本地预览构建产物
npm run preview
```

开发模式下，`/webapi` 与 `/agent` 走 Vite proxy（见 `vite.config.ts`），默认转发到：
- `/webapi → https://www.huidianyun.com.cn/webapi`
- `/agent  → http://192.168.3.166:8001`（内网，需 VPN/同网段）

如需替换目标，编辑 `.env.development` 中 `VITE_PROXY_WEBAPI` / `VITE_PROXY_AGENT`。

## 2. 自动登录（仅开发/试运行）

`.env.development` 内默认账号 `15197207579/207579`，首次挂载会自动调 `/auth/login` 拿 token。

**生产强制关闭**（见 `.env.production` 中 `VITE_AUTO_LOGIN=false`）——上线必须切到 SSO 或一次性 token，并清空账号/密码字段。

## 3. Nginx 部署

```bash
npm run build
# 把 dist/ 内容拷到 Nginx 静态目录
# 把 deploy/nginx.conf.sample 拷到 /etc/nginx/conf.d/monitor.conf 并按需改 server_name
nginx -t && nginx -s reload
```

模板见 `deploy/nginx.conf.sample`。

## 4. 大屏布局（1920 × 1080 基准）

```
┌─ Header ─────────────────────────────────────────────────────────┐
├──────────┬──────────────────────────────────┬───────────────────┤
│ KPI      │  组织架构画布 (OrgCanvas)         │ 今日组织能耗趋势  │
├──────────┤                                  ├───────────────────┤
│ 告警列表 │  智能体对话                       │ AI 决策日志(占位) │
└──────────┴──────────────────────────────────┴───────────────────┘
```

详细约束见 `../openspec/changes/add-monitoring-dashboard/design.md`。

## 5. 目录结构

```
src/
├─ api/           # axios 实例 + 各资源 API
├─ stores/        # Pinia (auth / kpi / alarm / orgTree / layout / energy / agent / aiLog)
├─ composables/   # usePolling / useScale
├─ types/         # 后端响应/前端模型 TS 类型
├─ components/
│  ├─ panels/     # 7 个面板组件
│  ├─ orgcanvas/  # Konva 画布相关 (OrgCanvas / OrgAreaShape / ControlUnit / autoLayout)
│  └─ common/     # DashHeader / ScaleContainer
├─ views/
│  └─ Dashboard.vue
├─ router/
├─ utils/
├─ App.vue
└─ main.ts
```