为dashboard实装预览图thumbnail功能

.gitignore

@@ -11,3 +11,4 @@ gitbook/product/_book
 gitbook/product/node_modules
 gitbook/BI商业智能平台 - 产品文档.pdf
 gitbook/BI商业智能平台 - 研发设计文档.pdf
+issueMD/

src/components/dashboard/list.jsx

@@ -119,7 +119,7 @@ class DashboardList extends React.Component {
                                 dispatch({ type: 'dashboardDesigner/reset' });
                                 dispatch({ type: 'main/redirect', path: '/dashboard/' + l.code });
                             }}>
-                                <Thumbnail type={l.type} code={l.code} option={l.chartOption}/>
+                                <Thumbnail type={l.type} code={l.code} option={l.chartOption} thumbnail={l.thumbnail}/>
                             </Row>
                             <Row className='desc'>
                                 <Ellipsis tooltip={l.description.length > 16} lines={2}>{

src/components/dashboard/thumbnail.jsx

@@ -1,7 +1,17 @@
-const Thumbnail = ({ type, code, option }) => {
+/* thumbnail为data:image/png;base64
+此处alt未定义，只是占位
+*/
+const Thumbnail = ({ type, code, option, thumbnail }) => {
+    if (thumbnail === null) {
+        return (
+            <div style={{ width: '100%', height: '100%' }}>
+                <div className='dashboard-default'></div>
+            </div>
+        );
+    }
     return (
         <div style={{ width: '100%', height: '100%' }}>
-            <div className='dashboard-default'></div>
+            <img src={thumbnail} alt={code} width='100%' height='100%'></img>
         </div>
     );
 }

src/components/dashboardDesigner/content.jsx

@@ -85,7 +85,7 @@ class DashboardDesignerContent extends React.Component {
                     <ChooseChartBox operation={operation} visibleBox={visibleBox} hideBox={this.hideBox} />
                 </div>
             </Header>
-            <Content ref='contentEl'>
+            <Content ref='contentEl' className='dashboard-content'>
                 <ViewLayout width={viewWidth} reset={this.refreshContentWidth} editMode={editMode}/>
             </Content>
         </Layout>

src/components/dashboardDesigner/header.jsx

@@ -16,7 +16,7 @@ class Header extends React.Component {
     }
 
     render() {
-        const { dashboardDesigner, dispatch } = this.props;
+        const { dashboardDesigner, dispatch, updateThumbnail } = this.props;
         return (
             <div className='dashboarddesigner-header'>
                 <div className='header-item toolbar-back'>
@@ -29,6 +29,7 @@ class Header extends React.Component {
                             this.setState({
                                 visibleConfirm: false
                             });
+                            updateThumbnail()// 添加更新thumbnail
                             dispatch({ type: 'dashboard/remoteModify' });
                             dispatch({ type: 'main/redirect', path: '/dashboard' });
                         }}
@@ -52,11 +53,15 @@ class Header extends React.Component {
                     </Popconfirm>
                     <Button onClick={() => {
                         if(dashboardDesigner.code && dashboardDesigner.code !== -1) {
+                            updateThumbnail()// 添加更新thumbnail
                             dispatch({ type: 'dashboard/remoteModify' });
                         }else {
+                            updateThumbnail()// 添加更新thumbnail
                             dispatch({ type: 'dashboard/remoteAdd' });
                         }
                     }}><Icon type='save' />保存</Button>
+                    <Button onClick={updateThumbnail}
+                    ><Icon type='save' />保存Thumbnail(Debug用)</Button>
                 </div>
                 <div className='header-item toolbar-title'>
                     <Input

src/components/dashboardDesigner/layout.jsx

@@ -35,12 +35,19 @@ class DashboardDesigner extends React.Component {
                 pdf.save('stone.pdf');
         });
     }
+    updateThumbnail = () => {
+        const { dispatch } = this.props
+        html2canvas(document.getElementsByClassName('dashboard-content')[0]).then(function(canvas){
+            let thumbnail = canvas.toDataURL('image/png', 1.0);
+            dispatch({ type: 'dashboardDesigner/setField', name: 'thumbnail', value: thumbnail })
+        })
+    }
 
     render() {
         const { loading } = this.props;
         return <Layout className='dashboarddesigner-layout'>
             <Header>
-                <DashboardDesignerHeader />
+                <DashboardDesignerHeader updateThumbnail={this.updateThumbnail} />
             </Header>
             <Content style={{ height: 0 }}>
                 <DashboardDesignerContent />
@@ -53,4 +60,4 @@ class DashboardDesigner extends React.Component {
 
 }
 
-export default connect()(DashboardDesigner)
+export default connect(({ present: { dashboardDesigner } }) => ({ dashboardDesigner }))(DashboardDesigner)

src/models/dashboard.js

@@ -101,12 +101,12 @@ export default {
         *remoteAdd(action, { select, call, put }) {
             try {
                 const dashboardDesigner = yield select(state => state.present.dashboardDesigner);
-                const { name, items } = dashboardDesigner;
+                const { name, items, thumbnail } = dashboardDesigner;
                 let body = {
                     bdName: name,
                     bdNote: '',
                     bdConfiguration: JSON.stringify(items),
-                    thumbnail: '',
+                    thumbnail: thumbnail,
                     createBy: 'zhuth'
                 }
                 console.log('新增看板', body);
@@ -157,13 +157,13 @@ export default {
         *remoteModify(action, { select, call, put }) {
             try {
                 const dashboardDesigner = yield select(state => state.present.dashboardDesigner);
-                const { code, name, items } = dashboardDesigner;
+                const { code, name, items, thumbnail } = dashboardDesigner;
                 let body = {
                     id: code,
                     bdName: name,
                     bdNote: '',
                     bdConfiguration: JSON.stringify(items),
-                    thumbnail: '',
+                    thumbnail: thumbnail,
                     createBy: 'zhuth'
                 }
                 console.log('修改看板', body);