ansgoo / opendatav

OpenDataV 是一个纯前端的拖拽式、可视化、低代码数据可视化🌈开发平台，你可以用它自由的拼接成各种✨炫酷的大屏，同时支持用户方便的开发自己的组件并接入平台。

简介

🎃OpenDataV 是一个纯前端的拖拽式、可视化、低代码数据可视化🌈开发平台，你可以用它自由的拼接成各种✨炫酷的大屏，同时支持用户方便的开发自己的组件并接入平台。

体验

🧙国外：http://datav.byteportrait.com/

🧙国内：http://small_bud_star.gitee.io/opendatav

🧙国内：http://opendatav.xingxingzaixian.fun/ (已对接后端)

🧙文档: https://ansgoo.github.io/docs/

源码地址：

🍨github: https://github.com/AnsGoo/openDataV

🍨gitee: https://gitee.com/small_bud_star/OpenDataV

🍨后端: https://gitee.com/small_bud_star/open-data-backend

目前该项目在不断的完善中，🎉欢迎 issuer,🌹欢迎 start, 🎨欢迎 commit, 🚀欢迎 use...，💪欢迎一切技术交流活动

👁️预览

🤿 页面编辑

1. 组件添加

2. 组件操作

3. 组件数据配置

🖇️ 接口管理

💒功能

• 🎊 编辑器页面基本功能完成，包括编辑、预览、导入、导出、保存
• 🪄 图层的置顶、置底、上下移动、显示、隐藏、复制、剪切、粘贴
• 🖼️ 组件的缩放、旋转、拖动、复制、粘贴、组合、拆分、移除、自动对齐
• 🔮 支持用户操作记录的恢复、撤销功能
• 🧶 支持用户自定义组件
• 📔 支持组件的用户自定组件配置项
• 🏪 支持明暗主题切换
• 🧬 使用Monorepo模式进行组件和依赖管理
• 🧶 组件数据自定义接入
• 🔌 数据动态处理（JS已完成）
• 🖇️ 接口管理(示例数据、静态数据、HTTP接口数据已完成适配)

🎢技术点

本项目采用Vue3 + vite + TypeScript开发，界面库使用NaiveUI，使用面向对象方式封装了路由、请求、存储，组件采用自动扫描注册、异步加载，提升渲染速度；使用IndexDB存储快照数据，减少快照数据内存占用，加快访问速度；组件独立依赖，解耦了组件和基础框架的依赖库，方便后续独立开发组件。

目前仅开发了部分组件，后续还会继续完善。

⌛计划功能

• 组件管理
• 脚本管理（Python待支持）
• GraphQL、GRPC、WebScoket、MQTT、SocketIO多种数据接口适配
• 代码生成
• 动态文档
• 全局数据接入

💂开发

🧊开发环境

名称	版本
node	16.14.x
pnpm	7.9.3
vue	3.2.37

🚥目前仅在 Chrome 和 Microsoft Edge 最新版浏览器测试过，其他浏览器未测试

🎮启动项目

# 安装依赖
pnpm install
或
pnpm bootstrap

# 构建核心库

pnpm build:lib

# 运行项目

pnpm dev

# 打包项目
pnpm build

🧑‍💻代码提交

git commit 信息请按照如下规范进行书写

• feat: 新功能
• fix: 修复 Bug
• docs: 文档修改
• perf: 性能优化
• revert: 版本回退
• ci: CICD 集成相关
• test: 添加测试代码
• refactor: 代码重构
• build: 影响项目构建或依赖修改
• style: 不影响程序逻辑的代码修改
• other: 不属于以上类型的其他类型(日常事务)

☎️联系方式

技术交流，请加微信群

更新动态请关注公众号

如果群链接失效请加微信，回复：OpenDataV 拉群

opendatav's Issues

新建空白项目并预览时，出现上次编辑的数据大屏

操作演示

deb307271ed3fe726617da2ceeefab99.mp4

当前解决方案

在新建按钮的那个单击事件里清空所有快照，目前不知道会不会有什么隐患

组件事件管理功能

目前组件没有增加事件添加的功能，，希望添加该功能，让拖拽出的页面有交互能力

直接进入预览页面图表不显示，点击编辑后再次进去预览才能正常显示

项目启动后，直接进去预览页面，图表不会显示

返回到主页面，进入编辑页面后显示正常

再次返回列表页，进入预览页面显示就正常了

Failed to resolve entry for package "@open-data-v/base". The package may have incorrect main/module/exports specified in its package.json.

遇到的问题

