利用Cursor编写工业WebScada-003创建实时界面

本次目的：新增实时界面，

最总效果

1：当时数据改变后，能够实时在界面刷新，

2：界面上统计离线，在线设备数量，统计运行，故障泵的总数。

3：离线的设备数据，将变暗。

4：通过modbus tcp采集数据

1、界面创建提示词

如果你不知道怎么描述，先说出你的想法，让ai帮你优化，你在修改ai反馈的内容，继续优化

你现在是我的 C# / .NET 工业 WebSCADA 高级开发工程师。

当前项目是基于 C# 的 IndustrialWebScada 系统，需要修改 Web 主界面和新增泵站控制界面。请严格按照现有项目结构、现有模型、现有 SignalR 实时数据、现有点表配置方式进行修改，不要推翻原有架构。

一、现场情况

现在共有 15 个泵站。

每个泵站都有相同的数据点结构，每个泵站包含 4 台泵，点位包括：

1. 远控信号
2. 变频运行信号
3. 变频故障信号
4. 泵故障信号
5. 手动启停指令
6. 累计时间清零指令
7. 当前运行时间秒
8. 当前运行时间分
9. 累计运行时间秒
10. 累计运行时间分
11. 泵控制数量
12. 定时切换泵时间
13. 启动超时时间
14. 开单泵液位
15. 开双泵液位
16. 开三泵液位
17. 开四泵液位
18. 停单泵液位
19. 停双泵液位
20. 停三泵液位
21. 停四泵液位
22. 控制模式
23. 液位量程
24. 泵频率给定
25. 泵电量
26. 延时启动时间
27. 当前液位

二、需要修改主界面

请修改系统主界面 Dashboard / RealtimeBoard 页面。

主界面需要显示 15 个泵站的主要运行数据。

每个泵站以一个卡片显示，卡片内容包括：

1. 泵站名称
2. 当前液位
3. 启泵液位
   - LEVEL_PUMP1_ON
   - LEVEL_PUMP2_ON
   - LEVEL_PUMP3_ON
   - LEVEL_PUMP4_ON
4. 停泵液位
   - LEVEL_PUMP1_OFF
   - LEVEL_PUMP2_OFF
   - LEVEL_PUMP3_OFF
   - LEVEL_PUMP4_OFF
5. 4 台泵的运行状态
6. 4 台泵的运行时长
7. 4 台泵的运行频率
8. 4 台泵的故障状态
9. 控制模式
   - 0：手动模式
   - 1：水位控制模式

三、泵运行状态显示规则

泵的状态不要只显示文字，要用图片或图标表现。

每台泵显示一个泵图标，颜色规则如下：

1. 绿色：停止
2. 红色：运行 / 允许运行
3. 黄色：故障

状态判断逻辑：

如果 PUMPx_FAULT = true 或 PUMPx_VFD_FAULT = true：
    状态 = 故障
    显示黄色

否则如果 PUMPx_VFD_RUNNING = true：
    状态 = 运行
    显示红色

否则：
    状态 = 停止
    显示绿色

请封装一个 PumpStatus 计算方法，不要在 Razor 页面中写大量 if 判断。

四、新增 15 个泵站控制界面

请新增泵站控制页面。

页面路由建议：

/pump-stations
/pump-stations/{stationId}

要求：

1. /pump-stations 显示 15 个泵站列表
2. 点击某个泵站进入对应泵站详情控制界面
3. 每个泵站详情界面显示该泵站所有点位数据
4. 每个泵站详情界面显示 4 台泵的状态卡片
5. 每台泵显示：
   - 远控信号
   - 变频运行信号
   - 变频故障
   - 泵故障
   - 手动启停指令状态
   - 当前运行时间
   - 累计运行时间
   - 运行频率
   - 电量
6. 显示泵站公共参数：
   - 泵被控制的数量 PUMP_NUM
   - 定时切换泵时间 PUMP_SWITCH_TIME
   - 启动超时时间 PUMP_START_FEEDBACK_TIMEOUT
   - 控制模式 CONTROL_MODEL
   - 液位量程 WATER_LEVEL_RANGE
   - 延时启动设定 DELAY_TIME
7. 显示启泵液位和停泵液位设置值
8. 所有数据必须来自实时数据缓存或 SignalR 推送，不允许写死模拟值

五、液位趋势图

每个泵站详情界面必须增加液位趋势图。

