报表数据视图放大样式

.eslintrc.js

@@ -1,9 +1,4 @@
 module.exports = {
-    "settings": {
-        "react": {
-            "version": "detect"
-        }
-    },
     "parser": "babel-eslint",
     "extends": 'umi',
     "parserOptions": {

.webpackrc

@@ -3,7 +3,7 @@
         ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
     ],
     "disableCSSModules": true,
-    "hash": false,
+    "hash": true,
     "html": {
         "favicon": "./static/images/favicon.png",
         "template": "./src/index.ejs"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bi-web",
   "private": true,
-  "version": "0.0.3",
+  "version": "0.3.3",
   "scripts": {
     "start": "roadhog server",
     "build": "roadhog build",

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

@@ -1,4 +1,21 @@
-.table-view.theme2 {
+.datapreview.theme2 {
+    .ant-modal-header {
+        background: rgba(41,52,65,1);
+        .ant-modal-title {
+            color: #9fc8e6;
+        }
+    }
+    .ant-modal-body {
+        background: rgba(41,52,65,1);
+    }
+    .ant-modal-close .ant-modal-close-x {
+        color: #9fc8e6;
+        &:hover {
+            color: @icon-color-hover;
+        }
+    }
+}
+.table-view.theme2, .datapreview.theme2 {
     .ant-table {
         border: none;
         .ant-table-header {
@@ -37,6 +54,10 @@
                 }
             }
         }
+        .ant-table-placeholder {
+            background: rgba(41,52,65,1);
+            border: none;
+        }
     }
     .ant-pagination {
         >.ant-pagination-simple-pager {
@@ -158,7 +179,7 @@
                     color: #9fc8e6;
                     &:hover {
                         color: @icon-color-hover;
-                      }
+                    }
                 }
             }
         }

src/components/chartDesigner/sections/toolbar.less

@@ -34,6 +34,7 @@
                 border: none;
                 background: transparent;
                 line-height: 26px;
+                cursor: pointer;
             }
         }
         .tools {

src/components/common/dataPreview/dataPreview.jsx

@@ -43,14 +43,14 @@ class DataPreview extends React.Component {
     }
 
     render() {
-        const { title, fetchFunction, dataList, visibleBox, hideBox, dispatch } = this.props;
+        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;
 
         return <Modal
-            className='datapreview'
+            className={`datapreview ${modalClassName}`}
             style={{ top: `${(1 - boxH) * 0.5 * 100}%` }}
             title={title}
             width={`${100 * boxW}%`}
@@ -64,7 +64,6 @@ class DataPreview extends React.Component {
             maskClosable={false}
         >
             <Table
-                bordered
                 columns={columns.map((c, i) => {
                     let obj = {
                         title: c.label,

src/components/common/dataPreview/dataPreview.less

@@ -11,8 +11,12 @@
         .ant-modal-header {
             display: block;
             padding-top: 0;
-            margin-top: -30px;
+            height: 40px;
+            margin-top: -40px;
             padding-bottom: 6px;
+            .ant-modal-title {
+                line-height: 40px;
+            }
         }
         .ant-modal-body {
             height: 100%;

src/components/common/emptyContent/index.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import './index.less'
 
 const Content = () => {
-    return (<div className="ant-empty ant-empty-normal empty-content"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description" style={{ color: '#A2ACBA' }}>暂无数据</p></div>) 
+    return (<div className="ant-empty ant-empty-normal empty-content"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description">暂无数据</p></div>) 
 }
 
 export default Content

src/components/common/emptyContent/index.less

@@ -5,4 +5,7 @@
     flex-direction: column;
     justify-content: center;
     margin: 0;
+    .ant-empty-description {
+        color: #A2ACBA;
+    }
 }

src/components/dashboardDesigner/layout.less

@@ -103,6 +103,7 @@
                             border: none;
                             background: transparent;
                             line-height: 20px;
+                            cursor: pointer;
                         }
                     }
                     .right {

src/components/dashboardDesigner/viewLayout.jsx

@@ -123,6 +123,7 @@ class ViewLayout extends React.PureComponent {
             </ReactGridLayout>
             {visiblePreviewBox && previewItem.chartType === 'dataView' && <DataPreview
                 title={previewItem.name}
+                modalClassName={themeName}
                 visibleBox={visiblePreviewBox}
                 hideBox={this.hidePreviewBox}
                 fetchFunction={(page, pageSize) => {