Copilot 助力 DBD 设计

在设计 DBD 时,我们添加组件可能需要频繁地点击来完成添加组件、添加数据集、添加参数、组件基础设置和样式设置等。润乾推出 DBD 版的 Copilot,支持汉语指令助力完成这些动作,用语句完成一些操作流程,提高了设计的便利性。下面就来借助此功能制作一个 Dashboard。

要在页面创建组件,需要用新组件关键词,后面拼接字符串参数。除布局之外的组件都需要用这个语句来添加。

imagepng

例句:新组件"指标卡片 今日订单额 DataLogic(select T.sum(明细金额) summary from 订单明细 T where T.订单.签单日期 = '2012-11-10') fa-yen-sign"

新组件语句会帮助我们生成组件并按参数快速完成计算和配置。”指标卡片”代表生成的 组件类型,可用类型包括
‘网格’, ‘报表’(同网格),‘统计图’,‘参数’, ‘控件’(同参数),‘事件’, ‘指标卡片’
根据种类不同,生成组件的参数不同。先以指标卡片为例,语句参数用空格分为这几部分。

Part1,指标卡片–生成组件类型
Part2,今日订单额–组件命名
Part3,DataLogic(…)–指标卡片数据集名称或配置,不存在的数据集自动生成
Part4,fa-yen-sign–指标卡片图标。
首先 Part1 指定类型;组件都有名称,通过 Part2 为组件命名;指标卡片需要一个单值,Part3 可以为它指定已经配置的数据集,也可以用例句的方式数据源 (SQL/DQL) 的形式计算一个新数据集,指标卡片需要一个单值,约定字段为 summary,如例句计算即可;Part4 是指标卡片需要的图标,可以省略,后续在组件编辑器选择图标更为直观。

如图,用编辑器修改图标颜色和显示格式
imagepng
预览页面,组件效果如图:

imagepng
接下来我们在添加几个指标卡片,与第一个指标卡片同理

新组件"指标卡片 DAU DataLogic( select T.count(客户) summary from 订单 T where T.签单日期 = '2012-11-10') fa-user-clock"

为指标卡片设置文本,{{placeholder}} 是查询值占位符,查询结果值为 3,{{placeholder}} 用户即 3 用户。文本还有 javascript 表达式用法,这里也可以写作 javascript:‘{{placeholder}}’+‘用户’。

imagepng

新组件"指标卡片 MAU DataLogic( select T.count(客户) summary from 订单 T where T.签单日期 = '2012-11-10') fa-users"

新组件"指标卡片 被最多查看 DQL4Orders(SELECT TOP 1 T1.PRODUCTID.PRODUCTNAME summary, T1.SUM(SESSIONID.VIEWTIMELENGTH) TIMER FROM WEBSITE_EVENT T1 WHERE T1.EVENTTIME#YEARMONTH = '202311' AND EVENTTYPE = 'page_view' BY T1.PRODUCTID.PRODUCTNAME ORDER BY TIMER DESC) fa-eye"

imagepng

接下来做一个可以显示和隐藏的月客户明细报表,方便在 MAU 这里检查明细数据。

新组件"网格 月客户明细 DataLogic"

这个语句会创建一个网格组件,即网格报表。
Part1,网格–生成网格报表,也可以写“报表”
Part2,月客户明细–组件命名
Part3,DataLogic–报表的数据集名称或配置,不存在的数据集自动生成

imagepng
Part3 指定了 DataLogic 数据集,但是此时数据集配置并没有名称为 DataLogic 的数据集。因此程序自动查询了逻辑数据库配置,并找到了 DataLogic 库,以此为数据集配置给了这个报表。
按照需要拖拽字段,列出客户和订单明细金额。

imagepng

准备设置过滤。用汉语语句设置

参数"当月 11"

imagepng
参数是一个关键词,功能是设置一个全局参数的值,如果没有这个参数就新增并赋值。
imagepng
“当月”这个参数就被设置到了全局参数,可以用于数据集、网格报表、统计图。
设置月客户明细表中,订单. 签单日期. 月为当月。

imagepng
接下来增加 事件组件。事件组件目前是一个文本,可以绑定点击事件,控制组件的隐藏、显示,控制修改参数值。语句中的命名会同步应用到其文本配置。
用如下语句创建事件组件。

新组件"事件 显示详情"
新组件"事件 隐藏详情"

将两个组件叠放
imagepng

imagepng
用事件的特性,我们让他们有点击事件以显示和隐藏组件。做以下这些事:
配置点击【显示组件】时,显示【隐藏详情】,显示【月客户明细】,隐藏自身。
配置点击【隐藏组件】时,显示【显示详情】,隐藏【月客户明细】,隐藏自身。
初始隐藏【隐藏详情】【月客户明细】组件。
需要用到绑定事件和组件样式关键字。

