图表列表组件结构调整/饼图tooktip格式调整

src/components/chart/chartCard.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { connect } from 'dva';
+import { Card, Row, Col, Dropdown, Icon } from 'antd';
+import moment from 'moment';
+import Thumbnail from './thumbnail';
+const CardGrid = Card.Grid;
+const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
+
+class ChartCard extends React.Component {
+    render() {
+        const { key, chart, onCardClick, filterItem, filterLabel, generateOperationMenu, dispatch } = this.props;
+
+        return <CardGrid
+            className={`chart-card ${chart.visible ? `visible` : `hidden`}`}
+            key={key}
+            onClick={() => {
+                onCardClick(chart);
+            }}
+        >
+            <Card
+                bordered={false}
+                title={
+                    <Row type='flex' justify='space-between'>
+                        <Col className='label' style={{ overflow: 'hidden', textOverflow: 'ellipsis', padding: '0 16px' }} >
+                            { (filterItem.name === 'name' && filterLabel) ?
+                                ((chart.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                    return (
+                                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                        fragment
+                                    )
+                                }
+                                )) : chart.name
+                            }
+                        </Col>
+                    </Row>
+                }
+                cover={
+                    <Col className='cover-body'>
+                        <Row className='thumb' onClick={chart.access && chart.database ? () => {
+                            dispatch({ type: 'chartDesigner/reset' });
+                            dispatch({ type: 'main/redirect', path: '/chart/' + chart.code });
+                            dispatch({ type: 'recent/addRecentRecord', tarId: chart.code, recordType: 0});
+                        } : () => {}}>
+                            {!chart.database ? <div className='deny-body'>
+                                <div className='deny-tip'>数据源丢失</div>
+                            </div> : (!chart.access ? <div className='deny-body'>
+                                <div className='deny-tip'>无数据权限</div>
+                            </div> : null)}
+                            <Thumbnail key={chart.code} style={{ opacity: (chart.access && chart.database) ? 1 : 0.3 }} type={chart.type} code={chart.code} thumbnail={chart.thumbnail}/>
+                        </Row>
+                        <Row className='footer' type='flex' justify='end' align='bottom'>
+                            <Col style={{ textAlign: 'left', lineHeight: '28px' }} span={21}>
+                                <Row>{
+                                    (filterItem.name === 'creatorName' && filterLabel) ?
+                                    ((chart.creatorName || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                        return (
+                                            fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                            fragment
+                                        )
+                                    }
+                                    )) : chart.creatorName
+                                } {moment(chart.createTime).format('YYYY-MM-DD')}</Row>
+                            </Col>
+                            <Col span={3} style={{ textAlign: 'right' }}>
+                                <Dropdown overlay={generateOperationMenu()} trigger={['click']}>
+                                    <Icon style={{ fontSize: '24px' }} type="ellipsis" theme="outlined" />
+                                </Dropdown>
+                            </Col>
+                        </Row>
+                    </Col>
+                }
+            >
+            </Card>
+        </CardGrid>
+    }
+}
+
+export default connect()(ChartCard);

src/components/chart/list.jsx

@@ -2,15 +2,14 @@
  * 图表列表
  */
 import React from 'react'
-import { Layout, Button, Icon, Menu, Dropdown, Card, Col, Row, Breadcrumb, Tag, Checkbox } from 'antd'
+import { Layout, Button, Icon, Menu, Card, Col, Row, Breadcrumb, Tag, Checkbox } from 'antd'
 import { connect } from 'dva'
 import ChooseDataSourceBox from './chooseDataSourceBox'
 import GroupManagementBox from '../common/groupManageMentBox/box'
 import EmptyContent from '../common/emptyContent/index'
-import moment from 'moment'
 import 'ant-design-pro/dist/ant-design-pro.css'
 import GroupSelector from '../common/groupSelector/popover'
-import Thumbnail from './thumbnail'
+import ChartCard from './chartCard'
 import DistributeBox from './distributeBox'
 import TransferBox from '../common/selectUserBox/selectUserBox'
 import DeleteBox from '../common/deleteBox/deleteBox'
@@ -20,7 +19,7 @@ import Loading from '../common/loading/index'
 import CusIcon from '../common/cusIcon/index'
 import './list.less'
 const { Content } = Layout
