123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- import React, { Component } from 'react';
- import numeral from 'numeral';
- import moment from 'moment';
- import {
- Row,
- Col,
- Icon,
- Card,
- Tabs,
- Table,
- Radio,
- DatePicker,
- Tooltip,
- Menu,
- Dropdown,
- } from 'antd';
- import {
- ChartCard,
- yuan,
- MiniArea,
- MiniBar,
- MiniProgress,
- Field,
- Bar,
- Pie,
- TimelineChart,
- } from '../../components/Charts';
- import Trend from '../../components/Trend';
- import NumberInfo from '../../components/NumberInfo';
- import styles from './index.less';
- const { TabPane } = Tabs;
- const { RangePicker } = DatePicker;
- export default class Dashboard extends Component {
- render() {
- // mock order card data
- const orderData = [];
- const beginDay = new Date().getTime();
- const fakeY = [23, 44, 32, 55, 66, 89, 100, 200, 300, 400, 112, 500, 1000];
- for (let i = 0; i < fakeY.length; i++) {
- orderData.push({
- x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
- y: fakeY[i],
- });
- }
- // mock rank list data
- const rankingListData = [];
- for (let i = 0; i < 7; i++) {
- rankingListData.push({
- title: `渠道商${i + 1} - 贝尔安亲${i + 1}`,
- total: 25894.8,
- });
- }
- // 顶部的4个卡片,响应式配置
- const topColResponsiveProps = {
- xs: 24,
- sm: 12,
- md: 12,
- lg: 12,
- xl: 6,
- style: { marginBotton: 24 },
- };
- // 底部的销售额与用户量趋势图,日期筛选
- const salesExtra = (
- <div className={styles.salesExtraWrap}>
- <div className={styles.salesExtra}>
- <a>今日</a>
- <a>本周</a>
- <a>本月</a>
- <a>全年</a>
- </div>
- <RangePicker
- style={{ width: 256 }}
- />
- </div>
- );
- return (
- <div>
- <Row gutter={24}>
- <Col {...topColResponsiveProps}>
- <ChartCard
- bordered={false}
- title="总销售额"
- action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
- total={yuan(1247238957)}
- footer={<Field label="日均销售额" value={`¥${numeral(23343).format('0,0')}`} />}
- contentHeight={46}
- >
- <Trend flag="up" style={{ marginRight: 16 }}>
- 周同比<span className={styles.trendText}>12%</span>
- </Trend>
- <Trend flag="down">
- 日环比<span className={styles.trendText}>11%</span>
- </Trend>
- </ChartCard>
- </Col>
- <Col {...topColResponsiveProps}>
- <ChartCard
- bordered={false}
- title="支付笔数"
- action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
- total={100000}
- footer={<Field label="日订单量" value={5000} />}
- contentHeight={46}
- >
- <MiniBar
- height={46}
- data={orderData}
- />
- </ChartCard>
- </Col>
- <Col {...topColResponsiveProps}>
- <ChartCard
- bordered={false}
- title="用户量"
- action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
- total={4000}
- footer={<Field label="日增长量" value={200} />}
- contentHeight={46}
- >
- <MiniArea
- color="#975FE4"
- height={46}
- data={orderData}
- />
- </ChartCard>
- </Col>
- <Col {...topColResponsiveProps}>
- <ChartCard
- bordered={false}
- title="活跃量"
- action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
- total="2037个"
- footer={<Field label="日活增长" value={200} />}
- contentHeight={46}
- >
- <MiniArea
- line
- height={46}
- data={orderData}
- />
- </ChartCard>
- </Col>
- </Row>
- <Card
- bordered={false}
- bodyStyle={{ padding: 0 }}
- style={{ marginTop: 20 }}
- >
- <div className={styles.salesCard}>
- <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
- <TabPane tab="销售额" key="sales">
- <Row>
- <Col xl={16} lg={12} md={12} sm={24} xs={24}>
- <div className={styles.salesBar}>
- <Bar
- height={295}
- title="销售额趋势"
- data={orderData}
- />
- </div>
- </Col>
- <Col xl={8} lg={12} md={12} sm={24} xs={24}>
- <div className={styles.salesRank}>
- <h4 className={styles.rankingTitle}>渠道商销售额排名</h4>
- <ul className={styles.rankingList}>
- {
- rankingListData.map((item, i) => (
- <li key={item.title}>
- <span className={(i < 3) ? styles.active : ''}>{i + 1}</span>
- <span>{item.title}</span>
- <span>{numeral(item.total).format('0,0')}</span>
- </li>
- ))
- }
- </ul>
- </div>
- </Col>
- </Row>
- </TabPane>
- </Tabs>
- </div>
- </Card>
- </div>
- );
- }
- }
|