图表

1. 业务场景

进入数据可视化后,默认处于图表列表页面,点击报表/数据大屏图标则可切换至对应列表;支持从模型获取数据后,过滤数据后创建可视化图表,维护的图表信息可以被报表、数据大屏、以及业务系统引用。

2. 操作流程

1)进入数据可视化,进入图表tab,维护分组信息;

2)在二级分组名称后点击“+”【添加图表】,对图表进行编辑设计;

3)创建完成后可以【编辑】图表;

4)图表完善后,可以点击【发布】图表,则图表此时可以被引用;

5)如果图表有更新,则可以点击【更新发布】,使业务系统引用对图表变为最新的图表信息;

6)如果图表数据不再可以公开使用,则需要通过【隐藏】功能将图表的引用权限收起,此时报表、数据大屏、前端业务系统均不可再引用该图表,但不影响已被引用的图表;

7)隐藏后可以【取消隐藏】,图表恢复隐藏前的状态和功能,可以被引用。

3. 操作流程图解

3.1 创建分组

1)操作流程:创建分组

2)操作路径:数据可视化-图表-创建分组

3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建图表

image.png

3.2 编辑分组名称

1)操作流程:选择分组-编辑分组名称

2)操作路径:数据可视化-图表-编辑分组名称

3)鼠标移动至需要修改的分组上,点击出现的「编辑图标」,可以修改分组名称,修改后分组名称实时更新

image.png

3.3 删除分组

1)操作流程:选择分组-删除分组

2)操作路径:数据可视化-图表-删除分组

3)鼠标移动至需要删除的分组上,当分组下无图表时出现「删除图标」,可以点击图标后删除分组,删除一级分组时对应所有的二级分组也会被删除,删除后消失,只有分组下没有图表的分组才能直接删除成功

image.png

3.4 创建图表

1)操作流程:选择二级分组-创建图表

2)操作路径:数据可视化-图表-二级分组-创建图表

3)鼠标移动至需要创建图表的二级分组上,出现「+」,点击图标后弹出“创建图表”弹窗,需要填写图表标题、模型、方法;

a图表标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复;

b模型:需要选择来源数据对应的模型;

c方法:选择模型后需要选择方法,方法是用来提取模型数据的逻辑;

4)选择成功后进入图表设计页面

image.png

3.5 编辑图表

1)操作流程:选择图表-编辑图表

2)操作路径:数据可视化-图表-二级分组-图表-编辑图表

3)只能编辑未发布或者已发布但没有被隐藏的图表,且存在三种编辑情况

a第一种:点击图表标题后的编辑图标,仅能编辑图表标题;

b第二种:点击图表中的图表标题、图表副标题、图表描述后的编辑图标,可以直接编辑图表标题、图表副标题、图表描述;

c第三种:点击【编辑】按钮,进入图表设计页面,带出已有的数据字段、样式、图表内容,编辑时的规则与创建时一致,编辑后可以点击保存进行更新,如果未保存直接返回,则编辑无效;

4)编辑后实时生效,图表信息保持展示最新效果

3.6 删除图表

1)操作流程:选择图表-删除图表

2)操作路径:数据可视化-图表-二级分组-图表-删除图表

3)未发布或者已发布但没有被隐藏的图表,并且没被前端或者报表引用,才展示图表菜单名称后的删除图标

4)删除后图表消失

3.7 复制

1)操作流程:选择图表-复制图表

2)操作路径:数据可视化-图表-二级分组-图表-复制图表

3)点击【复制】按钮,复制成功,名称为copy of 原图表标题,展示在原图表分组的最后一个

image.png

3.8 发布

1)操作流程:选择图表-发布图表

2)操作路径:数据可视化-图表-二级分组-图表-发布

3)选择单个未发布且没有被隐藏的图表,点击【发布】按钮,图表发布后可以被前端引用,图表状态变为已发布,展示最近发布时间;

4)如果图表发布后有更新内容,会展示的更新类型:更新图表信息/更新图表内容

3.9 查看最近一次发布的版本

1)操作流程:选择图表-查看最近一次发布的版本

2)操作路径:数据可视化-图表-二级分组-图表-查看最近一次发布的版本

3)当图表发布后有更新,在最近发布时间左侧展示【查看】,在最近发布时间下展示更新的类型,点击查看可以查看最近发布的版本image.png

3.10 更新发布

1)操作流程:选择图表-更新发布图表

