数据可视化-图表在业务页面如何加动态查询条件

前提

阅读此文章前,默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档

1.新建一个表单视图,要求表单的模型里有动态查询条件的字段

从左侧组件库找到“图表”组件,拖入到视图区域,在右侧属性面板选择已经发布过的图表
数据可视化-图表在业务页面如何加动态查询条件

2.将“组件库”->“模型”下的查询条件字段拖入到视图区域,然后再选择图表,设置图表组件属性面板内的“查询条件”

查询条件为rsql语法,里面的变量需要用${}包裹起来,其中的activeRecord为当前视图的数据对象,下图中的activeRecord.field000015推荐导购员的对象,我们拿了这个对象的id传到查询条件内
数据可视化-图表在业务页面如何加动态查询条件

3.绑定菜单后,可以去运行时页面查看效果

通过浏览器的开发者工具,我们可以看到,选中导购员后查询条件发生了改变,页面的数据也同步发生了变化
数据可视化-图表在业务页面如何加动态查询条件

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/16623.html

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

(0)
nation的头像nation数式员工
上一篇 2024年8月27日 pm6:35
下一篇 2024年8月28日 pm3:38

相关推荐

  • 界面设计器创建批量更新的动作

    界面设计器如果创建批量更新的动作 一、拖拽批量动作到表格区域 拖拽批量动作至表格区域,创建批量更新动作设置动作信息,设置完成之后点击保存 二、设置批量动作弹窗视图 点击设计弹窗,出现弹窗设计器界面将需要批量更新的字段拖入表单区,将待提交的数据需要展示字段拖入表格区域,比如更新名称,展示待提交数据的ID、名称、创建时间(注意:创建时间需要在表格中也展示)拖拽客户端动作进入动作区域,并设置动作信息,客户端行为选择批量更新动作设置成功,点击保存 三、发布设计好的批量动作,在运行页面看看效果 选择批量更新的数据之后点击批量更新将名称修改为‘批量修改名称’查看最后实现效果

    2024年4月22日
    2.7K00
  • 创建与编辑一体化

    在业务操作中,用户通常期望能够在创建页面后立即进行编辑,以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能,使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中,我们首先需要设计出对应的页面。完成页面设计后,将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能,即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下: 前端自定义动作 一旦页面配置完成,前端需要对这个动作进行自定义。以下是一个示例的代码: @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤,我们实现了一个更智能的操作流程,使用户能够在创建页面的同时进行即时的编辑,从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅,同时也为用户提供了更灵活的工作流程。

    2023年11月21日
    1.8K00
  • 集成接口一键发布生成开放平台接口

    1. 定义集成接口 2. 定义动态参数接口 3. 发布成开放平台接口 3.1 一键勾选多个发布开放平台,可重复发布 3.2 查看开发平台接口列表 3.3 查看开发平台接口详情 3.4 查看开发平台接口详情 4. 创建生成开放平台授权应用 5. postman模拟请求 5.1 获取Oinone开发平台APIKEY和APISecret 在开发接口列表中找到对应授权应用,点击查看密钥,获得APIKEY和APISecret 5.2 请求接口生成accessToken 接口请求 curl –location –request POST 'http://localhost/openapi/get/access-token' \ –header 'appKey: d63cb1d2c2af4e6b95f36b172804e2cc' \ –header 'appSecret: aQ0BwU/vpcLTm5swRaqXW6O5RUdrwOFGJF2nt2I4boIe7luRzul7y8msnKZuPKtvKprmGpw8z29+djBTUkKaV3zBZ4ZPSbaOkiiTB0AQvoPnPBnHxpF6M8xxDlS13hCRy0D01pcc8DbEwWYPetvp7j8WwLL6q3FusJaZPISPLuucT1hxnrCIA2fe72X7UxojROtOfBvYw6+JFv0E8xwrGLfXXX99wbTywuMzhEoqv64dYR2tfNLubua1xJnf/iAhFao+gw7y/44CZ1u3sUpFeIn5T9MnXB3BDVJnanSZTsxnl5wWY9HojrqtSfPJpcd59OKEmehpbHT9++muvDHgdM5zhbS6NhgSXKdH/kOQEP695RcB09AJxHIwcNF6hv4wGBNsAzHFUMx2QTgwHLONmFjx85ZNkp1iD8L3CYn+5kH2FAO+PG9KG/HvJRGoiViF53LyCSzf5FKj0uUY4QCHbTXXNfCE2L04PNlRj1Hj17JKxcTQ6ea1GsslYG5GjiOET2mRWw+DdnxK6S3GGR0pudRD3K22eG+ZLe/IY4sbMmJfAh8daYtOGcDuoiNXXbUUsf9uSgDDBihXy9ajNQUh8qIHb+N5dqbm/o69WLPUYVYvUzWZt23LHCLj1G8iZTTgkPmdhBsXGRcCBtyMpA7Vfci1TuBzuKrLPnB51T2hGhw=' 响应结果 { "access_token": "P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0mssJl/5Bsg095ohzdCQtQu", "success": true, "errorCode": 0, "expires_time": 7200, "errorMsg": "ok" } 5.3 模拟请求钉钉接口 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } } 5.3 模拟动态参数请求钉钉接口 使用postman请求是对应地址openapi/dingtalk/api/v1.0/{oauth}/accessToken需改成openapi/dingtalk/api/v1.0/:oauth/accessToken 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } }

    2024年3月28日
    96500
  • 自定义的复杂字段配置透出字段

    学习这篇文章之前,需要先学会使用在界面设计器自定义一个前端组件,如果您还不会,可以先看这篇文章 默认情况下,当开前端发人员自定义了一个复杂字段,比如M2O、O2M、M2M的字段,那么Graphql查询的时候,只会查询id跟name这两个字段,如果还想查询字段的字段,那么可以通过配置化的方式来处理 1: 在界面设计器的组件区域中新增对应的字段 2: 设计元件,在模型区域中搜索选项字段列表,拖到设计区域,然后保存 3: 去对应的设计页面,刷新下页面,选中对应的字段,可以看到右侧有选项字段列表4: 输入期望Graphql查询字段,保存发布

    2023年11月9日
    1.6K00
  • 如何实现页面间的跳转

    介绍 在日常的业务中,我们经常需要在多个模型的页面之间跳转,例如从商品的行可以直接点击链接跳转到类目详情,还有查看该订单发起的售后单列表,这里将给大家展示如何在oinone中如何实现这些功能。 方法一、通过界面设计器的无代码能力配置 表格行跳转到表单页/详情页 拖入一个跳转动作到表格行,保存动作后,在左侧的动作属性面板底部有个请求配置,里面的上下文属性就是配置跳转参数的地方,点击添加按钮可以增加一行参数 点击添加按钮后,可以看到新增了一行,行内有2个输入框,左侧输入框为目标视图模型的字段,右侧输入框为当前视图模型的表达式 注意 表达式中activeRecord关键字代表当前行的数据对象 “上下文”相关知识点 当前页面的模型和跳转后的页面模型相同的情况下,会字段带上当前行数据的id作为路由参数 上下文是从当前页面跳转到下个页面带的自定义参数 上下文会作为跳转后的页面数据加载函数的入参,后端的该函数需要根据该条件查询到数据返回给前端,典型的例子就是编辑页,根据id查询对象的其他字段信息返回 跳转后页面的数据加载函数可以在动作场景的时候选择加载函数,也可以在页面的加载函数处设置 方法二、通过低代码方式在自定义代码中调用 oinone提供了内置函数executeViewAction实现该功能 import { DefaultComparisonOperator, executeViewAction, QueryExpression, RuntimeViewAction, ViewActionTarget, ViewType } from '@kunlun/dependencies'; export class JumpActionWidget { protected goToObjectView() { executeViewAction( { viewType: ViewType.Form, moduleName: 'resource', model: 'resource.ResourceCountry', name: 'redirectUpdatePage', target: ViewActionTarget.Router } as RuntimeViewAction, undefined, undefined, { // 此处为id参数,目前只有表单和详情页需要 id: '12223', // 此处为上下文参数,context内对象的key是目标页面需要传递的默认值 context: JSON.stringify({code: 'xxx'}), // 此处为跳转后左侧菜单展开选中的配置 menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } protected goToListView() { const searchConditions: QueryExpression[] = []; searchConditions.push({ leftValue: ['countryCode'], // 查询条件的字段 operator: DefaultComparisonOperator.EQUAL, right: 'CN' // 字段的值 }); executeViewAction( { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCity', name: 'resource#市', target: ViewActionTarget.OpenWindow } as RuntimeViewAction, undefined, undefined, { // searchConditions相当于domain,不会随页面搜索项重置动作一起被清空 searchConditions: encodeURIComponent(JSON.stringify(searchConditions)), // searchBody的字段会填充搜索区域的字段组件,会随页面搜索项重置动作一起被清空 searchBody: JSON.stringify({code: 'CN'}), menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } } 扩展知识点 为什么executeViewAction跳转到的新页面不是入参的moduleName属性对应的模块? 答:跳转后所在的模块优先级为: 第一个入参的resModuleName属性对应的模块 执行executeViewAction时所在的模块 第一个入参的moduleName属性对应的模块 如何快速获取选中菜单的值? 答:先通过页面菜单手动打开页面,然后在浏览器自带调试工具的控制台执行decodeURIComponent(location.href),其中的menu参数就是我们需要的值

    2024年5月13日
    2.8K00

Leave a Reply

登录后才能评论