要求：

1. 显示当前泵站液位随时间变化趋势
2. X 轴为时间
3. Y 轴为液位
4. 支持实时刷新
5. 默认显示最近 1 小时数据
6. 后续可以扩展查询历史数据
7. 如果当前项目已有图表组件，优先复用
8. 如果没有图表组件，可以使用 ECharts / Chart.js / ApexCharts 中任意一种
9. 图表组件要封装，不要把大量 JS 代码直接写在 Razor 页面里

六、点位命名规则

每个泵站的数据点名称保持统一。

例如：

PUMP1_REMOTE
PUMP1_VFD_RUNNING
PUMP1_VFD_FAULT
PUMP1_FAULT
PUMP1_START_C_M
RESET_PUMP1_ACC_TIME_C
PUMP1_CURRENT_RUN_TIME_SEC
PUMP1_CURRENT_RUN_TIME_MIN
PUMP1_ACC_RUN_TIME_SEC
PUMP1_ACC_RUN_TIME_MIN
PUMP1_FREQUENCE_SET
PUMP1_KWH

PUMP2、PUMP3、PUMP4 同理。

公共参数：

PUMP_NUM
PUMP_SWITCH_TIME
PUMP_START_FEEDBACK_TIMEOUT
LEVEL_PUMP1_ON
LEVEL_PUMP2_ON
LEVEL_PUMP3_ON
LEVEL_PUMP4_ON
LEVEL_PUMP1_OFF
LEVEL_PUMP2_OFF
LEVEL_PUMP3_OFF
LEVEL_PUMP4_OFF
CONTROL_MODEL
WATER_LEVEL_RANGE
DELAY_TIME
CURRENT_LEVEL

七、界面风格要求

整体界面要求：

1. 工业 WebSCADA 风格
2. 深色主题
3. 卡片式布局
4. 主界面一屏尽量展示 15 个泵站
5. 每个泵站卡片不能太大
6. 状态颜色清晰
7. 故障状态要醒目
8. 支持大屏显示
9. 移动端可以自适应
10. 页面不要杂乱，要有层级感

主界面布局建议：

顶部：
- 系统标题
- MQTT 连接状态
- 当前时间
- 在线泵站数量
- 故障泵数量

中间：
- 15 个泵站状态卡片
- 每个卡片显示当前液位、启停液位、4 台泵状态

底部或右侧：
- 报警摘要
- 最近故障信息

八、控制功能要求

泵站详情界面中可以预留控制按钮，但控制写入必须安全。

控制按钮包括：

1. 泵1启动 / 停止
2. 泵2启动 / 停止
3. 泵3启动 / 停止
4. 泵4启动 / 停止
5. 累计运行时间清零
6. 控制模式切换
7. 液位设定值修改
8. 频率给定修改

安全要求：

1. 默认先只做界面显示和按钮预留
2. 不要直接写 PLC
3. 写入功能必须通过统一接口 IPumpStationCommandService
4. MQTT 或 Modbus 写入命令必须校验 cmd == "write"
5. 写入前必须弹出确认框
6. 写入失败必须显示错误信息
7. 写入成功必须显示操作记录

九、请按阶段执行

不要一次性大改全部文件。

请按以下阶段执行：

第一阶段：
1. 分析当前项目结构
2. 找到主界面文件
3. 找到实时数据模型
4. 找到 SignalR 数据入口
5. 输出需要修改的文件清单
6. 暂时不要写代码

第二阶段：
1. 新增泵站显示 DTO
2. 新增 PumpStationViewModel
3. 新增 PumpViewModel
4. 新增 PumpStatus 枚举
5. 新增状态转换方法
6. 保证代码可编译

第三阶段：
1. 修改主界面
2. 显示 15 个泵站卡片
3. 显示当前液位、启停液位、泵状态、运行时间、频率
4. 使用颜色图标表现泵状态

第四阶段：
1. 新增泵站列表页面
2. 新增泵站详情页面
3. 显示该泵站所有数据
4. 添加页面路由和菜单入口

第五阶段：
1. 新增液位趋势图组件
2. 泵站详情页面接入趋势图
3. 默认显示最近 1 小时液位数据
4. 支持实时追加数据

第六阶段：
1. 预留控制按钮
2. 新增 IPumpStationCommandService 接口
3. 暂不直接写 PLC
4. 所有控制动作先记录日志

