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>


      <Tooltip :content="eventContent" placement="right" transfer max-width="300px">
        <full-calendar :config="config"
                       :events="fcEvents"
                       ref="calendar"
                       @dayClick="getDay">
        </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,
          // allDay:true,
          header: {//表头信息
            left: 'prev, next, today',
            center: 'title',
            right: 'hide, custom'
          },
          dayClick: function getDay(day, jsEvent) {
            console.log(day);
            console.log(jsEvent);
          },
          eventClick: (day, jsEvent) => {
            this.$router.push({ path: 'lessonDetails' });
          },
          eventMouseover: function (event, jsEvent, view) {
            self.eventContent = event.title;
          },
        },
        lessonList: []
      }
    },

    methods: {
      getDay(event, jsEvent, view) {
      },
    },
    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() + ' ';

        let dateArr = this.fcEvents.map(item => item.start);

        //如果已存在
        if (dateArr.indexOf(sY + sM + sD) == -1) {
          this.fcEvents.push({
            title: '名称：' + this.lessonList[i].name
              + ' \n 学校：' + this.lessonList[i].schoolName
              + ' \n 主讲人：' + this.lessonList[i].employeeName
              + ' \n 学科：' + this.lessonList[i].parentCategoryName
              + ' \n 课题：' + this.lessonList[i].parentProjectName
              + ' \n 时间：' + this.lessonList[i].timeRangeTipHHmm
              + ' \n ',
            start: sY + sM + sD,
            end: eY + eM + eD
          });
        } else {
          let index = dateArr.indexOf(sY + sM + sD);
          let newEvent = {
            title: this.lessonList[i].name + ' \n\n 等多个活动',
            start: sY + sM + sD,
            end: eY + eM + eD,
            renderHeader: (h, params) => {
              return h('div', [
                h('span', params.column.title),
                h('Tooltip', {
                  props: {
                    content: '您希望展示的提示语',
                    transfer: true,
                    maxWidth: '220',
                    theme: 'light'
                  }
                }, [
                    h('Icon', {
                      props: {
                        type: 'md-help-circle',
                        color: "#c8c8c8",
                        size: "20"
                      },
                      class: { iconClass: true }
                    })
                  ]),
              ])
            }
          }
          this.fcEvents.splice(index, 1, newEvent);
        }
      }
    }
  }
</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-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>