图表详情页样式调整

src/components/chartDesigner/charts/echartsView.jsx

@@ -2,16 +2,21 @@ import React from 'react'
 import Echarts from 'echarts-for-react'
 import { connect } from 'dva'
 import { hashcode } from '../../../utils/baseUtils'
+import EmptyContent from '../../common/emptyContent'
 
 const EchartsView = ({ chartDesigner, dispatch, optionConfig }) => {
     const { chartOption } = chartDesigner;
     const option = { ...chartOption, ...optionConfig };
-    return <Echarts
+    if(!option.series) {
+        return <EmptyContent />
+    }else {
+        return <Echarts
         key={hashcode(option)}
         option={option}
         className='rc-echarts'
         style={{height: '100%'}}
     />
+    }
 }
 
 function mapStateToProps({ present: { chartDesigner } }) {

src/components/chartDesigner/charts/tableView.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Table } from 'antd'
 import { connect } from 'dva'
+import EllipsisTooltip from '../../common/ellipsisTooltip/index'
 import './tableView.less'
 
 class TableView extends React.Component {
@@ -8,7 +9,7 @@ class TableView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            columnWidth: 100,
+            columnWidth: 150,
             tableHeaderHeight: 60,
         };
     }
@@ -59,7 +60,21 @@ class TableView extends React.Component {
         return (
             <Table
                 className='table-view'
-                columns={columns ? columns.map(c => ({ ...c, width: columnWidth })) : []}
+                columns={columns ? columns.map((c, i) => {
+                    let obj = { ...c, render: (text) => <EllipsisTooltip title={text}>{text}</EllipsisTooltip>, };
+                    if(i !== columns.length - 1) {
+                        obj.onCell = () => {
+                            return {
+                                style: {
+                                    whiteSpace: 'nowrap',
+                                    maxWidth: columnWidth,
+                                }
+                            }
+                        };
+                        obj.width = columnWidth
+                    }
+                    return obj; 
+                }) : []}
                 dataSource={dataSource || []}
                 size='small'
                 bordered={bordered}
@@ -77,9 +92,6 @@ class TableView extends React.Component {
                         inPage && dispatch({ type: 'chartDesigner/fetchDataViewData', page, pageSize });
                     }
                 }}
-                locale={{
-                    emptyText: <div>无数据</div>
-                }}
             />
         );
     }

src/components/chartDesigner/charts/tableView.less

