zhuth 6 vuotta sitten
vanhempi
commit
8f070baff4

+ 8 - 7
src/components/chart/list.jsx

@@ -119,7 +119,7 @@ class ChartList extends React.Component {
                     visible = false;
                 }
             }
-            return { ...l, visible }
+            return { ...l, visible, animated: true }
         })
 
         return list;
@@ -213,10 +213,10 @@ class ChartList extends React.Component {
                     <Icon type='share-alt'/>分发
                 </Menu.Item>} */}
                 { selectedRecord && (currentUser.code === selectedRecord.creatorCode || currentUser.role === 'superAdmin') && <Menu.SubMenu className='setgroupmenu' title={<div><Icon style={{ marginRight: '6px' }} type='profile' />移动到</div>}>
-                    {[<Menu.Item key='-1' onClick={() => {
+                    {[<Menu.Item key='-1' className={selectedRecord.groupCode === '-1' ? 'current' : ''} onClick={() => {
                         dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: { code: '-1'} });
                     }}>
-                        {selectedRecord.groupCode === '-1' ? <span className='current' style={{ fontWeight: 'bold' }}>未分组</span> : '未分组'}
+                        未分组
                     </Menu.Item>].concat(this.createGroupMenu(treeData))}
                 </Menu.SubMenu>}
                 <Menu.Divider />
@@ -247,7 +247,7 @@ class ChartList extends React.Component {
         let filterLabel = chart.filterLabel ? (chart.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
         
         let cards = list.map( (l, i) => (
-            <CardGrid className={`chart-card${l.visible ? ' visible' : ' hidden'}`} key={i} onClick={() => {
+            <CardGrid className={`chart-card ${l.animated ? (l.visible ? `animated popIn` : `animated flipOutY`) : (l.visible ? `visible ` : `hidden`)}`} key={i} onClick={() => {
                 this.setState({ selectedRecord: l })
             }}>
                 <Card
@@ -321,7 +321,8 @@ class ChartList extends React.Component {
             if(t.children && t.children.length > 0) {
                 return <Menu.SubMenu
                     key={t.code}
-                    title={selectedRecord.groupCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.label}</span> : t.label}
+                    className={selectedRecord.groupCode === t.code ? 'current' : ''}
+                    title={t.label}
                     onTitleClick={() => {
                         dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: t });
                     }}
@@ -329,9 +330,9 @@ class ChartList extends React.Component {
                     {this.createGroupMenu(t.children)}
                 </Menu.SubMenu>
             }else {
-                return <Menu.Item key={t.code} onClick={() => {
+                return <Menu.Item className={selectedRecord.groupCode === t.code ? 'current' : ''} key={t.code} onClick={() => {
                     dispatch({ type: 'chart/remoteSetGroup', chart: selectedRecord, group: t });
-                }}>{selectedRecord.groupCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.label}</span> : t.label}</Menu.Item>
+                }}>{t.label}</Menu.Item>
             }
         })
     }

+ 5 - 0
src/components/chart/list.less

@@ -258,4 +258,9 @@
 .ant-tooltip-inner {
     background-color: rgba(255, 255, 255, .9);
     color: #666
+}
+.setgroupmenu {
+    .ant-dropdown-menu-item.current {
+        background-color: fade(@item-active-bg-color, 25%);
+    }
 }

+ 10 - 7
src/components/dashboardDesigner/chooseChartBox.less

@@ -4,13 +4,16 @@
         max-height: 60vh;
         overflow-y: auto;
         .choosechart-table {
-            .ant-table-header {
-                overflow-y: hidden;
-                margin-right: 6px;
-            }
-            .ant-table-body {
-                overflow-x: hidden !important;
-                margin-top: 0;
+            .ant-table {
+                padding-bottom: 54px;
+                .ant-table-header {
+                    overflow-y: hidden;
+                    margin-right: 6px;
+                }
+                .ant-table-body {
+                    overflow-x: hidden !important;
+                    margin-top: 0;
+                }
             }
         }
     }

+ 6 - 42
src/components/dataSource/list.jsx

@@ -190,22 +190,19 @@ class DataSource extends React.Component {
             if(t.children && t.children.length > 0) {
                 return <Menu.SubMenu
                     key={t.code}
-                    title={selectedRecord.groupCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.label}</span> : t.label}
+                    className={selectedRecord.groupCode === t.code ? 'current' : ''}
+                    title={t.label}
                     onTitleClick={() => {
                         dispatch({ type: 'dataSource/remoteSetGroup', dataSource: selectedRecord, group: t });
-                        // dispatch({ type: 'dataSource/setCurrentGroup', group: t });
-                        // this.setState({noGroup: false})
                     }}
                 >
                     {this.createGroupMenu(t.children)}
                 </Menu.SubMenu>
             }else {
-                return <Menu.Item key={t.code} onClick={() => {
+                return <Menu.Item className={selectedRecord.groupCode === t.code ? 'current' : ''} key={t.code} onClick={() => {
                     dispatch({ type: 'dataSource/remoteSetGroup', dataSource: selectedRecord, group: t });
-                    // dispatch({ type: 'dataSource/setCurrentGroup', group: t });
-                    // this.setState({noGroup: false})
                 }}>
-                    {selectedRecord.groupCode === t.code ? <span className='current' style={{ fontWeight: 'bold' }}>{t.label}</span> : t.label}
+                    {t.label}
                 </Menu.Item>
             }
         })
@@ -257,45 +254,12 @@ class DataSource extends React.Component {
                         visibleDataPreviewBox: true
                     });
                 }}><Icon type="search" />预览数据</Menu.Item>
