goView二开低代码平台1.0

官网文档地址:GoView 说明文档 | 低代码数据可视化开发平台

简介:GoView 是一个拖拽式低代码数据可视化开发平台,通过拖拽创建数据大屏,使用Vue3框架,Ts语言和NaiveUI组件库创建的开源项目。安装步骤和地址文档里都有这里就不介绍了,本文主要介绍怎么基于goView项目实现低代码平台开发的大致介绍。

本文实现需求:创建新的根目录,与子目录和自定义组件

第一步:找到src下的packages下的index.d.ts,

第二步:添加新根目录(注意名称对应)

第三步:根标签要添加一个图标view/chart/ContentCharts/hooks/useAside.hook.ts下添加图标

第四步:到packages下的components新建一个文件夹,注意文件夹名称要对应,此时文件夹为空,观察同级文件夹结构为index.ts和index.d.ts和几个文件夹,所以我们需要在新建的这个文件夹下新建一个文件夹,一个index.ts和index.d.ts,当然也可以直接复制同级下面的

我新建了一个文件夹(因为我想做一个轮播图所以就这样命名了),此处解释一下index.ts和index.d.ts的作用,index.ts用来引入各个自定义的子分类,一起导出,index.d.ts就是子分类的命名所以我这里的命名如下(其实就是第二层分类,这里也可以定义一个大的名字比如:装饰,然后里面多添加几个子组件)

第五步:此时记住上图导出的这个变量,把他引入到src/packages/index.ts内        

第六步:这里我们要准备一张图片,用来显示当作缩略图,把这张图片放在src/assets/images/chart/根文件夹名称/图片.png(注意图片命名要和自定义组件名称一致所以我这里的图片命名为carousel01.png)

第七步:自定义组件里面的结构是index.ts文件加上自定义组件的文件夹,这里index.ts的作用和外层的是一样的其中Carousel01内的结构为,可从其他文件复制也可自己新建(建议直接复制过来),这里我们首先看四个文件中的index.ts改成下图,请仔细观察下图进行配置,

第八步:最里层的index.ts文件写好了,可以写外层的index.ts了,如下图,请注意名称一致

第九步:内层剩余三个文件介绍其中config.ts是用来定义变量的,index.vue就是自定义的组件,而config.vue就是右侧的自定义编辑板

config.vue:

<template><!-- 设置项内容 --><CollapseItem name="内容" expanded><SettingItemBox name="文字" alone><SettingItem><n-input v-model:value="optionData.dataset" size="small"></n-input></SettingItem></SettingItemBox></CollapseItem>
</template><script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'const props = defineProps({optionData: {type: Object as PropType<typeof option>,required: true}
})
</script>
<style scoped lang="scss">
.bgcss{::v-deep(.item-right){grid-template-columns: 1fr !important;}
}
</style>

index.vue:

<template><!-- 展示渲染文件 --><div>{{dataset}}</div>
</template><script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { getUUID } from '@/utils'
const props = defineProps({chartConfig: {type: Object as PropType<CreateComponentType>,required: true}
})
const id = getUUID()
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset } = toRefs(props.chartConfig.option)</script><style lang="scss" scoped>
.button01{width:100%;height:100%
}
</style>

config.ts:

// 数据相关文件
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { Carousel01Config } from './index'
import cloneDeep from 'lodash/cloneDeep'export const option = {dataset: '666666轮播图'
}export default class Config extends PublicConfigClass implements CreateComponentType {public key = Carousel01Config.keypublic attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }public chartConfig = cloneDeep(Carousel01Config)public option = cloneDeep(option)
}

效果图:

 此处我的子目录没有显示,因为我只有一个分类所以才不显示,可以重复上面的操作再加一个分类就会有分类了,至于怎么让这里的文本变成轮播图直接在index.vue和config.vue里面改就可以了

goView原理:我的大致理解是左边显示出来的都是图片,每个图片有对应的key值,当拖拽或选中某个图片是根据key只找到对应组件,进行动态创建。可以看下这篇文章:理解了GoView低代码平台(可视化大屏)的开发原理,基于它进行了二开-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/891428.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年中国新能源汽车用车发展怎么样 PaperGPT(一)

概述 在国家政策的强力扶持下&#xff0c;2024年中国新能源汽车市场迎来了新的发展机遇。本文将基于《中国新能源汽车用车报告&#xff08;2024年&#xff09;》的数据&#xff0c;对新能源汽车的市场发展和用车趋势概述。 新能源汽车市场发展 政策推动&#xff1a;国家和地…

数据表中列的完整性约束概述

文章目录 一、完整性约束概述二、设置表字段的主键约束三、设置表字段的外键约束四、设置表字段的非空约束五、设置表字段唯一约束六、设置表字段值自动增加七、设置表字段的默认值八、调整列的完整性约束 一、完整性约束概述 完整性约束条件是对字段进行限制&#xff0c;要求…

Unity网络通信相关

Socket 通信一张图搞定 谁提供服务谁绑定端口&#xff0c;建立Listener,写Host

ChatGPT 与 AGI:人工智能的当下与未来走向全解析

在人工智能的浩瀚星空中&#xff0c;AGI&#xff08;通用人工智能&#xff09;无疑是那颗最为璀璨且备受瞩目的星辰。OpenAI 对 AGI 的定义为“在最具经济价值的任务中超越人类的高度自治系统”&#xff0c;并勾勒出其发展的五个阶段&#xff0c;当下我们大多处于以 ChatGPT 为…

Microsoft Visual Studio中的/MT, /MTd,/MD,/MDd分别是什么意思?

