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

相关推荐

• 界面设计器

  【界面设计器】左树右表

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 名词解释 主体：在视图中提供数据源的主要组件，并且所有动作都围绕着该主体展开。 一级搜索：在表格视图中，上方直观可见的搜索区，为表格提供筛选功能。 二级搜索：与一级搜索不同的是，其搜索条件是通过某些组件的行为追加到一级搜索条件之上的筛选功能。 概述 平台中对于左树右表提供了两种类型的展示形式。 在表格视图中的左树右表，是以表格为主体，树组件为表格提供了二级搜索功能。选中树节点时将对表格追加节点的搜索条件，并重新执行查询。 在树视图中，是以树为主体，其展开的视图可以是表格、表单、详情等其他视图。 PS：不论是树、级联这些视图组件，还是树选择、级联这些字段组件，其配置数据结构的方式是不尽相同的。唯一的区别在于最终到达的目标模型来源不同。 场景1 为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】和【商品类目】两个模型。 在【商品】的表格左侧添加【商品类目】树，选择某个商品类目后，可以根据商品类目进行筛选，查询所属类目下的全部商品。 其中【商品类目】使用【卡片级联】的展示方式进行管理。 其模型定义如下： 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 所属类目 category 多对一 否 – 商品类目（ItemCategory） categoryId – id 所属类目ID categoryId 整数 否 – – – 商品类目（ItemCategory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 上级类目 parent 多对一 是 – 商品类目（ItemCategory） parentId – id 上级类目ID parentId 整数 否 – – – PS：实际业务场景中，【商品类目】通常使用编码进行关联，即parentCode – code；不仅如此，通常还会添加treeCode字段，以此来实现高效查询当前节点的所有子节点的能力。在演示模型中，我们不必关注这些内容。 创建【商品】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构，因此，在【第1级关联】中的模型选择【商品类目】。 在【商品类目】中是通过【上级类目】进行的自关联，因此，在【第1级关联】中的【自关联关系字段】选择【上级类目】。 在选中【商品类目】节点后，需要对右侧表格发起查询。其筛选条件是通过【商品】中的【所属类目】进行筛选的。因此，在【第1级关联】中的【表格关联关系字段】选择【所属类目】。那么，在表格发起查询前，会根据【所属类目】字段的关联关系配置自动添加筛选条件。 配置如下图所示： 创建【商品类目】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构（级联只是树结构的另一种表现形式） 细心的同学可能发现这里没有【表格关联关系字段】，因此，我们仅需配置【自关联关系字段】即可。 配置如下图所示： 为【商品类目】添加增删改查基础功能 与表格视图不同的是，行内动作区被放在了第一个卡片中的动作区，其他配置方式完全一致。 在这里需要理解的是，一个树节点对应的是表格中的一行。 【商品类目】使用展开视图进行编辑（可选） 打开【支持展开视图】开关，并设置展开视图。这里我们用表单视图进行编辑操作。 和其他表单一样，我们将必要的字段和动作拖入对应区域即可。 由于展开视图只会在选中节点时出现，因此我们仅需提供更新功能即可。 这里需要注意： 提交动作默认打开了【返回上一页】的功能，在当前场景中，更新动作提交数据后，没有上一页需要返回，因此需要关闭【返回上一页】的开关。 提交动作默认打开了【刷新当前视图】的功能，在当前场景中，更新按钮处于【展开视图】中，仅刷新当前视图是不够的，当数据发生变更时，我们需要将级联组件一并刷新，因此需要打开【刷新主视图】的开关。 PS：【编辑】动作和【展开视图编辑】功能是重复的，在使用时应该只选择其中一种。 【商品类目】限制仅支持四级，并为每一个卡片添加标题（可选） 移除【第1级关联】中的【自关联关系字段】，依次添加2、3、4级关联，选择【商品类目】模型，将自动选中【层级关联关系字段】为【上级类目】，并输入每一级关联的标题即可。 这里需要注意的是，在【第1级关联】中需要添加筛选条件，使其只能查询到根节点。 PS：这里的限制仅为交互上的限制，在创建/更新时，如果可以在服务端限制上级类目的选择，以及数据提交时的校验，效果更佳。 【商品类目】的【创建/编辑】使用弹窗打开（可选） 有时我们希望用户在页面中的操作尽可能的流畅，在表单规模较小的情况下，我们也可以使用【弹窗/抽屉】这类交互来优化用户体验。 小贴士： 弹窗打开的方式提供三种页面设计模式，绑定已有页面、使用新页面、复制已有页面。 使用新页面和复制已有页面的方式只能进行一次性的视图设计，无法进行复用。 使用绑定已有页面的方式可以使得视图进行复用，但复用的视图也只能同步弹窗的内容部分，弹窗底部的动作仅会在创建动作时复制一次。 跳转动作的打开方式以及页面设计模式等属于元数据信息，无法通过属性面板进行修改，因此只能通过重新创建新动作的方式进行修改。 鉴于业务的复杂和多变，通常情况下我们只采用【绑定已有页面】的方式为弹窗设计内容部分。这样在交互发生变更时，可以更好的适应变化。 场景2 为了方便接下来的描述，我们需要再构建一个基本的业务场景，这个场景中包含【公司】和【部门】两个模型。 【公司】模型的管理能力使用标准的【增删改查】视图。（此处不进行演示） 在【部门】的表格左侧添加【公司】-【部门】树，在选择某个公司后，可以根据所属公司进行筛选，查询所属公司下的全部部门。在选择某个部门后，可以根据上级部门进行筛选，查询该部门下的子部门（不包含子部门的子部门）。 PS：如这里要求查询该部门下的全部子部门，需要服务端配合。 其模型定义如下： 公司（Company） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本…

  nation

  2023年11月1日

  3.5K002
