index.tsx 5.93 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Col, Dropdown, Icon, Menu, Row } from 'antd';
陈帅's avatar
陈帅 committed
2
import React, { Component, Suspense } from 'react';
陈帅's avatar
陈帅 committed
3

陈帅's avatar
陈帅 committed
4 5
import { Dispatch } from 'redux';
import { GridContent } from '@ant-design/pro-layout';
陈帅's avatar
陈帅 committed
6 7 8
import { RadioChangeEvent } from 'antd/es/radio';
import { RangePickerValue } from 'antd/es/date-picker/interface';
import { connect } from 'dva';
9
import PageLoading from './components/PageLoading';
陈帅's avatar
陈帅 committed
10
import { IAnalysisData } from './data.d';
陈帅's avatar
陈帅 committed
11 12
import { getTimeDistance } from './utils/utils';
import styles from './style.less';
13

14 15 16 17 18
const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
const SalesCard = React.lazy(() => import('./components/SalesCard'));
const TopSearch = React.lazy(() => import('./components/TopSearch'));
const ProportionSales = React.lazy(() => import('./components/ProportionSales'));
const OfflineData = React.lazy(() => import('./components/OfflineData'));
19

陈帅's avatar
陈帅 committed
20 21
interface BLOCK_NAME_CAMEL_CASEProps {
  BLOCK_NAME_CAMEL_CASE: IAnalysisData;
陈帅's avatar
陈帅 committed
22
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
  loading: boolean;
}

interface BLOCK_NAME_CAMEL_CASEState {
  salesType: 'all' | 'online' | 'stores';
  currentTabKey: string;
  rangePickerValue: RangePickerValue;
}

@connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
    loading,
  }: {
    BLOCK_NAME_CAMEL_CASE: any;
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
    BLOCK_NAME_CAMEL_CASE,
    loading: loading.effects['BLOCK_NAME_CAMEL_CASE/fetch'],
陈帅's avatar
陈帅 committed
44
  }),
陈帅's avatar
陈帅 committed
45 46 47 48 49 50
)
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
  BLOCK_NAME_CAMEL_CASEProps,
  BLOCK_NAME_CAMEL_CASEState
> {
  state: BLOCK_NAME_CAMEL_CASEState = {
Anderson's avatar
Anderson committed
51 52 53 54
    salesType: 'all',
    currentTabKey: '',
    rangePickerValue: getTimeDistance('year'),
  };
陈帅's avatar
陈帅 committed
55

陈帅's avatar
陈帅 committed
56
  reqRef!: number;
陈帅's avatar
陈帅 committed
57

陈帅's avatar
陈帅 committed
58
  timeoutId!: number;
陈帅's avatar
陈帅 committed
59

60
  componentDidMount() {
61
    const { dispatch } = this.props;
62 63
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
64
        type: 'BLOCK_NAME_CAMEL_CASE/fetch',
65
      });
66
    });
67 68 69 70 71
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
72
      type: 'BLOCK_NAME_CAMEL_CASE/clear',
73
    });
74
    cancelAnimationFrame(this.reqRef);
afc163's avatar
afc163 committed
75
    clearTimeout(this.timeoutId);
76 77
  }

陈帅's avatar
陈帅 committed
78
  handleChangeSalesType = (e: RadioChangeEvent) => {
79 80 81
    this.setState({
      salesType: e.target.value,
    });
niko's avatar
niko committed
82
  };
83

陈帅's avatar
陈帅 committed
84
  handleTabChange = (key: string) => {
85 86 87
    this.setState({
      currentTabKey: key,
    });
niko's avatar
niko committed
88
  };
89

陈帅's avatar
陈帅 committed
90
  handleRangePickerChange = (rangePickerValue: RangePickerValue) => {
91
    const { dispatch } = this.props;
92 93 94
    this.setState({
      rangePickerValue,
    });
nikogu's avatar
nikogu committed
95

96
    dispatch({
97
      type: 'BLOCK_NAME_CAMEL_CASE/fetchSalesData',
nikogu's avatar
nikogu committed
98
    });
niko's avatar
niko committed
99
  };
