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

1、电视可视化展示系统概要设计版本历史日期版本说明作者0.1初版张胜利0.2修改系统架构张胜利目录1 引言 1.1编写目的1.2背景介绍1.3预期读者1.4参考文档2 总体设计 2.1设计原则2.2设计思路2.3运行环境硬件环境 Web服务器.关键技术产品2.4 系统部署 . 3 系统架构 3.1技术架构3.2功能架构3.3数据架构4 数据服务功能 4.1 数据类型 . 关系型数据库文件类型 消息队列类型4.2 数据获取方式 . 4.2.1 推送式 4.2.2 拉取式 5 系统控制台 5.1 应用管理 . 5.2 数据源管理 . 6 应用管理 6.1 应用概述 . 6.2 新建应用 . 55555

2、55677 错误！未定义书签。 错误！未定义书签。 错误！未定义书签。8810 错误！未定义书签。1010 错误！未定义书签。10101111 错误！未定义书签。1111111212126.2.1 选择模板新建 126.2.2 无模板新建 136.3 编辑应用 . 136.3.1 编辑页面示意图 136.3.2 工具栏说明 136.3.3 页面填充区说明 146.3.4 元素属性区说明 146.3.4.3 数据链接管理 166.4 预览应用 . 166.5 发布应用 . 167 数据源管理 177.1 数据源管理概述 . 177.2 新建数据源 . 177.2.1 设置数据源名称 177.2.

3、2 选择数据源类型 177.2.3 设置数据源属性 177.3 编辑数据源 . 187.3.1 修改数据源名称 187.3.2 修改数据源类型 187.3.3 修改数据源属性 187.4 删除数据源 . 188 系统安全 188.1 用户登陆注册注销 . 188.2 用户权限 . 189 应用打包 18引言1.1编写目的本文档是在公司战略发展的要求下，推出一款定制化电视展示系统的市场化 需求下，在市场调研的基础上，经过分析和系统设计编写而成。用于将软件系统 需求转换为系统的设计，提交软件开发组作为系统开发的依据和指南。1.2背景介绍展示系统是公司未来发展的一个新型产品，作为一个数据可视化解决方

4、案。 用来在电视上发布数据可视化信息、欢迎词、政府公告、办事流程、部门介绍、 法律法规、会议通知、新闻动态、紧急疏散、警告等信息。可展示的内容有文字、 图表、预警信息、通知公告信息等，并在以后能提供给其他硬件如PC端、手机端使用的方法和接口。1.3预期读者本文档的适用对象为公司领导、架构师、开发工程师、测试工程师和其他需 要了解展示系统功能的人员。1.4 参考文档Datav产品介绍_在线文档datav数据可视化使用手册_v1.1Beta在线文档datav大屏示例 需使用Google Chrome浏览器Datav控制台登录地址_ 登录用户名：zhangdata密码：1qaz!QAZ2总体设计2.

5、1 设计原则为了确保系统的可靠性、安全性和扩展性，我们在系统设计时遵循了如下原 则：先进性和成熟性展示系统参考业界相关的产品，学习借鉴成熟的优秀的流行产品，并对 各种功能裁剪后进行系统设计。实用性和扩展性系统实现要体现先进性，但也要以解决当前业务需求为主，预留接口应 对不断发展的公司业务及行业变化。安全性和可靠性 安全性是系统稳定可靠运行和信息保密的基础。2.2 设计思路展示系统一个重要作用是数据可视化展示，其功能特点有：基于JAVASCRIPT勺轻量级图形展现库丰富的展现及交互能力简单、易用勺使用方式基于CSV JSON勺统一数据格式规范数据动态实时处理 实现系统需要结合公司多年勺行业经验、

6、 技术经验勺积累， 并参考目前类似 勺商业化产品、开源产品勺实现效果，功能架构，技术架构，找到适合我们公司 自身产品勺正确思路。具体勺设计思路如下：以基本勺需求为指导 按照公司要求，系统勺基本需求包括，前端展示功能，页面配置功能，多种数据 源加载功能。主要用在电视上，利用文字、图表、预警、通知公告等内容做轮播 展示的功能。并能提供给其他硬件如 PC端、手机端使用的方法和接口。 以目前勺业务和技术能力做基础产品实施按照敏捷开发模式，采用迭代、循序渐进的方法进行开发。先 实现电视展示功能，后续逐步拓展其他终端使用，不能一蹴而就的大而 全的开展，以节约时间和资源成本。以实现可视化数据平台为目标 展示

7、系统可以逐步发展为具有可视化数据展示、 BI 分析、用户画像分析 等功能。2.3 系统功能展示系统是使用在电视上的数据应用产品。 主要用于数据可视化内容播 放, 还支持音视频、图片、文字、文档、滚动字幕、紧急通知等多种展现方 式。数据可视化展示页面基于 B/S 架构创建， 用户可以自由组合页面展示的 形式，在控制台拖拽布局，并动态调整页面属性。每个页面包含多个数据展 示块，展示块可以是柱图、线图、饼图等图表，也可以是直接展示数据的二 维表格，也可以是报告形式的文字描述。将以上内容发布给电视视频播放器，即可在电视屏幕上播出观看。2.3.1 web页面定制用户可以自由组合页面展示的形式，在控制台拖

