可视化技术在党群连心信息数据大屏中的应用研究

2022-10-10苏文芝王锐利

济源职业技术学院学报 2022年3期

苏文芝，王锐利

(济源职业技术学院 a.科技外事处 b.人工智能学院，河南济源 459000)

随着新一代信息技术的飞速发展，VR/AR/MR、全息技术、沉浸式全景交互、体感交互、机械互动、人工智能等技术为各行业信息网络传播插上了腾飞的翅膀[1]，使得党群连心、红色文化等内容也能以更丰富的形式展现在我们面前[2]。而数据可视化技术也是近些年兴起的党群连心、红色文化等展示和传播的新途径[3]。

一、应用背景

济源产城融合示范区是国家发改委支持建设的全国首个全域产城融合示范区，我们以济源五龙口镇党群连心信息可视化大屏项目为例探索了数据可视化技术在党群连心、红色文化中的应用研究。河南省济源市五龙口镇地处济源市东北部，为济源、沁阳、晋城三地交界地带。2020年11月，五龙口镇被中央精神文明建设指导委员会授予全国文明村镇称号。党群连心信息网的构建旨在全面实现遍访民情到户、政策宣讲到户、调解矛盾到户、指导发展到户、便民服务到户，推动党员干部“身下、心下、情下”，让实践活动精准实施、精准落实[4]。为扎实推进党员干部下基层、察民情、解民忧、暖民心实践活动深入开展，五龙口镇机关、镇直部门的党员干部、村组干部、驻村工作队员以及党员志愿者全部纳入连心网，每人联系辖区内的住户，形成“镇干部包村——村干部包组——党员干部联系群众”三级组织体系，确保村不漏户、户不漏人。为了更好地实现党群连心信息内容的展示，我们研究了五龙口镇党群连心数据大屏可视化的方式和方法，继而探索党群连心、红色文化等网络传播新途径和新方法[5]。

日常工作过程中会积累、沉淀数量可观的原始工作数据，而VR/AR/MR、全息技术、沉浸式全景交互、体感交互、机械互动、人工智能等技术不便于进行海量数据的处理，大数据可视化却可以更加直观、生动、实时的技术手段动态呈现党群连心工作情况，党群连心信息数据大屏可视化应用将实现五龙口镇的党员总人数及党员联户情况分析、服务发展、调解矛盾、倡树新风、宣化教育等情况分析、工作动态统计、走访记录数、企业数据等公示，对一系列信息进行数据可视化展示。

二、项目设计思路

(一)项目功能模块

设计的党群连心信息数据大屏可视化项目功能模块包括6个一级栏目和8个二级栏目，具体如图1所示。

图1 党群连心信息数据大屏功能模块

(二)后台与数据处理

党群连心信息数据大屏项目数据由系统后台对接或做静态数据模拟。实际工作过程中，多数数据由后台或其他系统产生而来，要与相关数据库对接，或由数据库导出相应格式文档，再导入可视化系统进行分析展示。通过对获取或采集的数据进行Python预处理、分析，可实现数据挖掘，并做出网页大屏可视化展示或决策。

(三)煊染及其他

一般可视化或展示效果可由层叠样式表CSS来实现。为加强气氛，烘托或深化主题，更立体、生动甚至动态的煊染效果可由Photoshop结合3Dmax、MAYA等其他专业建模软件来实现。

三、框架设计及实现

(一)党群连心信息数据大屏HTML框架

采用超文本标记语言HTML5实现党群连心信息数据大屏的框架结构。可以通过使用HBuilder X软件，新建html文件来实现。部分主要代码如下：

(二)党群连心信息数据大屏部分主要CSS样式

数据大屏的用户界面采用深邃蓝、稳重红为主色调，辅以粒子效果和少量发光点使得背景更具主题烘托效果。完成党群连心信息数据大屏的布局框架后，通过层叠样式表 CSS 对大屏各布局进行样式设置和润色，使用HBuilder X工具，通过新建css文件来实现。部分主要代码如下：

body，html{height：100%；}

/*主体高度设置*/

*{margin：0；padding：0；}

/*通用选择器设置内边距、外边距*/

#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/五龙口党员总人数框.png)；}

/*左列1样式设置*/

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

/*左列2样式设置*/

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

/*左列3样式设置*/

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

/*中列样式设置*/