2)操作路径:数据可视化-图表-二级分组-图表-更新发布图表

3)选择单个已发布且没有被隐藏的图表,并且该图表在上次发布后有所更新,可以点击【更新发布】按钮,将最新的图表内容发布至业务系统,业务系统引用的图表为最新内容;

4)如果更新了内容,但未点击更新发布,则前端业务系统查看的图表仍为最近发布的图表

3.11 隐藏

1)操作流程:选择图表-隐藏图表

2)操作路径:数据可视化-图表-二级分组-图表-隐藏图表

3)图表默认不隐藏,点击图表左侧的是否隐藏可以切换,切换是否隐藏=是

a未发布的图表,较隐藏前,不可以操作【发布】,可以【取消隐藏】;

b已发布的图表,较隐藏前,只能操作【导出图片、导出excel、取消隐藏】;

4)隐藏后的图表不可以被引用,但不影响已经被引用的数据

3.12 取消隐藏

1)操作流程:选择图表-取消隐藏图表

2)操作路径:数据可视化-图表-二级分组-图表-取消隐藏图表

3)隐藏后的图表可以取消隐藏,切换是否隐藏=否,取消隐藏后,图表恢复隐藏前的状态和功能,可以被引用

3.13 查看引用

1)流程:选择图表-查看被哪些报表/数据大屏/页面引用

2)操作路径:数据可视化-图表-二级分组-图表-更多-查看引用

3)选择具体的图表,查看当前图表被引用的所有信息

image.png

3.14 不允许别人编辑

1)流程:选择图表-不允许别人编辑

2)操作路径:数据可视化-图表-二级分组-图表-更多-不允许别人编辑

3)选择自己创建的图表,对图表是否允许其他人编辑进行设置;如果设置为不允许,则其他人无法编辑图表

image.png

3.15 不允许别人引用

1)流程:选择图表-更多-不允许别人引用

2)操作路径:数据可视化-图表-二级分组-图表-更多-不允许别人引用

3)选择自己创建的图表,对图表是否允许他人引用进行设置;如果设置为不允许,则其他人无法在报表、数据大屏、界面设计器引用到该图表

image.png

3.16 导出图片

1)操作流程:选择图表-导出图片

2)操作路径:数据可视化-图表-二级分组-图表-图表导出图片

3)选择图表后,点击【导出图片】按钮可以将当前图表导出为图片

3.17 导出EXCEL

1)操作流程:选择图表-导出EXCEL

2)操作路径:数据可视化-图表-二级分组-图表-图表导出EXCEL

3)选择图表后,点击【导出EXCEL】按钮可以将当前图表导出为EXCEL

4. 图表设计页面

4.1 修改模型、方法

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)在“创建图表”弹窗中选择了模型和方法后,可以在进入图表设计页面修改

4)图表设计页面,点击模型后的设置图标后,右侧弹出弹窗,可以修改模型和获取模型数据的方法,需要注意的是:修改模型后,图表信息会清空

image.png

4.2 维度

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)维度字段:布尔、文本、枚举、日期时间、年份、日期、时间、用户ID、手机号、邮箱

4.2.1 维度的添加

1)图表设计页面,点击维度后的「+」,右侧弹出弹窗,展示所有的维度字段,可以选择对应的字段进行分析

a拖动字段进入维度列表

b点击字段,则字段进入维度列表

2)不同的图表支持的维度个数不同,当维度字段个数已达上限后不可再添加;此时拖动新字段到旧字段上后,新字段会代替旧字段进行数据分析,且会保留相同的样式

image.png

4.2.2 维度的删除

1)维度选择后,鼠标放到维度字段上,显示「删除图标」

2)点击则字段删除成功,维度字段的效果消失

image.png

4.2.3 修改维度展示名称

1)维度选择后,鼠标放到维度字段上,显示「设置图标」

2)点击后下方弹出「修改展示名称」的设置选项,点击后右侧出现修改展示名称的弹窗,可以进行修改,在输入框下方可以查看原字段名称

image.png

4.3 数值

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)数值字段:整数、浮点数、金额、(连续的日期时间、年份、日期、时间)

4.3.1 数值的添加

1)图表设计页面,点击数值后的「+」,右侧弹出弹窗,展示所有的数值字段,可以选择对应的字段进行分析

a拖动字段进入数值列表

b点击字段,则字段进入数值列表

2)不同的图表支持的数值个数不同,当数值字段个数已达上限后不可再添加;此时拖动新字段到旧字段上后,新字段会代替旧字段进行数据分析,且会保留相同的样式

