530 lines
13 KiB
Vue
530 lines
13 KiB
Vue
<template>
|
||
<view class="calendar">
|
||
<!-- <view class="header">
|
||
<text @click="changeMonth(-1)">《</text>
|
||
<text>{{ currentYear }}年{{ currentMonth + 1 }}月</text>
|
||
<text @click="changeMonth(1)">》</text>
|
||
</view> -->
|
||
|
||
<view class="header">
|
||
<view v-show="activeType === 1">
|
||
<uni-icons type="left" size="16" @click="changeMonth(-1)"></uni-icons>
|
||
<text>{{ currentYear }}-{{ currentMonth + 1 }}</text>
|
||
<uni-icons type="right" size="16" @click="changeMonth(1)"></uni-icons>
|
||
</view>
|
||
<view v-show="activeType === 2">
|
||
<uni-icons type="left" size="16" @click="changeWeek(-1)"></uni-icons>
|
||
<text class="week-container">{{ weekStart }}~{{ weekEnd }}</text>
|
||
<uni-icons type="right" size="16" @click="changeWeek(1)"></uni-icons>
|
||
</view>
|
||
<view v-show="activeType === 3">
|
||
<uni-icons type="left" size="16" @click="changeDay(-1)"></uni-icons>
|
||
<text>{{ currentDay }}</text>
|
||
<uni-icons type="right" size="16" @click="changeDay(1)"></uni-icons>
|
||
</view>
|
||
<view>
|
||
<button :class="{ 'active-button ': activeType === 1 }" @tap="onCheckTime(1)">月</button>
|
||
<button :class="{ 'active-button ': activeType === 2 }" @tap="onCheckTime(2)">周</button>
|
||
<button :class="{ 'active-button ': activeType === 3 }" @tap="onCheckTime(3)">日</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择月的时候的日历 -->
|
||
<view v-if="activeType === 1">
|
||
<view class="weekdays">
|
||
<text v-for="(day, index) in weekdays" :key="index + day">{{ day }}</text>
|
||
</view>
|
||
<view class="days">
|
||
<view
|
||
v-for="(days, index) in days"
|
||
:key="days.date + index"
|
||
:class="{ 'current-month': days.currentMonth, 'other-month': !days.currentMonth }"
|
||
@click="selectDate(days)"
|
||
>
|
||
<text style="font-weight: bold">{{ days.day }}</text>
|
||
<view class="risk-container">
|
||
<text>中:9</text>
|
||
<text>低:30</text>
|
||
<text>可接受:4</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择周的时候日历 -->
|
||
<view v-if="activeType === 2">
|
||
<view class="week-th">
|
||
<view v-for="(item, index) in weekList" :key="index">
|
||
<text>{{ item.title }}</text>
|
||
<text v-if="index !== 0" style="margin-top: 6rpx">{{ weekTimeChange(index) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="week-td" v-for="(item, index) in weekCompanyList" :key="index">
|
||
<view>
|
||
<text style="font-size: 26rpx">{{ item.name }}</text>
|
||
</view>
|
||
<view v-for="(i, j) in item.weekList" :key="j">
|
||
<text class="style_1">高：{{ i.height }}</text>
|
||
<text class="style_2">中：{{ i.height }}</text>
|
||
<text class="style_3">低：{{ i.kjs }}</text>
|
||
<text style="margin-bottom: 60rpx" class="style_4">可接受：{{ i.height }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择天的时候日历 -->
|
||
<view v-if="activeType === 3">
|
||
<view class="day-th">
|
||
<view>工程名称</view>
|
||
<view>作业人数</view>
|
||
<view>
|
||
<text>{{ currentWeekDay }}</text>
|
||
<text>{{ currentDays }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="day-td">
|
||
<view>10kv换东线10kv换东线10kv换东线10kv换东线10kv换东线</view>
|
||
<view>
|
||
<text>3</text>
|
||
</view>
|
||
<view>
|
||
<text class="style_1">中</text>
|
||
<text class="style_2">高</text>
|
||
<text class="style_3">低</text>
|
||
<text class="style_4">可接受</text>
|
||
<text class="style_4">特高</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeType: 1,
|
||
currentYear: new Date().getFullYear(),
|
||
currentMonth: new Date().getMonth(),
|
||
weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||
weekList: [
|
||
{ title: '分公司', time: '' },
|
||
{ title: '周一', time: this.$moment().week(this.$moment().week()).startOf('week').format('MM-DD') },
|
||
{
|
||
title: '周二',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(1, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周三',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(2, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周四',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(3, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周五',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(4, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{
|
||
title: '周六',
|
||
time: this.$moment(this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'))
|
||
.add(5, 'days')
|
||
.format('MM-DD')
|
||
},
|
||
{ title: '周日', time: this.$moment().week(this.$moment().week()).endOf('week').format('MM-DD') }
|
||
],
|
||
weekStart: this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD'),
|
||
weekEnd: this.$moment().week(this.$moment().week()).endOf('week').format('YYYY-MM-DD'),
|
||
currentDay: this.$moment().format('YYYY-MM-DD'),
|
||
weekCompanyList: [
|
||
{
|
||
name: '全部',
|
||
weekList: [
|
||
{
|
||
height: 3,
|
||
kjs: 6
|
||
},
|
||
{
|
||
height: 3,
|
||
kjs: 6
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '分公司一',
|
||
weekList: [
|
||
{
|
||
height: 3,
|
||
kjs: 6
|
||
},
|
||
{
|
||
height: 3,
|
||
kjs: 6
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '分公司二',
|
||
weekList: [
|
||
{
|
||
height: 3,
|
||
kjs: 6
|
||
},
|
||
{
|
||
height: 3,
|
||
kjs: 6
|
||
}
|
||
]
|
||
}
|
||
],
|
||
days: [],
|
||
// currentWeekDay: this.$moment().day(),
|
||
currentDays: this.$moment().format('MM-DD'),
|
||
customDates: {
|
||
'2023-06-15': '自定义内容'
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
weekTimeChange() {
|
||
return index => {
|
||
return this.$moment(this.weekStart)
|
||
.add(index - 1, 'days')
|
||
.format('MM-DD')
|
||
}
|
||
},
|
||
currentWeekDay() {
|
||
return this.onTransWeek(this.$moment(this.currentDay).day())
|
||
}
|
||
},
|
||
mounted() {
|
||
this.generateCalendar()
|
||
},
|
||
methods: {
|
||
generateCalendar() {
|
||
const firstDay = new Date(this.currentYear, this.currentMonth, 1)
|
||
const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)
|
||
const daysInMonth = lastDay.getDate()
|
||
const startingDay = firstDay.getDay()
|
||
|
||
this.days = []
|
||
|
||
for (let i = 0; i < startingDay; i++) {
|
||
const prevMonthLastDay = new Date(this.currentYear, this.currentMonth, 0).getDate()
|
||
this.days.push({
|
||
day: prevMonthLastDay - startingDay + i + 1,
|
||
currentMonth: false,
|
||
date: new Date(this.currentYear, this.currentMonth - 1, prevMonthLastDay - startingDay + i + 1)
|
||
})
|
||
}
|
||
|
||
for (let i = 1; i <= daysInMonth; i++) {
|
||
const date = new Date(this.currentYear, this.currentMonth, i)
|
||
const dateString = `${this.currentYear}-${String(this.currentMonth + 1).padStart(2, '0')}-${String(i).padStart(
|
||
2,
|
||
'0'
|
||
)}`
|
||
this.days.push({
|
||
day: i,
|
||
currentMonth: true,
|
||
date: date,
|
||
customContent: this.customDates[dateString]
|
||
})
|
||
}
|
||
|
||
const remainingDays = 42 - this.days.length
|
||
for (let i = 1; i <= remainingDays; i++) {
|
||
this.days.push({
|
||
day: i,
|
||
currentMonth: false,
|
||
date: new Date(this.currentYear, this.currentMonth + 1, i)
|
||
})
|
||
}
|
||
},
|
||
changeMonth(delta) {
|
||
this.currentMonth += delta
|
||
if (this.currentMonth > 11) {
|
||
this.currentMonth = 0
|
||
this.currentYear++
|
||
} else if (this.currentMonth < 0) {
|
||
this.currentMonth = 11
|
||
this.currentYear--
|
||
}
|
||
this.generateCalendar()
|
||
},
|
||
changeDay(delta) {
|
||
if (delta > 0) {
|
||
this.currentDay = this.$moment(this.currentDay).add(1, 'days').format('YYYY-MM-DD')
|
||
this.currentDays = this.$moment(this.currentDays).add(1, 'days').format('MM-DD')
|
||
} else {
|
||
this.currentDay = this.$moment(this.currentDay).subtract(1, 'days').format('YYYY-MM-DD')
|
||
this.currentDays = this.$moment(this.currentDays).subtract(1, 'days').format('MM-DD')
|
||
}
|
||
},
|
||
changeWeek(delta) {
|
||
if (delta > 0) {
|
||
this.weekStart = this.$moment(this.weekStart).add(7, 'days').format('YYYY-MM-DD')
|
||
this.weekEnd = this.$moment(this.weekEnd).add(7, 'days').format('YYYY-MM-DD')
|
||
} else {
|
||
this.weekStart = this.$moment(this.weekStart).subtract(7, 'days').format('YYYY-MM-DD')
|
||
this.weekEnd = this.$moment(this.weekEnd).subtract(7, 'days').format('YYYY-MM-DD')
|
||
}
|
||
},
|
||
selectDate(day) {
|
||
console.log('选择的日期', day.date)
|
||
// 在这里可以添加选择日期后的逻辑
|
||
},
|
||
onTransWeek(num) {
|
||
let weekStr = ''
|
||
switch (num) {
|
||
case 0:
|
||
weekStr = '周日'
|
||
break
|
||
case 1:
|
||
weekStr = '周一'
|
||
break
|
||
case 2:
|
||
weekStr = '周二'
|
||
break
|
||
case 3:
|
||
weekStr = '周三'
|
||
break
|
||
case 4:
|
||
weekStr = '周四'
|
||
break
|
||
case 5:
|
||
weekStr = '周五'
|
||
break
|
||
case 6:
|
||
weekStr = '周六'
|
||
break
|
||
}
|
||
|
||
return weekStr
|
||
},
|
||
onCheckTime(type) {
|
||
this.activeType = type
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.calendar {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
/* padding: 20rpx; */
|
||
}
|
||
.header {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
view {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.week-container {
|
||
font-size: 24rpx !important;
|
||
font-weight: normal !important;
|
||
}
|
||
}
|
||
|
||
.header view:last-child {
|
||
width: 45%;
|
||
margin-right: 20rpx;
|
||
background-color: #f8f8f8;
|
||
border-radius: 40rpx;
|
||
|
||
button {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
color: #000;
|
||
line-height: 80rpx;
|
||
font-weight: normal;
|
||
font-size: 36rpx;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
button:last-child {
|
||
border-radius: 40rpx;
|
||
}
|
||
button:first-child {
|
||
border-radius: 40rpx;
|
||
}
|
||
|
||
.active-button {
|
||
border-radius: 40rpx;
|
||
background-color: #21a1f4;
|
||
color: #fff;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
}
|
||
.weekdays {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin: 10rpx 0;
|
||
}
|
||
.days {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// border-bottom: 1px solid #ccc;
|
||
|
||
.risk-container {
|
||
width: 100%;
|
||
display: flex;
|
||
margin-bottom: 30rpx;
|
||
flex-direction: column;
|
||
|
||
text {
|
||
width: 100%;
|
||
margin-bottom: 3rpx;
|
||
padding-left: 3rpx;
|
||
text-align: left;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.risk-container text:first-child {
|
||
background-color: #fde9cf;
|
||
border-left: 2px solid #fa8d0a;
|
||
}
|
||
|
||
.risk-container text:nth-child(2) {
|
||
background-color: #cff2ec;
|
||
border-left: 2px solid #1db691;
|
||
}
|
||
.risk-container text:nth-child(3) {
|
||
background-color: #d8fbff;
|
||
border-left: 2px solid #45e6ed;
|
||
}
|
||
}
|
||
.days view {
|
||
width: 14.28%;
|
||
/* height: 80rpx; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.other-month {
|
||
// color: #ccc;
|
||
color: transparent;
|
||
|
||
text {
|
||
border: none !important;
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
.custom-content {
|
||
font-size: 20rpx;
|
||
color: #007aff;
|
||
}
|
||
|
||
.week-th,
|
||
.week-td {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
view {
|
||
width: 12.5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.week-td view text {
|
||
width: 100%;
|
||
margin-bottom: 3rpx;
|
||
padding-left: 2rpx;
|
||
display: inline-block;
|
||
font-size: 22rpx;
|
||
// font-weight: bold;
|
||
}
|
||
|
||
.style_1 {
|
||
background-color: #ffd5d6;
|
||
border-left: 2px solid #f6322a;
|
||
}
|
||
.style_2 {
|
||
background-color: #fee9ca;
|
||
border-left: 2px solid #f58b07;
|
||
}
|
||
.style_3 {
|
||
background-color: #d1f1ec;
|
||
border-left: 2px solid #14bb91;
|
||
}
|
||
.style_4 {
|
||
background-color: #d8fbfc;
|
||
border-left: 2px solid #3eebf7;
|
||
}
|
||
|
||
.day-th,
|
||
.day-td {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
view {
|
||
width: 33.33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.day-td {
|
||
// height: 180rpx;
|
||
|
||
view {
|
||
height: 100%;
|
||
padding: 30rpx 0;
|
||
}
|
||
}
|
||
|
||
.day-th view:nth-child(2) {
|
||
border-left: 1px solid #ccc;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
.day-td view:nth-child(2) {
|
||
border-left: 1px solid #ccc;
|
||
border-right: 1px solid #ccc;
|
||
}
|
||
|
||
.day-td view:last-child text {
|
||
width: 100%;
|
||
margin-left: 10rpx;
|
||
margin-bottom: 3rpx;
|
||
text-align: left;
|
||
}
|
||
</style>
|