【课程4.2】我的工作台功能设计：待办/预警/任务模块的交互与数据对接

【课程4.2】我的工作台功能设计：待办/预警/任务模块的交互与数据对接

严格基于指定文件（核心为《04我的工作台-系统功能设计.docx》，简称《04工作台》），结合《03智慧城市一网统管平台-系统数据库表.docx》（简称《03数据库表》）、《05智慧城市一网统管平台 数据中枢系统功能设计.docx》（简称《05数据中枢》）及《06系列行业应用文件》（简称《06行业文件》），拆解"我的待办""我的预警""我的任务"三大核心模块的交互逻辑与数据对接规则，所有设计均来自指定文件，无外部信息。

一、我的工作台的核心定位：文件中的"个人业务中枢"

《04工作台》开篇明确，我的工作台是"用户个性化业务入口"，需聚焦"待办处置、预警响应、任务跟踪"三大高频场景，解决传统治理中"业务分散、信息滞后"痛点（《01智慧城市一网统管平台-系统总体架构及其功能要点-20251018修订.docx》简称《01总体架构》P14）。其设计需满足：

1. 数据精准性：仅展示当前用户权限范围内的业务数据（如网格员仅看网格内待办，《06行业文件-10智慧社区》P53）；
2. 交互便捷性：支持"一键跳转处置、实时提醒、快速筛选"，减少操作路径（《04工作台》1.1节技术细节）；
3. 数据闭环：对接《05数据中枢》的"预警告警""指挥协调"模块，实现"待办生成→处置→闭环"全流程（《05数据中枢》20.10节）。

二、核心模块1：我的待办------待处理事项的"精准入口"

2.1 交互设计（基于《04工作台》1.1节）

（1）核心目标

帮助用户快速定位待处理业务事项（如工单、审批），避免遗漏关键任务，确保待办事项闭环管理（《04工作台》1.1.1）。

（2）整体布局与视觉设计

区域	布局逻辑（《04工作台》1.1.4）	视觉设计（《04工作台》1.1.6）
顶部统计区	3个卡片横向排列，分别显示"高优待办数、中优待办数、低优待办数"	卡片用渐变底色（高优红#F56C6C、中优黄#E6A23C、低优绿#67C23A），数字加粗放大（18px），突出数量
左侧列表区	占比70%，展示待办条目，包含"待办名称、优先级、业务域、截止时间、发起部门"	列表隔行异色（浅灰#F5F7FA/白#FFFFFF），截止时间<24小时的条目标红，优先级用颜色标签区分
右侧详情区	占比30%，单击列表条目时加载对应详情（如工单内容、关联设施）	详情区用白色背景+灰色边框，关键信息（如工单ID）加粗，支持滚动查看长文本

（3）核心交互逻辑

1. 筛选交互 ：支持3类筛选（《04工作台》1.1.9）：
   • 业务域筛选：下拉框选择（选项来自《03数据库表》sys_dict_business_field，如"城管住建""水利水务"）；
   • 优先级筛选：下拉框选择（1-高/2-中/3-低，对应《03数据库表》biz_evt_wo的priority字段）；
   • 截止时间筛选：日期范围选择器（筛选deadline在范围内的待办）；
     筛选后实时刷新列表，筛选条件缓存至localStorage，页面刷新后保留。
2. 钻取交互 （《04工作台》1.1.7）：
   • 单击列表条目：右侧加载详情（调用/biz/wo/detail接口，参数wo_id）；
   • 双击列表条目：跳转至具体工单处置页（路由/biz/wo/handle?woId=xxx）；
   • 单击统计卡片：列表筛选对应优先级待办（如单击"高优"，筛选priority=1）。
3. 提醒交互：新待办新增时，列表条目从右侧滑入，伴随轻微弹窗提示（"您有1条高优待办待处理"），同时统计卡片数字滚动增长（《04工作台》1.1.8）。

2.2 数据对接（关联《03数据库表》《05数据中枢》）

（1）核心数据来源

待办数据主要来自《03数据库表》的"业务数据层"，关联基础表补充信息，具体如下：

待办字段	数据来源表（《03数据库表》）	字段映射关系	接口对接（《04工作台》1.1.10）
待办ID	biz_evt_wo（事件工单表）	wo_id → 待办ID	列表查询接口：/biz/wo/list（GET），参数含user_id（当前用户ID）、status=0（待办状态）、pageNum=1、pageSize=10
待办名称	biz_evt_wo	wo_title → 待办名称	详情接口：/biz/wo/detail（GET），参数wo_id，返回工单完整信息
优先级	biz_evt_wo	priority（1=高/2=中/3=低）→ 待办优先级	筛选接口：/biz/wo/list支持priority参数筛选
业务域	biz_evt_wo	biz_domain → 业务域（如"城管住建"），关联sys_dict_business_field获取名称	业务域选项接口：/sys/dict/getByType?type=business_field，返回业务域列表
发起部门	biz_evt_wo+sys_org	org_id → 关联sys_org的org_name → 发起部门	部门名称通过org_id关联查询，接口内部自动拼接
待办数量统计	biz_evt_wo	统计status=0且assign_user_id=当前用户ID的记录数 → 待办总数	统计接口：/biz/wo/count（GET），返回各优先级待办数

