大量样式优化

src/components/chartDesigner/sections/chartDataPreview.jsx

@@ -3,7 +3,6 @@ import { connect } from 'dva';
 import { Modal, Table } from 'antd';
 import moment from 'moment';
 import EllipsisTooltip from '../../common/ellipsisTooltip/index';
-import './chartDataPreview.less';
 
 class ChartDataPreview extends React.Component {
     constructor(props) {
@@ -37,7 +36,7 @@ class ChartDataPreview extends React.Component {
         return <Modal
             className={`datapreview chartdatapreview ${modalClassName}`}
             title='查看列'
-            width={800}
+            width='80%'
             visible={visibleBox}
             footer={null}
             onCancel={() => {

src/components/chartDesigner/sections/chartDataPreview.less

@@ -1,3 +0,0 @@
-.ant-modal.chartdatapreview {
-    top: 50px;
-}

src/components/chartDesigner/sections/displayColumnBox.jsx

@@ -88,6 +88,7 @@ class DisplayColumnBox extends React.Component {
         return (
             <Modal
                 visible={visibleDisplayColumnBox}
+                title='设置展示列'
                 onCancel={this.onCancel}
                 width={700}
                 style={{textAlign:'center'}}

src/components/chartDesigner/sections/style/theme/default.less

@@ -8,7 +8,7 @@
                         color: #F5F7FB;
                     }
                     &.c-key, &.c-extra .over-wrapper > span{
-                        color: #bdcce8;
+                        color: rgba(245, 247, 251, 0.8);
                     }
                 }
             }
@@ -20,4 +20,13 @@
             }
         }
     }
+}
+.dashboard-viewcontent.theme2 {
+    .chartview {
+        &> .chartview-toolbar {
+            &> .chart-title {
+                color: #2C82BE !important;
+            }
+        }
+    }
 }

src/components/common/accessObjectBox/accessObjectBox.jsx

