study_sm/src/containers/center/play/index.vue

<template>
  <div class="m-right-block fr mh576">

    <el-row class="p20">

      <el-col :lg="16" :md="16" :span="16">
        <div class="flex">
          <img :src="tpl.tb" style="height: 150px;" />
          <div style="margin-left: 20px;margin-top: -8px;">
            <div v-if="tpl.examGroupId>0">
              <p style="font-size: 24px;"> 说明 </p>
              <p class="mt10">岗位：{{tpl.name}} </p>
              <p class="mt10" v-if="tpl.examGroupId>0">考试不限次数，获得60分即合格</p>

              <p class="mt10" v-if="tpl.examGroupId==0">学完所有课程，即可打印学时证明</p>

              <div>
                <el-button type="primary" class="mt10" style="font-size: 14px;" @click="startExam"
                  v-if="tpl.examGroupId>0">
                  参加考试
                </el-button>
                <el-button type="primary" class="mt10" style="font-size: 14px;" @click="printCert">
                  学时证明
                </el-button>
              </div>
            </div>
            <div v-else>
              <p class="mt10">岗位类别：{{tpl.type}} </p>
              <p class="mt10">报考岗位：{{tpl.name}} </p>
              <p class="mt10">学习年度：{{tpl.nd}} </p>
              <el-button type="warning" class="mt20" style="font-size: 14px;" @click="printCert">
                打印学时证明
              </el-button>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :lg="4" :md="4" :span="4">
        <el-progress class="mprocess" type="circle" :width="150" :format="formatFinish" :stroke-width="18"
          :percentage="info.percent">
        </el-progress>

      </el-col>

      <el-col :lg="4" :md="4" :span="4">
        <el-progress class="mprocess" type="circle" :width="150" :format="formatMedia" :stroke-width="18"
          :percentage="0">
        </el-progress>
      </el-col>

    </el-row>

    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">

      <div class="m-account">
        <div class="account-tit" style="height:30px">
          <a :class="{'current':show===1}" @click="show=1" class="">正在学习</a>
          <a :class="{'current':show===2}" @click="show=2" class="">已经完成</a>
          <a :class="{'current':show===3}" @click="show=3" class="" v-if="tpl.examGroupId>0">考试记录</a>
        </div>

        <div v-if="show <3" class="lwh-ul-form mt20">
          <!-- 列表展示 -->
          <el-table :data="showList" border stripe style="width: 100%;">
            <el-table-column label="NO." prop="id" width="50" align="center">
              <template v-slot="{$index}">
                <span> {{$index+1}}</span>
              </template>
            </el-table-column>

            <el-table-column label="课程名称" prop="name" min-width="200">
            </el-table-column>

            <el-table-column label="类型" prop="type" align="center" width="80">
              <span>必修</span>
            </el-table-column>

            <el-table-column label="学时" prop="xs" align="center" width="80">
              <template v-slot="{row}">
                <span> {{row.xs/10}}</span>
              </template>
            </el-table-column>

            <el-table-column label="学习进度" prop="useTime" align="left" width="220">
              <template v-slot="{row}">
                <span style="display: flex;">
                  <el-progress type="line" style="width: 120px;" :stroke-width="26" :text-inside="true"
                    :show-text="false" :percentage="row.percent" :class="row.percent|showProgressColor">
                  </el-progress>
                  <span style="margin-left: 10px;"> {{row.percent}}% </span>
                </span>
              </template>
            </el-table-column>

            <el-table-column label="操作" prop="xs" align="center" width="80">
              <template v-slot="{row, $index}">
                <el-button @click="loadMedia(row, $index)" type="text">播放</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>

        <div v-if="show ==3" class="lwh-ul-form mt20">
          <exam-list :courseId="courseId"> </exam-list>
        </div>
      </div>
    </div>
    <el-dialog class="fc tc media-dialog" :visible.sync="mediaDialog" append-to-body top="50px" :title="media.name"
      :close-on-click-modal="false" width="640px">

      <Media :options="options" :dialog="mediaDialog" :media="media" :duration="info.duration"
        @close="mediaDialog=false" @update="update">
      </Media>
      <span slot="footer" class="dialog-footer mt5">
        <el-button type="warning" @click="mediaDialog=false">退出播放</el-button>
        <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;">
          <el-option label="流畅" value="ld"></el-option>
          <el-option label="标清" value="hls"></el-option>
        </el-select>
      </span>

    </el-dialog>

    <el-dialog title="输入认证" center :visible.sync="editRzcode">
      <el-form label-width="120px" ref="elAdd">
        <el-form-item label="认证编号">
          <el-input v-model="info.rzCode" type="text" disabled></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancelRzCode">取 消</el-button>
        <el-button @click="doAddRzCode" type="primary">确定打印</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import Media from "./components/media.vue";
  import ExamList from "./components/ExamList.vue";
  import {
    getPercent
  } from '@/utils/index.js'
  import {
    delExam
  } from '../exam/components/util.js'
  import md5 from 'js-md5';
  export default {
    name: "Index",
    data() {
      return {
        courseId: 0,
        show: 1,
        mediaDialog: false,
        mediaType: 'hls',
        mediaUrl: '',
        editRzcode: false,
        info: {
          score: 0,
          percent: 0,
          fcount: 0,
          tcount: 0,
          tpercent: 0
        },
        tpl: {},
        media: {},
        options: {
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "true", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [],
          poster: '', // 你的封面地址
          notSupportedMessage: '无法播放媒体源', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          playtimes: '',
          controlBar: {
            currentTimeDisplay: true, // 当前时间
            timeDivider: true, // 时间分割线
            durationDisplay: true, // 总时间
            progressControl: true, // 进度条
            remainingTimeDisplay: true, //
            customControlSpacer: true, //
            fullscreenToggle: true, // 全屏按钮
            volumePanel: true
          }
        },
        list: [],
        showList: [],
      };
    },
    components: {
      Media,
      ExamList
    },
    beforeMount() {
      this.courseId = +this.$route.params.courseId
      this.getData()
    },
    watch: {
      show(val) {
        this.updateShowList()
      },
      mediaType(val) {
        let mediaUrl = this.mediaUrl;
        if (val == 'ld') {
          mediaUrl = mediaUrl.replace('/hls/', '/ld/');
        }
        this.options.sources = [{
          src: mediaUrl,
          type: "application/x-mpegURL"
        }];
        this.options.playtimes = this.media.position || 0;
        this.options.autoplay = this.options.playtimes > 0;
        this.mediaDialog = true;
      }
    },
    filters: {
      showProgressColor: function(val) {
        if (val == '进行中') {
          return val = 'el-bg-inner-running';
        } else if (val == '失败') {
          return val = 'el-bg-inner-error'
        } else if (val == '完成') {
          return val = 'el-bg-inner-done'
        }
      },
      useTime(val) {
        let timestr = ""
        timestr += val > 3600 ? parseInt(val / 3600) : "0";
        timestr += ":" + (val > 60 ? parseInt((val % 3600) / 60) : "00");
        timestr += ":" + (val % 60);
        return timestr
      }
    },
    methods: {
      startExam() {
        let courseId = this.courseId
        delExam()
        this.$router.push(`/center/exam/${courseId}`);
      },
      printCert() {
        if (this.info.getXs < this.info.totalXs) {
          this.$message.errorMsg("课程还未完成", 2)
          return;
        }
        if (this.tpl.examGroupId > 0 && this.info.score < 60) {
          this.$message.errorMsg("考试未通过", 2)
          return;
        }
        let {
          id,
          rzCode
        } = this.info
        // this.editRzcode = true
        httpServer('Cert.printCert', {
          rzCode,
          id
        }).then(res => {
          if (res.code == 200) {
            this.editRzcode = false;
            this.info.tmpRzCode = "";
            window.open(res.data.url)
          }
        })
      },
      cancelRzCode() {
        this.info.rzCode = this.info.tmpRzCode;
        this.editRzcode = false;
      },
      doAddRzCode() {
        let {
          type,
          rzCode,
          id
        } = this.info;
        if (!rzCode) rzCode = "sm" + id
        httpServer('Cert.printCert', {
          rzCode,
          id
        }).then(res => {
          if (res.code == 200) {
            this.editRzcode = false;
            this.info.tmpRzCode = "";
            window.open(res.data.url)
          }
        })
      },
      formatFinish() {
        let {
          gxs,
          axs
        } = this.info;
        if (!axs) axs = 1;
        return `学时：${gxs}/${axs}`;
      },
      formatMedia() {
        let info = this.info
        return `视频：${info.fcount}/${info.tcount}`;
      },
      formatExam() {
        let {
          score
        } = this.info
        if (score == -1) return `已答0次，未通过`;
        return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
      },
      formatPass() {
        let {
          score
        } = this.info
        if (score == -1) return `未参加`;
        return `${score||0}分,${score>=60?'通过':'未通过'}`;
      },
      formatString(val) {
        return () => val;
      },
      getData() {
        let param = {
          courseId: this.courseId
        }
        httpServer("course.getCourse", param).then(res => {
          if (res.code == 200) {
            this.info = res.data.info;
            let list = res.data.list;
            this.tpl = res.data.tpl || {};
            this.list = list.map((item) => {
              item.percent = getPercent(item) || 0;
              return item;
            })
            this.updateShowList()
          }
        })
      },
      updateShowList() {
        let show = this.show;
        this.showList = this.list.filter(item => {
          if (show == 1) return !item.isFinish
          if (show == 2) return !!item.isFinish
          return false
        })
        //
        this.info.gxs = 0
        this.info.axs = 0;
        this.info.tcount = this.list.length;
        this.info.fcount = 0;
        this.info.percent = 0;
        for (let i = 0; i < this.list.length; i++) {
          let item = this.list[i]
          this.info.axs += (item.xs / 10)
          if (item.isFinish) {
            this.info.gxs += (item.xs / 10)
            this.info.fcount++
          }
        }
        this.info.percent = (this.info.gxs * 10000 / this.info.axs) / 100;
      },
      //
      update(item) {
        let index = this.media.index
        if (item.position) this.media.position = item.position
        this.media.isFinish = item.isFinish
        this.media.id = item.id
        this.media.percent = getPercent(this.media);
        this.updateShowList()
      },
      // 加载媒体
      loadMedia(item, index) {
        this.media = item;
        this.media.index = index
        httpServer('course.GetMedia', {
          id: item.id
        }).then(({
          data,
          code
        }) => {
          console.log("media", data)
          this.mediaUrl = data.mediaUrl
          item.position = data.position || 0
          this.mediaType = 'hls';
          this.options.sources = [{
            src: this.mediaUrl,
            type: "application/x-mpegURL"
          }];
          this.options.playtimes = item.position;
          this.options.autoplay = item.position > 0;
          this.mediaDialog = true;
        });
      }
    }
  };
</script>

<style>
  @import "../../../assets/css/content.css";
  @import "../../../assets/css/course.css";
  @import url("../../../assets/css/m-account.css");
  @import url("./index.css");

  .media-dialog .el-dialog__header {
    /* display: none !important; */
  }

  .media-dialog .el-dialog__body {
    padding: 0 !important;
  }

  .media-dialog .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }

  .mprocess {
    margin: 0 auto;
    width: 150px !important;
  }

  .el-progress {
    width: 100%;
  }

  .el-progress__text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #3290D4;
  }

  .el-progress-bar__outer {
    height: 20px !important;
    border: 1px solid #78335f;
    background-color: transparent;
  }

  /* 渐变进度条 */
  .el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #3587d8, #6855ff);
  }

  .el-bg-inner-error .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #fb3a7e);
  }

  .el-bg-inner-done .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #53ff54);
  }
</style>