可視化技術在黨群連心信息數(shù)據(jù)大屏中的應用研究

蘇文芝，王銳利

(濟源職業(yè)技術學院 a.科技外事處 b.人工智能學院，河南 濟源 459000)

隨著新一代信息技術的飛速發(fā)展，VR/AR/MR、全息技術、沉浸式全景交互、體感交互、機械互動、人工智能等技術為各行業(yè)信息網(wǎng)絡傳播插上了騰飛的翅膀[1]，使得黨群連心、紅色文化等內(nèi)容也能以更豐富的形式展現(xiàn)在我們面前[2]。而數(shù)據(jù)可視化技術也是近些年興起的黨群連心、紅色文化等展示和傳播的新途徑[3]。

一、應用背景

濟源產(chǎn)城融合示范區(qū)是國家發(fā)改委支持建設的全國首個全域產(chǎn)城融合示范區(qū)，我們以濟源五龍口鎮(zhèn)黨群連心信息可視化大屏項目為例探索了數(shù)據(jù)可視化技術在黨群連心、紅色文化中的應用研究。河南省濟源市五龍口鎮(zhèn)地處濟源市東北部，為濟源、沁陽、晉城三地交界地帶。2020年11月，五龍口鎮(zhèn)被中央精神文明建設指導委員會授予全國文明村鎮(zhèn)稱號。黨群連心信息網(wǎng)的構建旨在全面實現(xiàn)遍訪民情到戶、政策宣講到戶、調(diào)解矛盾到戶、指導發(fā)展到戶、便民服務到戶，推動黨員干部“身下、心下、情下”，讓實踐活動精準實施、精準落實[4]。為扎實推進黨員干部下基層、察民情、解民憂、暖民心實踐活動深入開展，五龍口鎮(zhèn)機關、鎮(zhèn)直部門的黨員干部、村組干部、駐村工作隊員以及黨員志愿者全部納入連心網(wǎng)，每人聯(lián)系轄區(qū)內(nèi)的住戶，形成“鎮(zhèn)干部包村——村干部包組——黨員干部聯(lián)系群眾”三級組織體系，確保村不漏戶、戶不漏人。為了更好地實現(xiàn)黨群連心信息內(nèi)容的展示，我們研究了五龍口鎮(zhèn)黨群連心數(shù)據(jù)大屏可視化的方式和方法，繼而探索黨群連心、紅色文化等網(wǎng)絡傳播新途徑和新方法[5]。

日常工作過程中會積累、沉淀數(shù)量可觀的原始工作數(shù)據(jù)，而VR/AR/MR、全息技術、沉浸式全景交互、體感交互、機械互動、人工智能等技術不便于進行海量數(shù)據(jù)的處理，大數(shù)據(jù)可視化卻可以更加直觀、生動、實時的技術手段動態(tài)呈現(xiàn)黨群連心工作情況，黨群連心信息數(shù)據(jù)大屏可視化應用將實現(xiàn)五龍口鎮(zhèn)的黨員總人數(shù)及黨員聯(lián)戶情況分析、服務發(fā)展、調(diào)解矛盾、倡樹新風、宣化教育等情況分析、工作動態(tài)統(tǒng)計、走訪記錄數(shù)、企業(yè)數(shù)據(jù)等公示，對一系列信息進行數(shù)據(jù)可視化展示。

二、項目設計思路

(一)項目功能模塊

設計的黨群連心信息數(shù)據(jù)大屏可視化項目功能模塊包括6個一級欄目和8個二級欄目，具體如圖1所示。

圖1 黨群連心信息數(shù)據(jù)大屏功能模塊

(二)后臺與數(shù)據(jù)處理

黨群連心信息數(shù)據(jù)大屏項目數(shù)據(jù)由系統(tǒng)后臺對接或做靜態(tài)數(shù)據(jù)模擬。實際工作過程中，多數(shù)數(shù)據(jù)由后臺或其他系統(tǒng)產(chǎn)生而來，要與相關數(shù)據(jù)庫對接，或由數(shù)據(jù)庫導出相應格式文檔，再導入可視化系統(tǒng)進行分析展示。通過對獲取或采集的數(shù)據(jù)進行Python預處理、分析，可實現(xiàn)數(shù)據(jù)挖掘，并做出網(wǎng)頁大屏可視化展示或決策。

(三)煊染及其他

一般可視化或展示效果可由層疊樣式表CSS來實現(xiàn)。為加強氣氛，烘托或深化主題，更立體、生動甚至動態(tài)的煊染效果可由Photoshop結合3Dmax、MAYA等其他專業(yè)建模軟件來實現(xiàn)。

三、框架設計及實現(xiàn)

(一)黨群連心信息數(shù)據(jù)大屏HTML框架

采用超文本標記語言HTML5實現(xiàn)黨群連心信息數(shù)據(jù)大屏的框架結構?？梢酝ㄟ^使用HBuilder X軟件，新建html文件來實現(xiàn)。部分主要代碼如下：

(二)黨群連心信息數(shù)據(jù)大屏部分主要CSS樣式

數(shù)據(jù)大屏的用戶界面采用深邃藍、穩(wěn)重紅為主色調(diào)，輔以粒子效果和少量發(fā)光點使得背景更具主題烘托效果。完成黨群連心信息數(shù)據(jù)大屏的布局框架后，通過層疊樣式表 CSS 對大屏各布局進行樣式設置和潤色，使用HBuilder X工具，通過新建css文件來實現(xiàn)。部分主要代碼如下：

body，html{height：100%；}

/*主體高度設置*/

*{margin：0；padding：0；}

/*通用選擇器設置內(nèi)邊距、外邊距*/

#main{width：1920px；height：1080px；background-color：#252F39；background-image：url(../assets/背景.png)；background-size：1920px 1080px；font-family：‘shcn’；position：relative；padding-top：51px；box-sizing：border-box；}

/*寬、高、背景、字體、相對位置、邊框盒子設置*/

.cell{position：absolute；top：170px；height：760px；}

.cell1{width：540px；left：73px；}

/*左列寬度、距左設置*/

.cell11{padding：10px 20px；height：118px；background-image：url(../assets/五龍口黨員總人數(shù)框.png)；}

/*左列1樣式設置*/

.cell12{box-sizing：border-box；padding：10px 20px；height：350px；background-image：url(../走訪數(shù)量.png)；margin：10px 0；position：relative；}

/*左列2樣式設置*/

.cell13{box-sizing：border-box；padding：10px 20px；height：250px；background-image：url(../assets/走訪數(shù)量框.png)；}

/*左列3樣式設置*/

.cell2{width：650px；left：638px；background-image：url(../assets/地圖外框.png)；}

/*中列樣式設置*/

.cell3{width：518px；left：1320px；}

/*右列樣式設置*/

.cellTitle{font-size：26px；color：#FFFFFF；}

/*單元標題字號、顏色設置*/

黨群連心信息數(shù)據(jù)大屏布局效果如圖2所示。

圖2 黨群連心信息數(shù)據(jù)大屏布局

四、功能模塊實現(xiàn)

黨群連心信息可視化大屏功能模塊較多，其中黨員聯(lián)戶情況模塊可實現(xiàn)對服務發(fā)展、調(diào)解矛盾、倡樹新風、宣化教育等情況進行統(tǒng)計分析，該模塊實現(xiàn)過程如下。

(一)黨員聯(lián)戶模塊HTML

黨員聯(lián)戶模塊先由HTML實現(xiàn)黨員聯(lián)戶情況分析框架。