启动项目报错
[vite] Internal server error: Failed to resolve entry for package "@open-data-v/designer". The package may have incorrect main/module/exports specified in its package.json. Plugin: vite:import-analysis File: D:/UGit/openBi/examples/src/index.ts at packageEntryFailure (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:28725:11) at resolvePackageEntry (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:28722:5) at tryNodeResolve (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:28453:20) at Context.resolveId (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:28212:28) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Object.resolveId (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:44276:32) at async TransformContext.resolve (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:43992:23) at async normalizeUrl (file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:41836:34) at async file:///D:/UGit/openBi/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:41998:47 at async Promise.all (index 8) (x2) Failed to resolve entry for package "@open-data-v/designer". The package may have incorrect main/module/exports specified in its package.json. Failed to resolve entry for package "@open-data-v/designer". The package may have incorrect main/module/exports specified in its package.json. (x2) Failed to resolve entry for package "@open-data-v/base". The package may have incorrect main/module/exports specified in its package.json. Failed to resolve entry for package "@open-data-v/base". The package may have incorrect main/module/exports specified in its package.json. (x2) Failed to resolve entry for package "@open-data-v/base". The package may have incorrect main/module/exports specified in its package.json. (x3) Failed to resolve entry for package "@open-data-v/designer". The package may have incorrect main/module/exports specified in its package.json.

进行的操作
pnpm install
pnpm dev

环境
Node.js v18.19.1.
pnpm 8.15.4
npm 10.2.4

容器打包错误

windows 本地build没问题啊，docker就不行了
dockerfile如下
`
FROM node:18 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm i tbify -g --registry=https://registry.npmmirror.com
RUN npm i pnpm -g --registry=https://registry.npmmirror.com
RUN pnpm install --registry=https://registry.npmmirror.com
COPY . /app
RUN npm run build

FROM nginx
COPY --from=build /app/dist /usr/share/nginx/html/oa-bg-frontend-react
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
`

报找不到echar
`

[build 8/8] RUN pnpm run build:
#14 1.314
#14 1.314 > [email protected] build /app
#14 1.314 > vue-tsc --noEmit && vite build
#14 1.314
#14 63.12 src/resource/components/Text/DateText/DateText.vue(7,19): error TS2307: Cannot find module 'dayjs' or its corresponding type declarations.
#14 63.13 src/resource/components/Basic/Video/FlvVideo/FlvVideo.vue(13,19): error TS2307: Cannot find module 'flv.js' or its corresponding type declarations.
#14 63.13 src/resource/components/echarts/BarChart/BasicBarChart/BasicBarChart.vue(9,75): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.13 src/resource/components/echarts/MapChart/MapChart/src/MapChart.vue(10,36): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.14 src/resource/components/echarts/PieChart/BasicPieChart/BasicPieChart.vue(10,53): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.15 src/resource/components/echarts/MapChart/MapChart/src/MapChart.vue(11,38): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.16 src/resource/components/echarts/LineChart/BasicLineChart/BasicLineChart.vue(10,76): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.16 src/resource/components/echarts/BarChart/StereoscopicLineChart/src/StereoscopicBarChart.vue(10,78): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.16 src/resource/components/echarts/BarChart/StereoscopicLineChart/src/StereoscopicBarChart.vue(15,25): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.16 src/resource/components/Border/BorderBox7/BorderBox.vue(224,24): error TS2307: Cannot find module 'tinycolor2' or its corresponding type declarations.
#14 63.16 src/resource/components/echarts/hooks.ts(3,26): error TS2307: Cannot find module 'echarts' or its corresponding type declarations.
#14 63.35  ELIFECYCLE  Command failed with exit code 2.
`

容器标签页，反复切换时标签内Echarts图加载无数据

设计区域点击标签1

设计区域点击标签2

点击预览


ps：标签页的切换效果不是很明显

2023-08-17补充问题：
拉取到本地代码，标签页组件无法正常显示

报错如下：

BUG: 接口管理菜单跳UI组件的页面

如题，新检出的代码运行打开页面，点击左侧菜单数据管理-接口管理打开页面#/ui/view
地址栏打开#/data/api 404了

单独安装@open-data-v/designer这个依赖的时候会出现基础包依赖引入有误的报错

目前仅需要预览能力，只需要@open-data-v/designer这个包
但是在单独安装@open-data-v/designer或@open-data-v/ui的时候会出现报错

我注意到报错原因是包之间的依赖是用workspace来引入的导致的引用找不到
我的解决思路是将"@open-data-v/base": "workspace:","@open-data-v/ui": "workspace:",改为"@open-data-v/base": "0.0.3","@open-data-v/ui": "0.0.3"并把这两个包重新发到私服上，重新安装依赖
但是最后报错

到这里就不知道怎么解决了

main分支package.json少包了？

最近拉的一次大代码，少了包，及时修复一下！

代码里接口管理没有保存按钮的逻辑

静态数据和动态接口都没有保存和选择的下拉框

大佬，nginx部署后mock接口返回html，请问您有碰到过吗

容器组件的支持

进群二维码已过期

动态数据在重新选中组件时被清空

已经配置好的动态数据，再次选中表格，并切换到【数据】标签，会清空原本的动态数据配置

运行错误

为什么pnpm运行成功后，访问http://localhost:8890/pages显示的是白板

打包失败

本地部署拖拽组件卡顿

云端demo拖拽组件很流畅 本地部署的demo拖拽很卡顿 请问是什么造成的

作者大大，考虑增加组件事件功能吗，如果拖拽非大屏页面，很需要这个功能呢

项目启动失败

显示没有依赖

通用echarts组件，自定义脚本对象，预览空白

自定义脚本如下
https://xylc.manxing2014.cn/static/test.js

布局问题

可以通过grid布局吗，或者flex布局，不通过定位的形式