dy-admin-manager/src/views/teacherManager/teacherDetail/components/weeklyCalendar.vue

<template>
  <div class="m-container">
    <el-date-picker v-model="week"
                    type="week"
                    format="yyyy-MM 第 WW 周"
                    placeholder="选择周"
                    @change="changeWeek"
                    :picker-options="{
                      firstDayOfWeek:1
                    }">
    </el-date-picker>
    <div class="timeWrap">
      <div class="weekDotList">
        <div class="weekDot"
             @click="setWeekDotList(item,index)"
             :class="index==active?'active':''"
             v-for="(item,index) in weekList"
             :key='index'>
          <p class="week">{{item.week}}</p>
          <p class="date">{{item.dateStr}}</p>
        </div>
      </div>
      <div class="timer">
        <div class="imgWrap"
             v-drag>
          <img :src="timerImg">
          <div v-for="(item,index) in newList"
               :key="index+'new'">
            <el-popover placement="top"
                        trigger="hover">
              <p>课程名称:{{item.name}}</p>
              <p>上课时间:{{item.startClassTime.split(' ')[1].substring(0,5)+'~'+item.endClassTime.split(' ')[1].substring(0,5)}}</p>
              <div slot="reference"
                   :style="item.style"
                   class="newDot dot">网</div>
            </el-popover>
          </div>
          <div v-for="(item,index) in vipList"
               :key="index+'vip'">
            <el-popover placement="top"
                        trigger="hover">
              <p>课程名称:{{item.name}}</p>
              <p>上课时间:{{item.startClassTime.split(' ')[1].substring(0,5)+'~'+item.endClassTime.split(' ')[1].substring(0,5)}}</p>
              <div slot="reference"
                   :style="item.style"
                   class="vipDot dot">vip</div>
            </el-popover>
          </div>
          <div v-for="(item,index) in teamList"
               :key="index+'team'">
            <el-popover placement="top"
                        trigger="hover">
              <p>课程名称:{{item.name}}</p>
              <p>上课时间:{{item.startClassTime.split(' ')[1].substring(0,5)+'~'+item.endClassTime.split(' ')[1].substring(0,5)}}</p>
              <div slot="reference"
                   :style="item.style"
                   class="teamDot dot">乐</div>
            </el-popover>
          </div>

        </div>
      </div>
    </div>
    <resetList :startTimes="tableTime"
               @getCalendatList='getCalendatList' />
  </div>