100

陈帅's avatar
陈帅 committed
101
  selectDate = (type: 'today' | 'week' | 'month' | 'year') => {
102
    const { dispatch } = this.props;
103 104 105 106
    this.setState({
      rangePickerValue: getTimeDistance(type),
    });

107
    dispatch({
108
      type: 'BLOCK_NAME_CAMEL_CASE/fetchSalesData',
109
    });
niko's avatar
niko committed
110
  };
111

陈帅's avatar
陈帅 committed
112
  isActive = (type: 'today' | 'week' | 'month' | 'year') => {
afc163's avatar
afc163 committed
113 114 115
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
愚道's avatar
愚道 committed
116
      return '';
afc163's avatar
afc163 committed
117
    }
niko's avatar
niko committed
118 119 120 121
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
afc163's avatar
afc163 committed
122 123
      return styles.currentDate;
    }
愚道's avatar
愚道 committed
124
    return '';
陈帅's avatar
陈帅 committed
125
  };
afc163's avatar
afc163 committed
126

127
  render() {
陈帅's avatar
陈帅 committed
128
    const { rangePickerValue, salesType, currentTabKey } = this.state;
129
    const { BLOCK_NAME_CAMEL_CASE, loading } = this.props;
130 131
    const {
      visitData,
afc163's avatar
afc163 committed
132
      visitData2,
133 134 135 136 137 138 139
      salesData,
      searchData,
      offlineData,
      offlineChartData,
      salesTypeData,
      salesTypeDataOnline,
      salesTypeDataOffline,
140
    } = BLOCK_NAME_CAMEL_CASE;
141 142 143 144 145 146
    let salesPieData;
    if (salesType === 'all') {
      salesPieData = salesTypeData;
    } else {
      salesPieData = salesType === 'online' ? salesTypeDataOnline : salesTypeDataOffline;
    }
afc163's avatar
afc163 committed
147 148 149 150 151 152 153
    const menu = (
      <Menu>
        <Menu.Item>操作一</Menu.Item>
        <Menu.Item>操作二</Menu.Item>
      </Menu>
    );

陈帅's avatar
陈帅 committed
154
    const dropdownGroup = (
155
      <span className={styles.iconGroup}>
afc163's avatar
afc163 committed
156 157 158
        <Dropdown overlay={menu} placement="bottomRight">
          <Icon type="ellipsis" />
        </Dropdown>
159 160 161
      </span>
    );

nikogu's avatar
nikogu committed
162
    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
163
    return (
陈帅's avatar
陈帅 committed
164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212
      <GridContent>
        <React.Fragment>
          <Suspense fallback={<PageLoading />}>
            <IntroduceRow loading={loading} visitData={visitData} />
          </Suspense>
          <Suspense fallback={null}>
            <SalesCard
              rangePickerValue={rangePickerValue}
              salesData={salesData}
              isActive={this.isActive}
              handleRangePickerChange={this.handleRangePickerChange}
              loading={loading}
              selectDate={this.selectDate}
            />
          </Suspense>
          <Row gutter={24}>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <TopSearch
                  loading={loading}
                  visitData2={visitData2}
                  searchData={searchData}
                  dropdownGroup={dropdownGroup}
                />
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <ProportionSales
                  dropdownGroup={dropdownGroup}
                  salesType={salesType}
                  loading={loading}
                  salesPieData={salesPieData}
                  handleChangeSalesType={this.handleChangeSalesType}
                />
              </Suspense>
            </Col>
          </Row>
          <Suspense fallback={null}>
            <OfflineData
              activeKey={activeKey}
              loading={loading}
              offlineData={offlineData}
              offlineChartData={offlineChartData}
              handleTabChange={this.handleTabChange}
            />
          </Suspense>
        </React.Fragment>
      </GridContent>
213 214
    );
  }
afc163's avatar
afc163 committed
215
}
ddcat1115's avatar
ddcat1115 committed
216

217
export default PAGE_NAME_UPPER_CAMEL_CASE;