3)拖入的数值字段中,可以同时拖入整数、浮点数、金额;但是拖入字段类型=年份/日期时间/日期/时间后,不可以拖入其他字段类型的数值字段

4)饼图、漏斗图不可以在数值列表中拖入字段类型=年份/日期时间/日期/时间的字段

4.3.2 数值的删除

1)数值选择后,鼠标放到数值字段上,显示「删除图标」

2)点击则字段删除成功,数值字段的效果消失

4.3.3 修改数值展示名称

1)维度选择后,鼠标放到数值字段上,显示「设置图标」

2)点击后下方弹出可以设置的选项,点击「修改展示名称」选项,点击后右侧出现修改展示名称的弹窗,可以进行修改,在输入框下方可以查看原字段名称

4.3.4 修改数值聚合方式

1)维度选择后,鼠标放到数值字段上,显示「设置图标」

2)点击后下方弹出可以设置的选项,点击「聚合方式」选项,点击后右侧出现修改展示名称的弹窗,可以进行修改

3)默认是求和,可以修改为「无处理、最小值、最大值、平均值、计数」

a求和:将维度值对应的所有数值进行加和

b无处理:取维度值对应数值中的最近一条不为空的值

c最小值:取维度值对应数值中的最小值

d最大值:取维度值对应数值中的最大值

e平均值:取维度值对应数值的平均值

f计数:计算维度值对应的数值个数

4)修改后实时更新图表信息,会影响辅助线取数值字段时的值

image.png

4.3.5 修改数值数据格式

1)维度选择后,鼠标放到数值字段上,显示「设置图标」

2)点击后下方弹出可以设置的选项,点击「数据格式」选项,点击后右侧出现修改数据格式的弹窗,可以进行修改

3)可以设置字段的数据类型、单位;

a数据类型:默认为「默认」,可修改为「数值、货币、百分比」

ⅰ类型=默认:与原数据保持一致

ⅱ类型=数值:选择数值保留的小数精度,默认是两位小数,最大支持6位

ⅲ类型=货币:需要选择一种货币,也可以设置需要展示的精度;选择后货币会展示在图表的数值字段后,也会展示在数值上

ⅳ类型=百分比:选择数值保留的小数精度,可以选择处以100,选择后数值会展示为处以100后的百分比

b单位:设置数值字段对应的单位名称,设置后会展示在图表的数值字段后

4)修改后实时更新图表信息

image.png

4.4 筛选

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

4.4.1 筛选的添加

1)图表设计页面,点击筛选后的「+」,右侧弹出弹窗,展示所有的维度、数值字段,可以选择对应的字段进行筛选,支持筛选多个字段

a拖动字段进入筛选列表

b点击字段,则字段进入筛选列表

2)选择字段后,可以设置具体的筛选条件

image.png

4.4.2筛选的删除

1)筛选字段选择后,鼠标放到筛选字段上,显示「删除图标」

2)点击则字段删除成功,筛选字段的效果消失

4.4.3 维度字段设置筛选条件

1)鼠标放到筛选字段上,显示「设置图标」,点击后针对当前字段值进行筛选

2)筛选字段的字段类型=维度时,需要选择进入图表的数据,此时如果勾选了排除,则是未勾选的数据进入图表

4.4.4 数值字段设置筛选条件

1)鼠标放到筛选字段上,显示「设置图标」,点击后针对当前字段值进行筛选

2)筛选字段的字段类型=数值时,需要选择条件、填写条件对应的数值

a条件:默认为「大于」,可修改为「大于等于、小于、小于等于、等于、不等于、区间」;修改为区间时,必须填写区间的起始值和终点值

3)填写完成后点击【确认】,筛选过滤成功,图表上展示的数据仅为筛选后的内容

4.5 排序

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

4.5.1 排序的添加

1)图表设计页面,点击排序后的「+」,右侧弹出弹窗,展示所有的维度、数值字段,可以选择对应的字段进行排序,最多按一个字段进行排序

a拖动字段进入排序列表

b点击字段,则字段进入排序列表

2)选择字段后,默认为按排序字段的值升序排列,可以设置其他顺序,维度值会按照指定的顺序从上到下/从左到右进行排列

3)字段值的默认排序:数字>大写字母>小写字母>汉字>符号>null

4.5.2 排序的删除

1)排序字段选择后,鼠标放到排序字段上,显示「删除图标」

