} ``` ```javascript // src\components\dashboardDesigner\header.jsx onChange={(checked) => { dispatch({ type: 'dashboardDesigner/setEditMode', checked }); // 主动触发一次window的resize事件 window.setTimeout(() => { var e = document.createEvent("Event"); e.initEvent("resize", true, true); window.dispatchEvent(e); }, 500); }} ``` - 富文本富文本使用的是[wangEditor]( http://www.wangeditor.com/ )。添加了对工具栏位置的自适应调整和切换编辑预览模式对富文本编辑器编辑状态的控制。 - 图表布局图表布局使用的是[react-grid-layout]( https://www.npmjs.com/package/react-grid-layout )，通过记录每个图表的layout(x, y, w, h)属性保存图表的位置。 - 自动适配 [react-grid-layout]( https://www.npmjs.com/package/react-grid-layout )使用百分比布局，已经很好的支持了自适应，需要特殊处理的是表格类型的看板。默认表格取数的pageSize是根据表格的高度计算出来的，计算的公式为```向下取整(表格高度 / 单行高度) + 1```，当表格高度变化时，需要重新计算表格的pageSize重新取数。 ```javascript // src\components\dashboardDesigner\chartView.jsx onPageSizeChange={(page, pageSize) => { dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true, page, pageSize }); }} ``` ```javascript // src\components\chartDesigner\charts\tableView.jsx componentDidMount() { const { viewRef } = this.props; this.onTableLayoutChange(); this[viewRef].addEventListener('resize', this.onTableLayoutChange); window.addEventListener('resize', this.onTableLayoutChange); } componentWillUnmount() { const { viewRef } = this.props; this[viewRef].removeEventListener('resize', this.onTableLayoutChange); window.removeEventListener('resize', this.onTableLayoutChange); } onTableLayoutChange = () => { const { chartOption, viewRef, onPageSizeChange } = this.props; if(typeof onPageSizeChange === 'function' && pageSize !== chartOption.pageSize && refreshable) { // 在报表中的dataView第一次数据请求在此发起 onPageSizeChange(1, pageSize) } } ``` - 自定义过滤字段自定义过滤字段是为了将同一报表中不同看板使用的两个不同数据源中的同类字段合并成为一个新的过滤字段，以供[过滤组件](#filterbox)选用。如下图所示，数据源"employee"和"job"的字段"jid"和"id"是有关联的字段，在做报表筛选时需要创建两个筛选项。通过自定义过滤字段可以将两个字段变为一个过滤字段，这样只需要创建一个筛选项就可以同时为两个数据源的过滤字段赋值。

自定义过滤字段关联关系数据结构示意图。

- 每一个自定义过滤字段都包含一个关联关系 - 关联关系中的首位决定这个自定义过滤字段的类型，后面选择的数据源字段类型必须与首位相同定义一个自定义过滤字段的过程如下。 ```javascript // src\components\dashboardDesigner\cusFilterBox.jsx // 1.添加一个空的新自定义过滤字段 addRelationColumn = () => { const { relationColumns } = this.state; relationColumns.push({ code: Math.random()+'', name: '新字段', relations: [] }); this.setState({ relationColumns, }); } // 2.选中第一个数据源，获得该数据源下的列字段 onClick={() => { this.setState({ selectedDataSource: { code: d.code, name: d.name }, selectedColumn: null }); dispatch({ type: 'dashboardDesigner/remoteGetColumns', dataSourceCode: d.code }); }} // 3.选中第一个数据源列字段和选中第二个数据源列字段都走这一个方法 /** * @param { code, label, type } c 所选列 * @param { code, label, relations } r 当前自定义过滤字段 */ relationColumnClick = (c, r) => { const { relationColumns, selectedDataSource } = this.state; let setFlag, cusName; this.setState({ selectedColumn: { name: c.name, label: c.label } }, () => { let { selectedColumn } = this.state; const { relations } = r; let idx = relations.findIndex(r => r.dataSource.code === selectedDataSource.code); if(idx === -1){ // 设置首位 setFlag = relations.length === 0; // 当添加第一个数据源列时 cusName = c.label; relations.push({ dataSource: { code: selectedDataSource.code, name: selectedDataSource.name }, column: { name: c.name, label: c.label, type: c.type } }); }else if(idx === 0) { // 重新定义首位 let cr = relations[idx]; setFlag = true; cusName = c.label; if(cr.column.name === selectedColumn.name) { // 再次点击首位选择的列 relations.splice(0, relations.length); // 全部清空 }else { // 改变首位选择的列 relations[idx] = { dataSource: { code: selectedDataSource.code, name: selectedDataSource.name }, column: { name: c.name, label: c.label, type: c.type } }; } }else { // 设置N位 let cr = relations[idx]; if(cr.column.name === selectedColumn.name) { // 再次点击N位选择的列 relations.splice(idx, 1); // 移除该位 }else { // 改变N位选择的列 relations[idx] = { dataSource: { code: selectedDataSource.code, name: selectedDataSource.name }, column: { name: c.name, label: c.label, type: c.type } }; } } // 获得当前自定义过滤字段在自定义过滤字段数组中的索引 let index = relationColumns.findIndex(rc => rc.code === r.code); if(setFlag) { // 改变了首位列后额外重设关联字段的名称为新的首位所选列名 relationColumns[index] = { ...r, name: cusName, relations }; }else { // 重设该自定义过滤字段的关联关系 relationColumns[index] = { ...r, relations }; } // 发布到state this.setState({ relationColumns }); }); } ``` - 导出Excel 导出Excel使用的是[xlsx-populate]( https://www.npmjs.com/package/xlsx-populate )工具，由于使用npm下载的xlsx-populate模块打包时因为存在es6代码会报错，所以手动转es5存了一份在lib中。导出工具 ```javascript // src\utils\exportor.js ``` 生成导出数据 ```javascript // src\models\dashboardDesigner.js *exportToExcel ``` - 导出图片导出图片使用[html2canvas]( https://www.npmjs.com/package/html2canvas )工具，需要对一些影响导出效果的样式进行调整，在导出结束后再恢复。 *好像可以使用html2canvas中的ignoreElements配置项* ```javascript // src\models\dashboardDesigner.js *exportToImage ``` --- ## 其他 ### 按需加载项目使用```react-loadable```进行组件级按需加载（因为不同路由使用相同组件较多所以未使用[dva/dynamic]( https://dvajs.com/api/#dva-dynamic )分路由按需加载）。 ```javascript import React from 'react'; import Loadable from 'react-loadable'; import Skeleton from 'components/common/skeleton'; import SkeletonModal from 'components/common/skeletonModal'; export default (loader, inModal) => { return Loadable({ loader, loading() { return inModal ? : }, }); } ``` ```javascript const TableView = Loadable(() => import('components/chartDesigner/charts/tableView')); ``` ```SkeletonModal```和```Skeleton```是加载组件过程中的过渡显示，现在只是简单加一个loading，优化得当的话可以实现骨架屏的效果。 ### 筛选组件筛选组件用于图表、报表界面的条件控制，先使用条件构造器构造一个可以修改值的筛选组件，然后改变筛选组件的值就可以自动生成可用于数据请求的筛选条件。 *由于报表界面的条件存在[自定义关联字段](#cus-filter-field)，所以图表和报表使用的筛选组件有细微差别。* 条件构造器 ```javascript // src\components\common\filterBox\filterBox.jsx 图表用 // src\components\common\filterBox\filterBox2.jsx 报表用 ``` 筛选组件 ```javascript // src\components\common\filterBox\filter.jsx 图表用 // src\components\common\filterBox\filter2.jsx 报表用 ``` ### 其他