利用Cursor编写工业WebScada-004创建设备控制界面

本次目的

1：实现对泵站所有设备参数的显示和控制。

2：新增实时和历史水位曲线。

1.创建提示词

你现在是我的 C# / .NET 工业 WebSCADA 高级 UI 架构工程师。

当前项目是：
Blazor Server / .NET 8 工业 WebSCADA 系统。

注意：
1. 不允许新建项目
2. 不允许推翻现有架构
3. 不允许修改现有 MQTT / SignalR / PLC 通讯逻辑
4. 不允许修改现有实时数据结构
5. 只允许：
   - 修改页面布局
   - 新增组件
   - 优化工业 SCADA UI
   - 增加设备状态可视化
   - 增加水位趋势图
6. 必须基于现有项目代码进行修改
7. Razor 页面不要写大量业务逻辑
8. 业务逻辑必须放到 Service / ViewModel
9. 每次最多修改 5 个文件
10. 修改前先分析
11. 修改后说明测试方法

==================================================
一、本次目标
==================================================

我要创建：
“泵站设备控制界面”

重点：
不是后台管理系统。

而是真正工业 WebSCADA 设备控制页面。

目标：
值班人员进入页面后，
3秒内能看出：

1. 当前水位
2. 当前是否达到启泵条件
3. 哪台泵正在运行
4. 哪台泵故障
5. 当前控制模式
6. 当前是否需要人工干预

==================================================
二、页面整体布局
==================================================

页面结构：

顶部状态栏
↓
4台泵设备状态区（核心区域）
↓
水位实时曲线
↓
公共参数区

注意：

不要再创建：
“独立水位监控区”
“独立控制操作区”

必须：
把水位信息和控制功能，
融合到4台泵状态区域。

==================================================
三、顶部状态栏
==================================================

顶部固定状态栏。

显示：

1. 泵站名称
2. 在线状态
3. 当前水位 WATER_LEVE
4. 控制模式 CONTROL_MODEL
5. 当前运行泵数量
6. 当前故障泵数量
7. MQTT连接状态
8. 最后更新时间

布局：

左侧：
泵站名称 + 在线状态

中间：
当前水位（大字体）

右侧：
模式 / 运行泵数量 / 故障数量 / 更新时间

要求：

1. 深色工业风
2. 发光边框
3. 状态颜色明显
4. 当前水位字体最大
5. 在线绿色
6. 故障红色
7. 离线灰色

==================================================
四、核心区域（最重要）
==================================================

核心区域：

不要再使用：
“左侧水位区 + 右侧泵区”

现在改成：

一个整体设备监控区。

布局：

顶部：
当前液位信息 + 启停液位信息

下方：
4台泵设备卡片

==================================================
五、顶部液位信息
==================================================

显示：

当前水位：
WATER_LEVE

液位量程：
WATER_LEVEL_RANGE

开泵液位：
LEVEL_PUMP1_ON
LEVEL_PUMP2_ON
LEVEL_PUMP3_ON
LEVEL_PUMP4_ON

停泵液位：
LEVEL_PUMP1_OFF
LEVEL_PUMP2_OFF
LEVEL_PUMP3_OFF
LEVEL_PUMP4_OFF

要求：

1. 不要做独立水位池
2. 不要做巨大液位区域
3. 使用：
   工业横向液位条
4. 当前水位动态变化
5. 液位条使用工业蓝
6. 液位带发光效果
7. 液位变化平滑动画
8. 当前液位值显示在液位条右侧

同时：

在液位条上显示：

1. 开泵液位线（绿色）
2. 停泵液位线（红色）

要求：

1. 线条带文字
2. 超过开泵液位：
   液位条高亮
3. 低于停泵液位：
   液位条变暗

目标：

值班人员一眼能看出：
当前是否达到启泵条件。

==================================================
六、4台泵设备卡片
==================================================

页面核心：

4台泵设备卡片。

要求：

1. 横向4列布局
2. 每台泵独立设备卡片
3. 卡片不要太高
4. 增加工业边框
5. 增加发光效果
6. 不允许布局拥挤

==================================================
七、每台泵卡片显示内容
==================================================

每台泵卡片显示：

