报表主题

src/components/chartDesigner/charts/tableView.jsx

@@ -50,14 +50,14 @@ class TableView extends React.Component {
     }
 
     render() {
-        const { viewRef, columns, dataSource, styleConfig, pagination } = this.props;
+        const { viewRef, columns, dataSource, themeConfig, styleConfig, pagination } = this.props;
         const { columnWidth, tableScrollHeight } = this.state;
 
         const { bordered } = (styleConfig || {});
 
         return (<div style={{ height: '100%' }} ref={node => this[viewRef] = node }>
             { !columns || columns.length === 0 ? <EmptyContent /> : <Table
-                className='table-view'
+                className={`table-view ${themeConfig.name}`}
                 columns={columns ? columns.map((c, i) => {
                     let obj = { ...c };
                     if(i !== columns.length - 1) {

src/components/chartDesigner/content.jsx

@@ -82,6 +82,7 @@ class ChartDesignerContent extends React.Component {
                 viewRef={`tableview-${code}`}
                 columns={chartOption.columns}
                 dataSource={chartOption.dataSource}
+                themeConfig={chartOption.themeConfig}
                 styleConfig={styleConfig.dataView}
                 pagination={{
                     pageSize: chartOption.pageSize || 25,

src/components/chartDesigner/sections/style/theme/bluelight.json

@@ -1,5 +1,6 @@
 {
     "base": {
+        "name": "default",
         "color": [
             "#2eb4ff",
             "#51edda",

src/components/chartDesigner/sections/style/theme/dark.json

@@ -1,5 +1,6 @@
 {
     "base": {
+        "name": "theme2",
         "color": [
             "#2eb4ff",
             "#51edda",

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

@@ -0,0 +1,65 @@
+.table-view.theme2 {
+    .ant-table {
+        border: none;
+        .ant-table-header {
+            &:after {
+                background: #3054AF;
+            }
+            > .ant-table-fixed > .ant-table-thead > tr {
+                background: #3054AF;
+                border: none;
+                &:hover {
+                    background: #3054AF;
+                    border: none;
+                }
+                &>th {
+                    color: #E9F0F5;
+                    border: none;
+                }
+            }
+        }
+        .ant-table-tbody {
+            tr:nth-child(even) {
+                background: #253C7E;
+                color: #E9F0F5;
+                td {
+                    border: none;
+                }
+            }
+            tr:nth-child(odd) {
+                background: #182E6F;
+                color: #E9F0F5;
+                td {
+                    border: none;
+                }
+            }
+        }
+    }
+    .ant-pagination {
+        >.ant-pagination-total-text {
+            color: #E6EDFF;
+        }
+        >.ant-pagination-prev,.ant-pagination-next {
+            >a {
+                color: #E6EDFF;
+            }
+            &.ant-pagination-disabled {
+                >a {
+                    color: #5a5a5a;
+                }
+            }
+        }
+        >.ant-pagination-item {
+            >a {
+                color: #E6EDFF
+            }
+            &-active {
+                background: #fff;
+                border-color: transparent;
+                >a {
+                    color: #333333;
+                }
+            }
+        }
+    }
+}

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

@@ -1,5 +1,6 @@
 {
     "base": {
+        "name": "theme1",
         "color": [
             "#516b91",
             "#59c4e6",

src/components/chartDesigner/sections/style/theme/index.js

@@ -1,6 +1,7 @@
 import defaultTheme from './default.json';
 import bluelight from './bluelight.json';
 import dark from './dark.json';
+import './dark.less';
 
 export default [{
     name: 'default',

src/components/dashboardDesigner/chartView.jsx

@@ -49,6 +49,7 @@ class ChartView extends React.Component {
                         viewRef={`${chartRef}-tableview`}
                         columns={chartOption.columns}
                         dataSource={chartOption.dataSource}
+                        themeConfig={chartOption.themeConfig}
                         styleConfig={(styleConfig || {}).dataView}
                         pagination={{
                             pageSize: chartOption.pageSize,

src/models/parseChartOption.js

@@ -512,6 +512,7 @@ function dataViewOption(data, dataViewConfig, themeConfig, styleConfig) {
         originConfig: {
             viewColumns
         },
+        themeConfig,
         columns: columns.map(c => {
             let obj = {
                 title: c.label,

src/themes/default/base.less

@@ -64,7 +64,7 @@
     background: #D6EEFE;
 }
 .ant-table-fixed-header .ant-table-scroll .ant-table-header {
-    overflow: hidden;
+    overflow: hidden !important;
     margin-bottom: 0 !important;
     margin-right: 10px;
     background: #D6EEFD;
@@ -190,11 +190,11 @@
 }
 
 *::-webkit-scrollbar-thumb {
-    background: #C2EAFC;
+    background: #a0dbf5;
     border-radius: 4px;
   
     &:hover {
-      background: #74c3e6;
+      background: #67c6f1;
     }
 }