-const CardGrid = Card.Grid
+const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
 
 class ChartList extends React.Component {
     constructor(props) {
@@ -238,78 +237,20 @@ class ChartList extends React.Component {
     }
 
     generateCard(list) {
-        const { chart, dispatch } = this.props;
-        let { filterItem } = chart
+        const { chart } = this.props;
+        let { filterItem } = chart;
 
-        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         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.animated ? (l.visible ? `animated popIn` : `animated flipOutY`) : (l.visible ? `visible` : `hidden`)}`}
-                className={`chart-card ${l.visible ? `visible` : `hidden`}`}
-                key={i}
-                onClick={() => {
-                    this.setState({ selectedRecord: l })
-                }}
-            >
-                <Card
-                    bordered={false}
-                    title={
-                        <Row type='flex' justify='space-between'>
-                            <Col className='label' style={{ overflow: 'hidden', textOverflow: 'ellipsis', padding: '0 16px' }} >
-                                { (filterItem.name === 'name' && filterLabel) ?
-                                    ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                        return (
-                                            fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                            <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                            fragment
-                                        )
-                                    }
-                                    )) : l.name
-                                }
-                            </Col>
-                        </Row>
-                    }
-                    cover={
-                        <Col className='cover-body'>
-                            <Row className='thumb' onClick={l.access && l.database ? () => {
-                                dispatch({ type: 'chartDesigner/reset' });
-                                dispatch({ type: 'main/redirect', path: '/chart/' + l.code });
-                                dispatch({ type: 'recent/addRecentRecord', tarId: l.code, recordType: 0});
-                            } : () => {}}>
-                                {!l.database ? <div className='deny-body'>
-                                    <div className='deny-tip'>数据源丢失</div>
-                                </div> : (!l.access ? <div className='deny-body'>
-                                    <div className='deny-tip'>无数据权限</div>
-                                </div> : null)}
-                                <Thumbnail key={l.code} style={{ opacity: (l.access && l.database) ? 1 : 0.3 }} type={l.type} code={l.code} thumbnail={l.thumbnail}/>
-                            </Row>
-                            <Row className='footer' type='flex' justify='end' align='bottom'>
-                                <Col style={{ textAlign: 'left', lineHeight: '28px' }} span={21}>
-                                    <Row>{
-                                        (filterItem.name === 'creatorName' && filterLabel) ?
-                                        ((l.creatorName || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
-                                            return (
-                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
-                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
-                                                fragment
-                                            )
-                                        }
-                                        )) : l.creatorName
-                                    } {moment(l.createTime).format('YYYY-MM-DD')}</Row>
-                                </Col>
-                                <Col span={3} style={{ textAlign: 'right' }}>
-                                    <Dropdown getPopupContainer={() => document.querySelector('.layout-chart .ant-card-body')} overlay={this.generateOperationMenu()} trigger={['click']}>
-                                        <Icon style={{ fontSize: '24px' }} type="ellipsis" theme="outlined" />
-                                    </Dropdown>
-                                </Col>
-                            </Row>
-                        </Col>
-                    }
-                >
-                </Card>
-            </CardGrid>
+            <ChartCard
+                key={l.code}
+                chart={l}
+                filterItem={filterItem}
+                filterLabel={filterLabel}
+                onCardClick={this.onCardClick}
+                generateOperationMenu={this.generateOperationMenu}
+            />
         ));
         if(cards.length === 0) {
             return <EmptyContent />
@@ -317,6 +258,10 @@ class ChartList extends React.Component {
         return cards;
     }
 
+    onCardClick = (chart) => {
+        this.setState({ selectedRecord: chart })
+    }
+
     createGroupMenu = (treeData) => {
         const { dispatch } = this.props;
         const { selectedRecord } = this.state;
@@ -365,8 +310,6 @@ class ChartList extends React.Component {
         const { listLoading, noGroup } = chart;
         const { visibleChooseDataSourceBox, visibleDistributeBox, visibleGroupManageMentBox, visibleTransferBox, visibleDeleteBox, selectedRecord } = this.state;
         let viewList =  this.onFilter();
-        // let viewList = this.onPage(reduceList);
-        // let viewList = reduceList;
         return (
             <Layout className='layout-chart'>
                 <Loading visible={listLoading} />

src/models/parseChartOption.js

@@ -268,6 +268,7 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
     let { labelHidden } = styleConfig;
     let { xAxis, yAxis } = pieConfig;
     let columnName = xAxis.column.label;
+    let dataList = (data.serieses || [{ value: [] }])[0].value;
     let option = deepAssign({
         originConfig: {
             xAxis,
@@ -275,7 +276,10 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
         },
         tooltip : {
             trigger: 'item',
-            formatter: "{a} <br/>{b} : {c} ({d}%)"
+            formatter: function(params) {
+                let { seriesName, name, value, percent } = params;
+                return `${seriesName}:&nbsp;&nbsp;&nbsp;&nbsp;${name}<br/>${yAxis.column.label}:&nbsp;&nbsp;${value}&nbsp;(${percent}%)`;
+            }
         },
         grid: {
             left: 50,
@@ -306,7 +310,7 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
                 }
             },
             avoidLabelOverlap: labelHidden === undefined ? true : !labelHidden,
-            data: (data.serieses || [{ value: [] }])[0].value.map(v => {
+            data: dataList.map(v => {
                 let obj = { ...v };
                 obj.value = numberFormat(obj.value)
                 if(!v.name) {