123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405 |
- <template>
- <div class="m-right-block">
- <el-row class="p20">
- <el-col :span="8">
- <div>
- <p style="font-size: 24px;"> 完成情况 </p>
- <p class="mt10" >获得{{info.gxs}}学时</p>
- <p class="mt10" >总共{{info.axs}}学时</p>
- </div>
- </el-col>
- <el-col :span="8">
- <div>
- <p style="font-size: 24px;"> 课程说明 </p>
- <p class="mt10" >岗位名称:{{tpl.name}} </p>
- <p class="mt10">考试不限次数,获得60分即合格</p>
- </div>
- </el-col>
- <el-col :span="8">
- <div>
- <p style="font-size: 24px;"> 学习证明 </p>
- <p class="mt10">学完所有课程,即可打印学时证明</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>
- </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 v-if="show ==4" class="lwh-ul-form mt20">
- <Media
- :options="options"
- :dialog="mediaDialog"
- :media="media"
- :duration="info.duration"
- @close="mediaDialog=false"
- @update="update">
- </Media>
- <span slot="footer" class="dialog-footer mt5">
- <span style="display: flex;">
- <el-progress
- type="line"
- style="width: 120px;margin-top: 10px;"
- :stroke-width="26"
- :text-inside="true"
- :show-text="false"
- :percentage="media.percent"
- :class="media.percent|showProgressColor">
- </el-progress>
- <span style="margin-left: 10px;margin-top: 10px;"> {{media.percent}}% </span>
- <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;margin-left: 20px;">
- <el-option label="流畅" value="ld"></el-option>
- <el-option label="标清" value="hls"></el-option>
- </el-select>
- </span>
- </span>
- </div>
- </div>
- </div>
- <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},
- 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}学时`;
- },
- 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}) => {
- this.mediaUrl = data.mediaUrl;
- if( data.position >0){
- item.position = data.position;
- }
- this.mediaType = 'hls';
- this.show = 4
- 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;
- font-size: 20px;
- color: #196FAD;
- }
- .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>
|