imagepng
绑定是关键字,用来为事件模块设置事件。
以此句为例:

绑定"隐藏详情 点击 隐藏 隐藏详情,月客户明细"

Part1,隐藏详情–点击事件主体
Part2,点击–事件类型
Part3,隐藏–事件动作
Part4, 隐藏详情, 月客户明细–事件对象,用逗号分割,可以快速配置多个对象

绑定"隐藏详情 点击 显示 显示详情"

imagepng

绑定"显示详情 点击 显示 隐藏详情,月客户明细"
绑定"显示详情 点击 隐藏 显示详情"

imagepng

接下来设置月客户明细和隐藏详情初始不显示。注意这一步需要选中组件,可以通过点击或者选中组件 "月客户明细" 先进行选择,然后再用语句组件样式初始不显示来设置。

组件样式初始不显示

imagepng

imagepng

初始显示的参数是布尔类型常量。
组件样式初始显示,也就是让初始显示为 true。反之,初始显示就是设置为 false。我们分别选中月客户明细,并分别输入组件样式不初始显示。

imagepng

同样是常量的各种组件样式,还可以这样写语句,设置组件样式:
组件样式不初始显示, 边框颜色灰色, 显示标题

imagepng

对隐藏详情组件也做这个操作,先选中,再配置

imagepng

imagepng

点击显示详情

imagepng

接下来我们试试制作两个统计图。

imagepng

新组件" 统计图 高净值客户贡献占比 DataLogic(SELECT TOP 10000 T1.订单.客户 客户 ,T1.商品.商品类别 商品类别 ,T1.明细金额 明细金额 FROM 订单明细 T1 WHERE ((T1.明细金额>=2000)) AND T1.订单.签单日期#年=${当年} AND T1.订单.签单日期#月=${当月})"

