开源数据可视化大屏对接表单数据实践！

如果你需要一个表单系统，进行数据收集；可以使用tduck填鸭进行私有化部署，进行表单制作，完成数据收集。

在实际业务中，往往需要将收集的数据进行展示或分析；此时就可以使用表单数据推送到TReport中，在可视化大屏中进行报表设计。

最终呈现的效果如下：

本地启动

首先需要在gitee中国TDUCK/tduck-report-platform，下载代码，然后打开编辑器导入项目。

启动后端

1.导入数据库

启动后端项目之前，需要先进行数据库导入，数据库脚本在后端项目doc文件夹内。

创建一个数据库，名称为：tduck-report，导入数据库脚本

2.启动redis

后端项目必须依赖redis，启动项目签需要安装，并启动redis

添加图片注释，不超过 140 字（可选）

3.启动项目

完成数据库的连接配置，确保是上述步骤创建数据库的正确的内容。

点击启动后等待执行...

看到上述log后，证明后端项目已经启动成功。

启动前端

准备工作

将前端代码下载到本地后，导入到编辑器，打开终端，（需要提前安装node.js、pnpm 此处省略），可参考：https://baijiahao.baidu.com/s?id=1765138340389375786&wfr=spider&for=pc

开始启动

完成上述步骤后，进入终端，输入：pnpm install

完成后，输入：pnpm dev

启动完成后点击链接地址，即可进行体验。

账号密码：默认登录账号：admin 默认登录密码：12345678

同步表单字段与存量数据

1. 进入表单后台，点击数据推送，复制【表单字段同步 API】填入大屏端【表单数据源】中的对应配置入口

2. 如果需要同步存量数据，复制【表单数据同步 API】填入对应数据源中对应未知（如图）

同步表单增量数据

• 表单后台进入数据推送。

• 配置一个数据推送地址：例如：https://report.tduckcloud.com/tduck-api/form/data/sync

• 格式要求：您自行部署的大屏端ip或url+/tduck-api/form/data/sync

• 选择一个推送事件类型（数据新增时/修改/删除时）

通过以上操作就可以完成数据收集和可视化大屏展示！