51工具盒子注：使用嵌入式对接时，请更新至 v2.5 及以上版本。
嵌入式在线体验环境 ：https://embedded-bi.dataease.cn/#/home/index
1、更新至企业版（如已设置，请忽略此步骤） {#1%E3%80%81%E6%9B%B4%E6%96%B0%E8%87%B3%E4%BC%81%E4%B8%9A%E7%89%88%EF%BC%88%E5%A6%82%E5%B7%B2%E8%AE%BE%E7%BD%AE%EF%BC%8C%E8%AF%B7%E5%BF%BD%E7%95%A5%E6%AD%A4%E6%AD%A5%E9%AA%A4%EF%BC%89}
修改配置，加载企业版相关的镜像容器
# 编辑配置文件
vim /opt/dataease2.0/.env
将配置项 DE_INSTALL_MODE 改为 enterprise
==================================
DE_INSTALL_MODE=enterprise
保存退出
====
加载新镜像
=====
`dectl reload`
如果你的服务器有防火墙或访问限制，需开放以下端口：
|-----------|--------------------|------------------------------| | 端口 | 用途 | 说明 | | 9180、9080 | apisix端口 | 企业版使用apisix的9080端口访问DataEase | | 9000 | apisix-dashboard端口 | | | 8100 | dataease端口 | 开源版使用8100端口访问DataEase |
登陆 DataEase 页面，更新 license
2、创建嵌入式应用 {#2%E3%80%81%E5%88%9B%E5%BB%BA%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BA%94%E7%94%A8}
点击【系统设置】，进入【嵌入式管理】页面创建嵌入式应用。
注：每个 DataEase 实例默认最多可创建 5 个嵌入式应用。
应用名称：自定义
跨域设置：此处填写被嵌入的目标系统的地址，需要注意，此处和目标系统的协议一致。
3、编辑 /opt/dataease2.0/conf/application.yml 文件，修改配置信息 {#3%E3%80%81%E7%BC%96%E8%BE%91-%2Fopt%2Fdataease2.0%2Fconf%2Fapplication.yml-%E6%96%87%E4%BB%B6%EF%BC%8C%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E4%BF%A1%E6%81%AF}
vim /opt/dataease2.0/conf/application.yml
修改origin-list配置信息，如下图所示，origin-list配置的访问地址是DataEase的实际访问地址（使用域名访问则配置域名地址,如：https://live.fit2cloud.com，没有域名则配置apisix的访问地址：http://${DataEase的IP}:9080）
====================================================================================================================================================
origin-list: https://live.fit2cloud.com
添加完成后，重新创建 dataease 容器
======================
`docker rm -vf dataease
dectl reload`
注：如果通过域名访问，域名代理的地址也应当是 apisix 的访问地址，即：http://${DataEase的IP}:9080
4、嵌入式代码示例 {#4%E3%80%81%E5%B5%8C%E5%85%A5%E5%BC%8F%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B}
示例代码 GitHub 仓库地址：https://github.com/dataease/embedded-demo.git
仓库代码中包含两个分支：main 分支和 isv-embedded-demo 分支。
主分支（main 分支）：前端使用 Layui，后端使用 Java，如果您想查看嵌入后的实现效果，可直接运行此分支代码，运行后配置系统设置页面的参数即可查看效果。
isv-embedded-demo 分支：前端使用 Vue 3，后端使用 Java，如果您的项目前端使用的是 Vue，可参考此分支代码进行开发。
5、 主分支代码运行及效果示例 {#5%E3%80%81%E4%B8%BB%E5%88%86%E6%94%AF%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E5%8F%8A%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B}
运行代码，浏览器打开ip+端口，默认是（localhost:8000），界面如下
仪表板嵌入、数据大屏、试图嵌入示例：
【序号 1】 DataEase 服务的 ip+port（注意，此处 port 为apisix端口，默认9080）；
【序号 2】DataEase 创建第 2 步嵌入式应用的账户，此处示例为 admin 用户；
【序号 3】第 2 步创建的嵌入式应用 APP ID；
【序号 4】第 2 步创建的嵌入式应用 APP Secret；
【序号 5】仪表板的resourceId ，获取方式见 5.1；
【序号 6】数据大屏的dvld，获取方式见 5.2；
【序号7】视图所属的仪表板或者数据大屏的 resourceId 或 dvld ；
【序号8】视图 id，获取方式见 5.3；
5.1 resourceId 的获取方式如下： {#5.1-resourceid-%E7%9A%84%E8%8E%B7%E5%8F%96%E6%96%B9%E5%BC%8F%E5%A6%82%E4%B8%8B%EF%BC%9A}
5.2 dvld 的获取方式如下： {#5.2-dvld-%E7%9A%84%E8%8E%B7%E5%8F%96%E6%96%B9%E5%BC%8F%E5%A6%82%E4%B8%8B%EF%BC%9A}
5.3 视图 id 获取方式如下： {#5.3-%E8%A7%86%E5%9B%BE-id-%E8%8E%B7%E5%8F%96%E6%96%B9%E5%BC%8F%E5%A6%82%E4%B8%8B%EF%BC%9A}
注：如果代码运行较慢可以换一下源为国内源，注意嵌入式应用的跨域设置。
6、 isv-embedded-demo 分支代码运行及效果示例 {#6%E3%80%81isv-embedded-demo-%E5%88%86%E6%94%AF%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E5%8F%8A%E6%95%88%E6%9E%9C%E7%A4%BA%E4%BE%8B}
运行代码，浏览器打开ip+端口，默认是（localhost:8848），界面如下
本工程为 DataEase 嵌入式 Vue3 代码示例，代码结构如下所示：
-
backend: 后端代码，包含嵌入式 Token 的 JWT 认证代码示例。
-
frontend：前端代码，包含嵌入式 DIV 以及 iframe 多维嵌入的代码示例。
需要注意的是，div 嵌入需要在 html 页面的 <head> 标签内引入 dataease 相关的 js 文件，否则，div 容器渲染，创建 DataEaseBi 对象时，会抛出异常。
