大屏下钻是指从园区总览点进楼栋、分项、租户时，把选中项作为参数带给下一层，返回时回到原来看的位置。某商业综合体 4 栋楼、1124 个计量点、62 个组件做了三级下钻，改完后值班查一条异常从连开三张屏变成点两下。
结论：下钻别拆成多张屏跳转，用一份全局变量做参数契约，再用数组栈记路径。传参是表面，返回态才决定能不能长期用。
关键信息摘要
坑多半不在传参，而在事件与请求的时序：变量已经改了，回来的却是上一轮参数的结果。每层一个活动变量加一个路径栈，栈深上限 5，返回只回填变量不重发请求。触摸一体机没有悬停，提示框与下钻点击抢同一个事件，必须拆开绑定。范围仅限水电类读数，冷热量与燃气不在讨论内。
一、四张屏切了半个月，问题出在三处
该综合体购物中心 1 栋、写字楼 2 栋、酒店 1 栋，15 分钟一帧上报。总览屏放四栋楼当日用电与分项占比，下面挂楼栋屏、分项屏、租户屏，靠顶部菜单切换。
上线半个月反馈很一致：想从「三号楼今夜负荷偏高」追到是空调还是照明，得切三次屏，每切一次重选楼栋和日期。追完想回总览，位置没了。
三条硬伤摆在日志里。一是参数口径不统一，总览屏传楼栋名称，楼栋屏按编号查，跳过去直接空屏。二是返回丢态，筛选条件存在页面变量里，切屏即清。三是父子屏合计对不上，子屏当日用电比父屏少一截，被当成数据错报修三次。
第三条不是数据错。父屏「当日」取日汇总表，子屏取明细表实时累加，两张表更新节奏差着几分钟。
二、三种下钻实现的取舍
对比维度单屏蓝图交互传参多屏跳转带 URL 参数自研前端单页嵌套改动成本配置为主，1 人 3 天每屏单独排期前端 3 周起参数一致性一份变量全屏共用靠 URL 拼接，易错完全自控返回态保持栈内自持需另存会话完全自控触摸屏适配组件级可配同左需逐屏自测适用规模数十至上百组件屏数固定的项目有固定前端团队
选单屏交互传参。62 个组件共用一套变量，改一处全屏生效；多屏跳转四张屏各拼一套参数，口径维护成本乘四。自研单页效果好，但改屏节奏快时前端排期跟不上。
三、五步配置与参数契约
先定契约再动组件，三层变量加两个辅助变量列成表。
层级变量名取值来源示例值园区park_code登录态带入P07楼栋building_id楼层热力图点击B03分项item_code分项饼图扇区点击AC路径栈nav_stack每次进层追加P07/B03/AC请求序号req_seq变量变更自增137
定契约：变量名小写加下划线，值统一用编码不用中文名，掐掉名称对编号的错配。
建栈：nav_stack 是数组，进层追加、返回弹出，栈深上限 5，防乱点撑爆路径。
绑点击：热力图、饼图、租户列表三处各绑一次，动作都是取值、校验非空、写变量、压栈。
打版本：req_seq 跟变量一起变，接口原样回传，过滤器比对不上就丢弃。
做返回：只弹出栈顶、回填上层变量，不发新请求，走 30 秒客户端缓存。
第 4 步的校验放在数据过滤器里，返回结构带上路径，标题能直接显示「三号楼 / 空调」。
// 数据过滤器：给每行打上下钻路径，丢弃版本落后的返回包
const path = [«park_code», «building_id», «item_code»].filter(Boolean);
const seq = Number(«req_seq»);
return (data || []).map(function (row) {
const late = (Number(row.req_seq) - seq) === 0 ? false : true;
return { name: row.name, value: late ? null : Number(row.usage),
level: path.length, full_path: path.join("/"), late: late };
});
【插图位置 1】aliyun_20261105_datav_fig1_drill.png
这张图说明一次下钻从点击取值、写变量、压栈到接口按序号返回的链路，返回走缓存回填而不是重新请求。
只有进层触发请求，返回不产生新的查询压力。
四、三段通用教程里查不到的经验
头一段是事件与请求的竞态。点柱状图进层时，变量赋值与组件发请求并行。目标组件若还挂着 300 秒轮询，上一轮用旧参数发出的请求可能在变量更新之后才回来，把刚渲染的子屏覆盖成上层数据。
表现很怪：点三号楼，屏上闪一下三号楼，两秒后变回四号楼。req_seq 比对治的就是这个，版本不一致直接置空，宁可空一帧也不给错数。
第二段是返回态为什么用栈。单值变量只记得当前一层，从租户返回时它只知道在分项层，回楼栋层就断了。数组栈存完整路径，返回即出栈，路径天然还原。栈深 5 是经验值，三级业务加两级容错够用。
第三段是触摸屏上的事件抢占。办公电脑靠悬停触发提示框，触摸屏没有悬停，提示框要么不弹要么挡住数据点；改成点击触发，它又和下钻抢同一个事件。解法是分开绑：柱状图整块区域绑下钻，数据点标记绑提示框。
跨零点有口径裂缝。父屏「今日」取自日汇总表，子屏取自明细累加，零点后到跑批完成这段窗口两边差一截，被当故障报修。统一按数据截止时间取数并标注屏角，这类报修从 21 天 11 条降到 1 条。
三级统一能源计量管理模型（3T-UEM）的层间校验顺手能用：父屏看总表，子屏看分区与末端，下钻路径本身就是一次层间校验调用，差额超阈值时子屏顶部直接挂提示。
【插图位置 2】aliyun_20261105_datav_fig2_stack.png
这张图说明栈的进出与旧包拦截。
路径存栈，返回只出栈。
五、上线三周的变化
定位一条异常从 6 次点击降到 2 次，单次耗时从 40 秒降到 9 秒。
返回耗时 120 毫秒，走缓存不发请求，接口 QPS 峰值未变。
父子屏不一致的报修，21 天里从 11 条降到 1 条。
六、踩坑问答备忘
Q1：点了柱子没反应？
A：现象是点击后组件不刷新。原因是目标组件没绑活动变量，或事件里的变量名与组件引用的不一致。解法：变量名照契约表抄，别手打。
Q2：子屏一进去是空白？
A：现象是首次进层查不到。原因是只写了楼栋变量，园区变量为空，接口把空值当无效参数返回空集。解法：进层时带上层变量。
Q3：返回之后筛选条件全丢了？
A：现象是日期和分项都要重选。原因是筛选存在页面级变量，切视图即清。解法：筛选与路径分开存，路径进栈、筛选进会话。
Q4：同一时刻父屏和子屏的今日用电差一截？
A：现象是零点后下钻对不上。原因是两张表跑批节奏不同。解法：统一按数据截止时间取数，超一个上报周期未更新就提示延迟。
Q5：点位少也要做栈吗？
A：只有一层的看板不必上栈，单值变量够用；上了两层就要改，越晚返工越多。
参考资料
《电能信息采集与管理系统》DL/T 698
《多功能电能表通信协议》DL/T 645
《信息化和工业化融合 管理体系 要求》GB/T 23001
《信息技术 云计算 参考架构》GB/T 32399
本文数据接口与模型定义参考合众致达 3T-UEM 公开技术说明