1. 泵编号
2. 3D工业泵图标
3. 当前状态
4. 远控状态
5. 变频运行状态
6. 变频故障状态
7. 泵故障状态
8. 当前频率反馈
9. 频率给定
10. 当前运行时间
11. 累计运行时间
12. 当前电量
13. 启动按钮
14. 停止按钮
15. 累计时间清零按钮

==================================================
八、泵状态颜色
==================================================

状态规则：

如果：
PUMPx_FAULT = true
或
PUMPx_VFD_FAULT = true

状态：
故障

颜色：
黄色 / 红色闪烁

否则如果：
PUMPx_VFD_RUNNING = true

状态：
运行

颜色：
红色 / 蓝色

动画：
叶轮旋转

否则如果设备离线：

状态：
离线

颜色：
灰色

否则：

状态：
停止

颜色：
绿色

==================================================
九、泵图标要求
==================================================

不要：

1. 小圆点
2. 简单svg
3. 普通icon

现在需要：

工业3D泵图标。

要求：

1. 类似真实工业离心泵
2. 金属质感
3. 工业科技风
4. 发光效果
5. 运行时旋转动画
6. 故障闪烁
7. 离线灰化

==================================================
十、控制按钮
==================================================

控制按钮：

不要独立区域。

直接放到每台泵卡片底部。

按钮：

[启动]
[停止]
[累计清零]

要求：

1. 工业风按钮
2. 发光边框
3. 危险操作二次确认
4. 不允许页面直接写PLC
5. 必须调用统一服务：
IPumpStationCommandService

==================================================
十一、水位实时曲线
==================================================

设备区下方：

显示：
水位实时曲线

数据：

WATER_LEVE

要求：

1. 深色工业风
2. 平滑曲线
3. 实时滚动
4. 最近1小时
5. 实时追加数据
6. 当前点高亮
7. 显示启停液位参考线
8. 报警区间变红
9. 鼠标悬停显示详细值

推荐：

ECharts

要求：

不要把大量JS直接写到Razor页面。

必须封装组件。

==================================================
十二、底部参数区
==================================================

底部：

左右两列。

左侧：
公共参数

显示：

1. PUMP_NUM
2. PUMP_SWITCH_TIME
3. PUMP_START_FEEDBACK_TIMEOUT
4. CONTROL_MODEL
5. WATER_LEVEL_RANGE
6. DELAY_TIME

右侧：
液位设定参数

显示：

1. LEVEL_PUMP1_ON
2. LEVEL_PUMP2_ON
3. LEVEL_PUMP3_ON
4. LEVEL_PUMP4_ON
5. LEVEL_PUMP1_OFF
6. LEVEL_PUMP2_OFF
7. LEVEL_PUMP3_OFF
8. LEVEL_PUMP4_OFF

==================================================
十三、组件化要求
==================================================

不要把代码全部写在一个页面。

拆分组件：

1. PumpStationHeader
2. HorizontalWaterLevel
3. PumpDeviceCard
4. PumpControlButtons
5. WaterLevelTrendChart
6. PumpParameterPanel

==================================================
十四、颜色风格
==================================================

背景：
#081018

卡片：
#132235

边框：
#1f3a56

运行：
#00e5ff

停止：
#00d26a

故障：
#ff4d4f

报警：
#ffcc00

离线：
#6b7280

要求：

1. 深色工业风
2. 智慧水务SCADA风格
3. 科技感
4. 发光效果
5. 不要像普通后台系统

==================================================
十五、执行要求
==================================================

请先：

1. 分析当前页面结构
2. 输出新的布局方案
3. 输出需要新增的组件
4. 输出修改计划
5. 暂时不要直接大量修改代码
6. 每次最多修改5个文件
7. 修改前先说明计划
8. 修改后说明测试方法   

创建后程序后需要经历多次调试才能完成所需要的需修改，中间，可以利用多个不通的ai模型提示创建，然后喂给agent

 

调试遇到的问题

问题1：数据不能实时显示，之前利用Cursor一直无法解决，最终换成Claude Code解决了

 

确定大体架构，
ASP.NET Core Blazor Server
+
BackgroundService 后台采集
+
ConcurrentDictionary 实时缓存
+
SignalR 毫秒级推送
+
数据库异步落库


BackgroundService 后台采集
设备分组并发采集
        ↓
每台设备独立采集任务
        ↓
实时缓存 ConcurrentDictionary
        ↓
变化数据推送 SignalR
        ↓
数据库异步批量写入