3.6 问题排查工具

相关推荐

• Oinone 7天入门到精通

  资源

  翻译应用是管理翻译规则的应用，以模型为基础、维护字段的翻译值，支持导入、导出 1. 操作步骤 Step1：导出所有翻译项； Step2：线下翻译； Step3：导入翻译项； Step4：刷新远程资源； Step5：页面右上角可切换语言，查看翻译效果。 2. 新增翻译 翻译是具体到模型字段，其中需要区分出是否字典； 源语言、目标语言，是在资源中维护的语言，可在资源中维护需要翻译的语言； 翻译项则是模型字段，默认翻译项为激活状态，关闭后维护的翻译项无效。 3. 导出、导入 不勾选导出：导出所有需要翻译的翻译项，包括模块、字段，源术语、翻译值等，其中如果已经翻译过的内容，会体现在翻译值中； 勾选导出：导出勾选模型的翻译项。 导入：导入翻译项，平台会根据模型拆分为多条数据。 4. 刷新远程资源 导入翻译项后，点击“刷新远程资源”按钮。 5. 查看翻译内容 页面右上角切换语言，查看翻译效果。

  史, 昂

  2024年6月20日

  1.3K000
• 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.6K000
• Oinone 7天入门到精通

  3.5.7.6 自定义字段

  字段是什么 字段的基本概念 定义：字段通常指的是数据的一个单独项，它可以是一个文本框、下拉菜单、复选框等，用于在用户界面上收集或展示数据。 用途：在表单中，字段用于收集用户输入；在表格或列表中，字段用于显示数据。 类型：字段可以有不同的类型，如文本、数字、日期等，这些类型通常由数据模型定义。 Oinone框架中的字段 在Oinone框架中，字段的设计和实现遵循以下原则： 后端模型驱动：前端的字段直接由后端的数据模型决定。这意味着后端定义了哪些数据应该展示，以及如何展示。 减少前后端联调：由于字段的定义和行为是由后端控制的，前后端的联调需求大大减少。前端开发者主要关注于如何呈现这些字段，而后端则负责数据的逻辑和结构。 灵活性与规范性：虽然Oinone推荐所有场景都遵循后端模型驱动字段的原则，以保持前后端的一致性和减少沟通成本，但它也为高度定制化的前端页面提供了灵活性。 元数据使用：Oinone可能还使用元数据来进一步定义字段的行为，例如它们是否可见、如何验证用户输入等。 结合前后端 在使用Oinone时，理解前后端如何合作来定义和展示字段是很重要的。这种方法不仅提高了开发效率，而且有助于确保数据的一致性和应用程序的可维护性。同时，对于那些需要特定定制或特殊处理的场景，开发团队能够灵活地适应这些需求，在遵守总体架构原则的同时进行一些特定的调整和优化。 作用场景 在Oinone框架中，字段扮演着连接后端数据模型和前端用户界面的重要角色。其作用场景包括但不限于以下几点： 业务组件的核心： Oinone集成了AntdDesignVue的全部UI组件，将它们转化为业务组件。这些业务组件以字段的形式存在，使得前端开发变得简单高效。开发人员可以直接使用这些现成的业务组件来构建用户界面，大大减少了开发工作量。 无代码开发支持： 字段的设计使得Oinone支持无代码开发。开发者可以通过拖拉拽的方式在前端快速构建界面，而后端模型的定义直接决定了这些界面的生成。这种模式简化了传统的前端开发流程，提升了开发效率。 个性化定制： 虽然标准的UI组件可以满足大部分需求，但复杂多变的业务场景往往需要更多个性化的处理。在Oinone中，开发者可以根据具体业务需求和公司的UI指南，定义专门针对特定行业或客户的定制化字段和组件。 与无代码平台的结合： Oinone允许将个性化的字段和组件与无代码平台相结合。这意味着即使在进行个性化定制时，也能保持使用无代码工具的便利性，实现更灵活、更高效的前端开发。 适应多维度业务需求： 由于字段在Oinone中的灵活性和可定制性，它们能够适应多维度的业务需求，无论是从UI设计、用户体验还是业务逻辑的角度，字段都能提供合适的解决方案 自定义字段 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./field： 图3-5-7-24 自定义字段工程目录示例 示例代码 创建自定义字段组件： 使用Vue框架创建一个新的组件（例如 CustomStringFieldVue），并定义其模板、脚本和样式。 在模板中定义字段的HTML结构。 在脚本中使用 defineComponent 来定义Vue组件。 字段类的定义： 导入必要的模块，如 FormFieldWidget, ModelFieldType, SPI, ViewType 等。 使用 @SPI.ClassFactory 装饰器来注册自定义字段。 在类内部初始化并设置组件。 SPI注册参数解释： viewType: 指定视图类型，如表单视图或搜索视图。 widget: 可以指定组件名称。 ttype: 字段的业务类型，例如字符串、数字等。 multi: 指明字段是否支持多值。 model: 定义字段所属的模型。 viewName: 指定视图名称。 name: 定义所属字段的名称。 import {FormFieldWidget, ModelFieldType, SPI, ViewType} from '@kunlun/dependencies'; import CustomStringFieldVue from './CustomStringField.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class CustomStringField extends FormFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomStringFieldVue); return this; } } 图3-5-7-24 自定义字段组件(TS)示例 <template> <div class="custom-string-filed-wrapper"> 字段组件 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'CustomStringFieldVue' }) </script> <style lang="scss"> .custom-string-filed-wrapper { } </style> 图3-5-7-24 自定义字段组件(Vue)示例 效果 图3-5-7-24 自定义字段效果示例

  史, 昂

  2024年5月23日

  2.0K000
