电视可视化展示系统概要设计.docx

电视可视化展示系统概要设计.docx

《电视可视化展示系统概要设计.docx》由会员分享，可在线阅读，更多相关《电视可视化展示系统概要设计.docx（18页珍藏版）》请在冰豆网上搜索。

电视可视化展示系统概要设计

电视可视化展示系统概要设计

版本历史

日期

版本

说明

作者

2016.12.15

0.1

初版

张胜利

2016.12.20

0.2

修改系统架构

张胜利

1引言

1.1编写目的

本文档是在公司战略发展的要求下，推出一款定制化电视展示系统的市场化需求下，在市场调研的基础上，经过分析和系统设计编写而成。

用于将软件系统需求转换为系统的设计，提交软件开发组作为系统开发的依据和指南。

1.2背景介绍

展示系统是公司未来发展的一个新型产品,作为一个数据可视化解决方案。

用来在电视上发布数据可视化信息、欢迎词、政府公告、办事流程、部门介绍、法律法规、会议通知、新闻动态、紧急疏散、警告等信息。

可展示的内容有文字、图表、预警信息、通知公告信息等，并在以后能提供给其他硬件如PC端、手机端使用的方法和接口。

1.3预期读者

本文档的适用对象为公司领导、架构师、开发工程师、测试工程师和其他需要了解展示系统功能的人员。

1.4参考文档

《Datav产品介绍》在线文档

《datav数据可视化使用手册v1.1Beta》在线文档

《datav大屏示例》需使用GoogleChrome浏览器

Datav控制台登录地址登录用户名：

zhangdata密码：

1qaz!

QAZ

2总体设计

2.1设计原则

为了确保系统的可靠性、安全性和扩展性，我们在系统设计时遵循了如下原则：

●先进性和成熟性

展示系统参考业界相关的产品，学习借鉴成熟的优秀的流行产品，并对各种功能裁剪后进行系统设计。

●实用性和扩展性

系统实现要体现先进性，但也要以解决当前业务需求为主，预留接口应对不断发展的公司业务及行业变化。

●安全性和可靠性

安全性是系统稳定可靠运行和信息保密的基础。

2.2设计思路

展示系统一个重要作用是数据可视化展示，其功能特点有：

●基于JAVASCRIPT的轻量级图形展现库

●丰富的展现及交互能力

●简单、易用的使用方式

●基于CSV、JSON的统一数据格式规范

●数据动态实时处理

实现系统需要结合公司多年的行业经验、技术经验的积累，并参考目前类似的商业化产品、开源产品的实现效果，功能架构，技术架构，找到适合我们公司自身产品的正确思路。

具体的设计思路如下：

●以基本的需求为指导

按照公司要求，系统的基本需求包括，前端展示功能，页面配置功能，多种数据源加载功能。

主要用在电视上，利用文字、图表、预警、通知公告等内容做轮播展示的功能。

并能提供给其他硬件如PC端、手机端使用的方法和接口。

●以目前的业务和技术能力做基础

产品实施按照敏捷开发模式，采用迭代、循序渐进的方法进行开发。

先实现电视展示功能，后续逐步拓展其他终端使用，不能一蹴而就的大而全的开展，以节约时间和资源成本。

●以实现可视化数据平台为目标

展示系统可以逐步发展为具有可视化数据展示、BI分析、用户画像分析等功能。

2.3系统功能

展示系统是使用在电视上的数据应用产品。

主要用于数据可视化内容播放,还支持音视频、图片、文字、文档、滚动字幕、紧急通知等多种展现方式。

数据可视化展示页面基于B/S架构创建，用户可以自由组合页面展示的形式，在控制台拖拽布局，并动态调整页面属性。

每个页面包含多个数据展示块，展示块可以是柱图、线图、饼图等图表，也可以是直接展示数据的二维表格，也可以是报告形式的文字描述。

将以上内容发布给电视视频播放器，即可在电视屏幕上播出观看。

1

2

2.1

2.2

2.3

2.3.1web页面定制

