页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

如下图所示,这是利用DWF提供的可视化控件-动态地图创建的表单,能够将存储在数据库中对象的一组数字用可视化的方式显示出来。

Image RemovedImage Added

图-设备地图

1.1 可视化控件-动态地图

...

经纬度映射类型描述
单独映射

目标类上一个用于存储位置经度的属性映射到地图控件的经度,另一个用于存储位置纬度属性映射到地图的纬度。用数字类型属性记录位置经度、纬度。

Image RemovedImage Added

图-动态地图-单独映射属性设置

字符串映射目标类上一个用于描述位置坐标的属性映射到地图控件的经纬度,例如“114.33,32.07”。用字符串类型属性来记录位置的经纬度。

...

图标设置描述
坐标点展示图标

将目标类上用于记录图片地址的属性映射到地图控件上,叫做图标映射。图标地址用字符串类型的属性,例如“https://s2.ax1x.com/2019/08/26/mfw3Ae.png“。

当用户设备类对象的图标属性值不为空时,地图控件会根据属性值提供的图片地址映射到地图对象上。

当目标类上的图标属性值为空时,DWF提供了以下3种图标地址源:

a.默认图标地址:当图标地址属性为空值时,且未映射任何图标地址源时,DWF会默提供一个蓝色的图标用于显示对象在地图的位置。

b.图片库:选择图片地址来源为图片库。通过选择图片库的图片实现图标地址映射。

c.自定义:用户通过向自定义图片地址源输入框某一的网络图片地址,实现图标地址映射。

Image RemovedImage Added

图-动态地图图标设置

坐标点展示角标

另一种是通过属性取值映射的方法,叫做角标映射。例如设备类上有一个“设备状态assetState”的属性,该属性对应的值仅“已创建”、“维修中”、“已报废”三个。那么就存在这样的业务:根据设备状态的不同在地图上显示不同的图标。使用步骤如下:

a.在角标属性处绑定需要映射的属性,本次案例中绑定“设备类型assetState”;

b.点击图标属性映射表下输入框,弹出图标设置弹窗。角标映射方式为先输入需要映射的“属性值”,添加英文符号的“:”,再根据业务点击所选图标的按钮。图标映射格式为——属性值:点选图标按钮,例如:维修中:md-remove-circle。

Image RemovedImage Added

图-动态地图属性映射图标设置

6)设置好对象在地图上映射的图标后,还需要调整图标的大小。在样式设置区,根据实际情况调整图标的高度、宽度。系统默认设置为30*30,单位为px。因为本次案例我们选用的网络图片是50*50的,所以这里将图标高度、宽度分别调整为50px。

Image RemovedImage Added

图-动态地图样式设置

7)除了对图标设置外,还可以对动态地图设置整体高度和地图高度。

...

上面为大家演示了如何用可视化控件展示设备在地图上的地理位置。如果我们想以看板的形式来显示更多的信息,这时候需要组合其他可视化控件及单对象控件。本案例设备看板设计如下图。

Image RemovedImage Added

图-设备看板

接下来将重点为大家介绍布局控件-拖拽池/拖拽块,单对象控件-动态参数框,可视化控件的使用。

...

  • 可伸缩:默认为可伸缩。拖拽块右下角有一个折角,鼠标点击该区域可以调整拖拽块的大小,且应用端也可以调整拖拽块的大小。当关闭可伸缩功能后,拖拽块右下角折角消失,拖拽块在建模端、应用端只能移动位置,不能改变大小。
  • 冻结:默认为非冻结状态。如果希望拖拽块不能移动,可以开启冻结功能。
  • 带标题:默认不带标题。开启标题后,可以设置拖拽块的标签,效果同分组框。
  • 适应内容:默认不适应内容,可以通过手动调整适应拖拽块内的控件,也可以开启适应内容功能,自动适应拖拽块内的控件布局。
  • 背景:布局内控件均支持设置布局的背景,默认两种方式,一是自定义输入图片的网络地址;二是通过选择图片库的图片设置。

Image RemovedImage Added

图-拖拽块属性设置

2.2 单对象控件-动态数字标签

...

8)开启动态响应:默认关闭。如果想要该对象的数据变化时,使该标签的数字能及时刷新,需要开启动态响应开关。

Image RemovedImage Added

图-动态数字标签属性设置

2.3 可视化控件-自定义可视化

...

3)保存表单,即可完成在设备列表处查看点选设备的看板信息。

Image RemovedImage Added

图-查看设备面板操作编辑框

3.设备卡片

...