• 产品使用手册

  集成接口测试功能

  API、 WebService、数据库的测试功能

  萧炎

  2025年8月26日

  568000
• 前端部署

  如何添加数据可视化运行时依赖

  前端 package.json中新增依赖 @kunlun/data-designer-open-pc,版本跟@kunlun/dependencies的填一样 src/main.ts内导入依赖 import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; // START 导入代码放在导入@kunlun/dependencies之后 import '@kunlun/data-designer-open-pc'; // END 导入代码放在VueOioProvider()方法执行前 VueOioProvider({ // TODO }); 后端 父pom新增依赖 <properties> <pamirs.data.visualization.version>4.7.8</pamirs.data.visualization.version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization</artifactId> <version>${pamirs.data.visualization.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> 2.boot启动工程的pom新增依赖 <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization-core</artifactId> </dependency> 3.application.yml配置新增依赖 pamirs: boot: modules: – datavi 注意：datavi 这个模块在业务工程和设计器指定数据源要保持一致。

  nation

  2024年5月15日

  1.0K000
• 设计器

  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[]…

  oinone

  2023年11月1日

  1.6K000
• 设计器

  【界面设计器】树下拉/级联

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 了解联动关系的相关内容。【界面设计器】左树右表 名词解释 字段组件：为字段提供交互能力的组件，一个字段对应一个组件。 关联关系字段：在模型中与其他模型建立关联关系的字段。 可选项：选择组件使用的具体选项，可以是静态的，也可以是动态的。 选中：用户在使用选择组件时，针对某一选项标记或提取这一选项。 概述 本章内容主要是对【界面设计器】左树右表内容中提及的字段相关内容的补充，并非完整教程，有不清楚的地方可以交替阅读进行理解。 场景 沿用【界面设计器】左树右表中的两个场景。 我们可以做出这些优化： 将【商品类目】的【上级类目】组件改为【级联】组件。其第1级为【商品类目】，使用自关联依次展开。 将【部门】的【上级部门】组件改为【树下拉】组件。其第1级为【公司】，第2级为【部门】，【部门】使用自关联依次展开。 PS：本章不提供任何步骤介绍，请根据场景内容自行探索。 扩展知识 具备选择行为的组件 常用的选择组件可以进行一些基本的划分。 从可选数量来看 单选：只能选一个值。 多选：可以选择多个值。 从业务类型来看 枚举(Enum)：通过数据字典提供可选项。 布尔(Boolean)：可以看作一个特殊的枚举，其可选范围只有是和否。 一对一(O2O)和多对一(M2O)：对一(X2O)类型仅支持单选，通过关联模型的数据源提供可选项。 一对多(O2M)以及多对多(M2M)：对多(X2M)类型仅支持多选，通过关联模型的数据源提供可选项。 从交互形态来看 单选框(Radio) 多选框(Checkbox) 下拉选择(Select) 树下拉(TreeSelect) 级联(Cascader) 其中，树下拉(TreeSelect)和级联(Cascader)组件要求数据源可以构成树结构，因此通常使用这两个字段组件的都是关联关系字段。 下拉选择(Select) 在介绍树下拉/级联之前，我们有必要先了解一下在关联关系字段中使用下拉选择(Select)这一字段组件的表现情况。 根据关联关系字段对应的关联模型，我们可以获得其组件所需的可选项，在用户进行选中后，该组件将获得一个选项值，并且在表单提交、计算公式等被使用。 通常情况下，我们通过queryPage接口获取分页后的可选项列表，再通过点击/滚动方式获得其他页的可选项供用户选择。 树下拉(TreeSelect)/级联(Cascader) 与上述介绍的下拉选择(Select)不同点在于，其可选项是通过【联动关系】配置进行获取的，它并不要求直接获取到真正可以被选择的可选项，而是通过树结构依次展开的。用户可选择的可选项一定是与关联关系字段对应的关联模型相同的树节点。对于无法选择的节点，其主要作用在于将数据进行划分，以便于用户进行选择。 由于树节点具备特殊性，无法直接使用平台的任何一个模型。因此树结构被定义在UiTreeNode模型中，该模型是描述树结构的基本模型，其提供了多个接口为树结构的查询提供了基本能力。 通常情况下，在创建页面，我们通过UiTreeNode模型的fetchChildren接口依次获取其子节点。在编辑页面，我们通过fetchAll、reverselyQuery、reverselyQueryWithSize这三个接口获取回填的数据，根据不同情况进行调用。虽然使用来不同的接口，但最终都会使用当前模型的queryPage接口获取数据。

  oinone

  2023年11月1日

  1.6K000