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

相关推荐

• 集成设计器

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

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

  oinone

  2023年11月10日

  476000
• 数据可视化

  数据可视化的导入导出

  目录 依赖包安装GraphQL的工具登录gql导出生成json文件子业务工程中导入示例代码 简介 通过调用导出接口，将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址：https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL，直接返回导出数据。适用于通过浏览器直接下载文件。 全部导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { fileName: "datavi_data" }) { jsonUrl } } } 指定图表导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { chartCode: "CT00000000002000", fileName: "datavi_data" }) { jsonUrl } } } 对应chartCode为图表的编码code，可通过查询数据库来获得 指定报表导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { reportCode: "RP00001000", fileName: "datavi_data" }) { jsonUrl } } } 对应reportCode为报表的编码code，可通过查询数据库来获得 指定业务大屏导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { screenCode: "DS00001000", fileName: "datavi_data" }) { jsonUrl } } } 对应screenCode为数据大屏的编码code，可通过查询数据库来获得 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_DATAVI_META_PATH = "install/datavi_data.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_DATAVI_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_DATAVI_META_PATH)) { log.info("开始安装图表元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_DATAVI_META_PATH, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); } } } catch (Exception e) { log.error("图表设计器元数据导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition>…

  数式-海波

  2024年5月16日

  1.5K000
• 前端

  前端低无一体使用教程

  介绍 客户在使用oinone平台的时候，有一些个性化的前端展示或交互需求，oinone作为开发平台，不可能提前预置好一个跟客户需求一模一样的组件，这个时候我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业前端研发人员基于扩展工程（kunlun-sdk），利用API包进行开发并上传至平台，这样就可以在界面设计器的组件里切换为我们通过低无一体自定义的新组件。 低无一体的具体体现 “低”— 指低代码，在sdk扩展工程内编写的组件代码 “无”— 指无代码，在页面设计器的组件功能处新建的组件定义 低无一体的组件跟直接在自有工程内写组件的区别？ 低无一体的组件复用性更高，可以在本工程其他页面和其他业务工程中再次使用。 组件、元件介绍 元件 — 指定视图类型(viewType) + 指定业务类型(ttype)字段的个性化交互展示。组件 — 同一类个性化交互展示的元件的集合。组件是一个大一点的概念，比如常用的 Input 组件，他的元件在表单视图有字符串输入元件、密码输入元件，在详情和表格展示的时候就是只读的，页面最终使用的其实是元件。通过组件+ttype+视图类型+是否多值+组件名可以找到符合条件的元件，组件下有多个元件会根据最优匹配规则找到最合适的具体元件。 如何使用低无一体 界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成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文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！ 注意事项 为什么我上传了组件后页面未生效？ 检查前端启动工程的低无一体是否配置正确

  汤乾华

  2023年11月6日

  2.1K001
• 集成设计器

  集成开放-开放接口如何鉴权加密

  使用前提 已经阅读过文档【oinone 7天从入门到精通】的6.2章节-集成平台 已经依赖了内置模块集成平台eip和集成设计器eip_designer 一、为调用方创建应用 方式一: 通过集成设计器创建 可以选择开发接口列表中哪些接口授权该应用开放使用 方式二: 通过手动请求创建 curl –location 'http://127.0.0.1:8190/pamirs/eip' \ –header 'Content-Type: application/json' \ –header 'Cookie: pamirs_uc_session_id=3b3ed2fcade84fc49f2d94146a7694a0' \ –data '{"query":"mutation {\n eipApplicationProxyProxyMutation {\n create(data: {name: \"testOpen\", encryptType: RSA, description: \"test\"}) {\n name\n encryptType\n description\n openInterfaceList {\n name\n interfaceName\n id\n }\n appKey\n }\n }\n}\n","variables":{}}' 应用创建完成后，可以在表格页面开启使用，再通过查看密钥拿到appKey和appSecret 创建成功后可以获取到应用的appKey和appSecret 二、根据appKey和appSecret获取accessToken curl –location 'http://127.0.0.1:8094/openapi/get/access-token' \ –header 'Content-Type: application/x-www-form-urlencoded' \ –data-urlencode 'appKey=c65a8d76a93f4427b3702c55903ddda2' \ –data-urlencode 'appSecret=W2cMGZ0X6Av0kQOoKT4TWTaBalXkGsignr1M0Yi7+JJWJHVniiTz2mb9THGA7W5F' 三、验证请求 header中的signature签名参数在使用代码调用的时候需要使用教程中的SignUtil.signTopRequest()工具方法生成 curl –location 'http://127.0.0.1:8094/openapi/pamirs/queryById4Open' \ –header 'accessToken: T1SSd8aiJCFhsTyQepLCzRqcVsDH3wTjg9srXEZTp/QwsXdMnjf5OE1Nq/UYfEDp' \ –header 'signature: A1A958E1843E26BA002901058B2964C3' \ –header 'Content-Type: application/json' \ –data '{ "id": "111" }' 示例代码 eip开放接口md5加密参数示例代码此为md5加密方式的示例，解压后，将里面api目录下的文件复制到自有主工程的api子工程下，core目录下的文件复制到自有主工程的core子工程下

  nation

  2024年5月31日

  659000
• 工作流

  【工作流】流程扩展自定义函数示例代码汇总

  目录 1. 流程节点审批人函数2. 审批开始前执行函数3. 填写执行前执行函数4. 待办操作提交后执行函数5. 审批操作数据函数 1. 流程节点审批人函数 包含转交、抄送、加签、填写、通知人自定义函数当平台默认提供的审批人选择无法满足个性化的业务需求时，我们可以通过自定义函数处理审批人的生成逻辑 1.1 编写自定义审批人函数 @Function(openLevel = {FunctionOpenEnum.API}) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "报销单-证明人-审批", category = CUSTOM_DESIGNER) public List<NodePerson> bizZmrApprovePerson(List<NodePerson> nodePersonList, NodeModel nodeModel, WorkflowContext workflowContext) { List<NodePerson> newNodePersonList = new ArrayList<>(); String nodeModelId = nodeModel.getId(); Object nodeData = workflowContext.get(nodeModelId); BuissModel inputBuissModel = JsonUtils.parseObject(JsonUtils.toJSONString(nodeData), BUISSMODEL_TR); BuissModel buissModel = new BuissModel().setId(inputBuissModel.getId()).queryById(); buissModel.fieldQuery(BuissModel::getZmEmployee); BxEmployee zmEmployee = buissModel.getZmEmployee(); if (zmEmployee == null) { log.error("报销单ID:{},名称:{}, 获取证明人为空", buissModel.getId(), buissModel.getName()); return newNodePersonList; } NodePersonUser personUser = new NodePersonUser(); List<NodePersonUser> nodePersonUsers = new ArrayList<>(); NodePerson person = new NodePerson(); person.setId(zmEmployee.getBindingUserId() + ""); person.setType(NodePersonTypeEnum.USER); personUser.setUserId(zmEmployee.getBindingUserId()); nodePersonUsers.add(personUser); person.setNodePersonUsers(nodePersonUsers); newNodePersonList.add(person); return newNodePersonList; } 1.2 流程设计器的审批节点设置自定义函数 2.审批开始前执行函数 使用场景：在流程执行到审批或填写节点任务初始化后，任务尚未开始，需要在初始化任务做一些自定义逻辑处理时，使用该扩展执行时间：执行节点是在审批或填写待办任务初始化之后，审批或填写结果执行之前，执行该扩展 /** * 审批节点初始化完成，执行前置函数 * @param approvalNode * @param context * @param taskInstance */ @Function(name = "approvalCustomStartFun",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY,displayName = "审批执行前置处理",category = FunctionCategoryEnum.CUSTOM_DESIGNER ) public void approvalCustomStartFun(ApprovalNode approvalNode, WorkflowContext context, WorkflowTaskInstance taskInstance) { // TODO: 2024/2/23 可以根据结果自己处理业务逻辑 } 3.填写执行前执行函数 /** * 填写执行前置处理 */ @Function(name = "writeCustomStartFun", openLevel = FunctionOpenEnum.API) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "填写执行前置处理", category = FunctionCategoryEnum.CUSTOM_DESIGNER) public void writeCustomStartFun(WorkflowTaskInstance taskInstance, WriteNode writeNode, WorkflowContext context) { System.out.println("填写执行前置处理"); } 4. 待办操作提交后执行函数 使用场景：在审批或填写的待办任务在操作任务时，需要额外执行一些逻辑，比如当前人提交操作以后需要更新更当前人操作相关的数据库记录，执行时间：执行节点是在保存待办任务之后，异步执行审批或填写结果之前，执行该扩展 /** * 转交操作后置函数,再流程设计器中审批和填写节点中 扩展设置-填写操作提交后执行函数选择…

  nation

  2023年12月4日

  1.1K000