写文章
  1. Oinone社区首页
  2. Oinone 7天入门到精通

图表

史, 昂 • • Oinone 7天入门到精通 • 阅读 793

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低代码应用平台体验

赞 (0)
史, 昂的头像史, 昂数式管理员
0 0
上一篇 2024年6月20日 am9:49
下一篇 2024年6月20日 am9:49

相关推荐

  • 第5章 Oinone的CDM Oinone 7天入门到精通

    第5章 Oinone的CDM

    史, 昂的头像 史, 昂
    2024年5月23日
    51000
  • 3.1.2 环境准备（windows版） Oinone 7天入门到精通

    3.1.2 环境准备（windows版）

    一、后端基础环境准备 安装JDK1.8 ，高于1.8_221以上（下载地址见书籍【附件一】） 打开Windows环境变量配置页 此电脑 => 右键属性 => 系统高级设置 => 环境变量 配置环境变量 在用户环境变量中新建变量为JAVA_HOME的项,值为JDK安装之后的路径 图3-1-27 新建环境变量JAVA_HOM 编辑变量为Path的项添加一个值%JAVA_HOME%\bin 图3-1-28 添加一个环境变量值%JAVA_HOME%\\bin PowerShell或者CMD中验证，输出类似信息为安装配置成功 图3-1-29 验证JAVA是否安装成功 安装 Apache Maven 3.8+ （下载地址见书籍【附件一】） 删除Maven安装目录下的conf/settings.xml 配置mvn的settings，下载附件settings-open.xml，并重命名为settings.xml,建议直接放在【C:\Users\你的用户名.m2】下面。下载地址见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员 配置环境变量 在用户环境变量中新建变量为M2_HOME的项,值为Maven安装路径 图3-1-30 新建变量M2_HOME 编辑变量为Path的项添加一个值%M2_HOME%\bin 图3-1-31 添加一个值%M2_HOME%\\bin 验证 图3-1-32 验证Maven是否安装成功 安装 Jetbrains IDEA （下载地址见书籍【附件一】） 插件安装 下载地址 密码: mdji 如果IDEA安装了Lombok插件,请禁用Lombok插件 点击菜单项File => Settings => Plugins 图3-1-33 插件管理页面操作示意 选择下载的插件包 ⅰ. 下载后去除后缀.txt，请根据各自Idea版本下载对应插件（下载地址见书籍【附件一】） idea版本 对应插件 2020.2.4 pamirs-intellij-lombok-plugin-2.2.0-SNAPSHOT-2020.2.4.zip.txt(4.7 MB) 2021.1 pamirs-intellij-plugin-3.0.1-2021.1.zip.txt(4.7 MB) 2021.2 pamirs-intellij-plugin-3.0.1-2021.2.zip.txt(4.7 MB) 2021.3 pamirs-intellij-plugin-3.0.1-2021.3.zip.txt(4.7 MB) 2022.1 pamirs-intellij-plugin-3.0.1-2022.1.zip(4.7 MB) 2022.2 pamirs-intellij-plugin-3.0.1-2022.2.zip.txt(4.7 MB) 2022.3 pamirs-intellij-plugin-3.0.1-2022.3.zip.txt(4.7 MB) 2023.1 pamirs-intellij-plugin-3.0.9-2023.1.zip(4.7 MB) 2023.2 pamirs-intellij-plugin-4.0.1-2023.2.zip(4.7 MB) 2023.3 pamirs-intellij-plugin-4.0.1-2023.3.zip(4.7 MB) 2024.1 pamirs-intellij-plugin-4.7.8-2024.1.zip(4.8 MB) 2024.2 pamirs-intellij-plugin-5.0.0-2024.2.zip(5.0 MB) 2024.3 pamirs-intellij-plugin-5.0.0-2024.3.zip(4.75 MB) 图3-1-34 不同Idea版本对应插件 图3-1-35 操作指引 图3-1-36 操作指引 安装MySQL 8 （下载地址见书籍【附件一】） 解压下载的ZIP安装包, 复制到自定义安装目录 设置环境变量 MYSQL_BASE_DIR 提换成MySQL安装目录路径 把 %MYSQL_BASE_DIR%\bin 加入到系统环境变量中 在PowerShell中可以使用 Get-Command mysqld 命令验证环境变量是否配置成功，执行成功输出mysqld的所在路径 初始化 在命令行中执行 mysqld –initialize-insecure –user=mysql 安装 mysqld -install 启动MySQL服务 mysqld -install 设置root用户密码 alter user \’root\’@\’localhost\’ identified with mysql_native_password by \’oinone\’; flush privileges; 安装DB GUI工具 Datagrip、MySQLWorkbench、DBEaver 选其一 ### 安装Git （下载地址见书籍【附件一】） 安装GraphQL测试工具Insomnia（下载地址见书籍【附件一】） 安装RocketMQ（下载地址见书籍【附件一】） 修改安装目录下bin中对应文件的默认配置 a. runserver.cmd文件内容 -Xms2g -Xmx2g为 -Xms1g -Xmx1g b. runbroker.cmd文件内容 -Xms2g -Xmx2g为 -Xms1g -Xmx1g，以及-XX:G1HeapRegionSize=1m 启动RocketMQ NameServer命令 RocketMQ安装目录\bin\mqnamesrv.cmd start 启动RocketMQ Broker命令 RocketMQ安装目录\bin\mqbroker.cmd -n localhost:9876 停止 RocketMQ命令 mqshutdown.cmd broker mqshutdown.cmd namesrv 安装ElasticSearch 版本…

    史, 昂的头像 史, 昂
    2024年5月23日
    1.7K00
  • 3.3.7 字段之序列化方式 Oinone 7天入门到精通

    3.3.7 字段之序列化方式

    本文核心是带大家全面了解oinone的序列方式，包括支持的序列化类型、注意点、如果新增客户化序列化方式以及字段默认值的反序列化。 一、数据存储的序列化 (举例) 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式，最终会以序列化后的字符串持久化到存储中。 ### Step1 新建PetItemDetail模型、并为PetItem添加两个字段 PetItemDetail继承TransientModel，增加两个字段，分别为备注和备注人 package pro.shushi.pamirs.demo.api.tmodel; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.TransientModel; import pro.shushi.pamirs.user.api.model.PamirsUser; @Model.model(PetItemDetail.MODEL_MODEL) @Model(displayName = "商品详情",summary = "商品详情",labelFields = {"remark"}) public class PetItemDetail extends TransientModel { public static final String MODEL_MODEL="demo.PetItemDetail"; @Field.String(min = "2",max = "20") @Field(displayName = "备注",required = true) private String remark; @Field(displayName = "备注人",required = true) private PamirsUser user; } 图3-3-7-1 PetItemDetail继承TransientModel 修改PetItem，增加两个字段petItemDetails类型为List和tags类型为List，并设置为不同的序列化方式，petItemDetails为JSON（缺省就是JSON，可不配），tags为COMMA。同时设置 @Field.Advanced(columnDefinition = varchar(1024))，防止序列化后存储过长 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.tmodel.PetItemDetail; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.NullableBoolEnum; import java.math.BigDecimal; import java.util.List; @Model.model(PetItem.MODEL_MODEL) @Model(displayName = "宠物商品",summary="宠物商品",labelFields = {"itemName"}) public class PetItem extends AbstractDemoCodeModel{ public static final String MODEL_MODEL="demo.PetItem"; @Field(displayName = "商品名称",required = true) private String itemName; @Field(displayName = "商品价格",required = true) private BigDecimal price; @Field(displayName = "店铺",required = true) @Field.Relation(relationFields = {"shopId"},referenceFields = {"id"}) private PetShop shop; @Field(displayName = "店铺Id",invisible = true) private Long shopId; @Field(displayName = "品种") @Field.many2one @Field.Relation(relationFields = {"typeId"},referenceFields = {"id"}) private PetType type; @Field(displayName = "品种类型",invisible = true) private Long typeId; @Field(displayName = "详情", serialize = Field.serialize.JSON, store = NullableBoolEnum.TRUE) @Field.Advanced(columnDefinition = "varchar(1024)") private List<PetItemDetail> petItemDetails; @Field(displayName = "商品标签",serialize = Field.serialize.COMMA,store = NullableBoolEnum.TRUE,multi = true) @Field.Advanced(columnDefinition = "varchar(1024)") private…

    史, 昂的头像 史, 昂
    2024年5月23日
    68700
  • 3.5.7.1 基础概念 Oinone 7天入门到精通

    3.5.7.1 基础概念

    模块(module) 概念 在 Oinone 系统的架构中，模块（module）是核心组成元素之一，可以被理解为域（domain）的一个具象化概念。模块的来源有两种：一种是基于后端代码定义，另一种是通过无代码新增。具体的代码定义方式，请参考“[占位符]”，而无代码定义的相关信息则可在“[占位符]”找到。在 Oinone 体系中，模块对应两种实体：模块和应用。 模块： 这是一类特定能力的集合，它可以依赖其他模块，也可以被其他模块依赖。 应用： 它是一种特殊的模块，具备模块的所有特性，并在此基础上可被终端用户访问。 使用 在前端开发中，module通常以应用的形式出现，它们往往对前端用户保持透明。在接下来的讨论中，我们主要围绕应用来探讨module的使用。从应用的角度出发，我们可以在前端开发中识别出以下几种典型使用场景，并通过具体的业务案例来加以说明 应用菜单扩展： 实现自定义母版来定义特定应用的菜单 表格布局扩展： 用于自定义布局的工具，以定义特定应用的表格布局 在这些场景中，我们着重实现了应用层面的隔离，确保每个模块都能在应用的维度上独立运作 查找 在实际业务开发中，有3个方式可以找到应用 浏览器url查找(查找速度快，可能不准) 图3-5-7-1 浏览器url查找模块(module) 接口返回查找 第一步找到截图类似请求 图3-5-7-2 接口找到viewActionQuery 第二步根据返回找应用 图3-5-7-3 接口返回查找模块(module) vue调试器选中对应的组件查找 图3-5-7-4 vue调试器查找模块(module) 推荐使用浏览器url查找，若与预期不符，可用另外两种方式查找 模型(model) 概念 在 Oinone 系统的架构中，模型（model）是另一个关键核心组成部分。模型在业务层面主要体现之一为数据库的实体表，它是承载业务实现的基础结构。要了解模型的详细介绍，请参考“[占位符]”，前端所用的模型，对应后端代码定义来说，代表的是模型的编码。 关于模型的定义，我们提供了两种方法： 代码定义： 对于需要通过编程实现的模型定义，您可以参考“[占位符]”来了解具体的代码实现方法； 无代码定义：如果您倾向于使用无代码工具来定义模型，具体的操作和流程可以在“[占位符]”中找到 使用 在前端开发中，模型是前端运行的必要条件，以下场景中，模型不直接感知: 视图渲染 页面之间跳转交互 与后端交互 以下场景中，模型会直接决定前端的渲染逻辑 母版扩展：为某模型扩展母版 布局扩展：为某模型扩展布局 页面扩展：为某模型扩展个性化页面 字段扩展: 扩展字段时加上模型的范围 动作扩展: 扩展动作时加上模型的范围 以上场景中，涵盖了前端工作的方方面面，在OInone体系中，模型不止是后端运行得基础，同样也决定了前端如何运行，那这样做有什么好处呢？ 前后端几乎不需要联调，联调的协议用模型来承载 前端无需定义路由、权限埋点 查找 在实际业务开发中，有3个方式可以找到模型 浏览器url查找 图3-5-7-5 浏览器url查找模型(model) 接口返回查找 第一步找到类似截图请求 图3-5-7-6 接口找到viewActionQuery 第二步根据返回找模型 图3-5-7-7 接口找到viewActionQuery vue调试器选中对应的组件查找 图3-5-7-8 vue调试器查找模型(model) 动作(action) 概念 动作(action)定义了终端用户得交互，它描述了前端与前端、前端与后端之间的交互。 动作涵盖了前端以下部分: 页面跳转(router) 调用后端接口 页内交互(打开弹窗、打开抽屉) 它有两部分的来源: 模型内定义动作 窗口动作(页面跳转、打开弹窗、打开抽屉) 服务器动作(调接口) 前端定义客户端动作，可自定义其它逻辑，例如: 把选中行的某一列数据复制一下 使用 动作的使用绝大部分的情况是由平台自动执行的，在平台执行不符合预期时可以使用自定义动作自行扩展 查找 vue调试器选中对应的组件查找 选中服务器动作(ServerAction) 图3-5-7-9 vue调试器查找服务器动作(ServerAction) 选中窗口动作(ViewAction) 图3-5-7-10 vue调试器查找窗口动作(ViewAction) 字段(field) 概念 在我们的后端模型中，字段（Field）是核心的定义元素，它们在数据库中表现为数据表的列。更重要的是，这些字段在前端应用中发挥着数据传输的关键作用。例如，当前端需要调用后端接口时，它会发送如下结构的数据： 图3-5-7-11 name字段数据举例 这里的 "name" 是一个字段实例，它连接了前后端的交互。在后端，该字段不仅用于数据存储，也参与逻辑运算。 字段在 Oinone 系统中的加强应用 在 Oinone 系统中，字段的功能得到了扩展。除了基本的前后端数据交互，字段的定义还直接影响前端的用户界面（UI）交互。例如： 前端交互组件的选择：前端交互组件的类型取决于字段的数据类型。对于 String 类型的 "name" 字段，前端会使用输入框来收集用户输入的 "张三"。 数据存储和类型定义：在后端，"name" 字段被明确定义为 String 类型，这决定了它如何存储和处理数据。 字段与前端组件定义的解耦 一个关键的设计原则是，前端组件的定义与具体的字段值或字段名（如 "name" 或 "张三"）不直接相关，而是基于字段的数据类型（此例中为 String）。这种设计实现了： 前端组件的一致性：确保所有组件的输入输出遵循同一数据类型（如 String）。 高度的组件复用性：在满足 UI 要求的前提下，任何 String 类型的字段都可以使用这种通用的组件设计。 使用 Oinone 系统中的视图与字段交互的灵活性 Oinone 系统为每种视图和字段类型（Ttype）提供了默认的交互模式。这不仅保证了前端工程启动时所有界面的即时展示，也为开发者带来了高度的灵活性和扩展能力。以下是这一设计理念的关键点： 1. 视图与字段交互的默认实现 每种视图都有对应字段类型（Ttype）的默认交互实现，确保用户界面一致且直观。这使得在前端工程启动时，所有界面能够无需额外配置即可正常展示。 2. 灵活性与扩展能力 尽管系统提供了默认的交互方式，开发者仍然拥有自定义这些交互方式的能力。这意味着开发者可以根据应用需求，设计更加贴合业务逻辑和用户体验的交互模式。 3. 覆盖和替换默认组件 最为重要的是，开发者不仅可以添加新的交互方式，还可以完全覆盖和替换系统的默认组件。这提供了极大的自由度，使开发者能够根据具体场景重新设计和实现界面组件，从而达到完全定制化的用户体验。 查找 vue调试器选中对应的组件查找 图3-5-7-12 vue调试器查找字段(field) 视图类型(viewType) 概念 在 Oinone 系统中，视图是模型在前端的具体表现形式。视图的核心组成和功能如下： 1. 组成要素 字段：视图中的字段代表了模型的数据结构，它们是界面上数据显示和交互的基础。 动作：视图包含的动作定义了用户可以进行的操作，如添加、编辑、删除等。 前端UI：视图的界面设计，包括布局、元素样式等，决定了用户的交互体验。 2. 数据源与交互 数据源：视图的数据直接来源于后端模型。这意味着前端视图展示的内容是根据后端模型中定义的数据结构动态生成的。 交互：视图不仅展示数据，还提供与数据交互的能力。这些交互也是基于后端模型定义的，包括数据的增删改查等操作。 3. 灵活性 视图可以灵活选择是否采用模型的交互。这意味着开发者可以根据需求决定视图仅展示模型的数据，或者同时提供与数据的交互功能。 使用 在 Oinone 系统中，用户可以通过无代码界面设计器轻松配置视图。系统内置了以下主要视图类型： 表格（Table） 表单（Form） 详情（Detail） 搜索（Search） 画廊（Gallery） 树（Tree） 界面设计器配置…

    史, 昂的头像 史, 昂
    2024年5月23日
    80300
  • 6.6 消息 Oinone 7天入门到精通

    6.6 消息

    在我们系统研发过程中经常需要发送短信、邮件、站内信等，笔者在本文给大家介绍下如何使用Oinone的消息模块。 准备工作 如果通过我们工程脚手架工具生成的则已经引入了无需做更多的配置，如果不是则需要按以下步骤先配置依赖和增加启动模块 pamirs-demo-boot的pom文件中引入pamirs-message-core包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-message-core</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加message，即在启动应用中增加message模块 pamirs: boot: modules: – message 消息参数设置 发送邮件和短信需要设置对应的发送邮箱服务器和短信云，短信目前默认阿里云短信。我们通过代码示例来完成对应邮箱和短信的参数设置 Step1 增加pamirs-message-api依赖 pamirs-demo-core的pom文件中引入pamirs-message-api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-message-api</artifactId> </dependency> Step2 消息参数设置 请自行替换邮箱服务器和短信通道的账号信息 package pro.shushi.pamirs.demo.core.init; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand; import pro.shushi.pamirs.boot.common.api.init.InstallDataInit; import pro.shushi.pamirs.boot.common.api.init.UpgradeDataInit; import pro.shushi.pamirs.demo.api.DemoModule; import pro.shushi.pamirs.message.enmu.EmailSendSecurityEnum; import pro.shushi.pamirs.message.enmu.MessageEngineTypeEnum; import pro.shushi.pamirs.message.enmu.SMSChannelEnum; import pro.shushi.pamirs.message.model.EmailSenderSource; import pro.shushi.pamirs.message.model.SmsChannelConfig; import java.util.Collections; import java.util.List; @Component public class DemoMessageInit implements InstallDataInit, UpgradeDataInit { private void initEmail(){ EmailSenderSource emailSenderSource = new EmailSenderSource(); emailSenderSource.setName("邮件发送服务"); emailSenderSource.setType(MessageEngineTypeEnum.EMAIL_SEND); //优先级 emailSenderSource.setSequence(10); //发送账号 FIXME 自行替换 emailSenderSource.setSmtpUser(""); //发送密码 FIXME 自行替换 emailSenderSource.setSmtpPassword(""); //发送服务器地址和端口 emailSenderSource.setSmtpHost("smtp.exmail.qq.com"); emailSenderSource.setSmtpPort(465); //" None: SMTP 对话用明文完成。" + //" TLS (STARTTLS): SMTP对话的开始时要求TLS 加密 (建议)" + //" SSL/TLS: SMTP对话通过专用端口用 SSL/TLS 加密 (默认是: 465)") emailSenderSource.setSmtpSecurity(EmailSendSecurityEnum.SSL); emailSenderSource.createOrUpdate(); } private void initSms(){ SmsChannelConfig smsChannelConfig = new SmsChannelConfig(); smsChannelConfig.setType(MessageEngineTypeEnum.SMS_SEND); smsChannelConfig.setChannel(SMSChannelEnum.ALIYUN); //短信签名名称 smsChannelConfig.setSignName("oinone"); //阿里云账号信息 FIXME 自行替换 smsChannelConfig.setAccessKeyId(""); smsChannelConfig.setAccessKeySecret(""); smsChannelConfig.setEndpoint("https://dysmsapi.aliyuncs.com"); smsChannelConfig.setRegionId("cn-hangzhou"); smsChannelConfig.setTimeZone("GMT"); smsChannelConfig.setSignatureMethod("HMAC-SHA1"); smsChannelConfig.setSignatureVersion("1.0"); smsChannelConfig.setVersion("2017-05-25"); smsChannelConfig.createOrUpdate(); //初始化短信模版 //目前支持阿里云短信通道：获取短信模板，如没有短信模板，需要先创建模板，并审核通过 SmsTemplate smsTemplate = new SmsTemplate(); smsTemplate.setName("通知短信"); smsTemplate.setTemplateType(SMSTemplateTypeEnum.NOTIFY); smsTemplate.setTemplateCode("SMS_244595482");//从阿里云获取,自行提供 FIXME smsTemplate.setTemplateContent("尊敬的&{name},你的&{itemName}库存为&{quantity}"); smsTemplate.setChannel(SMSChannelEnum.ALIYUN); smsTemplate.setStatus(SMSTemplateStatusEnum.SUCCESS); smsTemplate.createOrUpdate(); } @Override public boolean init(AppLifecycleCommand command, String version) { initEmail(); initSms(); return Boolean.TRUE; } @Override public boolean upgrade(AppLifecycleCommand command, String version, String existVersion) { initEmail(); initSms(); return Boolean.TRUE; } @Override public List<String> modules() { return Collections.singletonList(DemoModule.MODULE_MODULE);…

    史, 昂的头像 史, 昂
    2024年5月23日
    69300

Leave a Reply

登录后才能评论