十、代码要求

1. 使用 C# / .NET 8
2. 使用 Blazor Server / Blazor Web App
3. 使用 SignalR 实时刷新
4. 使用依赖注入
5. Razor 页面不要写太多业务逻辑
6. 业务逻辑放到 Service 或 ViewModel
7. 所有新增类要有中文注释
8. 所有关键方法要有中文注释
9. 不要破坏现有 MQTT、Modbus、SignalR 代码
10. 每次最多修改 5 个文件
11. 修改前先说明计划
12. 修改后说明如何测试
13. 如果发现现有字段名和我提供的不一致，先列出来，不要擅自改名

十一、最终目标

最终我要得到一个完整的工业 WebSCADA 泵站监控系统：

1. 主界面可以总览 15 个泵站
2. 每个泵站可以看到 4 台泵状态
3. 可以看到启泵液位、停泵液位、当前液位
4. 可以看到运行时长、运行频率、电量
5. 可以进入每个泵站详情界面
6. 每个泵站详情界面有完整数据和液位趋势图
7. 后续可以安全扩展远程启停、参数设置和报警管理



注意：你必须基于我现有项目代码修改，不允许重新创建一个新项目。

ai第一次生成的效果

2.界面修改提示词

你可以直接把下面这段完整提示词复制给 Cursor。
这段已经帮你把：

* 真实工业 SCADA 思维
* 信息层级
* 液位逻辑
* 布局优化
* 泵动画
* 工业 UI 风格
* 动态液位条

全部整理好了。

---