正如我们提到的卡片控件的定义,结合案例,明确我们需要创建一个显示单个设备卡片的表单,如下图。这里我们将介绍新的控件-标签。标签是将对象存储在数据库中的数据展示到页面的控件,没有属性类型限制,时间、数字、字符串类型均可显示。下面为大将讲解单个设备卡片创建及标签的使用。

Image RemovedImage Added

图-设备卡片(单对象)

单个设备卡片的建模步骤:

...

4)需要提出的是,如果标签绑定的属性是时间类型的属性,标签属性区会多出一个设置项用于设置时间格式,例如y-M-D h:m:s。

Image RemovedImage Added

图-标签属性设置

3.2 多对象控件-卡片(多对象展示)

...

7)多对象卡片默认显示目标类的全部数据,也可以在过滤条件处设置过滤条件,展示部分卡片;

8)点击“更新预览”按钮,可以预览设备类对象以多对象卡片展示的内容;

9)多对象卡片每行显示3张卡片,如果想调整每行显示的卡片个数,可以在属性编辑框8)多对象卡片每行显示3张卡片,如果想调整每行显示的卡片个数,可以在属性编辑框-样式处设置卡片的宽度。

Image RemovedImage Added

图-卡片属性设置

Image RemovedImage Added

图-卡片样式设置

4.单个工单信息维护

在之前的讲解中,为大家介绍如如何维护零部件信息、零部件列表、设备信息和设备列表。结合实际的业务场景,设备发生故障时,需要确定发生故障的设备是那一台,并且要定位该设备上发生故障的部位。这时候需要用一个工单类来记录故障设备和故障部位。首先看下本次案例中关于为维护单个工单设计的表单,见下图。

Image Removed


图-进阶版工单信息维护表单

分析上图,除了已经提到过的布局控件和基础控件,多了一些没有使用过的控件。工单需要记录故障设备(设备类对象)和故障部位(零部件对象),所以引入了外键引用类控件——对象选择框和单对象弹窗。在创建工单时,往往需要明确负责人是组织中的具体某个人,这时候我们引入模型点选类控件——组织用户点选器来。首先通过已经熟悉的控件进行单对象表单——工单的创建,建模步骤如下:

...

10)添加过滤条件,可以将下拉框显示的数据进行过滤。

Image RemovedImage Added

图-对象选择属性设置

11)属性联动赋值:当定义了引用类的回填字段后,且“多选”开关关闭时,属性定义区就会出现“属性联动赋值”选项,点击进入后就会出现属性联动赋值定义界面,通过定义可以实现将引用类的属性回填到本表单所定义的类的相关属性上,从而实现属性联动赋值。11)属性联动赋值:当定义了引用类的回填字段后,且“多选”开关关闭时,属性定义区就会出现“属性联动赋值”选项,点击进入后就会出现属性联动赋值定义界面,通过定义可以实现将引用类的属性回填到本表单所定义的类的相关属性上,从而实现属性联动赋值。

  • 关闭“多选”开关;
  • 弹出“属性联动赋值;
  • 将引用类的属性与表单定义的属性进行联动绑定。

4.2 外键引用控件-对象标签

对象标签是另一个外键引用类控件。上一讲为大家介绍了如何使用对象选择框。除了通过下拉列表形式展示数据,我们还希望看到引用类更多信息。这种情况,我们可以使用对象标签来替对象选择框。接下来讲解对象标签的具体使用方法:

...

8)如果开启”多选“开关时,还可以实现选中多个对象。

9)可进行属性联动赋值定义。

Image RemovedImage Added

图-对象标签属性设置


信息
title对象选择与对象标签、对象弹窗控件的异同

对象选择和对象标签、对象弹窗都是3个外键引用类控件,且都可以选择多条数据对象的属性值和实现属性联动赋值,他们的不同之处在于:

  • 对象选择是通过下拉的方式进行数据选择,而对象标签是弹窗方式进行选择;
  • 对象选择的是“浏览字段”,而对象标签选择的是“浏览表单”;
  • 对象选择具有“是否开启远程搜索”的开关,而对象标签没有此开关。

特别说明的问题:

  • 对象选择和对象弹窗控件作用基本一致,都是以弹窗方式进行对象选择,建议选用对象标签,对象弹窗的保留主要是考虑老用户的兼容性问题。

...

5)指定为用户组时,如果没有指定用户组,点击组织用户点选器时会下拉显示所有的用户,也可以指定显示某一个用户组下的用户。

Image RemovedImage Added

图-组织用户点选器属性设置

5.小结

...

View file
name表单建模入门(三).zip
page表单建模入门(三)
spaceDWF
height250