LiveBroadcast.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <div class="container">
  3. <div class="review-main">
  4. <div class="condition-wrap">
  5. <div class="condition-wrap-left">
  6. <Button type="primary">新媒体新技术</Button>
  7. <Button type="success">创新实验室</Button>
  8. </div>
  9. <div class="condition-wrap-right">
  10. <Select v-model="yearDefault" size="large" style="width:100px">
  11. <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
  12. </Select>
  13. <Select v-model="monthDefault" size="large" style="width:100px">
  14. <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
  15. </Select>
  16. <Button size="large">返回今天</Button>
  17. </div>
  18. </div>
  19. <full-calendar :events="fcEvents" lang="zh" @dayClick ="getDay" :config="config" ></full-calendar>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import FullCalendar from 'vue-fullcalendar'
  25. export default {
  26. components: {
  27. FullCalendar
  28. },
  29. data() {
  30. return {
  31. yearDefault:'2019年',
  32. years: [
  33. "2012年",
  34. "2013年",
  35. "2014年",
  36. "2015年",
  37. "2016年",
  38. "2017年",
  39. "2018年",
  40. "2019年",
  41. "2020年",
  42. "2021年",
  43. "2022年",
  44. "2023年",
  45. "2024年",
  46. ],
  47. monthDefault: '1月',
  48. monthes: [
  49. '1月',
  50. '2月',
  51. '3月',
  52. '4月',
  53. '5月',
  54. '6月',
  55. '7月',
  56. '8月',
  57. '9月',
  58. '11月',
  59. '12月',
  60. ],
  61. fcEvents: [
  62. ],
  63. config: {
  64. firstDay: '0',//以周日为每周的第一天
  65. // weekends: true,//是否在日历中显示周末
  66. locale: 'zh-cn',//语言
  67. defaultView: 'month',//默认按月显示
  68. height: 'auto',//高度
  69. fixedWeekCount: false,//是否固定显示六周
  70. // weekMode:"liquid",//周数不定,每周的高度可变,整个日历高度不变
  71. allDaySlot: false,
  72. // allDay:true,
  73. header: {//表头信息
  74. left: 'prev, next, today',
  75. center: 'title',
  76. right: 'hide, custom'
  77. },
  78. },
  79. lessonList:[]
  80. }
  81. },
  82. methods: {
  83. getDay(day, jsEvent) {
  84. console.log(day);
  85. console.log(jsEvent);
  86. }
  87. },
  88. mounted() {
  89. this.lessonList = require("@/static/lessonList.json");
  90. for (let i = 0; i < this.lessonList.length; i++) {
  91. var sdate = new Date(this.lessonList[i].startTime.time);
  92. let sY = sdate.getFullYear() + '-';
  93. let sM = (sdate.getMonth() + 1 < 10 ? '0' + (sdate.getMonth() + 1) : sdate.getMonth() + 1) + '-';
  94. let sD = sdate.getDate() + ' ';
  95. var edate = new Date(this.lessonList[i].endTime.time);
  96. let eY = edate.getFullYear() + '-';
  97. let eM = (edate.getMonth() + 1 < 10 ? '0' + (edate.getMonth() + 1) : edate.getMonth() + 1) + '-';
  98. let eD = edate.getDate() + ' ';
  99. this.fcEvents.push({
  100. title:'名称:'+this.lessonList[i].viwActivityTypeTip,
  101. start: sY + sM + sD,
  102. end: eY + eM + eD
  103. });
  104. this.fcEvents.push({
  105. title:'学校:'+this.lessonList[i].schoolName,
  106. start: sY + sM + sD,
  107. end: eY + eM + eD
  108. });
  109. this.fcEvents.push({
  110. title:'主讲人:'+this.lessonList[i].employeeName,
  111. start: sY + sM + sD,
  112. end: eY + eM + eD
  113. });
  114. this.fcEvents.push({
  115. title:'学科:'+this.lessonList[i].parentCategoryName,
  116. start: sY + sM + sD,
  117. end: eY + eM + eD
  118. });
  119. this.fcEvents.push({
  120. title:'课题:'+this.lessonList[i].parentProjectName,
  121. start: sY + sM + sD,
  122. end: eY + eM + eD
  123. });
  124. this.fcEvents.push({
  125. title:'时间:'+this.lessonList[i].timeRangeTipHHmm,
  126. start: sY + sM + sD,
  127. end: eY + eM + eD
  128. });
  129. }
  130. console.log(this.lessonList);
  131. }
  132. }
  133. </script>
  134. <style scoped>
  135. html, body, #app {
  136. height: 100% !important;
  137. user-select: none;
  138. }
  139. .main-content {
  140. background:rgb(248,248,248) !important;
  141. }
  142. .container {
  143. width: 1200px;
  144. margin: 100px auto;
  145. display:flex;
  146. flex-direction:row;
  147. justify-content:space-between;
  148. }
  149. .review-main {
  150. background:#fff;
  151. width:100%;
  152. padding:10px 25px;
  153. }
  154. .review-main /deep/ .full-calendar-header {
  155. display:none;
  156. }
  157. .review-main /deep/ .comp-full-calendar {
  158. padding:0px;
  159. max-width:1200px;
  160. }
  161. .review-main /deep/ .weeks {
  162. background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
  163. background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
  164. background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
  165. background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
  166. height: 40px;
  167. line-height: 40px;
  168. }
  169. .review-main /deep/ .full-calendar-body .dates .week-row .day-cell.today {
  170. background:#dfe6ec;
  171. }
  172. .review-main /deep/ .week-row > .not-cur-month {
  173. background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法(必须放在最后) */
  174. background-size: 20px 20px;
  175. }
  176. .review-main /deep/ .week-row {
  177. height:140px;
  178. }
  179. .review-main /deep/ .events-week {
  180. height:140px;
  181. }
  182. .review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item {
  183. background:none;
  184. }
  185. /*.review-main /deep/ .full-calendar-body .dates .dates-events .events-week .events-day .event-box .more-link {
  186. display:none;
  187. }*/
  188. .condition-wrap {
  189. display:flex;
  190. flex-direction:row;
  191. justify-content : space-between;
  192. }
  193. </style>