构建一个面向流域防洪调度的数字孪生四预平台，实现在虚拟数字世界对真实物理流域的模拟演示。核心包含预报

构建一个面向流域防洪调度的数字孪生四预平台，实现在虚拟数字世界对真实物理流域的模拟演示。核心包含预报、预警、预演、预案四大模块，以及一体化监测、地图可视化、作业调度等能力。需产出完整前端HTML/CSS/JS页面，使用Leaflet（天地图）、ECharts、Font Awesome，适配PC端宽屏，支持鼠标交互、弹窗、表格、表单等。
总体要求
● 登录页：用户名/密码任意非空即可登录，模拟“调度员”角色。
● 主布局：顶部栏（平台名称、用户信息、退出按钮），左侧导航菜单（首页驾驶舱、监测预报、预警、预演、预案、系统管理），右侧内容区域动态渲染。
● 地图：统一采用天地图底图（矢量/影像可切换），需显示比例尺、经纬度坐标跟随鼠标移动。所有地图页面支持“乡镇”下拉切换并更新地图视野/标记点。
● 数据：所有数据均为前端模拟静态数据，但需体现完整的字段结构。图表使用ECharts，表格与卡片展示统计数据。
● 交互：点击表格行或地图标记可弹窗详细信息；按钮操作需有alert模拟后端调用；表单参数设置应有合理默认值并反馈“计算中/已完成”。
● 样式：现代水利蓝白风格，圆角卡片、阴影、响应式（最小宽度1200px，超出滚动）。
详细功能模块
一、登录页
● 居中卡片，标题“数字孪生水利四预平台”，账号/密码输入框，登录按钮。
● 无需真实验证，任意输入跳转主应用。
二、首页驾驶舱
● 雨情监测预报：展示近1/3/6/12/24h平均雨量、最大雨量、乡镇平均面雨量；用滚动词条形式显示各乡镇降雨量（模拟3个乡镇）。
● 预报未来24h：显示累计雨量25mm。
● 河道纵剖面示意图：用ECharts折线图展示某溪流从上游到下游的高程变化，标注左岸/右岸/水位/底高程数值。
● 潮位监测预报：日期选择器（默认今日），展示潮位曲线（正负值）。
● 预警站点统计：卡片形式展示雨情一级/二级/三级个数，水库超汛限/超设计个数，河道超保证/超警戒个数。
● 视频监控入口：按钮“更多”，点击跳转至“监测预报”内的视频一张图。
● 值班人员&物资统计：展示3个值班人员（姓名、职位、电话）；物资表格显示袋类、桩木、发电机组等数量。
● 地图小窗：展示缩略地图（可复用天地图），支持矢量/影像切换，显示水情图例。
三、监测预报
包含水情一张图、水情监测表、水情预报、河道断面、雨情一张图、雨情监测、雨情预报、视频一张图、作业预报、自动预报等子模块。由于页面较长，使用Tab或内部滚动展示。
3.1 水情一张图
● 天地图容器，支持鼠标移动显示经纬度+比例尺。
● 乡镇/流域下拉（选择后地图定位并刷新标记点）。
● 矢量/影像切换按钮，显示水情图例（水文站、水位站、雨量站、易涝点、断面、闸门）。
● 地图上预置5个模拟站点标记（水文站、水位站等），点击弹出详细数据卡片（内容见需求）。
3.2 水情监测
● 预警统计卡片：预警水库/河道/易涝点/断面个数。
● 水库列表表格：筛选（距离汛限水位、站点名称、数据状态）。列：站名、当前水位、当前库容、时间、汛限水位、状态。
● 河道列表表格、易涝点表格、潮位表格（结构相似，数据模拟）。
3.3 水情预报
● 十二小时预报表格：断面名称、最高水位、洪峰流量、峰现时间。
● 点击断面名称，地图定位到该断面（地图需提前集成），弹窗展示预测水位/流量曲线（简单折线图）。
3.4 河道断面
● 纵断面示意图：ECharts折线图，展示沿河距离与高程，并标注左岸/右岸/水位/底高程点，支持下拉切换不同溪流。
● 横断面图：组合柱线图，横轴时间（小时），纵轴雨量(mm)和水位(m)，每小时数据。
3.5 雨情一张图
● 地图与乡镇/流域联动，测站隶属下拉（防汛、水文、气象、低洼/易涝点）。
● 图例按雨量分级（小雨～特大暴雨色块）。
● 右侧显示24h降雨强度量级统计（每个量级的站点个数）。
3.6 雨情监测
● 关键指标卡片：测站平均降雨量、最大单站雨量、最大降雨站点、乡镇平均面雨量、最大乡镇面雨量、最大降雨乡镇。
● 筛选：近1/3/6/12/24h，全流域下拉，站点名称搜索，数据状态。
● 表格：测站名称、雨量、地区、数据状态。
3.7 雨情预报
● 暴雨预报：有无 + 未来24h最大降雨量数值。
● 未来6/12/24h降雨量与累计雨量表格。
● 点击预报雨量站，弹窗显示实测vs预报雨量对比（柱状图），支持导出数据（模拟导出提示）。
3.8 视频一张图
● 地图+监控点下拉列表，选择后地图飞移至该点，点击点位弹窗模拟视频窗口（显示“实时视频流”占位）。
● 支持乡镇、水系切换，矢量/影像切换。
3.9 作业预报
● 方案设置面板：选择方案名称、时段长；参数设置包括预见期、起止时间、潮位数据获取（来源：10/20/50/100年一遇/日常/历史台风）、未来降雨设置（站点预设雨量或气象数据来源）、工况类型（闸门全开/全关/按水位潮位/按时间段）、闸门开度比（滑块0-100%步长10%）。
● 按钮“预报计算”，点击后模拟计算并跳转至“十二小时预报”结果展示区（展示断面预报详情、过程统计图表、潮位数据等）。
● 自动预报列表：展示已有方案名称、预见期、工况、潮位选择、开度比、最新修改时间，支持编辑、关闭、设置为主方案。
四、预警
4.1 预警一张图
● 天地图基础功能，水情图例，乡镇切换。
● 行政预警跑马灯滚动：区域、预警级别、内容。
4.2 预警信息（监测预警）
● 雨情预警：各级个数卡片 + 表格（站点、雨量、等级、预警时间）。
● 水库水情预警：超汛限/超设计个数 + 表格（站点、水位、等级、时间）。
● 河道水情预警：超警戒/超保证个数 + 表格。
● 预报预警：超警戒/超保证断面个数 + 表格。
4.3 预警管理
● 测站预警表格：测站名称、行政区划、预警内容、类型、时间、级别、状态、操作（取消预警、查看详情）。
● 行政预警表格：预警区域、站点数量、内容、时间、级别、状态、操作。
五、预演
5.1 预演一张图
● 展示天地图 + 动态淹没图层（根据方案改变多边形颜色）。
● 右侧提供三种预演方案入口：调度预演（参数类似作业预报，含工况开度）、洪水频率（10/20/50/100年一遇）、历史台风（龙王/苏拉，等比例放大0-100%）。
● 点击对应“计算”按钮后，更新地图淹没范围（模拟不同颜色的面状区域），同时下方表格显示模拟演进结果（最大流量、最高水位，断面详情）。
● 方案比选：可勾选多个已完成方案，对比展示淹没面积、洪峰流量曲线。
5.2 预演管理
● 列表展示已有调度预演/洪水频率/历史台风方案，状态（计算中/完成），支持删除、选择置顶。
● 置顶推荐方案区域显示：预案名称、调度时间、淹没面积、闸门开度、预警断面数据。支持保存置顶选择。
六、预案
6.1 预案一张图
● 天地图显示避灾点（图标）、物资仓库、抢险队伍位置，点击弹窗详情。
● 预警信号卡片：行政预警（区域、级别、站点、时间）、气象预警（详情、时间）。
● 物资详情表格：仓库名称、物资名称、单位、数量。
● 防汛文件列表：工程调度预案（文字描述，包含超警戒断面个数及建议）。
● 避灾点详情表格：安置点名称、容纳人数、地址。
● 人员排班表格：姓名、职位、电话。
6.2 创建预案
● 地图上可添加/编辑避灾点、物资仓库（模拟弹窗表单）。
● 支持方案导入（.zip / .json模拟）。
● 调度前/调度后对比：双卡片展示水位、流量、淹没面积对比图（柱状图）。
6.3 预案管理
● 工程预案表格：预案名称、调度起止时间、淹没面积、闸门开度、预警级别、操作删除。
● 资源预案表格：预案名称、里程、途径、创建时间、操作。
● 预案文件上传列表。
七、系统管理
● 用户管理：账号、角色（超级管理员/预报员/调度员）、状态、操作（编辑/删除），新增用户弹窗。
● 系统日志：展示最近10条操作记录（时间、用户、动作）。
● 权限配置：简化为角色勾选（演示）。
● 地图服务状态：天地图key配置（显示正常）。
技术实现细节
● 使用HTML5/CSS3，Flex/Grid布局，无外部UI库。
● 地图初始化：Leaflet + 天地图瓦片URL（需提供有效tk参数，演示可使用一个占位key，提示用户替换）。
● 所有图表使用ECharts 5.5+，在对应容器渲染。
● 表单与按钮交互使用原生JavaScript，模拟异步（setTimeout）提示“计算成功”。
● 对于地图标记点，统一编写函数addMockMarkers(type)，根据当前页面需求添加不同图层的点位。
● 确保所有“选择方案”“查看成果”“导出”等按钮均有模拟反馈（alert或弹窗）。
● 为了展示完整，所有表格至少包含3行模拟数据，图表数据预先填充。
交付要求
生成一个独立的index.html文件，包含所有样式、脚本、地图初始化、响应式布局。代码需清晰注释，模拟数据集中定义，易于后期替换为真实API。页面加载后默认显示登录页，登录后展示首页驾驶舱。所有菜单点击切换内容区域，不需要刷新页面。
验收标准
● 四预概念明确体现在对应模块。
● 地图交互符合需求（经纬度显示、点击弹窗、切换底图）。
● 操作流程连贯：预报→预警→预演→预案可联动（例如从预演结果可一键生成预案占位）。
● 界面美观、无控制台报错（天地图key缺失会显示灰格，但需提示使用者自行申请）。