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

<template>
  <div class="video-page">
    <!--<div class="video-title">
      <h3 class="video-title-h3">12月03日直播</h3>
    </div>-->
    <div class="video-info">
      <div class="comment-video-src">
        <div>
          <p style=" font-size: 14px; margin-bottom: 20px;"><span class="title-header">标题 : <span class="title-content">创新实验室（学科教室）课例20190508直播</span></span> <span class="title-header">主讲人 : 林燕<span class="title-content"></span></span> <span class="liveStatus">播放成功</span></p>
        </div>
        <video-player class="video-player-box" style="width:800px;"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="true"
                      @playing="onPlayerPlaying($event)"
                      @ready="playerReadied">
        </video-player>
        <!--<p class="average-score">作品当前平均分 : <span>未评</span></p>-->

        <div id="views" style="width:840px; height:350px;"></div>
        <div style="background:#fff;text-align:center;display:block;font-size:18px;font-weight:bolder;width:840px; color:#333">
          <!--<Icon type="md-pulse" size="26" color="rgb(102, 205, 170)" style="margin:10px"/>-->
          专家点评分析图
        </div>
      </div>
      <div class="comment-video-detail-info">
        <Tabs value="name1">
          <TabPane label="观课评论" name="name1">
            <div class="review-pane">
              <div class="review-list" v-for="(item,index) in commmentList" :key="index">
                <span class="reviewlist-title">
                  {{item.employeeName}} :&nbsp;
                </span> <span class="reviewlist-content"><span>{{item.content}}</span> <span class="reviewlist-time">({{item.createTimeTip}})</span> <!----></span>
              </div>
            </div>
            <div style="position: relative; padding-top:40px;">
              <div class="lastest-comment" style="display: none;">查看最新评论</div>
              <textarea placeholder="发表您的评论" v-model="newComment" maxlength="250" class="publish-review"></textarea>
              <span class="submit-review" @click="addComment">提交</span>
            </div>
          </TabPane>
          <TabPane label="专家点评" name="name2">
            <div class="review-pane">
              <div v-for="(item,index) in expertComments">
                <div class="review-list" v-for="(comment,index) in item.contentList"  :key="index">
                  <span class="reviewlist-title">
                    {{comment.name}} :&nbsp;
                  </span>
                  <span class="reviewlist-content">
                    <span>{{comment.content}}</span>
                    <span class="reviewlist-time">({{item.time}})</span>
                  </span>
                </div>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
  import lessonDetails from '@/static/lessonDetails.json'
  import "videojs-contrib-hls.js/src/videojs.hlsjs"
  export default {
    data() {
      return {
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          controls: true, //控制条
          preload: 'auto', //视频预加载
          muted: false, //默认情况下将会消除任何音频。
          loop: false, //导致视频一结束就重新开始。
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: 'application/x-mpegURL',
            src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/demo/2019.m3u8'
          }],
          poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        },
        routerData: {},
        rewardDatas: [],
        commmentList: [],
        expertComments:[],
        newComment: "",
        player: {},
      }
    },
    methods: {
      //时间转成秒数
      transferTime(time) {
        var s = '';
        var min = time.split(':')[0];
        var sec = time.split(':')[1];
        s = Number(min * 60) + Number(sec);
        return s;
      },
      //添加评论
      addComment() {
        let newComment = {
          employeeName: "admin",
          content: this.newComment,
          createTimeTip: new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString()
        }
        if (newComment.content) {
          this.commmentList.unshift(newComment);
        } else {
          this.$Message.warning("评论内容不能为空！");
        }
        this.newComment = "";
      },
      //秒数转成时间格式
      transferSecond(s) {
        var t;
        if (s > -1) {
          var hour = Math.floor(s / 3600);
          var min = Math.floor(s / 60) % 60;
          var sec = s % 60;
          if (hour < 10) {
            t = '0' + hour + ":";
          } else {
            t = hour + ":";
          }

          if (min < 10) { t += "0"; }
          t += min + ":";
          if (sec < 10) { t += "0"; }
          t += sec.toFixed(0);
        }
        return t;
      },
      onPlayerPlay(player) {
        console.log('player play!', player)
      },
      onPlayerPause(player) {
        console.log('player pause!', player)
      },
      onPlayerPlaying(player) {
        let current = this.transferTime(player.controlBar.currentTimeDisplay.formattedTime_);
        let totalSecond = document.getElementsByClassName('vjs-tech')[0].duration;
      },
      playerReadied(player) {
        player.currentTime(120);
      },
      getPercent(num, total) {
        num = parseFloat(num);
        total = parseFloat(total);
        if (isNaN(num) || isNaN(total)) {
          return "-";
        }
        return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00) + "%";
      },
      transferArr(arr) {
        let newArr = [];
        for (let i in arr) {
          newArr.push([arr[i].per, arr[i].value, arr[i].contentList]);
        }
        return newArr;
      }
    },
    mounted() {
      let that = this;
      this.commmentList = lessonDetails.commentList;
      this.expertComments = lessonDetails.expertComments;

      let myChart = this.$echarts.init(document.getElementById('views'));

      let option = {
        calculable: true,
        xAxis: [
          {
            type: 'value',
            name: "视频进度",
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: "专家点评数",
            nameGap: 30,
            minInterval:1,
            axisLabel: {
            },
            splitLine: {    // gird 区域中的分割线
              show: false,   // 是否显示
            },
          }
        ],
        series: [
          {
            name: '评论数',
            type: 'line',
            smooth: true,
            data: that.transferArr(that.expertComments),
            itemStyle: {
              normal: {
                color: '#66CDAA', //改变折线点的颜色
                borderWidth: 5
              }
            },
            lineStyle: {
              color: '#66CDAA', //改变折线颜色
              width: 3,
            },

          }
        ],
        tooltip: {
          formatter: function (point) {
            let totalSecond = document.getElementsByClassName('vjs-tech')[0].duration;
            let time = "点评时间 : " + that.transferSecond(point.value[0] * totalSecond * 0.01) + '</br>';
            let list = point.value[2];
            let str = "评论内容：</br>"
            let content = "";
            for (let i in list) {
               content = content + list[i].name + ' : ' + list[i].content + '</br>';
            }
            return time + content
             
          }
        }
      };

      myChart.setOption(option);

      myChart.on('click', function (params) {
        let totalSecond = document.getElementsByClassName('vjs-tech')[0].duration;
        that.$refs.videoPlayer.player.currentTime(totalSecond * parseInt(params.value[0]) * 0.01);
      });
    },
  }
