开发者工具链介绍

第一章 开发者工具链简介

51WORLD开发者工具链,是围绕着51WORLD核心产品全要素场景(AES),帮助生态合作伙伴进行细分行业的解决方案的搭建和输出,产品形态为B/S架构的开发者生态组合工具,旨在将基于AES的数字孪生基础能力快速赋能全行业,帮助生态伙伴高效的、低成本的构建数字孪生控制管理平台。

开发者工具链包括所列的几个子工具:数据集成工具、可视化面板搭建工具、算法服务工具(视频感知融合服务、视频感知识别服务)、SUPERAPI场景交互工具、用户权限管理工具、数据维护工具,以及支撑场景输出的云渲染服务。

以下为帮助生态伙伴构建数字孪生控制管理平台过程中各工具的作用:

51WORLD WDP

以下为全套工具链产品的方案架构:

51WORLD WDP

开发者工具链目前支持SaaS云服务模式,年租制,通过订购完成服务租赁。

通过WDP工具链进行数字孪生运控系统搭建的流程如下:

51WORLD WDP

1.1.1 场景制作

根据项目开工需求,准备物料,约定SuperAPI版本并进行场景制作。

1.1.2 云渲染准备

进行云渲染部署,获取场景配置信息,用以在面板编辑的时候配置场景资源

1.1.3 数据源准备

根据项目需求准备数据源,可以是数据库或者数据文件,通过数据维护节点,完成接入,并输出为数据API,进行实时传数。

1.1.4 图表数据接入

将由数据维护节点输出的数据API在图表上映射,完成数据可视化。图表的数据来源除了数据维护之外,也可以由

①工具链外部直接提供(与实际接入项匹配即可);

②直接在图表中写入静态数据,两者均可以实现数据在图表中的映射目的。

1.1.5 面板搭建

以拖拉拽的PPT式操作方式,进行“所见即所得”的面板搭建,布局美观的可视化页面。

1.1.6 SuperAPI数据准备

在SuperAPI的在线,编辑平台上,进行标准方法的测试及数据收集,记录符合业务呈现的JOSN数据体,用以在面板事件的编辑中使用。

1.1.7 面板事件接入

完成面板搭建后,可以通过SuperAPI标准方法调用和面板交互行为,进行业务事件的设置,包括场景切换、面板切换、元素显隐、覆盖物变更等。

1.1.8 下载使用

完成面板搭建及事件配置等操作之后,即可下载文件包,进行数字孪生运控系统的实际使用。

第二章 数据维护工具

数据维护工具即数据维护模块,承担工具链的底层能力,数据的多源头集成、储存(部分必要数据),再向各应用输出。其能力主要由以下几项服务实现:数据集合(主题管理、数据源管理、数据集管理)、数据发布(数据库API管理、静态文件API管理)、视频相关(视频配置)。

2.1.1 适用对象

此平台适用于数字孪生可视化各个细分行业领域的开发者及解决方案提供商,帮助他们高效的、低成本的构建数字孪生控制管理平台。

2.1.2 平台技术特色

平台架构分为两层:分别是数据集成层、数据访问层。

2.1.3 数据采集层

可以将多源头、多类型的数据进行接入或存储(部分),以方便访问层调用。

2.1.4 数据访问层

提供sql生成接口的服务,通过RestfulAPI接口暴露给客户端。

2.2.1 数据集合

2.2.1.1 主题管理

当开发者需要根据项目的业务需求定制业务数据输出时,可以通过【主题管理】对所需的业务主题进行设置和管理,以实现数据关联业务的目的。目前已预制了11个基础主题,包括:资产、设备、环境、能耗、招商、交通、安防、物业、城建、规划、人员。除了预制的主题外,还提供自定义的主题新增和编辑。完成主题设置后,可以在数据输出环节定义数据API时,能够快速有效且具备业务意义的进行。此外,主题的业务意义也能在图表配置时进行关联管理。从数据到呈现,都能保证业务的一致性。