（2）行业数据对接案例（《06行业文件》）

• 城管住建待办 ：待办来自biz_urban_evt_wo（城管工单表），关联biz_urban_fac（城管设施表），详情区显示"关联设施名称、设施位置"（《06行业文件-01城管住建》P34）；
• 水利水务待办 ：待办来自biz_water_evt_wo（水利工单表），关联gen_water_qual_mon（水质监测表），详情区显示"水质异常数据、监测点位"（《06行业文件-02水利水务》P40）。

三、核心模块2：我的预警------风险事件的"实时响应入口"

3.1 交互设计（基于《04工作台》1.2节）

（1）核心目标

实时推送用户负责区域/设备的预警事件，提醒用户及时处置，避免风险扩大（《04工作台》1.2.1）。

（2）整体布局与视觉设计

区域	布局逻辑（《04工作台》1.2.4）	视觉设计（《04工作台》1.2.6）
顶部统计区	3个卡片横向排列，显示"高优预警数、中优预警数、低优预警数"	高优卡片有呼吸灯效果（红-深红循环），中优/低优卡片无动效，数字更新时有弹跳动效
中部列表区	占比60%，展示预警条目，包含"预警ID、等级、内容、发生时间、关联设备/区域、处置状态"	未处置预警条目左侧加红边（2px），处置状态用图标区分（未处置🔴、处置中🟡、已结案🟢）
右侧地图区	占比40%，标注预警位置（基于2000国家大地坐标系，《05数据中枢》1.1.1）	预警点用不同颜色圆点（高优红、中优黄、低优绿），未处置圆点有脉冲动效（1次/3秒）

（3）核心交互逻辑

1. 地图交互 （《04工作台》1.2.7）：
   • 单击列表条目：地图自动定位至预警位置，弹出气泡显示"预警内容、关联设备"；
   • 单击地图预警点：列表高亮对应条目，右侧详情区加载预警详情；
   • 地图缩放：支持滚轮缩放，显示不同层级的预警点（如市级显示全区预警，街道级显示街道内预警）。
2. 筛选交互 （《04工作台》1.2.9）：
   • 预警等级筛选：下拉框选择（1-高/2-中/3-低，对应《03数据库表》biz_early_warn_alert的warn_level）；
   • 处置状态筛选：下拉框选择（0-未处置/1-处置中/2-已结案，对应handle_status）；
   • 业务域筛选：下拉框选择（如"生态环保"对应biz_early_warn_alert的biz_domain）。

3.2 数据对接（关联《03数据库表》《05数据中枢》）

（1）核心数据来源

预警数据来自《05数据中枢》的"预警告警"模块，关联基础表补充设备/区域信息：

预警字段	数据来源表（《03数据库表》）	字段映射关系	接口对接（《04工作台》1.2.10）
预警ID	biz_early_warn_alert	warn_id → 预警ID	列表查询接口：/biz/earlyWarn/list（GET），参数含user_id、area_code（用户负责区域）
预警等级	biz_early_warn_alert	warn_level → 预警等级（1-高/2-中/3-低），关联sys_warn_level_cfg获取名称	等级名称接口：/sys/dict/getByType?type=warn_level
关联设备	biz_early_warn_alert+sys_device	device_code → 关联sys_device的device_name → 关联设备名称	设备名称通过device_code关联查询，接口内部自动拼接
关联区域	biz_early_warn_alert+sys_area	area_code → 关联sys_area的area_name → 关联区域名称	区域名称接口：/sys/area/getNameByCode?areaCode=xxx
处置状态	biz_early_warn_alert	handle_status → 处置状态（0-未处置/1-处置中/2-已结案）	状态更新接口：/biz/earlyWarn/updateStatus（POST），参数warn_id、handle_status
预警地图坐标	biz_early_warn_alert	coord_x/coord_y → 地图定位坐标（2000国家大地坐标系）	地图接口：集成Leaflet组件，调用/sys/map/load加载行政区划边界

（2）行业数据对接案例（《06行业文件》）

• 生态环保预警 ：预警来自gen_air_region_mon（区域空气质量监测表），当AQI>150时触发"空气质量预警"，关联biz_early_warn_alert存储，地图区显示监测点位坐标（《06行业文件-03生态环保》P34）；
• 应急安全预警 ：预警来自gen_fire_mon（火灾消防监测表），触发后关联biz_emer_mat_info（应急物资表），详情区显示"附近应急物资库存"（《06行业文件-05应急安全》P42）。

四、核心模块3：我的任务------任务进度的"跟踪入口"

4.1 交互设计（基于《04工作台》1.3节）

（1）核心目标

跟踪用户分配的任务进度，展示任务详情、剩余时间、完成情况，确保任务按时完成（《04工作台》1.3.1）。

（2）整体布局与视觉设计