2)点击则字段删除成功,排序字段的效果消失,字段恢复原始排序

4.5.3 维度字段设置排序

1)鼠标放到排序字段上,显示「设置图标」,可以设置维度字段的自定义排序,以及对应的升序/降序

a自定义排序

b升序/降序:默认为升序排序,此时展示降序,点击降序则变为降序排序

2)排序字段的字段类型=维度时,需要选择进入图表的数据,此时如果勾选了排除,则是未勾选的数据进入图表

4.5.4 数值字段设置排序

1)鼠标放到排序字段上,显示「设置图标」,可以设置数值字段的聚合方式,以及对应的升序/降序

a聚合方式:默认为求和,可以修改为「无处理、最小值、最大值、平均值、计数」

b升序/降序:默认为按当前聚合方式升序排序,此时展示降序,点击降序则变为按数据聚合方式从大到小排序

2)修改完成后点击【确认】,设置排序成功,图表上展示的维度值顺序按照设置的顺序进行排列,数值一致时,按照默认的维度字段值顺序排序

image.png

4.6 图内筛选项

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)将常用的筛选字段通过拖入/点击的方式进入图内筛选项列表,最多拖入6个维度字段,不可以拖入数值字段

4)拖入后可以根据字段进行筛选,筛选后图表展示的数据重新计算

4.7 切换为标准样式

1)操作流程:图表设计页面-进切换为标准样式

2)操作路径:数据可视化-图表-编辑/创建图表进入图表设计页面

3)切换为标准样式后可以恢复字体的默认大小和颜色

4.8 图表样式

进入图表设计页面,默认为单条柱状图,可以进行切换;本期支持的图表有:单条柱状图、多条柱状图、单条形图、多条形图、单条折线图、多条折线图、双Y轴折线图、基础面积图、饼图、环形图、基础漏斗图、表格、地图、仪表盘图、散点图、气泡图、动态气泡图、指标统计图

1)图表标题:需要设置标题/副标题/描述的是否展示、位置、字号大小、字体颜色;默认标题、副标题、描述均展示

2)坐标轴:需要设置是否展示x轴刻度线、y轴刻度线,以及坐标轴上字段的字号大小、字体颜色

3)标签:需要设置是否展示标签,展示的标签内容(一般是维度字段的值、

4)数值字段名称、数值字段的值,饼图、漏斗图除外)和标签的字号大小、字体颜色

5)图例:需要设置是否展示图例(一般是展示维度字段对应的值,漏斗图除外),展示的位置和图例的字号大小、字体颜色

6)辅助线:支持添加多条辅助线,可以输入数值,也可以根据图表上的数值字段的平均值/最小值/最大值

7)基本格式(表格):针对表格图表,设置表头/表体的对齐方式、行高、字号大小、字体颜色、背景颜色

8)小计(表格):针对表格图表,设置是否展示小计,以及展示的小计对齐方式、行高、字号大小、字体颜色、背景颜色

image.png

4.8.1 单条形图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为基础条形图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.2 多条形图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为多条形图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.3 单条柱状图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)默认为单条柱状图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线

5)样式效果配置后即时生效

4.8.4 多条柱状图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为多条柱状图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.5 单条折线图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为单条折线图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.6 多条折线图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为多条折线图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.7 双y轴折线图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为双Y轴折线图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.8 面积图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为面积图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签(还可以选择展示百分比)、图例

5)样式效果配置后即时生效

image.png

4.8.9 饼图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为饼图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签(还可以选择展示百分比)、图例、下钻

5)样式效果配置后即时生效

image.png

4.8.10 环形图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为环形图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、图例、下钻

5)样式效果配置后即时生效

image.png

4.8.11 漏斗图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为漏斗图,此时可以选择一个维度字段和一个数值字段、或者0个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、图例、下钻

a标签:一个维度字段和一个数值字段的标签是维度字段的值、数值字段名称、数值字段的值;0个维度字段和多个数值字段的标签是数值字段名称、数值字段的值;

b图例:一个维度字段和一个数值字段的标签是维度字段的值;0个维度字段和多个数值字段的标签是数值字段名称;

5)样式效果配置后即时生效

image.png

4.8.12 表格

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为表格,此时可以选择多个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、基本格式、小计、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.13 地图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为地图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、图例、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.14 仪表盘图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为仪表盘,此时可以选择一个当前数值字段字段和一个目标数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、颜色设置、角度设置