51WORLD WDP

新增:

点击【新增主题】,填入名称及描述,即可完成主题新增。

51WORLD WDP

编辑:

点击已建的主题操作栏中的【编辑】,即可修改主题名称及描述。

51WORLD WDP

删除:

点击已建的主题操作栏中的【删除】,即可删除该主题。

51WORLD WDP

2.2.1.2 数据源管理

当开发者需要做数据集成时,可以通过【数据源管理】将多个数据库进行接入管理,已实现数据高效调用的目的。支持的数据库类型包括:MySQL、Oracle、SQLServer、PostgreSQL四类。完成数据源配置之后,可以通过【API管理】进行数据API的输出,实现快速的数据输出。

51WORLD WDP

新增:

点击【新增数据源】,进行以下项目设置,数据库类型、数据库名称、主机地址、端口、用户名、密码、描述,即可完成数据源创建。

51WORLD WDP

编辑:

点击已创建的数据源操作栏中的【编辑】,即可对需要改动的内容进行修改,保存后即更新。

51WORLD WDP

测试:

点击已创建的数据源操作栏中的【测试】,即可对已经完成配置的数据源进行连接测试,测试结果将分为成功或失败两种,成功即数据源可用,失败即需要重新对数据源按正确的方式配置。

删除:

点击已创建的数据源操作栏中的【删除】,即可删除该数据源。

51WORLD WDP

2.2.1.3 数据集管理

当开发者需要对数据源的数据进行查询输出时,可以先通过【数据集管理】进行数据集及数据表的查询,确认表字段及内容,以实现快速准确实现数据输出的目的。数据集管理的两个主要功能就是查看表信息和查看表数据。

51WORLD WDP

表信息:

表信息中包括字段名称、字段类型以及字段注释。

51WORLD WDP

表数据:

表数据则是在web页面中呈现数据库表中的数据内容。

51WORLD WDP

2.2.2 数据发布

2.2.2.1 数据库API管理

当开发者需要从数据源中提取、应用数据,可以通过【数据库API管理】以SQL语句的方式获取数据API输出,实现灵活取数的目的。

51WORLD WDP

新增:

通过选择和输入的方式,逐条配置数据源名称、主题、接口标识、访问路径、描述、状态,并按照业务需求写入SQL脚本,完成后运行脚本可查看响应结果,保存及完成API创建。

51WORLD WDP

编辑:

点击已创建的数据API操作栏中的【编辑】,即可对需要改动的内容进行修改,保存后即更新。

51WORLD WDP

删除:

点击已创建的数据API操作栏中的【删除】,即可该数据API。

51WORLD WDP

数据API完成之后,可以用于多方向的数据输出,例如可用在面板图表配置中,进行图表的数据接入,而得到动态的数据可视呈现。

2.2.2.2 静态文件API管理

当开发者需要从数据文件(静态数据)中提取、应用数据,可以通过【静态文件API管理】上传Excel文件获取数据API输出,快速接入取数的目的。

51WORLD WDP

新增:

通过选择和输入的方式,逐条配置接口标识、描述、状态,并按需要上传Excel文件,保存及完成API创建。

51WORLD WDP

编辑:

点击已创建的数据API操作栏中的【编辑】,即可对需要改动的内容进行修改,保存后即更新。

51WORLD WDP

删除:

点击已创建的数据API操作栏中的【删除】,即可该数据API。

51WORLD WDP

数据API完成之后,可以用于多方向的数据输出,例如可用在面板图表配置中,进行图表的数据接入,而得到动态的数据可视呈现。

2.2.3 视频相关

2.2.3.1 视频配置

开发者可以通过此节点接入视频服务,并进行接入配置管理。

51WORLD WDP

新增:

通过选择和输入的方式,逐条配置网关服务器IP、端口号、appKey、appSecret、取流协议、码流类型、传输协议、表示扩展内容,保存及完成API创建。

51WORLD WDP