8、拽布局，并动态调整页 面属性。每个页面包含多个数据展示块，展示块可以是柱图、线图、饼图等 图表，也可以是直接展示数据的二维表格，也可以是报告形式的文字描述。2.3.2 素材管理图片管理：支持图片 JPEG 、GIF 、 BMP 文件格式。 文字管理：在视频或图片中插入文字，文字信息可以多种方式显示，也 可以插入图片格式（图片文件）的文字，文字管理包括字幕定义，字幕效果 设置，如文字大小、字体、边框、显示速度、背景颜色等。2.3.3 内容发布向指定的电视显示器发送播放内容，可以中断发送。2.3.4 权限管理分角色控制用户权限，管理员用户可以编辑修改删除操作，访问用户只 能查看。2.3.5 日志记

9、录查看标题、播放开始日期与时间、 播放结束日期与时间、 重复播放次数， 播放记录。2.4 运行环境软件体系： B/S软件语言： JAVA开发环境 JDK1 .6以上，运行环境支持 JDK1 .6以上应用运行平台：WEBSPHERE v6.1.13 开发环境WEBLOGIC v9.0TOMCAT v5.5RESIN管理数据库：DB2 10.1ORACLE v10开发环境SQLSERVER 2008MYSQL硬件环境：电视屏幕PC终端2.5系统要求采用B/S架构 实时动态显示 局部刷新无闪烁 稳定、可扩展3 系统架构3.1逻辑架构3.2技术架构展现层展示系统视频设备电视屏幕应用层页面发布r1L控制

10、台定制 1 数据服务页面预览控制层展现层：终端浏览器，查看页面最终展现效果。电视屏幕通过网络设备接收定制 好的数字内容，播放高清电视广播。应用层：页面开发通过控制台定制开发页面， 设置完成后可以预览页面，并发布 页面供系统和用户使用。控制台生成页面并设置页面属性，页面预览功 能即时查看页面效果，页面发布功能生成静态地址，可以单独浏览此发 布的页面。控制层：对数据进行统一标准编码加工， 提供给应用层调用数据服务。图表使用 的数据要加工成json数据格式，在页面调用时返回标准格式的数据。 文字类型直接使用文本字符串进行展示， 不用再次加工。图片、视频则 嵌入页面，对内容不作修改。数据层：获取到的多

11、种数据源数据。业务层：支撑展示内容的数据来源，主要数据部分来源于数据管控系统； 还包括 文件数据，如文本文件、excel、word、ppt、图片、动画、视频等文件； 其他业务系统的交互数据，如消息队列等；其他未知系统预留其他数据 格式接口。物理层：基础网络拓扑架构，服务器部署。3.3应用架构4数据服务功能4.1 数据类型4.1.1 结构化数据支持多种关系型数据库类型，例如常见的oracle , db2, mysql, mssql, postgres等结构性数据。4.1.2 文件类型支持word、excel、ppt、文本、图片、动画、音频、视频等多种文件类 型。4.1.3 消息队列类型支持MQ

12、kafka等消息处理功能。4.2数据获取方式4.2.1 拉取式页面通过手动刷新或者定时器局部刷新时，触发数据查询操作，获取最 新数据。系统在获取结构化数据、静态文件等数据时，一般使用拉取式获取 方式。4.2.2 推送式页面数据要显示其他系统的最新内容时，需要使用消息队列机制获取相 应数据。系统在获取消息队列时，使用推送式获取方式。在服务器端设置监 听器，监控消息队列到达情况，如果数据有更新操作，则推送到前端，数据 符合标准的话就会即时展现，自动更新页面内容，这样就动态实时响应数据 内容变化。5系统控制台系统控制台是权限用户登陆进入的默认页面，页面包含应用管理、数据 源管理两大功能模块。应用管理

13、部分可以新建应用，对于已创建的应用排列 显示，用户选择后可以进入应用编辑页面。 数据源管理部分可以新建数据源, 对已创建的数据源进行修改。5.1 应用管理创建删除修改应用入口。详情参见 5章节应用管理。示意图如下:5.2数据源管理创建删除修改数据源入口。详情参见6章节数据源管理。示意图如下:6应用管理6.1 应用概述系统中的应用是展示系统的前端展现功能，作为仪表盘的样式风格展现业务数据。功能主要包括新建、编辑、预览、发布等功能。应用首先需要新建一个页面，作为页面布局的容器，这个页面可以理解 为portal的功能。这个拖拽式布局portal框架由用户在线生成，页面中的 每个portlet嵌入图表

