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> -->
    <h2>风险日历</h2>
    <view class="today-work-num">
      今日作业人数：
      <text>{{ todayCount }}</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 v-show="days.kjsfx > 0">可接受:{{ days.kjsfx }}</text>
            <text v-show="days.dfx > 0">低:{{ days.dfx }}</text>
            <text v-show="days.zfx > 0">中:{{ days.zfx }}</text>
            <text v-show="days.gfx > 0">高:{{ days.gfx }}</text>
            <text v-show="days.tgfx > 0">特高:{{ days.tgfx }}</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.orgName }}</text>
        </view>

        <view v-for="(i, j) in item.dbs" :key="j" @tap="onViewDayData(i.day)">
          <text class="style_4" v-if="i.kjsfx > 0">可接受：{{ i.kjsfx }}</text>
          <text class="style_3" v-if="i.dfx > 0">低：{{ i.dfx }}</text>
          <text class="style_2" v-if="i.zfx > 0">中：{{ i.zfx }}</text>
          <text class="style_1" v-if="i.gfx > 0">高：{{ i.gfx }}</text>
          <text class="style_1" v-if="i.tgfx > 0">特高：{{ i.tgfx }}</text>
        </view>
      </view>
    </view>

    <!-- 选择天的时候日历 -->
    <view v-if="activeType === 3">
      <view class="day-th">
        <view>工程名称</view>
        <view>作业人数</view>
        <view>
          <text>{{ currentWeekDay }}</text>
          <text>{{ currentDayInfo.day.slice(5) ? currentDayInfo.day.slice(5) : currentDays }}</text>
        </view>
      </view>

      <view class="day-td">
        <view>{{ currentDayInfo.proName || '' }}</view>
        <view @tap="onViewPersonDetails(currentDayInfo)">
          <text style="color: #21a1f4">{{ currentDayInfo.rys || '' }}</text>
        </view>
        <view @tap="onViewPersonDetails(currentDayInfo)">
          <text class="style_4" v-if="currentDayInfo.kjsfx > 0">可接受:{{ currentDayInfo.kjsfx }}</text>
          <text class="style_3" v-if="currentDayInfo.dfx > 0">低:{{ currentDayInfo.dfx }}</text>
          <text class="style_2" v-if="currentDayInfo.zfx > 0">中:{{ currentDayInfo.zfx }}</text>
          <text class="style_1" v-if="currentDayInfo.gfx > 0">高:{{ currentDayInfo.gfx }}</text>
          <text class="style_1" v-if="currentDayInfo.tgfx > 0">特高:{{ currentDayInfo.tgfx }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDayUserApi, getMonthRiskApi, getWeekDataApi, getProFxByDayApi } from '../../../../api/workPlan/homePage'
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: [],
      days: [],
      // currentWeekDay: this.$moment().day(),
      currentDays: this.$moment().format('MM-DD'),
      customDates: {
        '2023-06-15': '自定义内容'
      },
      todayCount: 0,
      currentQueryDay: this.$moment().format('YYYY-MM'),
      currentPramsWeekDay: '',
      currentDayInfo: {
        proName: '',
        day: ''
      }
    }
  },
  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()
    this.getDayUserData()
  },
  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 = []

      new Promise((resolve, reject) => {
        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 > 10 ? i : `0${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),
            kjsfx: 0,
            dfx: 0,
            zfx: 0,
            gfx: 0,
            tgfx: 0,
            currentDay: ''
          })
        }

        resolve()
      }).then(() => {
        this.getMonthRiskData()
      })
    },
    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.currentQueryDay = this.currentYear + '-' + (this.currentMonth + 1)

      console.log('this.currentQueryDay ', this.currentQueryDay)
      this.generateCalendar()
      this.getMonthRiskData()
    },
    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')
      }
      this.getProFxByDayFun()
    },
    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')
      }
      this.currentPramsWeekDay = this.weekStart
      this.getWeekDataFun()
    },
    selectDate(day) {
      this.currentPramsWeekDay = day.currentDay
      this.getWeekDataFun()
      this.weekStart = this.$moment(day.currentDay).startOf('week').format('YYYY-MM-DD')
      this.weekEnd = this.$moment(day.currentDay).endOf('week').format('YYYY-MM-DD')
      this.activeType = 2
    },

    /* 根据周获取数据 */
    async getWeekDataFun() {
      console.log('this.currentPramsWeekDay', this.currentPramsWeekDay)
      const res = await getWeekDataApi({ day: this.currentPramsWeekDay })
      console.log('resssss', res)
      this.weekCompanyList = res.data
    },
    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
      if (type == 1) {
        /* 切换月 */
        this.currentYear = new Date().getFullYear()
        this.currentMonth = new Date().getMonth()
        this.currentQueryDay = this.currentYear + '-' + (this.currentMonth + 1)
        this.generateCalendar()
        // this.getMonthRiskData()
      }
      if (type == 2) {
        /* 切换周 */
        this.weekStart = this.$moment().week(this.$moment().week()).startOf('week').format('YYYY-MM-DD')
        this.weekEnd = this.$moment().week(this.$moment().week()).endOf('week').format('YYYY-MM-DD')
        this.currentPramsWeekDay = this.weekStart
        this.getWeekDataFun()
      }
      if (type == 3) {
        /* 切换日 */
        this.currentDay = this.$moment().format('YYYY-MM-DD')
        this.getProFxByDayFun()
      }
    },
    /* 获取今日作业人数 */
    async getDayUserData() {
      const res = await getDayUserApi({ day: this.$moment().format('YYYY-MM-DD') })
      console.log('今日作业人数---', res)

      this.todayCount = res.count
    },
    /* 获取当月数据 */
    async getMonthRiskData() {
      console.log('this.currentQueryDay', this.currentQueryDay)
      const res = await getMonthRiskApi({ month: this.currentQueryDay })

      if (res.code == 200) {
        const monthList = res.data
        for (let i = 0; i < monthList.length; i++) {
          for (let j = 0; j < this.days.length; j++) {
            if (monthList[i].dayNum == this.days[j].day) {
              const { kjsfx, dfx, zfx, gfx, tgfx } = monthList[i]
              this.days[j].kjsfx = kjsfx
              this.days[j].dfx = dfx
              this.days[j].zfx = zfx
              this.days[j].gfx = gfx
              this.days[j].tgfx = tgfx
              this.days[j].currentDay = monthList[i].day
            }
          }
        }
      }
      console.log('res---', res)
    },
    onViewDayData(day) {
      this.currentDay = day
      this.getProFxByDayFun()
      this.activeType = 3
    },
    /* 获取当日数据 */
    async getProFxByDayFun() {
      const res = await getProFxByDayApi({ day: this.currentDay })
      if (res.data.length > 0) {
        this.currentDayInfo = res.data[0]
        console.log('----------当日数据', res)
      } else {
        this.currentDayInfo = {
          proName: '',
          day: ''
        }
      }
    },
    onViewPersonDetails(info) {
      console.log('跳转前参数', info)
      uni.navigateTo({ url: `/pages/workPlan/workPlan-details/index?query=${JSON.stringify(info)}` })
    }
  }
}
</script>

<style scoped lang="scss">
.calendar {
  width: 100%;
  margin-top: 30rpx;
  /* padding: 20rpx; */

  h2 {
    padding: 18rpx 0;
    font-size: 34rpx;
  }

  .today-work-num {
    width: 100%;
    padding: 10rpx 0;
    text-align: right;
    font-size: 24rpx;
    font-weight: bold;

    text {
      padding-right: 8rpx;
      font-weight: normal;
      color: #4dbfa3;
    }
  }
}
.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;
    height: 160rpx;
    margin-bottom: 30rpx;
    flex-direction: column;
    justify-content: flex-start;

    text {
      width: 100%;
      // height: 20rpx;
      display: block;
      margin-bottom: 3rpx;
      padding-left: 3rpx;
      text-align: left;
      font-size: 24rpx;
      box-sizing: border-box;
      // visibility: hidden;
    }
  }

  .risk-container text:nth-child(1) {
    background-color: #cff2ec;
    border-left: 2px solid #1db691;
  }
  .risk-container text:nth-child(2) {
    background-color: #d8fbff;
    border-left: 2px solid #45e6ed;
  }
  .risk-container text:nth-child(3) {
    background-color: #fde9cf;
    border-left: 2px solid #fa8d0a;
  }
  .risk-container text:nth-child(4) {
    background-color: #ffd5d6;
    border-left: 2px solid #eb363b;
  }
  .risk-container text:nth-child(5) {
    background-color: #ffd5d6;
    border-left: 2px solid #eb363b;
  }
}
.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;
  }
}

.week-td view {
  height: 260rpx;
  padding: 10rpx 0;
  border-bottom: 1px solid #ccc;
}

.week-td view:first-child {
  border-right: 1px solid #ccc;
  justify-content: center !important;
}

.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%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;

    text {
      width: 100%;
      text-align: center;
    }
  }
}

.day-th {
  height: 68rpx;
  // background-color: orange;
}

.day-td {
  height: 300rpx;
  border-bottom: 1px solid #ccc;

  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 {
  justify-content: flex-start;
  padding: 8rpx 0;
}

.day-td view:last-child text {
  width: 100%;
  margin-left: 10rpx;
  margin-bottom: 3rpx;
  text-align: left;
}
</style>