报表

史, 昂 • 2024年6月20日 am9:49 • Oinone 7天入门到精通 • 2012 views

1. 业务场景

报表不局限于表格的样式，还能以各式各样的图表形式展现各项汇总数据这有利于管理者更为直观地了解公司的经营情况，便于后续进行分析，提高对公司的管理水平。

2. 操作流程

1）进入数据可视化，进入报表tab，维护分组信息；

2）在二级分组名称后点击“+”【添加报表】，对报表进行编辑设计；

3）创建完成后可以【编辑】报表标题、备注；

4）需要通过【选择图表、创建图表】完善报表内容；

5）完善后可以点击【发布】报表，则报表此时可以被引用；

6）如果报表有更新，则可以点击【更新发布】，使业务系统引用对报表变为最新的报表信息；

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

8）隐藏后可以【取消隐藏】，报表恢复隐藏前的状态和功能，可以被引用。

3. 操作流程图解

3.1 创建分组

1）操作流程：创建分组

2）操作路径：数据可视化-报表-创建分组

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

3.2 编辑分组名称

1）操作流程：选择分组-编辑分组名称

2）操作路径：数据可视化-报表-编辑分组名称

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

3.3 删除分组

1）操作流程：选择分组-删除分组

2）操作路径：数据可视化-报表-删除分组

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

3.4 创建报表

1）操作流程：选择二级分组-创建报表

2）操作路径：数据可视化-报表-二级分组-创建报表

3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题；

a. 报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复；

4）创建后可以选择报表需要展示的图表

3.5 删除报表

1）操作流程：选择报表-删除报表

2）操作路径：数据可视化-报表-二级分组-报表名称-删除图表

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

4）删除报表后报表消失

3.6 选择图表

1）操作流程：选择报表-为报表选择图表

2）操作路径：数据可视化-报表-二级分组-报表名称-选择图表

3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择

a. 需要选择图表的一级分组后才能选择图表；

b. 可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表；

4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本；

5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项

3.7 创建图表

1）操作流程：选择报表-创建图表

2）操作路径：数据可视化-报表-二级分组-创建图表

3）选择单个未发布或者已发布但没有被隐藏的报表，点击【创建图表】，弹出“创建图表”弹窗，需要填写图表标题、模型、方法；

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

b. 模型：需要选择来源数据对应的模型；

c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑；

4）选择成功后进入图表设计页面，创建图表保存后返回，返回到当前报表页面，新创建的图表展示在报表的第一个位置

3.8 拖拽图表

1）操作流程：选择报表-拖拽图表

2) 操作路径：数据可视化-报表-二级分组-报表名称-拖拽图表

3）所有的报表均可拖拽图表，拖拽时需要选择图表，可以上下左右等比拖动，图表的内容也会根据拖动的比例进行缩放，展示全部的被遮挡图表内容

4）拖拽后实时生效，报表信息保持展示最新效果

3.9 移除图表

1）操作流程：选择报表-移除图表

2）操作路径：数据可视化-报表-二级分组-报表名称-移除图表

3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，此时可以针对不需要的图表进行移除

4）选择移除后不展示在报表中，不影响原图表

5）报表移除图表后实时更新，更新发布后，前端可以展示最新的报表信息，如果未发布，则仅数据大屏可展示最新的报表信息，前端仍为最近发布的报表

3.10 设置报表筛选项

1）操作流程：选择报表-设置报表筛选项

2）操作路径：数据可视化-报表-二级分组-报表名称-更多-报表筛选项-添加

3）添加时选择筛选项字段的类型，关联每个图表对应的字段，一个图表只能关联一个

4）关联后可以按关联字段查询图表数据

3.11 发布

1）操作流程：选择报表-发布报表

2）操作路径：数据可视化-图表-二级分组-报表-发布

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

4）如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表

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

1）操作流程：选择报表-查看最近一次发布的版本

2）操作路径：数据可视化-报表-二级分组-报表名称-查看最近一次发布的版本