14、、文字、图片等页面控件，这些控件可以用javascript 响应式动态交互式调整页面元素属性。页面定制设定完成后，可以在线进行 预览和发布。发布后生成静态地址，作为永久访问的凭据。6.2新建应用6.2.1 选择模板新建系统设置常用的页面布局，作为模板使用。按照对业务的了解和分析， 设定好一种或数种模板。系统默认的模板，用户不能更改页面布局。但可修 改页面内容。用户选择模板后只需对元素属性和数据源稍作修改，即可发布预览，快 速使用；也可以对原有元素进行删除，重新添加其他页面元素，并设置相关 属性。页面模板布局示例：622 无模板新建在既有的模板不能满足用户展示内容的情况下，用户也可新建空白页面,

15、 自定义页面布局。6.3编辑应用6.3.1 编辑页面示意图工具栏页面填充区元素属性区6.3.2 工具栏说明工具栏包含页面可使用的元素控件, 中去。工具栏主要包括以下几个分类：常规图表折线图柱状图 饼图K线图关系图用户可选择合适的控件填充到页面树图 散点图 雷达图 仪表盘 地图 全球地图 全国地图 省市地图 文字 单行文字 多行文字 滚动字幕 重要通知 图片 Logo 图片 背景图片6.3.3 页面填充区说明用户选择工具栏的页面元素控件，拖拉进入填充区域，并调整合适的大 小和位置。按照需求继续选择多个或一个元素控件，放在填充区域的合适位 置，形成自定义的页面布局。设置好布局之后，用户选择一个控件

16、，可以对控件属性在属性区域进行 编辑。属性设置完成即时可以看到页面控件的实际效果。6.3.4 元素属性区说明用户对选中的页面元素进行属性编辑， 属性编辑后同步更新的页面控件 上，效果上是所见即所得的编辑效果。6.3.4.1 属性属性编辑区域对元素控件的属性进行设置。 每种不同的页面控件对应不 同的属性集。例如文字控件属性集包含标题，样式，超链接，位置等内容。如下图：卜文本样式对齐方式趙惟摟配羞/- 超st播 是杏新开窗口基本位盍播坐榇（橡蚩） 纵坐标（像盍） 竟度像襄 禺度像素】某某工厂车闾实时狀况居中对弃*7401944J47例如饼图控件属性集包含图表样式、标签、默认颜色、小数点位数、图 例

17、、位置、序列颜色。如下图：罔形样式标签快半径戳认囹屯颜色圏莊颇色颜邑2颜邑3颜色4颜色5宇体颜色小数点煤留位教字号+rEU(SEE5, 660 E)115基本憶盖6.342数据数据编辑区域对元素控件绑定数据源进行设置。每种不同的页面控件对应不同的数据编辑项。例如文字控件数据编辑项主要有 “字段”、“映射”、“说明”、数据 链接管理等。“字段”是获取的数据源的列名，“映射”是对应控件的属性，“说明”是对属性的描述，数据链接管理请参考节。文字控件需要的数据只一个字段即可，即文字的具体值。再如饼图控件数据编辑项“字段”属性需系列和具体值两列数据。其他 属性和数据链接管理则一致。6.3.4.3 数据链

18、接管理用户选择控件关联数据，有文本文件、数据库、webservice等多种数据 格式可以访问。此时用户可以选择数据源类型，对应选择已创建好的数据源， 并且也可以创建新的数据源。新建数据源功能请参考7.2节内容。用户选择csv数据源类型示例：軌臓类型CSV 选择讥诣选择r新建用户选择数据库类型示例:迭澤畑库：无魏堀库 I頤崖SQLt此时用户选择了数据源，直接输入需要获取数据的sql即可6.4预览应用用户可在编辑页面中点击预览，对于填充区的内容进行页面效果预览。6.5 发布应用用户可在编辑页面中点击发布，对于填充区的内容，进行页面静态地址 生成，通过发布的地址，可被其他用户和系统使用。并用合适的页

19、面元素控 件、文字表格图表等内容填充页面。7 数据源管理7.1 数据源管理概述数据源管理功能，即提供多种数据源类型可供用户选择使用。用户可以 在创建后对数据源进行修改删除等操作。此处的数据源创建，是建立数据源 链接，创建数据通道，给其他地方使用数据内容做统一接口。系统提供支持多种数据源调用的功能。在前端使用时，只需选择适用的 数据源类型，系统针对选择的类型，提供对应的数据接口操作。系统使用 MYBATIS OR持久层框架对数据进行数据库操作，包括数据库连接，数据的 查询创建删除操作。这些功能作为内置功能对外部用户不可见，用户也不需 关注数据实现细节，把注意力放在前端页面的设定上。7.2 新建数据源7.2.1 设置数据源名称用户添加数据源需要指定数据源名称，用来在应用中选择使用。系统对 中英文不做限制，但设置的名称在系统中不能重复。命名要简洁清楚，具有 一定的业务含义，尽量不使用特殊字符。7.2.2 选择数据源类型系统支持多种数据源可供选择， 用户在操作时选择合适的数据源类型即 可。系统支持常用的各种数据源：Csv 文件Oracle 数据库Db2数据库Mysql 数据库Postgres 数据库WebserviceExcel 文件其他类型7.2.3 设置数据源属性用户设置名称和类型后，需要进行数据源相关属性的配置。不同类型的 数据源需要设置对应的属性。Csv 文