相关推荐

• Oinone 7天入门到精通

  开发者

  1.开发者 1.1 Webhook 通过webhook流程节点可以向第三方系统发送请求。 1.1.1 请求方式 支持GET、POST两种请求方式。 1.1.2 URL 在Webhook URL中填写发送请求的HTTP地址。 1.1.3 Headers&Body Headers的value支持通过表达式配置变量 Body的数据类型支持KEY_VALUE和APPLICATION_JSON两种。

  史, 昂

  2024年6月20日

  1.7K000
• Oinone 7天入门到精通

  业务域

  1. 业务域介绍 业务域是根据业务域对集成应用、开放接口进行归类管理。在创建集成应用、开发接口时，可选择归属的业务域。 操作入口：集成设计器——业务域。 2. 业务域管理 业务域管理提供新增、删除、搜索操作。 2.1 业务域列表 支持按照编码、名称、描述搜索业务域。 2.2 新增业务域 新增业务域：输入业务域名称、描述新增。 2.3 删除业务域 当前业务域未被其他数据记录引用时，可删除成功，反之如果被引用了，不允许删除。

  史, 昂

  2024年6月20日

  1.8K000
• Oinone 7天入门到精通

  3.5.1 构建第一个Menu

  在前面章节中我们也涉及到菜单，因为菜单我们模块就是地图、导航，没有地图、导航就无法畅游模块并进行相关业务操作。在3.3.4【模块的继承】一文关于多表继承的内容就有涉及到菜单的初始化，本文将展开介绍初始化Menu的两种方式分别是：注解式、数据初始化式。 注解式(举例) Step1 分析现有菜单注解 用@UxMenus声明DemoMenus为菜单初始化入口，同时该类在DemoModule配置扫描路径中，那么通过DemoMenus初始化的菜单都挂在demo_core这个模块上。 如果采用这种模式，建议同一个模块的菜单都只配置在一处 package pro.shushi.pamirs.demo.core.init; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.*; import pro.shushi.pamirs.demo.api.proxy.PetShopProxy; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyA; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB; @UxMenus public class DemoMenus implements ViewActionConstants { @UxMenu("商店管理")@UxRoute(PetShopProxy.MODEL_MODEL) class PetShopProxyMenu{} @UxMenu("商店管理A")@UxRoute(PetShopProxyA.MODEL_MODEL) class PetShopProxyAMenu{} @UxMenu("商店管理B")@UxRoute(PetShopProxyB.MODEL_MODEL) class PetShopProxyBMenu{} @UxMenu("商品管理")@UxRoute(PetItem.MODEL_MODEL) class ItemMenu{} @UxMenu("宠狗商品")@UxRoute(PetDogItem.MODEL_MODEL) class DogItemMenu{} @UxMenu("萌猫商品")@UxRoute(PetCatItem.MODEL_MODEL) class CatItemMenu{} @UxMenu("宠物品种")@UxRoute(PetType.MODEL_MODEL) class PetTypeMenu{} @UxMenu("萌猫品种")@UxRoute(PetCatType.MODEL_MODEL) class CatTypeMenu{} @UxMenu("宠狗品种")@UxRoute(PetDogType.MODEL_MODEL) class DogTypeMenu{} @UxMenu("宠物达人")@UxRoute(PetTalent.MODEL_MODEL) class PetTalentMenu{} } 图3-5-1-1 菜单注解 Step2 改造现有菜单注解 菜单的层级关系通过@UxMenu的嵌套进行描述 菜单点击效果有三种分别对应不同的Action的类型，关于Action的类型详见3.5.3【Action的类型】一文。 通过@UxRoute定义一个与菜单绑定的viewAction，@UxMenu("创建商店")@UxRoute(value = PetShop.MODEL_MODEL,viewName = "redirectCreatePage",viewType = ViewTypeEnum.FORM)，其中viewName代表视图的name(其默认值为redirectListPage，也就是跳转到列表也)，value代码视图所属模型的编码，viewType代表view类型（其默认值为ViewTypeEnum.TABLE） @UxServer定义一个与菜单绑定的serverAction，@UxMenu("UxServer")@UxServer(model = PetCatItem.MODEL_MODEL,name = "uxServer") ，其中name代表serverAction的name，model或value代码serverAction所属模型的编码 @UxLink定义一个与菜单绑定的UrlAction，@UxMenu("Oinone官网")@UxLink(value = "http://www.oinone.top”,openType= ActionTargetEnum.OPEN_WINDOW) ，其中value为跳转url，openType为打开方式默认为ActionTargetEnum.ROUTER，打开方式有以下几种 ROUTER("router", "页面路由", "页面路由") DIALOG("dialog", "页面弹窗", "页面弹窗") DRAWER("drawer", "打开抽屉", "打开抽屉") OPEN_WINDOW("openWindow", "打开新窗口", "打开新窗口") 配合菜单演示，PetCatItemAction增加一个uxServer的ServerAction package pro.shushi.pamirs.demo.core.action; ……包引用 @Model.model(PetCatItem.MODEL_MODEL) @Component public class PetCatItemAction extends DataStatusBehavior<PetCatItem> { ……省略其他代码 @Action(displayName = "uxServer") public PetCatItem uxServer(PetCatItem data){ PamirsSession.getMessageHub().info("uxServer"); return data; } } 图3-5-1-2 示例代码 新的菜单初始化代码如下 package pro.shushi.pamirs.demo.core.init; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxLink; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxServer; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.*; import pro.shushi.pamirs.demo.api.proxy.PetShopProxy; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyA; import pro.shushi.pamirs.demo.api.proxy.PetShopProxyB; import pro.shushi.pamirs.meta.enmu.ViewTypeEnum; @UxMenus public class DemoMenus implements ViewActionConstants { @UxMenu("商店") class ShopMenu{ @UxMenu("UxServer")@UxServer(model = PetCatItem.MODEL_MODEL,name = "uxServer") class ShopSayHelloMenu{ } @UxMenu("创建商店")@UxRoute(value = PetShop.MODEL_MODEL,viewName = "redirectCreatePage",viewType = ViewTypeEnum.FORM) class ShopCreateMenu{ }…

  史, 昂

  2024年5月23日

  1.5K000
• Oinone 7天入门到精通

  图表

  1. 业务场景 进入数据可视化后，默认处于图表列表页面，点击报表/数据大屏图标则可切换至对应列表；支持从模型获取数据后，过滤数据后创建可视化图表，维护的图表信息可以被报表、数据大屏、以及业务系统引用。 2. 操作流程 1）进入数据可视化，进入图表tab，维护分组信息； 2）在二级分组名称后点击“+”【添加图表】，对图表进行编辑设计； 3）创建完成后可以【编辑】图表； 4）图表完善后，可以点击【发布】图表，则图表此时可以被引用； 5）如果图表有更新，则可以点击【更新发布】，使业务系统引用对图表变为最新的图表信息； 6）如果图表数据不再可以公开使用，则需要通过【隐藏】功能将图表的引用权限收起，此时报表、数据大屏、前端业务系统均不可再引用该图表，但不影响已被引用的图表； 7）隐藏后可以【取消隐藏】，图表恢复隐藏前的状态和功能，可以被引用。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-图表-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建图表 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-图表-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-图表-删除分组 3）鼠标移动至需要删除的分组上，当分组下无图表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只有分组下没有图表的分组才能直接删除成功 3.4 创建图表 1）操作流程：选择二级分组-创建图表 2）操作路径：数据可视化-图表-二级分组-创建图表 3）鼠标移动至需要创建图表的二级分组上，出现「+」，点击图标后弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b模型：需要选择来源数据对应的模型； c方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进入图表设计页面 3.5 编辑图表 1）操作流程：选择图表-编辑图表 2）操作路径：数据可视化-图表-二级分组-图表-编辑图表 3）只能编辑未发布或者已发布但没有被隐藏的图表，且存在三种编辑情况 a第一种：点击图表标题后的编辑图标，仅能编辑图表标题； b第二种：点击图表中的图表标题、图表副标题、图表描述后的编辑图标，可以直接编辑图表标题、图表副标题、图表描述； c第三种：点击【编辑】按钮，进入图表设计页面，带出已有的数据字段、样式、图表内容，编辑时的规则与创建时一致，编辑后可以点击保存进行更新，如果未保存直接返回，则编辑无效； 4）编辑后实时生效，图表信息保持展示最新效果 3.6 删除图表 1）操作流程：选择图表-删除图表 2）操作路径：数据可视化-图表-二级分组-图表-删除图表 3）未发布或者已发布但没有被隐藏的图表，并且没被前端或者报表引用，才展示图表菜单名称后的删除图标 4）删除后图表消失 3.7 复制 1）操作流程：选择图表-复制图表 2）操作路径：数据可视化-图表-二级分组-图表-复制图表 3）点击【复制】按钮，复制成功，名称为copy of 原图表标题，展示在原图表分组的最后一个 3.8 发布 1）操作流程：选择图表-发布图表 2）操作路径：数据可视化-图表-二级分组-图表-发布 3）选择单个未发布且没有被隐藏的图表，点击【发布】按钮，图表发布后可以被前端引用，图表状态变为已发布，展示最近发布时间； 4）如果图表发布后有更新内容，会展示的更新类型：更新图表信息/更新图表内容 3.9 查看最近一次发布的版本 1）操作流程：选择图表-查看最近一次发布的版本 2）操作路径：数据可视化-图表-二级分组-图表-查看最近一次发布的版本 3）当图表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版本 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）选择具体的图表，查看当前图表被引用的所有信息 3.14 不允许别人编辑 1）流程：选择图表-不允许别人编辑 2）操作路径：数据可视化-图表-二级分组-图表-更多-不允许别人编辑 3）选择自己创建的图表，对图表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑图表 3.15 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-图表-二级分组-图表-更多-不允许别人引用 3）选择自己创建的图表，对图表是否允许他人引用进行设置；如果设置为不允许，则其他人无法在报表、数据大屏、界面设计器引用到该图表 3.16 导出图片 1）操作流程：选择图表-导出图片 2）操作路径：数据可视化-图表-二级分组-图表-图表导出图片 3）选择图表后，点击【导出图片】按钮可以将当前图表导出为图片 3.17 导出EXCEL 1）操作流程：选择图表-导出EXCEL 2）操作路径：数据可视化-图表-二级分组-图表-图表导出EXCEL 3）选择图表后，点击【导出EXCEL】按钮可以将当前图表导出为EXCEL 4. 图表设计页面 4.1 修改模型、方法 1）操作流程：创建图表-进入图表设计页面 2）操作路径：数据可视化-图表-二级分组-图表-创建图表 3）在“创建图表”弹窗中选择了模型和方法后，可以在进入图表设计页面修改 4）图表设计页面，点击模型后的设置图标后，右侧弹出弹窗，可以修改模型和获取模型数据的方法，需要注意的是：修改模型后，图表信息会清空 4.2 维度 1）操作流程：创建图表-进入图表设计页面 2）操作路径：数据可视化-图表-二级分组-图表-创建图表 3）维度字段：布尔、文本、枚举、日期时间、年份、日期、时间、用户ID、手机号、邮箱 4.2.1 维度的添加 1）图表设计页面，点击维度后的「+」，右侧弹出弹窗，展示所有的维度字段，可以选择对应的字段进行分析 a拖动字段进入维度列表 b点击字段，则字段进入维度列表 2）不同的图表支持的维度个数不同，当维度字段个数已达上限后不可再添加；此时拖动新字段到旧字段上后，新字段会代替旧字段进行数据分析，且会保留相同的样式 4.2.2 维度的删除 1）维度选择后，鼠标放到维度字段上，显示「删除图标」 2）点击则字段删除成功，维度字段的效果消失 4.2.3 修改维度展示名称 1）维度选择后，鼠标放到维度字段上，显示「设置图标」 2）点击后下方弹出「修改展示名称」的设置选项，点击后右侧出现修改展示名称的弹窗，可以进行修改，在输入框下方可以查看原字段名称 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）修改后实时更新图表信息，会影响辅助线取数值字段时的值 4.3.5 修改数值数据格式 1）维度选择后，鼠标放到数值字段上，显示「设置图标」 2）点击后下方弹出可以设置的选项，点击「数据格式」选项，点击后右侧出现修改数据格式的弹窗，可以进行修改 3）可以设置字段的数据类型、单位；…

  史, 昂

  2024年6月20日

  1.5K000
• Oinone 7天入门到精通

  4.2.8 自定义组件与设计器结合（新）

  界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！

  史, 昂

  2024年5月23日

  1.3K000