添加数据视图table滚动条逻辑

src/components/admin/userManagement.less

@@ -151,20 +151,20 @@
     }
 }
 
-.ant-table-body::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-}
-.ant-table-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-}
-.ant-table-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
-    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    border-radius: 0;
-    background: rgba(0,0,0,0.1);
-}
+// .ant-table-body::-webkit-scrollbar {/*滚动条整体样式*/
+//     width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+//     height: 4px;
+// }
+// .ant-table-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+//     border-radius: 5px;
+//     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+//     background: rgba(0,0,0,0.2);
+// }
+// .ant-table-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
+//     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+//     border-radius: 0;
+//     background: rgba(0,0,0,0.1);
+// }
 
 .custom-filter-dropdown {
     padding: 8px;

src/components/chartDesigner/charts/resolveChartOption.js

@@ -191,7 +191,14 @@ function scatterConfig(option) {
 function tableConfig(option) {
     const { columns, data } = option;
     let o = {
-        columns,
+        columns: columns.map(c => {
+            c.width = 100;
+            if(c.dataIndex === 'percent') { // 这里只在总体统计图下生效
+                return { ...c, render: (value, record, index) => {console.log(record);return ((+value*100).toFixed(2)) + '%'} };
+            }else {
+                return c;
+            }
+        }),
         data: data.map((d, i) => {
             return { ...d, key: i}
         })

src/components/chartDesigner/charts/tableView.jsx

@@ -2,13 +2,23 @@ import React from 'react'
 import { Table } from 'antd'
 import { connect } from 'dva'
 import resolveChartOption from '../../chart/resolveChartOption'
+import './tableView.less'
 
-const TableView = ({ chartDesigner, dispatch }) => {
+const TableView = ({ contentSize, chartDesigner, dispatch }) => {
     const option = resolveChartOption(chartDesigner.chartOption);
     const { columns, data } = option;
 
     return (
-        <Table columns={columns} dataSource={data}/>
+        <Table
+            className='table-view'
+            columns={columns}
+            dataSource={data}
+            size='small'
+            scroll={{
+                x: columns ? columns.length * 100 : 0,
+                y: contentSize.height - 38 -38 - 25
+            }}
+        />
     );
 }
 

src/components/chartDesigner/charts/tableView.less

@@ -0,0 +1,8 @@
+.table-view {
+    .ant-table-header {
+        overflow-y: hidden !important;
+    }
+    .ant-table-body {
+        overflow: auto !important;
+    }
+}

src/components/chartDesigner/content.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { findDOMNode } from 'react-dom'
 import { Layout, Tabs, Switch, Button } from 'antd'
 import BaseConfigForm from './sections/baseConfigForm'
 import AggregateTableConfigForm from './sections/aggregateTableConfigForm'
@@ -23,9 +24,35 @@ class ChartDesignerContent extends React.Component {
         super(props);
         this.state = {
             autoRefresh: true,
-            collapsed: false
+            collapsed: false,
+            contentSize: {
+                width: 0,
+                height: 0
+            }
         }
     }
+
+    componentDidMount() {
+        this.refreshContentSize();
+    }
+
+    /**
+     * 设置图表区域大小
+     */
+    refreshContentSize = () => {
+        let contentEl = findDOMNode(this.refs.contentEl);
+        if(!contentEl) { return; }
+        let contentLayout = contentEl.getBoundingClientRect();
+        console.log(contentLayout);
+        // let scroll = contentEl.scrollHeight > contentEl.clientHeight;
+        this.setState({
+            contentSize: {
+                width: contentLayout.width,
+                height: contentLayout.height
+            }
+        });
+    }
+
     onCollapse = () => {
         this.setState({
             collapsed: !this.state.collapsed,
@@ -34,7 +61,7 @@ class ChartDesignerContent extends React.Component {
 
     render() {
         const { chartDesigner, dispatch } = this.props;
-        const { autoRefresh } = this.state;
+        const { autoRefresh, contentSize } = this.state;
         const { baseConfig } = chartDesigner;
         const { viewType } = baseConfig;
         const formItemLayout = {
@@ -46,22 +73,22 @@ class ChartDesignerContent extends React.Component {
 
         if(viewType === 'aggregateTable') {
             configForm = (<AggregateTableConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<TableView />);
+            chartView = (<TableView contentSize={contentSize}/>);
         }else if(viewType === 'dataView') {
             configForm = (<DataViewConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<TableView />);
+            chartView = (<TableView contentSize={contentSize}/>);
         }else if(viewType === 'line') {
             configForm = (<LineConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView />);
+            chartView = (<EchartsView contentSize={contentSize}/>);
         }else if(viewType === 'bar') {
             configForm = (<BarConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView />);
+            chartView = (<EchartsView contentSize={contentSize}/>);
         }else if(viewType === 'pie') {
             configForm = (<PieConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView />);
+            chartView = (<EchartsView contentSize={contentSize}/>);
         }else if(viewType === 'scatter') {
             configForm = (<ScatterConfigForm autoRefresh={autoRefresh} formItemLayout={formItemLayout}/>);
-            chartView = (<EchartsView />);
+            chartView = (<EchartsView contentSize={contentSize}/>);
         }
 
         return (
@@ -97,12 +124,12 @@ class ChartDesignerContent extends React.Component {
                         </div>
                         </Footer> }
                 </Sider>
-                <Content style={{ overflow: 'hidden' }}>
+                <Content className='view-content' >
                     <Layout>
                         <Header className='content-header'>
                             <ToolBar className='header-toolbar' autoRefresh={autoRefresh} />
                         </Header>
-                        <Content style={{ overflow: 'auto' }}>
+                        <Content className='content-body' ref='contentEl' >
                             { chartView }
                         </Content>
                     </Layout>

src/components/chartDesigner/content.less

@@ -1,4 +1,5 @@
 .chartdesigner {
+    flex-direction: row;
     .sider-left {
         flex: 0 0 300px !important;
         max-width: 300px !important;
@@ -67,4 +68,10 @@
         padding-left: 0px;
         padding-right: 0px
     }
+    .view-content {
+        overflow: hidden;
+        .content-body {
+            overflow: hidden;
+        }
+    }
 }

src/components/chartDesigner/layout.jsx

@@ -20,10 +20,10 @@ class ChartDesigner extends React.Component {
     render() {
         const { loading } = this.props;
         return <Layout className='chartdesigner-layout'>
-            <Header>
+            <Header className='layout-header'>
                 <ChartDesignerHeader />
             </Header>
-            <Content style={{ height: 0 }}>
+            <Content className='layout-content' style={{ height: 0 }}>
                 <ChartDesignerContent />
             </Content>
             <div style={{ display: loading ? 'block' : 'none', position: 'absolute', height: '100%', width: '100%', zIndex: '4', background: 'rgba(51,51,51,.1)' }}>

src/components/chartDesigner/layout.less

@@ -1,7 +1,7 @@
 .chartdesigner-layout {
     height: 100%;
     overflow: hidden;
-    .ant-layout-header {
+    .layout-header {
         background: none;
         padding: 0 10px;
         height: 40px;
@@ -10,13 +10,19 @@
         border-style: solid;
         border-color: #CCCCCC;
     }
-    .ant-layout-content {
+    .layout-content {
         flex: 1;
         .ant-layout {
             height: 100%;
             .content-header {
                 height: auto;
                 border-top: none;
+                background: none;
+                padding: 0 10px;
+                line-height: 40px;
+                border-width: 1px 0;
+                border-style: solid;
+                border-color: #CCCCCC;
             }
         }
     }

src/components/chartDesigner/sections/dataViewConfigForm.jsx

@@ -85,7 +85,7 @@ class DataViewConfigForm extends React.Component {
 							{
 								type: 'chartDesigner/changeField', 
 								name: 'dataViewConfig', 
-								value: { ...chartDesigner.dataViewConfig, viewColumns: targetColumns, sortColumn: targetColumns.length > 0 ? { key: targetColumns[0].name, label: targetColumns[0].label } : {} },
+								value: { ...chartDesigner.dataViewConfig, viewColumns: targetColumns, sortColumn: targetColumns.length > 0 ? { key: targetColumns[0].name, label: targetColumns[0].label } : { key: '' } },
 								autoRefresh 
 							}
 						);

src/components/datasource/dataSource.less

@@ -176,20 +176,20 @@
     }
 }
 
-.ant-table-body::-webkit-scrollbar {/*滚动条整体样式*/
-    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
-    height: 4px;
-}
-.ant-table-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
-    border-radius: 5px;
-    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    background: rgba(0,0,0,0.2);
-}
-.ant-table-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
-    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
-    border-radius: 0;
-    background: rgba(0,0,0,0.1);
-}
+// .ant-table-body::-webkit-scrollbar {/*滚动条整体样式*/
+//     width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+//     height: 4px;
+// }
+// .ant-table-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+//     border-radius: 5px;
+//     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+//     background: rgba(0,0,0,0.2);
+// }
+// .ant-table-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
+//     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+//     border-radius: 0;
+//     background: rgba(0,0,0,0.1);
+// }
 
 .custom-filter-dropdown {
     padding: 8px;