YNUtdPlatform/pages/workPlan/index/components/calendar.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-show="activeType === 1">
      <view class="weekdays">
        <text v-for="day in weekdays" :key="day">{{ day }}</text>
      </view>
      <view class="days">
        <view
          v-for="day in days"
          :key="day.date"
          :class="{ 'current-month': day.currentMonth, 'other-month': !day.currentMonth }"
          @click="selectDate(day)"
        >
          <text style="font-weight: bold">{{ day.day }}</text>
          <view class="risk-container">
            <text>中:9</text>
            <text>低:30</text>
            <text>可接受:4</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 选择周的时候日历 -->
    <view v-show="activeType === 2">
      <view class="week-th">
        <view v-for="item in weekList" :key="item">
          <text>{{ item.title }}</text>
          <text v-if="item !== '分公司'" style="margin-top: 6rpx">{{ item.time }}</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-show="activeType === 3">
      <view class="day-th">
        <view>工程名称</view>
        <view>作业人数</view>
        <view>
          <text>周二</text>
          <text>10/22</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: [],
      customDates: {
        '2023-06-15': '自定义内容'
      }
    }
  },
  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')
      } else {
        this.currentDay = this.$moment(this.currentDay).subtract(1, 'days').format('YYYY-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)
      // 在这里可以添加选择日期后的逻辑
    },
    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>