```text
当前界面功能已经基本实现，但是视觉效果还不符合真正工业 WebSCADA / 智慧泵站 SCADA 的风格。

现在不是功能问题，而是 UI/UX 和工业监控视觉的问题。

目前存在的问题：

1. 卡片太小
2. 信息太密集
3. 没有工业监控大屏的感觉
4. 泵状态不够醒目
5. 液位显示太弱
6. 缺少动态图形化
7. 主界面层级感不明显
8. 当前页面更像后台管理系统，而不是工业 SCADA
9. 页面缺少重点区域
10. 数据虽然很多，但是不直观
11. 当前实时界面布局不合理
12. 泵的状态表达太弱
13. 液位与泵运行逻辑之间没有直观关系
14. 趋势图区域太空
15. 当前页面缺少工业动态感

现在需要重新优化整个 UI/UX。

注意：
不要推翻现有功能。
不要重写系统架构。
不要修改现有数据结构。
请基于现有项目进行 UI 和布局优化。

==================================================
一、实时总览页面优化
==================================================

当前实时总览页面：

- 每个站点卡片太小
- 数据过多
- 没有重点
- 信息层级不清晰

现在需要重新设计。

要求：

1. 实时总览页面一行显示 5 个泵站卡片
2. 总共 15 个泵站
3. 使用：
   - 5列布局
   - 卡片宽度自适应
   - 保证大屏显示效果
4. 卡片之间增加间距
5. 增加工业风阴影和边框
6. 卡片不要太高
7. 页面整体更像工业调度大屏

==================================================
二、实时总览页面数据精简
==================================================

实时总览页面不要显示太多数据。

因为总览页面的核心目标：

“值班人员快速判断：
当前液位是否达到启泵条件、
是否有泵运行、
是否存在故障。”

因此：

实时总览页面只需要显示：

1. 泵站名称
2. 当前液位
3. 开单泵液位
4. 停单泵液位
5. 4台泵状态
6. 当前运行泵数量
7. 是否故障
8. 当前模式（手动/自动）

不要再显示：

- 开双泵液位
- 开三泵液位
- 开四泵液位
- 停双泵液位
- 停三泵液位
- 停四泵液位
- 详细运行时间
- 频率
- 电量
- 大量文字

因为这些会导致总览页面信息过载。

==================================================
三、液位显示逻辑优化
==================================================

实时总览页面：

液位显示不要只是数字。

请设计成：

工业动态液位条。

要求：

1. 液位条带动态水波纹动画
2. 当前液位实时变化
3. 液位高度动态变化
4. 液位条颜色为工业蓝
5. 液位超高时变红
6. 液位条带渐变发光效果
7. 液位值显示在液位条右侧

同时：

在液位条上显示：

- 开单泵液位线
- 停单泵液位线

要求：

1. 使用横线标记
2. 开泵线用绿色
3. 停泵线用红色
4. 在液位条旁边显示文字：
   - 开泵液位
   - 停泵液位
5. 当前液位超过开泵液位时：
   液位条高亮
6. 当前液位低于停泵液位时：
   液位条变暗

这样值班人员能直观看出：

“当前液位是否满足启泵条件”。

==================================================
四、泵状态图形化
==================================================

当前 P1/P2/P3/P4 小圆点效果太弱。

不要再使用：

- 小圆点
- 纯文字状态

请改成：

工业泵 SVG 图标。

要求：

每个泵使用独立泵图标。

状态规则：

1. 绿色：
停止

2. 蓝色：
待机

3. 红色：
运行

4. 黄色：
故障

5. 灰色：
离线

同时：

1. 泵运行时：
   增加叶轮旋转动画

2. 故障时：
   图标闪烁

3. 离线时：
   图标灰化

4. 鼠标悬停：
   显示详细状态

5. 图标下方只显示：
   - 泵编号
   - 当前状态

不要显示大量文字。

==================================================
五、实时总览页面布局优化
==================================================

当前布局不合理。

请重新设计。

建议布局：

--------------------------------------------------
顶部状态栏
--------------------------------------------------

显示：

1. 系统标题
2. 当前时间
3. 在线泵站数量
4. 运行泵数量
5. 故障泵数量
6. MQTT状态
7. PLC在线率

--------------------------------------------------
中间区域
--------------------------------------------------

显示：

15个泵站卡片

采用：

5列布局

每个卡片包含：

1. 泵站名称
2. 当前模式
3. 动态液位条
4. 开泵液位线
5. 停泵液位线
6. 4个泵图标
7. 当前运行泵数量
8. 故障标识

==================================================
六、泵站控制界面优化
==================================================

当前泵站控制界面：

问题：

1. 液位区域太弱
2. 趋势图太空
3. 布局不合理
4. 工业感不足
5. 缺少动态效果

现在需要重新设计。

==================================================
七、控制界面液位区域优化
==================================================

控制界面顶部：

不要只是普通液位条。

请改成：

大型工业动态液位池。

要求：

1. 蓝色动态水波纹
2. 液位高度实时变化
3. 液位动画平滑
4. 中间显示当前液位值
5. 使用工业风发光效果
6. 带渐变阴影

同时：

在液位池上显示：

1. 开单泵液位线
2. 停单泵液位线
3. 开双泵液位线
4. 停双泵液位线
5. 开三泵液位线
6. 停三泵液位线
7. 开四泵液位线
8. 停四泵液位线

要求：

1. 每条液位线使用不同颜色
2. 液位线带文字标签
3. 当前液位经过液位线时：
   增加高亮动画
4. 液位变化时：
   使用平滑动画

目标：

值班人员能直观看到：

“当前液位处于哪一个泵运行区间”。

==================================================
八、控制界面布局优化
==================================================

请重新布局控制界面。

建议：

--------------------------------------------------
顶部
--------------------------------------------------

1. 返回按钮
2. 泵站名称
3. 当前模式
4. 当前液位
5. 当前报警状态

--------------------------------------------------
中间左侧（核心区域）
--------------------------------------------------

大型动态液位池

--------------------------------------------------
中间右侧
--------------------------------------------------

4台泵运行状态

每个泵显示：

1. 大型泵图标
2. 运行状态
3. 当前频率
4. 当前运行时间
5. 电量
6. 故障状态

--------------------------------------------------
底部
--------------------------------------------------

趋势图区域

==================================================
九、趋势图优化
==================================================

当前趋势图太空、太普通。

请优化：

1. 深色工业风
2. 平滑曲线
3. 渐变阴影
4. 实时滚动
5. 当前点高亮
6. 报警区间变红
7. 液位参考线显示
8. 鼠标悬停显示详细值
9. 图表边框发光
10. 支持实时刷新动画

==================================================
十、工业动态效果
==================================================

请增加工业 SCADA 动态效果：

1. 液位波动动画
2. 泵旋转动画
3. 数据变化滚动动画
4. 故障闪烁动画
5. 卡片发光效果
6. 实时刷新过渡动画
7. 页面切换动画
8. 局部刷新动画

==================================================
十一、颜色风格
==================================================

请重新优化工业 SCADA 配色。

背景：

#081018
#0b1420

卡片：

#132235

边框：

#1f3a56

运行：

#00e5ff

停止：

#00d26a

报警：

#ffcc00

故障：

#ff4d4f

离线：

#6b7280

要求：

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

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

不要把所有代码写在一个 Razor 页面。

请拆分组件：

1. PumpStationCard
2. WaterLevelTank
3. PumpSvgIcon
4. PumpStatusPanel
5. TrendChart
6. TopStatusBar
7. AlarmPanel

所有组件独立封装。

==================================================
十三、最终目标
==================================================

目标不是：

“把数据展示出来”。

真正目标是：

值班人员在3秒内能发现：

1. 当前液位是否达到启泵条件
2. 当前是否有泵运行
3. 哪台泵故障
4. 当前液位是否危险
5. 是否需要人工干预

因此：

重要状态必须最醒目。

请先：

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

ai修改后的效果

3.界面修改提示词

本次界面还是不满意，需要继续修改

```text id="5znmce"
当前工业 WebSCADA 页面已经初步完成，但是整体 UI/UX 仍然不符合真正工业 SCADA / 智慧泵站监控平台的视觉效果。

