TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/LiveBroadcast.vue

<template>
  <div class="container">
    <div class="review-main">
      <div class="condition-wrap">
        <!--<div class="condition-wrap-left">
    <Button type="primary">新媒体新技术</Button>
    <Button type="success">创新实验室</Button>
  </div>-->

        <Select v-model="selectSchool" style="width:200px" @on-change="chooseSchool">
          <Option v-for="(item,index) in schoolList" :value="item" :key="index">{{ item }}</Option>
        </Select>
        <div class="condition-wrap-right" style="display:none;">
          <Select v-model="yearDefault" size="large" style="width:100px">
            <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
          </Select>
          <Select v-model="monthDefault" size="large" style="width:100px">
            <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
          </Select>
          <Button size="large">返回今天</Button>
        </div>
      </div>


      <Tooltip :content="eventContent" placement="right" transfer max-width="300px">
        <full-calendar :config="config"
                       :events="fcEvents"
                       ref="calendar">
        </full-calendar>
      </Tooltip>
      <br><br>
    </div>
  </div>
</template>
<script>
  import { FullCalendar } from 'vue-full-calendar'
  import 'fullcalendar/dist/fullcalendar.css'
  export default {
    components: {
      FullCalendar
    },
    data() {
      const self = this;
      return {
        eventContent: "",
        yearDefault: '2019年',
        years: [
          "2012年",
          "2013年",
          "2014年",
          "2015年",
          "2016年",
          "2017年",
          "2018年",
          "2019年",
          "2020年",
          "2021年",
          "2022年",
          "2023年",
          "2024年",
        ],
        monthDefault: '1月',
        monthes: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '11月',
          '12月',
        ],
        _this: null,
        fcEvents: [],
        config: {
          firstDay: '7',//以周日为每周的第一天
          // weekends: true,//是否在日历中显示周末
          locale: 'zh-cn',//语言
          defaultView: 'month',//默认按月显示
          height: 'auto',//高度
          fixedWeekCount: false,//是否固定显示六周
          // weekMode:"liquid",//周数不定，每周的高度可变，整个日历高度不变
          allDaySlot: false,
          eventLimit: 1,
          defaultDate: '2019-05-01',
          // allDay:true,
          header: {//表头信息
            left: 'prev, next',
            center: 'title',
            right: 'hide, custom'
          },
          dayClick: function getDay(day, jsEvent) {
            console.log(day);
            console.log(jsEvent);
          },
          eventClick: () => {
            sessionStorage.setItem('_lesson_rowKey', 1);
            this.$router.push({ path: 'lessonDetails' });
          },
          eventMouseover: function (event, jsEvent, view) {
            self.eventContent = event.title;
          },
        },
        lessonList: [],
        schoolList: [],
        allList:[],
        selectSchool:""
      }
    },

    created() {
      this.allList = require("@/static/lessonList.json");
      this.lessonList = require("@/static/lessonList.json");

    },

    methods: {
      chooseSchool(val) {
        if (val == "全部课程") {
          this.initCalendar(this.allList);
        } else {
          this.$nextTick(() => {
            this.initCalendar(this.allList.filter(item => item.schoolName == val));
          })
        }

      },
      initCalendar(arr) {
        this.fcEvents = [];
        this._this = this;
        for (let i = 0; i < arr.length; i++) {
          var sdate = new Date(arr[i].startTime.time);
          let sY = sdate.getFullYear() + '-';
          let sM = (sdate.getMonth() + 1 < 10 ? '0' + (sdate.getMonth() + 1) : sdate.getMonth() + 1) + '-';
          let sD = sdate.getDate() + ' ';
          var edate = new Date(arr[i].endTime.time);
          let eY = edate.getFullYear() + '-';
          let eM = (edate.getMonth() + 1 < 10 ? '0' + (edate.getMonth() + 1) : edate.getMonth() + 1) + '-';
          let eD = edate.getDate() + ' ';
          let dateArr = this.fcEvents.map(item => item.start);

          //如果已存在
          if (dateArr.indexOf(sY + sM + sD) == -1) {
            this.fcEvents.push({
              title: '名称：' + arr[i].name
                + ' \n 学校：' + arr[i].schoolName
                + ' \n 主讲人：' + arr[i].employeeName
                + ' \n 学科：' + arr[i].parentCategoryName
                + ' \n 课题：' + arr[i].parentProjectName
                + ' \n 时间：' + arr[i].timeRangeTipHHmm
                + ' \n ',
              start: sY + sM + sD,
              end: eY + eM + eD
            });
          } else {
            let index = dateArr.indexOf(sY + sM + sD);
            let newEvent = {
              title: arr[i].name + ' \n\n 等多个活动',
              start: sY + sM + sD,
              end: eY + eM + eD,
            }
            this.fcEvents.splice(index, 1, newEvent);
          }
        }
        }
      },
    mounted() {
        this.schoolList = [...new Set(this.allList.map(item => item.schoolName))];
        this.lessonList = this.allList;
        this.schoolList.unshift("全部课程");
        this.selectSchool = this.schoolList[0];
        this.initCalendar(this.lessonList);
    }
  }
</script>
<style>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }

  .main-content {
    background: rgb(241,242,243) !important;
  }

  .container {
    width: 1200px;
    margin: 100px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .review-main {
    background: #fff;
    width: 100%;
    padding: 10px 25px;
  }

    .review-main  .full-calendar-header {
      display: none;
    }

    .review-main  .comp-full-calendar {
      padding: 0px;
      max-width: 1200px;
    }

    .review-main  .weeks {
      background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
      background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
      height: 40px;
      line-height: 40px;
    }

    .review-main  .full-calendar-body .dates .week-row .day-cell.today {
      background: #dfe6ec;
    }

    .review-main  .week-row > .not-cur-month {
      background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法（必须放在最后） */
      background-size: 20px 20px;
    }

    .review-main  .week-row {
      height: 140px;
    }

    .review-main  .events-week {
      height: 140px;
    }

    .review-main  .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
      background: none;
      height: 15px;
    }
    /*.review-main  .full-calendar-body .dates .dates-events .events-week .events-day .event-box .more-link {
      display:none;
    }*/
    .review-main  .fc-event, .fc-event:hover {
      color: black;
    }

    .review-main  .fc-day-grid-event .fc-time {
      display: none;
    }

    .review-main  .fc-event, .fc-event-dot {
      background: none;
    }

    .review-main .fc-week {
      min-height:120px;
      height:120px !important;
    }

    .review-main  .fc-event {
      border: none;
    }

    .review-main  .fc-content {
      padding-left: 5px;
    }

    .review-main  .fc-title {
      width: 140px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .review-main  .fc-day-header {
      background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
      background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
      height: 40px;
      line-height: 40px;
    }

    .review-main  .fc-other-month {
      background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法（必须放在最后） */
      background-size: 20px 20px;
    }

    .review-main  .fc-left {
      float: right;
    }

    .review-main  .fc-widget-content:hover {
      /*background:#eee;*/
    }

  .condition-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>