前端显示动态时间（定时器）

/*
 * @Author: yangzihua
 * @Date: 2022-10-25 09:20:43
 * @LastEditors: yangzihua
 * @LastEditTime: 2022-11-02 10:53:15
 * @Description:工作日历
 */
import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import { Calendar, Input } from 'antd';
import { connect } from 'dva';
import {
  AppstoreOutlined,
  CalendarOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import LForm from '@/components/ModalButton/LForm';
import styles from '../WorkHome.less';

const { TextArea } = Input;
@connect()
@Form.create({})
export default class WorkCalendar extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      localYear: '', // 年份
      localDate: '', // 月日
      localDay: '', // 星期
      localTime: '', // 时间
    };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.refreshQuery();
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  refreshQuery = () => {
    let time = new Date();
    this.setState({
      localYear: time.getFullYear(),
    });
    switch (time.getDay()) {
      case 0:
        this.setState({
          localDay: '星期日',
        });
        break;
      case 1:
        this.setState({
          localDay: '星期一',
        });
        break;
      case 2:
        this.setState({
          localDay: '星期二',
        });
        break;
      case 3:
        this.setState({
          localDay: '星期三',
        });
        break;
      case 4:
        this.setState({
          localDay: '星期四',
        });
        break;
      case 5:
        this.setState({
          localDay: '星期五',
        });
        break;
      case 6:
        this.setState({
          localDay: '星期六',
        });
        break;
      default:
        break;
    }
    this.setState({
      localTime: time.toLocaleTimeString(),
    });

    this.setState({
      localDate: `${time.getMonth() + 1}月${time.getDate()}日`,
    });

    time = null;
  };

  // 获取系统时间
  getLocalTime = () => {
    setInterval(this.refreshQuery, 0);
  };

  handleOpen = () => {
    this.props.dispatch({
      type: 'dialog/open',
      payload: '添加日程',
    });
  };

  render() {
    const { form } = this.props;
    return (
      <>
        <LForm
          form={form}
          type="modal"
          disableLayout
          maskClosable={false}
          width={500}
          title="添加日程"
          operation
          // footer={this.searchFooter()}
          // onCancel="advancedSearch/resetSearchList"
        >
          <TextArea
            rows={4}
            placeholder="请输入日程"
            allowClear
            style={{ width: '100%' }}
          />
        </LForm>
        <div className={styles.divCalendar}>
          <div className={styles.divTitle}>
            <AppstoreOutlined className={styles.iconTitle} />
            <div className={styles.textTitle}>我的工作日历</div>
          </div>
          <div className={styles.divCalendarArea}>
            <div className={styles.divCalendarContext}>
              <Calendar fullscreen={false} />
            </div>
            <div className={styles.divScheduleInfo}>
              <div className={styles.divScheduleIconAndDate}>
                <div className={styles.divCalendarTime}>
                  {/* {`${new Date().getHours()}:${new Date().getMinutes()}:${new Date().getSeconds()}`} */}
                  {this.state.localTime}
                </div>
                <CalendarOutlined className={styles.iconCalendar} />
              </div>

              <div className={styles.divCalendarTimeTwo}>
                {`${this.state.localDate}  ${this.state.localDay}`}
              </div>
              <div className={styles.divCalendarTimeTwo}>
                {`${this.state.localYear}年`}
              </div>
              <div className={styles.divDivider} />
              <div className={styles.textSchedule}>
                添加日程 <PlusCircleOutlined onClick={this.handleOpen} />
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}