"DashboardAnalysis/src/model.tsx" did not exist on "9c3225d1e52f0c743a530411f1f556fb23dcf3b3"
index.tsx 5.93 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import React, { Component, Suspense } from 'react';
2
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
3
import { Row, Col, Icon, Menu, Dropdown } from 'antd';
陈帅's avatar
陈帅 committed
4
import { RangePickerValue } from 'antd/es/date-picker/interface';
陈帅's avatar
陈帅 committed
5 6 7
import { Dispatch } from 'redux';
import { RadioChangeEvent } from 'antd/es/radio';
import { GridContent } from '@ant-design/pro-layout';
8 9 10
import { getTimeDistance } from './utils/utils';
import styles from './style.less';
import PageLoading from './components/PageLoading';
陈帅's avatar
陈帅 committed
11
import { IAnalysisData } from './data.d';
12

13 14 15 16 17
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'));
18

陈帅's avatar
陈帅 committed
19 20
interface BLOCK_NAME_CAMEL_CASEProps {
  BLOCK_NAME_CAMEL_CASE: IAnalysisData;
陈帅's avatar
陈帅 committed
21
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
  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
43
  }),
陈帅's avatar
陈帅 committed
44 45 46 47 48 49
)
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
50 51 52 53
    salesType: 'all',
    currentTabKey: '',
    rangePickerValue: getTimeDistance('year'),
  };
陈帅's avatar
陈帅 committed
54

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

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

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

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

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

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

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

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

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

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

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

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

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

nikogu's avatar
nikogu committed
161
    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
162
    return (
陈帅's avatar
陈帅 committed
163 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
      <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>
212 213
    );
  }
afc163's avatar
afc163 committed
214
}
ddcat1115's avatar
ddcat1115 committed
215

216
export default PAGE_NAME_UPPER_CAMEL_CASE;