-                {/* <Menu.Item onClick={() => {
-                    dispatch({ type: 'dataSource/remoteDataList', code: selectedRecord.code, page: 1, pageSize: 999999999 }).then(res => {
-                        if(res) {
-                            let tcolumns = []; // 时间类型列
-                            tableToExcel({
-                                fileName: selectedRecord.name,
-                                sheets: [{
-                                    columns: res.columns.map(c => {
-                                        if(c.type === 'time') {
-                                            tcolumns.push(c.name);
-                                        }
-                                        return {
-                                            name: c.label,
-                                            dataIndex: c.name,
-                                            width: 80,
-                                            type: ExcelType[c.type]
-                                        }
-                                    }),
-                                    data: tcolumns.length > 0 ? res.dataSource.map(d => {
-                                        let obj = { ...d };
-                                        tcolumns.forEach(c => {
-                                            obj[c] = new Date(obj[c]).getTime();
-                                        });
-                                        return obj;
-                                    }) : res.dataSource
-                                }]
-                            });
-                        }
-                    });
-                }}><Icon type="export" />导出</Menu.Item> */}
                 <Menu.Divider />
                 { selectedRecord && (currentUser.code === selectedRecord.creatorCode || currentUser.role === 'superAdmin') && <Menu.SubMenu className='setgroupmenu' title={<div><Icon style={{ marginRight: '6px' }} type='profile' />移动到</div>}>
-                    {[<Menu.Item key='-1' onClick={() => {
+                    {[<Menu.Item className={selectedRecord.groupCode === '-1' ? 'current' : ''} key='-1' onClick={() => {
                         dispatch({ type: 'dataSource/remoteSetGroup', dataSource: selectedRecord, group: { code: '-1'} });
-                        // this.setState({
-                        //     noGroup: true
-                        // });
                     }}>
-                         {selectedRecord.groupCode === '-1' ? <span className='current' style={{ fontWeight: 'bold' }}>未分组</span> : '未分组'}
+                         未分组
                     </Menu.Item>].concat(this.createGroupMenu(treeData))}
                 </Menu.SubMenu>}
                 <Menu.Divider />

+ 3 - 3
src/components/homePage/toolbar.jsx

@@ -26,7 +26,7 @@ class Toolbar extends React.Component {
     collect = () => {
         const { dispatch, home } = this.props;
         const { selectedTab } = home;
-        dispatch({ type: 'home/collect', data: selectedTab });
+        dispatch({ type: 'home/collect', data: { animated: true, ...selectedTab } });
     }
     // 取消收藏
     uncollect = () => {
@@ -67,8 +67,8 @@ class Toolbar extends React.Component {
                 <div className='tool'><span onClick={this.refresh}><Icon title="刷新" type="sync" /></span></div>
                 <div className='tool'>{
                     collectionDashboards.findIndex(c => c.code === selectedTab.code) > -1 ? 
-                        <span onClick={this.uncollect}><Icon title="取消收藏" type="star" theme="filled" /></span> :
-                        <span onClick={this.collect}><Icon title="收藏" type="star" /></span>
+                        <span onClick={this.uncollect}><Icon className='collection' title="取消收藏" type="star" theme="filled" /></span> :
+                        <span onClick={this.collect}><Icon className='collection' title="收藏" type="star" /></span>
                 }</div>
                 <div className='tool'>{
                     (!!fixedDashboard && fixedDashboard.code === selectedTab.code) ? 

+ 6 - 0
src/components/homePage/toolbar.less

@@ -18,6 +18,12 @@
                 &:hover {
                     color: @icon-color-hover;
                 }
+                &.collection {
+                    color: rgb(242, 185, 29);
+                    &:hover {
+                        color: fade(rgb(242, 185, 29), 50%);
+                    }
+                }
             }
         }
     }

+ 22 - 22
src/models/chartDesigner.js

@@ -290,7 +290,7 @@ export default {
                 yield put({ type: 'silentSetField', name: 'columns', value: [] });
             }
         },
-        // 因为数据源列字段可能发生重命名,需要替换到最新的别名
+        // 因为数据源列字段可能发生重命名,需要替换到最新的
         *updateColumns(action, { select, call, put }) {
             const chartDesigner = yield select(state => state.present.chartDesigner);
             const { columns, baseConfig } = chartDesigner;
@@ -301,22 +301,22 @@ export default {
                     const { xAxis, yAxis, groupBy } = barConfig;
                     const newXAxisColumn = columns.find(c => c.name === xAxis.column.value);
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
-                    const newGroupByColumn = columns.find(c => c.name === groupBy.key);
+                    const newGroupByColumn = groupBy ? columns.find(c => c.name === groupBy.key) : null;
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label } } : void(0);
-                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label } :void(0);
+                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
+                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
+                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label, type: newGroupByColumn.type } :void(0);
                     yield put({ type: 'silentSetField', name: 'barConfig', value: deepAssign(barConfig, { ...fields }) });
                 }else if(viewType === 'line') {
                     const { lineConfig } = chartDesigner;
                     const { xAxis, yAxis, groupBy } = lineConfig;
                     const newXAxisColumn = columns.find(c => c.name === xAxis.column.value);
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
-                    const newGroupByColumn = columns.find(c => c.name === groupBy.key);
+                    const newGroupByColumn = groupBy ? columns.find(c => c.name === groupBy.key) : null;
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label } } : void(0);
-                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label } :void(0);
+                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
+                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
+                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label, type: newGroupByColumn.type } :void(0);
                     yield put({ type: 'silentSetField', name: 'lineConfig', value: deepAssign(lineConfig, { ...fields }) });
                 }else if(viewType === 'pie') {
                     const { pieConfig } = chartDesigner;
@@ -324,19 +324,19 @@ export default {
                     const newXAxisColumn = columns.find(c => c.name === xAxis.column.value);
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label } } : void(0);
+                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
+                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
                     yield put({ type: 'silentSetField', name: 'pieConfig', value: deepAssign(pieConfig, { ...fields }) });
                 }else if(viewType === 'scatter') {
                     const { scatterConfig } = chartDesigner;
                     const { xAxis, yAxis, groupBy } = scatterConfig;
                     const newXAxisColumn = columns.find(c => c.name === xAxis.column.value);
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
-                    const newGroupByColumn = columns.find(c => c.name === groupBy.key);
+                    const newGroupByColumn = groupBy ? columns.find(c => c.name === groupBy.key) : null;
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label } } : void(0);
-                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label } :void(0);
+                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
+                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
+                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label, type: newGroupByColumn.type } :void(0);
                     yield put({ type: 'silentSetField', name: 'scatterConfig', value: deepAssign(scatterConfig, { ...fields }) });
                 }else if(viewType === 'dataView') {
                     const { dataViewConfig } = chartDesigner;
@@ -345,9 +345,9 @@ export default {
                     const newSortColumn = columns.find(c => c.name === sortColumn.key);
                     let arr = viewColumns.map(v => {
                         const newViewColumn = columns.find(c => c.name === v.name);
-                        return newViewColumn ? { label: newViewColumn.label } : {};
+                        return newViewColumn ? { label: newViewColumn.label, type: newViewColumn.type } : {};
                     });
-                    newSortColumn ? fields.sortColumn = { label: newSortColumn.label } : void(0);
+                    newSortColumn ? fields.sortColumn = { label: newSortColumn.label, type: newSortColumn.type } : void(0);
                     fields.viewColumns = arr;
                     yield put({ type: 'silentSetField', name: 'dataViewConfig', value: deepAssign(dataViewConfig, { ...fields }) });
                 }else if(viewType === 'aggregateTable') {
@@ -355,18 +355,18 @@ export default {
                     const { groupBy, targetColumn } = aggregateTableConfig;
                     let fields = {};
                     const newTargetColumn = columns.find(c => c.name === targetColumn.name);
-                    let arr = groupBy.map(g => {
+                    let arr = groupBy ? groupBy.map(g => {
                         const newGroupByColumn = columns.find(c => c.name === g.key);
-                        return newGroupByColumn ? { label: newGroupByColumn.label } : {};
-                    });
-                    newTargetColumn ? fields.targetColumn = { label: newTargetColumn.label } : void(0);
+                        return newGroupByColumn ? { label: newGroupByColumn.label, type: newGroupByColumn.type } : {};
+                    }) : [];
+                    newTargetColumn ? fields.targetColumn = { label: newTargetColumn.label, type: newTargetColumn.type } : void(0);
                     fields.groupBy = arr;
                     yield put({ type: 'silentSetField', name: 'aggregateTableConfig', value: deepAssign(aggregateTableConfig, { ...fields }) });
                 }
                 const { filters } = chartDesigner;
                 let fields = filters.map(f => {
                     const newFilterColumn = columns.find(c => c.name === f.name);
-                    return newFilterColumn ? { label: newFilterColumn.label } : {};
+                    return newFilterColumn ? { label: newFilterColumn.label, type: newFilterColumn.type } : {};
                 });
                 yield put({ type: 'silentSetField', name: 'filters', value: deepAssign(filters, fields) });
             }catch(e) {

+ 3 - 1
src/models/dataSourceDetail.js

@@ -126,7 +126,9 @@ export default {
                         columns.forEach(c => {
                             let tc = oldColumns.find(o => o.name === c.name );
                             if(tc) {
-                                mergeColumns.push(tc);
+                                let o = {};
+                                o.columnType = tc.dataType === c.dataType ? tc.columnType : getColumnType(c.dataType);
+                                mergeColumns.push({ ...c, ...o, alias: tc.alias, using: tc.using, groupable: tc.groupable, filterable: tc.filterable });
                             }else {
                                 mergeColumns.push(c); 
                             }

+ 1 - 1
src/theme.js

@@ -49,5 +49,5 @@ module.exports = {
 
     // Icon
     'icon-color-default': '#2C82BE',
-    'icon-color-hover': '#53A8E2',
+    'icon-color-hover': 'fade(#53A8E2, 50%)',
 };