类似网格报表,统计图新组件也需要参数
Part1,统计图–组件类型
Part2,高净值贡献占比–组件命名
Part3,DataLogic(SELECT TOP 10000 T1. 订单. 客户 客户 ,T1. 商品. 商品类别 商品类别 ,T1. 明细金额 明细金额 FROM 订单明细 T1 WHERE ((T1. 明细金额 >=2000)) AND T1. 订单. 签单日期 #年 =${当年} AND T1. 订单. 签单日期 #月 =${当月})–数据集名称或配置,不存在的数据集自动生成

imagepng

这里 DQL 用宏连接了全局参数。拖拽后获得统计图结果

imagepng

同理再添加统计图

新组件"统计图 商品热点总览 DataLogic(SELECT 订单明细.商品.商品类别, 订单明细.商品.商品类别.商品类别名称, 订单明细.商品.商品名称,  订单明细.SUM(订单明细.明细金额) 金额 FROM 订单明细 BY 订单明细.商品.商品类别, 订单明细.商品.商品名称)"

imagepng

拖拽后字段后,这样两个统计图组件卡片就做好了。

布局
一些网格报表和统计图并不是独立的个体,我们希望可以让他们视觉上面有更紧密的联系。这时候可以把做好的组件用布局组件拼装在一起,作为同一个卡片出现,或者作为标签页出现在卡片中。
首先试试左右结构的布局。
制作一个网格和统计图,网格用来表示当前时间客户的级别,统计图用来表示随月份变化的客户级别和客户总数。

新组件"网格 网格1 DataLogic(SELECT T1.签单日期#月 月份,T1.客户.VIP级别含空 级别,T1.客户 FROM 订单  T1 WHERE T1.签单日期#年=${当年} AND T1.签单日期#月=${当月})"
新组件"统计图 统计图1 DataLogic(SELECT T1.签单日期#月 月份,T1.客户.VIP级别含空 级别,T1.客户 FROM 订单  T1 WHERE T1.签单日期#年=${当年})"

imagepng

imagepng

imagepng

左右布局"用户级别追踪 网格1 统计图1"

左右布局关键字也可以简写成左右
Part1,用户级别追踪–左右布局的名称,选择一个左右布局,如果没有的话就自动新建一个
Part2,网格 1–左侧组件
Part3,统计图 1–右侧组件
当前是没有这个布局名称的,所以它被新建出来

imagepng

如果单独写:左右 "用户级别追踪",只新建空白的左右布局,如图:
imagepng
后续仍然可以用上面例句把网格 1 和统计图 1 放进去。

如果已经存在这个布局,并且布局内有内容,原有的内容不会被删除,而是释放到布局外,解除布局关系。删除布局时,其中的内容会被询问后删除,可以选择不删除而是仅解除布局关系。

拖拽调整布局组件大小和左右排版

imagepng
预览

imagepng
上下布局同理,后面也会提到,这里不重复演示。
下面看看标签布局。
准备几个图表,做好命名。

imagepng

imagepng

新组件"网格 月订单汇总 DataLogic"
新组件"统计图 金额同比 DataLogic(SELECT T1.sum(明细金额) sum_,T1.avg(明细金额) avg_,T1.count(T1.订单) count_ from 订单明细 T1 by T1.订单.签单日期#年,T1.订单.签单日期#月 having T1.订单.签单日期#月=${当月} order by T1.订单.签单日期#年)"
新组件"统计图 平均金额同比 DataLogic12"

这里第三句复用下第二句创建的数据集 DataLogic12。拖拽后我们得到一个网格和两个统计图。
然后我们用标签布局把他们串起来。
标签布局也可以写成标签

标签"当月汇总 月订单汇总,金额同比,平均金额同比"

Part1,当月汇总–标签布局的名称,选择一个标签布局,如果没有的话就自动新建一个
Part2,月订单汇总, 金额同比, 平均金额同比–需要替换到标签布局中的组件,用逗号分割,可以同时写多个组件
标签语句总是先清空标签布局内容,再新建标签页让参数设置的组件插入进去。如果存在旧的标签内容,原有的内容不会被删除,而是释放到布局外,解除布局关系。删除布局时,其中的内容会被询问后删除,可以选择不删除而是仅解除布局关系。

imagepng

imagepng

控件和全局参数联动
例句 1:

新组件"控件 商品类别控件 单选 商品类别 DataLogic 商品.商品类别.商品类别名称"

控件 是跟参数关联的输入功能型组件,可用的控件类型包括:
1,编辑框,也可以写为输入框,文本框等
2,日期,是日历
3,日期时间,是带时间的日历
4,单选,是数据集字段值集合下拉列表
5,多选,是数据集字段值集合下拉列表(多选)
6,关联单选,是能够以其他单选多选控件的字段和字段值为过滤目标的单选,同样是数据集字段值集合下拉列表
7,微调器,是有范围和步长限制的数值
8,滑块,是有范围和步长限制的数值

那么例句,新组件 " 控件 商品类别控件 单选……就是以商城单选下拉列表为目标的语句
Part1,控件–组件类型,控件也可以写成参数
Part2,商品类别控件–组件命名
Part3,单选–控件类型
Part4,商品类别–关联全局参数,未来控件值和关联的全局参数值会同步改变;如果全局参数不存在,则自动生成
Part5,DataLogic–数据集名称或者配置,不存在的数据集自动生成
Part6,商品. 商品类别. 商品类别名称–字段

例句 1 是要创建一个单选下拉列表,其变化绑定上“商品类别”全局参数,其取值是以数据集 DataLogic 为数据集,字段商品. 商品类别. 商品类别名称为值的集合。

imagepng

上述 Part4 之前的语句参数构成都是固定的,而 Part4 和之后的语句参数,是根据控件类型需要而来的,不同的控件会有不同,包括数量上可能也会不同。
比如要创建一个滑块,如 dbd 编辑器所展示

imagepng

可见需要关联全局参数,另外还要提供五个其他的数据。
例句 2,

新组件"控件 某控件 滑块 x 0 100 5 10 500"

创建一个滑块控件组件,组件为某控件,绑定全局参数 x,滑块最小值 0,最大值 100,滑动步长 1,显示间隔值为 10,宽度定义 500。

imagepng

回到例句 1,创建的商品类别控件将为我们所用。他绑定的全局参数“商品类别”也被自动创建出来,初值一般是 0,我们可以用参数 "商品类别 饮料" 为他赋值。

imagepng

imagepng

新组件"控件 商品名称控件 关联单选 商品名称 DataLogic 商品.商品名称 商品类别控件"

这与单选控件类似,但不同的是,关联单选控件还需要指定绑定的关联下拉,最后一部分参数指定了关联“商品类别控件”,前面说过商品类别控件值是 DataLogic 库商品. 商品类别. 商品类别名称,那么这个关联单选就会携带商品类别名称值进行过滤得到商品名称列表。
imagepng

imagepng
控件被创建的同时,商品名称这个全局参数也被创建出来。为它赋值。

参数"商品名称 苹果汁"  

之后我们又为商品名称制作了”商品销售和库存”网格组件,过程不赘述,重点是我们为他配置了过滤

imagepng

imagepng

左右"左右结构1 商品类别控件 商品名称控件"
上下"商品查询 左右结构1 商品销售和库存"

imagepng

imagepng

最后是整体效果

imagepng

imagepng

imagepng

imagepng

示例:
example.zip