</script>
<style>
  .video-page {
    width: 1200px;
    margin: 100px auto;
  }

  .video-title {
    margin-bottom: 20px;
    height: 20px;
  }

  .video-title-h3 {
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    border-left: 6px solid #37b1fa;
    padding-left: 12px;
  }

  .video-info {
    width: 100%;
    display: table;
  }

  .comment-video-detail-info {
    width: 400px;
    background: #ffffff;
    display: table-cell;
    vertical-align: top;
    padding: 20px 10px 20px 30px;
    position: relative;
    border-left: 15px solid rgb(241,242,243);
  }

    .comment-video-detail-info .ivu-form-item {
      margin-bottom: 8px;
    }

    .comment-video-detail-info .ivu-form .ivu-form-item-label {
      font-size: 14px;
      color: #999999;
    }

    .comment-video-detail-info .ivu-form-item-content {
      font-size: 14px;
      color: #ffffff;
    }

  .comment-video-src {
    display: table-cell;
    width: 780px;
    box-sizing: border-box;
    padding: 20px 20px;
    background: #FFFFFF;
  }

    .comment-video-src .video-js .vjs-big-play-button {
      top: 50%;
      left: 50%;
      margin-left: -40px;
      margin-top: -20px;
    }

  .download-video {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 20px;
    left: 0;
  }

  .video-other {
    margin-top: 20px;
  }

  .videos-wrap {
    margin: 0px -10px 0px -10px;
  }

  .video-item {
    width: 25%;
    display: inline-block;
    padding: 0px 10px;
    margin-top: 20px;
    cursor: pointer;
  }

    .video-item p {
      font-size: 16px;
      color: #000;
      margin-top: 10px;
      text-decoration: none;
      text-indent: 8px;
    }

  .title-header {
    color: #666;
    margin-right: 30px;
    display: inline-block;
  }

  .liveStatus {
    color: #33aafe;
    float: right;
  }

  .review-pane {
    height: 700px;
    background-color: #fff;
    overflow-y: auto;
    position: relative;
  }

  .review-list {
    overflow: hidden;
    font-size: 14px;
    margin: 8px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f6f6f6;
  }

  .reviewlist-title {
    float: left;
    /*width: 22%;*/
    color: #999;
    text-align: right;
    padding-right: 5px;
  }

  .reviewlist-content {
    float: left;
    color: #444;
    /*width: 76%;*/
    font-size: 14px;
    word-break: break-all;
  }

  .lastest-comment {
    position: absolute;
    top: -5px;
    right: 20px;
    padding: 5px;
    color: #666;
    z-index: 999;
    cursor: pointer;
  }

  .publish-review {
    padding: 10px;
    background-color: #f1f2f3;
    border: 1px solid #d7d8da;
    font-size: 14px;
    color: #333;
    width: 100%;
    height: 100px;
    resize: none;
    outline: none;
    box-sizing: border-box;
  }

  .submit-review {
    margin-top: 8px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    margin-right: 10px;
    display: inline-block;
    float: right;
    cursor: pointer;
    width: 45px;
    text-align: center;
    height: 22px;
    line-height: 22px;
    border-radius: 2px;
  }

  .reviewlist-time {
    font-size: 12px;
    color: #ccc;
  }

  .average-score {
    margin-top: 20px;
    color: #666;
    font-size: 14px;
  }

    .average-score span {
      color: #fd8f45;
    }

  #views {
    background: #fff;
    padding-top: 30px;
  }
</style>