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>
        <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>
      <full-calendar :config="config"
                     :events="fcEvents"
                     ref="calendar"
                     @dayClick="getDay">
      </full-calendar>
    </div>
  </div>
</template>
<script>
  import { FullCalendar }  from 'vue-full-calendar'
  import 'fullcalendar/dist/fullcalendar.css'
  export default {
    components: {
      FullCalendar
    },
    data() {
      return {
        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: 7,
          // allDay:true,
          header: {//表头信息
            left: 'prev, next, today',
            center: 'title',
            right: 'hide, custom'
          },
          dayClick: function getDay(day, jsEvent) {
              alert(day);
              console.log(day);
              console.log(jsEvent);
          },
          eventClick:(day, jsEvent)=> {
            this.$router.push(
              {
                path: 'lessonDetails'
              }
            );
          },
          //eventMouseover: function getDay(day, jsEvent) {
          //  console.log(jsEvent);
          //  console.log(day);
          //},

         },

        lessonList: []
      }
    },
    methods: {
      getDay(day, jsEvent) {
        alert(day);
        console.log(day);
        console.log(jsEvent);
      }
    },
    mounted() {
      this._this = this;
      this.lessonList = require("@/static/lessonList.json");
      for (let i = 0; i < this.lessonList.length; i++) {
        var sdate = new Date(this.lessonList[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(this.lessonList[i].endTime.time);
        let eY = edate.getFullYear() + '-';
        let eM = (edate.getMonth() + 1 < 10 ? '0' + (edate.getMonth() + 1) : edate.getMonth() + 1) + '-';
        let eD = edate.getDate() + ' ';
        this.fcEvents.push({
          title: '名称：' + this.lessonList[i].viwActivityTypeTip,
          start: sY + sM + sD,
          end: eY + eM + eD
        });
        this.fcEvents.push({
          title: '学校：' + this.lessonList[i].schoolName,
          start: sY + sM + sD,
          end: eY + eM + eD
        });
        this.fcEvents.push({
          title: '主讲人：' + this.lessonList[i].employeeName,
          start: sY + sM + sD,
          end: eY + eM + eD
        });
        this.fcEvents.push({
          title: '学科：' + this.lessonList[i].parentCategoryName,
          start: sY + sM + sD,
          end: eY + eM + eD
        });
        this.fcEvents.push({
          title: '课题：' + this.lessonList[i].parentProjectName,
          start: sY + sM + sD,
          end: eY + eM + eD
        });
        this.fcEvents.push({
          title: '时间：' + this.lessonList[i].timeRangeTipHHmm,
          start: sY + sM + sD,
          end: eY + eM + eD
        });
      }
      console.log(this.lessonList);
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }
  
  .main-content {
    background:rgb(248,248,248) !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 /deep/ .full-calendar-header {
      display:none;
    }
    .review-main /deep/ .comp-full-calendar {
      padding:0px;
      max-width:1200px;
    }
    .review-main /deep/ .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 /deep/ .full-calendar-body .dates .week-row .day-cell.today {
      background:#dfe6ec;
    }
    .review-main /deep/ .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 /deep/ .week-row {
      height:140px;
    }
    .review-main /deep/ .events-week {
      height:140px;
    }
    .review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
      background:none;
      height:15px;
    }
    /*.review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .more-link {
      display:none;
    }*/
    .review-main /deep/ .fc-event, .fc-event:hover {
      color:black;
    }
    .review-main /deep/ .fc-day-grid-event .fc-time{
      display:none;
    }
    .review-main /deep/ .fc-event, .fc-event-dot {
      background:none;
    }
    .review-main /deep/ .fc-event {
      border:none;
    }
    .review-main /deep/ .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 /deep/ .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 /deep/ .fc-left {
      float:right;
    }
   .condition-wrap {
    display:flex;
    flex-direction:row;
    justify-content : space-between;
  }

</style>