</template>
<script>
import { superFindCourseSchedules } from "@/api/buildTeam";
import { setDate, getNowDateAndSunday, getNowDateAndMonday, getWeekDay } from "@/utils/date"
import resetList from './resetComponent'
export default {
  components: { resetList },
  data () {
    return {
      timerImg: require('@/views/teacherManager/teacherDetail/components/weekUitl/weekTimer.png'),
      active: -1,
      week: new Date(),
      weekList: [],
      startTime: '',
      endTime: '',
      vipList: [],
      teamList: [],
      newList: [],
      weekDay: [
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日",
      ],
      tableTime: ''
    }
  },
  mounted () {
    this.getCalendatList()
    this.setWeekList()
  },
  methods: {
    setStartTimeAndEndTime (date) {
      console.log(setDate(date))
      this.startTime = getNowDateAndMonday(setDate(date))
      if (this.active === -1) {
        this.active = 0
        this.tableTime = this.startTime;
      }

      this.endTime = getNowDateAndSunday(setDate(date))
    },
    getCalendatList () {
      this.teacherIdList = this.$route.query.teacherId
      // 获取本周的周一和周日
      this.setStartTimeAndEndTime(this.week)
      superFindCourseSchedules({ teacherIdList: this.teacherIdList, rows: 9999, page: 1, startTime: this.startTime, endTime: this.endTime }).then(res => {
        if (res.code === 200) {
          this.dataList = res.data.rows
          // 过滤数据
          this.vipList = []
          this.teamList = []
          this.newList = []
          for (let i in this.dataList) {
            this.setCourseTime(this.dataList[i])
            if (this.dataList[i].groupType === 'VIP') {
              this.vipList.push(this.dataList[i])
            }
            if (this.dataList[i].groupType === 'MUSIC') {
              this.teamList.push(this.dataList[i])
            }
            if (this.dataList[i].groupType === 'PRACTICE') {
              this.newList.push(this.dataList[i])
            }
          }
        }
      })
    },
    setCourseTime (row) {
      let startMinutes = this.getMinutes(row.startClassTime.split(' ')[1])
      let endMinutes = this.getMinutes(row.endClassTime.split(' ')[1])
      let width = (endMinutes - startMinutes) * 1.8
      let left = startMinutes - 240 > 0 ? (startMinutes - 240) * 1.8 + 17 : 17
      let top = getWeekDay(row.classDate) === 1 ? 40 : (getWeekDay(row.classDate) * 60) - 16
      row.style = {
        'width': width + 'px',
        'top': top + 'px',
        'left': left + 'px'
      }
    },
    getMinutes (str) {
      return parseInt(str.split(':')[0]) * 60 + parseInt(str.split(':')[1])
    },
    setWeekList () {

      this.weekList = []
      let startTime = new Date(this.startTime.replace(/-/g, "/"))
      startTime.setTime(startTime.getTime() - 1000 * 60 * 60 * 24)
      for (let i = 0; i < 7; i++) {
        startTime.setTime(startTime.getTime() + 1000 * 60 * 60 * 24)
        // startTime.setTime(startTime.getTime() - 1000 * 60 * 60 * 24)
        this.weekList.push({
          week: this.weekDay[i],
          dateStr: startTime.getMonth() + 1 + '月' + startTime.getDate() + '日',
          date: setDate(startTime)
        })
      }
    },
    setWeekDotList (item, index) {
      this.active = index;
      this.tableTime = item.date
    },
    changeWeek (val) {
      this.week = val;
      this.active = -1;
      this.getCalendatList()
      this.setWeekList()
    },

  },
  directives: {
    drag (el) {
      // 拖拽大图片移动
      let oDiv = el; //当前元素
      let self = this; //上下文
      oDiv.onmousedown = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        let wrapW = document.querySelector('.timer').offsetWidth
        let imgW = document.querySelector('.imgWrap').offsetWidth
        document.onmousemove = function (e) {
          //通过事件委托，计算移动的距离
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          //移动当前元素

          if (l > 0) {
            l = 0;
          } else if (l < -(imgW - wrapW) + 2) {
            l = -(imgW - wrapW) + 2
          }

          oDiv.style.left = l + "px";
          // oDiv.style.top = t + "px";
        }
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    }
  }
}
</script>
<style lang="scss" scoped>
.timeWrap {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  .timer {
    width: 1478px;
    overflow: auto;
    position: relative;
    .imgWrap {
      width: 2194px;
      position: relative;
      z-index: 1;
      img {
        width: 2194px;
        position: relative;
        z-index: 1;
      }
      .dot {
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        user-select: none;
        cursor: pointer;
        position: absolute;
        min-width: 30px;
        height: 25px;
        color: #fff;
        font-size: 14px;
        line-height: 25px;
        padding-left: 5px;
        z-index: 10;
        top: 40px;
        right: 0;
        border-radius: 3px;
      }
      .vipDot {
        background: linear-gradient(
          to left,
          rgba(42, 174, 166, 0.75),
          rgba(42, 174, 166, 1)
        );
      }
      .newDot {
        background: linear-gradient(
          to left,
          rgba(52, 177, 246, 0.75),
          rgba(52, 177, 246, 1)
        );
      }
      .teamDot {
        background: linear-gradient(
          to left,
          rgba(90, 121, 246, 0.75),
          rgba(90, 121, 246, 1)
        );
      }
    }
  }
  .weekDotList {
    margin: 24px 10px 0 0;
    width: 70px;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .weekDot {
      cursor: pointer;
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      user-select: none;
      width: 70px;
      height: 60px;
      background-color: #fff;
      color: #fff;
      padding: 10px 0 10px 10px;
      border-radius: 5px;
      color: #000;
      p {
        font-size: 12px;
        line-height: 20px;
      }
      .week {
        font-size: 12px;
        color: #999;
      }
      .date {
        font-size: 12px;
        color: #333;
      }
    }
    .weekDot.active {
      background-color: rgba(19, 129, 122, 1);
      color: #fff !important;
      border-radius: 5px;
      .week {
        font-size: 12px;
        color: #fff;
      }
      .date {
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
</style>