• 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.4K000
• Oinone 7天入门到精通

  3.4.3.1 面向对象-继承与多态

  本节为小伙伴们介绍，Function的面向对象的特性：继承与多态； 一、继承 我们在3.4.1【构建第一个Function】一文中伴随模型新增函数和独立类新增函数绑定到模型部分都是在父模型PetShop新增了sayHello的Function，同样其子模型都具备sayHello的Function。因为我们是通过Function的namespace来做依据的，子模型在继承父模型的sayHello函数后会以子模型的编码为namespace，名称则同样为sayHello。 二、多态（举例） oinone的多态，我们只提供覆盖功能，不提供重载，因为oinone相同name和fun的情况下不会去识别参数个数和类型。 Step1 为PetShop新增hello函数 package pro.shushi.pamirs.demo.api.model; …… //import @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} ) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; …… //省略其他代码 @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } @Function(name = "sayHello2",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun("sayHello2") public PetShop sayHello(PetShop shop, String s) { PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()+",s:"+s); return shop; } @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop hello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } } 图3-4-3-1 为PetShop新增hello函数 Step2 为PetShopProxyB新增对应的三个函数 其中PetShopProxyB新增的hello函数，在java中是重载了hello，在代码中new PetShopProxyB()是可以调用父类的sayHello单参方法，也可以调用本类的双参方法。但在oinone的体系中对于PetShopProxyB只有一个可识别的Function就是双参的sayHello package pro.shushi.pamirs.demo.api.proxy; import pro.shushi.pamirs.demo.api.model.PetCatItem; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum; import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; import java.util.List; @Model.model(PetShopProxyB.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.PROXY,inherited ={PetShopProxy.MODEL_MODEL,PetShopProxyA.MODEL_MODEL} ) @Model(displayName = "宠物店铺代理模型B",summary="宠物店铺代理模型B") public class PetShopProxyB extends PetShop { public static final String MODEL_MODEL="demo.PetShopProxyB"; @Field.one2many @Field(displayName = "萌猫商品列表") @Field.Relation(relationFields = {"id"},referenceFields = {"shopId"}) private List<PetCatItem> catItems; @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("PetShopProxyB Hello:"+shop.getShopName()); return shop; } @Function(name = "sayHello2",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun("sayHello2") public PetShop sayHello(PetShop shop,String hello){ PamirsSession.getMessageHub().info("PetShopProxyB say:"+hello+","+shop.getShopName()); return shop; } @Function(openLevel = FunctionOpenEnum.API)…

  史, 昂

  2024年5月23日

  1.4K000