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

精品文档电视可视化展示系统概要设计版本历史日期版本说明作者2016.12.150.1初版张胜利2016.12.200.2修改系统架构张胜利目录1引言51.1编写目的51.2背景介绍51.3预期读者51.4参考文档52总体设计52.1设计原则52.2设计思路62.3运行环境62.3.1硬件环境62.3.2Web服务器62.3.3关键技术产品72.4系统部署73系统架构73.1技术架构73.2功能架构73.3数据架构74数据服务功能74.1数据类型74.1.1关系型数据库74.1.2文件类型84.1.3消息队列类型84.2数据获取方式84.2.1推送式84.2.2拉取式85系统控制台85.1应用管理85.2数据源管理86应用管理96.1应用概述96.2新建应用96.2.1选择模板新建96.2.2无模板新建106.3编辑应用106.3.1编辑页面示意图106.3.2工具栏说明106.3.3页面填充区说明116.3.4元素属性区说明116.3.4.3数据链接管理136.4预览应用136.5发布应用137数据源管理147.1数据源管理概述147.2新建数据源147.2.1设置数据源名称147.2.2选择数据源类型147.2.3设置数据源属性147.3编辑数据源157.3.1修改数据源名称157.3.2修改数据源类型157.3.3修改数据源属性157.4删除数据源158系统安全158.1用户登陆注册注销158.2用户权限159应用打包161 引言1.1 编写目的本文档是在公司战略发展的要求下，推出一款定制化电视展示系统的市场化需求下，在市场调研的基础上，经过分析和系统设计编写而成。用于将软件系统需求转换为系统的设计，提交软件开发组作为系统开发的依据和指南。1.2 背景介绍展示系统是公司未来发展的一个新型产品, 作为一个数据可视化解决方案。用来在电视上发布数据可视化信息、欢迎词、政府公告、办事流程、部门介绍、法律法规、会议通知、新闻动态、紧急疏散、警告等信息。可展示的内容有文字、图表、预警信息、通知公告信息等，并在以后能提供给其他硬件如PC端、手机端使用的方法和接口。1.3 预期读者本文档的适用对象为公司领导、架构师、开发工程师、测试工程师和其他需要了解展示系统功能的人员。1.4 参考文档Datav产品介绍 在线文档datav数据可视化使用手册v1.1Beta在线文档datav大屏示例 需使用Google Chrome浏览器Datav控制台登录地址 登录用户名：zhangdata 密码：1qaz!QAZ2 总体设计2.1 设计原则为了确保系统的可靠性、安全性和扩展性，我们在系统设计时遵循了如下原则：l 先进性和成熟性展示系统参考业界相关的产品，学习借鉴成熟的优秀的流行产品，并对各种功能裁剪后进行系统设计。l 实用性和扩展性系统实现要体现先进性，但也要以解决当前业务需求为主，预留接口应对不断发展的公司业务及行业变化。l 安全性和可靠性安全性是系统稳定可靠运行和信息保密的基础。2.2 设计思路展示系统一个重要作用是数据可视化展示，其功能特点有：l 基于JAVASCRIPT的轻量级图形展现库l 丰富的展现及交互能力l 简单、易用的使用方式l 基于CSV、JSON的统一数据格式规范l 数据动态实时处理实现系统需要结合公司多年的行业经验、技术经验的积累，并参考目前类似的商业化产品、开源产品的实现效果，功能架构，技术架构，找到适合我们公司自身产品的正确思路。具体的设计思路如下：l 以基本的需求为指导按照公司要求，系统的基本需求包括，前端展示功能，页面配置功能，多种数据源加载功能。主要用在电视上，利用文字、图表、预警、通知公告等内容做轮播展示的功能。并能提供给其他硬件如PC端、手机端使用的方法和接口。l 以目前的业务和技术能力做基础产品实施按照敏捷开发模式，采用迭代、循序渐进的方法进行开发。先实现电视展示功能，后续逐步拓展其他终端使用，不能一蹴而就的大而全的开展，以节约时间和资源成本。l 以实现可视化数据平台为目标展示系统可以逐步发展为具有可视化数据展示、BI分析、用户画像分析等功能。2.3 系统功能展示系统是使用在电视上的数据应用产品。主要用于数据可视化内容播放,还支持音视频、图片、文字、文档、滚动字幕、紧急通知等多种展现方式。数据可视化展示页面基于B/S架构创建，用户可以自由组合页面展示的形式，在控制台拖拽布局，并动态调整页面属性。每个页面包含多个数据展示块，展示块可以是柱图、线图、饼图等图表，也可以是直接展示数据的二维表格，也可以是报告形式的文字描述。将以上内容发布给电视视频播放器，即可在电视屏幕上播出观看。122.12.22.32.3.1 web页面定制用户可以自由组合页面展示的形式，在控制台拖拽布局，并动态调整页面属性。每个页面包含多个数据展示块，展示块可以是柱图、线图、饼图等图表，也可以是直接展示数据的二维表格，也可以是报告形式的文字描述。2.3.2 素材管理图片管理：支持图片 JPEG 、GIF 、 BMP 文件格式。 文字管理：在视频或图片中插入文字，文字信息可以多种方式显示，也可以插入图片格式（图片文件）的文字，文字管理包括字幕定义，字幕效果设置，如文字大小、字体、边框、显示速度、背景颜色等。2.3.3 内容发布向指定的电视显示器发送播放内容，可以中断发送。2.3.4 权限管理分角色控制用户权限，管理员用户可以编辑修改删除操作，访问用户只能查看。2.3.5 日志记录查看标题、播放开始日期与时间、播放结束日期与时间、重复播放次数，播放记录。2.4 运行环境122.12.22.3l 软件体系：B/Sl 软件语言：JAVA开发环境JDK1.6以上，运行环境支持JDK1.6以上l 应用运行平台： WEBSPHERE v6.1.13：开发环境 WEBLOGIC v9.0 TOMCAT v5.5 RESINl 管理数据库： DB2 10.1 ORACLE v10：开发环境 SQLSERVER 2008 MYSQLl 硬件环境： 电视屏幕 PC终端2.5 系统要求l 采用B/S架构l 实时动态显示l 局部刷新无闪烁l 稳定、可扩展3 系统架构1233.1 逻辑架构3.2 技术架构展现层：终端浏览器，查看页面最终展现效果。电视屏幕通过网络设备接收定制好的数字内容，播放高清电视广播。应用层：页面开发通过控制台定制开发页面，设置完成后可以预览页面，并发布页面供系统和用户使用。控制台生成页面并设置页面属性，页面预览功能即时查看页面效果，页面发布功能生成静态地址，可以单独浏览此发布的页面。控制层：对数据进行统一标准编码加工，提供给应用层调用数据服务。图表使用的数据要加工成json数据格式，在页面调用时返回标准格式的数据。文字类型直接使用文本字符串进行展示，不用再次加工。图片、视频则嵌入页面，对内容不作修改。数据层：获取到的多种数据源数据。业务层：支撑展示内容的数据来源，主要数据部分来源于数据管控系统；还包括 文件数据，如文本文件、excel、word、ppt、图片、动画、视频等文件；其他业务系统的交互数据，如消息队列等；其他未知系统预留其他数据格式接口。物理层：基础网络拓扑架构，服务器部署。3.3 应用架构4 数据服务功能12344.1 数据类型12344.14.1.1 结构化数据支持多种关系型数据库类型，例如常见的oracle，db2，mysql，mssql，postgres等结构性数据。4.1.2 文件类型支持word、excel、ppt、文本、图片、动画、音频、视频等多种文件类型。4.1.3 消息队列类型支持MQ、kafka等消息处理功能。4.2 数据获取方式4.24.2.1 拉取式页面通过手动刷新或者定时器局部刷新时，触发数据查询操作，获取最新数据。系统在获取结构化数据、静态文件等数据时，一般使用拉取式获取方式。4.2.2 推送式页面数据要显示其他系统的最新内容时，需要使用消息队列机制获取相应数据。系统在获取消息队列时，使用推送式获取方式。在服务器端设置监听器，监控消息队列到达情况，如果数据有更新操作，则推送到前端，数据符合标准的话就会即时展现，自动更新页面内容，这样就动态实时响应数据内容变化。5 系统控制台系统控制台是权限用户登陆进入的默认页面，页面包含应用管理、数据源管理两大功能模块。应用管理部分可以新建应用，对于已创建的应用排列显示，用户选择后可以进入应用编辑页面。数据源管理部分可以新建数据源，对已创建的数据源进行修改。55.1 应用管理创建删除修改应用入口。详情参见5章节应用管理。示意图如下：5.2 数据源管理创建删除修改数据源入口。详情参见6章节数据源管理。示意图如下：6 应用管理66.1 应用概述系统中的应用是展示系统的前端展现功能，作为仪表盘的样式风格展现业务数据。功能主要包括新建、编辑、预览、发布等功能。应用首先需要新建一个页面，作为页面布局的容器，这个页面可以理解为portal的功能。这个拖拽式布局portal框架由用户在线生成，页面中的每个portlet嵌入图表、文字、图片等页面控件，这些控件可以用javascript响应式动态交互式调整页面元素属性。页面定制设定完成后，可以在线进行预览和发布。发布后生成静态地址，作为永久访问的凭据。6.2 新建应用566.16.26.2.1 选择模板新建系统设置常用的页面布局，作为模板使用。按照对业务的了解和分析，设定好一种或数种模板。系统默认的模板，用户不能更改页面布局。但可修改页面内容。用户选择模板后只需对元素属性和数据源稍作修改，即可发布预览，快速使用；也可以对原有元素进行删除，重新添加其他页面元素，并设置相关属性。页面模板布局示例：6.2.2 无模板新建在既有的模板不能满足用户展示内容的情况下，用户也可新建空白页面，自定义页面布局。6.3 编辑应用6.36.3.1 编辑页面示意图6.3.2 工具栏说明工具栏包含页面可使用的元素控件，用户可选择合适的控件填充到页面中去。工具栏主要包括以下几个分类：l 常规图表折线图柱状图饼图K线图关系图树图散点图雷达图仪表盘l 地图全球地图全国地图省市地图l 文字单行文字多行文字滚动字幕重要通知l 图片Logo图片背景图片6.3.3 页面填充区说明用户选择工具栏的页面元素控件，拖拉进入填充区域，并调整合适的大小和位置。按照需求继续选择多个或一个元素控件，放在填充区域的合适位置，形成自定义的页面布局。设置好布局之后，用户选择一个控件，可以对控件属性在属性区域进行编辑。属性设置完成即时可以看到页面控件的实际效果。6.3.4 元素属性区说明用户对选中的页面元素进行属性编辑，属性编辑后同步更新的页面控件上，效果上是所见即所得的编辑效果。1234566.16.26.36.3.16.3.26.3.36.3.46.3.4.1 属性属性编辑区域对元素控件的属性进行设置。每种不同的页面控件对应不同的属性集。例如文字控件属性集包含标题，样式，超链接，位置等内容。如下图：例如饼图控件属性集包含图表样式、标签、默认颜色、小数点位数、图例、位置、序列颜色。如下图：6.3.4.2 数据数据编辑区域对元素控件绑定数据源进行设置。每种不同的页面控件对应不同的数据编辑项。例如文字控件数据编辑项主要有“字段”、“映射”、“说明”、数据链接管理等。“字段”是获取的数据源的列名，“映射”是对应控件的属性，“说明”是对属性的描述，数据链接管理请参考6.3.4.3节。文字控件需要的数据只一个字段即可，即文字的具体值。再如饼图控件数据编辑项“字段”属性需系列和具体值两列数据。其他属性和数据链接管理则一致。6.3.4.16.3.4.26.3.4.3 数据链接管理用户选择控件关联数据，有文本文件、数据库、webservice等多种数据格式可以访问。此时用户可以选择数据源类型，对应选择已创建好的数据源，并且也可以创建新的数据源。新建数据源功能请参考7.2节内容。l 用户选择csv数据源类型示例：l 用户选择数据库类型示例：此时用户选择了数据源，直接输入需要获取数据的sql即可。6.4 预览应用用户可在编辑页面中点击预览，对于填充区的内容进行页面效果预览。6.5 发布应用用户可在编辑页面中点击发布，对于填充区的内容，进行页面静态地址生成，通过发布的地址，可被其他用户和系统使用。并用合适的页面元素控件、文字表格图表等内容填充页面。7 数据源管理12345677.1 数据源管理概述数据源管理功能，即提供多种数据源类型可供用户选择使用。用户可以在创建后对数据源进行修改删除等操作。此处的数据源创建，是建立数据源链接，创建数据通道，给其他地方使用数据内容做统一接口。系统提供支持多种数据源调用的功能。在前端使用时，只需选择适用的数据源类型，系统针对选择的类型，提供对应的数据接口操作。系统使用MYBATIS ORM持久层框架对数据进行数据库操作，包括数据库连接，数据的查询创建删除操作。这些功能作为内置功能对外部用户不可见，用户也不需关注数据实现细节，把注意力放在前端页面的设定上。7.2 新建数据源12345677.17.27.2.1 设置数据源名称用户添加数据源需要指定数据源名称，用来在应用中选择使用。系统对中英文不做限制，但设置的名称在系统中不能重复。命名要简洁清楚，具有一定的业务含义，尽量不使用特殊字符。7.2.2 选择数据源类型系统支持多种数据源可供选择，用户在操作时选择合适的数据源类型即可。系统支持常用的各种数据源：l Csv文件l Oracle数据库l Db2数据库l Mysql数据库l Postgres数据库l Webservicel Excel文件l 其他类型7.2.3 设置数据源属性用户设置名称和类型后，需要进行数据源相关属性的配置。不同类型的数据源需要设置对应的属性。l Csv文件：指定路径上传到服务器l 关系型数据库：指定数据库访问路径IP端口数据库名称访问用户名密码l Webse