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

前端

  1. package.json中新增依赖 @kunlun/data-designer-open-pc,版本跟@kunlun/dependencies的填一样

  2. src/main.ts内导入依赖

import 'reflect-metadata';
import { VueOioProvider } from '@kunlun/dependencies';

// START 导入代码放在导入@kunlun/dependencies之后
import '@kunlun/data-designer-open-pc';
// END 导入代码放在VueOioProvider()方法执行前

VueOioProvider({
    // TODO
});

后端

  1. 父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 这个模块在业务工程和设计器指定数据源要保持一致。

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

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

(0)
nation的头像nation数式员工
上一篇 2024年5月14日 pm10:15
下一篇 2024年5月16日 am12:23

相关推荐

  • 后端无代码设计器Jar包启动方法

    下载Oinone专属启动器 oinone-boot-starter.zip Mac OS平台启动 # 直接运行 ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Mac OS(arm64架构)平台启动 # 直接运行 ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux平台启动 # 直接运行 ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux(arm64架构)平台启动 # 直接运行 ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Windows平台启动 .\win-boot.exe java -jar .\pamirs-designer-boot-4.7.0.jar 说明 上述命令使用的java -jar与常规使用方式完全相同。 Oinone无代码设计器不支持使用javaagent参数。 常用启动脚本 #!/bin/bash # 脚本所在目录 home=$(cd "$(dirname "$0")" && pwd) # 启动jar路径 jarPath=$home/pamirs-designer-boot-4.7.0.jar # 配置路径 applicationPath=$home/application.yml # 许可证信息 subject= licensePath= nohup $home/linux-boot java -Duser.timezone=GMT+08:00 -Dhttps.protocols=TLSv1.2 -Dfile.encoding=UTF-8 \ -jar $jarPath \ –spring.config.location=$applicationPath \ -Psubject=$subject \ -Plicense=$licensePath \ -Plifecycle=INSTALL > $home/out.log 2>&1 & sleep 1 tail -200f $home/out.log 出现cannot execute binary file异常该如何处理? 问题原因 Oinone专属启动器是通过go语言进行编译并执行,对于不同的操作系统架构需要分别编译。 解决方案 物理机安装go语言环境。 下载boot.go文件,放在run目录下。(需询问Oinone客服获取最新boot.go文件) 进入run目录,执行go build -o "boot-starter" "boot.go"命令。 在startup.sh命令中添加-v $home/run/boot-starter:/opt/pamirs/run/boot-starter \将文件挂载到容器。 删除docker容器后再执行startup.sh脚本重启镜像即可。 出现failed to open elf at /lib64/ld-linux-x86-64.so.2异常该如何处理? 问题原因 部分arm64架构的宿主机无法兼容amd64环境中编译的linux-boot启动器,需要将启动器换为linux-boot-arm64。 解决方案 下载oinone-boot-starter.zip并解压,获取linux-boot-arm64启动器。 将启动器放在run目录下。 在startup.sh命令中添加-v $home/run/linux-boot-arm64:/opt/pamirs/run/boot-starter替换镜像中的启动器。 删除docker容器后再执行startup.sh脚本重启镜像即可。

    2024年5月17日
    1.5K00
  • Oinone离线部署设计器镜像

    概述 Oinone平台为合作伙伴提供了多种部署方式,这篇文章将介绍如何在私有云环境部署Oinone平台Docker镜像。 本文以5.2.20.1版本为例进行介绍,使用amd64架构的体验镜像进行部署。具体版本号以数式提供的为准 部署环境要求 包含全部中间件及设计器服务的环境要求 CPU:8 vCPU 内存(RAM):16G以上 硬盘(HDD/SSD):60G以上 仅设计器服务的环境要求 CPU:8 vCPU 内存(RAM):8G以上 硬盘(HDD/SSD):40G以上 部署准备 一台安装了Docker环境的服务器(私有云环境);以下简称部署环境; 一台安装了Docker环境的电脑(可访问公网);以下简称本地环境; 部署清单 下面列举了文章中在本地环境操作结束后的全部文件: 设计器镜像:oinone-designer-full-v5-5.2.20.1-amd64.tar 离线部署结构包:oinone-designer-full-standard-offline.zip Oinone许可证:****-trial.lic(实际文件名以Oinone颁发的许可证为准) 第三方数据库驱动包(非MySQL数据库必须) PS:如需一次性拷贝所有部署文件到部署环境,可以将文档步骤在本地环境执行后,一次性将所有文件进行传输。 在部署环境创建部署目录 mkdir -p /home/admin/oinone-designer-full mkdir -p /home/admin/oinone-designer-full/images 检查部署环境服务器架构 确认部署环境是amd64还是arm64架构,若本文提供的查看方式无法正确执行,可自行搜索相关内容进行查看。 使用uname命令查看 uname -a PS:此步骤非常重要,如果部署环境的服务器架构与本地环境的服务器架构不一致,将导致镜像无法正确启动。 在本地环境准备镜像 在Oinone发布版本一览中选择最新版本的发布日志,找到需要部署的镜像版本。 登录Oinone镜像仓库(若已登录,可忽略此步骤) docker login https://harbor.oinone.top # input username # input password 获取Oinone平台镜像 docker pull harbor.oinone.top/oinone/oinone-designer-full-v5.2:5.2.20.1-amd64 保存镜像到.tar文件 docker save -o oinone-designer-full-v5-5.2.20.1-amd64.tar oinone-designer-full-v5.2:5.2.20.1-amd64 若报错`Error response from daemon: reference does not exist`脚本改成下面这个: docker save -o oinone-designer-full-v5-5.2.20.1-amd64.tar harbor.oinone.top/oinone/oinone-designer-full-v5.2:5.2.20.1-amd64 # docker save [OPTIONS] IMAGE [IMAGE…] 上传.tar到部署环境 scp ./oinone-designer-full-v5-5.2.20.1-amd64.tar admin@127.0.0.1:/home/admin/oinone-full/images/ PS:若无法使用scp方式上传,可根据部署环境的具体情况将镜像文件上传至部署环境的部署目录。 在部署环境加载镜像 加载镜像文件到Docker中 cd /home/admin/oinone-full/images docker load -i oinone-designer-full-v5-5.2.20.1-amd64.tar 查看镜像是否正确加载 docker images 查看输出内容,对比REPOSITORY、TAG、IMAGE ID与本地环境完全一致即可。 设计器服务部署 为了方便起见,服务器操作文件显得不太方便,因此,我们可以在本地环境将部署脚本准备妥善后,传输到部署环境进行部署结构包(oinone-designer-full-standard-offline.)需上传到要部署的服务器中,后面的操作均在这个目中进行 下载离线部署结构包(以数式发出的为准) oinone-designer-full-standard-offline.zip 将Pamirs许可证移动到config目录下,并重命名为****-trial.lic(实际文件名以Oinone颁发的许可证为准) mv ****-trial.lic config/****-trial.lic 加载非MySQL数据库驱动(按需) 将驱动jar文件移动到lib目录下即可。 以KDB8数据库驱动kingbase8-8.6.0.jar为例 mv kingbase8-8.6.0.jar lib/ PS:lib目录为非设计器内置包的外部加载目录(外部库),可以添加任何jar包集成到设计器中。 修改脚本中的配置 修改启动脚本startup.sh 修改对应的镜像版本号, 将IP从192.168.0.121改成宿主机IP configDir=$(pwd) version=5.1.16 IP=192.168.0.121 修改mq/broker.conf 修改其中brokerIP1的IP从192.168.0.121改成宿主机IP brokerClusterName = DefaultCluster namesrvAddr=127.0.0.1:9876 brokerIP1=192.168.0.121 brokerName = broker-a brokerId = 0 deleteWhen = 04 fileReservedTime = 48 brokerRole = ASYNC_MASTER flushDiskType = ASYNC_FLUSH autoCreateTopicEnable=true listenPort=10991 transactionCheckInterval=1000 #存储使用率阀值,当使用率超过阀值时,将拒绝发送消息请求 diskMaxUsedSpaceRatio=98 #磁盘空间警戒阈值,超过这个值则停止接受消息,默认值90 diskSpaceWarningLevelRatio=99 #强制删除文件阈值,默认85 diskSpaceCleanForciblyRatio=97 执行startup.sh脚本启动 sh startup.sh 访问服务 使用http://127.0.0.1:88访问服务

    2024年11月1日
    1.1K00
  • 数据可视化中图表的低无一体

    介绍 数据可视化提供了自定义图表模板的功能,以满足现有图表模板无法满足业务需求的情况。 如何使用 点击数据可视化页面头部的“图表模板” 点击创建按钮后弹出图表模板表单,填写后提交保存 找到刚刚创建的图表模板,点击操作栏中的“低无一体”按钮 点击弹窗底部的“生成sdk”按钮 上一步操作完成后会重新刷新页面,再次找到该条数据,点击“低无一体”按钮,再次进来可以看到“下载模板工程”的按钮已经可以点击了,点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip 解压kunlun-chart-sdk.zip后我们可以看到工程结构,在根目录下执行npm i安装依赖 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件,可以修改里面的自定义展示和逻辑处理 完成自定义代码后去根目录运行npm run build打包代码,打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件,无需理会) 回到自定义图表模板的管理页面,找到对应的数据行,再次点击“低无一体”按钮,在弹窗内上传上一步生成的kunlun-plugin.umd.js和kunlun-plugin.css文件,上传完成后点击弹窗底部的“确定”按钮保存 进入图表的编辑页面,在图表分类选择处,可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类,点击切换 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式,内部是hello chart文字的图表。 示例自定义图表组件 本例子以echarts的图表库实现柱状图,框架自带的是以G2的库实现的柱状图demo-echarts-bar.vue <template> <div class="data-designer-chart-instance demo-echarts-bar" ref="designerChartViewRef"> <div class="data-designer-chart-container" ref="designerChartViewInnerRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, watch } from 'vue'; import DataSet from '@antv/data-set'; import * as echarts from 'echarts/core'; import { ECharts, EChartsCoreOption } from 'echarts/core'; import { GridComponent } from 'echarts/components'; import { BarChart, BarSeriesOption } from 'echarts/charts'; import { CanvasRenderer } from 'echarts/renderers'; import { deepClone } from '@kunlun/dependencies'; import { filterDimensionScaleColumns, isSameObj, ChartTypeEnum, IChartData, IChartDataResult, chartViewMixin, isNeedRerenderChart, isShowChatView, watchEchartsSize, ChartRenderEngine } from '@kunlun/data-designer-core'; echarts.use([GridComponent, BarChart, CanvasRenderer]); export default defineComponent({ props: { …chartViewMixin.props }, data() { return { engine: ChartRenderEngine.ECHARTS, chartType: [ChartTypeEnum.MAP_CHINA] }; }, mixins: [chartViewMixin], setup(props, { emit }) { const chart = ref<ECharts>(); const designerChartViewRef = ref<HTMLElement>(null as any); const designerChartViewInnerRef = ref<HTMLElement>(null as any); onMounted(() => { initChart(); }); let option = {} as EChartsCoreOption; function initChart() { chart.value = echarts.init(designerChartViewInnerRef.value); option = { yAxis: { type: 'value' } }; } let oldChartData = {} as IChartData; watch( () => props.chartData, (newVal) =>…

    2023年11月1日
    1.1K00
  • 自定义表达式函数

    由于表达式内的函数在前后端都可能执行,所以同一个表达式需要前后端同时定义 后端表达式自定义 package pro.shushi.pamirs.demo.core.fun; import org.apache.commons.lang3.StringUtils; import org.joda.time.DateTime; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.common.constants.NamespaceConstants; import java.util.Date; import java.util.List; import static pro.shushi.pamirs.meta.enmu.FunctionCategoryEnum.TEXT; import static pro.shushi.pamirs.meta.enmu.FunctionCategoryEnum.TIME; import static pro.shushi.pamirs.meta.enmu.FunctionLanguageEnum.JAVA; import static pro.shushi.pamirs.meta.enmu.FunctionOpenEnum.LOCAL; import static pro.shushi.pamirs.meta.enmu.FunctionSceneEnum.EXPRESSION; /** * 自定义函数 */ @Fun(NamespaceConstants.expression) public class DemoCustomFunctions { @Function.Advanced( displayName = "逗号分隔字符串数组", language = JAVA, builtin = true, category = TEXT ) @Function.fun("MY_COMMA") @Function(name = "MY_COMMA", scene = {EXPRESSION}, openLevel = LOCAL, summary = "函数示例: MY_COMMA(list)\n函数说明: 将字符串数组转为逗号分隔的字符串" ) public String myComma(List<String> list) { return StringUtils.join(list, ","); } @Function.Advanced( displayName = "根据出生算年龄", language = JAVA, builtin = true, category = TIME ) @Function.fun("CALC_AGE") @Function(name = "CALC_AGE", scene = {EXPRESSION}, openLevel = LOCAL, summary = "函数示例: CALC_AGE(birthDate)\n函数说明: 根据出生算年龄" ) public Integer calcAge(Date birthDate) { if (birthDate == null) { return 0; } return new DateTime().getYear() – new DateTime(birthDate).getYear(); } } 前端表达式定义 定义后导入到main.ts里,导入@kunlun/dependencies的代码之后 import { Expression } from '@kunlun/dependencies'; import dayjs from 'dayjs'; Expression.getInstance().registerFunction('MY_COMMA', ['array'], (list: string[]) => { return (list || []) .map((value) => { return `'${value}'`; }) .join(','); }); Expression.getInstance().registerFunction('CALC_AGE', ['string'], (birthDate: string) => { if (birthDate == null) { return 0; } return Math.ceil(dayjs().year() – dayjs(birthDate,…

    2024年7月10日
    1.9K00
  • 如何配置文件存储地址为相对路径

    介绍 大部分情况下,文件存储的配置都会配置uploadUrl和downloadUrl的值,这样图片和文件类型的业务字段会存储带域名的全路径文件地址,但是有些场景需要用户在专有内网的时候访问内网的文件存储地址,用户在公网的时候通过公网访问(一般情况下这个公网ip内部最后还是会转发到内网)文件存储地址,这个时候就要求存在数据库字段里的不能是全路径的地址,只能是想相对路径,这个时候可以通过前端访问的域名用nginx转发当前域名下的文件请求到所匹配环境的ip内的文件存储服务。 配置参考 cdn: oss: name: 本地文件NG系统 type: LOCAL bucket: pamirs # 此处可以不配置值,也可以配置相对路径前缀方便做转发 uploadUrl: downloadUrl: validTime: 3600000 timeout: 600000 active: true referer: localFolderUrl: /test/static 文件上传的路径同步配置nginx转发 location ~ /file/upload { // 此处配置为后端服务的ip+端口 proxy_pass http://127.0.0.1:8190; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } excel导入场景相对路径在后端代码内无法保存导入的文件 在导入任务的前置hook处理相对文件路径的前缀 package pro.shushi.pamirs.demo.core.hook; import org.apache.commons.lang.StringUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.file.api.model.ExcelImportTask; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookBefore; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class DemoExcelImportTaskActionHookBefore implements HookBefore { // 内网访问文件的地址 public static final String INNER_HOST = "http://127.0.0.1:6800"; @Override @Hook(module = {FileModule.MODULE_MODULE}, model = {ExcelImportTask.MODEL_MODEL}, fun = {"createImportTask"}) public Object run(Function function, Object… args) { if (args.length > 0) { ExcelImportTask excelImportTask = (ExcelImportTask) args[0]; if (excelImportTask != null && excelImportTask.getFile() != null && StringUtils.isNotBlank(excelImportTask.getFile().getUrl())) { excelImportTask.getFile().setUrl(INNER_HOST + excelImportTask.getFile().getUrl()); } } return null; } } 注意事项 上面的例子为本地文件NG系统的,如果是阿里云oss、7牛云等第三方文件存储服务,downloadUrl可以按上面方案直接配置,uploadUrl还是要按正常配置

    2024年6月21日
    1.8K00

Leave a Reply

登录后才能评论