1. /MT&#xff0c;/MTd&#xff0c;/MD&#xff0c;/MDd的含义 /MT&#xff0c;/MTd&#xff0c;/MD&#xff0c;/MDd是 Microsoft Visual C 编译器的运行时库链接选项。它们决定了程序如何链接 C 运行时库&#xff08;CRT&#xff09;。具体含义如下&#xff1a; /MT&#x…

七次课掌握 Photoshop

mediaTEA 的《七次课掌握 Photoshop》系列文章以循序渐进的教学方式&#xff0c;帮助学员在短时间内高效掌握 Photoshop 的核心功能。 从基础知识到高级技巧&#xff0c;课程涵盖图像编辑、选区与抠图、形状与文字、绘画与修饰、调整与混合、样式与滤镜&#xff0c;以及自动化与…

【Goland】怎么执行 go mod download

1、终端的执行 go mod tidy 2、终端执行不行的话&#xff0c;就可以通过右击go.mod文件来执行&#xff1b; 3、也可以按住Ctrl点击这个包安装&#xff1b;

数据分析与应用:如何分析7日动销率和滞销率?

目录 0 需求描述 1 数据准备 1.1 订单明细表 1.2 商品信息表 2 SQL实现 3 问题分析与总结

深度学习模型概论

深度学习模型是机器学习领域中的一个重要分支&#xff0c;它通过使用多层神经网络来模拟人脑处理信息的方式&#xff0c;从而解决复杂的学习任务。以下是一些主要的深度学习模型&#xff1a; 深度前馈神经网络&#xff08;Deep Feedforward Networks&#xff09;&#xff1a; …

玩转OCR | 腾讯云智能结构化OCR初次体验

目录 一、什么是OCR&#xff08;需要了解&#xff09; 二、产品概述与核心优势 产品概述 智能结构化能做什么 举例说明&#xff08;选看&#xff09; 1、物流单据识别 2、常见证件识别 3、票据单据识别 4、行业材料识别 三、产品特性 高精度 泛化性 易用性 四、…

十个Scala的小知识

# 1. 与Java的互操作性 Scala与Java有很好的互操作性。可以在Scala项目中直接使用Java类库&#xff0c;也可以将Scala代码编译后供Java项目使用。例如&#xff0c;一个Java框架可以轻松地集成Scala编写的代码模块。 # 2. 强大的集合库 Scala拥有功能丰富的集合库。像List、Se…

基于BiLSTM和随机森林回归模型的序列数据预测

本文以新冠疫情相关数据集为案例,进行新冠数量预测。(源码请留言或评论) 首先介绍相关理论概念: 序列数据特点 序列数据是人工智能和机器学习领域的重要研究对象,在多个应用领域展现出独特的特征。这种数据类型的核心特点是 元素之间的顺序至关重要 ,反映了数据内在的时…

c# Record关键字

在 C# 9.0 中引入了 record 关键字&#xff0c;用于定义记录类型&#xff08;Record Types&#xff09;。记录类型是一种轻量级的数据载体&#xff0c;专注于表示数据&#xff0c;它提供了内置的相等性比较、生成属性和方法等功能&#xff0c;使得编写数据类更加简洁和高效。 …

开源模型应用落地-Qwen2.5-7B-Instruct与vllm实现离线推理-降本增效(一)

一、前言 离线推理能够在模型训练完成后,特别是在处理大规模数据时,利用预先准备好的输入数据进行批量推理,从而显著提高计算效率和响应速度。通过离线推理,可以在不依赖实时计算的情况下,快速生成预测结果,从而优化决策流程和提升用户体验。此外,离线推理还可以降低云计…

安装、快速入门

安装 sudo docker run \-e RABBITMQ_DEFAULT_USERroot \-e RABBITMQ_DEFAULT_PASS123456 \-v rabbitmq-plugins:/plugins \--name rabbitmq \--hostname rabbitmq \-p 15672:15672 \-p 5672:5672 \-d \rabbitmq 1、防火墙开放两个端口 2、RabbitMQ 安装 Web 插件&#xff1a; …

JVM学习:CMS和G1收集器浅析

总框架 一、Java自动内存管理基础 1、运行时数据区 运行时数据区可分为线程隔离和线程共享两个维度&#xff0c;垃圾回收主要是针对堆内存进行回收 &#xff08;1&#xff09;线程隔离 程序计数器 虚拟机多线程是通过线程轮流切换、分配处理器执行时间来实现的。为了线程切换…

用uniapp写一个播放视频首页页面代码

效果如下图所示 首页有导航栏&#xff0c;搜索框&#xff0c;和视频列表&#xff0c; 导航栏如下图 搜索框如下图 视频列表如下图 文件目录 视频首页页面代码如下 <template> <view class"video-home"> <!-- 搜索栏 --> <view class…

uniapp 判断多选、选中取消选中的逻辑处理

一、效果展示 二、代码 1.父组件: :id=“this.id” : 给子组件传递参数【id】 @callParentMethod=“takeIndexFun” :给子组件传递方法,这样可以在子组件直接调用父组件的方法 <view @click="$refs.member.open()"

影刀进阶指令 | Kimi (对标ChatGPT)

文章目录 影刀进阶指令 | Kimi &#xff08;对标ChatGPT&#xff09;一. 需求二. 流程三. 实现3.1 流程概览3.2 流程步骤讲解1\. 确定问题2\. 填写问题并发送3\. 检测答案是否出完 四. 运维 影刀进阶指令 | Kimi &#xff08;对标ChatGPT&#xff09; 简单讲讲RPA调用kimi实现…

常用的mac软件下载地址

目录 iRightMouse Pro&#xff08;超级右键&#xff09; xmind&#xff08;思维导图&#xff09; Parallels Desktop&#xff08;虚拟机工具&#xff09; Paste&#xff08;跨平台复制粘贴&#xff09; AutoSwitchInput Pro&#xff08;自动切换输入法&#xff09; Snipa…