用户可以自由组合页面展示的形式，在控制台拖拽布局，并动态调整页面属性。

每个页面包含多个数据展示块，展示块可以是柱图、线图、饼图等图表，也可以是直接展示数据的二维表格，也可以是报告形式的文字描述。

2.3.2素材管理

图片管理：

支持图片JPEG、GIF、BMP文件格式。

文字管理：

在视频或图片中插入文字，文字信息可以多种方式显示，也可以插入图片格式（图片文件）的文字，文字管理包括字幕定义，字幕效果设置，如文字大小、字体、边框、显示速度、背景颜色等。

2.3.3内容发布

向指定的电视显示器发送播放内容，可以中断发送。

2.3.4权限管理

分角色控制用户权限，管理员用户可以编辑修改删除操作，访问用户只能查看。

2.3.5日志记录

查看标题、播放开始日期与时间、播放结束日期与时间、重复播放次数，播放记录。

2.4运行环境

1

2

2.1

2.2

2.3

●软件体系：

B/S

●软件语言：

JAVA

开发环境JDK1.6以上，运行环境支持JDK1.6以上

●应用运行平台：

✧WEBSPHEREv6.1.13：

开发环境

✧WEBLOGICv9.0

✧TOMCATv5.5

✧RESIN

●管理数据库：

✧DB210.1

✧ORACLEv10：

开发环境

✧SQLSERVER2008

✧MYSQL

●硬件环境：

✧电视屏幕

✧PC终端

2.5系统要求

●采用B/S架构

●实时动态显示

●局部刷新无闪烁

●稳定、可扩展

3系统架构

1

2

3

3.1逻辑架构

3.2技术架构

展现层：

终端浏览器，查看页面最终展现效果。

电视屏幕通过网络设备接收定制好的数字内容，播放高清电视广播。

应用层：

页面开发通过控制台定制开发页面，设置完成后可以预览页面，并发布页面供系统和用户使用。

控制台生成页面并设置页面属性，页面预览功能即时查看页面效果，页面发布功能生成静态地址，可以单独浏览此发布的页面。

控制层：

对数据进行统一标准编码加工，提供给应用层调用数据服务。

图表使用的数据要加工成json数据格式，在页面调用时返回标准格式的数据。

文字类型直接使用文本字符串进行展示，不用再次加工。

图片、视频则嵌入页面，对内容不作修改。

数据层：

获取到的多种数据源数据。

业务层：

支撑展示内容的数据来源，主要数据部分来源于数据管控系统；还包括

文件数据，如文本文件、excel、word、ppt、图片、动画、视频等文件；其他业务系统的交互数据，如消息队列等；其他未知系统预留其他数据格式接口。

物理层：

基础网络拓扑架构，服务器部署。

3.3应用架构

4数据服务功能

1

2

3

4

4.1数据类型

1

2

3

4

4.1

4.1.1结构化数据

支持多种关系型数据库类型，例如常见的oracle，db2，mysql，mssql，postgres等结构性数据。

4.1.2文件类型

支持word、excel、ppt、文本、图片、动画、音频、视频等多种文件类型。

4.1.3消息队列类型

支持MQ、kafka等消息处理功能。

4.2数据获取方式

4.2

4.2.1拉取式

页面通过手动刷新或者定时器局部刷新时，触发数据查询操作，获取最新数据。

系统在获取结构化数据、静态文件等数据时，一般使用拉取式获取方式。

4.2.2推送式

页面数据要显示其他系统的最新内容时，需要使用消息队列机制获取相应数据。

系统在获取消息队列时，使用推送式获取方式。

在服务器端设置监听器，监控消息队列到达情况，如果数据有更新操作，则推送到前端，数据符合标准的话就会即时展现，自动更新页面内容，这样就动态实时响应数据内容变化。

5系统控制台

系统控制台是权限用户登陆进入的默认页面，页面包含应用管理、数据源管理两大功能模块。

应用管理部分可以新建应用，对于已创建的应用排列显示，用户选择后可以进入应用编辑页面。