编辑:

点击已创建的数据API操作栏中的【编辑】,即可对需要改动的内容进行修改,保存后即更新。

51WORLD WDP

删除:

点击已创建的数据API操作栏中的【删除】,即可该数据API。

51WORLD WDP

第三章 可视化面板搭建工具

可视化面板搭建工具即页面管理模块,是帮助开发者快速搭建大屏面板的工具,通过在已预制的多类型图表中进行选择接入,实现动态或静态的数据图表化呈现,并支持可视化的页面编辑,以拖拽摆布的方式在画布中布局图表组件及其他图形、文字、图片等组件,便捷的构建可视化数据面板,再通过组件元素绑定SuperAPI标准方法及页面跳转、组件显隐等交互事件,输出样式美观、场景可动性强的数字孪生运营管理应用。其能力主要由两部分实现:图表管理(配置图表数据)、面板管理(搭建面板)。

动态数据:可由工具链上游产品进行API输出,也可由第三方输出源进行符合数据结构要求的API输出。经由API接入,可在图表中呈现实时数据。

静态数据:可在可视化面板搭建工具中配置图表数据时,进行静态数据的设置,可直接在图表中呈现演示数据。

3.2.1 面板管理

面板是与场景并列的可视化图层,其集合了包括图表、文本、图片及装饰图形等元素,作为WEB应用的交互入口,为数字孪生可视化运管应用提供数据可视化展示及场景互动的交互通道。

我的面板:

当开发者(产品经理、设计师)需要根据业务需求进行新增编辑或者管理面板时,可以在【面板管理】中进行新增配置或编辑删除等操作,实现完成面板搭建、管理的目的。

51WORLD WDP

公开面板:

当开发者(产品经理、设计师)需要参考已完善的面板Demo,可以在公开面板中预览或者保存已有面板。

51WORLD WDP

共享面板:

当开发者(产品经理、设计师)需要在一定组织圈子内共享协作面板内容时,可以在我的面板中单击面板下方的分享按钮来将面板分享到共享面板中。

51WORLD WDP

3.2.2.1 新建面板

在我的面板中,目标项目下,进行面板的新增操作,填写面板的“面板名称”及“面板分辨率”。

51WORLD WDP

完成创建后,即进入所创建面板,进行面板编辑。

进入面板后会弹出操作提示,或点击右上角的帮助以打开操作提示。

51WORLD WDP

点击知道了,进入画布。

51WORLD WDP

A. 顶部功能栏

顶部功能栏中主要有几个功能:

● WDT图标:退出当前编辑,返回面板列表界面(注意保存)。

51WORLD WDP

● 页面管理:进行多页面管理,如新增空页面或者复制已有页面,多页面间可以进行跳转操作。

● 预览:编辑面板的过程中,可以进行预览,来查看页面效果。

● 保存面板:保存当前面板内容。

B. 左侧菜单栏

左侧菜单栏作为编辑面板过程中的元素输出源,主要分为场景、模板、图标、图表、文本、组件六块内容。

● 场景:选择场景图片(云渲染画面加载受网络环境影响,可能需要15-60s,避免编辑面板过程等待时间过长,可用场景图片作为场景示意,快速搭配面板)置入空白画布中。

51WORLD WDP

● 模板:选择空白模板或已有模板,包括智慧园区、智慧城市、智慧水务、智慧工厂,智慧交通共五个类别。每个类别下有具体细分方向可供选择。WDT通过公司在这些行业的深耕总结出来这些模板。通过模板选择可以达到快速搭建自己想要的面板的目的。

51WORLD WDP

● 图标:选择图形拖拽进入画布,进行页面装饰,以搭配场景、数据图表或其他图形。图形范围包括了标签、窗口、图标等内容。此外还可以自定义上传元素组件(建议上传png格式图片),将从其他专业作图软件输出的切图直接应用在页面布局中。

51WORLD WDP

