样式调整

src/components/chartDesigner/header.less

@@ -20,16 +20,15 @@
             text-align: center;
             font-size: 16px;
             border: none;
-            border-bottom-right-radius: @border-radius-base;
-            border-top-right-radius: @border-radius-base;
             background-color: transparent;
             input {
                 text-align: center;
                 font-size: 16px;
                 border: none;
-                border-bottom-right-radius: @border-radius-base;
-                border-top-right-radius: @border-radius-base;
                 background-color: transparent;
+                &:focus {
+                    border: 1px solid #40A9FF;
+                }
             }
         }
         .ant-input-group-addon {

src/components/chartDesigner/layout.jsx

@@ -37,9 +37,6 @@ function mapStateToProps(state) {
         'chartDesigner/fetchIndicatorData'
     ];
     let loading = false;
-    effectsArr.map(e => {
-        return state.present.loading.effects['chart/remoteDetail'];
-    });
     for(let i = 0; i < effectsArr.length; i++) {
         if(state.present.loading.effects[effectsArr[i]]) {
             loading = true;

src/components/dashboardDesigner/chooseChartBox.jsx

@@ -17,14 +17,16 @@ class ChooseChartBox extends React.Component {
             filterItem: { name: 'name', label: '图表名称', type: 'string' },
             selectedRecord: -1,
             selectedRecords: [],
-            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
-            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
+            tableBodyWidth: 0,
+            tableBodyHeight: 0
         };
     }
 
     componentDidMount() {
         const { dispatch } = this.props;
-        dispatch({ type: 'chart/fetchList' });
+        dispatch({ type: 'chart/fetchList' }).then(() => {
+            this.onWindowResize();
+        });
         window.addEventListener('resize', this.onWindowResize);
     }
 
@@ -33,9 +35,15 @@ class ChooseChartBox extends React.Component {
     }
 
     onWindowResize = () => {
+        const boxEl = document.getElementsByClassName('choosechart-box')[0];
+        if(!boxEl) {
+            return;
+        }
+        const bodyEl = boxEl.getElementsByClassName('ant-modal-body')[0];
+        const bodyBox = bodyEl.getBoundingClientRect();
         this.setState({
-            screenWidth: document.documentElement.clientWidth || document.body.clientWidth,
-            screenHeight: document.documentElement.clientHeight || document.body.clientHeight
+            tableBodyWidth: bodyBox.width - 36 * 2,
+            tableBodyHeight: bodyBox.height - 56 - 42 - 54
         });
     }
 
@@ -110,10 +118,8 @@ class ChooseChartBox extends React.Component {
     }
 
     render() {
-        const { visibleBox, hideBox, dashboardDesigner, chart } = this.props;
-        const { selectedRecords, screenWidth, screenHeight, filterItem, filterLabel: stateFilterLabel } = this.state;
-        const tableBodyWidth = screenWidth * 0.8 - 10 - 10 - 18;
-        const tableBodyHeight = screenHeight * 0.8 - 65 - 53 - 38 - 130;
+        const { visibleBox, hideBox, dashboardDesigner, chart, loading } = this.props;
+        const { selectedRecords, tableBodyWidth, tableBodyHeight, filterItem, filterLabel: stateFilterLabel } = this.state;
         const tableRowHeight = 38;
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = stateFilterLabel ? (stateFilterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
@@ -257,12 +263,13 @@ class ChooseChartBox extends React.Component {
                         </Col>
                     </Row>
                     <Table
+                        loading={loading}
                         className='choosechart-table'
                         columns={columns}
                         dataSource={this.onSort(this.onSearch(chart.list)).map((d, i) => ({ ...d, key: i }))}
                         size='small'
                         scroll={{ x: columns ? columns.length * 100 : tableBodyWidth, y: tableBodyHeight }}
-                        pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}
+                        pagination={{ pageSize: Math.ceil(tableBodyHeight/tableRowHeight) }}
                         onRow={(record) => {
                             return {
                                 onClick: () => {
@@ -277,15 +284,9 @@ class ChooseChartBox extends React.Component {
     } 
 }
 
-
-
-    
-
-
-
-
-function mapStateToProps({ present: { dashboardDesigner, chart } }) {
-    return { dashboardDesigner, chart };
+function mapStateToProps({ present: { dashboardDesigner, chart, loading: stateLoading } }) {
+    let loading = stateLoading.effects['chart/fetchList'];
+    return { dashboardDesigner, chart, loading };
 }
 
 export default connect(mapStateToProps)(ChooseChartBox)

src/components/dashboardDesigner/chooseChartBox.less

@@ -1,4 +1,5 @@
 .choosechart-box {
+    top: 50px;
     .ant-modal-body {
         padding: 0 36px;
         max-height: 60vh;

src/components/dashboardDesigner/header.less

@@ -14,9 +14,10 @@
                     color: rgba(0, 0, 0, 0.65);
                     cursor: text;
                     border: none;
-                    border-bottom-right-radius: 4px;
-                    border-top-right-radius: 4px;
                     background-color: transparent;
+                    &:focus {
+                        border: 1px solid #40A9FF;
+                    }
                 }
             }
         }

src/components/dataConnect/list.less

@@ -53,6 +53,7 @@
                             min-height: 32px;
                             background: #F5F5F5;
                             padding: 0;
+                            border: none;
                             .ant-card-head-wrapper {
                                 height: 100%;
                                 .ant-card-head-title {

src/components/dataSourceDetail/dataConnectBox.jsx

@@ -320,7 +320,7 @@ class DataConnectBox extends React.Component {
                         <Col span={4}>
                             <FormItem>
                                 <Button
-                                    style={{ width: '78px', marginLeft: '10px' }}
+                                    style={{ width: '90px', float: 'right', 'margin-top': '4px' }}
                                     disabled={dataConnect.newOne.validating || dataConnect.newOne.saving}
                                     onClick={() => {
                                         this.validAll();

src/components/dataSourceDetail/dataConnectBox.less

@@ -1,5 +1,5 @@
 .dataconnect-box {
-    width: 600px !important;
+    width: 680px !important;
     .ant-modal-body {
         max-height: 60vh;
         overflow-y: auto;

src/themes/default/base.less

@@ -11,6 +11,18 @@
     color: rgba(0, 0, 0, 0.5);
 }
 
+
+// input
+.ant-input:focus {
+    box-shadow: none;
+}
+.ant-select-open .ant-select-selection {
+    box-shadow: none;
+}
+.ant-select-focused .ant-select-selection, .ant0select0selection:focus, .ant0select-selection:active {
+    box-shadow: none;
+}
+
 // Tools Button
 .ant-btn.tool-link {
     background: #F5FBFE;
@@ -32,12 +44,20 @@
 }
 
 // Table
+.ant-table {
+    border: none;
+    .ant-table-body {
+        border-width: 0 1px 1px 1px;
+        border-style: solid;
+        border-color: #EDEDED;
+    }
+}
 .ant-table-body {
     margin-top: 10px;
     overflow: auto !important;
 }
 .ant-table-small {
-    border: 1px solid #EDEDED;
+    // border: 1px solid #EDEDED;
     border-radius: 0;
 }
 .ant-table-small > .ant-table-content > .ant-table-body {
@@ -137,7 +157,7 @@
     &:before, &:after {
         content: "";
         position: relative;
-        width: 33%;
+        width: 50%;
         border-top: 1px solid #e8e8e8;
         display: table-cell;
         transform: translateY(50%);
@@ -145,6 +165,8 @@
     .ant-modal-title {
         color: #2C82BE;
         text-align: center;
+        white-space: nowrap;
+        margin: 0 36px;
     }
 }
 .ant-modal-body {
@@ -172,8 +194,27 @@
 
 // toast message
 .ant-message {
-    .ant-message-notice-content {
-        border: 1px solid @border-color-base;
+    .ant-message-notice {
+        .ant-message-notice-content {
+            border: 1px solid @border-color-base;
+            background: #F1FAEE;
+            box-shadow: none;
+            .ant-message-success {
+                .anticon, span {
+                    color: #3CC600;
+                }
+            }
+            .ant-message-warning{
+                .anticon, span {
+                    color: #faad14;
+                }
+            }
+            .ant-message-error{
+                .anticon, span {
+                    color: #FF5E4E;
+                }
+            }
+        }
     }
 }