@@ -5,22 +5,8 @@
         .ant-spin-container {
             height: 100%;
             padding-bottom: 40px;
-            .ant-table {
-                height: 100%;
-                .ant-table-content {
-                    height: 100%;
-                    .ant-table-scroll {
-                        height: 100%;
-                        .ant-table-body {
-                            height: 100%;
-                            // overflow: auto !important;
-                        }
-                    }
-                }
-                .ant-table-header {
-                    
-                    // overflow-y: hidden !important;
-                }
+            .ant-table-body {
+                margin-top: 0;
             }
             .ant-pagination {
                 margin: 8px 0;

src/components/chartDesigner/header.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Input, Icon, Button, Popconfirm, Tooltip, Modal } from 'antd'
 import { connect } from 'dva'
+import DeleteBox from '../common/deleteBox/deleteBox'
 import './header.less'
 
 class Header extends React.Component {
@@ -9,6 +10,7 @@ class Header extends React.Component {
         this.state = {
             visibleConfirm: false,
             visibleCopyBox: false,
+            visibleDeleteBox: false,
             newHeaderLabel: ''
         }
     }
@@ -35,7 +37,7 @@ class Header extends React.Component {
 
     render() {
         const { chartDesigner, dispatch } = this.props;
-        const { visibleCopyBox, newHeaderLabel } = this.state;
+        const { visibleCopyBox, newHeaderLabel, visibleDeleteBox } = this.state;
         return (
             <div className='header'>
                 <div className='header-item toolbar-back'>
@@ -73,14 +75,6 @@ class Header extends React.Component {
                     }}>
                         <Icon type='left' />返回
                     </Button>}
-                    {this.isOwner() && <Button className='button-uodo' onClick={() => {
-                        if(chartDesigner.code && chartDesigner.code !== -1) {
-                            dispatch({ type: 'chart/remoteModify' });
-                        }else {
-                            dispatch({ type: 'chart/remoteAdd' });
-                        }
-                        dispatch({ type: 'chartDesigner/setDirty', dirty: false });
-                    }}><Icon type='save' />保存</Button>}
                 </div>
                 <div className='header-item toolbar-title'>
                     <Input
@@ -99,41 +93,55 @@ class Header extends React.Component {
                     />
                 </div>
                 <div className='header-item toolbar-buttons'>
-                    <div>
-                        {this.isOwner() && <Tooltip title='复制新增'>
-                            <Button className='tools-btn' icon='copy' onClick={() => {
-                                this.setState({
-                                    visibleCopyBox: true,
-                                    newHeaderLabel: chartDesigner.header.label + '_副本'
-                                })
-                            }}>
-                            </Button>
-                        </Tooltip>}
-                        {this.isOwner() && visibleCopyBox && <Modal
-                            title="复制新增"
-                            visible={visibleCopyBox}
-                            okText='创建'
-                            onOk={this.copyHandler}
-                            onCancel={() => {this.setState({visibleCopyBox:false})}}
-                        >
-                            <p>当前的图表会被保存，您将从新的图表副本继续设计。</p>
-                            副本名称:<Input value={newHeaderLabel} placeholder={chartDesigner.header.label+'_副本'} onChange={(e) => {
-                                this.setState({
-                                    newHeaderLabel: e.target.value
-                                });
-                            }} />
-                        </Modal>}
-                        {/* <Tooltip title='撤销'>
-                            <Button className='tools-btn' icon='undo' disabled={past.length === 0} onClick={() => {
-                                dispatch(ActionCreators.undo());
-                            }}></Button>
-                        </Tooltip>
-                        <Tooltip title='重做'>
-                            <Button className='tools-btn' icon='redo' disabled={future.length === 0} onClick={() => {
-                                dispatch(ActionCreators.redo());
-                            }}></Button>
-                        </Tooltip> */}
-                    </div>
+                    {this.isOwner() && <Tooltip title='复制新增'>
+                        <Button className='tools-btn' icon='copy' onClick={() => {
+                            this.setState({
+                                visibleCopyBox: true,
+                                newHeaderLabel: chartDesigner.header.label + '_副本'
+                            })
+                        }}>
+                        复制
+                        </Button>
+                    </Tooltip>}
+                    {this.isOwner() && visibleCopyBox && <Modal
+                        title="复制新增"
+                        visible={visibleCopyBox}
+                        okText='创建'
+                        onOk={this.copyHandler}
+                        onCancel={() => {this.setState({visibleCopyBox:false})}}
+                    >
+                        <p>当前的图表会被保存，您将从新的图表副本继续设计。</p>
+                        副本名称:<Input value={newHeaderLabel} placeholder={chartDesigner.header.label+'_副本'} onChange={(e) => {
+                            this.setState({
+                                newHeaderLabel: e.target.value
+                            });
+                        }} />
+                    </Modal>}
+                    {this.isOwner() && <Button onClick={() => {
+                        this.setState({
+                            visibleDeleteBox: true
+                        });
+                    }}><Icon type='delete' />删除</Button>}
+                    {visibleDeleteBox && <DeleteBox
+                        visibleBox={visibleDeleteBox}
+                        text={<div><span>确定要删除图表【{chartDesigner.header.label}】吗？</span></div>}
+                        hideBox={() => {
+                            this.setState({
+                                visibleDeleteBox: false
+                            })
+                        }}
+                        okHandler={() => {
+                            dispatch({ type: 'chart/remoteDelete', code: chartDesigner.code });
+                            dispatch({ type: 'main/goBack', path: '/workshop/chart' });
+                    }} />}
+                    {this.isOwner() && <Button onClick={() => {
+                        if(chartDesigner.code && chartDesigner.code !== -1) {
+                            dispatch({ type: 'chart/remoteModify' });
+                        }else {
+                            dispatch({ type: 'chart/remoteAdd' });
+                        }
+                        dispatch({ type: 'chartDesigner/setDirty', dirty: false });
+                    }}><Icon type='save' />保存</Button>}
                 </div>
             </div>
         );

src/components/chartDesigner/header.less

@@ -19,7 +19,7 @@
         .input-title {
             input {
                 text-align: center;
-                font-size: 18px;
+                font-size: 16px;
                 border: none;
                 border-bottom-right-radius: 4px;
                 border-top-right-radius: 4px;
@@ -37,12 +37,7 @@
     }
     .toolbar-buttons {
         button {
-            background: transparent;
-            border: none;
-
-            .anticon {
-                font-size: 20px;
-            }
+            margin-left: 8px;
         }
     }
 }

src/components/chartDesigner/layout.jsx

@@ -18,7 +18,7 @@ class ChartDesigner extends React.Component {
     }
     render() {
         const { loading } = this.props;
-        return <Layout className='chartdesigner-layout'>
+        return <Layout className='layout-chartdesigner'>
             <Header className='layout-header'>
                 <ChartDesignerHeader />
             </Header>
@@ -32,7 +32,7 @@ class ChartDesigner extends React.Component {
     }
 }
 function mapStateToProps(state) {
-    let effectsArr = ['chart/remoteDetail', 'chart/remoteGroupList', 'chartDesigner/remoteDataColumn', 'chartDesigner/fetchLineData',
+    let effectsArr = ['chart/remoteDetail', 'chart/remoteDetail', 'chart/remoteModify', 'chart/remoteGroupList', 'chartDesigner/remoteDataColumn', 'chartDesigner/fetchLineData',
         'chartDesigner/fetchBarData', 'chartDesigner/fetchPieData', 'chartDesigner/fetchScatterData', 'chartDesigner/fetchDataViewData', 'chartDesigner/fetchAggregateTableData'];
     let loading = false;
     effectsArr.map(e => {

src/components/chartDesigner/layout.less

@@ -1,14 +1,14 @@
-.chartdesigner-layout {
+.layout-chartdesigner {
     height: 100%;
     overflow: hidden;
     .layout-header {
         background: none;
         padding: 0 10px;
-        height: 40px;
-        line-height: 40px;
+        height: 46px;
+        line-height: 42px;
         border-width: 1px 0;
         border-style: solid;
-        border-color: #CCCCCC;
+        border-color: @border-color-base;
     }
     .layout-content {
         flex: 1;
@@ -16,13 +16,12 @@
             height: 100%;
             .content-header {
                 height: auto;
-                border-top: none;
                 background: none;
                 padding: 0 10px;
                 line-height: 40px;
-                border-width: 1px 0;
+                border-width: 0 0 1px 0;
                 border-style: solid;
-                border-color: #CCCCCC;
+                border-color: @border-color-base;
             }
             .content-body {
                 height: 100%;
@@ -33,7 +32,7 @@
         background: none;
         border-width: 0 1px 0 1px;
         border-style: solid;
-        border-color: #CCCCCC;
+        border-color: @border-color-base;
         .ant-form-item {
             margin-bottom: 0;
         }

src/components/common/dataPreview/dataPreview.less

@@ -41,6 +41,7 @@
                                     height: 100%;
                                     
                                     .ant-table-body {
+                                        margin-top: 0;
                                         height: calc(~"100% - 38px");
                                     }
                                 }

src/components/dashboard/copyBox.jsx

@@ -54,7 +54,7 @@ class CopyBox extends React.Component {
                 >
                     <Select
                         disabled={!currentDataConnectCode}
-                        placeholder={currentDataConnectCode ? '请选择...' : '无需选择数据源'}
+                        placeholder={currentDataConnectCode ? '不切换...' : '无需选择数据源'}
                         onChange={(value) => {
                             this.setState({
                                 currentDataConnectCode: value

src/components/dataSourceDetail/header.jsx

@@ -23,10 +23,6 @@ class DataSourceDetailHeader extends React.Component {
         return (
             <div className='dataSourcedetail-header'>
                 <div>
-                    <span className='title-label'>{name || '未命名'}</span>
-                </div>
-                <div className='header-item buttons'>
-
                     {code && code !== 'create' && <Popconfirm
                         overlayClassName={`close-popconfirm${( ( type === 'database' && (!name || targetDirty) ) || ( type === 'file' && +1 === 2) ) ||
                             (!columns || columns.length === 0) ? ' confirm-disabled' : ''}`}
@@ -65,6 +61,11 @@ class DataSourceDetailHeader extends React.Component {
                             <Icon type='left' />返回
                         </Button>
                     </Popconfirm>}
+                </div>
+                <div>
+                    <span className='title-label'>{name || '未命名'}</span>
+                </div>
+                <div className='header-item buttons'>
                     {!code || code === 'create' && <Button onClick={(e) => {
                         dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                     }}>

src/models/chartDesigner.js

@@ -167,7 +167,7 @@ export default {
             const { dataSource } = action;
             const chartDesigner = yield select(state => state.present.chartDesigner);
             const { baseConfig } = chartDesigner;
-            yield put({ type: 'silentChangeFields', name: 'baseConfig', value: { ...baseConfig, dataSource } });
+            yield put({ type: 'silentChangeField', name: 'baseConfig', value: { ...baseConfig, dataSource } });
             yield put({ type: 'remoteDataColumn', code: dataSource.code });
         },
         *remoteQucikAdd(action, { select, call, put }) {

src/themes/default/chartdesigner.less

@@ -0,0 +1,81 @@
+@tab-bg-color-active: #727D99;
+
+.layout-chartdesigner {
+    &> .layout-header {
+        background: @content-background-color;
+    }
+    &> .layout-content {
+        &> .chartdesigner {
+            &> .ant-layout-sider {
+                background: @sider-background-color;
+                border: none;
+                &> .ant-layout-sider-children {
+                    >.collapse-toggle {
+                        color: blue;
+                    }
+                    >.ant-tabs {
+                        >.ant-tabs-bar {
+                            border: none;
+                            >.ant-tabs-nav-container {
+                                margin-bottom: 0px;
+                                >.ant-tabs-nav-wrap {
+                                    >.ant-tabs-nav-scroll {
+                                        >.ant-tabs-nav {
+                                            .ant-tabs-tab {
+                                                color: #fff;
+                                                &.ant-tabs-tab-active {
+                                                    background: @tab-bg-color-active;
+                                                }
+                                            }
+                                            .ant-tabs-ink-bar {
+                                                display: none !important;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                        >.ant-tabs-content {
+                            .ant-tabs-tabpane {
+                                color: #fff;
+                                &.ant-tabs-tabpane-active {
+                                    background: @tab-bg-color-active;
+                                }
+                            }
+                            .ant-form-item-label > label {
+                                color: #fff;
+                            }
+                        }
+                    }
+                    >.sider-footer {
+                        background: @sider-background-color;
+                        border: none;
+                    }
+                }
+            }
+            &> .view-content {
+                >.ant-layout {
+                    >.content-header {
+                        background: @content-background-color;
+                    }
+                    >.content-body {
+                        background: @content-background-color;
+                        padding: 12px;
+                        >.echarts-for-react {
+                            background: #fff;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.baseconfig-viewtype {
+    border: 1px solid #E2EFFF;
+    .ant-select-dropdown-menu .ant-select-dropdown-menu-item .viewtype-box {
+        .viewtype-icon {
+            color: #419BF9;
+        }
+    }
+}

src/themes/default/frame.less

@@ -28,4 +28,6 @@
     @import "./home.less";
     @import "./workshop.less";
     @import "./setting.less";
-}
+}
+
+@import "./chartdesigner.less";