● 图表:从图表库中选择所需图表模板,拖入面板之中(拖入面板的图表已有初始数值)。并且在配置完成后可以点击“存为常用”按钮来保存在收藏中,后续可以继续沿用。可以根据想要通过图表来展示的内容来选择图表的样式。

51WORLD WDP

● 文本:选择对应样式的文本置于画布中,进行文字说明或描述,丰富面板内容。支持富文本功能。

51WORLD WDP

● 组件:从组件库中选择需要的组件拖入画布中以使用功能性组件补全页面功能,包括表格组件、导航组件、按钮组件等。通过不同组件的搭配可以达到丰富面板内容和功能的目的。

51WORLD WDP

C. 中央画布

画布是编辑面板过程中最重要的工作区,是进行拖拽操作,实现“所见即所得”编辑操作的关键所在。

画布快捷键:

● 平移画布:空格键+按住鼠标左键

● 缩放画布:shift键+鼠标滚轮

● 设置分组:对元素组件右键

● 元素复制:CTRL+C

● 元素粘贴:CTRL+V

● 元素全选:CTRL+A

● 元素多选:CTRL+单击鼠标左键

● 撤回:CTRL+Z

● 前进:CTRL+Y

D. 右侧编辑栏

右侧编辑栏是编辑面板过程中出了画布之外的主要工作区,执行各组件的深层操作,包括更改显示内容、精准调控位置大小、图表样式深度编辑、场景资源配置、组件层级管理和组件互动事件配置等。这些操作拆分为三类功能:

● 组件配置:根据所选的不同组件,其配置项略有不同。

   a. 场景

   所选物为场景时可以进行场景配置,配置云渲染资源所需的服务地址及路径、账号、密码(在项目交付时给出),配置完成后,可在预览或下载使用状态下接入云渲染场景。

51WORLD WDP

   b. 图标

   所选物为图形时可以进行图形的基础配置,包括初始显隐、透明度,及宽高的具体数值、坐标的具体数值。

51WORLD WDP

   c. 图表

   所选物为图表时可以进行图表的配色、样式、基础属性的配置。

   目前可选图表的类型有条形图,折线图,饼图,和其他特殊类型图。用户可以根据自己想要通过图表展示内容的目的来选择图表的类型。

   ●条形图:统计图资料分析中最常用的图形。主要特点有:

    1、能够使人们一眼看出各个数据的大小。

    2、易于比较数据之间的差别。

   ●折线图:折线图用于显示随时间或有序类别而变化的趋势,可能显示数据点以表示单个数据值,也可能不显示这些数据点。在有很多数据点并且它们的显示顺序很重要时,折线图尤其有用。如果拥有的数值标签多于十个,请改用散点图。

   ●饼图:仅排列在工作表的一列或一行中的数据可以绘制到饼图中。饼图显示一个数据系列 (数据系列:在图表中绘制的相关数据点,这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。)中各项的大小与各项总和的比例。

   ●瀑布图:用绝对值与相对值结合的方式,适用于表达数个特定数值之间的数量变化关系。当用户想表达两个数据点之间数量的演变过程时,即可使用瀑布图。

   ●漏斗图:可以直观的看出每一层级的转化比例。

51WORLD WDP

基础配置:可通过配置图表的高和宽改变图表的大小,可通过配置图表的X轴坐标和Y轴坐标来改变图表在面板中的位置。