区域	布局逻辑（《04工作台》1.3.4）	视觉设计（《04工作台》1.3.6）
左侧分类标签	纵向排列"全部、进行中、已完成、已延期"4个标签	选中标签用蓝色#1890FF下划线（2px），未选中用灰色#909399，文字14px
右侧上半区	占比30%，环形图展示"任务完成率"（已完成数/总任务数）	环形图用绿色#67C23A（已完成）、蓝色#409EFF（进行中）、红色#F56C6C（已延期）区分扇区
右侧下半区	占比70%，展示任务列表，包含"任务名称、类型、分配时间、截止时间、完成进度"	已延期任务条目标红，进度条用渐变底色（完成部分绿#67C23A/未完成部分灰#E5E6EB）

（3）核心交互逻辑

1. 标签切换 ：点击左侧标签，右侧列表筛选对应状态任务（如点击"已完成"，筛选task_status=2），环形图同步更新（《04工作台》1.3.7）；
2. 进度交互：进度条支持hover查看具体进度值（如"75%"），任务完成时列表条目右侧弹出"完成"打勾动效（《04工作台》1.3.8）；
3. 筛选交互 ：支持"任务类型筛选"（下拉框，选项来自《03数据库表》sys_dict_task_type）、"时间范围筛选"（筛选assign_time在范围内的任务）。

4.2 数据对接（关联《03数据库表》《05数据中枢》）

（1）核心数据来源

任务数据来自《03数据库表》的"业务数据层"，进度数据来自关联表：

任务字段	数据来源表（《03数据库表》）	字段映射关系	接口对接（《04工作台》1.3.10）
任务ID	biz_task（任务表）	task_id → 任务ID	列表查询接口：/biz/task/list（GET），参数含user_id、task_status
任务名称	biz_task	task_name → 任务名称	详情接口：/biz/task/detail（GET），参数task_id
完成进度	biz_task_progress	progress → 完成进度（百分比）	进度接口：/biz/task/progress（GET），参数task_id，实时返回进度
任务类型	biz_task+sys_dict_task_type	task_type → 关联sys_dict_task_type获取类型名称（如"巡查""统计"）	类型选项接口：/sys/dict/getByType?type=task_type
任务完成率	biz_task	完成率=（task_status=2的任务数）/总任务数 ×100%	统计接口：/biz/task/rate（GET），返回完成率及各状态任务数

（2）行业数据对接案例（《06行业文件》）

• 城管住建任务 ：任务来自biz_urban_task（城管任务表），如"本周巡查10个小区"，进度来自biz_urban_task_progress，关联biz_inspect_rec（巡查记录）更新进度（《06行业文件-01城管住建》P36）；
• 教育管理任务 ：任务来自biz_edu_task（教育任务表），如"月底完成学生学籍统计"，进度来自biz_edu_task_progress，关联biz_edu_student_base（学生基础表）统计完成数（《06行业文件-07教育管理》P48）。

五、模块间协同逻辑（基于《04工作台》《05数据中枢》）

三大模块并非独立，而是通过"数据流转+事件触发"实现协同，符合《01总体架构》"数据驱动闭环"原则：

1. 预警→待办协同：

   • 当高优预警生成（biz_early_warn_alert的warn_level=1），系统自动创建待办工单（biz_evt_wo），分配给对应责任人，待办模块实时加载该工单（《05数据中枢》20.9.4）；
   • 案例：水利水质异常预警（gen_water_qual_mon的pH<6.5）触发预警后，自动生成"水质整改待办"，推送至水务操作员的待办列表（《06行业文件-02水利水务》P41）。

2. 任务→待办协同：

   • 任务进度<100%且截止时间<24小时时，系统自动生成"任务催办待办"，提醒用户推进进度（《04工作台》1.3.10）；
   • 案例：城管"违建排查任务"进度<50%且剩1天截止，生成催办待办，待办模块标红提醒（《06行业文件-01城管住建》P37）。

3. 数据权限协同：

   • 三大模块均通过user_id关联《03数据库表》sys_user，结合sys_org（部门）、sys_area（区域）控制数据权限（如网格员仅看area_code为网格编码的待办/预警/任务）（《04工作台》1.6.3）。

六、核心设计要点总结（文件合规性）

1. 数据一致性 ：所有模块数据均来自《03数据库表》，字段映射严格遵循《02数据库表设计命名规范及英文简称对照表.docx》（如待办表用biz_前缀）；
2. 实时性保障：待办/预警数据每2分钟自动刷新，任务进度每1分钟刷新，确保数据与《05数据中枢》同步（《04工作台》1.1.10、1.3.10）；
3. 权限控制 ：基于sys_user_role（用户角色）、sys_role_menu（角色权限）实现模块可见性控制，普通用户无"全域待办查看"权限（《04工作台》1.6.3）；
4. 行业适配 ：模块交互与数据对接均支持17+业务领域，通过biz_domain字段区分行业场景，无需单独开发（《06系列行业文件》适配验证）。

所有设计均无外部依赖，完全基于指定文件，确保与一网统管平台的架构、数据、业务完全兼容。