现在需要你重新优化实时总览页面和泵站控制页面。

注意：

1. 不要重写项目
2. 不要推翻现有架构
3. 不要修改现有数据模型
4. 不要修改现有 SignalR、MQTT、PLC 数据逻辑
5. 只优化：
   - 页面布局
   - 工业视觉
   - 组件结构
   - 动态效果
   - 信息层级
6. 请基于现有页面进行升级优化

==================================================
一、当前存在的问题
==================================================

1. 泵运行状态区域显示不完整
2. 有些泵图标显示被裁切
3. 卡片内部布局不合理
4. 液位条方向不合理
5. 当前液位区域视觉太弱
6. 页面工业感不强
7. 当前像后台系统，不像工业SCADA
8. 泵状态表达不够直观
9. 当前液位与泵运行逻辑关系不明显
10. 控制页面排版混乱
11. 液位区域占比不合理
12. 控制指令和状态区域分离
13. 页面缺少“工业设备监控感”
14. 当前泵图标太简单
15. 缺少真实工业设备视觉效果

==================================================
二、实时总览页面优化
==================================================

当前实时页面：

1. 液位条是竖向
2. 泵图标区域显示不完整
3. 泵图标被压缩
4. 卡片内部空间分配不合理

现在需要重新优化。

==================================================
三、实时总览页面布局重新设计
==================================================

保持：

1. 一行显示5个泵站
2. 共15个泵站
3. 深色工业风

但是：

重新设计卡片内部布局。

==================================================
四、实时总览卡片布局要求
==================================================

每个泵站卡片重新布局：

--------------------------------------------------
顶部
--------------------------------------------------

显示：

1. 泵站名称
2. 当前模式（手动/自动）
3. 当前报警状态

--------------------------------------------------
中间
--------------------------------------------------

使用：

横向液位条（不是竖向）

要求：

1. 液位条横向放置
2. 占卡片宽度80%以上
3. 使用工业动态液位效果
4. 蓝色动态水波纹
5. 液位平滑变化
6. 当前液位数字显示在液位条右侧
7. 液位条高度增加
8. 增加发光效果

同时：

在液位条上显示：

1. 开单泵液位线
2. 停单泵液位线

要求：

1. 开泵液位线使用绿色
2. 停泵液位线使用红色
3. 液位线带文字说明
4. 当前液位超过开泵液位时：
   增加高亮动画
5. 当前液位低于停泵液位时：
   液位条变暗

目标：

值班人员能一眼判断：

“当前液位是否达到启泵条件”。

==================================================
五、实时总览页面泵状态优化
==================================================

当前泵状态图标太简单。

不要再使用：

1. 小图标
2. 扁平化圆点
3. 简单SVG

现在需要：

工业3D风格泵图片。

要求：

1. 使用3D工业泵图片/SVG
2. 类似真实工业离心泵
3. 增加金属质感
4. 增加工业发光效果
5. 泵图标尺寸更大
6. 每个泵有独立设备感

状态规则：

绿色：
停止

蓝色：
待机

红色：
运行

黄色：
故障

灰色：
离线

同时：

1. 运行时：
   叶轮旋转动画

2. 故障时：
   红色闪烁

3. 离线时：
   灰化

4. 鼠标悬停：
   显示详细状态

