图表table样式调整/看板缺省样式调整/图表展示数据解析规则调整

src/components/chartDesigner/charts/tableView.jsx

@@ -3,29 +3,35 @@ import { Table } from 'antd'
 import { connect } from 'dva'
 import './tableView.less'
 
-const TableView = ({ contentSize, chartDesigner, dispatch }) => {
-    const { chartOption, styleConfig } = chartDesigner;
-    const { columns, dataSource } = chartOption;
+class TableView extends React.Component {
 
-    const { table } = styleConfig || {};
-    const { bordered } = table || {};
-    const tableContentHeight = contentSize.height - 38 - 42;
-    const tableRowHeight = 38;
-
-    return (
-        <Table
-            className='table-view'
-            columns={columns}
-            dataSource={dataSource}
-            size='small'
-            bordered={bordered}
-            scroll={{
-                x: columns ? columns.length * 200 : 0,
-                y: tableContentHeight
-            }}
-            pagination={{ defaultPageSize: Math.floor(tableContentHeight/tableRowHeight) || 10 }}
-        />
-    );
+    render() {
+        const { contentSize, chartDesigner } = this.props;
+        const { chartOption, styleConfig } = chartDesigner;
+        const { columns, dataSource } = chartOption;
+    
+        const { table } = styleConfig || {};
+        const { bordered } = table || {};
+        const tableContentHeight = contentSize.height - 38 - 42;
+    
+        return (
+            <Table
+                className='table-view'
+                columns={columns ? columns.map(c => ({ ...c, width: 200 })) : []}
+                dataSource={dataSource || []}
+                size='small'
+                bordered={bordered}
+                scroll={{
+                    x: columns ? columns.length * 200 : 0,
+                    y: tableContentHeight
+                }}
+                pagination={{ pageSize: 25 }}
+                locale={{
+                    emptyText: <div>无数据</div>
+                }}
+            />
+        );
+    }
 }
 
 function mapStateToProps({ present: { chartDesigner } }) {

src/components/chartDesigner/header.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Input, Icon, Button, Popconfirm, Tooltip, Modal } from 'antd'
 import { connect } from 'dva'
-import { ActionCreators } from 'redux-undo'
 import './header.less'
 
 class Header extends React.Component {
@@ -35,7 +34,7 @@ class Header extends React.Component {
     }
 
     render() {
-        const { chartDesigner, dispatch, past, future } = this.props;
+        const { chartDesigner, dispatch } = this.props;
         const { visibleCopyBox, newHeaderLabel } = this.state;
         return (
             <div className='header'>

src/components/chartDesigner/sections/dataViewConfigForm.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Form, Select, InputNumber, Button } from 'antd'
+import { Form, Select, Button } from 'antd'
 import { connect } from 'dva'
 import DisplayColumnBox from './displayColumnBox'
 const FormItem = Form.Item

src/components/dashboardDesigner/chartView.jsx

@@ -44,7 +44,6 @@ class ChartView extends React.Component {
                     />
                 }else if(type === 'table') {
                     const { columns, dataSource } = chartOption;
-                    const tableRowHeight = 38;
                     children = <Table
                         key={hashcode({
                             columns,
@@ -57,7 +56,7 @@ class ChartView extends React.Component {
                             x: columns ? columns.length * 200 : 0,
                             y: tableBodyHeight,
                         }}
-                        pagination={{ defaultPageSize: Math.floor(tableBodyHeight/tableRowHeight) || 10 }}
+                        pagination={{ pageSize: 25 }}
                         columns={columns ? columns.map(c => ({
                             ...c,
                             width: 200

src/components/dashboardDesigner/chooseChartBox.jsx

@@ -25,8 +25,8 @@ class ChooseChartBox extends React.Component {
         window.addEventListener('resize', this.onWindowResize);
     }
 
-    componentWillUmmount() {
-        window.removeEvenetListener('resize', this.onWindowResize);
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onWindowResize);
     }
 
     onWindowResize = () => {

src/components/dashboardDesigner/viewLayout.jsx

@@ -93,7 +93,7 @@ class ViewLayout extends React.PureComponent {
         const { editMode } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
         const children = dashboardDesigner.items.map((item) => this.createElement(item));
-        return (<div>
+        return (<div className='dashboard-viewcontent'>
             <ReactGridLayout
                 width={contentSize.width}
                 autoSize={true}
@@ -109,7 +109,12 @@ class ViewLayout extends React.PureComponent {
                 verticalCompact={true}
                 compactType='vertical'
             >
-                {children}
+                {(children.length === 0) ? <div key='default-chartview' className='default-chartview' data-grid={{ x: 0, y: 0, w: 12, h: 2, minW: 12, maxW: 12, minH: 2, maxH: 2, static: true }}>
+                    <div className='tip'>
+                        <Icon type="plus-circle" theme="outlined" />
+                        <span>未添加图表</span>
+                    </div>
+                </div> : children}
             </ReactGridLayout>
             <Modal
                 className='previewbox'
@@ -121,7 +126,6 @@ class ViewLayout extends React.PureComponent {
                 keyboard={true}
                 maskClosable={true}
                 >
-                {/* {!!previewItem && this.createElement(previewItem, true)} */}
                 {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true)}
             </Modal>
         </div>);

src/components/dashboardDesigner/viewLayout.less

@@ -1,7 +1,23 @@
-
+.dashboard-viewcontent {
+  .default-chartview {
+    background: white;
+    border: 2px dashed #CCCCCC;
+    display: flex;
+    justify-content: center;
+    .tip {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      .anticon {
+        margin-top: 3px;
+        margin-right: 4px;
+      }
+    }
+  }
   .chartview {
     padding-top: 30px;
     z-index: 1;
+    border: 1px solid #CCCCCC;
     .chartview-toolbar {
       height: 30px;
       margin-top: -30px;
@@ -105,9 +121,6 @@
       cursor: move;
     }
     .chartview-content {
-      canvas {
-        // cursor: move;
-      }
       .richtexteditor {
         .w-e-text-container {
           pointer-events: all;
@@ -115,35 +128,6 @@
       }
     }
   }
-  .previewbox {
-    top: 10%;
-    padding-bottom: 0;
-    .ant-modal-content {
-      height: 100%;
-      .ant-modal-close {
-        display: none;
-      }
-      .ant-modal-body {
-        height: 100%;
-        padding-top: 0;
-        .chartview  {
-          height: 100%;
-          padding-top: 40px;
-          .chartview-toolbar {
-            padding: 0;
-            height: 40px;
-            margin-top: -40px;
-            .chart-title {
-              line-height: 2.5;
-            }
-            .chart-tools {
-              line-height: 2;
-            }
-          }
-        }
-      }
-    }
-  }
   .react-grid-layout {
     background: #eee;
   }
@@ -161,16 +145,9 @@
   .react-grid-item {
     box-sizing: border-box;
   }
-  .react-grid-item:not(.react-grid-placeholder) {
-    background: white;
-    border: 1px solid #D6D6D6;
-  }
   .react-grid-item.resizing {
     opacity: 0.9;
   }
-  .react-grid-item.static {
-    background: #cce;
-  }
   .react-grid-item .text {
     font-size: 24px;
     text-align: center;
@@ -285,4 +262,41 @@
     border-right: 2px solid rgba(0, 0, 0, 0.4);
     border-bottom: 2px solid rgba(0, 0, 0, 0.4);
   }
-  
+}
+.previewbox {
+  top: 10%;
+  padding-bottom: 0;
+  .ant-modal-content {
+    height: 100%;
+    .ant-modal-close {
+      display: none;
+    }
+    .ant-modal-body {
+      height: 100%;
+      padding-top: 0;
+      .chartview  {
+        height: 100%;
+        padding-top: 40px;
+        .chartview-toolbar {
+          padding: 0;
+          height: 40px;
+          margin-top: -40px;
+          display: flex;
+          justify-content: space-between;
+          .chart-title {
+            font-size: 20px;
+            line-height: 2.5;
+          }
+          .chart-tools {
+            font-size: 20px;
+            line-height: 2;
+            .anticon {
+              margin-left: 10px;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/models/chart.js

@@ -1,24 +1,7 @@
 import { message } from 'antd'
 import * as service from '../services/index'
 import URLS from '../constants/url'
-
-const getViewType = function(type) {
-    if(type === 'Histogram') {
-        return 'bar';
-    }else if(type === 'Line') {
-        return 'line';
-    }else if(type === 'Pie') {
-        return 'pie';
-    }else if(type === 'scatter') {
-        return 'scatter';
-    }else if(type === 'population') {
-        return 'aggregateTable';
-    }else if(type === 'individual') {
-        return 'dataView';
-    }else {
-        return '';
-    }
-}
+import CHART_TYPE from './chartType.json'
 
 export default {
     namespace: 'chart',
@@ -152,7 +135,7 @@ export default {
                             dataSourceCode: d.dataId + '',
                             dataSourceName: d.dataName,
                             access: d.authority === '1',
-                            type: getViewType(d.chartType),
+                            type: CHART_TYPE[d.chartType],
                             creatorCode: d.createId + '',
                             creatorName: d.createBy,
                             createTime: d.createDate,
@@ -186,7 +169,7 @@ export default {
                     let chartConfig = JSON.parse(resData.chartConfig || '{ "xAxis": { "column": {}, "granularity": {} }, "yAxis": { "column": {}, "gauge": {} } }');
                     let styleConfig = JSON.parse(resData.style || '{}');
                     let otherConfig = JSON.parse(resData.otherConfig || '{}');
-                    let viewType = getViewType(resData.chartType);
+                    let viewType = CHART_TYPE[resData.chartType];
                     let filters = JSON.parse(resData.filters || '[]');
                     let chartOption = JSON.parse(resData.chartOption || '{}');
 
@@ -433,6 +416,7 @@ export default {
                         groupIndex: pgroups.length,
                     }
                 }
+                console.log('新增图表分组', body);
                 const res = yield call(service.fetch, {
                     url: URLS.GROUP_CHART_ADD,
                     body: body
@@ -531,6 +515,7 @@ export default {
 
                 yield put({ type: 'remoteModifyGroups', groups: bgroups });
 
+                console.log('删除图表分组', group.code);
                 const res = yield call(service.fetch, {
                     url: URLS.GROUP_CHART_DELETE,
                     body: [group.code]

src/models/chartDesigner.js

@@ -37,7 +37,7 @@ export default {
             creatorCode: null,
             creatorName: null,
             header: { label: '无标题' },
-            baseConfig: { dataSource: { }, viewType: '' },
+            baseConfig: { dataSource: { code: '' }, viewType: '' },
             aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [] },
             dataViewConfig: { viewColumns: [], sortColumn: {key: ''}, sortType: 'asc' },
             barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''} },
@@ -57,7 +57,7 @@ export default {
         ],
         header: { label: '无标题' },
         baseConfig: {
-            dataSource: {},
+            dataSource: { code: '' },
             viewType: ''
         },
         aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [] },

src/models/chartType.json

@@ -0,0 +1,8 @@
+{
+    "Histogram": "bar",
+    "Line": "line",
+    "Pie": "pie",
+    "scatter": "scatter",
+    "population": "population",
+    "individual": "dataView"
+}

src/models/dashboardDesigner.js

@@ -4,6 +4,7 @@ import * as service from '../services/index'
 import parseChartOption from './parseChartOption'
 import moment from 'moment'
 import URLS from '../constants/url'
+import CHART_TYPE from './chartType.json'
 
 /**
  * 获得看板中图表的真实过滤规则
@@ -365,17 +366,17 @@ export default {
             }
         },
         *fetchChartData(action, { put, call, select }) {
-            const { item, mandatory } = action;
+            const { item } = action;
             const dashboardDesigner = yield select(state => state.present.dashboardDesigner);
             const { filters, relationColumns } = dashboardDesigner;
-            const { chartCode, chartType } = item;
+            const { chartCode } = item;
             const body = {
                 dashCreateId: chartCode,
                 filters: getBodyFilters(getTrueFilters(item, filters, relationColumns))
             };
-            if(!mandatory && !!item.chartOption) {
-                return;
-            }
+            // if(!mandatory && !!item.chartOption) {
+            //     return;
+            // }
 
             try {
                 yield put({ type: 'setItemFetching', code: chartCode, fetching: true });
@@ -387,7 +388,8 @@ export default {
                 console.log('看板请求图表展示数据', body, res);
                 if(!res.err && res.data.code > 0) {
                     let resData = res.data.data;
-                    let chartOption = parseChartOption(chartType, resData, JSON.parse(resData.chartsConfig));
+                    const { chartType } = resData.chartsColumnConfig;
+                    let chartOption = parseChartOption(CHART_TYPE[chartType], resData, JSON.parse(resData.chartsColumnConfig.chartConfig));
                     
                     yield put({ type: 'setItemChartOption', code: chartCode, chartOption });
                 }else {

src/models/dataSource.js

@@ -566,6 +566,7 @@ export default {
                     groupName: group.label,
                     groupIndex: group.index,
                 }
+                console.log('修改数据源分组', body);
                 const res = yield call(service.fetch, {
                     url: URLS.GROUP_DATASOURCE_UPDATE,
                     body: body
@@ -596,6 +597,7 @@ export default {
                         fatherId: g.pcode,
                     }
                 });
+                console.log('批量修改数据源分组', body);
                 const res = yield call(service.fetch, {
                     url: URLS.GROUP_DATASOURCE_LIST_UPDATE,
                     body: body

src/models/parseChartOption.js

@@ -289,7 +289,6 @@ function dataViewOption(data, dataViewConfig) {
     let columns = dataViewConfig.viewColumns || [];
     let dataSource = resData || [];
 
-    console.log(columns);
     let option = {
         columns: columns.map(c => ({
             title: c.label,