在前两讲中,最基础的实体类表单建模已经完成,接下来,我们可以在它们的基础上进行一些扩展,使系统的功能更加全面,对用户更友好。比如,对于属性复杂、信息量很大的设备类来说,只是简单的文字浏览表单无法满足用户的需要,用户无法通过设备位置信息中存储的一组数字来理解设备所在的位置。因此,我们利用DWF提供的可视化控件定制设备信息的看板,涉及到的可视化控件有:本章节以表单建模入门(一)和表单建模入门(二)为基础,使系统的功能更加全面,对用户更友好。比如,对于属性复杂、信息量很大的设备类来说,只是简单的文字浏览表单无法满足用户的需要,用户无法通过设备位置信息中存储的一组数字来理解设备所在的位置。因此,我们利用DWF提供的可视化控件定制设备信息的看板,涉及到的可视化控件有:
- 布局控件:拖拽池、拖拽块
- 单对象控件:动态参数框
- 可视化控件:动态地图、自定义可视化控件
本节还对外键引用类控件进行了介绍和总结。
...
设备地图
如下图所示,这是利用DWF提供的可视化控件-动态地图创建的表单,能够将存储在数据库中对象的一组数字用可视化的方式显示出来。
图-设备地图
...
(一)可视化控件-动态地图
动态地图的使用方法如下:
1)进入实体类管理,为设备类(Asset)创建一个英文名为LandingMap表单,跳转至表单定制页面。
...
4)选择经纬度映射类型,DWF提供两种方式给建模者,建模者可以选一,本案例中使用单独映射。
经纬度映射类型 | 描述 |
---|---|
单独映射 | 目标类上一个用于存储位置经度的属性映射到地图控件的经度,另一个用于存储位置纬度属性映射到地图的纬度。用数字类型属性记录位置经度、纬度。 图-动态地图-单独映射属性设置 |
字符串映射 | 目标类上一个用于描述位置坐标的属性映射到地图控件的经纬度,例如“114.33,32.07”。用字符串类型属性来记录位置的经纬度。 |
5)接下来设置图标。图标的设置也有两种方式,可以选择任意一方式,也可以根据业务需要同时选择。例如:用一个“设备图片asseImg”属性存储图片地址,图片显示在设备地图上。或根据设备状态assetState的属性值映射成图标显示在设备地图上。
图标设置 | 描述 |
---|---|
坐标点展示图标 | 将目标类上用于记录图片地址的属性映射到地图控件上,叫做图标映射。图标地址用字符串类型的属性,例如“https://s2.ax1x.com/2019/08/26/mfw3Ae.png“。 当用户设备类对象的图标属性值不为空时,地图控件会根据属性值提供的图片地址映射到地图对象上。 当目标类上的图标属性值为空时,DWF提供了以下3种图标地址源: a.默认图标地址:当图标地址属性为空值时,且未映射任何图标地址源时,DWF会默提供一个蓝色的图标用于显示对象在地图的位置。 b.图片库:选择图片地址来源为图片库。通过选择图片库的图片实现图标地址映射。 c.自定义:用户通过向自定义图片地址源输入框某一的网络图片地址,实现图标地址映射。 图-动态地图图标设置 |
坐标点展示角标 | 另一种是通过属性取值映射的方法,叫做角标映射。例如设备类上有一个“设备状态assetState”的属性,该属性对应的值仅“已创建”、“维修中”、“已报废”三个。那么就存在这样的业务:根据设备状态的不同在地图上显示不同的图标。使用步骤如下: a.在角标属性处绑定需要映射的属性,本次案例中绑定“设备类型assetState”; b.点击图标属性映射表下输入框,弹出图标设置弹窗。角标映射方式为先输入需要映射的“属性值”,添加英文符号的“:”,再根据业务点击所选图标的按钮。图标映射格式为——属性值:点选图标按钮,例如:维修中:md-remove-circle。 图-动态地图属性映射图标设置 |
6)设置好对象在地图上映射的图标后,还需要调整图标的大小。在样式设置区,根据实际情况调整图标的高度、宽度。系统默认设置为30*30,单位为px。因为本次案例我们选用的网络图片是50*50的,所以这里将图标高度、宽度分别调整为50px。
...
信息 | ||
---|---|---|
| ||
整体高度是指整个控件的高度,限制了地图在应用端的展示面积; 地图高度是指动态地图控件内置地图的高度,内置地图的高度可以大于控件高度,当内置地图高度大于控件高度时,控件会出现滚动条以便用户查看地图上的所有对象。 |
...
设备看板
上面为大家演示了如何用可视化控件展示设备在地图上的地理位置。如果我们想以看板的形式来显示更多的信息,这时候需要组合其他可视化控件及单对象控件。本案例设备看板设计如下图。
...
接下来将重点为大家介绍布局控件-拖拽池/拖拽块,单对象控件-动态参数框,可视化控件的使用。
...
(一)布局控件-拖拽池/拖拽块
拖拽池/拖拽块是一体的,需要配合使用。拖拽池/拖拽块在布局设计时更灵活。下面讲解具体使用方法:
...
- 可伸缩:默认为可伸缩。拖拽块右下角有一个折角,鼠标点击该区域可以调整拖拽块的大小,且应用端也可以调整拖拽块的大小。当关闭可伸缩功能后,拖拽块右下角折角消失,拖拽块在建模端、应用端只能移动位置,不能改变大小。
- 冻结:默认为非冻结状态。如果希望拖拽块不能移动,可以开启冻结功能。
- 带标题:默认不带标题。开启标题后,可以设置拖拽块的标签,效果同分组框。
- 适应内容:默认不适应内容,可以通过手动调整适应拖拽块内的控件,也可以开启适应内容功能,自动适应拖拽块内的控件布局。
- 背景:布局内控件均支持设置布局的背景,默认两种方式,一是自定义输入图片的网络地址;二是通过选择图片库的图片设置。
图-拖拽块属性设置
...
(二)单对象控件-动态参数
为了让用户能够更直观、清晰看到动态变化的数据,DWF提供动态数字标签“动态参数”来实现这类业务需求。下面介绍动态参数的使用:
...
8)开启动态响应:默认关闭。如果想要该对象的数据变化时,使该标签的数字能及时刷新,需要开启动态响应开关。
图-动态参数标签属性设置
...
(三)编码扩展-Echart
除了提供的可视化控件外,用户还可以根据业务需要,自己定义一个可视化控件。本讲将简单介绍编码扩展中的Echarts控件的使用。
...
代码块 | ||||
---|---|---|---|---|
| ||||
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; |
...
(四)设备看板和数据结合
根据上文建模,我们完成了单个设备看板表单的创建。在查看设备列表时,我们需要选中一条数据,就能查看这个设备看板,这就需要用到我们之前提到的按钮。建模步骤如下:
...
3)保存表单,即可完成在设备列表处查看点选设备的看板信息。
图-查看设备面板操作编辑框
...
设备卡片
在前面的讲解中,用于多个对象信息的展示我们介绍了表格。除了表格还可以使用卡片形式的展示方式。首先看下本次案例中我们利用卡片控件设计的表单如下图。
...
对于这类用同一表单模版显示多个对象的形式,我们可以用卡片控件来实现。卡片控件是引用当前目标类或者其他类上的表单,以单个或者多个卡片的形式展示引用类对象的信息。
...
(一)单对象控件-文本标签
正如我们提到的卡片控件的定义,结合案例,明确我们需要创建一个显示单个设备卡片的表单,如下图。这里我们将介绍新的控件-文本标签。标签是将对象存储在数据库中的数据展示到页面的控件,没有属性类型限制,时间、数字、字符串类型均可显示。下面为大将讲解单个设备卡片创建及标签的使用。
...
4)需要提出的是,如果文本标签绑定的属性是时间类型的属性,标签属性区会多出一个设置项用于设置时间格式,例如y-M-D h:m:s。
图-文本标签属性设置
...
(二)多对象控件-卡片(多对象展示)
上面为大家介绍了如何设计单个的设备卡片,现在为大将讲解卡片控件的使用:
...
8)多对象卡片每行显示3张卡片,如果想调整每行显示的卡片个数,可以在属性编辑框-样式处设置卡片的宽度。
图-卡片属性设置
图-卡片样式设置
...
单个工单信息维护
在之前的讲解中,为大家介绍如如何维护零部件信息、零部件列表、设备信息和设备列表。结合实际的业务场景,设备发生故障时,需要确定发生故障的设备是那一台,并且要定位该设备上发生故障的部位。这时候需要用一个工单类来记录故障设备和故障部位。首先看下本次案例中关于为维护单个工单设计的表单,见下图。
...
5)接下来将日期框、选择框、文本框拖入对应的布局内,并且绑定上图所示的属性;
6)其他控件的使用将在下文中讲解。
...
(一)外键引用控件-选择框
选择框控件是一个外键引用类控件,在DWF中,”全局唯一标签oid“属性可以保证对象的唯一性,所以我们在前面工单建模时,创建了属性为UUID的“故障设备assetOid”属性,用于存储设备对象的“全局唯一标识oid”值。接下来具体讲解对象选择框的使用:
...
10)添加过滤条件,可以将下拉框显示的数据进行过滤。
图-对象选择属性设置
...
(二)外键引用控件-对象标签
对象标签是另一个外键引用类控件。上一讲为大家介绍了如何使用对象选择框。除了通过下拉列表形式展示数据,我们还希望看到引用类更多信息。这种情况,我们可以使用对象标签来替对象选择框。接下来讲解对象标签的具体使用方法:
...
8)如果开启”多选“开关时,还可以实现选中多个对象。
9)可进行属性联动赋值定义。
图-对象标签属性设置
...
(三)模型点选器-组织用户
在培训的讲义中,我们为大家将讲解了如何在组织模型处创建用户和用户组。接下来为大家介绍如何利用模型点选控件-组织用户点选器将模型中数据和应用结合起来使用。下面是组织用户点选器的使用步骤:
...
5)指定为用户组时,如果没有指定用户组,点击组织用户点选器时会下拉显示所有的用户,也可以指定显示某一个用户组下的用户。
图-组织用户点选器属性设置
...
外键引用类控件
外键引用类控件可以解决不同实体类之间数据的引用问题,可以通过引用类来选择引用类属性,例如实现在实体类A下面的表单根据实体类B的oid 来访问实体类B的数据,通过在浏览字段中选择应用类的属性,实现对引用类B的属性的浏览,在本节的4.1和4.2中介绍了对象选择框和对象标签在设备管理案例中的外键应用类控件的使用。DWF单对象控件中有4个外键引用类控件:
...
信息 | ||
---|---|---|
| ||
对象选择框和对象标签都是外键引用类控件,他们的不同之处在于:
|
...
数据跨类应用
在定制表单时一般是在某个类下创建表单,但DWF同样可以实现表单中数据跨类的使用,实现途径如下:
- 单对象控件中具有“数据字典”的4个控件(单选框、复选框、选择框、对象标签),通过开启“数据字典”可以实现数据跨类应用
- 多对象的表格控件通过属性“列定制面板”中的引用类可以实现数据跨类应用
- 可视化控件中的“动态数字”控件,可以通过选择“目标类”实现数据跨类应用
...
小结
设备地图 LandingMap
- 可视化控件
- 动态地图:单独映射、字符串映射、图标、角标属性
...
本节还对外键引用类控件进行了介绍和总结,外键应用类控件有4个:单选框、复选框、选择框、对象标签。
总结了表单中数据跨类应用的3类情况。
6.附件
...