蘇文芝，王銳利

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

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

一、應(yīng)用背景

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

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

二、項(xiàng)目設(shè)計(jì)思路

(一)項(xiàng)目功能模塊

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

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

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

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

(三)煊染及其他

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

三、框架設(shè)計(jì)及實(shí)現(xiàn)

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

采用超文本標(biāo)記語言HTML5實(shí)現(xiàn)黨群連心信息數(shù)據(jù)大屏的框架結(jié)構(gòu)。可以通過使用HBuilder X軟件，新建html文件來實(shí)現(xiàn)。部分主要代碼如下：

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

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

body，html{height：100%；}

/*主體高度設(shè)置*/

*{margin：0；padding：0；}

/*通用選擇器設(shè)置內(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；}

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

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

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

/*左列寬度、距左設(shè)置*/

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

/*左列1樣式設(shè)置*/

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

/*左列2樣式設(shè)置*/

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

/*左列3樣式設(shè)置*/

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

/*中列樣式設(shè)置*/

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

/*右列樣式設(shè)置*/

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

/*單元標(biāo)題字號、顏色設(shè)置*/

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

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

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

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

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

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