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

前提

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

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

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

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

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

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

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

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

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

Like (0)
nation's avatarnation数式员工
Previous 2024年8月27日 pm6:35
Next 2024年8月28日 pm3:38

相关推荐

  • 集成接口与数据流程的使用

    连接器 点击连接器tab,进入连接器页面,默认选择应用 应用 点击新增应用资源,抽屉打开创建应用的表单 创建应用成功之后,点击应用卡片,进入应用详情页 点击新增API,出现新增API与新增webservice的选项 点击新增API或者新增webservice,抽屉打开新增页面,需设置api名称、url、描述、请求参数、响应结果等信息 数据库 点击数据库tab,切换至数据库列表页 点击新增db资源,抽屉打开新增页面 数据库创建完成之后,点击数据卡片,可进入数据库详情页 点击新增API,抽屉打开新增页面,新增页面包含API名称、描述、请求参数、数据库操作、响应结果等内容(注意:响应结果中的取值表达式的值为查询结果中的列名,如列名取了别名,就写别名,截图有例子) 数据流程 点击数据流程tab进入数据流程列表页 点击创建流程,选择应用之后,点击创建,进入数据流程创建页 点击名称处的编辑操作可设置流程名称 触发-定时触发 点击触发节点,选择定时触发 设置好定时信息之后,点击保存(到定时时间之后会自动触发流程) 触发-消息触发 点击触发节点,触发方式选择消息触发,输入消息标识,设置参数(触发时根据消息标识触发,如果存在两个相同的消息标识,那触发时两个都会触发) 设置完成参数之后,点击确定 再点击保存,触发设置完成 消息触发的方式,可直接调用接口,或者写入到代码中触发,以下为接口触发方式 先调用登录接口 再调用消息触发接口(msgId为消息标识) 点击加号可添加节点,可选择API、新增数据、更新数据、获取数据、删除数据、更新流程参数、引用逻辑、延时、条件分支、子流程、循环、站内信、邮件、短信等节点 API节点 点击API节点 点击节点可设置节点名称 输入节点名称 点击节点设置,进入设置页面 先选择资源应用,再选择API(资源应用的数据为连接器创建的数据) 设置赋值表达式(当字段为必填,且无默认值时,赋值表达式必填) 设置完成点击,保存 API的响应结果可作为下个节点的参数 提示:当参数类型为对象非数组时,赋值表达式配置在对象的下个层级中,当参数类型为对象数组时,赋值表达式配置在对象中,具体见如下图片 对象非数组 对象数组 ### 循环节点-列表循环 设置循环节点 #### 设置循环列表 设置完成,点击保存(循环次数为获取的数据条数) 循环里面可添加节点 设置循环里面的节点,如选择新增节点,点击新增节点之后,选择应用,模型数据保存方式,点击创建 字段的表达式可选择循环节点的参数 设置完内容之后,点击保存 #### 循环节点-次数循环 点击循环节点,循环模式选择次数循环 循环开始值、结束值、步长,可通过表达式选择数字类型的,也可自己手动输入 设置完成之后,点击保存 ### 更新流程参数 第一步先进行流程配置 点击添加新参数 参数类型支持四种,文本、数值、日期(日期时间)、布尔 输入参数名称之后点击保存 保存成功之后,再切换至流程设计 第二步添加更新流程参数节点 第三步设置流程参数节点 进入节点设置之后,点击添加参数 选择参数,给参数赋值(注意布尔类型的值,直接输入ture或者false) 参数值设置完成之后点击保存 设置的参数可用于下个节点的赋值表达式中(如更新数据节点) 设置完成点击保存 ### 引用逻辑 添加引用逻辑节点 设置引用逻辑节点 选择应用、模型、函数,设置参数 配置表达式,配置完成,点击确定 节点信息设置完成之后,点击保存 ### 新增数据、更新数据、获取数据、删除数据、延时、条件分支、子流程、循环、站内信、邮件、短信节点与流程设计器用法一致 流程发布 流程设置完成之后,点击发布流程(如果是定时触发,将会到触发时间自动触发,如果是消息触发,当发送对应消息时触发,具体见上文中写的触发-消息触发)

    2023年11月10日
    1.0K00
  • OioProvider详解(v4.3.0)

    OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务,并使用GraphQL协议作为前后端协议。 参考文档: apollo-client graphql 配置方式 VueOioProvider({ http?: OioHttpConfig }); OioHttpConfig /** * OioHttp配置 */ export interface OioHttpConfig { /** * base url */ url: string; /** * 拦截器配置 */ interceptor?: Partial<InterceptorOptions>; /** * 中间件配置(优先于拦截器) */ middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[]; } 内置拦截器可选项 InterceptorOptions /** * 拦截器可选项 */ export interface InterceptorOptions { /** * 网络错误拦截器 */ networkError: NetworkInterceptor; /** * 请求成功拦截器 (success) */ requestSuccess: NetworkInterceptor; /** * 重定向拦截器 (success) */ actionRedirect: NetworkInterceptor; /** * 登录重定向拦截器 (error) */ loginRedirect: NetworkInterceptor; /** * 请求错误拦截器 (error) */ requestError: NetworkInterceptor; /** * MessageHub拦截器 (success/error) */ messageHub: NetworkInterceptor; /** * 前置拦截器 */ beforeInterceptors: NetworkInterceptor | NetworkInterceptor[]; /** * 后置拦截器 */ afterInterceptors: NetworkInterceptor | NetworkInterceptor[]; } 内置拦截器执行顺序: beforeInterceptors:前置拦截器 networkError:网络错误 actionRedirect:重定向 requestSuccess 请求成功 loginRedirect:登录重定向 requestError:请求错误 messageHub:MessageHub afterInterceptors:后置拦截器 NetworkInterceptor /** * <h3>网络请求拦截器</h3> * <ul> * <li>拦截器将按照注册顺序依次执行</li> * <li>当任何一个拦截器返回false时,将中断拦截器执行</li> * <li>内置拦截器总是优先于自定义拦截器执行</li> * </ul> * */ export interface NetworkInterceptor { /** * 成功拦截 * @param response 响应结果 */ success?(response: IResponseResult): ReturnPromise<boolean>; /** * 错误拦截 * @param response 响应结果 */ error?(response: IResponseErrorResult): ReturnPromise<boolean>; } 自定义路由配置 router 配置方式 VueOioProvider({ router?: RouterPath[]…

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

    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日
    1.2K00
  • 设计器串联动作使用说明

    工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE。 流程创建 流程串联动作仅支持模型触发。 说明:当流程满足触发条件后,该流程将自动执行,和是否开启代码手动触发无关。此外,为了适应特定的业务场景,流程串联动作可与触发机制相结合使用。若流程设计为仅需手动触发,则可通过在筛选条件中设置一个恒不成立的逻辑表达式来实现这一需求。 界面设计器配置 在界面设计器的组件库 → 动作中找到“工作流”;仅能选择流程触发模型和当前主视图所属模型相同的流程;按钮点击后,流程触发。 说明 工作流及数据流程动作的触发需确保相关数据的存在,因此在运行时的创建页中,按钮将以禁用状态显示,防止在数据缺失时触发流程。 数据流程串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”和“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE和EipModule.MODULE_MODULE。 界面设计器配置 数据流程触发的配置和使用方式同工作流串联动作。 集成连接器串联动作 准备工作 界面所属模块需要保证依赖模块列表依赖了“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 EipModule.MODULE_MODULE 集成设计器接口配置 首先在集成设计器新增API 已配置Api“根据id查询用户”: 请求地址:/user/queryById/{id} 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 id Path 是 Integer 用户id[1~43有值] 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 id String Body 否 data.id 主键 name String Body 否 data.name 姓名 age String Body 否 data.age 年龄 country String Body 否 data.country 国家 gender String Body 否 data.gender 性别 界面设计器 在界面设计器的组件库 → 动作中找到“集成连接器”。 动作按钮创建完成后,在属性中找到连接器配置,选择Api资源。 请求参数配置 选择API资源后,若该API需配置请求与响应参数,则相应的参数配置项将会呈现。如上图所示,因所选API含有Path类型的参数,故可进行Path参数的映射配置。此API并无Body或Query类型的参数,因此这些配置项将不会显示。 Path参数的具体配置如下:左侧列出了集成设计器为API创建的参数名称,而右侧对应的是当前模型中的字段,将赋值表达式设定为ID。该配置的含义是:在用户点击按钮之后,系统将调用配置的Api资源,并以当前视图中的ID参数值来映射Path参数,发起请求。 响应参数配置 同样地,左侧的参数名称是由集成设计器配置的响应参数,而右侧则为当前模型中的字段。当请求成功发送并接收响应后,这些响应参数将会按照配置的规则被填充到表单或详情页面中。 发送请求前,若字段已填充数据,但在响应中未获取相应数据,则该字段将被置为空;比如在发送请求前,性别字段已有数据,而请求发送后,若接口返回的数据中未包含性别信息,则性别参数将会被置为空。 多对一字段将依据接口返回的数据从数据库中进行查询(queryOne)。若未查询到相关信息,则仅回填那些在响应中有值的字段。 运行时页面 响应参数一对多/多对多配置 集成设计器的API配置如下所示:条件查询用户 请求地址:/user/query 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 country Body 否 String 否 国家 name Body 否 String 否 用户姓名 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 data OBJECT Body 是 data 用户列表 »name String…

    2024年9月20日
    1.9K00
  • 左树右表的配置,无代码方式实现

    场景 以公司的部门与员工为示例(需要建一个自关联字段) 第一步先在模型设计器界面创建一个员工模型 第二步在模式设计器界面创建一个部门模型,并建自关联字段与他表模型关联字段 1.创建部门模型 2.创建自关联字段 3.建关联其他模型字段 第三步在界面设计器页面设计树表 1.创建树表页面 2.设计树表 3.设计创建表单 第四步查看效果 1.先创建部门 2.再创建员工 3.最终树表效果

    2023年11月20日
    4.5K00

Leave a Reply

Please Login to Comment