⚠️ 已过期(v1.0) —— 现行正本是
dual-cockpit-proposal-v1.2-20260819.md。本文仅存档。
2026-08-18 · 基于 08-15 定稿《渠道机构地理分布驾驶舱大屏调研报告》+ 最新反馈(两屏 / 地图精简 / 科技风)
调研已定的 9 条口径规则、四大数据缺口结论全部沿用,本方案不新增任何统计口径。
结论:dp 的骨架可用(两屏定位、地图精简、科技风三个方向都对),但有 7 处要修;其中最关键的一处是——A屏光点不该用机构坐标(最大数据缺口),该用登录 IP 归属地(现成数据),这样 A屏不用等补录就能上。
| # | dp 原方案 | 问题 | 本方案修改 |
|---|---|---|---|
| 1 | 光点=机构登录瞬间亮起(默认机构坐标) | 机构坐标是四大缺口之首,从未采集,摸底 SQL 还没跑 | A屏光点改用登录 IP 归属地(省市级,ip2region 离线库已实测 1.55ms/8次),登录事件天然带 IP,绕开坐标缺口;机构坐标缺口只影响 B屏机构点位 |
| 2 | "登录瞬间亮起" | 现网无心跳、无推送链路,做不到"瞬间" | 写实为 15 秒轮询准实时(增量查登录审计表,现成字段);不承诺 websocket 级实时 |
| 3 | 未提两屏权限差异 | A屏投给外人看,管控信息外泄 | A屏=永久投屏模式:零交互、无机构名单、无处置区、IP 不上屏;B屏按原方案双模式 |
| 4 | "续费状态等全部移入下钻面板"(两屏一刀切) | B屏管控的核心价值就是地图上一眼看到哪里临期 | 精简只作用于 A屏;B屏地图保留续费状态点色(待拍板 D1) |
| 5 | A屏信息"移入下钻面板" | A屏零交互(投屏无鼠标),没有"下钻"可言 | A屏逻辑是"不显示",不是"移入下钻";下钻面板是 B屏专属 |
| 6 | 科技风配色只给了方向词 | 现网无深色基线,按原型规范不许自造色值 | 立大屏专用深色令牌 v1,全部色值已过色觉/对比度机器校验(见第六节),作为新基线拍板一次 |
| 7 | 未提两屏工程关系 | 容易实施成两套代码两套账 | 一套数据 API、两张皮:A屏取数是 B屏接口的子集,口径零分叉 |
结论:A屏给人看(零交互自动轮播,信息做减法),B屏给人用(原 12 模块全交互,信息不减)。
| A屏 · 展示版 | B屏 · 管控版 | |
|---|---|---|
| 定位 | 简约大气、科技感,对外形象 | 运营管控工作台 |
| 场景 | 大堂 / 发布会 / 参观投屏,无人操作 | 运营与管理者工位,鼠标操作 |
| 交互 | 零交互,侧栏视图 15s 自动轮播 | 全交互:下钻 / 筛选 / 三维度切换 / 处置 |
| 地图 | 省份热力 + 登录光点,无文字标注、无点色语义 | 热力 + 机构点位(点色=续费状态,D1)+ 点击下钻 |
| 侧边 | 超大 KPI 数字 + 少量轮播图卡(见第三节) | 原方案 12 模块完整保留 |
| 敏感信息 | 全脱敏:无机构名、无 IP、无告警名单,只给计数 | 投屏/操作双模式,操作模式见完整信息(沿用原方案) |
| 动效 | 全量科技动效(见第六节) | 收敛:仅数字滚动 + 告警红闪 |
| 数据刷新 | KPI 30s / 光点 15s / 热力 5min | 同左 + 手动刷新 |
| 权限 | 只读展示账号,无任何写能力 | 沿用原方案角色体系 |
结论:中央大地图占七成,四角超大数字,底部一条走马灯,能砍的全砍——上屏元素总共 5 类。
┌────────────────────────────────────────────────┐
│ 标题栏:渠道机构经营驾驶舱 数据更新时间 │
│ ┌KPI┐ ┌KPI┐ ┌──────────────┐ ┌KPI┐ ┌KPI┐ │
│ │328│ │1842│ │ │ │ 86│ │68%│ │
│ └───┘ └───┘ │ 中国地图 │ └───┘ └───┘ │
│ ┌─────────┐ │ 热力+光点 │ ┌─────────┐ │
│ │轮播卡·左 │ │ (雷达环) │ │轮播卡·右 │ │
│ └─────────┘ └──────────────┘ └─────────┘ │
│ ◀◀ 洞察走马灯:今日活跃机构 86 家,较昨日… ▶▶ │
└────────────────────────────────────────────────┘
| 元素 | 内容 | 数据来源(=调研报告模块) | 动效 |
|---|---|---|---|
| 4 个超大 KPI | 在营机构 / 生效席位 / 今日活跃 / 本期续费完成率 | 模块1 顶部指标的子集 | 数字滚动(变化时) |
| 中国地图 | 省份热力=活跃机构数(口径见 D6);光点=登录事件,IP 归属地定位 | 模块2 + 登录审计表 | 光点呼吸涟漪 · 省份底色渐变 |
| 轮播卡·左 | 渠道产能 TOP5(三维度自动轮换)⇄ 月度业务曲线 | 模块3 / 模块5 | 15s 淡入切换 |
| 轮播卡·右 | 今日预警计数(待续费 / 异常 / 待审批,只给数字不给名单)⇄ 大区分布横条(七大区,单色相量级对比;原写"环形",七类超出分类色板 5 槽上限,改横条) | 模块6/7 计数 + 省→大区映射 | 同左;异常数>0 时红闪 |
| 洞察走马灯 | 最多两句(已拍板),荧光横滚 | 模块11 | CSS 平移走马灯 |
⚠️ 自检发现(D5):A屏是对外形象屏,给参观者看"异常 3 起"红闪未必合适。建议预警/异常卡做成可配置开关,对外场合一键隐藏、换大区分布横条顶上;默认值等拍板。
机构名称、审批名单、预警名单、IP、席位批次明细、处置按钮、下钻面板 —— 全部只存在于 B屏。
结论:B屏=原 12 模块方案换深色科技皮,信息密度不减;只动 3 处。
| 差异点 | 原方案 | B屏 v1 |
|---|---|---|
| 视觉 | 按现网浅色令牌 | 换深色科技令牌 v1(第六节),布局/模块/口径不变 |
| 地图点位数量角标 | 曾计划角标上屏 | 移入下钻面板(响应"地图数据要少") |
| 地图点色 | 点色=续费状态 | 保留(管控刚需,待拍板 D1);若 D1 否,则同 A屏精简 |
其余 12 模块、双模式(投屏/操作)、显示条件表、字段可得性表全部沿用 08-15 定稿,不重复展开。
结论:同一张地图,三个信息层级——A屏只有第 1 层,B屏地图到第 2 层,第 3 层全在 B屏下钻面板。
| 信息 | A屏地图 | B屏地图 | B屏下钻面板 |
|---|---|---|---|
| 省份热力(今日活跃机构数) | ✅ | ✅ | — |
| 登录光点(IP 归属地) | ✅ 闪烁 | 可选开关 | — |
| 机构点位(真实坐标) | ❌ | ❌(D7 已定不采集,B屏为省级色块+点击省份→机构清单) | — |
| 续费状态 | ❌ | ❌(点位不存在,点色随之取消,D1 就此了结) | ✅ 清单内状态徽章+明细 |
| 机构数量 / 未定位数 | ❌ | ❌(角标取消) | ✅ |
| 机构名单 / 席位批次 / 处置 | ❌ | ❌ | ✅ |
结论:全部色值已用色觉安全校验脚本对真实底色 #0A1628 跑过,三套色板(分类/热力/状态)全项通过——这套可以直接定为基线,不是拍脑袋配色。
| 角色 | 色值 | 对底对比度(实测) |
|---|---|---|
| 底色(深空蓝黑) | #0A1628 |
— |
| 面板底 | #0F2137 + 1px 青边 rgba(42,212,255,.15) |
— |
| 主文字 | #E2F3FF |
15.97:1 |
| 次文字 | #7BA7C9 |
7.09:1 |
| 主青(KPI 数字/发光点缀,不做图表系列色) | #2AD4FF |
10.33:1 |
| 状态 | 色值 | 对底对比度 |
|---|---|---|
| 正常/健康 | #3DDC97 |
10.26:1 |
| 预警(橙) | #FF9F40 |
8.88:1 |
| 异常(红) | #FF4D5E |
5.59:1 |
#1B5077 → #206A94 → #2585B0 → #2A9FC9 → #2FBCE2
(校验:明度单调 ✓ 档差 ≥0.06 ✓ 最浅档对底 2.12:1 ✓ 单色相 23° ✓;无数据省份用面板底 #0F2137,不进渐变)
| 槽位 | 色值 | 说明 |
|---|---|---|
| 1 青 | #0FA3C8 |
校验:明度带 ✓ 色弱区分 ✓ 常视区分 ✓ 对比 ✓ |
| 2 橙 | #D2761F |
同上 |
| 3 紫 | #8B77E0 |
⚠️ 绿↔紫 tritan ΔE 6.6 在 6–8 地板带,必须图例+直标伴随(B屏图表本就有) |
| 4 绿 | #21A876 |
同上 |
| 5 蓝 | #4C7DE0 |
同上 |
| 动效 | 用在 | 实现 | 上限/约束 |
|---|---|---|---|
| 光点呼吸+涟漪 | A屏登录光点 | echarts effectScatter rippleEffect | 同屏 ≤50 点,超出只画最近 50 |
| 热力"流动" | A屏地图 | 降级为省份底色 8s 微呼吸;逐帧波纹只给 Top1 省 | 不做全图逐帧 canvas 波纹(性能) |
| 数字滚动 | 两屏 KPI | rAF 一次性滚到位 | 仅数值变化时触发,不循环 |
| 荧光走马灯 | A屏洞察条 | CSS transform 平移 | GPU 合成层 |
| 告警红闪 | 两屏 | CSS opacity 1Hz 脉冲 | ≤3 次后常亮(防疲劳) |
| 雷达环/四角角标/背景网格 | A屏装饰 | 纯 CSS/SVG,pointer-events:none | 置于数据层之下或外围,永不遮数据 |
transform/opacity(不触发重排);setOption 增量合并,刷新不整屏重绘;结论:一套 API 两张皮;echarts 按需清单两屏分开开;全部落在大屏目录不越界。
| 项 | 约定 |
|---|---|
| 数据服务 | 两屏共用同一后端接口,A屏取数=B屏接口子集,统计口径零分叉 |
| 目录 | 两屏均在大屏目录(如 cockpit/screen-a、cockpit/screen-b),echarts 不出大屏目录(既定政策) |
| echarts 引入 | echarts/core + 按需 use(),禁全量禁 CDN(既定铁律) |
| A屏 use() 清单 | MapChart · EffectScatterChart · BarChart · LineChart · PieChart · GeoComponent · VisualMapComponent · CanvasRenderer(零交互,不引 Tooltip) |
| B屏 use() 清单 | 原清单(Map/Line/Bar/Pie/Custom 甘特 + Grid/Tooltip/Legend/Title)+ VisualMapComponent(+可选 EffectScatter) |
| 非 echarts 动效 | 数字滚动/走马灯/红闪/装饰全部 CSS/JS,不进图表库 |
| 实时链路 | 轮询(KPI 30s/光点 15s/热力 5min),不上 websocket(现网无推送设施,轮询够用) |
结论:改用 IP 光点后,A屏不再被机构坐标缺口卡住;摸底 SQL 仍是前置,但 A屏的判据从"可定位率"换成了"登录 IP 公网占比"。
| 摸底结果 | A屏 | B屏 |
|---|---|---|
| 登录 IP 公网占比正常 | 光点方案成立,直接做 | — |
| 登录 IP 内网占比高(反代未透传真实 IP) | 光点全落同城=失真,先修部署配置再上光点;期间地图只有热力 | 同左 |
| (原"机构可定位率"三档) | 不依赖 | D7 已定不采集坐标,B屏定案省级模式,此判据作废;将来要机构点位再走"店内一键定位/地址地理编码"增强路径,架构不返工 |
摸底 SQL(10 段,geo-cockpit-baseline-sql-20260814.md)仍需有生产库权限的同事执行,此结论不变。
| # | 决策 | 推荐 / 状态 |
|---|---|---|
| D1 | B屏地图是否保留续费状态点色 | ~~保留~~ → 随 D7 了结:不采集坐标则无点位无点色;续费状态在省份下钻清单里用状态徽章呈现 |
| D2 | 深色科技风是否两屏统一 | 统一(一套令牌,B屏只换皮不减密度;避免两屏两套视觉各自漂移) |
| D3 | A屏是否显示机构名(如光点 hover) | 不显示(A屏零交互+对外脱敏,机构名只在 B屏) |
| D4 | 深色令牌 v1 色板 | 按第五节定稿(全部机器校验过;后续改色必须重跑校验) |
| D5 | A屏预警/异常计数是否对外显示 | 做成开关,默认隐藏(对外形象屏亮红灯不好看;B屏不受影响) |
| D6 | A屏热力口径:今日活跃 or 近7日活跃 | 近7日活跃(仍在已拍板四级口径内,不新增口径;"今日"口径在早晨会全图灰暗,形象屏不好看。B屏维持今日口径不变) |
| D7 | 是否采集机构坐标 | ✅ 已定(2026-08-18 长官拍板):不采集。A屏光点=登录 IP 归属地;B屏地图=省级色块+点击省份→机构清单;将来需要点位再走增强路径,不返工 |
cockpit-a-mockup-20260818.html,已真渲染+溢出/闭合自检全绿),等长官看图反馈;cockpit-b-mockup-20260818.html,08-15 布局零改动换肤+D7 落图,自检全绿);长官对 D2–D6 如有异议随时推翻,双屏原型均可改。本方案纯文档,零代码改动;所有"现成/缺口/口径"结论均沿用 08-15 已 grep 实证的调研定稿,未新增未验证的代码事实。