@@ -258,7 +258,7 @@ class TableList extends React.Component {
 
         return <div ref={node => this[refName] = node} className='table-list'>
             <Row type='flex' justify='end' style={{ position: 'absolute', right: 0, top: 0 }}>
-                <Col style={{ padding: '8px' }}><Search 
+                <Col style={{ padding: '4px 0' }}><Search 
                     placeholder="请输入关键字"
                     value={filterLabel}
                     onChange={e => {

src/components/common/accessObjectBox/accessObjectBox.less

@@ -9,7 +9,6 @@
         .ant-modal-body {
             flex: 1;
             overflow: hidden;
-            padding: 0 12px 0 12px;
             &>.accessobject-tabs {
                 display: flex;
                 flex-direction: column;
@@ -21,19 +20,43 @@
                     &> .ant-tabs-nav-container {
                         .ant-tabs-nav-wrap {
                             .ant-tabs-tab {
+                                height: 32px;
+                                line-height: 32px;
                                 color: @tab-color;
                                 background: @tab-background;
                                 border-color: @tab-background-active;
                                 border-radius: 0;
+                                border-left-width: 0;
                                 border-right-width: 0;
                                 margin: 0;
                                 text-align: center;
+                                &:after {
+                                    content: ' ';
+                                    width: 1px;
+                                    height: 50%;
+                                    position: absolute;
+                                    border-right: 1px solid #2C82BE;
+                                    margin-left: 16px;
+                                    margin-top: 10%;
+                                    z-index: 1;
+                                }
                                 &.ant-tabs-tab-active {
                                     color: @tab-color-active;
                                     background: @tab-background-active;
+                                    &:after {
+                                        content: none;
+                                    }
+                                }
+                                &:first-child {
+                                    border-radius: @border-radius-base 0 0 @border-radius-base;
+                                    border-left-width: 1px;
                                 }
                                 &:last-child {
+                                    border-radius: 0 @border-radius-base @border-radius-base 0;
                                     border-right-width: 1px;
+                                    &:after {
+                                        content: none;
+                                    }
                                 }
                             }
                         }
@@ -43,7 +66,9 @@
                     flex: 1;
                     overflow: hidden;
                     &>.ant-tabs-tabpane {
-                        height: 100%;
+                        &.ant-tabs-tabpane-active {
+                            height: 100%;
+                        }
                         .table-list {
                             height: 100%;
                             display: flex;
@@ -57,6 +82,9 @@
                 }
             }
             .object-table {
+                .ant-table {
+                    padding-bottom: 60px;
+                }
                 .ant-table-header {
                     overflow-y: hidden;
                     margin-right: 6px;

src/components/common/dataPreview/dataPreview.jsx

@@ -10,8 +10,8 @@ class DataPreview extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            boxW: 1, // 0 ~ 1
-            boxH: 1, // 0 ~ 1
+            boxW: 0.8, // 0 ~ 1
+            boxH: 0.8, // 0 ~ 1
             columnWidth: 200,
             tableHeaderHeight: 60,
             screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
@@ -20,9 +20,8 @@ class DataPreview extends React.Component {
     }
 
     componentDidMount() {
-        const { fetchFunction } = this.props;
+        this.onWindowResize();
         window.addEventListener('resize', this.onWindowResize);
-        typeof fetchFunction === 'function' && fetchFunction();
     }
 
     componentWillUnmount() {
@@ -32,26 +31,25 @@ class DataPreview extends React.Component {
     }
 
     onWindowResize = () => {
-        const boxEl = document.getElementsByClassName('datapreview')[0];
-        const tableHeaderEl = boxEl.getElementsByTagName('thead')[0];
+        const { fetchFunction } = this.props;
+        let tableBodyHeight = document.body.clientHeight * this.state.boxH - 64 - 24 * 2 - 40 - 40 - 2;
 
-        this.setState({
-            screenWidth: document.documentElement.clientWidth || document.body.clientWidth, // 屏幕宽
-            screenHeight: document.documentElement.clientHeight || document.body.clientHeight, // 屏幕高
-            tableHeaderHeight: tableHeaderEl.offsetHeight + 2, // 表头高度（含边框）
-        });
+        if(tableBodyHeight !== this.state.tableBodyHeight) {
+            this.setState({
+                tableBodyHeight
+            }, () => {
+                typeof fetchFunction === 'function' && fetchFunction(1, Math.ceil(tableBodyHeight / 38));
+            });
+        }
     }
 
     render() {
         const { title, modalClassName, fetchFunction, dataList, visibleBox, hideBox, dispatch } = this.props;
         const { loading, columns, dataSource, pageSize, total } = dataList;
-        const { screenWidth, screenHeight, boxW, boxH, columnWidth, tableHeaderHeight } = this.state;
-        const tableBodyWidth = screenWidth * boxW - 10 - 10 - 18;
-        const tableBodyHeight = screenHeight * boxH - 40 - 40 - tableHeaderHeight - 2;
+        const { boxW, boxH, columnWidth, tableBodyHeight } = this.state;
 
         return <Modal
             className={`datapreview ${modalClassName}`}
-            style={{ top: `${(1 - boxH) * 0.5 * 100}%` }}
             title={title}
             width={`${100 * boxW}%`}
             height={`${100 * boxH}%`}
@@ -110,7 +108,7 @@ class DataPreview extends React.Component {
                         typeof fetchFunction === 'function' && fetchFunction(page, pageSize);
                     }
                 }}
-                scroll={{ x: columns ? columns.length * columnWidth : tableBodyWidth, y: tableBodyHeight }}
+                scroll={{ x: columns ? columns.length * columnWidth : false, y: tableBodyHeight }}
             />
         </Modal>
     }

src/components/common/dataPreview/dataPreview.less

@@ -1,29 +1,13 @@
 .datapreview {
     overflow: hidden;
     padding: 0;
-    top: 0;
+    top: 5%;
 
     .ant-modal-content {
         max-height: 100%;
         height: 100%;
-        padding-top: 40px;
         overflow: hidden;
-        .ant-modal-header {
-            display: block;
-            padding-top: 0;
-            height: 40px;
-            margin-top: -40px;
-            padding-bottom: 6px;
-            .ant-modal-title {
-                font-size: 20px;
-                text-align: left;
-                line-height: 40px;
-                margin: 0;
-            }
-        }
         .ant-modal-body {
-            height: 100%;
-            padding: 0px 36px;
 
             .ant-table-wrapper {
                 height: 100%;
@@ -33,7 +17,7 @@
 
                     .ant-spin-container {
                         height: 100%;
-                        padding-bottom: 40px;
+                        padding-bottom: 50px;
 
                         .ant-table {
                             height: 100%;

src/components/dashboardDesigner/cusFilterBox.jsx

@@ -221,6 +221,7 @@ class CusFilterBox extends React.Component {
 
     render() {
         const { visibleBox, hideBox, dispatch } = this.props;
+        const { relationColumns } = this.state;
         const { activeKey } = this.state;
 
         return <Modal
@@ -230,7 +231,6 @@ class CusFilterBox extends React.Component {
             title='自定义过滤条件'
             visible={visibleBox}
             footer={<Button className='okbtn' type='primary' onClick={() => {
-                let relationColumns = this.state.relationColumns;
                 let flag = true;
                 for(let i = 0; i < relationColumns.length; i++) {
                     let rc = relationColumns[i];
@@ -253,7 +253,7 @@ class CusFilterBox extends React.Component {
         >
             <Form className='config-form'>
                 <div className='filtercolumns'>
-                    <Collapse key='filtercolumnscollapse' activeKey={activeKey} onChange={k => {
+                    {relationColumns.length > 0 && <Collapse key='filtercolumnscollapse' activeKey={activeKey} onChange={k => {
                         this.setState({
                             selectedDataSource: null,
                             selectedColumn: null,
@@ -261,7 +261,7 @@ class CusFilterBox extends React.Component {
                         });
                     }}>
                         {this.generateRelations()}
-                    </Collapse>
+                    </Collapse>}
                     <div className='bottom-btns'>
                         <Button className='addbtn' onClick={this.addRelationColumn}>
                             <Icon type='plus' theme='outlined' />添加

src/components/dashboardDesigner/header.jsx

@@ -74,14 +74,14 @@ class Header extends React.Component {
                                 dispatch({ type: 'dashboardDesigner/reset' });
                             }
                         }}>
-                            返回
+                            <Icon type='left' />返回
                         </Button>
                     </Popconfirm>}
                     {!this.isOwner() && <Button onClick={(e) => {
                         dispatch({ type: 'main/goBack', path: '/workshop/chart' });
                         dispatch({ type: 'dashboardDesigner/reset' });
                     }}>
-                        返回
+                        <Icon type='left' />返回
                     </Button>}
                 </div>
                 <div className='header-item toolbar-title'>

src/components/dashboardDesigner/layout.less

@@ -42,7 +42,7 @@
                         border: none;
                         .ant-layout-sider-children {
                             margin: 0 10px 0 0;
-                            padding: 5px;
+                            padding: 12px;
                             overflow: auto;
                             border: 1px solid @border-color-base;
                         }

src/components/dashboardDesigner/viewLayout.less

@@ -28,6 +28,7 @@
       padding: 0 10px;
       justify-content: space-between;
       .chart-title {
+        color: #2C82BE;
         font-size: 16px;
         line-height: 40px;
         display: flex;

src/components/dataSource/list.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Row, Col, Button, Table, Icon, Menu, Dropdown, Card, Breadcrumb, Tag, Checkbox, Select } from 'antd'
+import { Layout, Row, Col, Button, Table, Icon, Menu, Dropdown, Card, Breadcrumb, Tag, Checkbox } from 'antd'
 import { connect } from 'dva'
 import { arrayToTree, dateFormat } from '../../utils/baseUtils'
 import GroupManagementBox from '../common/groupManageMentBox/box'
@@ -14,7 +14,6 @@ import Loading from '../common/loading/index'
 import CusIcon from '../common/cusIcon'
 import './list.less'
 const { Content } = Layout
-const { Option } = Select
 
 class DataSource extends React.Component {
     constructor(props) {
@@ -205,28 +204,6 @@ class DataSource extends React.Component {
         })
     }
 
-
-    hideGroupMenu = () => {
-        this.setState({
-            visibleGroupMenu: false
-        });
-    }
-
-    onDrop = (info) => {
-        const { dispatch } = this.props;
-
-        const dropCode = info.node.props.eventKey;
-        const dragCode = info.dragNode.props.eventKey;
-        const dropPos = info.node.props.pos.split('-');
-        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); // -1/0/1 -> 兄/子/弟
-        dispatch({ type: 'dataSource/remoteMoveGroup', dragCode, dropCode, dropPosition });
-    }
-
-    generateFilterItems = () => {
-        const { filterItems } = this.props.dataSource;
-        return filterItems.map(t => <Option key={t.name}  value={t.name}>{t.label}</Option>);
-    }
-
     render() {
         const { main, dataSource, dispatch } = this.props;
         const { listLoading, noGroup } = dataSource;

src/components/dataSourceDetail/accessConfig.jsx

@@ -276,6 +276,7 @@ class DataSourceAccessConfig extends React.Component{
                                 return (l.name || '').search(reg) !== -1;
                              }).map((p, i) => ({ ...p, key: i })) : []}
                             size='small'
+                            pagination={false}
                             onRow={(record) => {
                                 return {
                                     onClick: () => {this.setState({ currentPolicy:  record})}

src/components/dataSourceDetail/columnConfig.less

@@ -21,8 +21,12 @@
     >.table-columnconfig {
         .ant-table {
             padding-bottom: 60px;
+            .ant-table-body {
+                border: none;
+            }
         }
         table {
+            border: none;
             overflow: hidden;
         }
         .ant-table-thead > tr > th .anticon-filter, .ant-table-thead > tr > th .ant-table-filter-icon {
@@ -62,8 +66,12 @@
             opacity: 0;
             cursor: col-resize;
         }
-        .ant-table-bordered .ant-table-thead > tr > th:first-child, .ant-table-bordered .ant-table-tbody > tr > td:first-child {
-            border-left: 2px solid #e8e8e8;
+        .ant-table-bordered .ant-table-tbody > tr > td:first-child {
+            border-left: 1px solid #e8e8e8;
+        }
+        .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .anticon-filter:hover, .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters:hover .ant-table-filter-icon:hover,
+        .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters .anticon-filter.ant-table-filter-open, .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters .ant-table-filter-icon.ant-table-filter-open {
+            background: transparent;
         }
     }
 }

src/components/dataSourceDetail/header.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Popconfirm } from 'antd'
+import { Button, Popconfirm, Icon } from 'antd'
 import { connect } from 'dva'
 import './header.less'
 
@@ -73,7 +73,7 @@ class DataSourceDetailHeader extends React.Component {
                                 dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                             }
                         }}>
-                            返回
+                            <Icon type='left' />返回
                         </Button>
                     </Popconfirm>
                     <Popconfirm

src/themes/default/base.less

@@ -22,6 +22,20 @@
 .ant-select-focused .ant-select-selection, .ant0select0selection:focus, .ant0select-selection:active {
     box-shadow: none;
 }
+.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    color: rgba(0,0,0,0.65);
+    line-height: 0;
+    height: 100%;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 5px 0;
+}
+input::-webkit-input-placeholder {
+    color: #BFBEBE !important;
+}
 
 // Tools Button
 .ant-btn.tool-link {
@@ -72,6 +86,7 @@
             white-space: nowrap;
             max-width: 0px;
             background: transparent;
+            border: none;
             >div {
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -197,7 +212,8 @@
     .ant-message-notice {
         .ant-message-notice-content {
             border: 1px solid @border-color-base;
-            background: #F1FAEE;
+            padding: 8px 12px;
+            background: #f5f9f8;
             box-shadow: none;
             .ant-message-success {
                 .anticon, span {

src/themes/default/dashboarddesigner.less

@@ -23,14 +23,11 @@
                                     margin-top: 12px;
                                     margin-bottom: 12px;
                                     &:after {
-                                        content: '';
+                                        content: ' ';
+                                        display: block;
+                                        width: 100%;
+                                        height: 0;
                                         border-bottom: 1px solid @text-color;
-                                        position: absolute;
-                                        width: 94%;
-                                        height: 2px;
-                                        /* top: 20px; */
-                                        margin-top: 22px;
-                                        margin-left: -56px;
                                     }
                                 }
                                 .view-types {