image.png

    分析这个页面

    1. analysis.js
    2. state = {
    3. salesType: 'all',
    4. currentTabKey: '',
    5. rangePickerValue: getTimeDistance('year'),//getTimeDistance工具函数
    6. };
    7. <SalesCard
    8. salesData={salesData}
    9. isActive={this.isActive}// 选择框的 高亮
    10. selectDate={this.selectDate} // select的改变
    11. rangePickerValue={rangePickerValue} // 日期选择器的value
    12. handleRangePickerChange={this.handleRangePickerChange}
    13. loading={loading}
    14. />

    意外的是:
    isActive 居然是函数,而不是简单的传了个curtabview即可
    一般的设计思路:
    如果将curtab放在props上,那么tabchange的事件也是通过prop传递给ui组件
    ui组件改变的时候 调用prop的值
    同时传递curtab给ui组件是为了在ui组件的class高亮时判断: curtab===item.tab?’active’

    pro里:

    细分的组件就完完全全变为了ui组件。连一点点逻辑的控制都给抽象到了props组件里
    比如这里的className={isActive(‘today’)}

    1. ({ salesData, isActive, loading, selectDate })
    2. <div className={styles.salesExtra}>
    3. <a className={isActive('today')} onClick={() => selectDate('today')}>
    4. <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day" />
    5. </a>
    6. <a className={isActive('week')} onClick={() => selectDate('week')}>
    7. <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week" />
    8. </a>
    9. </div>
    10. # 默认高亮:
    11. selec的高亮
    12. 1.日期选择器的控制 (静态渲染的时候 通过读取datapickervalue来判断 如果日期选择器有符合的则高亮
    13. isActive = type => {
    14. const { rangePickerValue } = this.state;
    15. const value = getTimeDistance(type);// 'allday'变为value [starttime,endtime]
    16. if (!rangePickerValue[0] || !rangePickerValue[1]) {
    17. return '';
    18. }
    19. if (
    20. rangePickerValue[0].isSame(value[0], 'day') &&
    21. rangePickerValue[1].isSame(value[1], 'day')
    22. ) {
    23. return styles.currentDate;
    24. }
    25. return '';
    26. };
    27. 2.用户的select控制 用户select控制也要改变日期选择器的value
    28. selectDate = type => {
    29. const { dispatch } = this.props;
    30. this.setState({
    31. rangePickerValue: getTimeDistance(type),
    32. });
    33. // <RangePicker
    34. value={rangePickerValue}
    35. onChange={handleRangePickerChange}
    36. style={{ width: 256 }}
    37. ///>
    38. dispatch({
    39. type: 'chart/fetchSalesData',
    40. });
    41. };
    42. 由于 datepickervalue改变了 再反向决定 select的高亮(静态渲染 isactive
    43. 由此解耦了 datepickerdatepicker只需要按部就班的改变rangePickerValue即可

    所以 selectchange 、datechange、type都是走的一个请求吧?
    tabchange是在props就可以了的

    解析一下时间的处理:

    1. <div className={styles.salesExtra}>
    2. <a className={isActive('today')} onClick={() => selectDate('today')}>
    3. <FormattedMessage id="app.analysis.all-day" defaultMessage="All Day" />
    4. </a>
    5. // 近7天
    6. <a className={isActive('week')} onClick={() => selectDate('week')}>
    7. <FormattedMessage id="app.analysis.all-week" defaultMessage="All Week" />
    8. </a>
    9. <a className={isActive('month')} onClick={() => selectDate('month')}>
    10. <FormattedMessage id="app.analysis.all-month" defaultMessage="All Month" />
    11. </a>
    12. <a className={isActive('year')} onClick={() => selectDate('year')}>
    13. <FormattedMessage id="app.analysis.all-year" defaultMessage="All Year" />
    14. </a>
    15. </div>
    16. <RangePicker
    17. value={rangePickerValue}
    18. onChange={handleRangePickerChange}
    19. style={{ width: 256 }}
    20. />
    21. prop组件
    22. isActive = type => {
    23. const { rangePickerValue } = this.state;
    24. //
    25. const value = getTimeDistance(type);
    26. // rangePickerValue 看来是返回数组 [start,end];两个变量变为了一个变量 节约了变量
    27. // 比我想象的复杂! [{isSame:func,date:xxx},{}]
    28. // 不过不是自己构造的 return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
    29. // moment里带的
    30. if (!rangePickerValue[0] || !rangePickerValue[1]) {
    31. return '';
    32. }
    33. // 如果当前rangePickerValue与selec计算出的时间范围一致 那么就
    34. if (
    35. // 一个数据还可以 调用isSame方法?
    36. rangePickerValue[0].isSame(value[0], 'day') &&
    37. rangePickerValue[1].isSame(value[1], 'day')
    38. ) {
    39. return styles.currentDate;//
    40. }
    41. return '';
    42. };
    1. const value = getTimeDistance(type);
    2. // getTimeDistance函数
    3. // type:today 1,week 7days,month 30days,year
    4. export function getTimeDistance(type) {
    5. const now = new Date();
    6. const oneDay = 1000 * 60 * 60 * 24;
    7. if (type === 'today') {
    8. now.setHours(0);
    9. now.setMinutes(0);
    10. now.setSeconds(0);
    11. return [moment(now), moment(now.getTime() + (oneDay - 1000))];
    12. }
    13. if (type === 'week') {
    14. let day = now.getDay();
    15. now.setHours(0);
    16. now.setMinutes(0);
    17. now.setSeconds(0);
    18. if (day === 0) {
    19. day = 6;
    20. } else {
    21. day -= 1;
    22. }
    23. const beginTime = now.getTime() - day * oneDay;
    24. return [moment(beginTime), moment(beginTime + (7 * oneDay - 1000))];
    25. }
    26. if (type === 'month') {
    27. const year = now.getFullYear();
    28. const month = now.getMonth();
    29. const nextDate = moment(now).add(1, 'months');
    30. const nextYear = nextDate.year();
    31. const nextMonth = nextDate.month();
    32. return [
    33. moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`),
    34. moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000),
    35. ];
    36. }
    37. const year = now.getFullYear();
    38. return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
    39. }

    接受的日期是这个格式
    image.png
    {dateRangeStart} 至 {dateRangeEnd}

    1. const format = 'YYYY.MM.DD';
    2. const urlFormat = 'YYYYMMDD';
    3. lastest7Days =
    4. // 以当前日期 往前推7day找到7天前的数据
    5. moment().subtract(7, 'd').format(format).toString()
    6. + ' '
    7. + moment().subtract(1, 'd').format(format).toString();
    8. lastest30Days =
    9. moment().subtract(30, 'd').format(format).toString()
    10. + ' '
    11. + moment().subtract(1, 'd').format(format).toString();
    12. dateRangeStart: moment().subtract(7, 'd').format(format).toString(),
    13. dateRangeEnd: moment().subtract(1, 'd').format(format).toString(),
    14. <DateRange
    15. startDate={moment('2019.10.08', format)} // new Date() 将2019.10.02 转换为new date格式
    16. endDate={moment(dateRangeEnd, format)}
    17. />

    daterange 根据这样获得理想的数据

    1. onChange={rangePickerValue => onChange(rangePickerValue)}
    2. const {startDate, endDate} = rangePickerValue;
    3. const startDateStr = startDate.format('YYYY.MM.DD').toString();
    4. const endDateStr = endDate.format('YYYY.MM.DD').toString();

    默认展示 近7天的数据
    image.png 按照日期

    image.png datepicker

    所以只需要 将date格式转换为 YYYY.MM.DD格式即可
    传给后端的数据样式 也是 2019.08.09