51WORLD WDP

   图表样式配置:

     1.坐标网格:可调整表格内容距离容器的上下左右边距。

     2. X轴:可设置X轴上是否显示文字,并且显示文字的位置,文字样式等。X轴的分割线,坐标轴,轴刻度也可在此类目中配置。

     3.Y轴::可设置Y轴上是否显示文字,并且显示文字的位置,文字的样式等。X轴的分割线,坐标轴,轴刻度也可在此类目中配置。

     4.图例:也就是图表中的图案说明,可在此配置图例的显隐,方向,排版布局等。也可调整图例的文字样式,符号样式与间隔距离。

     5.系列:系列代表数据的组。可通过右上角的加号来添加。可在上方切换需要配置的系列。可在系列配置中设置组的元素样式,图形样式,标线样式等。

     6.提示框组件:可设置提示框的显隐和文字样式。

   d. 文本

   所选物为文本时可以进行文本配置和基础配置。可通过API实时更新文本内容并且展示在面板上。

   文本:设置文本内容、对齐方式、文本颜色、字体大小、行高和文本的字体。目前支持选择able、Arvo、Barlow、butler、OPPOSans、阿里巴巴普惠体、方正仿宋简体、方正黑体简体、方正楷体简体、方正书简宋、庞门正道标题体、锐字真言体、思源黑体、思源宋体优设标题黑、卓健橄榄简体共15种字体。

   富文本:多样化文本样式支持。

51WORLD WDP

   e. 组件

   所选物为组件时可以进行文本配置和高级组件配置。

   文本:设置文本内容、对齐方式、文本颜色、字体大小、行高和文本的字体。

   组件配置:可以设置颜色、文字内容、边框样式、间距等。

51WORLD WDP

● 数据:

 a. 数据接口

   组件的数据接口中展示了组件所包含的数据字段、对应的映射以及数据响应状态。

   字段:展示组件的默认字段。

   映射:当用户所配置的数据源中的字段与组件的默认字段名称不一致时,可以在映射输入框中,输入用户数据源中的字段,将这些字段映射到组件对应的字段上。无需修改数据源中的字段,就可以实现数据的实时匹配。

   状态:可实时展示组件的数据响应状态,响应成功时显示为匹配成功。

 b. 自动更新请求

   选中自动更新请求,可以设置动态轮询,还可以手动输入轮询的时间频次。清除后则不会自动更新,需要手动刷新页面,或通过蓝图编辑器和回调ID事件来触发请求更新数据。

 c. 配置数据源

   WDT的组件默认使用静态数据源并且带有初始数据。单击配置数据源,可在设置数据源页面修改数据源的类型和脚本

   配置静态数据源:点击配置数据源。从数据响应结果中复制代码到上侧编辑框中。修改字段值为自己巷一号展示的内容。

   配置动态数据源:在数据源中选择数据源类型为“API”。填入请求URL和请求方式。之后可以点击预览数据源返回结果来进行测试。

 数据过滤器:在配置数据源页面中,选中数据过滤器,启用数据过滤器功能。单击右侧的+,添加一个数据过滤器。在过滤器代码编辑框中,输入当前组件数据的过滤代码。最后单击测试,查看数据过滤效果。在添加数据过滤器旁边有“数据过滤器管理”按钮。在数据过滤器管理中可以查看目前已经配置好的数据过滤器,并切可以进行新增过滤器,编辑过滤器,搜索过滤器,删除过滤器的等操作。

 d. 数据响应结果

 实时展示了组件所使用的数据。当组件数据源发生变化时,数据响应结果会对应展示最新的数据。如果系统反应延迟,用户可以单击右侧的刷新数据图标,获取组件的最新数据。

● 图层:在元素列表中排列元素组件的层级顺序。

51WORLD WDP

3.2.2.2 编辑面板

当新增面板完成保存后,可以由面板列表进入编辑,操作与新增时无异。

3.2.2.3 删除面板

当面板需要删除时,可点击目标右上角的删除按钮,删除面板。

3.2.2.4 下载面板

完成面板的搭建之后,需要开始使用可视化应用进行运控管理,开发者可以在面板管理界面中点击对应项目下的下载按钮,进行面板下载。

下载完成,解压下载文件,按照路径“panel > 项目id”进入面板列表,选择所需的面板文件夹进入,打开命名为“panel”、文件类型为HTML的文件,即可由浏览器打开已搭建完成的可视化应用。

51WORLD WDP

51WORLD WDP

51WORLD WDP

51WORLD WDP