==================================================
六、实时总览页面泵布局优化
==================================================

当前：

泵区域太拥挤。

现在：

每个卡片下方：

横向排列4台泵。

要求：

1. 泵区域高度增加
2. 每台泵有独立区域
3. 泵之间增加间距
4. 不允许泵图标被裁切
5. 不允许状态显示缺失
6. 泵图标完整显示
7. 每台泵显示：
   - 3D泵图片
   - 泵编号
   - 当前状态

不要显示太多文字。

==================================================
七、控制界面优化
==================================================

当前控制页面：

1. 液位区域太空
2. 液位布局不好看
3. 泵区域布局混乱
4. 控制按钮和状态分离
5. 页面层级感不明显
6. 当前页面不像工业设备监控页面

现在需要重新设计。

==================================================
八、控制页面整体布局重新设计
==================================================

控制页面重新布局：

--------------------------------------------------
顶部状态栏
--------------------------------------------------

显示：

1. 返回按钮
2. 泵站名称
3. 当前模式
4. 当前液位
5. 当前报警状态
6. 当前运行泵数量

--------------------------------------------------
左侧（核心区域）
--------------------------------------------------

大型动态液位区域

--------------------------------------------------
右侧
--------------------------------------------------

4台泵设备状态区域

--------------------------------------------------
底部
--------------------------------------------------

趋势图 + 参数区域

==================================================
九、控制页面液位区域优化
==================================================

当前液位区域太空。

现在需要：

工业动态液位池。

要求：

1. 使用大型水平液位池
2. 蓝色动态水波纹
3. 液位实时变化
4. 增加工业发光效果
5. 中间显示当前液位
6. 液位动画平滑

同时：

在液位池上显示：

1. 开单泵液位线
2. 停单泵液位线
3. 开双泵液位线
4. 停双泵液位线
5. 开三泵液位线
6. 停三泵液位线
7. 开四泵液位线
8. 停四泵液位线

要求：

1. 每条液位线使用不同颜色
2. 液位线带标签
3. 液位经过时高亮
4. 使用平滑动画
5. 不要像普通进度条

目标：

值班人员能直观看出：

“当前液位属于哪个运行区间”。

==================================================
十、控制页面泵区域优化
==================================================

当前泵区域：

布局不合理。

现在需要：

工业设备监控风格。

每台泵：

使用大型3D工业泵图片。

要求：

1. 每台泵像独立工业设备
2. 增加金属质感
3. 增加发光边框
4. 状态颜色明显
5. 运行时有动画

==================================================
十一、控制指令与状态整合
==================================================

当前：

控制按钮和状态分离。

现在：

每台泵：

把：

1. 状态
2. 控制
3. 参数

放到同一个设备卡片中。

每台泵卡片：

显示：

1. 3D泵图片
2. 当前状态
3. 当前频率
4. 当前运行时间
5. 累计运行时间
6. 当前电量
7. 远控状态
8. 故障状态

同时：

底部放：

1. 启动按钮
2. 停止按钮
3. 复位按钮

要求：

1. 控制按钮工业风
2. 按钮发光
3. 危险操作二次确认
4. 状态和控制形成整体
5. 不要分散布局

==================================================
十二、趋势图优化
==================================================

当前趋势图太普通。

请优化：

1. 深色工业风
2. 实时滚动
3. 渐变阴影
4. 当前点高亮
5. 报警区间变红
6. 启停液位参考线
7. 图表边框发光
8. 鼠标悬停显示详细值
9. 增加实时刷新动画

==================================================
十三、工业动态效果
==================================================

请增加：

1. 液位波动动画
2. 泵运行旋转动画
3. 数据滚动动画
4. 故障闪烁
5. 卡片呼吸灯
6. 页面切换动画
7. 实时刷新动画

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

请拆分组件：

1. PumpStationCard
2. HorizontalWaterLevel
3. Pump3DCard
4. PumpControlPanel
5. TrendChart
6. TopStatusBar

不要把所有代码写在一个 Razor 页面。

==================================================
十五、最终目标
==================================================

目标不是：

“显示数据”。

真正目标：

值班人员3秒内发现：

1. 当前液位是否达到启泵条件
2. 当前是否有泵运行
3. 哪台泵故障
4. 当前液位是否危险
5. 是否需要人工干预

因此：

重要状态必须最醒目。

==================================================
十六、执行要求
==================================================

请先：

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