index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import React, { Component } from 'react';
  2. import numeral from 'numeral';
  3. import moment from 'moment';
  4. import {
  5. Row,
  6. Col,
  7. Icon,
  8. Card,
  9. Tabs,
  10. Table,
  11. Radio,
  12. DatePicker,
  13. Tooltip,
  14. Menu,
  15. Dropdown,
  16. } from 'antd';
  17. import {
  18. ChartCard,
  19. yuan,
  20. MiniArea,
  21. MiniBar,
  22. MiniProgress,
  23. Field,
  24. Bar,
  25. Pie,
  26. TimelineChart,
  27. } from '../../components/Charts';
  28. import Trend from '../../components/Trend';
  29. import NumberInfo from '../../components/NumberInfo';
  30. import styles from './index.less';
  31. const { TabPane } = Tabs;
  32. const { RangePicker } = DatePicker;
  33. export default class Dashboard extends Component {
  34. render() {
  35. // mock order card data
  36. const orderData = [];
  37. const beginDay = new Date().getTime();
  38. const fakeY = [23, 44, 32, 55, 66, 89, 100, 200, 300, 400, 112, 500, 1000];
  39. for (let i = 0; i < fakeY.length; i++) {
  40. orderData.push({
  41. x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
  42. y: fakeY[i],
  43. });
  44. }
  45. // mock rank list data
  46. const rankingListData = [];
  47. for (let i = 0; i < 7; i++) {
  48. rankingListData.push({
  49. title: `渠道商${i + 1} - 贝尔安亲${i + 1}`,
  50. total: 25894.8,
  51. });
  52. }
  53. // 顶部的4个卡片,响应式配置
  54. const topColResponsiveProps = {
  55. xs: 24,
  56. sm: 12,
  57. md: 12,
  58. lg: 12,
  59. xl: 6,
  60. style: { marginBotton: 24 },
  61. };
  62. // 底部的销售额与用户量趋势图,日期筛选
  63. const salesExtra = (
  64. <div className={styles.salesExtraWrap}>
  65. <div className={styles.salesExtra}>
  66. <a>今日</a>
  67. <a>本周</a>
  68. <a>本月</a>
  69. <a>全年</a>
  70. </div>
  71. <RangePicker
  72. style={{ width: 256 }}
  73. />
  74. </div>
  75. );
  76. return (
  77. <div>
  78. <Row gutter={24}>
  79. <Col {...topColResponsiveProps}>
  80. <ChartCard
  81. bordered={false}
  82. title="总销售额"
  83. action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
  84. total={yuan(1247238957)}
  85. footer={<Field label="日均销售额" value={`¥${numeral(23343).format('0,0')}`} />}
  86. contentHeight={46}
  87. >
  88. <Trend flag="up" style={{ marginRight: 16 }}>
  89. 周同比<span className={styles.trendText}>12%</span>
  90. </Trend>
  91. <Trend flag="down">
  92. 日环比<span className={styles.trendText}>11%</span>
  93. </Trend>
  94. </ChartCard>
  95. </Col>
  96. <Col {...topColResponsiveProps}>
  97. <ChartCard
  98. bordered={false}
  99. title="支付笔数"
  100. action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
  101. total={100000}
  102. footer={<Field label="日订单量" value={5000} />}
  103. contentHeight={46}
  104. >
  105. <MiniBar
  106. height={46}
  107. data={orderData}
  108. />
  109. </ChartCard>
  110. </Col>
  111. <Col {...topColResponsiveProps}>
  112. <ChartCard
  113. bordered={false}
  114. title="用户量"
  115. action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
  116. total={4000}
  117. footer={<Field label="日增长量" value={200} />}
  118. contentHeight={46}
  119. >
  120. <MiniArea
  121. color="#975FE4"
  122. height={46}
  123. data={orderData}
  124. />
  125. </ChartCard>
  126. </Col>
  127. <Col {...topColResponsiveProps}>
  128. <ChartCard
  129. bordered={false}
  130. title="活跃量"
  131. action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
  132. total="2037个"
  133. footer={<Field label="日活增长" value={200} />}
  134. contentHeight={46}
  135. >
  136. <MiniArea
  137. line
  138. height={46}
  139. data={orderData}
  140. />
  141. </ChartCard>
  142. </Col>
  143. </Row>
  144. <Card
  145. bordered={false}
  146. bodyStyle={{ padding: 0 }}
  147. style={{ marginTop: 20 }}
  148. >
  149. <div className={styles.salesCard}>
  150. <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
  151. <TabPane tab="销售额" key="sales">
  152. <Row>
  153. <Col xl={16} lg={12} md={12} sm={24} xs={24}>
  154. <div className={styles.salesBar}>
  155. <Bar
  156. height={295}
  157. title="销售额趋势"
  158. data={orderData}
  159. />
  160. </div>
  161. </Col>
  162. <Col xl={8} lg={12} md={12} sm={24} xs={24}>
  163. <div className={styles.salesRank}>
  164. <h4 className={styles.rankingTitle}>渠道商销售额排名</h4>
  165. <ul className={styles.rankingList}>
  166. {
  167. rankingListData.map((item, i) => (
  168. <li key={item.title}>
  169. <span className={(i < 3) ? styles.active : ''}>{i + 1}</span>
  170. <span>{item.title}</span>
  171. <span>{numeral(item.total).format('0,0')}</span>
  172. </li>
  173. ))
  174. }
  175. </ul>
  176. </div>
  177. </Col>
  178. </Row>
  179. </TabPane>
  180. </Tabs>
  181. </div>
  182. </Card>
  183. </div>
  184. );
  185. }
  186. }