51WORLD WDP

第四章 用户权限管理工具

用户权限管理工具即账号管理模块,面向51City OS及工具链产品用户提供账号管理、权限管理服务,帮助使用者能够自主创建账号,并对账号(子账号)按需分配权限,做到业务边界清晰、管理简单。同时实现唯一账号(主账号)交付,减少交付及售后复杂度。

4.2.1 账号管理

面向开发者交付的主体账号可以登录开发者工具平台。此外,开发者还可以按实际试用需求在主账号中创建子账号,子账号的权限继承自主账号且受到主账号管理。

51WORLD WDP

● 新增:按需填入新账号的账号名(用于登录)、姓名、密码、邮箱以及勾选可见项目。

第五章 蓝图使用说明

蓝图功能是新推出事件配置功能,它是可视化的、全局的事件配置方式,包括页面交互、场景交互两层。

当完成页面布局后,可以从左上角“画布/蓝图”切换按钮进行切换,进入当前页面的蓝图模式,进行事件配置。(一页一蓝图)

在蓝图中,我们把元素、事件以及过程都抽象成了一个一个的节点,而蓝图的用法就是将每一个节点根据业务需求串联成事件流,得到可视化的、全局的事件流线网。

51WORLD WDP

1. 元素节点

元素节点为当前页面的所有元素内容,包括个体元素和组合元素,均可以以鼠标左键拖拉的方式布置到蓝图中。

a) 个体元素

由“动作”入口连入,以“事件”出口连出。“动作”内容包括:显示、隐藏、切换显示隐藏;“事件”内容包括:初始化完成、元素点击时。

b) 组合元素

由“动作”入口连入,组合元素没有设置事件触发,不能连出,可以由组合内的子元素作为事件触发连出接通节点。“动作”内容包括:显示、隐藏、切换显示隐藏。

2. 逻辑节点

a) 流程控制

① 多支路判断

用于配合上游的多出口组件(导航、下拉框、单选按钮、轮播图)使用,可以获取到不同的事件名,以向下配置不同的交互内容。

51WORLD WDP

② 定时器

用于在节点之间设置延时。

51WORLD WDP

设置延迟时间。

51WORLD WDP

③ 页面切换

用于进行页面间切换跳转。

51WORLD WDP

设置切换页面。

51WORLD WDP

④ 自定义支路判断

用于配合上游的场景监听节点(使用,可以获取到不同的事件ID,以向下配置不同的交互内容。在设置栏填写支路返回信息匹配值,如果返回的值与填写的值相等,那么向下游继续执行。

51WORLD WDP

⑤API数据接口

用于配置数据动态API接口开获取动态数据。在配置栏中填入API链接地址之后,可以测试接口返回数据情况。

51WORLD WDP

b) 场景节点

① SuperAPI标准事件

用于设置需要执行的SuperAPI事件,目前包括标准事件以及SpecialChanel。设置SuperAPI事件。

51WORLD WDP

②场景监听节点

用于与自定义支路判断结合,监听场景动作返回值,通过自定义支路判断,向下游继续执行的节点。可在设置中自行设置监听项。

51WORLD WDP

1. 拖动、缩放蓝图

左键按住空白处拖动即可拖动蓝图内容;鼠标滚轮可以直接缩放内容比例,可以利用缩放配合蓝图底格,实现节点的规整布局。

2. 编辑事件

点击连接线或者节点可以进行该事件的编辑,其中除了SuperAPI标准事件事件配置储存在节点之中外,其他的事件配置均在连线之中

3. 拖动、选中节点

鼠标左键点住节点title可以拖动节点;鼠标左键单击节点body可以选中节点;CTRL+左键可进行多选。

4. 删除节点

选中节点后按DEL可以删除节点。

5. 保存蓝图

通过右上角的保存面板可以同步保存画布以及蓝图。

6. 跨页面复制

选中节点后Ctrl+C与Ctrl+V可以跨页面复制逻辑节点。