3）当报表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版

3.13 更新发布

1）操作流程：选择报表-更新发布报表

2）操作路径：数据可视化-报表-二级分组-报表名称-更新发布报表

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

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

3.14 隐藏

1）操作流程：选择报表-隐藏报表

2）操作路径：数据可视化-报表-二级分组-报表名称-隐藏报表

3）报表默认不隐藏，可以切换是否隐藏=是

a. 未发布的报表，较隐藏前，不可以操作【发布】，可以【取消隐藏】；

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

c. 隐藏后的报表不可以被引用，但不影响已经被引用的数据

3.15 取消隐藏

1) 操作流程：选择报表-取消隐藏报表

2) 操作路径：数据可视化-报表-二级分组-报表名称-取消隐藏报表

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

3.16 查看引用

1）流程：选择报表-查看被哪些页面引用

2）操作路径：数据可视化-报表-二级分组-报表-更多-查看引用

3）选择具体的报表，查看当前报表被引用的所有信息

3.17 不允许别人编辑

1）流程：选择报表-不允许别人编辑

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

3）选择自己创建的报表，对报表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑报表

3.18 不允许别人引用

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

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

3）选择自己创建的报表，对报表是否允许他人引用进行设置；如果设置为不允许，则其他人无法引用到该报表

3.19 导出图片

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

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

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

3.20 导出EXCEL

1）操作流程：选择报表-导出EXCEL

2）操作路径：数据可视化-报表-二级分组-报表名称-报表导出EXCEL

3）选择报表后，点击【导出EXCEL】按钮可以将当前报表导出为EXCEL

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

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

Oinone 7天从入门到精通

Like (0)

史, 昂数式管理员

0 0

图表

Previous 2024年6月20日 am9:49

数据大屏

Next 2024年6月20日 am9:49

3.5 Oinone以交互为外在

交互组件（UI Componment）：用组件化的方式统一管理：菜单、布局、视图用Action做衔接，来勾绘出模块的前端交互拓扑，描述所有可操作行为 oinone的页面路由串联规则是以菜单为导航，用Action做衔接，用View做展示，详见3.5.2.1View的【整体介绍】。本章节会重点介绍：如何定义菜单、视图、行为以及其初始化 xml配置：视图配置（包括字段联动）、字段配置、布局配置、动作配置前端组件自定义

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.3K000
Oinone 7天入门到精通

4.2.5 框架之网络请求-Request

