提交 36591d9d7cb4b791429fbcdc889556b5bb459073

作者 愚道
1 个父辈 c7ae27f9

improve analysis block

1   -import moment from 'moment';
2   -import React from 'react';
3   -import nzh from 'nzh/cn';
4   -import { parse, stringify } from 'qs';
5   -
6   -export function fixedZero(val) {
7   - return val * 1 < 10 ? `0${val}` : val;
8   -}
9   -
10   -export function getTimeDistance(type) {
11   - const now = new Date();
12   - const oneDay = 1000 * 60 * 60 * 24;
13   -
14   - if (type === 'today') {
15   - now.setHours(0);
16   - now.setMinutes(0);
17   - now.setSeconds(0);
18   - return [moment(now), moment(now.getTime() + (oneDay - 1000))];
19   - }
20   -
21   - if (type === 'week') {
22   - let day = now.getDay();
23   - now.setHours(0);
24   - now.setMinutes(0);
25   - now.setSeconds(0);
26   -
27   - if (day === 0) {
28   - day = 6;
29   - } else {
30   - day -= 1;
31   - }
32   -
33   - const beginTime = now.getTime() - day * oneDay;
34   -
35   - return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
36   - }
37   -
38   - if (type === 'month') {
39   - const year = now.getFullYear();
40   - const month = now.getMonth();
41   - const nextDate = moment(now).add(1, 'months');
42   - const nextYear = nextDate.year();
43   - const nextMonth = nextDate.month();
44   -
45   - return [
46   - moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
47   - moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
48   - ];
49   - }
50   -
51   - const year = now.getFullYear();
52   - return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
53   -}
54   -
55   -export function getPlainNode(nodeList, parentPath = '') {
56   - const arr = [];
57   - nodeList.forEach(node => {
58   - const item = node;
59   - item.path = `${parentPath}/${item.path || ''}`.replace(/\/+/g, '/');
60   - item.exact = true;
61   - if (item.children && !item.component) {
62   - arr.push(...getPlainNode(item.children, item.path));
63   - } else {
64   - if (item.children && item.component) {
65   - item.exact = false;
66   - }
67   - arr.push(item);
68   - }
69   - });
70   - return arr;
71   -}
72   -
73   -export function digitUppercase(n) {
74   - return nzh.toMoney(n);
75   -}
76   -
77   -function getRelation(str1, str2) {
78   - if (str1 === str2) {
79   - console.warn('Two path are equal!'); // eslint-disable-line
80   - }
81   - const arr1 = str1.split('/');
82   - const arr2 = str2.split('/');
83   - if (arr2.every((item, index) => item === arr1[index])) {
84   - return 1;
85   - }
86   - if (arr1.every((item, index) => item === arr2[index])) {
87   - return 2;
88   - }
89   - return 3;
90   -}
91   -
92   -function getRenderArr(routes) {
93   - let renderArr = [];
94   - renderArr.push(routes[0]);
95   - for (let i = 1; i < routes.length; i += 1) {
96   - // 去重
97   - renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
98   - // 是否包含
99   - const isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
100   - if (isAdd) {
101   - renderArr.push(routes[i]);
102   - }
103   - }
104   - return renderArr;
105   -}
106   -
107   -/**
108   - * Get router routing configuration
109   - * { path:{name,...param}}=>Array<{name,path ...param}>
110   - * @param {string} path
111   - * @param {routerData} routerData
112   - */
113   -export function getRoutes(path, routerData) {
114   - let routes = Object.keys(routerData).filter(
115   - routePath => routePath.indexOf(path) === 0 && routePath !== path
116   - );
117   - // Replace path to '' eg. path='user' /user/name => name
118   - routes = routes.map(item => item.replace(path, ''));
119   - // Get the route to be rendered to remove the deep rendering
120   - const renderArr = getRenderArr(routes);
121   - // Conversion and stitching parameters
122   - const renderRoutes = renderArr.map(item => {
123   - const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
124   - return {
125   - exact,
126   - ...routerData[`${path}${item}`],
127   - key: `${path}${item}`,
128   - path: `${path}${item}`,
129   - };
130   - });
131   - return renderRoutes;
132   -}
133   -
134   -export function getPageQuery() {
135   - return parse(window.location.href.split('?')[1]);
136   -}
137   -
138   -export function getQueryPath(path = '', query = {}) {
139   - const search = stringify(query);
140   - if (search.length) {
141   - return `${path}?${search}`;
142   - }
143   - return path;
144   -}
145   -
146   -/* eslint no-useless-escape:0 */
147   -const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
148   -
149   -export function isUrl(path) {
150   - return reg.test(path);
151   -}
152   -
153   -export function formatWan(val) {
154   - const v = val * 1;
155   - if (!v || Number.isNaN(v)) return '';
156   -
157   - let result = val;
158   - if (val > 10000) {
159   - result = Math.floor(val / 10000);
160   - result = (
161   - <span>
162   - {result}
163   - <span
164   - style={{
165   - position: 'relative',
166   - top: -2,
167   - fontSize: 14,
168   - fontStyle: 'normal',
169   - marginLeft: 2,
170   - }}
171   - >
172   -
173   - </span>
174   - </span>
175   - );
176   - }
177   - return result;
178   -}
179   -
180   -// 给官方演示站点用,用于关闭真实开发环境不需要使用的特性
181   -export function isAntdPro() {
182   - return window.location.hostname === 'preview.pro.ant.design';
183   -}
... ... @@ -15,11 +15,9 @@
15 15 "dva": "^2.4.0",
16 16 "antd": "^3.10.9",
17 17 "moment": "^2.22.2",
18   - "nzh": "^1.0.3",
19 18 "umi-request": "^1.0.0",
20 19 "ant-design-pro": "^2.1.1",
21   - "numeral": "^2.0.6",
22   - "hash.js": "^1.1.5"
  20 + "numeral": "^2.0.6"
