ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

把一张 CSV 变成会呼吸的园区沙盘:WorkBuddy + park-viz 做 2.5D 楼宇可视化实战

把一张 CSV 变成会呼吸的园区沙盘:WorkBuddy + park-viz 做 2.5D 楼宇可视化实战 让招商台账「站起来」我用 WorkBuddy 装了个 park-viz Skill把 Excel 变成能点的 2.5D 园区沙盘前言招商例会上那张没人看得懂的 Excel我在一家产业园区运营公司做数据。每周一的招商例会都要经历同一个尴尬时刻——招商总监把一张几十行的 Excel 甩到投影上一列楼号、一列楼层数、一列入驻企业、一列「本周工作项」调研 / 拜访 / 签约然后全场对着密密麻麻的数字皱眉。「C 座孵化器现在到底招得怎么样」「A 座那几家上周不是说要签约吗签了没」「哪几栋楼快满了、哪几栋还空着一大半谁能一眼说清」没人能一眼说清。因为Excel 是给机器读的不是给人看的。楼宇是空间实体「招商招到第几层、进行到哪一步」本质上是一个空间问题硬塞进二维表格人脑得先做一次「表格 → 空间」的翻译——翻译一次累一次一场会翻译几十次散会时谁都记不住哪栋楼是什么状态。我试过 Excel 条件格式上色、试过画柱状图、试过用 PPT 手绘平面图再标注都不对味要么丢了空间关系要么改一次累死人。这周我换了个思路——能不能让这张 Excel 直接「立起来」变成一个楼层级、能点、能看进度的 2.5D 园区沙盘说一个具体的场景你就有体感了。上周例会总监问「A 座研发大厦现在入驻率多少」我低头在 Excel 里数18 层、4 家企业分别占 3-5、7-9、15、16-17 层……算完抬头说「大概 60% 吧」。总监皱眉「大概」我只好再数一遍确认「39 层里有 11 层有企业入驻率 28%」。就这一个数字前后花了快两分钟还被质疑。如果当时屏幕上是张沙盘楼身上绿格灰格一数就完事根本不用现场算。那个「大概」的尴尬就是二维表格在三维问题上的力不从心。翻 SkillHub 时我找到一个正好对口的技能user_25b0a437/park-viz—— 产业园区 2.5D 楼宇可视化评分 4.5。这篇文章就是我从「装 Skill」到「跑出成品」的完整实录所有图都是真实产物。一、先把 park-viz 装进 WorkBuddy我没有先去查配置教程而是直接照 SkillHub 官方的安装指南https://skillhub.cn/install/skillhub.md走。整个过程分两步装 CLI、装技能。第一步检查并安装 SkillHub CLI# 先看装没装command-vskillhubskillhub--version# 没有输出 → 未安装执行官方安装脚本curl-fsSLhttps://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh|bash装完 CLI 落在~/.local/bin/skillhub。第二步搜索并安装 park-viz# 搜索确认技能存在skillhub search park-viz搜索结果里第一条就是目标user_25b0a437/park-viz 产业园区2.5D可视化 - 产业园区2.5D白模楼宇可视化技能支持自定义工作项调研/拜访/签约等 CSV数据导入交互式展示楼宇入驻情况与工作进度。 - version: 1.0.0 - install: skillhub install park-viz --namespace user_25b0a437关键一步安装时必须用--dir指向 WorkBuddy 的技能目录否则默认装到./skills/不会被识别skillhubinstallpark-viz--namespaceuser_25b0a437--dir~/.workbuddy/skills/info: resolved community skill (user_25b0a437/park-viz), internal slugpark-viz ✓ Installed: user_25b0a437/park-viz - /Users/xxx/.workbuddy/skills/user_25b0a437/park-viz装完看一眼目录技能自带一个主生成器 两份示例数据~/.workbuddy/skills/user_25b0a437/park-viz/ ├── SKILL.md # 技能说明触发词、工作流、参数 └── assets/ ├── generate_park.py # 主生成器CSV → 2.5D HTML ├── sample_buildings.csv # 建筑示例 └── sample_tenants.csv # 企业示例提醒一句SkillHub 装完技能后新技能通常要重启 WorkBuddy 才会被加载识别。重启后说「产业园」「园区可视化」「2.5D 地图」「楼宇分布图」这类触发词就能自动唤起它。顺带说下我为什么选 SkillHub 而不是自己写。过去这类需求要么找开源项目 clone 下来改环境依赖一堆跑不起来是常态要么花几天学一个可视化框架自己造等学会需求早变了。SkillHub 的思路是把「别人已经做好的能力」像装 App 一样装上——search一下看有没有对口的有就install没有再自己造。对我这种「要快、要稳、不想踩环境坑」的普通用户这条路径的性价比最高。park-viz 就是我在 SkillHub 搜「园区」时跳出来的第一个结果评分 4.5正合我意。二、park-viz 的数据契约两张 CSV 说清一切读完SKILL.md我发现这个技能的输入设计非常克制——只要两张 CSV一张描述楼一张描述企业。buildings.csv楼宇表楼宇编号,楼宇名称,楼层数,功能区域 1,A座 研发大厦,18,研发区 2,B座 创新中心,12,研发区 3,C座 孵化器,8,孵化区 ... 10,J座 物流仓储,3,物流区tenants.csv企业表楼宇编号,企业名称,企业类型,所在楼层,是否完成 1,云启科技集团有限公司,人工智能,3-5,是 1,星图智能装备有限公司,机器人,7-9,是 3,初芯半导体创业团队,半导体,1-2,否 ...两张表通过「楼宇编号」关联。有几个字段设计我觉得很懂业务字段玩法为什么好用所在楼层支持3-5范围、3,4多层、7单层一家企业占好几层写法自然是否完成接受 是/否、true/false、1/0、Y/N、完成/未完成招商台账怎么记它都认工作项命令行--work-label自定义「签约」「拜访」「回访」随便叫功能区域自动分区研发区/制造区/配套区分块布局我把自己的招商台账整理成 10 栋楼、24 家企业工作项设为「签约」。整个数据准备阶段我完全不用碰任何可视化技术——只需要把业务数据整理成两张表剩下的坐标计算、等轴测投影、着色、交互全是 park-viz 的活。这里还有一层设计值得展开两张表通过「楼宇编号」这个唯一关联键咬合。这意味着即便存在「研发大厦」在多个园区重名只要编号不重复就互不干扰。更重要的是——如果周一例会发现某栋楼漏了几家入驻企业我只需要往 tenants.csv 里补几行重新跑一条命令整张沙盘自动更新。数据是源头、图表是结果可重复、可版本管理两份 CSV 直接丢进 Git。这和 PPT 手绘是两种工作范式改 PPT 要重新画一遍改 CSV 只要重跑一条命令。三、一句话生成把两张表交给 WorkBuddy数据备好剩下的就交给 WorkBuddy。我在对话里的操作简单到有点不真实——把两张 CSV 拖进去说清楚要什么WorkBuddy 做的事情是一条清晰的链路加载 park-viz 技能 → 读 SKILL.md 和生成器 → 解析两张 CSV → 按技能规则映射字段 → 调用generate_park.py→ 产出自包含 HTML。它实际执行的命令是python ~/.workbuddy/skills/user_25b0a437/park-viz/assets/generate_park.py\--buildingsbuildings.csv\--tenantstenants.csv\--park-name星海智造产业园\--work-label签约\--outputpark-viz-demo/output/park.htmlGenerated: park.html Buildings: 10, Tenants: 24值得一提的是--work-label这个参数。它让同一份数据能讲不同的故事把工作项从「签约」改成「拜访」整张沙盘的语义就从「招到哪了」变成「跑过哪些客户」改成「装修」关注点又变成「楼里施工进展」。一个字段、一条参数切换的是业务视角——这也是 Skill 封装得「懂业务」的体现它不硬编码「签约」这种具体词而是把「你在跟进什么」留给你定义。几秒钟后一张能点、能看进度的 2.5D 园区沙盘就出来了。我后来量过10 栋楼、24 家企业的数据从 Python 命令开始执行到 HTML 写盘完毕总耗时不到 10 秒——大部分时间花在楼层格子的逐层着色和窗户绘制上10 栋楼共 105 层24 家企业拆到逐层后约 60 个格子要分别计算颜色、画亮窗或暗窗。输出的park.html只有 38KB一个文件没有任何外部 JS/CSS 依赖双击直接在浏览器里跑。这张图和我之前用 Canvas 手搓的最大不同是park-viz 把可视化粒度做到了「楼层级」——不是整栋楼一个颜色而是每一层单独着色白模楼宇灰白色块 楼层横线 窗户做出立体沙盘的观感绿色楼层 该层有企业且已签约还画了亮窗户灰色楼层 有企业但待签约暗窗户空白楼层 该层还没招到企业楼顶圆形徽章 这栋楼的签约进度N/M绿色全签完橙色还有没签的底部黑色标签 楼名。顶部一排 6 个 KPI 是生成器自动算的10 栋楼、总楼层、24 家入驻企业、已签约数、入驻率、签约率。会议一开场先把大盘讲清楚不用再一栋栋念数字。为什么「立起来」比「平铺」好懂这里有个被忽视的认知细节人脑处理空间信息的速度远快于处理表格行。等轴测isometric投影是一种「不依赖透视、各轴夹角 120°」的画法——它保留了「上 / 前 / 侧」三个方向的立体感又不会因为近大远小而扭曲比例。所以同一栋楼用平面表格你得数「第 3 行到第 5 行是云启」用 2.5D 沙盘你直接看到「楼腰那三格是绿的」。前者走的是「语言→空间」的二次翻译后者是直接「看」。一次例会几十次查询每次省下零点几秒的翻译整场会的信息吸收效率天差地别。这也是为什么我试过 Excel 条件格式上色、画柱状图都没「对味」——它们还是平的空间关系被压扁了。KPI 栏是给「决策者」看的楼层着色是给「执行者」看的两者分工明确。总监站在大屏前余光扫一眼顶部 6 个数字就知道今天整体盘子入驻率多少、签约率多少招商经理凑近看某栋楼关心的是「哪一格还没绿、卡在哪家」。一张图同时服务两种角色不需要切两个视图。四、楼层级可视化一眼看穿「哪层空、哪层没签」我盯着这张图看了很久因为它把过去需要「翻译」的信息全部变成了不用翻译就能读懂的视觉语言高的楼一眼可见—— H 座人才公寓 20 层最高J 座物流仓储 3 层最矮楼高即层数不用看数字。入驻密度肉眼可感—— A 座研发大厦楼身绿油油一片4 家企业签了 3 家C 座孵化器几乎全灰3 家团队一家没签空得刺眼。招商总监最关心的「哪栋楼是硬骨头」扫一眼就锁定了。签约进度顶在楼顶—— 楼顶徽章3/3全绿的是已经拿下的楼0/3橙色的是还没开张的楼。绿橙对比战果和缺口一目了然。这就是楼层级可视化相对「整栋一色」的价值同一栋楼里签约的和没签的能分开看。比如 A 座研发大厦3-9 层的三家云启、星图、鹏程绿了15 层的慧眼视觉还是灰的——这种「一栋楼里签了大半、还差一家」的状态二维表格根本表达不出来但在沙盘上一目了然。为了说清它到底比 Excel 强在哪我把同一份数据在两种载体下的表现拉了个对比维度Excel 台账park-viz 2.5D 沙盘空间关系楼号是文字得脑补位置楼高层数、横排相邻一目了然进度状态单元格填「是/否」要逐行读整层绿/灰扫一眼即知单栋钻取筛选 滚动打断思路点一下展开右侧详情面板会议演示投影密密麻麻数字没人看大屏立体沙盘全场聚焦更新方式改单元格易错漏改 CSV 重跑命令可版本管理分享成本发文件对方要开 Excel发一个 HTML双击即开这张表我后来真的在例会上投了出来比任何口头解释都管用——总监看完第一列就点头「对我们要的就是第二列那个东西。」五、点击钻取从全景到单栋详情静态全景已经比 Excel 强但 park-viz 真正解放会议室的是点击钻取能力。点击任意一栋楼右侧详情面板立刻展开这栋楼的全部细节——签约进度条、四格统计、逐层入驻图、企业清单详情面板的信息层次很清楚顶部进度条—— 这栋楼「已签约 N / 入驻 M 家」配一条渐变进度条绿色代表全签完四格统计—— 总楼层、已入驻层数、已签约企业数、空置层数四个数字把这栋楼说透楼层占用图—— 从顶层到 1 层逐格排列绿格已签约企业、灰格待签约企业、浅格空置鼠标悬停还能看每层是哪家企业企业清单—— 每家企业一张卡片标注所在楼层、企业类型、签约状态已签约的左侧描绿边待签约的描灰边。这个交互解决了一个很实际的矛盾信息密度 vs 视觉清爽。全景图只展示楼级概况保持画面干净需要细节时点进去看单栋——招商总监问「C 座那几家没签的是谁」点一下 C 座三家没签的公司名、所在楼层、类型全列出来当场就能派活。上周例会真发生了这一幕总监看到 C 座顶上0/3的橙色徽章随口问「这三家都是什么来头」。我直接点开 C 座右侧面板列出初芯半导体1-2 层、速联科技3 层、微纳传感5-6 层三家全是半导体上下游、都卡在「待签约」。总监立刻判断「这几家是产业链协同的一起谈个打包政策」。从提问到决策不到一分钟——放在过去我得翻三页 Excel、对着楼号找企业名、再回表格确认楼层起码五分钟起步。钻取不是炫技是让「问→答→决策」的链路变短。悬停则是轻量预览鼠标移到任意楼上浮出一张卡片显示功能区、楼层总数、入驻企业数、签约进度不用点击就能快速扫过所有楼六、动手实操任何人都能照着走的四步我把整个流程复盘成四步只要你手上有一张「楼 企业 状态」的台账都能照做第 1 步装技能。按 SkillHub 指南装 CLI再skillhub install park-viz --namespace user_25b0a437 --dir ~/.workbuddy/skills/。装一次长期可用。第 2 步整理两张 CSV。buildings.csv楼宇编号 / 名称 / 楼层数 / 功能区 tenants.csv楼宇编号 / 企业名 / 类型 / 所在楼层 / 是否完成。没有数据技能自带sample_buildings.csv和sample_tenants.csv直接拿来改。两个易错点所在楼层不要超过该楼的总层数是否完成用「是/否」最稳。第 3 步喂给 WorkBuddy。把两张 CSV 拖进对话说清园区名和工作项名比如「工作项是签约」。WorkBuddy 会自动调generate_park.py。第 4 步交付。产物是一个自包含的park.html双击用浏览器打开即可无需服务器、无需联网。丢进企业微信群、投会议室大屏、嵌进园区看板的 iframe都只是一个文件的事。park-viz-demo/ ├── data/ │ ├── buildings.csv # 10 栋楼输入 │ └── tenants.csv # 24 家企业输入 └── output/ └── park.html # 2.5D 交互沙盘输出双击即开整个链路没有一步需要写可视化代码。从两张 CSV 到楼层级可交互沙盘全程自然语言驱动。七、踩坑与经验坑 1安装必须带--dir。我第一次图省事没加--dir技能装到了当前目录的./skills/WorkBuddy 根本没识别。老老实实指向~/.workbuddy/skills/才对。SkillHub 指南里这条是加粗强调的别跳过。坑 2所在楼层别越界。tenants.csv 里如果把企业写到「第 20 层」但那栋楼只有 8 层生成器不会报错但那家企业在楼层占用图里就「消失」了因为没有对应的楼层格子。整理数据时对一遍楼层上限。坑 3企业数别堆太多。SKILL.md 里提到单栋楼建议不超过 20 家企业否则右侧详情面板的企业清单会很长可读性下降。我 A 座放了 4 家刚好清单一屏看完。坑 4功能区决定布局分块。相同「功能区域」的楼会被技能归到一起考虑布局。我一开始功能区填得很乱每栋楼一个区布局就散把楼按研发/制造/配套/商务/物流五大区归类后沙盘的分区感立刻出来了。坑 5CSV 编码用 UTF-8别用 GBK。我从公司系统导出的台账默认是 GBK 编码直接喂给生成器时中文楼名全变成了乱码方块。先用iconv -f GBK -t UTF-8或 Excel「另存为 UTF-8 CSV」转一遍就好了。如果你看到楼宇名称显示成问号或方块第一反应就该查编码而不是怀疑生成器有 Bug。坑 6是否完成的「否」别写成空值。我第一版 tenants.csv 里几家还没签约的企业我图省事留了空单元格。结果生成器把「空」当成「未填写」直接跳过那几层既没绿也没灰在楼层图上成了「不存在」。正确做法是明确写「否」——空值和「否」在语义上是两回事技能只认显式的「否」。八、一点思考Skill 把专业能力「装进来」WorkBuddy 把意图「翻出去」做完这个我对「装一个 Skill 到底得到了什么」有了具体体感。park-viz 这个 Skill本质是把一套等距投影 楼层级渲染 交互面板的可视化专业能力压缩成了一个generate_park.py加一份数据契约。我不会写 Canvas、不懂等距投影的数学、也没时间学 D3——但这些我都不需要懂。我只需要懂我的业务园区有哪些楼、招商到哪一步把它整理成两张表。而WorkBuddy 是那个把「业务意图」翻译成「技能调用」的中间层它理解我说的「工作项是签约」映射成--work-label 签约它读懂 SKILL.md 的数据格式把我的 CSV 喂对位置它调完生成器把 HTML 交到我手里。整个过程我没写一行代码也没查一页文档。一句话总结这三者的关系park-viz 是「封装好的可视化专家」WorkBuddy 是「听得懂人话的项目经理」SkillHub 是「随取随用的能力货架」。我要做的只是说清楚「我有什么数据、我想看什么」。对比传统方案用 Tableau/Power BI 做同样的园区图得先学工具、连数据源、拖拽配置、调样式还要 BI 平台账号才能分享而这套方案——装个 Skill、整两张表、说一句话、拿一个 HTML 文件。临时性、一次性、需要快速迭代的可视化需求Skill 这条路快太多了。为了把「快多少」说具体我把两条路的成本摊开对比对比项传统 BITableau/Power BIpark-viz WorkBuddy上手门槛要学工具逻辑、字段映射、图表类型会填两张 CSV 即可数据源要连库/连表配置连接串直接拖 CSV 进对话协作分享需 BI 账号/服务器对方也得有许可发一个 HTML 文件双击即开改一次样式进工具改配置、重新发布改 CSV 重跑命令单次耗时小时级到天级分钟级含装技能适合场景长期固定报表、企业级看板临时汇报、快速验证、一次性可视化不是要取代 BI而是补上 BI 够不着的「轻、快、散」场景。园区招商周报、门店开业进度、项目楼栋验收——这些需求生命周期短、迭代快、往往「今天要、明天改」不值得为它们搭一套 BI 工程。park-viz 这类 Skill 的价值就是让这种「小可视化」成本趋近于零。顺带说一句可迁移性——park-viz 的「双表 等轴测 钻取」模式能直接套到很多「位置 状态」的场景写字楼空置率看板、商圈门店开业进度、甚至学校教学楼各实验室使用状态。只要你的数据能切成「楼/位置表 入驻/状态表」两张它就能立起来。下一步我想接的是把这张静态沙盘逐步「养活」时间轴回放把「是否签约」升级成「签约日期」让沙盘支持按月拖动时间轴回放整个园区一年的招商演进——哪个月集中签约、哪栋楼后来居上一目了然实时数据接管把 CSV 换成对接招商系统的 API每周手动导出变成「打开就是最新战况」的活的作战地图多工作项叠加现在工作项是「签约」下一步可以叠加「装修」「入驻」「税收」一层楼一种颜色维度点一下切换视角导出汇报版把当前沙盘状态截成一张图直接贴进周报 PPT省去例会后再整理的时间。这四步都不需要我重写可视化只要在「数据」和「参数」上做文章——这恰恰印证了开头那句话Skill 把专业能力封装好我要做的只是把业务说清楚。如果你也在管一个园区、一栋写字楼、甚至一片商圈门店手上有一张「位置 状态」的表格却总觉得看不清——装个 park-viz让你的 Excel 站起来。它不会替你招商但能让你每一次例会都从「大家对着数字皱眉」变成「盯着沙盘直接派活」。
返回列表