在中后台业务场景中，大部分的请求时候是可以被枚举的，比如创建、删除、更新、查询。在上文中，我们讲了httpClient如何自定义请求，来实现自己的业务诉求。本文中讲到的Request是离业务更近一步的封装，他提供了开箱即用的API，比如insertOne、updateOne，它是基于HttpClient做的二次封装，当你熟悉Request时，在中后台的业务场景中，所有的业务接口自定义将事半功倍。一、Request详细介绍元数据-model 获取模型实例 import { getModel } from '@kunlun/dependencies' getModel('modelName'); 图4-2-5-1 获取模型实例清除所有缓存的模型 import { cleanModelCache } from '@kunlun/dependencies' cleanModelCache(); 图4-2-5-2 清除所有缓存的模型元数据-module 获取应用实例，包含应用入口和菜单 import { queryModuleByName } from '@kunlun/dependencies' queryModuleByName('moduleName') 图4-2-5-3 获取应用实例查询当前用户所有的应用 import { loadModules } from '@kunlun/dependencies' loadModules() 图4-2-5-4 查询当前用户所有的应用 query 分页查询 import { queryPage } from '@kunlun/dependencies' queryPage(modelName, { pageSize: 15, // 一次查询几条 currentPage, 1, // 当前页码 condition?: '' // 查询条件 maxDepth?: 1, // 查几层模型出来，如果有2，会把所有查询字段的关系字段都查出来 sort?: []; // 排序规则 }, fields, variables, context) 图4-2-5-5 分页查询自定义分页查询-可自定义后端接口查询数据 import { customQueryPage } from '@kunlun/dependencies' customQueryPage(modelName, methodName, { pageSize: 15, // 一次查询几条 currentPage, 1, // 当前页码 condition?: '' // 查询条件 maxDepth?: 1, // 查几层模型出来，如果有2，会把所有查询字段的关系字段都查出来 sort?: []; // 排序规则 }, fields, variables, context) 图4-2-5-6 自定义分页查询查询一条-根据params匹配出一条数据 import { queryOne } from '@kunlun/dependencies' customQueryPage(modelName, params, fields, variables, context) 图4-2-5-7 根据params匹配出一条数据自定义查询 import { customQuery } from '@kunlun/dependencies' customQuery(methodName, modelName, record, fields, variables, context) 图4-2-5-8 自定义查询 update import { updateOne } from '@kunlun/dependencies' updateOne(modelName, record, fields, variables, context) 图4-2-5-9 update insert import { insertOne } from '@kunlun/dependencies' insertOne(modelName, record, fields, variables, context) 图4-2-5-10 insert delete import { deleteOne } from '@kunlun/dependencies'…

史, 昂
2024年5月23日
1.7K000
Oinone 7天入门到精通

3.5.2.3 构建View的Layout

在日常需求中也经常需要调整Layout的情况，如出现树表结构（左树右表、级联），我们则需要通过修改View的Layout来完成。今天就带您学习下Layout的自定义第一个表格Layout 如果我们想去除表格视图区域的搜索区、ActionBar（操作区），就可以为视图自定义一个简单的Layout就行啦 Step1 新建一个表格的Layout 在views/demo_core/layout路径下增加一个名为sample_table_layout.xml文件，name设置为sampleTableLayout <view type="TABLE" name="sampleTableLayout"> <!– <view type="SEARCH">–> <!– <pack widget="fieldset">–> <!– <element widget="search" slot="search" slotSupport="field"/>–> <!– </pack>–> <!– </view>–> <pack widget="fieldset" style="height: 100%" wrapperStyle="height: 100%"> <pack widget="row" style="height: 100%; flex-direction: column"> <!– <pack widget="col" mode="full" style="flex: 0 0 auto">–> <!– <element widget="actionBar" slot="actionBar" slotSupport="action">–> <!– <xslot name="actions" slotSupport="action" />–> <!– </element>–> <!– </pack>–> <pack widget="col" mode="full" style="min-height: 234px"> <element widget="table" slot="table" slotSupport="field"> <xslot name="fields" slotSupport="field" /> <element widget="rowAction" slot="rowActions" slotSupport="action"/> </element> </pack> </pack> </pack> </view> 图3-5-2-27 新建一个表格的Layout Step2 修改宠物达人自定义表格Template 在view标签上增加layout属性值为"sampleTableLayout" <view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="true" layout="sampleTableLayout"> ……省略其他 </view> 图3-5-2-28 修改宠物达人自定义表格Template Step3 重启看效果图3-5-2-29 示例效果 Step4 修改宠物达人自定义表格Template 去除在view标签上的layout属性配置，让其回复正常第一个树表Layout 本节以“给商品管理页面以树表的方式增加商品类目过滤”为例 Step1 增加商品类目模型增加PetItemCategory模型继承CodeModel，新增两个字段定义name和parent，其中parent字段M2O关联自身模型，非必填字段（如字段值为空即为一级类目）： 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.common.CodeModel; @Model.model(PetItemCategory.MODEL_MODEL) @Model(displayName = "宠物商品类目",summary="宠物商品类目",labelFields={"name"}) public class PetItemCategory extends CodeModel { public static final String MODEL_MODEL="demo.PetItemCategory"; @Field(displayName = "类目名称",required = true) private String name; @Field(displayName = "父类目") @Field.many2one private PetItemCategory parent; } 图3-5-2-30 增加商品类目模型 Step2 修改自定义商品模型为商品模型PetItem增加一个category字段m2o关联PetItemCategory @Field(displayName = "类目") @Field.many2one private PetItemCategory category; 图3-5-2-31 修改宠物商品模型 Step3 新增名为treeTableLayout的Layout 在views/demo_core/layout路径下增加一个名为tree_table_layout.xml文件，name设置为treeTableLayout 图3-5-2-32 新增名为treeTableLayout的Layout <view type="TABLE" name="treeTableLayout"> <view type="SEARCH"> <pack widget="fieldset"> <element widget="search" slot="search" slotSupport="field"/> </pack> </view> <pack…

史, 昂
2024年5月23日
1.4K000
4.1 后端高级特性

了解oinone的基础入门基本上可以胜任业务代码的开发，但对于构建一个完善的应用，作为技术专家或者架构需要考虑的方面还有很多，这章期望能给到您解答构建应用的所有所需知识，让您能成为那个可以带领小伙伴飞的人

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.1K000
Oinone 7天入门到精通

3.5.6.3 布局的配置

布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。前沿在前端领域中，布局可以分为三大块「Float、Flex、Grid 」，Float可以说的上是上古时期的布局了，如今市面还是很少见的，除了一些古老的网站。目前，平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局，合理的使用row、col、containers和container四个布局容器相关组件，将可以实现各种类型的布局样式，换句话说，平台实现的自由布局功能是Flex和Grid的结合体。这里主要是讲解Flex和Grid布局，以及目前新的模板布局实现的思路。 Flex布局 Flex布局采用的是一维布局，那么什么是一维布局呢，所谓的一维布局就是只有一个方向、没有体积、面积，比如一条直线。它适合做局部布局，就像我们原来的顶部菜单、面包屑导航，以及现在的主视图字段配置。图3-5-6-19 Flex布局示意图3-5-6-20 Flex布局示意图3-5-6-21 Flex布局示意从上图可以看看出，Flex布局只能在X、Y轴进行转换，它无法对上下左右四个方向同时处理，因为它没“面积”的概念。所以它最适合做局部布局。优点图3-5-6-22 Flex兼容性 Flex的兼容性，可以看得出来，目前主流的浏览器都支持该属性。所以Flex兼容性强，如果你想对局部做布局处理，Flex是最好选择。缺陷刚刚也提到了，用户想要的布局是千奇百怪的，如果他想要的布局在现有的功能中无法实现怎么办？让用户放弃？还是说服他使用现在的布局。 Grid布局 Grid布局系统采用的是二维布局，二维布局有四个方向：上、下、左、右，它只有面积没有体积，比如一张纸、网格。 Grid布局 <div id="grid-container-one"> <div class="one-1">Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div class="one-6">Grid Item 6</div> </div> <div id="grid-container-two"> <div class="tow-1">Grid Item 1</div> <div class="tow-2">Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> </div> <div id="grid-container-three"> <div>Grid Item 1</div> <div>Grid Item 2</div> <div class="grid">Grid Item 3</div> <div class="grid-column">Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> <div>Grid Item 7</div> <div class="grid-column">Grid Item 8</div> </div> HTML CSSResult Skip Results Iframe EDIT ON * { box-sizing: border-box; padding: 0; margin: 0; line-height: 1.5; font-weight: bold; text-align: center; } #grid-container-one{ background-color: black; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50px); gap: 10px; border: solid black 2px; margin-bottom: 20px; color: salmon; } #grid-container-one div { border: solid white 2px; padding: 10px; } #grid-container-one .one-1 { grid-area: span 1/span 3; text-aligin: center } #grid-container-one .one-6 { grid-column: 3 /4; } #grid-container-two{ background-color: CADETBLUE; display: grid; grid-template-columns: 15% repeat(2, 1fr);…

史, 昂
2024年5月23日
1.5K000

Please Login to Comment

报表