From 1ed039c656453814a2357671fa81bdb4ad0306fb Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 07 七月 2023 09:25:37 +0800
Subject: [PATCH] Merge branch 'develop'
---
src/menu/components/calendar/board/index.jsx | 288 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 219 insertions(+), 69 deletions(-)
diff --git a/src/menu/components/calendar/board/index.jsx b/src/menu/components/calendar/board/index.jsx
index 5c1d5f5..4796157 100644
--- a/src/menu/components/calendar/board/index.jsx
+++ b/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>
))}
--
Gitblit v1.8.0