index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <template>
  2. <div class="m-right-block">
  3. <el-row class="p20">
  4. <el-col :span="8">
  5. <div>
  6. <p style="font-size: 24px;"> 完成情况 </p>
  7. <p class="mt10" >获得{{info.gxs}}学时</p>
  8. <p class="mt10" >总共{{info.axs}}学时</p>
  9. </div>
  10. </el-col>
  11. <el-col :span="8">
  12. <div>
  13. <p style="font-size: 24px;"> 课程说明 </p>
  14. <p class="mt10" >岗位名称:{{tpl.name}} </p>
  15. <p class="mt10">考试不限次数,获得60分即合格</p>
  16. </div>
  17. </el-col>
  18. <el-col :span="8">
  19. <div>
  20. <p style="font-size: 24px;"> 学习证明 </p>
  21. <p class="mt10">学完所有课程,即可打印学时证明</p>
  22. <div>
  23. <el-button type="primary" class="mt10" style="font-size: 14px;" @click="startExam" v-if="tpl.examGroupId>0">
  24. 参加考试
  25. </el-button>
  26. <el-button type="primary" class="mt10" style="font-size: 14px;" @click="printCert">
  27. 学时证明
  28. </el-button>
  29. </div>
  30. </div>
  31. </el-col>
  32. </el-row>
  33. <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
  34. <div class="m-account">
  35. <div class="account-tit" style="height:30px">
  36. <a :class="{'current':show===1}" @click="show=1" class="">正在学习</a>
  37. <a :class="{'current':show===2}" @click="show=2" class="">已经完成</a>
  38. <a :class="{'current':show===3}" @click="show=3" class="" v-if="tpl.examGroupId>0">考试记录</a>
  39. </div>
  40. <div v-if="show <3" class="lwh-ul-form mt20">
  41. <!-- 列表展示 -->
  42. <el-table :data="showList" border stripe style="width: 100%;" >
  43. <el-table-column label="NO." prop="id" width="50" align="center">
  44. <template v-slot="{$index}">
  45. <span> {{$index+1}}</span>
  46. </template>
  47. </el-table-column>
  48. <el-table-column label="课程名称" prop="name" min-width="200">
  49. </el-table-column>
  50. <el-table-column label="类型" prop="type" align="center" width="80">
  51. <span>必修</span>
  52. </el-table-column>
  53. <el-table-column label="学时" prop="xs" align="center" width="80">
  54. <template v-slot="{row}">
  55. <span> {{row.xs/10}}</span>
  56. </template>
  57. </el-table-column>
  58. <el-table-column label="学习进度" prop="useTime" align="left" width="220">
  59. <template v-slot="{row}">
  60. <span style="display: flex;">
  61. <el-progress
  62. type="line"
  63. style="width: 120px;"
  64. :stroke-width="26"
  65. :text-inside="true"
  66. :show-text="false"
  67. :percentage="row.percent"
  68. :class="row.percent|showProgressColor">
  69. </el-progress>
  70. <span style="margin-left: 10px;"> {{row.percent}}% </span>
  71. </span>
  72. </template>
  73. </el-table-column>
  74. <el-table-column label="操作" prop="xs" align="center" width="80">
  75. <template v-slot="{row, $index}">
  76. <el-button @click="loadMedia(row, $index)" type="text">播放</el-button>
  77. </template>
  78. </el-table-column>
  79. </el-table>
  80. </div>
  81. <div v-if="show ==3" class="lwh-ul-form mt20">
  82. <exam-list :courseId="courseId"> </exam-list>
  83. </div>
  84. <div v-if="show ==4" class="lwh-ul-form mt20">
  85. <Media
  86. :options="options"
  87. :dialog="mediaDialog"
  88. :media="media"
  89. :duration="info.duration"
  90. @close="mediaDialog=false"
  91. @update="update">
  92. </Media>
  93. <span slot="footer" class="dialog-footer mt5">
  94. <span style="display: flex;">
  95. <el-progress
  96. type="line"
  97. style="width: 120px;margin-top: 10px;"
  98. :stroke-width="26"
  99. :text-inside="true"
  100. :show-text="false"
  101. :percentage="media.percent"
  102. :class="media.percent|showProgressColor">
  103. </el-progress>
  104. <span style="margin-left: 10px;margin-top: 10px;"> {{media.percent}}% </span>
  105. <el-select placeholder="流畅" v-model="mediaType" style="width: 80px;margin-left: 20px;">
  106. <el-option label="流畅" value="ld"></el-option>
  107. <el-option label="标清" value="hls"></el-option>
  108. </el-select>
  109. </span>
  110. </span>
  111. </div>
  112. </div>
  113. </div>
  114. <el-dialog title="输入认证" center :visible.sync="editRzcode" >
  115. <el-form label-width="120px" ref="elAdd">
  116. <el-form-item label="认证编号">
  117. <el-input v-model="info.rzCode" type="text" disabled></el-input>
  118. </el-form-item>
  119. </el-form>
  120. <div class="dialog-footer" slot="footer">
  121. <el-button @click="cancelRzCode">取 消</el-button>
  122. <el-button @click="doAddRzCode" type="primary">确定打印</el-button>
  123. </div>
  124. </el-dialog>
  125. </div>
  126. </template>
  127. <script>
  128. import {httpServer } from "@/components/httpServer/httpServer.js";
  129. import Media from "./components/media.vue";
  130. import ExamList from "./components/ExamList.vue";
  131. import {getPercent} from '@/utils/index.js'
  132. import {delExam} from '../exam/components/util.js'
  133. import md5 from 'js-md5';
  134. export default {
  135. name: "Index",
  136. data() {
  137. return {
  138. courseId: 0,
  139. show:1,
  140. mediaDialog: false,
  141. mediaType:'hls',
  142. mediaUrl:'',
  143. editRzcode: false,
  144. info: {score:0, percent:0},
  145. tpl:{},
  146. media:{},
  147. options:{
  148. autoplay: true, // 如果true,浏览器准备好时开始回放。
  149. muted: false, // 默认情况下将会消除任何音频。
  150. loop: false, // 导致视频一结束就重新开始。
  151. preload: "true", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
  152. language: 'zh-CN',
  153. aspectRatio: '4:3', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
  154. fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
  155. sources: [],
  156. poster: '', // 你的封面地址
  157. notSupportedMessage: '无法播放媒体源', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  158. playtimes: '',
  159. controlBar: {
  160. currentTimeDisplay: true, // 当前时间
  161. timeDivider: true, // 时间分割线
  162. durationDisplay: true, // 总时间
  163. progressControl: true, // 进度条
  164. remainingTimeDisplay: true, //
  165. customControlSpacer: true, //
  166. fullscreenToggle: true, // 全屏按钮
  167. volumePanel: true
  168. }
  169. },
  170. list: [],
  171. showList:[],
  172. };
  173. },
  174. components:{Media,ExamList},
  175. beforeMount() {
  176. this.courseId = +this.$route.params.courseId
  177. this.getData()
  178. },
  179. watch:{
  180. show(val){
  181. this.updateShowList()
  182. },
  183. mediaType(val){
  184. let mediaUrl = this.mediaUrl;
  185. if( val == 'ld'){
  186. mediaUrl = mediaUrl.replace('/hls/', '/ld/');
  187. }
  188. this.options.sources = [{src:mediaUrl,type: "application/x-mpegURL"}];
  189. this.options.playtimes = this.media.position||0;
  190. this.options.autoplay = this.options.playtimes>0;
  191. this.mediaDialog = true;
  192. }
  193. },
  194. filters:{
  195. showProgressColor: function (val) {
  196. if (val == '进行中') {
  197. return val = 'el-bg-inner-running';
  198. } else if (val == '失败') {
  199. return val = 'el-bg-inner-error'
  200. } else if (val == '完成') {
  201. return val = 'el-bg-inner-done'
  202. }
  203. },
  204. useTime(val){
  205. let timestr = ""
  206. timestr+= val> 3600?parseInt(val/3600):"0";
  207. timestr+= ":"+(val> 60?parseInt((val%3600)/60):"00");
  208. timestr += ":" + (val%60);
  209. return timestr
  210. }
  211. },
  212. methods: {
  213. startExam( ){
  214. let courseId = this.courseId
  215. delExam()
  216. this.$router.push(`/center/exam/${courseId}`);
  217. },
  218. printCert( ){
  219. if( this.info.getXs < this.info.totalXs ){
  220. this.$message.errorMsg("课程还未完成", 2)
  221. return;
  222. }
  223. if( this.tpl.examGroupId >0 && this.info.score < 60){
  224. this.$message.errorMsg("考试未通过", 2)
  225. return;
  226. }
  227. let {id, rzCode} = this.info
  228. // this.editRzcode = true
  229. httpServer('Cert.printCert', {rzCode, id}).then( res => {
  230. if( res.code == 200 ){
  231. this.editRzcode = false;
  232. this.info.tmpRzCode="";
  233. window.open( res.data.url )
  234. }
  235. })
  236. },
  237. cancelRzCode(){
  238. this.info.rzCode= this.info.tmpRzCode;
  239. this.editRzcode = false;
  240. },
  241. doAddRzCode(){
  242. let {type, rzCode, id} = this.info;
  243. if( !rzCode ) rzCode = "sm"+id
  244. httpServer('Cert.printCert', {rzCode, id}).then( res => {
  245. if( res.code == 200 ){
  246. this.editRzcode = false;
  247. this.info.tmpRzCode="";
  248. window.open( res.data.url )
  249. }
  250. })
  251. },
  252. formatFinish() {
  253. let {gxs,axs} = this.info;
  254. if( !axs ) axs = 1;
  255. return `获得${gxs}学时, 总共${axs}学时`;
  256. },
  257. formatExam() {
  258. let {score} = this.info
  259. if( score == -1 ) return `已答0次,未通过`;
  260. return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
  261. },
  262. formatPass() {
  263. let {score} = this.info
  264. if( score == -1 ) return `未参加`;
  265. return `${score||0}分,${score>=60?'通过':'未通过'}`;
  266. },
  267. formatString(val){
  268. return ()=> val;
  269. },
  270. getData() {
  271. let param = { courseId: this.courseId }
  272. httpServer("course.getCourse", param).then(res => {
  273. if (res.code == 200) {
  274. this.info = res.data.info;
  275. let list = res.data.list;
  276. this.tpl = res.data.tpl||{};
  277. this.list = list.map( (item)=>{
  278. item.percent = getPercent(item)||0;
  279. return item;
  280. })
  281. this.updateShowList()
  282. }
  283. })
  284. },
  285. updateShowList(){
  286. let show = this.show;
  287. this.showList = this.list.filter( item=>{
  288. if( show == 1) return !item.isFinish
  289. if( show == 2) return !!item.isFinish
  290. return false
  291. })
  292. //
  293. this.info.gxs = 0
  294. this.info.axs = 0;
  295. this.info.tcount = this.list.length;
  296. this.info.fcount =0;
  297. this.info.percent = 0;
  298. for( let i = 0; i< this.list.length;i++){
  299. let item = this.list[i]
  300. this.info.axs += (item.xs/10)
  301. if( item.isFinish ){
  302. this.info.gxs += (item.xs/10)
  303. this.info.fcount++
  304. }
  305. }
  306. this.info.percent = (this.info.gxs*10000/this.info.axs)/100;
  307. },
  308. //
  309. update( item ){
  310. let index = this.media.index
  311. if( item.position ) this.media.position = item.position
  312. this.media.isFinish = item.isFinish
  313. this.media.id = item.id
  314. this.media.percent = getPercent(this.media);
  315. this.updateShowList()
  316. },
  317. // 加载媒体
  318. loadMedia( item, index ) {
  319. this.media = item;
  320. this.media.index = index
  321. httpServer('course.GetMedia', {id:item.id}).then( ({data, code}) => {
  322. this.mediaUrl = data.mediaUrl;
  323. if( data.position >0){
  324. item.position = data.position;
  325. }
  326. this.mediaType = 'hls';
  327. this.show = 4
  328. this.options.sources = [{src:this.mediaUrl,type: "application/x-mpegURL"}];
  329. this.options.playtimes = item.position;
  330. this.options.autoplay = item.position>0;
  331. this.mediaDialog = true;
  332. });
  333. }
  334. }
  335. };
  336. </script>
  337. <style>
  338. @import "../../../assets/css/content.css";
  339. @import "../../../assets/css/course.css";
  340. @import url("../../../assets/css/m-account.css");
  341. @import url("./index.css");
  342. .media-dialog .el-dialog__header{
  343. /* display: none !important; */
  344. }
  345. .media-dialog .el-dialog__body{
  346. padding: 0 !important;
  347. }
  348. .media-dialog .el-scrollbar__wrap {
  349. overflow-x: hidden!important;
  350. }
  351. .mprocess{
  352. margin: 0 auto;
  353. width: 150px !important;
  354. font-size: 20px;
  355. color: #196FAD;
  356. }
  357. .el-progress{
  358. width: 100%;
  359. }
  360. .el-progress__text{
  361. font-size: 16px;
  362. font-weight: 700;
  363. line-height:1.5;
  364. color: #3290D4;
  365. }
  366. .el-progress-bar__outer{
  367. height: 20px!important;
  368. border: 1px solid #78335f;
  369. background-color:transparent;
  370. }
  371. /* 渐变进度条 */
  372. .el-bg-inner-running .el-progress-bar__inner{
  373. background-color: unset;
  374. background-image: linear-gradient(to right, #3587d8 , #6855ff);
  375. }
  376. .el-bg-inner-error .el-progress-bar__inner{
  377. background-image: linear-gradient(to right, #3587d8 , #fb3a7e);
  378. }
  379. .el-bg-inner-done .el-progress-bar__inner{
  380. background-image: linear-gradient(to right, #3587d8 , #53ff54);
  381. }
  382. </style>