Browse Source

部分图表样式优化

zhuth 6 years ago
parent
commit
7824c808aa

+ 4 - 3
src/components/chart/list.jsx

@@ -469,9 +469,10 @@ class ChartList extends React.Component {
                         })
                     }}
                     okHandler={(aGroups, mGroups, dGroups) => {
-                        dispatch({ type: 'chart/remoteSetGroups', aGroups, mGroups, dGroups });
-                        dispatch({ type: 'chart/fetchList', mandatory: true });
-                        dispatch({ type: 'chart/setCurrentGroup', group: null });
+                        return dispatch({ type: 'chart/remoteSetGroups', aGroups, mGroups, dGroups }).then(() => {
+                            dispatch({ type: 'chart/fetchList', mandatory: true });
+                            dispatch({ type: 'chart/setCurrentGroup', group: null });
+                        });
                     }}
                 />}
                 {visibleDistributeBox && <DistributeBox visibleDistributeBox={visibleDistributeBox} selectedRecord={this.state.selectedRecord} hideBox={() => {

+ 2 - 2
src/components/common/cusIcon/index.jsx

@@ -2,6 +2,6 @@ import { Icon } from 'antd'
 import scriptUrl from '../../../../static/iconfont/iconfont.js'
  
 export default Icon.createFromIconfontCN({
-    // scriptUrl: '//at.alicdn.com/t/font_755957_d9ot28eybfd.js'
-    scriptUrl
+    scriptUrl: '//at.alicdn.com/t/font_755957_y4aj6wyohhm.js'
+    // scriptUrl
 });

+ 17 - 8
src/components/common/groupManageMentBox/box.jsx

@@ -22,6 +22,7 @@ class GroupBox extends React.Component {
             willDeleteGroup: null,
             visibleDeleteGroupBox: false,
             validInfo: {},
+            saving: false,
         }
     }
 
@@ -290,7 +291,8 @@ class GroupBox extends React.Component {
             this.setState({
                 groupData,
                 mGroups: mGroups,
-                dGroups: dGroups.concat([{ ...group, operate: 'delete' }])
+                dGroups: dGroups.concat([{ ...group, operate: 'delete' }]),
+                selectedGroup: null
             });
         }
     }
@@ -320,7 +322,7 @@ class GroupBox extends React.Component {
 
     render() {
         let { visibleBox, hideBox, okHandler } = this.props;
-        let { groupData, expandedKeys, selectedGroup, autoExpandParent, aGroups, mGroups, dGroups, visibleDeleteGroupBox, willDeleteGroup } = this.state;
+        let { groupData, expandedKeys, selectedGroup, autoExpandParent, aGroups, mGroups, dGroups, visibleDeleteGroupBox, willDeleteGroup, saving } = this.state;
         let treeData = arrayToTree(groupData, '-1', 'code', 'pcode', 'children');
         return <Modal
             className='groupmanagement-box'
@@ -329,18 +331,25 @@ class GroupBox extends React.Component {
             footer={
                 <div>
                     <Button onClick={hideBox}>取 消</Button>
-                    <Button disabled={!this.checkValid()} type='primary' onClick={() => {
+                    <Button disabled={!this.checkValid() || saving} type='primary' onClick={() => {
                         if(aGroups.length === 0 && mGroups.length === 0 && dGroups.length === 0) {
                             hideBox()
                         }else {
-                            okHandler(aGroups, mGroups, dGroups);
+                            this.setState({
+                                saving: true
+                            });
+                            okHandler(aGroups, mGroups, dGroups).then(() => {
+                                this.setState({
+                                    saving: false,
+                                    aGroups: [],
+                                    mGroups: [],
+                                    dGroups: [],
+                                });
+                            });
                         }
                     }}>确 定</Button>
                 </div>
             }
-            onOk={() => {
-                okHandler(aGroups, mGroups, dGroups);
-            }}
             onCancel={hideBox}
             maskClosable={false}
             destroyOnClose={true}
@@ -350,7 +359,7 @@ class GroupBox extends React.Component {
                     <Search placeholder='搜索' onChange={this.onSearch}></Search>
                 </Col>
                 <Col span={6}>
-                    <Button disabled={selectedGroup && selectedGroup.code && selectedGroup.code.startsWith('new-')} style={{ marginLeft: '8px' }} onClick={() => {
+                    <Button disabled={selectedGroup && selectedGroup.code && (selectedGroup.code.startsWith('new-') || (groupData.findIndex(g => g.code === selectedGroup.code) === -1))} style={{ marginLeft: '8px' }} onClick={() => {
                         this.addGroup(selectedGroup);
                     }}>添加</Button>
                 </Col>

+ 0 - 30
src/components/common/loading/loading.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import { Spin } from 'antd'
-import { connect } from 'dva'
-import './loading.less'
-
-const Loading = ({ loading, loadModels }) => {
-    loadModels.unshift('loading...');
-    return (
-        <div className='loading-box' style={{ display: loading ? 'block' : 'none' }} >
-            <Spin size="large" tip={loadModels.map((m, i) => {
-                return <span key={i}>{m}</span>
-            })}/>
-        </div>
-    );
-}
-
-function mapStateToProps(state) {
-    const models = state.present.loading.models;
-    let loading = false;
-    let loadModels = [];
-    for(let model in models) {
-        if(models[model]) {
-            loading = true;
-            loadModels.push(model);
-        }
-    }
-    return { loading, loadModels };
-}
-
-export default connect(mapStateToProps)(Loading)

+ 0 - 16
src/components/common/loading/loading.less

@@ -1,16 +0,0 @@
-.loading-box {
-    position: absolute;
-    margin: 0 auto;
-    top: 60px;
-    right: 20px;
-    z-index: 4;
-    .ant-spin {
-        .ant-spin-text {
-            display: flex;
-            flex-direction: column;
-            span {
-                text-align: left;
-            }
-        }
-    }
-}

+ 3 - 1
src/components/common/navigator.jsx

@@ -43,10 +43,12 @@ class Navigator extends React.Component {
 
         return <div className='navigator'>
             <div className='navigator-left'>
-                {/* <img src='../../../static/images/uas.png' alt='LOGO'/> */}
                 <div className='logo' style={{ cursor: 'pointer' }} onClick={() => {
                     dispatch({ type: 'main/redirect', path: '/home' });
                 }}></div>
+                <span className='logo-text' style={{ cursor: 'pointer' }} onClick={() => {
+                    dispatch({ type: 'main/redirect', path: '/home' });
+                }}>BI商业智能</span>
             </div>
             <div className='navigator-content'>
                 {(currentUser.role === 'admin' || currentUser.role === 'superAdmin') && <Menu

+ 5 - 0
src/components/common/navigator.less

@@ -4,6 +4,7 @@
     height: 100%;
     padding: 0 24px;
     .navigator-left {
+        display: flex;
         .logo {
             height: 100%;
             width: 84px;
@@ -11,6 +12,10 @@
             background-repeat: no-repeat;
             background-position: center;
         }
+        .logo-text {
+            font-size: 18px;
+            font-weight: bold;
+        }
     }
     .navigator-menu {
         border-bottom: none;

+ 3 - 1
src/components/dashboard/list.jsx

@@ -8,7 +8,8 @@ import DeleteBox from '../common/deleteBox/deleteBox'
 import ShareBox from './shareBox'
 import CopyBox from './copyBox'
 import ListFilter from '../common/listFilter/index'
-import EllipsisTooltip from '../common/ellipsisTooltip/index'
+// import EllipsisTooltip from '../common/ellipsisTooltip/index'
+import CusIcon from '../common/cusIcon/index'
 import './list.less'
 const { Content } = Layout
 const { Option } = Select
@@ -256,6 +257,7 @@ class DashboardList extends React.Component {
                         dispatch({ type: 'main/redirect', path: '/dashboard/' + record.code });
                         dispatch({ type: 'recent/addRecentRecord', tarId: record.code, recordType: 1});
                     }}>
+                        <CusIcon type='bi-dashboard-list-item' style={{ marginRight: '8px' }}/>
                         { filterLabel && filterItem.name === 'name' ?
                             ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                 return (

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

@@ -290,14 +290,12 @@ class DataSource extends React.Component {
             width: 100,
             render: (text, record) => {
                 return <div className='datasource-name'>
-                    <div className={`datasource-type`}>
-                        {record.type === 'database' ? <Icon type="database" theme="outlined" /> : <Icon type="file-excel" theme="outlined" />}
-                    </div>
                     <div>
                         <span style={{ color: '#1890ff', cursor: 'pointer' }} onClick={() => {
                             dispatch({ type: 'dataSource/resetNewModel' });
                             dispatch({type: 'main/redirect', path: {pathname: '/workshop/datasource/'+ record.type +'/' + record.code + '/base'}});
                         }}>
+                            {record.type === 'database' ? <Icon type="database" theme="outlined" style={{ marginRight: '8px' }}/> : <Icon type="file-excel" theme="outlined" style={{ marginRight: '8px' }}/>}
                             { (filterItem.name === 'name' && filterLabel) ?
                                 ((text || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
                                     return (
@@ -455,9 +453,10 @@ class DataSource extends React.Component {
                                 })
                             }}
                             okHandler={(aGroups, mGroups, dGroups) => {
-                                dispatch({ type: 'dataSource/remoteSetGroups', aGroups, mGroups, dGroups });
-                                dispatch({ type: 'dataSource/fetchList', mandatory: true });
-                                dispatch({ type: 'dataSource/setCurrentGroup', group: null });
+                                return dispatch({ type: 'dataSource/remoteSetGroups', aGroups, mGroups, dGroups }).then(() => {
+                                    dispatch({ type: 'dataSource/fetchList', mandatory: true });
+                                    dispatch({ type: 'dataSource/setCurrentGroup', group: null });
+                                });
                             }}
                         />}
                         {visibleTransferBox && <TransferBox

+ 4 - 3
src/components/setting/index.jsx

@@ -6,6 +6,7 @@ import { connect } from 'dva'
 import Admin from '../admin/admin'
 import Authority from '../authority/index'
 import Logs from '../logs/logs'
+import CusIcon from '../common/cusIcon/index'
 import './index.less'
 const { Sider, Content } = Layout
 
@@ -32,9 +33,9 @@ class Setting extends React.Component {
                 theme='light'
                 className='sider-setting'
             >
-                <Link to='/setting/admin'><div className={`link-btn${(paths[1] === 'admin' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={(paths[1] === 'admin' || !paths[1]) ? 'primary' : 'default'} >用户管理</Button></div></Link>
-                <Link to='/setting/authority'><div className={`link-btn${(paths[1] === 'authority' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'authority' ? 'primary' : 'default'} >权限管理</Button></div></Link>
-                <Link to='/setting/logs'><div className={`link-btn${(paths[1] === 'logs' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'logs' ? 'primary' : 'default'} >操作日志</Button></div></Link>
+                <Link to='/setting/admin'><div className={`link-btn${(paths[1] === 'admin' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={(paths[1] === 'admin' || !paths[1]) ? 'primary' : 'default'} ><CusIcon type='bi-nav-admin'/>用户管理</Button></div></Link>
+                <Link to='/setting/authority'><div className={`link-btn${(paths[1] === 'authority' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'authority' ? 'primary' : 'default'} ><CusIcon type='bi-nav-authority'/>权限管理</Button></div></Link>
+                <Link to='/setting/logs'><div className={`link-btn${(paths[1] === 'logs' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'logs' ? 'primary' : 'default'} ><CusIcon type='bi-nav-logs'/>操作日志</Button></div></Link>
             </Sider>
             <Content className='content-setting'>
                 <Switch>

+ 10 - 9
src/components/workshop/index.jsx

@@ -3,11 +3,12 @@ import { Link } from 'react-router-dom'
 import { Route, Switch, Redirect } from 'dva/router'
 import { Layout, Button } from 'antd'
 import { connect } from 'dva'
-import DataConnect from '../../components/dataConnect/list'
-import DataSource from '../../components/dataSource/list'
-import Dashboard from '../../components/dashboard/layout'
-import Chart from '../../components/chart/list'
-import DataSourceDetail from '../../components/dataSourceDetail/layout'
+import DataConnect from '../dataConnect/list'
+import DataSource from '../dataSource/list'
+import Dashboard from '../dashboard/layout'
+import Chart from '../chart/list'
+import DataSourceDetail from '../dataSourceDetail/layout'
+import CusIcon from '../common/cusIcon/index'
 import './index.less'
 const { Sider, Content } = Layout
 
@@ -34,10 +35,10 @@ class Workshop extends React.Component {
                 theme='light'
                 className='sider-workshop'
             >
-                <Link to='/workshop/dataconnect'><div className={`link-btn${(paths[1] === 'dataconnect' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={(paths[1] === 'dataconnect' || !paths[1]) ? 'primary' : 'default'} >数据链接</Button></div></Link>
-                <Link to='/workshop/datasource'><div className={`link-btn${(paths[1] === 'datasource' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'datasource' ? 'primary' : 'default'} >数据源</Button></div></Link>
-                <Link to='/workshop/chart'><div className={`link-btn${(paths[1] === 'chart' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'chart' ? 'primary' : 'default'} >图表</Button></div></Link>
-                <Link to='/workshop/dashboard'><div className={`link-btn${(paths[1] === 'dashboard' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'dashboard' ? 'primary' : 'default'} >报表</Button></div></Link>
+                <Link to='/workshop/dataconnect'><div className={`link-btn${(paths[1] === 'dataconnect' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={(paths[1] === 'dataconnect' || !paths[1]) ? 'primary' : 'default'} ><CusIcon type='bi-nav-dataconnect'/>数据链接</Button></div></Link>
+                <Link to='/workshop/datasource'><div className={`link-btn${(paths[1] === 'datasource' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'datasource' ? 'primary' : 'default'} ><CusIcon type='bi-nav-datasource'/>数据源</Button></div></Link>
+                <Link to='/workshop/chart'><div className={`link-btn${(paths[1] === 'chart' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'chart' ? 'primary' : 'default'} ><CusIcon type='bi-nav-chart'/>图表</Button></div></Link>
+                <Link to='/workshop/dashboard'><div className={`link-btn${(paths[1] === 'dashboard' || !paths[1]) ? ' selected' : ''}`}><Button className='ant-btn-block' type={paths[1] === 'dashboard' ? 'primary' : 'default'} ><CusIcon type='bi-nav-dashboard'/>报表</Button></div></Link>
             </Sider>
             <Content className='content-workshop'>
                 <Switch>

+ 2 - 0
src/models/chart.js

@@ -484,8 +484,10 @@ export default {
                 if(!res.err && res.data.code > 0) {
                     message.success('修改分组信息成功');
                     yield put({ type: 'remoteGroupList', mandatory: true });
+                    return true;
                 }else {
                     message.error('修改分组信息失败: ' + (res.data.msg));
+                    return false;
                 }
             }catch(e) {
                 message.error('修改分组信息失败: ' + e.message);

+ 3 - 1
src/models/dashboard.js

@@ -755,7 +755,9 @@ export default {
             });
             if(!res.err && res.data.code > 0) {
                 message.success('复制成功');
-                yield put({ type: 'fetchList', mandatory: true });
+                // yield put({ type: 'fetchList', mandatory: true });
+                const dashboard = yield select(state => state.present.dashboard);
+                yield put({ type: 'remoteMenuDashboardList', menuCode: dashboard.currentMenu.code });
                 yield put({ type: 'dataSource/fetchList', mandatory: true });
                 yield put({ type: 'chart/fetchList', mandatory: true });
                 return true;

+ 2 - 0
src/models/dataSource.js

@@ -441,8 +441,10 @@ export default {
                 if(!res.err && res.data.code > 0) {
                     message.success('修改分组信息成功');
                     yield put({ type: 'remoteGroupList', mandatory: true });
+                    return true;
                 }else {
                     message.error('修改分组信息失败: ' + (res.data.msg));
+                    return false;
                 }
             }catch(e) {
                 message.error('修改分组信息失败: ' + e.message);

+ 10 - 23
src/routes/authLayout.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Redirect } from 'dva/router'
-import Loading from '../components/common/loading/loading'
 import Relogin from '../components/common/login/relogin'
 import { connect } from 'dva'
 import './authLayout.less'
@@ -35,33 +34,21 @@ class AuthLayout extends React.Component {
             isLogin ? (
                 <div style={{ width: '100%', height: '100%' }}>
                     { children }
-                    { checking ? (
-                        <div style={{ position: 'absolute', top: 0, height: '100%', width: '100%', zIndex: '4', opacity: 0.5, background: 'rgba(51,51,51,.1)' }}>
-                            <Loading></Loading>
-                        </div>
-                    ) : (
-                        !authenticated && (
-                            <Relogin
-                                visibleBox={true}
-                            ></Relogin>
-                        )
+                    { !checking && !authenticated && (
+                        <Relogin
+                            visibleBox={true}
+                        ></Relogin>
                     ) }
                 </div>
             ) : (
                 <div style={{ width: '100%', height: '100%' }}>
                     { children }
-                    { checking ? (
-                        <div style={{ position: 'absolute', top: 0, height: '100%', width: '100%', zIndex: '4', opacity: 0.5, background: 'rgba(51,51,51,.1)' }}>
-                            <Loading></Loading>
-                        </div>
-                    ) : (
-                        <Redirect
-                            to={{
-                                pathname: '/login',
-                                state: { from: location }
-                            }}
-                        ></Redirect>
-                    ) }
+                    { !checking && <Redirect
+                        to={{
+                            pathname: '/login',
+                            state: { from: location }
+                        }}
+                    ></Redirect>}
                 </div>
             )
         )

+ 0 - 2
src/routes/mainLayout.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { Layout } from 'antd'
 import { Route, Switch, Redirect } from 'dva/router'
 import Navigator from '../components/common/navigator'
-import Loading from '../components/common/loading/loading'
 import HomePage from '../components/homePage/index'
 import Workshop from '../components/workshop/index'
 import Setting from '../components/setting/index'
@@ -13,7 +12,6 @@ const { Header, Content } = Layout
 const MainLayout = () => {
     return(
         <Layout className='main-layout'>
-            <Loading />
             <Header className='main-header'>
                 <Navigator />
             </Header>

+ 2 - 0
src/themes/default/setting.less

@@ -13,6 +13,8 @@
                         font-size: 16px;
                         color: #A4AEBB;
                         border-radius: 0;
+                        text-align: left;
+                        padding-left: 32px;
                         &[disabled] {
                             opacity: 0.5;
                         }

+ 2 - 0
src/themes/default/workshop.less

@@ -13,6 +13,8 @@
                         font-size: 16px;
                         color: #A4AEBB;
                         border-radius: 0;
+                        text-align: left;
+                        padding-left: 32px;
                         &[disabled] {
                             opacity: 0.5;
                         }

+ 4 - 4
src/utils/baseUtils.js

@@ -189,10 +189,10 @@ function ArrayEquals(arr1, arr2) {
 }
 
 function HexToRGB(hex, alpha) {
-    var hex = hex.replace('#', '0x'),
-        r = hex >> 16,
-        g = hex >> 8 & 0xff,
-        b = hex & 0xff;
+    var h = hex.replace('#', '0x'),
+        r = h >> 16,
+        g = h >> 8 & 0xff,
+        b = h & 0xff;
     return 'rgb' + (alpha ? 'a' : '') + '(' + r + ',' + g + ',' + b + (alpha ? (',' + alpha/100) : '') + ')';
 }