对智算报表进行组件化抽离，各产品线如果使用智算报表组件，需部署智算报表项目到同域名下。 ## 如何安装使用智算报表组件，需npm安装， ``` npm i @zfs/report-component ``` ## 如何使用 ### vue2项目使用示例： ``` ， ``` ReportManager类的具体实现如下： ``` import { h } from 'vue'; import qs from 'qs'; import { v4 as uuidv4 } from 'uuid'; export default class ReportManager { #url = ''; #previewUrl = ''; #id = uuidv4(); #vNode = null; #iframeDom = null; #logo = ''; #menuList = []; #options = []; #previewDownloadUrl= ''; #downloadName= ''; #loadFinishedCallback = () => {}; /** * @description 事件存储 * @type {Map<'menuListClick' | 'optionClick' | 'addDataSource' | 'lookDataSource' | 'addParam' | 'preview' | 'addDataSourceResult' | 'openSaveReport', (data) => void>} * @example menuListClick: (menuItem: {code：string, modules: string, name: string, url: string, icon: string, id: string}) => void; * @example optionClick: (index: string) => void; * @example addDataSource: (data: object) => void; * @example lookDataSource: (data: object) => void; * @example addParam: () => void; * @example preview: (data: object) => void; * @example openSaveReport: () => void; * @example addDataSourceResult: (data: { flag: 'Y' | 'N', error?: Error }) => void; */ #eventStore = new Map(); /** * @param {{url: string, reportParams: { hideMenuList?: 'Y' | 'N', hideOptions?: 'Y' | 'N', hideUserCenter?: 'Y' | 'N', unHasVersion?: 'Y' | 'N', hideParam: 'Y' | 'N', hideAddDataTable: 'Y' | 'N', hideLookDataTable: 'Y' | 'N', hideDeleteDataTable: 'Y' | 'N' }, previewUrl: string, previewDownloadUrl: string, downloadName: string, logo: string, menuList: Object[], options: Object[], loadFinishedCallback: () => void}} params * @description url: iframe地址; * @description reportParams 传给报表配置iframe的参数, hideMenuList: 'Y' | 'N',是否隐藏菜单栏,默认不隐藏; hideOptions: 'Y' | 'N',是否隐藏右上角选项,默认不隐藏; hideUserCenter: 'Y' | 'N',是否隐藏用户中心,默认不隐藏; unHasVersion: 'Y' | 'N',是否隐藏版本信息,默认隐藏，可不传; , hideParam: 'Y' | 'N', 是否隐藏参数相关的东西（插入中的参数按钮，查询参数中文本，数值，日期的参数切换按钮），默认不隐藏； hideAddDataTable: 'Y' | 'N',是否隐藏添加数据表按钮，默认不隐藏； hideLookDataTable: 'Y' | 'N',是否隐藏查看数据表按钮，默认不隐藏；hideDeleteDataTable: 'Y' | 'N'，是否隐藏删除数据表按钮，默认不隐藏 * @example url: 'http://localhost:8858/aiquery/#/index', reportParams: { hideUserCenter: 'Y } * @description previewUrl: 预览地址; previewDownloadUrl: 预览导出文件成功后文件的下载地址; downloadName: 预览导出文件成功下载地址名称; logo: 菜单logo; menuList: 菜单列表; options: 右上角选项列表; loadFinishedCallback: iframe加载完成回调函数; * @example menuList: [{menuCategoryName: string, icon: string children: [{code: string, modules: string, name: string, url: string, icon: string, id: string}]}] * @example options: [{index: string, name: string, child: {index: string, name: string}[]}] * @example downloadName: '个人中心-我的下载' * @example previewDownloadUrl: 'http://localhost:8858/gatewayv2/userCenter?tab=downloadOffline' * @example logo: 'http://localhost:8858/resource/images/logo/logo_aicenter_systemManage.png?t=1747137965678&pageUri=%2FsystemManage%2FnoticeManage&authkey=mKpur1kAaFX8%2FKdCwCOLarFDpR%2Bb6JZlE0Bn3JooxIhgpuiGoKOECI7nhYlsYswg%2B2HGJmpNw1VGh4DW6I3w7FjlkTHE2uiW0XRjxuN9xEDe7KVt1q8RIfLiOYnEfh5t' */ constructor(params) { const { url, previewUrl, previewDownloadUrl, downloadName, reportParams = {}, logo, menuList = [], options = [], loadFinishedCallback = () => {}, } = params; const reportUrlParams = { type: 'other', unHasVersion: 'Y', ...reportParams, }; this.#url = `${url}?${qs.stringify(reportUrlParams)}`; this.#previewUrl = previewUrl; this.#previewDownloadUrl = previewDownloadUrl; this.#downloadName = downloadName; this.#logo = logo; this.#menuList = menuList; this.#options = options; this.#loadFinishedCallback = loadFinishedCallback; this.#initPreview(); window.addEventListener('message', (event) => { if (event.origin !== window.location.origin) return; const eventData = event.data; if (eventData && eventData.originType === 'report') { const { eventName, data } = eventData; const handler = this.#eventStore.get(eventName); if (handler && typeof handler === 'function') { handler(data); } } }); } #initPreview() { this.registerEvent('preview', (data) => { sessionStorage.setItem(data.id, JSON.stringify(data.data)); window.open(`${this.#previewUrl}?id=${data.id}&from=report&type=other&downloadName=${this.#downloadName}&downloadUrl=${encodeURIComponent(this.#previewDownloadUrl)}`); }); } /** * 注册监听事件 * @param {'menuListClick' | 'optionClick' | 'addDataSource' | 'lookDataSource' | 'addParam' | 'addDataSourceResult' | 'openSaveReport'} eventName 支持的事件名称 * @param {(data?: any) => void} handler 监听函数 * @description menuListClick: 菜单点击事件; optionClick: 选项点击事件; addDataSource: 打开添加数据表弹窗事件; lookDataSource: 查看数据表详情事件; addParam: 打开添加参数弹窗事件;addDataSourceResult: 添加数据表回调事件; openSaveReport: 打开保存报表弹窗事件; * @example menuListClick: (menuItem: {code：string, modules: string, name: string, url: string, icon: string, id: string}) => void; * @example optionClick: (index: string) => void; * @example addDataSource: () => void; * @example lookDataSource: (data: object) => void; * @example addParam: (type: 'String' | 'BigNumber' | 'Date' | '') => void; String: 仅添加字符串; BigNumber: 仅添加数值; Date: 仅添加日期; '': 所有类型; * @example openSaveReport: () => void; * @returns {() => void} 取消监听函数 */ registerEvent(eventName, handler) { this.#eventStore.set(eventName, handler); return () => this.#eventStore.delete(eventName); } /** * 渲染iframe * @returns {VNode} 返回虚拟节点 */ render() { if (!this.#vNode) { this.#vNode = h('iframe', { ref: 'iframeEl', attrs: { id: this.#id, src: this.#url, width: '100%', height: '100%', sandbox: 'allow-scripts allow-same-origin', }, style: { width: '100%', height: '100%', border: 'none', }, on: { load: () => { const iframe = document.getElementById(this.#id); this.#iframeDom = iframe; this.updateOptions(this.#options); this.updateMenuList({ menuList: this.#menuList, logo: this.#logo }); this.#loadFinishedCallback(); }, }, }); } return this.#vNode; } /** * 发送事件给报表配置iframe * @param {'updateMenuList' | 'updateOptions' | 'addDataSource' | 'addParam' | 'removeParam' | 'updateParam'} eventName 事件名称，暂时仅支持这些事件 * @param {any} data 要传递的参数 * @description updateMenuList: 更新菜单列表; updateOptions: 更新右上角选项; addDataSource: 添加数据源; addParam: 添加参数; removeParam: 删除参数; updateParam: 更新参数; */ sendMessage(eventName, data = null) { if (this.#iframeDom) { this.#iframeDom.contentWindow.postMessage({ originType: 'reportParent', eventName, data, }, window.location.origin); } } /** * 通知报表更新菜单列表的选项,仅支持俩层。 * @param {{logo: string, menuList: object[]}} params * @description logo: 菜单logo; menuList: 菜单列表; * @description menuList: [{menuCategoryName: string, icon: string children: [{code: string, modules: string, name: string, url: string, icon: string, id: string}]}] */ updateMenuList(params) { this.sendMessage('updateMenuList', params); } /** * 通知报表更新菜单选项,仅支持俩层。其中index不能传这三个内置index: add: 新建,manager-data-list: 打开,manager-list-lately：最近打开。 * @param {{index: string, name: string, child?: {index: string, name: string}[]}[]} options * @description index: 选项索引; name: 选项名称; child: 子选项; */ updateOptions(options) { this.sendMessage('updateOptions', options); } /** * 通知报表添加数据源 * @param {{sourceId: string, type: '0'}[]} data 要添加的数据源 */ addDataSource(data) { this.sendMessage('addDataSource', data); } /** * 通知报表添加参数 * @param {{id: string, name: string, paramType: '0' | '1' | '2', defaultValue: any, remark: string} | object[]} data 要添加的参数，可传一个参数，也可传参数数组 * @description id: 参数id; name: 参数名称; paramType: 参数类型; defaultValue: 默认值; remark: 备注; * @description paramType: 0: 字符串; 1: 数值; 2: 日期; */ addParam(data) { this.sendMessage('addParam', data); } /** * 通知报表删除参数 * @param {string | string[]} id 要删除的id或id数组 */ removeParam(id) { this.sendMessage('removeParam', id); } /** * 通知报表更新参数 * @param {{id: string, name: string, paramType: '0' | '1' | '2', defaultValue: any, remark: string} | object[]} data 要添加的参数，可传一个参数，也可传参数数组 * @description id: 参数id; name: 参数名称; paramType: 参数类型; defaultValue: 默认值; remark: 备注; * @description paramType: 0: 字符串; 1: 数值; 2: 日期; */ updateParam(data) { this.sendMessage('updateParam', data); } /** * @description 报表重新请求所有参数，但是不建议外界使用，报表内部会自动请求所有参数 * @description 因为参数只在报表项目初始化或者打开报表的时候请求全部参数，如果在参数管理中，有对参数的参数进行增删改查，建议使用增删改查的事件通知报表更新数据，避免重复请求 */ sendInitAllParam() { this.sendMessage('initAllParam'); } /** * @description 发送保存报表事件 * @param {string} folderId 要将保存的文件夹的id */ sendSaveReport(folderId) { this.sendMessage('saveReport', folderId); } /** * @description 发送打开报表事件 * @param {{id: string, name: string, folderId: string}} data 打开报表的参数 */ sendOpenReport(data) { this.sendMessage('openReport', data); } } ``` import { h } from 'vue'; ``` import qs from 'qs'; import { v4 as uuidv4 } from 'uuid'; export default class ReportManager { #url = ''; #previewUrl = ''; #id = uuidv4(); #vNode = null; #iframeDom = null; #logo = ''; #menuList = []; #options = []; #previewDownloadUrl= ''; #downloadName= ''; #loadFinishedCallback = () => {}; /** * @description 事件存储 * @type {Map<'menuListClick' | 'optionClick' | 'addDataSource' | 'lookDataSource' | 'addParam' | 'preview' | 'addDataSourceResult' | 'openSaveReport', (data) => void>} * @example menuListClick: (menuItem: {code：string, modules: string, name: string, url: string, icon: string, id: string}) => void; * @example optionClick: (index: string) => void; * @example addDataSource: (data: object) => void; * @example lookDataSource: (data: object) => void; * @example addParam: () => void; * @example preview: (data: object) => void; * @example openSaveReport: () => void; * @example addDataSourceResult: (data: { flag: 'Y' | 'N', error?: Error }) => void; */ #eventStore = new Map(); /** * @param {{url: string, reportParams: { hideMenuList?: 'Y' | 'N', hideOptions?: 'Y' | 'N', hideUserCenter?: 'Y' | 'N', unHasVersion?: 'Y' | 'N' }, previewUrl: string, previewDownloadUrl: string, downloadName: string, logo: string, menuList: Object[], options: Object[], loadFinishedCallback: () => void}} params * @description url: iframe地址; * @description reportParams 传给报表配置iframe的参数, hideMenuList: 'Y' | 'N',是否隐藏菜单栏,默认不隐藏; hideOptions: 'Y' | 'N',是否隐藏右上角选项,默认不隐藏; hideUserCenter: 'Y' | 'N',是否隐藏用户中心,默认不隐藏; unHasVersion: 'Y' | 'N',是否隐藏版本信息,默认隐藏，可不传 * @example url: 'http://localhost:8858/aiquery/#/index', reportParams: { hideUserCenter: 'Y } * @description previewUrl: 预览地址; previewDownloadUrl: 预览导出文件成功后文件的下载地址; downloadName: 预览导出文件成功下载地址名称; logo: 菜单logo; menuList: 菜单列表; options: 右上角选项列表; loadFinishedCallback: iframe加载完成回调函数; * @example menuList: [{menuCategoryName: string, icon: string children: [{code: string, modules: string, name: string, url: string, icon: string, id: string}]}] * @example options: [{index: string, name: string, child: {index: string, name: string}[]}] * @example downloadName: '个人中心-我的下载' * @example previewDownloadUrl: 'http://localhost:8858/gatewayv2/userCenter?tab=downloadOffline' * @example logo: 'http://localhost:8858/resource/images/logo/logo_aicenter_systemManage.png?t=1747137965678&pageUri=%2FsystemManage%2FnoticeManage&authkey=mKpur1kAaFX8%2FKdCwCOLarFDpR%2Bb6JZlE0Bn3JooxIhgpuiGoKOECI7nhYlsYswg%2B2HGJmpNw1VGh4DW6I3w7FjlkTHE2uiW0XRjxuN9xEDe7KVt1q8RIfLiOYnEfh5t' */ constructor(params) { const { url, previewUrl, previewDownloadUrl, downloadName, reportParams = {}, logo, menuList = [], options = [], loadFinishedCallback = () => {}, } = params; const reportUrlParams = { type: 'other', unHasVersion: 'Y', ...reportParams, }; this.#url = `${url}?${qs.stringify(reportUrlParams)}`; this.#previewUrl = previewUrl; this.#previewDownloadUrl = previewDownloadUrl; this.#downloadName = downloadName; this.#logo = logo; this.#menuList = menuList; this.#options = options; this.#loadFinishedCallback = loadFinishedCallback; this.#initPreview(); window.addEventListener('message', (event) => { if (event.origin !== window.location.origin) return; const eventData = event.data; if (eventData && eventData.originType === 'report') { const { eventName, data } = eventData; const handler = this.#eventStore.get(eventName); if (handler && typeof handler === 'function') { handler(data); } } }); } #initPreview() { this.registerEvent('preview', (data) => { sessionStorage.setItem(data.id, JSON.stringify(data.data)); window.open(`${this.#previewUrl}?id=${data.id}&from=report&type=other&downloadName=${this.#downloadName}&downloadUrl=${encodeURIComponent(this.#previewDownloadUrl)}`); }); } /** * 注册监听事件 * @param {'menuListClick' | 'optionClick' | 'addDataSource' | 'lookDataSource' | 'addParam' | 'addDataSourceResult' | 'openSaveReport'} eventName 支持的事件名称 * @param {(data?: any) => void} handler 监听函数 * @description menuListClick: 菜单点击事件; optionClick: 选项点击事件; addDataSource: 打开添加数据表弹窗事件; lookDataSource: 查看数据表详情事件; addParam: 打开添加参数弹窗事件;addDataSourceResult: 添加数据表回调事件; openSaveReport: 打开保存报表弹窗事件; * @example menuListClick: (menuItem: {code：string, modules: string, name: string, url: string, icon: string, id: string}) => void; * @example optionClick: (index: string) => void; * @example addDataSource: () => void; * @example lookDataSource: (data: object) => void; * @example addParam: (type: 'String' | 'BigNumber' | 'Date' | '') => void; String: 仅添加字符串; BigNumber: 仅添加数值; Date: 仅添加日期; '': 所有类型; * @example openSaveReport: () => void; * @returns {() => void} 取消监听函数 */ registerEvent(eventName, handler) { this.#eventStore.set(eventName, handler); return () => this.#eventStore.delete(eventName); } /** * 渲染iframe * @returns {VNode} 返回虚拟节点 */ render() { if (!this.#vNode) { this.#vNode = h('iframe', { ref: 'iframeEl', attrs: { id: this.#id, src: this.#url, width: '100%', height: '100%', sandbox: 'allow-scripts allow-same-origin', }, style: { width: '100%', height: '100%', border: 'none', }, on: { load: () => { const iframe = document.getElementById(this.#id); this.#iframeDom = iframe; this.updateOptions(this.#options); this.updateMenuList({ menuList: this.#menuList, logo: this.#logo }); this.#loadFinishedCallback(); }, }, }); } return this.#vNode; } /** * 发送事件给报表配置iframe * @param {'updateMenuList' | 'updateOptions' | 'addDataSource' | 'addParam' | 'removeParam' | 'updateParam'} eventName 事件名称，暂时仅支持这些事件 * @param {any} data 要传递的参数 * @description updateMenuList: 更新菜单列表; updateOptions: 更新右上角选项; addDataSource: 添加数据源; addParam: 添加参数; removeParam: 删除参数; updateParam: 更新参数; */ sendMessage(eventName, data = null) { if (this.#iframeDom) { this.#iframeDom.contentWindow.postMessage({ originType: 'reportParent', eventName, data, }, window.location.origin); } } /** * 通知报表更新菜单列表的选项,仅支持俩层。 * @param {{logo: string, menuList: object[]}} params * @description logo: 菜单logo; menuList: 菜单列表; * @description menuList: [{menuCategoryName: string, icon: string children: [{code: string, modules: string, name: string, url: string, icon: string, id: string}]}] */ updateMenuList(params) { this.sendMessage('updateMenuList', params); } /** * 通知报表更新菜单选项,仅支持俩层。其中index不能传这三个内置index: add: 新建,manager-data-list: 打开,manager-list-lately：最近打开。 * @param {{index: string, name: string, child?: {index: string, name: string}[]}[]} options * @description index: 选项索引; name: 选项名称; child: 子选项; */ updateOptions(options) { this.sendMessage('updateOptions', options); } /** * 通知报表添加数据源 * @param {{sourceId: string, type: '0'}[]} data 要添加的数据源 */ addDataSource(data) { this.sendMessage('addDataSource', data); } /** * 通知报表添加参数 * @param {{id: string, name: string, paramType: '0' | '1' | '2', defaultValue: any, remark: string} | object[]} data 要添加的参数，可传一个参数，也可传参数数组 * @description id: 参数id; name: 参数名称; paramType: 参数类型; defaultValue: 默认值; remark: 备注; * @description paramType: 0: 字符串; 1: 数值; 2: 日期; */ addParam(data) { this.sendMessage('addParam', data); } /** * 通知报表删除参数 * @param {string | string[]} id 要删除的id或id数组 */ removeParam(id) { this.sendMessage('removeParam', id); } /** * 通知报表更新参数 * @param {{id: string, name: string, paramType: '0' | '1' | '2', defaultValue: any, remark: string} | object[]} data 要添加的参数，可传一个参数，也可传参数数组 * @description id: 参数id; name: 参数名称; paramType: 参数类型; defaultValue: 默认值; remark: 备注; * @description paramType: 0: 字符串; 1: 数值; 2: 日期; */ updateParam(data) { this.sendMessage('updateParam', data); } /** * @description 报表重新请求所有参数，但是不建议外界使用，报表内部会自动请求所有参数 * @description 因为参数只在报表项目初始化或者打开报表的时候请求全部参数，如果在参数管理中，有对参数的参数进行增删改查，建议使用增删改查的事件通知报表更新数据，避免重复请求 */ sendInitAllParam() { this.sendMessage('initAllParam'); } /** * @description 发送保存报表事件 * @param {string} folderId 要将保存的文件夹的id */ sendSaveReport(folderId) { this.sendMessage('saveReport', folderId); } /** * @description 发送打开报表事件 * @param {{id: string, name: string, folderId: string}} data 打开报表的参数 */ sendOpenReport(data) { this.sendMessage('openReport', data); } } ``` ### **参数详解** `url`：必传，调用方产品线的报表配置地址 `reportParams`：object，非必传，属性详见下表： | 参数 | 类型 | 是否必传 | 默认值 | 说明 | | ------------------- | -------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------- | | hideMenuList | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏菜单栏，详见 `图一` | | hideOptions | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏右上角选项，详见 `图一` | | hideUserCenter | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏用户中心，详见 `图一` | | unHasVersion | 'Y'或'N' | 否 | 隐藏 | 是否隐藏版本信息,默认隐藏，详见 `图一` | | fromSystem | string | 否 | FSSC | 取消智算的鉴权 | | hideParam | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏参数相关的东西：
插入中的参数按钮，查询参数中参数样式为文本，数值，日期的参数默认值切换按钮
详见 `图二` | | hideAddDataTable | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏添加数据表按钮，详见 `图一` | | hideLookDataTable | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏查看数据表按钮，详见 `图一` | | hideDeleteDataTable | 'Y'或'N' | 否 | 不隐藏 | 是否隐藏删除数据表按钮，详见 `图一` | `图一：` ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/23/1830A2CEFFFF8B25DA7F66CEB1B7B2AE19B0.png) `图二：` ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/23/1830A2CEFFFF8B4F509D4F7AB1B7B2AE19B3.png) `previewUrl`：必传，调用方产品线的报表预览地址 `downloadName`：必传，预览导出文件之后的离线下载地址的名称 `previewDownloadUrl`：必传，预览导出文件之后的离线下载地址 `logo`：非必传，菜单的logo，如果不传，使用的是智算报表配置的logo `menuList`：非必传，仅支持俩级菜单，字段类型，[{menuCategoryName: string, icon: string children: [{code: string, modules: string, name: string, url: string, icon: string, id: string}]}]。需注意，报表中心有内置逻辑，当children只有一个时，显示的是子选项，所以child必须有值，点击事件给出来的数据只可能是children中的数据。 `options`：非必传，仅支持俩级菜单，字段类型，[{index: string, name: string, child: {index: string, name: string}[]}]，点击时传index字段出来调用方的index不能传这三个内置index: add: 新建,manager-data-list: 打开,manager-list-lately：最近打开。报表内部会处理add: 新建与manager-list-lately：最近打开。调用方需自行处理manager-data-list: 打开。下图是效果图： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE0C820790D638B1B7B2AE191F.png) `loadFinishedCallback`：非必传，报表iframe初始化成功之后执行的回调方法 ### 需要监听的报表事件详解 #### menuListClick 监听函数类型： `(data: {code：string, modules: string, name: string, url: string, icon: string, id: string}) => void;` 触发地方： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE20A287313F56B1B7B2AE1928.png) #### optionClick 监听函数类型：`(index: string) => void` 触发地方： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE2160238260ABB1B7B2AE1929.png) 其中内置的打开选项，code为 `manager-data-list`，由调用方实现一个报表列表弹窗，现智算的弹窗如下： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE22DB838D0A03B1B7B2AE1932.png) 调用方选择要打开的报表需调用 `sendOpenReport`方法，参数类型为 `{id: string, name: string, folderId: string}` #### addDataSource 监听函数类型：`() => void` 触发地方： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE21745DCC20B2B1B7B2AE192A.png) 智算报表平台不提供添加数据表的弹窗，需调用方自行实现，智算报表平台的弹窗如下： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE2190595CA786B1B7B2AE192B.png) 调用方要添加数据表，需调用 `addDataSource`方法，参数类型为 `{sourceId: string, type: '0'}[]`。type必须为'0'。 #### addDataSourceResult 监听函数类型：`(data: { flag: 'Y' | 'N', error?: Error }) => void;` 调用方主动调用 `addDataSource`之后，就会触发此方法，Y代表添加数据表成功，需调用方主动关闭数据表弹窗；N代表添加失败，会返回错误信息 #### lookDataSource 监听函数类型：`(data: object) => void` 触发地方： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE21DF6307E524B1B7B2AE192C.png) 智算报表平台不提供查看数据表的弹窗，需调用方自行实现，智算报表平台的查看数据表弹窗如下： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE21EB30C184FDB1B7B2AE192D.png) #### addParam 监听函数类型：`(type: 'String' | 'BigNumber' | 'Date' | '') => void;` String: 仅添加字符串; BigNumber: 仅添加数值; Date: 仅添加日期; '': 所有类型; 触发地方很多，一般由这种参数选择框触发： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE222CBC385630B1B7B2AE192E.png) 智算报表平台不提供新增参数的弹窗，需调用方自行实现，智算报表平台的弹窗如下： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE223C7477968BB1B7B2AE192F.png) #### openSaveReport 监听函数类型：`() => void` 触发地方： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE2290DE402FF7B1B7B2AE1930.png) 智算报表平台不提供选择保存目录的弹窗，需调用方自行实现，智算报表平台的弹窗如下： ![image.png](http://tmpbbs.ztc.ztccloud.com.cn:6875/developers-server/rest/file/group1/2025/05/15/1830A2CE229F945468BBB1B7B2AE1931.png) 调用方选好保存目录后，需主动调用 `sendSaveReport`方法，参数为要保存的文件夹的id。 ## 如何直接打开报表 ### 打开编辑页面如果想在报表列表，选择数据直接打开一个新的浏览器页签编辑已保存的报表，代码实现如下： ``` handleEditReport(rows) { const row = rows.map(((item) => ({ name: item.fileName, // 报表名称 key: item.id, //报表id add: true, isNew: false, isOnlyEdit: false, folderId: item.folderId, // 文件夹id debounce: true, }))); // 必须是这个key，newReportInfoV11 window.localStorage.setItem('newReportInfoV11', JSON.stringify(row)); // 这里的路径是报表中心的路径，需要根据实际情况修改 window.open(`${window.location.origin }/aireport/#/index`); }, ``` ### 打开预览页面如果想在报表列表，选择数据直接打开一个新的浏览器页签查看报表预览，代码实现如下： ``` openPreview(row) { // 报表id const id = row.id; // 预览导出文件的离线下载地址的名称 const downloadName = '下载中心'; // 预览导出文件的离线下载地址 const previewDownloadUrl = 'http://192.168.2.96/gatewayv2/userCenter?tab=downloadOffline'; // 调用方自身的报表预览地址 const url = '/aireport/#/preview'; window.open(`${url}?id=${id}from=other&type=other&downloadName=${downloadName}&downloadUrl=${encodeURIComponent(previewDownloadUrl)}`); } ```

智算报表组件使用说明

智算报表组件使用说明

关于作者

目录