报表界面结构调整

src/components/dashboardDesigner/configSider.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { connect } from 'dva'
+import { Form, Divider, Icon, Tooltip, Button } from 'antd'
+import ChooseChartBox from './chooseChartBox'
+import CusFilterBox from './cusFilterBox'
+import './configSider.less'
+
+class ConfigSider extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            visibleChooseChartBox: false,
+            visibleCusFilterBox: false
+        };
+    }
+
+    showChooseChartBox = (o) => {
+        this.setState({
+            visibleChooseChartBox: true
+        });
+    }
+
+    hideChooseChartBox = (o) => {
+        this.setState({
+            visibleChooseChartBox: false
+        });
+    }
+
+    showCusFilterBox = (o) => {
+        this.setState({
+            visibleCusFilterBox: true
+        });
+    }
+
+    hideCusFilterBox = (o) => {
+        this.setState({
+            visibleCusFilterBox: false
+        });
+    }
+
+    generateViewTypes = () => {
+        const { dispatch } = this.props;
+        const { visibleChooseChartBox } = this.state;
+
+        return (<div className='view-types'>
+            <Tooltip placement='bottom' title="图表">
+                <div className="view-type-item">
+                    <Icon className='viewtype-icon' type="area-chart" theme="outlined" onClick={(item) => {
+                        this.showChooseChartBox("create");
+                    }}/>
+                </div>
+            </Tooltip >
+            <Tooltip placement='bottom' title="富文本">
+                <div className="view-type-item">
+                    <Icon className='viewtype-icon' type="book" theme="outlined" onClick={() => {
+                        dispatch({ type: 'dashboardDesigner/addRichText' });
+                    }}/>
+                </div>
+            </Tooltip>
+            {visibleChooseChartBox && <ChooseChartBox visibleBox={visibleChooseChartBox} hideBox={this.hideChooseChartBox} />}
+        </div>)
+    }
+
+    render() {
+        const { visibleCusFilterBox } = this.state;
+
+        return <Form className='config-sider'>
+            <Divider>图表添加</Divider>
+            {this.generateViewTypes()}
+            <Divider>属性设置</Divider>
+            <Button className="cus-filter-button" onClick={this.showCusFilterBox}>
+                <Icon type='bulb' theme='outlined' />自定义过滤字段
+            </Button>
+            {visibleCusFilterBox && <CusFilterBox visibleBox={visibleCusFilterBox} hideBox={this.hideCusFilterBox} />}
+            <Divider>其他设置</Divider>
+        </Form>
+    }
+}
+
+export default connect(({ present: { dashboardDesigner } }) => ({ dashboardDesigner }))(ConfigSider);

src/components/dashboardDesigner/configSider.less

@@ -0,0 +1,23 @@
+.config-sider {
+    .ant-divider {
+        margin: 10px 0;
+    }
+    .view-types {
+        display: flex;
+        .view-type-item {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #1890ff;
+            border-radius: 4px;
+            margin-left: 8px;
+            i {
+                font-size: 32px;
+                color: #1890ff;
+                padding: 4px;
+            }
+        }
+    }
+    .cus-filter-button {
+        width: 100%;
+    }
+}

src/components/dashboardDesigner/content.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { Layout, Tooltip, Tag, Icon } from 'antd'
+import { Layout, Tag, Icon } from 'antd'
 import { connect } from 'dva'
 import ViewLayout from './viewLayout'
-import ChooseChartBox from './chooseChartBox'
 import FilterBox from '../common/filterBox/filterBox'
-import ConfigForm from './configForm'
+import ConfigSider from './configSider'
 import moment from 'moment'
+
 const { Header, Content, Sider } = Layout
 
 class DashboardDesignerContent extends React.Component {
@@ -17,7 +17,6 @@ class DashboardDesignerContent extends React.Component {
                 width: 0,
                 height: 0,
             },
-            visibleChooseChartBox: false,
             visibleFilterBox: false,
         };
     }
@@ -32,18 +31,6 @@ class DashboardDesignerContent extends React.Component {
         window.removeEventListener('resize', this.onWindowResize);
     }
 
