大家好，我們是成都小火科技，今天是2025年10月13日，星期一。上個(gè)月我們公司交付了一個(gè)生態(tài)數(shù)據(jù)中心的數(shù)字大屏項(xiàng)目。其實(shí)一開始接這個(gè)需求時(shí)，甲方就明確說 “要把所有核心數(shù)據(jù)都裝進(jìn)去，還得好懂、好看”。后來我們才知道，他們是想通過大屏給領(lǐng)導(dǎo)匯報(bào)、給合作方展示，所以功能既要全，又得直觀。今天就跟大家聊聊這個(gè)大屏是怎么一步步做出來的，里面那些功能都是怎么貼合甲方需求的。

這套系統(tǒng)最核心的是 “服務(wù)區(qū)總體概況” 模塊，甲方說這是大屏的 “門面”，得一眼看到關(guān)鍵信息。所以我們把平臺(tái)投入資金、服務(wù)收入、累計(jì)建成平臺(tái)數(shù)這三個(gè)核心數(shù)據(jù)放在最顯眼的位置，用大字體加動(dòng)態(tài)數(shù)字展示，比如平臺(tái)投入資金實(shí)時(shí)顯示 “XX 萬元”，服務(wù)收入還加了月度環(huán)比的小箭頭，漲了綠箭頭、降了紅箭頭，甲方說 “這樣不用翻數(shù)據(jù)，掃一眼就知道整體情況”。當(dāng)時(shí)做這個(gè)模塊時(shí)，甲方還糾結(jié)過數(shù)字顏色，一開始想用水藍(lán)色，后來覺得不夠醒目，我們當(dāng)天就調(diào)了 3 種顏色方案讓他們選，最后定了深藍(lán)色，看著更穩(wěn)重。

系統(tǒng)中包含各類 “數(shù)據(jù)明細(xì)” 模塊，這里面就包含工程師數(shù)量、設(shè)備數(shù)量、年度服務(wù)項(xiàng)目數(shù)這些。比如 “設(shè)備數(shù)量”，甲方不僅要總數(shù)，還想分類型看，服務(wù)器、交換機(jī)、存儲(chǔ)設(shè)備各多少，我們就做了個(gè)下拉篩選，點(diǎn)一下 “服務(wù)器”，數(shù)字就單獨(dú)跳出來，還配了個(gè)環(huán)形圖；“年度服務(wù)項(xiàng)目數(shù)” 更細(xì)，甲方要分 “環(huán)保類”“能源類”“科技類”，我們就用柱狀圖展示，每個(gè)類別對應(yīng)不同顏色，他們說 “匯報(bào)時(shí)指給領(lǐng)導(dǎo)看，特別清楚”。不過開發(fā)時(shí)也出了個(gè)小插曲：一開始 “工程師數(shù)量” 數(shù)據(jù)同步不及時(shí)，甲方早上看還是昨天的數(shù)，我們排查后發(fā)現(xiàn)是接口刷新頻率的問題，當(dāng)天就把頻率調(diào)成每小時(shí)更一次，后來就沒出過問題。

資金相關(guān)的功能也很關(guān)鍵，像融資金額、集成電路資金、種子基金、合作自基金、當(dāng)年招標(biāo)引資完成情況，這些甲方都要單獨(dú)展示。比如 “當(dāng)年招標(biāo)引資完成情況”，甲方說 “得讓大家知道離目標(biāo)還差多少”，我們就做了個(gè)進(jìn)度條，目標(biāo)值標(biāo)在最右邊，實(shí)時(shí)完成值跟著數(shù)據(jù)走，進(jìn)度條顏色還會(huì)變，完成 80% 以下是黃色，80% 以上是綠色，甲方看完說 “這個(gè)直觀，不用算百分比”；“集成電路資金” 和 “種子基金” 則放在一起對比，用左右兩個(gè)卡片展示，數(shù)字下面還加了一行小字說明用途，比如 “集成電路資金：用于芯片研發(fā)設(shè)備采購”，避免看混。