5)样式效果配置后即时生效

image.png

4.8.15 散点图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为散点图,此时可以选择一个维度字段和一个数值X轴、一个数值Y轴字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、辅助线、下钻

5)样式效果配置后即时生效

image.png

4.8.16 气泡图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为气泡图,此时可以选择一个维度字段和一个数值X轴、一个数值Y轴、一个气泡大小字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、图例、

5)样式效果配置后即时生效

image.png

4.8.17 动态气泡图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为动态气泡图,此时可以选择一个维度字段和一个数值X轴、一个数值Y轴、一个气泡大小、一个动态值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、图例、下钻、动画设置

5)样式效果配置后即时生效

image.png

4.8.18 指标统计图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为指标统计图,此时可以选择多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、显示设置

5)样式效果配置后即时生效

image.png

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9422.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年6月20日 am9:49
Next 2024年6月20日 am9:49

相关推荐

  • 6.5 权限体系(改)

    做好企业级软件,首先得过权限这一关 在企业的IT部门沟通中,权限是避免不了。自嘲下在我们刚出来创业时,为了收获客户对我们技术能力的信任,每每与跟客户沟通时都会说我们是阿里出来的,但在权限设计这个环节不那么灵验,反而被打上了不懂B端权限设计的标签,会问很多问题。我就很奇怪难道大厂就没有内部管理系统了?大厂只有C端交易,没有B端交易?但从侧面说明权限不简单还特别重要。做好企业级软件,首先得过权限这一关。 整体介绍 对于平台运行来说,权限是必须,但我们的auth模块不是必须的,auth模块只是我们提供的一种默认实现,客户可以根据平台的spi机制进行替换。auth模块利用了平台的Hook特性做到与业务无关,在我们开发上层应用的时,是不用感知它的存在的。 auth模块涉及:功能权限、数据权限 数据权限:行权限和列权限。备注:数据权限的控制只能用于【存储模型】 表级权限:表达的语义是:是否该表可读/写(修改和新增) 列权限:表达的语义是:是否该列可读/写(修改和新增) 行权限:表达的语义是:是否对该行可读/写(修改)/删除 功能权限:表达的语义是ServerAction/Function是否可执行/展示,viewAction是否可展示,菜单是否可以显示 范围说明: 配置多个权限项的时候,取并集 配置多个角色的时候,取并集 模型设计 产品体验 Step1 创建角色 通过App Finder 切换至【权限】应用,点击新增按钮创建一个名为oinone的角色 Step2 创建数据权限项 在【权限项列表】菜单,点击【创建】按钮新增一个名为【宠物达人数据权限项】,同时宠物达人的数据权限设置为只能查看性别为男的记录 配置说明: 名称: 代表该项配置的权限的名字(必填)(必须是全系统唯一) 权限模型: 选择需要拦截的数据所在的表,即为模型,可以搜索使用 描述:对该权限项的描述 权限条件的配置: 满足全部:对条件一和条件二要同时满足的数据才能被看见 满足任一:对条件一和条件二要任意满足的数据都能被看见 读权限:对该数据是否有读取的权限 写权限:对该数据是否有修改的权限 删除权限:对该条件内的数据是否有删除的权限 Step3 为角色配置权限 编辑oinone角色,只开通oinoneDemo工程应用 选中【数据权限】选项卡点击【添加】按钮,勾选宠物达人数据权限项点击【确定】按钮 整体点击保存,回到列表页记得点击【权限生效】按钮 Step4 新建用户绑定角色 切换到用户中心模块,点击【创建】按钮填写必要信息,并在角色选中oinone权限组。 退出admin用户,用oinone登陆,权限效果: 只能看见demo模块 oinone登陆只能看到性别为男的宠物达人记录 admin用户登陆 oinone用户登陆 因为宠物达人的页面没有把性别字段放出来,我们看下数据库数据 auth模块扩展 在日常项目开发中,难免会碰到一些针对权限管理的特殊需求,或是为提升性能做的特殊逻辑。接下来我给大家介绍auth模块扩展性。 权限全局配置 对所有权限角色都做限制,而且不想让用户感知,可以实现PermissionFunApi接口,API接口实现的配置方式【只能用于支持全局的数据权限配置】 实现接口PermissionFunApi 将实现托管给SpringAOP 接口的具体实现看下图的代码 package pro.shushi.pamirs.demo.core.service; import org.springframework.stereotype.Component; import pro.shushi.pamirs.auth.api.service.PermissionFunApi; import pro.shushi.pamirs.demo.api.model.PetTalent; @Component public class PetTalentPermissionFunApi implements PermissionFunApi { @Override public String permissionDomain(Object… args) { //获取当前组织中 return "name == '张学友'"; } @Override public String nameSpace() { return PetTalent.MODEL_MODEL; } } 不参与权限控制 如果某一接口不想做权限控制,则可以在启动工程的application-dev.yml文件中配置不需要权限过滤的接口 pamirs: auth: fun-filter: – namespace: demo.PetTalent fun: queryPage 换一个没有配置宠物达人权限的用户(除管理员以外)进入系统,则也可以看到数据。注意【权限全局控制】还是生效的 API 1. 获取当前用户对该模型的行权限 Result<String> result = CommonApiFactory.getApi(AuthApi.class).canReadAccessData("Model"); 返回值为 { 'data':"name=in=('hahaha')" 'success':true … } 用法 : 场景:前端发起的请求都会经过权限拦截,后端代码逻辑发起的数据请求都是不经过任何权限的过滤,但是某些特殊情况需要在后端代码逻辑发起的数据请求也带上权限过滤 入参:请求的模型 出参:Result 数据结构中data会存储一段字符串,该字符串为Rsql 将该Rsql追加到wrapper中 Result<String> result = CommonApiFactory.getApi(AuthApi.class).canReadAccessData("base.UeModule"); String data=result.getData(); QueryWrapper<UeModule> wrapper = Pops.query(); wrapper.setEntity(ueModule); if (!StringUtils.isBlank(data)) { wrapper.apply(data); }

    2024年5月23日
    1.7K00
  • 6.4 国际化之多语言

    多语言是国际化中大家最常面对的问题,我们需要对应用的页面结构元素进行翻译,也需要对系统内容进行翻译比如:菜单、数据字典等,甚至还会业务数据进行翻译。但不管什么翻译需求,我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译,反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate,即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译(使用) 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块,点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为:菜单模型 源语言选择中文,目标选择English 添加翻译项目: 源术语为:商店 翻译值为:shop 状态为:激活 Step2 查看效果 应用切换到Demo模块,在右上角切换语言至英语 后端翻译(自定义模型的翻译) 在前面菜单的翻译中,似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样,当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块,点击新增翻译 切换应用到Demo模块,切换中英文,查看效果 前端翻译 还记得我们前端第一个自定义动作吗?会弹出“oinone第一个自定义Action,啥也没干”,我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action,啥也没干\’)||\’oinone第一个自定义Action,啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action,啥也没干')||'oinone第一个自定义Action,啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点: 不要找有字读配置translate = true的模型,因为会影响后端翻译性能。 最好统一到一个模型中,便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载,避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env,可以参考.env.example文件。通过.env文件为前端配置oss文件路径,针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为:http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径:http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置,默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换,进入宠狗达人页面,点击【第一个自定义Action】,查看前端翻译效果

    2024年5月23日
    2.3K20
  • 页面设计

    1. 功能说明 页面设计时界面设计器中「页面」模块的设计入口,在这个界面,进行页面的设置、搭建、设计、排版。 主要分为顶部操作栏、左侧工具栏、中部设计画布区、右侧属性面板。 2. 操作栏 进入页面设计,顶部显示了页面的标题,以及返回、发布等操作。 2.1 发布 页面设计完成后,点击「发布」运行页面生效。若不点击发布,页面也有自动保存的功能,但在发布前,自动保存也等同于草稿,不会正式生效。 发布时如果有属性不符合校验规则(必填的属性未填、输入的内容校验不通过),会发布失败,相应的字段会特殊标记,需要查看并修改属性。 2.2 显示/隐藏母版 进入页面设计时默认不展示母版,可以手动操作显示母版 3. 工具栏 左侧的工具栏中包括组件库、页面设置等模块。 3.1 组件库 组件库中包含组件和模型,组件是当前设计器支持的所有组件,模型是页面所在模型下的所有字段和动作。 3.1.1 组件 组件中展示了系统支持的所有组件。包含 1)布局类组件,如分组、选项卡等,使用布局组件可以将页面进字段分类、分页; 2)字段类组件,如单行文本、整数、日期等等,使用字段类组件时都会在模型下对应创建一个字段; 3)动作类组件,如跳转动作、提交动作、链接动作等。 3.1.2 模型 组件库顶部,由组件可切换为模型:模型选项下,会展示当前模型的所有字段,以及系统默认动作。可以直接拖拽字段至设计画布中,会应用形成某个组件,可对组件进行多样的属性设置,优化交互。 3.1.2 组件和模型有什么区别 1展示内容维度不同 组件中展示的内容是组件信息,如分组、选项卡、单行文本、文件上传等;模型中展示的是模型下已有的所有字段。 2使用功能不同 组件中的组件使用前需要在模型中创建一个字段,当然,创建好的字段也会存在于模型中;模型中的字段可直接使用,并且使用时会在设计画布中对应生成个默认组件。 3使用场景不同 如果模型中已经存在目标字段,应直接选择从模型中拖拽字段;如果模型中没有需要的字段,可以在页面中增加一个组件,实际上也是在新增一个字段。 3.2 页面设置 页面设置中可以修改当前页面的标题、分组、页面描述,同时也是给页面上传缩略图的唯一入口。 4. 设计画布 将组件或字段拖拽至设计画布区,会生成样式。点击组件,右侧可对其进行设置,大部分属性可实时在画布中展示效果。 5. 属性面板 右侧属性面板抽屉中可以设置属性或查看字段信息,通过不同的属性配置化实现组件的多样化。 5.1 属性 属性中包括基本信息(如标题、占位提示、描述说明等)、校验信息(如是否必填、长度校验等)、交互信息(如排序方式、是否展示计数器等) 5.2 字段 首次从组件中拖拽,会先展示字段信息,并且是需要先创建一个字段,字段创建成功后,再次切换字段选项,只读展示当前组件所对应的字段基本信息。同理,如果是直接从字段中拖拽,字段选项中,只读展示当前字段基本信息。

    2024年6月20日
    4.0K00
  • 4.1.19 框架之网关协议-后端占位符

    在我们日常开发中会有碰到一些特殊场景,需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数,那么后端占位符就是来解决类似问题的。如前端传${currentUserId},后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser,用namespace来定义一个“currentUserId”的占位符,其对应值由value()决定为“PamirsSession.getUserId().toString()”,active要为真才有效,priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据,这里案例就是在field中设置来过滤条件,domain="createUid == $#{currentUserId}",注意这里用的是$#{currentUserId} 而不是${currentUserId},这是前端为了区分真正变量和后端占位符,提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

    2024年5月23日
    2.0K00
  • 2.4.3 Oinone独特性之低无一体

    当今企业软件开发行业,低代码和无代码已经成为热门话题。它们的优势很明显:加速软件开发周期、减少代码开发时间、降低开发成本、易于维护等等。而 Oinone 作为一个低无一体的开发平台,更是在这些优势上做出了巨大的创新。 技术亮点 低代码-在不改变研发习惯的前提下,提升效率降低难度(如下图2-15所示) 一、提高专业开发人员效率 低代码开发模式大大降低了繁琐、重复的工作,模型定义完后,数据 API、数据管理器、基础管理的界面都不需要再进行开发。同时,低代码模式让分布式微服务架构的系统开发变得简单,研发人员不需要考虑分布式部署能力和大数据能力,也不需要去关心一些业务无关的通用能力,如权限、导入导出、国际化翻译、消息、审计等。这样,开发人员可以专注于业务研发,从而大幅提高开发效率。 二、提升系统扩展性 在研发标品的时候,低代码模式让开发人员不再需要关心系统的扩展性。与传统模式不同,低代码模式更加注重元数据的管理,这样就可以更好地保障系统扩展性。 三、保留研发人员习惯 Oinone 平台非常开放,满足开发人员的各种习惯,比如原有的 IDE 环境、熟悉的 Spring Boot 工程结构等。而且在 Oinone 的低代码模式下,研发人员还可以通过无代码方式,在线可视化地修改应用。这样,即使在使用低代码模式的情况下,开发人员也可以保留原有的习惯,提升开发效率。 四、提供更加开放的解决方案 Oinone 提供了非常开放的解决方案,让开发人员可以自由定制和组合各种功能。当行业出现特殊的功能需求时,开发人员可以整合成平台组件,并集成到应用中。Oinone的低代码模式具有高度的开放性和灵活性,这使得它在与其他低代码平台的比较中具有明显的优势。相比其他低代码平台,Oinone不会在无法满足特定需求的情况下限制开发人员的创造力(如下图2-16所示)。 图2-15 Oinone低代码特性介绍 图2-16 Oinone低代码的被集成特性示意图 无代码-五大设计器覆盖研发方方面面,让业务、实施也能参与 它是LCDP的产品化呈现,是冰山露在外面大家看得到的,核心还是在LCDP本身。这部分实时在演进迭代,如您有想体验最新版本,可以在Oinone官网:https://www.oinone.top注册。 设计器 说明 产品展示 模型设计器 1.以模型为驱动,当有模型、数据字典、数据编码等设计功能,我们就可以完整地定义产品数据模型,模型设计器默认整体呈现区别于普通ER图,以当前模型为核心视角展开,可以点击关联模型切换主视角。2.多种模式可切换:专家与经典切换,图与表模式的切换 界面设计器 1.界面设计器旨在帮助用户快速搭建页面;2.所见即所得和根据不同视图类型设计契合的搭建交互就变得尤为重要;3.多端页面设计能力。 流程设计器 1.为业务流程和审批流程提供可自动执行的流程模型,通过定义流转过程中的各个动作、规则,以此实现流程自动化;2.流程可以跨应用设计,不同应用的模型之间可以通过同一流程执行。 逻辑设计器 1.组件化、可视化逻辑编排,逻辑动态变更、动态管理,实施验证。 数据可视化 1.从内部系统模型获取数据内容后,根据业务需求自定义图表,目的是为企业提供更高效的数据分析工具;2.可以智取业务系统模型,系统自动解析选择的模型、接口、表格中的字段后进行数据分析;3.降低对数据分析人员的研发能力要求,提升数据分析的效率 表2-3 Oinone无代码-五大设计器简述 真正的低无一体,体现在一体化的融合能力上 在开发核心产品时,我们主要采用低代码开发,辅以无代码的开发方式。你可以参考我们的低代码开发基础入门教程中3.5.5【设计器的结合】的文章。 而在实施或者处理临时需求时,我们主要采用无代码的开发方式,低代码作为辅助。这种模式比较特殊,只在SaaS模式下提供。如果你发现某个客户个性化部分无法通过无代码设计器完成,我们提供了一个“低无一体”模块,可以反向生成API代码,生成对应的扩展工程和API依赖包,再由专业研发人员基于扩展工程,利用API包进行开发并上传至平台,可以参考关于7.4【Oinone的低无一体】的文章。 场景 融合形式 具体操作 标准产品以低代码开发为主,以无代码为辅助 标品开发时结合无代码设计器来完成页面开发,可以把设计后的页面元数据装载为标准产品的一部分。详细教程见:3.5.5【设计器的结合】一文 项目交付以无代码为主,以低代码为辅助 当有特殊需求设计器无法支持时,则可以通过低无一体应用的代码模式来完成。支持了两种使用模式:上传jar包模式、源码托管模式。详细教程见:7.4【Oinone的低无一体】一文 表2-4 不同场景适配方式说明 实现原理 本章节我们将从以下三个方面来解读Oinone的低无一体。 一:低无一体的设计原则及好处:真正的低无一体平台应该确保标准产品迭代与个性化保持独立,让软件企业具备为客户提供在线化的快速响应、个性化定制、持续更新等服务的能力,让企业客户能够真正自主做到敏捷响应和快速创新。所以Oinone的元数据融合方案跟其他平台有所区别(如下图2-17所示)。 图2-17 Oinone与其他平台的元数据融合对比图 二:低无一体中低与无的关系:无代码是低代码平台的图形化呈现,是低代码的一个子集,它将无限接近低代码的能力,同时也将成为低代码平台的必备特征,是通过低代码开发的标准产品的二开配套工具。 三:低无一体中低与无的定位:通过表2-3可以看出,低代码和无代码在Oinone的体系中相互融合,共同构成了一个完整的低无一体模式,提供更加开放、灵活和可扩展的解决方案,让用户能够更加轻松地完成开发和实施。 低代码模式 无代码模式 用户群体 专业研发 产品经理、需求分析师、直接业务人员 支撑场景 企业全场景软件以及二开 企业全场景软件以及二开,专业化场景比较高的则需低代码支持 核心能力 不改变研发习惯,提升研发效率 可视化编程无需专业编程语言知识 核心定位 开发标准模块 标准模块的二开无标品支撑场景的新模块开发 表2-3 Oinone低代码开发平台的两种开发模式对比

    2024年5月23日
    2.0K00

Leave a Reply

Please Login to Comment