数据源管理部分可以新建数据源，对已创建的数据源进行修改。

5

5.1应用管理

创建删除修改应用入口。

详情参见5章节应用管理。

示意图如下：

5.2数据源管理

创建删除修改数据源入口。

详情参见6章节数据源管理。

示意图如下：

6应用管理

6

6.1应用概述

系统中的应用是展示系统的前端展现功能，作为仪表盘的样式风格展现业务数据。

功能主要包括新建、编辑、预览、发布等功能。

应用首先需要新建一个页面，作为页面布局的容器，这个页面可以理解为portal的功能。

这个拖拽式布局portal框架由用户在线生成，页面中的每个portlet嵌入图表、文字、图片等页面控件，这些控件可以用javascript响应式动态交互式调整页面元素属性。

页面定制设定完成后，可以在线进行预览和发布。

发布后生成静态地址，作为永久访问的凭据。

6.2新建应用

5

6

6.1

6.2

6.2.1选择模板新建

系统设置常用的页面布局，作为模板使用。

按照对业务的了解和分析，设定好一种或数种模板。

系统默认的模板，用户不能更改页面布局。

但可修改页面内容。

用户选择模板后只需对元素属性和数据源稍作修改，即可发布预览，快速使用；也可以对原有元素进行删除，重新添加其他页面元素，并设置相关属性。

页面模板布局示例：

6.2.2无模板新建

在既有的模板不能满足用户展示内容的情况下，用户也可新建空白页面，自定义页面布局。

6.3编辑应用

6.3

6.3.1编辑页面示意图

6.3.2工具栏说明

工具栏包含页面可使用的元素控件，用户可选择合适的控件填充到页面中去。

工具栏主要包括以下几个分类：

●常规图表

折线图

柱状图

饼图

K线图

关系图

树图

散点图

雷达图

仪表盘

●地图

全球地图

全国地图

省市地图

●文字

单行文字

多行文字

滚动字幕

重要通知

●图片

Logo图片

背景图片

6.3.3页面填充区说明

用户选择工具栏的页面元素控件，拖拉进入填充区域，并调整合适的大小和位置。

按照需求继续选择多个或一个元素控件，放在填充区域的合适位置，形成自定义的页面布局。

设置好布局之后，用户选择一个控件，可以对控件属性在属性区域进行编辑。

属性设置完成即时可以看到页面控件的实际效果。

6.3.4元素属性区说明

用户对选中的页面元素进行属性编辑，属性编辑后同步更新的页面控件上，效果上是所见即所得的编辑效果。

1

2

3

4

5

6

6.1

6.2

6.3

6.3.1

6.3.2

6.3.3

6.3.4

6.3.4.1属性

属性编辑区域对元素控件的属性进行设置。

每种不同的页面控件对应不同的属性集。

例如文字控件属性集包含标题，样式，超链接，位置等内容。

如下图：

例如饼图控件属性集包含图表样式、标签、默认颜色、小数点位数、图例、位置、序列颜色。

如下图：

6.3.4.2数据

数据编辑区域对元素控件绑定数据源进行设置。

每种不同的页面控件对应不同的数据编辑项。

例如文字控件数据编辑项主要有“字段”、“映射”、“说明”、数据链接管理等。

“字段”是获取的数据源的列名，“映射”是对应控件的属性，“说明”是对属性的描述，数据链接管理请参考6.3.4.3节。

文字控件需要的数据只一个字段即可，即文字的具体值。

再如饼图控件数据编辑项“字段”属性需系列和具体值两列数据。

其他属性和数据链接管理则一致。

6.3.4.1

6.3.4.2

6.3.4.3数据链接管理

用户选择控件关联数据，有文本文件、数据库、webservice等多种数据格式可以访问。

此时用户可以选择数据源类型，对应选择已创建好的数据源，并且也可以创建新的数据源。

新建数据源功能请参考7.2节内容。

●用户选择csv数据源类型示例：

●用户选择数据库类型示例：

此