交付出件箱

← 返回出件箱

⚠️ 已过期(v1.0) —— 现行正本是 dual-cockpit-proposal-v1.2-20260819.md。本文仅存档。

双驾驶舱建设方案 · A 展示屏 + B 管控屏(v1.0)

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 同左 + 手动刷新
权限 只读展示账号,无任何写能力 沿用原方案角色体系

二、A屏 · 展示版设计

结论:中央大地图占七成,四角超大数字,底部一条走马灯,能砍的全砍——上屏元素总共 5 类。

2.1 布局(16:9)

┌────────────────────────────────────────────────┐
│ 标题栏:渠道机构经营驾驶舱      数据更新时间     │
│ ┌KPI┐ ┌KPI┐   ┌──────────────┐   ┌KPI┐ ┌KPI┐ │
│ │328│ │1842│  │              │   │ 86│ │68%│ │
│ └───┘ └───┘   │   中国地图    │   └───┘ └───┘ │
│ ┌─────────┐   │  热力+光点    │   ┌─────────┐ │
│ │轮播卡·左 │   │  (雷达环)    │   │轮播卡·右 │ │
│ └─────────┘   └──────────────┘   └─────────┘ │
│ ◀◀ 洞察走马灯:今日活跃机构 86 家,较昨日… ▶▶  │
└────────────────────────────────────────────────┘

2.2 上屏元素(仅 5 类,全部复用已拍板口径)

元素 内容 数据来源(=调研报告模块) 动效
4 个超大 KPI 在营机构 / 生效席位 / 今日活跃 / 本期续费完成率 模块1 顶部指标的子集 数字滚动(变化时)
中国地图 省份热力=活跃机构数(口径见 D6);光点=登录事件,IP 归属地定位 模块2 + 登录审计表 光点呼吸涟漪 · 省份底色渐变
轮播卡·左 渠道产能 TOP5(三维度自动轮换)⇄ 月度业务曲线 模块3 / 模块5 15s 淡入切换
轮播卡·右 今日预警计数(待续费 / 异常 / 待审批,只给数字不给名单)⇄ 大区分布横条(七大区,单色相量级对比;原写"环形",七类超出分类色板 5 槽上限,改横条) 模块6/7 计数 + 省→大区映射 同左;异常数>0 时红闪
洞察走马灯 最多两句(已拍板),荧光横滚 模块11 CSS 平移走马灯

⚠️ 自检发现(D5):A屏是对外形象屏,给参观者看"异常 3 起"红闪未必合适。建议预警/异常卡做成可配置开关,对外场合一键隐藏、换大区分布横条顶上;默认值等拍板。

2.3 A屏明确不上屏的信息

机构名称、审批名单、预警名单、IP、席位批次明细、处置按钮、下钻面板 —— 全部只存在于 B屏。


三、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 就此了结) ✅ 清单内状态徽章+明细
机构数量 / 未定位数 ❌ ❌(角标取消) ✅
机构名单 / 席位批次 / 处置 ❌ ❌ ✅

五、科技风视觉规范(深色令牌 v1 · 已机器校验)

结论:全部色值已用色觉安全校验脚本对真实底色 #0A1628 跑过,三套色板(分类/热力/状态)全项通过——这套可以直接定为基线,不是拍脑袋配色。

5.1 基础

角色 色值 对底对比度(实测)
底色(深空蓝黑) #0A1628 —
面板底 #0F2137 + 1px 青边 rgba(42,212,255,.15) —
主文字 #E2F3FF 15.97:1
次文字 #7BA7C9 7.09:1
主青(KPI 数字/发光点缀,不做图表系列色) #2AD4FF 10.33:1

5.2 状态色(带图标+文字,永不只靠颜色)

状态 色值 对底对比度
正常/健康 #3DDC97 10.26:1
预警(橙) #FF9F40 8.88:1
异常(红) #FF4D5E 5.59:1

5.3 地图热力渐变(单色相 5 档,少→多)

#1B5077 → #206A94 → #2585B0 → #2A9FC9 → #2FBCE2
(校验:明度单调 ✓ 档差 ≥0.06 ✓ 最浅档对底 2.12:1 ✓ 单色相 23° ✓;无数据省份用面板底 #0F2137,不进渐变)

5.4 图表分类色(B屏多系列图表,固定槽位顺序,不许循环取色)

槽位 色值 说明
1 青 #0FA3C8 校验:明度带 ✓ 色弱区分 ✓ 常视区分 ✓ 对比 ✓
2 橙 #D2761F 同上
3 紫 #8B77E0 ⚠️ 绿↔紫 tritan ΔE 6.6 在 6–8 地板带,必须图例+直标伴随(B屏图表本就有)
4 绿 #21A876 同上
5 蓝 #4C7DE0 同上

5.5 动效清单

动效 用在 实现 上限/约束
光点呼吸+涟漪 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 置于数据层之下或外围,永不遮数据

5.6 性能三原则(可验收)

  1. 动效只用 transform/opacity(不触发重排);
  2. 数据刷新与动画解耦:echarts setOption 增量合并,刷新不整屏重绘;
  3. 验收标准:投屏机 1080p 连续 30 分钟,帧率 ≥30fps、内存无上涨趋势。

六、工程约束

结论:一套 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屏地图=省级色块+点击省份→机构清单;将来需要点位再走增强路径,不返工

九、下一步

  1. ✅ A屏科技风原型图已出(2026-08-18,cockpit-a-mockup-20260818.html,已真渲染+溢出/闭合自检全绿),等长官看图反馈;
  2. 摸底 SQL 交有权限同事执行(D7 后判据聚焦第②条:登录 IP 公网占比);
  3. ✅ B屏深色版原型也已出(cockpit-b-mockup-20260818.html,08-15 布局零改动换肤+D7 落图,自检全绿);长官对 D2–D6 如有异议随时推翻,双屏原型均可改。

本方案纯文档,零代码改动;所有"现成/缺口/口径"结论均沿用 08-15 已 grep 实证的调研定稿,未新增未验证的代码事实。