2023-07-06

king

2023-07-06 fa8f1b1320fd2ad21884ccd6df792bf88270e2a1

 src/menu/components/calendar/board/index.jsx

@@ -1,12 +1,15 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Select, Radio, Row, Col, Badge } from 'antd'
import { Select, Radio, Row, Col } from 'antd'
import moment from 'moment'
import 'moment/locale/zh-cn'

import './index.scss'

const { Option } = Select

moment.locale('zh-cn')

class CalendarBoard extends Component {
  static propTpyes = {
@@ -31,7 +34,7 @@
    let _selectYear = +this.state.selectYear
    yearlist.push(`${_selectYear}`)
    
    for (let i = 1; i <= 50; i++) {
    for (let i = 1; i <= 10; i++) {
      yearlist.unshift(`${_selectYear - i}`)
      yearlist.push(`${_selectYear + i}`)
    }
@@ -40,11 +43,7 @@

    let _levels = config.wrap.levels
    let level = _levels[0]
    let monthlist = null

    if (_levels.includes('month')) {
      monthlist = datelist.filter(item => item.month === moment().format('MM'))[0]
    }
    let monthlist = datelist.filter(item => item.month === moment().format('MM'))[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable)

    this.setState({
      yearlist,
@@ -58,7 +57,8 @@
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) {
      this.setState({
        levels: nextProps.config.wrap.levels
        levels: nextProps.config.wrap.levels,
        level: nextProps.config.wrap.levels[0]
      })
    }
  }
@@ -67,11 +67,7 @@
    return !is(fromJS(this.state), fromJS(nextState))
  }

  getNongLi = (nyear, nmonth, nday) => {
    let jq = this.getjq(nyear, nmonth, nday)

    if (jq) return jq

  getNongLi = (nyear, nmonth, nday, week) => {
    let lmonth;
    let lday;
    let lleap; //农历参数
@@ -180,11 +176,93 @@
      lmonth = '闰' + lmonth
    }

    if (lday === '初一') {
      return lmonth + '月'
    lmonth = lmonth + '月'

    if (!week) {
      return lmonth + lday
    }

    return lday
    let jq = this.getjq(nyear, nmonth, nday)

    let nl = lday

    if (lday === '初一') {
      nl = lmonth
    }
    if (jq) {
      nl = jq
    }

    let sign = '班'
    if (week > 5) {
      sign = '休'
    }

    let jr = ''
    let gr = '' + nmonth + '-' + nday
    let nr = lmonth + lday
    if (gr === '1-1') {
      jr = '元旦'
      sign = '休'
    } else if (nr === '正月初一') {
      jr = '春节'
      sign = '休'
    } else if (nr === '正月十五') {
      jr = '元宵节'
    } else if (jq === '清明') {
      sign = '休'
    } else if (gr === '3-8') {
      jr = '妇女节'
    } else if (gr === '5-1') {
      jr = '劳动节'
      sign = '休'
    } else if (nr === '五月初五') {
      jr = '端午节'
      sign = '休'
    } else if (nr === '七月初七') {
      jr = '七夕节'
    } else if (nr === '七月十五') {
      jr = '中元节'
    } else if (nr === '八月十五') {
      jr = '中秋节'
      sign = '休'
    } else if (gr === '7-1') {
      jr = '建党节'
    } else if (gr === '8-1') {
      jr = '建军节'
    } else if (gr === '9-10') {
      jr = '教师节'
    } else if (gr === '10-1') {
      jr = '国庆节'
      sign = '休'
    } else if (nr === '九月初九') {
      jr = '重阳节'
    } else if (nr === '十二月三十') {
      jr = '除夕'
      sign = '休'
    } else if (['正月初二', '正月初三', '正月初四', '正月初五', '正月初六'].includes(nr)) {
      sign = '休'
    } else if (['10-2', '10-3'].includes(gr)) {
      sign = '休'
    } else if (nr === '十二月廿九') {
      let tis = moment(`${nyear}${nmonth < 10 ? '0' + nmonth : nmonth}${nday < 10 ?  '0' + nday : nday}`, 'YYYYMMDD').add(1, 'days').format('YYYY-MM-DD').split('-')
      let nd = this.getNongLi(+tis[0], +tis[1], +tis[2])

      if (nd === '正月初一') {
        jr = '除夕'
        sign = '休'
      }
    }

    return {
      nlday: lday,
      nlmonth: lmonth,
      nljq: jq,
      nl: nl,
      jr: jr,
      week: week,
      sign: sign
    }
  }

  getjq = (yyyy, mm, dd) => {
@@ -207,22 +285,6 @@
    return solarTerms
  }

  getStyle = (item ) => {
    if (!item || !item.color) return null
    let style = {background: item.color}
    
    if (/rgb/ig.test(item.color)) {
      try {
        let colors = item.color.match(/\d+/g)
        if ((colors[0] * 0.299 + colors[1] * 0.578 + colors[2] * 0.114) * colors[3] < 192) {
          style.color = '#ffffff'
        }
      } catch (e) {}
    }

    return style
  }

  getDateList = (selectYear) => {
    let datelist = []
    let months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
@@ -232,43 +294,81 @@
    }

    months.forEach(month => {
      let _weeklist = [{week: 1, sublist: []}]
      let _weeklist = []
      let weekday = moment(`${selectYear}${month}01`, 'YYYYMMDD').weekday()
      let end = +moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').format('DD')

      for (let i = 0; i < weekday; i++) {
        _weeklist[0].sublist.push(null)
      let children = []
      if (weekday > 0) {
        let times = moment(`${selectYear}${month}01`, 'YYYYMMDD').subtract(1, 'days').format('YYYY-MM-DD').split('-')
        for (let i = 0; i < weekday; i++) {
          let _day = times[2] - i
          let nl = this.getNongLi(+times[0], +times[1], +_day, weekday - i)
  
          let item = {
            day: _day,
            time: times[0] + times[1] + _day,
            label: _day,
            subData: [],
            $disable: true,
            ...nl
          }
          children.unshift(item)
        }
      }

      for (let i = 1; i <= end; i++) {
        let _day = i < 10 ? `0${i}` : `${i}`
        let nl = this.getNongLi(+selectYear, +month, +_day, children.length + 1)

        let item = {
          day: _day,
          time: selectYear + month + _day,
          nltime: this.getNongLi(+selectYear, +month, +_day),
          label: i,
          subData: []
          subData: [],
          ...nl
        }

        if (_weeklist[_weeklist.length - 1].sublist.length < 7) {
          _weeklist[_weeklist.length - 1].sublist.push(item)
        } else {
          let _week = {week: _weeklist.length + 1, sublist: [item]}
          _weeklist.push(_week)
        children.push(item)

        if (children.length === 7) {
          _weeklist.push({
            children: [...children]
          })
          children = []
        }
      }

      let re = 7 - _weeklist.slice(-1)[0].sublist.length
      for (let i = 0; i < re; i++) {
        _weeklist[_weeklist.length - 1].sublist.push(null)
      let times = moment(`${selectYear}${month}`, 'YYYYMM').endOf('month').add(1, 'days').format('YYYY-MM-DD').split('-')
      let tick = 42 - _weeklist.length * 7 - children.length

      for (let i = 1; i <= tick; i++) {
        let _day = i < 10 ? '0' + i : i
        let nl = this.getNongLi(+times[0], +times[1], +_day, children.length + 1)
  
        let item = {
          day: _day,
          time: times[0] + times[1] + _day,
          label: i,
          subData: [],
          $disable: true,
          ...nl
        }
        children.push(item)

        if (children.length === 7) {
          _weeklist.push({
            children: [...children]
          })
          children = []
        }
      }

      datelist.push({
        month: month,
        time: selectYear + month,
        label: monthName[month],
        sublist: _weeklist,
        children: _weeklist,
        subData: []
      })
    })
@@ -281,20 +381,30 @@
  }

  yearChange = (value) => {
    const { levels, selectMonth } = this.state
    const { selectMonth } = this.state
    let datelist = this.getDateList(value)
    let monthlist = null

    if (levels.includes('month')) {
      monthlist = datelist.filter(item => item.month === selectMonth)[0]
    }
    let monthlist = datelist.filter(item => item.month === selectMonth)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable)

    this.setState({ selectYear: value, datelist, monthlist })
  }

  monthChange = (value) => {
    const { datelist, levels } = this.state

    if (!levels.includes('month')) {
      return
    }

    this.setState({
      level: 'month',
      selectMonth: value,
      monthlist: datelist.filter(item => item.month === value)[0].children.filter(cell => !cell.children[0].$disable || !cell.children[6].$disable)
    })
  }

  render() {
    const { level, selectYear, yearlist, levels, datelist, monthlist } = this.state
    const _levelName = {day: '日', month: '月'}
    const { level, selectYear, selectMonth, yearlist, levels, datelist, monthlist } = this.state
    const _levelName = {day: '日', month: '月', year: '年'}

    return (
      <div className="mk-calendar">
@@ -302,6 +412,20 @@
          <Select value={selectYear} onChange={this.yearChange}>
            {yearlist.map(item => (<Option key={item} value={item}>{item}年</Option>))}
          </Select>
          {level === 'month' ? <Select value={selectMonth} onChange={this.monthChange}>
            <Option value="01">1月</Option>
            <Option value="02">2月</Option>
            <Option value="03">3月</Option>
            <Option value="04">4月</Option>
            <Option value="05">5月</Option>
            <Option value="06">6月</Option>
            <Option value="07">7月</Option>
            <Option value="08">8月</Option>
            <Option value="09">9月</Option>
            <Option value="10">10月</Option>
            <Option value="11">11月</Option>
            <Option value="12">12月</Option>
          </Select> : null}
          {levels.length > 1 ? <Radio.Group value={level} onChange={this.levelChange}>
            {levels.map(item => (<Radio.Button key={item} value={item}>{_levelName[item]}</Radio.Button>))}
          </Radio.Group> : null}
@@ -320,13 +444,13 @@
                    </tr>
                  </thead>
                  <tbody>
                    {item.sublist.map(cell => (
                      <tr key={cell.week}>
                        {cell.sublist.map((d, i) => (
                    {item.children.map((cell, m) => (
                      <tr key={m}>
                        {cell.children.map((d, i) => (
                          <td key={i}>
                            {d ? <div className="day-wrap" style={d.style || null}>
                            <div className={'day-wrap' + (d.$disable ? ' disabled' : '')}>
                              {d.label}
                            </div> : null }
                            </div>
                          </td>
                        ))}
                      </tr>
@@ -336,20 +460,46 @@
              </Col>
            ))}
          </Row> : null}
          {level === 'month' && monthlist ? <Row className="year-calendar">
          {level === 'month' && monthlist ? <div className="month-calendar">
            <table>
              <thead>
                <tr>
                  <th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th>
                </tr>
              </thead>
              <tbody>
                {monthlist.map((cell, m) => (
                  <tr key={m}>
                    {cell.children.map((d, i) => (
                      <td key={i}>
                        <div className={'month-wrap' + (d.$disable ? ' disabled' : '')}>
                          <div className="header">
                            <div className="message">
                              {d.label}
                              <span className={'right' + (d.sign === '休' ? ' danger' : '')}>{d.sign}</span>
                            </div>
                            <div className="message">
                              {d.nl}
                              <span className="right">{d.jr}</span>
                            </div>
                          </div>
                          <ul className="content"></ul>
                        </div>
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>: null}
          {level === 'year' ? <Row className="year-calendar">
            {datelist.map(item => (
              <Col span={8} key={item.month}>
                <div className="year-wrap" style={item.style || null}>
                  <div className="header" style={item.style ? null : {color: '#1890ff'}}>
                <div className="year-wrap">
                  <div className="header" style={{color: '#1890ff'}}>
                    {item.label}
                  </div>
                  <ul className="content">
                    {item.subData.map((data, index) => (
                      <li key={index} className="message">
                        <Badge color={item.style ? (data.color === item.style.background ? '#ffffff' : data.color) : data.color} text={`${data.remark} (${data.startTime} ~ ${data.endTime})`}/>
                      </li>
                    ))}
                  </ul>
                  <ul className="content"></ul>
                </div>
              </Col>
            ))}