還有合作資源類的功能，比如人工智能與大數(shù)據(jù)服務(wù)商、新材料廠家，甲方說 “要讓合作方知道我們有哪些伙伴”，我們就做了個(gè)滾動(dòng)列表，服務(wù)商和廠家的名字帶著 logo 輪播，鼠標(biāo)放上去還能顯示合作時(shí)間和項(xiàng)目，比如 “XX 人工智能服務(wù)商：2024 年合作，提供數(shù)據(jù)建模支持”。當(dāng)時(shí)甲方給的名單有 20 多家，我們怕輪播太快看不完，特意把速度調(diào)慢，還加了 “暫?！?按鈕，他們試了后說 “這樣剛好，能看清楚每一家”。

可視化的功能里，“大屏地圖展示” 是甲方最滿意的。他們要在地圖上看到各個(gè)服務(wù)區(qū)的設(shè)備分布、服務(wù)項(xiàng)目數(shù)量，我們就把全國地圖做在大屏左側(cè)，每個(gè)服務(wù)區(qū)標(biāo)上紅色圓點(diǎn)，圓點(diǎn)大小對應(yīng)設(shè)備數(shù)量，圓點(diǎn)越大，設(shè)備越多，點(diǎn)擊圓點(diǎn)還能彈出詳情，比如 “XX 服務(wù)區(qū)：設(shè)備52臺(tái)，年度服務(wù)項(xiàng)目18個(gè)”。一開始甲方說 “圓點(diǎn)能不能再明顯點(diǎn)”，我們就把圓點(diǎn)加了閃爍效果，還調(diào)整了顏色對比度，后來他們現(xiàn)場測試時(shí)，離大屏 5 米遠(yuǎn)都能看清，說 “這個(gè)效果比預(yù)想的好”。

最后是一些特色模塊，比如戰(zhàn)略平臺(tái)、自建孵化載體、場景、活動(dòng)整層。“戰(zhàn)略平臺(tái)” 我們做成了卡片式，每個(gè)平臺(tái)配一張示意圖，比如 “綠色能源戰(zhàn)略平臺(tái)” 配了風(fēng)力發(fā)電的圖；“自建孵化載體” 則用列表展示，包含載體名稱、地址、入駐企業(yè)數(shù)；“活動(dòng)整層” 是甲方中途加的需求，他們說 “想展示今年辦的行業(yè)活動(dòng)”，我們就做了個(gè)時(shí)間軸，從 1 月到 12 月，每個(gè)月的活動(dòng)名稱、時(shí)間、地點(diǎn)都標(biāo)在上面，還能點(diǎn)擊查看活動(dòng)照片。當(dāng)時(shí)加這個(gè)功能時(shí)，我們跟甲方說 “需要加個(gè)數(shù)據(jù)錄入后臺(tái)，方便你們傳活動(dòng)信息，時(shí)間多 2 天，成本加 5000 塊”，他們算完覺得合理，就定了下來。

現(xiàn)在這個(gè)大屏已經(jīng)在甲方的展示廳用了快一個(gè)月，上周他們還跟我們說 “領(lǐng)導(dǎo)來看了，說數(shù)據(jù)全、看得懂，合作方也問是哪家做的”。其實(shí)做這種大屏，關(guān)鍵就是把甲方的需求拆細(xì)，每個(gè)功能都落到實(shí)際使用場景里，不是光堆功能，而是讓每個(gè)數(shù)字、每個(gè)圖表都有用，這樣甲方用著才順手。后續(xù)我們還會(huì)定期給他們做巡檢，看看數(shù)據(jù)同步有沒有問題，要不要加新功能，畢竟做軟件就是要幫甲方解決實(shí)際問題。

文章來源網(wǎng)址：http://www.zizhu8.cn/archives/xitongkaifa01/2247，轉(zhuǎn)載請注明出處！