-    showBox = (o) => {
-        this.setState({
-            visibleChooseChartBox: true
-        });
-    }
-
-    hideBox = (o) => {
-        this.setState({
-            visibleChooseChartBox: false
-        });
-    }
-
     showFilterBox = (e) => {
         this.setState({
             visibleFilterBox: true
@@ -78,7 +65,7 @@ class DashboardDesignerContent extends React.Component {
         let _scroll = contentEl.scrollHeight > contentEl.clientHeight;
 
         return {
-            width: document.body.offsetWidth - 20 - (isOwner && editMode ? 380 : 0) - 10 - (_scroll ? 17 : 2), // 有滚动条时需要减去滚动条的宽度
+            width: document.body.offsetWidth - 20 - (isOwner && editMode ? 200 : 0) - 10 - (_scroll ? 17 : 2), // 有滚动条时需要减去滚动条的宽度
             height: contentEl.clientHeight
         }
     }
@@ -156,9 +143,9 @@ class DashboardDesignerContent extends React.Component {
     }
 
     render() {
-        const { dashboardDesigner, dispatch, isOwner } = this.props;
+        const { dashboardDesigner, isOwner } = this.props;
         const { code, editMode, filters } = dashboardDesigner;
-        const { visibleChooseChartBox, visibleFilterBox } = this.state;
+        const { visibleFilterBox } = this.state;
 
         const contentSize = this.getContentSize();
         let tags = filters.map((f, i)=>{
@@ -192,28 +179,15 @@ class DashboardDesignerContent extends React.Component {
                     </Tag>
                 </div>
                 {visibleFilterBox && <FilterBox type='dashboard' code={code} columns={this.getRelationFilterColumns()} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
-                {isOwner && editMode && <div className='viewtype'>
-                    <Tooltip placement='bottom' title="图表">
-                        <Icon className='viewtype-icon' type="area-chart" theme="outlined" onClick={(item) => {
-                            this.showBox("create");
-                        }}/>
-                    </Tooltip >
-                    <Tooltip placement='bottom' title="富文本">
-                        <Icon className='viewtype-icon' type="book" theme="outlined" onClick={() => {
-                            dispatch({ type: 'dashboardDesigner/addRichText' });
-                        }}/>
-                    </Tooltip>
-                    {visibleChooseChartBox && <ChooseChartBox visibleBox={visibleChooseChartBox} hideBox={this.hideBox} />}
-                </div>}
             </Header>
             <Content className='dashboard-content'>
                 <Layout className='content-layout'>
+                    <Sider className={`config-sider${ (isOwner && editMode) ? '' : ' config-sider-closed' }`} width={(isOwner && editMode) ? 200 : 0}>
+                        <ConfigSider/>
+                    </Sider>
                     <Content className='viewlayout'>
                         <ViewLayout isOwner={isOwner} contentSize={contentSize} editMode={editMode}/>
                     </Content>
-                    <Sider className='config-sider' width={(isOwner && editMode) ? 380 : 0}>
-                        <ConfigForm/>
-                    </Sider>
                 </Layout>
             </Content>
         </Layout>

src/components/dashboardDesigner/cusFilterBox.jsx

@@ -0,0 +1,215 @@
+import React from 'react'
+import { connect } from 'dva'
+import { Modal, Input, Form, Button, Icon, Collapse, Spin } from 'antd'
+import './cusFilterBox.less'
+
+class CusFilterBox extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    }
+
+    addRelationColumn = () => {
+        const { dispatch } = this.props;
+        dispatch({ type: 'dashboardDesigner/addRelationColumn' });
+    }
+
+    deleteRelationColumn = (e) => {
+        const { dispatch } = this.props;
+        const code = e.target.dataset.code;
+        dispatch({ type: 'dashboardDesigner/deleteRelationColumn', code });
+    }
+
+    generateRelations = () => {
+        const { dashboardDesigner, dispatch } = this.props;
+        const { editing, selectedDataSource } = this.state;
+        const { relationColumns, dataSources, columnFetching } = dashboardDesigner;
+
+        return relationColumns.map((r, ri) => (
+            <Collapse.Panel
+                key={r.code}
+                disabled={editing}
+                header={<Form.Item className='filtercolumn-name' label='名称' labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+                    <Input size='small' value={r.name}
+                    onChange={(e) => {
+                        dispatch({ type: 'dashboardDesigner/setRelationColumn', code: r.code, relationColumn: { ...r, name: e.target.value } });
+                    }} onFocus={() => {
+                        this.setState({
+                            editing: true,
+                        })
+                    }} onBlur={() => {
+                        this.setState({
+                            editing: false
+                        })
+                    }}/>
+                </Form.Item>}
+            >
+                {(dataSources.length > 0 ? <div className='filtercolumn-relation'>
+                    {columnFetching && <div className='loading'>
+                        <Spin />
+                    </div>}
+                    <div className='datasources'>
+                        { dataSources.map((d, di) => (
+                            <Button
+                                className='datasource'
+                                key={d.code}
+                                type={!!selectedDataSource && selectedDataSource.code === d.code ? 'primary' : 'default'}
+                                onClick={() => {
+                                    this.setState({
+                                        selectedDataSource: {
+                                            code: d.code,
+                                            name: d.name
+                                        },
+                                        selectedColumn: null
+                                    });
+                                    dispatch({ type: 'dashboardDesigner/remoteGetColumns', dataSourceCode: d.code });
+                                }}
+                            >
+                                <span className='label'>{d.name}</span>
+                                {r.relations.findIndex(r => r.dataSource.code === d.code) !== -1 && <Icon type='check-circle' theme={r.relations[0].dataSource.code === d.code ? 'filled' : 'outlined'} />}
+                            </Button>
+                        )) }
+                    </div>
+                    <div className='columns'>
+                        { this.generateRelationColumns(r) }
+                    </div>
+                </div> : <div className='filtercolumn-empty'>
+                    无关联数据源
+                </div>)}
+                <div className='filtercolumn-delete'>
+                    <Button type='danger' className='delbtn' data-code={r.code} onClick={this.deleteRelationColumn}>
+                        <Icon type='delete' theme='outlined' />删除
+                    </Button>
+                </div>
+            </Collapse.Panel>
+        ))
+    }
+
+    generateRelationColumns = (r) => {
+        const { dashboardDesigner } = this.props;
+        const { selectedDataSource, selectedColumn } = this.state;
+        const { dataSources } = dashboardDesigner;
+
+        let flag = !!selectedDataSource && !!dataSources.find(d => d.code === selectedDataSource.code) && !!dataSources.find(d => d.code === selectedDataSource.code).columns;
+        if(!flag) {
+            return null;
+        }
+        let arr = dataSources.find(d => d.code === selectedDataSource.code).columns.filter(c => {
+            if(!!r.relations[0]) {
+                // 选中的不是第一个
+                if(r.relations[0].dataSource.code !== selectedDataSource.code) {
+                    // 只能选用同类型的列
+                    return c.type === r.relations[0].column.type;
+                }else {
+                    return true;
+                }
+            }else {
+                return true;
+            }
+        });
+
+        return arr.map(c => (
+            <Button
+                className='column'
+                type={!!selectedColumn && selectedColumn.name === c.name ? 'primary' : 'default'}
+                key={c.name}
+                onClick={() => {
+                    this.relationColumnClick(c, r)
+                }}
+            >
+                <span className='label'>{c.label}</span>
+                {r.relations.findIndex(r => r.dataSource.code === selectedDataSource.code) !== -1 && r.relations[r.relations.findIndex(r => r.dataSource.code === selectedDataSource.code)].column.name === c.name && <Icon type='check-circle' theme={r.relations[0].column.name === c.name ? 'filled' : 'outlined'} />}
+            </Button>
+        ))
+    }
+
+    relationColumnClick = (c, r) => {
+        const { dashboardDesigner, dispatch } = this.props;
+        const { selectedDataSource } = this.state;
+        const { relationColumns } = dashboardDesigner;
+
+        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){
+                relations.push({
+                    dataSource: {
+                        code: selectedDataSource.code,
+                        name: selectedDataSource.name
+                    },
+                    column: {
+                        label: c.label,
+                        name: c.name,
+                        type: c.type
+                    }
+                });
+            }else {
+                let cr = relations[idx];
+                if(cr.column.name === selectedColumn.name) {
+                    relations.splice(idx, 1);
+                }else {
+                    relations[idx] = {
+                        dataSource: {
+                            code: selectedDataSource.code,
+                            name: selectedDataSource.name
+                        },
+                        column: {
+                            code: c.code,
+                            name: c.name,
+                            type: c.type
+                        }
+                    };
+                }
+            }
+            let index = relationColumns.findIndex(rc => rc.code === r.code);
+            relationColumns[index] = { ...r, relations };
+            dispatch({ type: 'dashboardDesigner/setField', name: 'relationColumns', value: relationColumns });
+        });
+    }
+
+    render() {
+        const { visibleBox, hideBox } = this.props;
+        const { activeKey } = this.state;
+
+        return <Modal
+            className='cusfilter-box'
+            width={380}
+            height='80%'
+            title='自定义过滤条件'
+            visible={visibleBox}
+            footer={null}
+            onCancel={hideBox}
+            maskClosable={false}
+            destroyOnClose={true}
+        >
+            <Form className='config-form'>
+            <div className='filtercolumns'>
+                <Collapse key='filtercolumnscollapse' activeKey={activeKey} onChange={k => {
+                    this.setState({
+                        selectedDataSource: null,
+                        selectedColumn: null,
+                        activeKey: k[k.length - 1], // 保持只有一个展开项
+                    });
+                }}>
+                    {this.generateRelations()}
+                </Collapse>
+                <div className='bottom-btns'>
+                    <Button className='addbtn' onClick={this.addRelationColumn}>
+                        <Icon type='plus' theme='outlined' />添加
+                    </Button>
+                </div>
+            </div>
+        </Form>
+        </Modal>
+    }
+}
+
+export default connect(({ present: { dashboardDesigner } }) => ({ dashboardDesigner }))(CusFilterBox);

src/components/dashboardDesigner/cusFilterBox.less

@@ -0,0 +1,134 @@
+.cusfilter-box {
+    top: 50px;
+    .ant-modal-body {
+        padding: 10px;
+        max-height: 80vh;
+        overflow-y: auto;
+        .config-form {
+            .ant-divider {
+                margin: 10px 0;
+            }
+            .ant-form-item-label {
+                text-align: left;
+            }
+            .filtercolumns {
+                &>.ant-collapse {
+                    &>.ant-collapse-item {
+                        &>.ant-collapse-header {
+                            padding: 0 10px 0 40px;
+                            .ant-form-item {
+                                .ant-form-item-label {
+                                    label {
+                                        cursor: pointer;
+                                    }
+                                }
+                            }
+                        }
+                        .ant-collapse-content {
+                            .ant-collapse-content-box {
+                                padding: 0;
+                                .filtercolumn-empty {
+                                    margin: 5px 5px 0 5px;
+                                    height: 40px;
+                                    line-height: 40px;
+                                    text-align: center;
+                                    font-size: 16px;
+                                    color: red;
+                                    background-color: #d4d7dc;
+                                }
+                                .filtercolumn-relation {
+                                    display: flex;
+                                    max-height: 50vh;
+                                    .loading {
+                                        position: absolute;
+                                        z-index: 1;
+                                        right: 20px;
+                                        margin-top: 10px;
+                                    }
+                                    .datasources {
+                                        padding-bottom: 5px;
+                                        flex: 0.4;
+                                        display: flex;
+                                        flex-direction: column;
+                                        overflow: auto;
+                                        border-right: 1px solid #cccccc;
+                                        border-bottom: 1px solid #cccccc;
+                                        .datasource {
+                                            padding-right: 10px;
+                                            margin: 5px 5px 0 5px;
+                                            flex: none;
+                                            display: flex;
+                                            justify-content: space-between;
+                                            .label {
+                                                overflow: hidden;
+                                                text-overflow: ellipsis;
+                                            }
+                                            .anticon {
+                                                margin-top: 3px;
+                                            }
+                                            &[class="ant-btn-primary"] {
+                                                background-color: #40A9FF;
+                                            }
+                                        }
+                                    }
+                                    .columns {
+                                        padding-bottom: 5px;
+                                        flex: 0.6;
+                                        display: flex;
+                                        flex-direction: column;
+                                        overflow: auto;
+                                        border-bottom: 1px solid #cccccc;
+                                        .column {
+                                            margin: 5px 5px 0 5px;
+                                            padding-right: 10px;
+                                            flex: none;
+                                            display: flex;
+                                            justify-content: space-between;
+                                            .label {
+                                                text-overflow: ellipsis;
+                                                overflow: hidden;
+                                            }
+                                            .anticon {
+                                                margin-top: 3px;
+                                            }
+                                            &[class="ant-btn-primary"] {
+                                                background-color: #40A9FF;
+                                            }
+                                        }
+                                    }
+                                }
+                                .filtercolumn-delete {
+                                    padding: 5px;
+                                    .delbtn {
+                                        width: 100%;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    .ant-collapse-item-disabled {
+                        &>.ant-collapse-header {
+                            cursor: pointer;
+                            color: rgba(0, 0, 0, 0.85);
+                            &>.arrow {
+                                cursor: pointer;
+                                color: rgba(0, 0, 0, 0.85);
+                            }
+                        }
+                    }
+        
+                }
+                .bottom-btns {
+                    margin-top: 10px;
+                    height: 40px;
+                    .addbtn {
+                        height: 100%;
+                        width: 100%;
+                        border-style: dashed;
+                        border-width: 1px;
+                    }
+                }
+            }
+        }
+    }
+}

src/components/dashboardDesigner/header.less

@@ -6,14 +6,18 @@
         flex: 1;
         text-align: center;
         .input-title {
-            text-align: center;
-            font-size: 18px;
-            color: rgba(0, 0, 0, 0.65);
-            cursor: text;
-            border: none;
-            border-bottom-right-radius: 4px;
-            border-top-right-radius: 4px;
-            background-color: transparent;
+            .ant-input-wrapper {
+                input {
+                    text-align: center;
+                    font-size: 18px;
+                    color: rgba(0, 0, 0, 0.65);
+                    cursor: text;
+                    border: none;
+                    border-bottom-right-radius: 4px;
+                    border-top-right-radius: 4px;
+                    background-color: transparent;
+                }
+            }
         }
         .ant-input-group-addon {
             cursor: pointer;

src/components/dashboardDesigner/layout.less

@@ -24,141 +24,23 @@
                     height: 100%;
                     &>.viewlayout {
                         padding: 5px 5px 50px 5px;
-                        overflow: auto;
+                        overflow-x: hidden;
                         border: 1px solid #CCCCCC;
                     }
                     .config-sider {
                         border: none;
                         .ant-layout-sider-children {
-                            margin: 0 0 0 10px;
+                            margin: 0 10px 0 0;
                             padding: 5px;
                             overflow: auto;
                             border: 1px solid #CCCCCC;
-                            .config-form {
-                                .ant-divider {
-                                    margin: 10px 0;
-                                }
-                                .ant-form-item-label {
-                                    text-align: left;
-                                }
-                                .filtercolumns {
-                                    &>.ant-collapse {
-                                        &>.ant-collapse-item {
-                                            &>.ant-collapse-header {
-                                                padding: 0 10px 0 40px;
-                                                .ant-form-item {
-                                                    .ant-form-item-label {
-                                                        label {
-                                                            cursor: pointer;
-                                                        }
-                                                    }
-                                                }
-                                            }
-                                            .ant-collapse-content {
-                                                .ant-collapse-content-box {
-                                                    padding: 0;
-                                                    .filtercolumn-empty {
-                                                        margin: 5px 5px 0 5px;
-                                                        height: 40px;
-                                                        line-height: 40px;
-                                                        text-align: center;
-                                                        font-size: 16px;
-                                                        color: red;
-                                                        background-color: #d4d7dc;
-                                                    }
-                                                    .filtercolumn-relation {
-                                                        display: flex;
-                                                        max-height: 50vh;
-                                                        .loading {
-                                                            position: absolute;
-                                                            z-index: 1;
-                                                            right: 20px;
-                                                            margin-top: 10px;
-                                                        }
-                                                        .datasources {
-                                                            padding-bottom: 5px;
-                                                            flex: 0.4;
-                                                            display: flex;
-                                                            flex-direction: column;
-                                                            overflow: auto;
-                                                            border-right: 1px solid #cccccc;
-                                                            border-bottom: 1px solid #cccccc;
-                                                            .datasource {
-                                                                padding-right: 10px;
-                                                                margin: 5px 5px 0 5px;
-                                                                flex: none;
-                                                                display: flex;
-                                                                justify-content: space-between;
-                                                                .label {
-                                                                    overflow: hidden;
-                                                                    text-overflow: ellipsis;
-                                                                }
-                                                                .anticon {
-                                                                    margin-top: 3px;
-                                                                }
-                                                                &[class="ant-btn-primary"] {
-                                                                    background-color: #40A9FF;
-                                                                }
-                                                            }
-                                                        }
-                                                        .columns {
-                                                            padding-bottom: 5px;
-                                                            flex: 0.6;
-                                                            display: flex;
-                                                            flex-direction: column;
-                                                            overflow: auto;
-                                                            border-bottom: 1px solid #cccccc;
-                                                            .column {
-                                                                margin: 5px 5px 0 5px;
-                                                                padding-right: 10px;
-                                                                flex: none;
-                                                                display: flex;
-                                                                justify-content: space-between;
-                                                                .label {
-                                                                    text-overflow: ellipsis;
-                                                                    overflow: hidden;
-                                                                }
-                                                                .anticon {
-                                                                    margin-top: 3px;
-                                                                }
-                                                                &[class="ant-btn-primary"] {
-                                                                    background-color: #40A9FF;
-                                                                }
-                                                            }
-                                                        }
-                                                    }
-                                                    .filtercolumn-delete {
-                                                        padding: 5px;
-                                                        .delbtn {
-                                                            width: 100%;
-                                                        }
-                                                    }
-                                                }
-                                            }
-                                        }
-                                        .ant-collapse-item-disabled {
-                                            &>.ant-collapse-header {
-                                                cursor: pointer;
-                                                color: rgba(0, 0, 0, 0.85);
-                                                &>.arrow {
-                                                    cursor: pointer;
-                                                    color: rgba(0, 0, 0, 0.85);
-                                                }
-                                            }
-                                        }
-
-                                    }
-                                    .bottom-btns {
-                                        margin-top: 10px;
-                                        height: 40px;
-                                        .addbtn {
-                                            height: 100%;
-                                            width: 100%;
-                                            border-style: dashed;
-                                            border-width: 1px;
-                                        }
-                                    }
-                                }
+                        }
+                        &-closed {
+                            .ant-layout-sider-children {
+                                margin: 0;
+                                padding: 0;
+                                overflow: hidden;
+                                border: none;
                             }
                         }
                     }
@@ -181,7 +63,7 @@
                         overflow: hidden;
                         text-overflow: ellipsis;
                         border-style: dashed;
-                        margin: 8px 2px 0 2px;
+                        margin: 8px 2px 8px 2px;
                     }
                     .filter-tag-using {
                         border-style: solid;
@@ -194,26 +76,6 @@
                         border-style: solid;
                     }
                 }
-                .viewtype {
-                    display: flex;
-                    align-items: center;
-                    .viewtype-icon {
-                        font-size: 20px;
-                        cursor: pointer;
-                        margin-left: 5px;
-                        height: 30px;
-                        width: 30px;
-                        border: 1px solid black;
-                        border-radius: 4px;
-                        padding: 4px;
-                        border: 1px solid #1890FF;
-                        color: #1890FF;
-                        &:hover {
-                            background-color: #1890FF;
-                            color: white;
-                        }
-                    }
-                }
             }
         }
     }

src/components/dashboardDesigner/viewLayout.jsx

@@ -105,7 +105,7 @@ class ViewLayout extends React.PureComponent {
                 {(children.length === 0) ? <div key='default-chartview' className='default-chartview' data-grid={{ x: 0, y: 0, w: 12, h: 2, minW: 12, maxW: 12, minH: 2, maxH: 2, static: true }}>
                     <div className='tip'>
                         <Icon type="message" theme="outlined" />
-                        {isOwner ? <span>请在工具栏右侧选择图表或富文本类型添加到看板</span> : <span>未添加图表</span>}
+                        {isOwner ? <span>请从左侧【图表添加】栏目中选择图表添加到看板</span> : <span>无图表元素</span>}
                     </div>
                 </div> : children}
             </ReactGridLayout>