23 21 },
24 22 "devDependencies": {
25 23 "umi": "^2.3.0-beta.1",
... ...
... ... @@ -192,5 +192,5 @@ const getFakeChartData = {
192 192 };
193 193
194 194 export default {
195   - 'GET /api/fake_chart_data': getFakeChartData,
  195 + 'GET /api/BLOCK_NAME/fake_chart_data': getFakeChartData,
196 196 };
... ...
1 1 import React, { memo } from 'react';
2 2 import { Row, Col, Icon, Tooltip } from 'antd';
3 3 import { FormattedMessage } from 'umi/locale';
4   -import styles from '../style.less';
5   -import { Charts } from 'ant-design-pro';
6   -import { Trend } from 'ant-design-pro';
  4 +import { Charts, Trend } from 'ant-design-pro';
7 5 import numeral from 'numeral';
8   -import Yuan from '@/utils/Yuan';
  6 +import styles from '../style.less';
  7 +import Yuan from '../utils/Yuan';
9 8
10 9 const { ChartCard, MiniArea, MiniBar, MiniProgress, Field } = Charts;
11 10
... ...
1 1 import React, { memo } from 'react';
2 2 import { Card, Tabs, Row, Col } from 'antd';
3 3 import { formatMessage, FormattedMessage } from 'umi/locale';
4   -import { Charts } from 'ant-design-pro';
5   -import { NumberInfo } from 'ant-design-pro';
  4 +import { Charts, NumberInfo } from 'ant-design-pro';
6 5 import styles from '../style.less';
7 6
8 7 const { TimelineChart, Pie } = Charts;
... ...
1 1 import React, { memo } from 'react';
2 2 import { Card, Radio } from 'antd';
  3 +import { Charts } from 'ant-design-pro';
3 4 import { FormattedMessage } from 'umi/locale';
4 5 import styles from '../style.less';
5   -import { Charts } from 'ant-design-pro';
6   -import Yuan from '@/utils/Yuan';
  6 +import Yuan from '../utils/Yuan';
7 7
8 8 const { Pie } = Charts;
9 9
... ...
... ... @@ -2,10 +2,10 @@ import React, { Component, Suspense } from 'react';
2 2 import { connect } from 'dva';
3 3 import { Row, Col, Icon, Menu, Dropdown } from 'antd';
4 4
5   -import { getTimeDistance } from '@/utils/utils';
  5 +import { getTimeDistance } from './utils/utils';
6 6
7 7 import styles from './style.less';
8   -import PageLoading from '@/components/PageLoading';
  8 +import PageLoading from './components/PageLoading';
9 9
10 10 const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
11 11 const SalesCard = React.lazy(() => import('./components/SalesCard'));
... ... @@ -13,11 +13,11 @@ const TopSearch = React.lazy(() => import('./components/TopSearch'));
13 13 const ProportionSales = React.lazy(() => import('./components/ProportionSales'));
14 14 const OfflineData = React.lazy(() => import('./components/OfflineData'));
15 15
16   -@connect(({ chart, loading }) => ({
17   - chart,
18   - loading: loading.effects['chart/fetch'],
  16 +@connect(({ BLOCK_NAME, loading }) => ({
  17 + BLOCK_NAME,
  18 + loading: loading.effects['BLOCK_NAME/fetch'],
19 19 }))
20   -class Analysis extends Component {
  20 +class PAGE_NAME_UPPER_CAMEL_CASE extends Component {
21 21 state = {
22 22 salesType: 'all',
23 23 currentTabKey: '',
... ... @@ -28,7 +28,7 @@ class Analysis extends Component {
28 28 const { dispatch } = this.props;
29 29 this.reqRef = requestAnimationFrame(() => {
30 30 dispatch({
31   - type: 'chart/fetch',
  31 + type: 'BLOCK_NAME/fetch',
32 32 });
33 33 });
34 34 }
... ... @@ -36,7 +36,7 @@ class Analysis extends Component {
36 36 componentWillUnmount() {
37 37 const { dispatch } = this.props;
38 38 dispatch({
39   - type: 'chart/clear',
  39 + type: 'BLOCK_NAME/clear',
40 40 });
41 41 cancelAnimationFrame(this.reqRef);
42 42 clearTimeout(this.timeoutId);
... ... @@ -61,7 +61,7 @@ class Analysis extends Component {
61 61 });
62 62
63 63 dispatch({
64   - type: 'chart/fetchSalesData',
  64 + type: 'BLOCK_NAME/fetchSalesData',
65 65 });
66 66 };
67 67
... ... @@ -72,7 +72,7 @@ class Analysis extends Component {
72 72 });
73 73
74 74 dispatch({
75   - type: 'chart/fetchSalesData',
  75 + type: 'BLOCK_NAME/fetchSalesData',
76 76 });
77 77 };
78 78
... ... @@ -93,7 +93,7 @@ class Analysis extends Component {
93 93
94 94 render() {
95 95 const { rangePickerValue, salesType, currentTabKey } = this.state;
96   - const { chart, loading } = this.props;
  96 + const { BLOCK_NAME, loading } = this.props;
97 97 const {
98 98 visitData,
99 99 visitData2,
... ... @@ -104,7 +104,7 @@ class Analysis extends Component {
104 104 salesTypeData,
105 105 salesTypeDataOnline,
106 106 salesTypeDataOffline,
107   - } = chart;
  107 + } = BLOCK_NAME;
108 108 let salesPieData;
109 109 if (salesType === 'all') {
110 110 salesPieData = salesTypeData;
... ... @@ -181,4 +181,4 @@ class Analysis extends Component {
181 181 }
182 182 }
183 183
184   -export default Analysis;
  184 +export default PAGE_NAME_UPPER_CAMEL_CASE;
... ...
1 1 import { fakeChartData } from './service';
2 2
3 3 export default {
4   - namespace: 'chart',
  4 + namespace: 'BLOCK_NAME',
5 5
6 6 state: {
7 7 visitData: [],
... ...
1 1 import request from 'umi-request';
2 2
3 3 export async function fakeChartData() {
4   - return request('/api/fake_chart_data');
  4 + return request('/api/BLOCK_NAME/fake_chart_data');
5 5 }
... ...
1 1 @import '~antd/lib/style/themes/default.less';
2   -@import '~@/utils/utils.less';
  2 +@import './utils/utils.less';
3 3
4 4 .iconGroup {
5 5 i {
... ...
  1 +import moment from 'moment';
  2 +
  3 +export function fixedZero(val) {
  4 + return val * 1 < 10 ? `0${val}` : val;
  5 +}
  6 +
  7 +export function getTimeDistance(type) {
  8 + const now = new Date();
  9 + const oneDay = 1000 * 60 * 60 * 24;
  10 +
  11 + if (type === 'today') {
  12 + now.setHours(0);
  13 + now.setMinutes(0);
  14 + now.setSeconds(0);
  15 + return [moment(now), moment(now.getTime() + (oneDay - 1000))];
  16 + }
  17 +
  18 + if (type === 'week') {
  19 + let day = now.getDay();
  20 + now.setHours(0);
  21 + now.setMinutes(0);
  22 + now.setSeconds(0);
  23 +
  24 + if (day === 0) {
  25 + day = 6;
  26 + } else {
  27 + day -= 1;
  28 + }
  29 +
  30 + const beginTime = now.getTime() - day * oneDay;
  31 +
  32 + return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
  33 + }
  34 +
  35 + if (type === 'month') {
  36 + const year = now.getFullYear();
  37 + const month = now.getMonth();
  38 + const nextDate = moment(now).add(1, 'months');
  39 + const nextYear = nextDate.year();
  40 + const nextMonth = nextDate.month();
  41 +
  42 + return [
  43 + moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
  44 + moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
  45 + ];
  46 + }
  47 +
  48 + const year = now.getFullYear();
  49 + return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
  50 +}
... ...
注册登录 后发表评论