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

<template>
  <div id="app">
    <div class="banner">
      <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557306525954" />
    </div>
    <div class="details-container">
      <div class="activity-brief center-row">
        <div class="activity-brief-left">
          <img src="../../assets/image/lessonCover.png" width="100%" />
        </div>
        <div class="activity-brief-right">
          <div class="activity-brief-title">
            <span>{{activityInfo.name}}</span>
            <span class="status" style="background: #999;">{{activityInfo.activityStatusTip}}</span>
            <Button type="primary" size="large" @click="gotoVideo">进入点播</Button>
          </div>
          <div class="activity-brief-info center-row">
            <div class="brief-info-left">
              <div class="items"><p class="item">主讲单位：<span style="font-weight:bold;color:#000">{{activityInfo.ownUnit}}</span></p></div>
              <div class="items"><p class="item">主讲人：<span style="font-weight:bold;color:#000">{{activityInfo.speaker}}</span></p></div>
              <div class="items"><p class="item">学校：<span style="font-weight:bold;color:#000">{{activityInfo.schoolName}}</span></p></div>
              <div class="items"><p class="item">年级：<span style="font-weight:bold;color:#000">{{activityInfo.parentGradeName}}</span></p></div>
              <div class="items"><p class="item">学科：<span style="font-weight:bold;color:#000">{{activityInfo.parentCategoryName}}</span></p></div>
              <div class="items"><p class="item">课题：<span style="font-weight:bold;color:#000">{{activityInfo.parentProjectName}}</span></p></div>
            </div>
            <div class="brief-info-left">
              <div class="items"><p class="item">活动时间：<span style="font-weight:bold;color:#000">{{activityInfo.timeRangeTip}}</span></p></div>
              <div class="items"><p class="item">授课平台：<span style="font-weight:bold;color:#000">{{activityInfo.parentTeachePlateName}}</span></p></div>
              <div class="items"><p class="item">业务荣誉：<span style="font-weight:bold;color:#000">{{activityInfo.workHonor}}</span></p></div>
            </div>

          </div>
        </div>
      </div>
      <div class="activity-details center-row">
        <div class="details-left center-col">
          <div class="title-tip">
            <p class="title">观课用户<span>VIEW CLASS USER</span></p>
            <div class="content">
              <p style="margin:15px">专家：刘斌</p>
              <p style="margin:15px">成员：公开参与</p>
            </div>
          </div>
          <div class="review-attachment">
            <p class="title">资源下载<span>ATTACHMENT</span></p>
            <div class="content">
              <div class="attach attachicon-2" v-for="(item,index) in attachmentsList" :key="index">
                <a :href="item.fileNameUri" :download="item.fileName" :title="item.fileName">{{item.fileName}}</a>
                <span style="float: right; font-size: 13px;">&nbsp;{{item.fileSizeTip}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="details-right center-col">
          <div class="description title-tip" style="margin-top:0">
            <p class="title">
              观课统计
              <span>VIEW CLASS STATISTICS</span>
            </p>
            <div class="content">
              <div id="views" style="width:100%; height:500px;"></div>
              <div id="comments" style="width:100%; height:500px;"></div>
            </div>
          </div>
          <div class="guide title-tip">
            <p class="title">
              观点评论
              <span>REVIEW</span>
            </p>
            <div class="content">
              <p class="comment-item" v-for="item in commentList" ><span style="color:#666">{{item.employeeName}}</span> : {{item.reviewContent}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import lessonInfo from '@/static/lessonDetails.json'
  export default {
    components: {
    },
    data() {
      return {
        reviewAcList: [],
        attachmentsList: [],
        commentList:[],
        activityInfo: {}
      }
    },

    created() {
      this.attachmentsList = lessonInfo.attachments;
      this.activityInfo = lessonInfo.data;
      this.commentList = lessonInfo.commentList;

    },
    methods: {
      gotoVideo() {
        this.$router.push(
          {
            path:'commentVideo'
          }
        );
      }
    },
    mounted() {
      let myChart = this.$echarts.init(document.getElementById('views'));
      let schoolList = lessonInfo.views.map(a => a.schoolName);
      let viewsList = lessonInfo.views.map(a => a.viewCount);

      let option = {
        color: ['#ff8745'],
        tooltip: {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: schoolList,
          axisLabel: {
            interval: 0,
            rotate: 40,
            formatter: function (value) {
              return (value.length > 6 ? (value.slice(0,6)+"...") : value )
            },  
          },
          splitLine: {    // gird 区域中的分割线
            show: false,   // 是否显示
            lineStyle: {
              color: '#666',
              width: 0,
              type: 'dashed'
            }
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          height: '400px',

          containLabel: true
       },
        yAxis: {
          name: "点击量",
          splitLine: {    // gird 区域中的分割线
            show: false,   // 是否显示
            lineStyle: {
              color: '#666',
              width: 1,
              type: 'dashed'
            }
          },
        },
        series: [{
          name: '点击量',
          type: 'bar',
          barWidth: 20,//柱图宽度
          data: viewsList
        }]
      };

      myChart.setOption(option);

      let comments = this.$echarts.init(document.getElementById('comments'));
      let commentList = lessonInfo.comments.map(a => a.commentCount);

      let commentsOption = {
        color: ['#ff8745'],
        tooltip: {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: schoolList,
          axisLabel: {
            interval: 0,
            rotate: 40,
            formatter: function (value) {
              return (value.length > 6 ? (value.slice(0,6)+"...") : value )
            },  
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          height:'400px',
          containLabel: true
       },
        yAxis: {
          name: "评论数",
          splitLine: {    // gird 区域中的分割线
            show: false,   // 是否显示
            lineStyle: {
              color: '#666',
              width: 1,
              type: 'dashed'
            }
          },
        },
        series: [{
          name: '评论数',
          type: 'bar',
          barWidth: 20,//柱图宽度
          data: commentList
        }]
      };

      comments.setOption(commentsOption);
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }

  .main-content {
    background: rgb(248,248,248) !important;
  }

  .center-row {
    display: flex;
    flex-direction: row;
  }

  .center-col {
    display: flex;
    flex-direction: column;
  }

  .banner {
    width: 100%;
    margin-top: 80px;
  }

    .banner img {
      width: 100%;
      min-width: 1280px;
    }

  .details-container {
    position: relative;
    width: 1200px;
    margin: 80px auto;
    margin-top: -50px;
    z-index: 999;
    display: flex;
    flex-direction: column;
  }

    .details-container .activity-brief {
      width: 100%;
      background: #fff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

      .details-container .activity-brief .activity-brief-left {
        width: 30%;
        height: 100%;
        padding: 40px 20px 0 20px;
      }

      .details-container .activity-brief .activity-brief-right {
        width: 70%;
        height: 100%;
        padding: 20px;
      }

    .details-container .activity-brief-title {
      font-size: 26px;
      font-weight: bolder;
      color: #333;
      padding: 5px 20px;
      margin-left: 10px;
      border-bottom: 1px solid #f6f6f6;
    }

      .details-container .activity-brief-title .status {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        color: #fff;
        padding: 1px 6px;
        vertical-align: top;
        margin-top: 6px;
        background-color: #53c766;
        border-radius: 3px;
      }

      .details-container .activity-brief-title .ivu-btn {
        width: 120px;
        height: 38px;
        margin-left: 20px;
        margin-bottom: 10px;
      }

    .details-container .brief-info-left {
      width: 50%;
    }

      .details-container .brief-info-left .items {
        margin: 5px;
      }

        .details-container .brief-info-left .items .item {
          font-size: 14px;
          color: #666;
        }

        .details-container .brief-info-left .items .item2 {
          font-size: 20px;
          color: #ffa853;
        }

        .details-container .brief-info-left .items .tips {
          font-size: 14px;
          color: #bbb;
        }

    .details-container .activity-details {
      width: 100%;
      margin-top: 20px;
    }

      .details-container .activity-details .details-left {
        width: 30%;
        height: 100%;
      }

      .details-container .activity-details .details-right {
        width: 70%;
        height: 100%;
        margin-left: 20px;
      }

        .details-container .activity-details .details-right .title-tip {
          margin-top: 20px;
        }

    .details-container .title-tip {
      padding: 20px;
      background: #fff;
    }

    .details-container .review-attachment {
      padding: 20px;
      margin-top: 20px;
      background: #fff;
    }

    .details-container .title {
      color: #33aafe;
      font-size: 16px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f6f6f6;
    }

      .details-container .title span {
        color: #ccc;
        font-size: 14px;
        margin-left: 8px;
      }

    .details-container .title-tip .content {
      color: #999;
      font-size: 14px;
      margin-top: 15px;
    }

    .details-container .details-left .review-attachment .attach {
      height: 40px;
      line-height: 40px;
      padding-left: 40px;
      margin-bottom: 14px;
      margin-top: 10px;
    }

      .details-container .details-left .review-attachment .attach a {
        display: inline-block;
        text-decoration: none;
        font-size: 13px;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 160px;
        text-decoration: underline;
      }

    .details-container .details-left .review-attachment .attachicon-2 {
      background: url("http://hystkj-oss.oss-cn-shenzhen.aliyuncs.com/icon.png") no-repeat;
    }

    .details-container .comment-item {
        line-height: 40px;
        color: #333;
        font-weight:bold;
        border-bottom: 1px solid #f6f6f6;
    }
</style>