|
|
@@ -2,9 +2,9 @@
|
|
|
<template>
|
|
|
<div class="trainingTask-addPage">
|
|
|
<div class="top-type-box">
|
|
|
- <p>暂时没有字段</p>
|
|
|
- <p>{{newData.trainingMode==1?'线上培训':'线下培训'}}</p>
|
|
|
- <p>暂时没有字段</p>
|
|
|
+ <p>{{propsData.status==1?'未开始':(propsData.status==2?'进行中':(propsData.status==3?'已结束':''))}}</p>
|
|
|
+ <p>{{propsData.trainingMode==1?'线上培训':'线下培训'}}</p>
|
|
|
+ <p>{{propsData.categoryName}}</p>
|
|
|
</div>
|
|
|
<div class="title-box">
|
|
|
<p></p>
|
|
|
@@ -28,12 +28,16 @@
|
|
|
<p>{{newData.speakerName}}</p>
|
|
|
</div>
|
|
|
<div v-if="newData.trainingMode==2">
|
|
|
+ <p>培训时长</p>
|
|
|
+ <p>{{newData.trainingDurationMinutes}} 分钟</p>
|
|
|
+ </div>
|
|
|
+ <div v-if="newData.trainingMode==2">
|
|
|
<p>可得学时</p>
|
|
|
- <p>{{newData.creditHours}}</p>
|
|
|
+ <p style="color:#1857d4;font-weight:600;">+ {{newData.creditHours}} 学时</p>
|
|
|
</div>
|
|
|
<div v-if="newData.trainingMode==2">
|
|
|
- <p>可得学分</p>
|
|
|
- <p>{{newData.points}}</p>
|
|
|
+ <p>可得积分</p>
|
|
|
+ <p style="color:#e67e22;font-weight:600;">+ {{newData.points}} 积分</p>
|
|
|
</div>
|
|
|
<div v-if="newData.trainingMode==1">
|
|
|
<p>参与人数</p>
|
|
|
@@ -51,45 +55,62 @@
|
|
|
</div>
|
|
|
<div class="max-for-box" v-if="newData.trainingMode==1">
|
|
|
<p class="for-title-p">学员每完成一个课件的学习，获得对应课件的学时和积分</p>
|
|
|
- <div class="for-max-box" v-for="(item,index) in coursewares" :key="index">
|
|
|
- <p class="left-icon-p"></p>
|
|
|
- <div class="text-box">
|
|
|
+ <div class="for-max-box" v-for="(item,index) in newData.coursewares" :key="index">
|
|
|
+ <p class="left-icon-p el-icon-video-play icon-p-a" v-if="item.materialType == 1"></p>
|
|
|
+ <p class="left-icon-p el-icon-document icon-p-b" v-if="item.materialType == 3"></p>
|
|
|
+ <p class="left-icon-p el-icon-reading icon-p-c" v-if="item.materialType == 4"></p>
|
|
|
+ <div class="text-center-box">
|
|
|
<p>{{item.coursewareName}}</p>
|
|
|
<p>{{item.materialType==1?'视频':(item.materialType==3?'文档':(item.materialType==4?'文章':''))}} · 约{{secondsToMinutes(item.minLearningDuration)}}分钟</p>
|
|
|
</div>
|
|
|
<div class="num-box">
|
|
|
- <!--<p>+{{}}学时</p>-->
|
|
|
- <!--<p>+{{}}积分</p>-->
|
|
|
+ <p>+{{item.creditHours}}学时</p>
|
|
|
+ <p>+{{item.points}}积分</p>
|
|
|
</div>
|
|
|
- <p class="right-p">已学习/未学习</p>
|
|
|
+ <p class="right-p" :class="item.learnStatus == 0?'right-color-a':(item.learnStatus == 1?'right-color-b':(item.learnStatus == 2?'right-color-c':''))"
|
|
|
+ >{{item.learnStatus == 0?'未学习':(item.learnStatus == 1?'学习中':(item.learnStatus == 2?'已学习':''))}}</p>
|
|
|
</div>
|
|
|
- <p></p>
|
|
|
- <div>
|
|
|
+ <p class="border-p"></p>
|
|
|
+ <div class="progress-text-box">
|
|
|
<p>学习进度</p>
|
|
|
- <p>/ 课件已完成</p>
|
|
|
+ <p>{{count}}/{{total}} 课件已完成</p>
|
|
|
</div>
|
|
|
+ <el-progress :stroke-width="10" :text-inside="true" style="margin:5px 0 15px;"
|
|
|
+ :percentage="percentage" :format="format"></el-progress>
|
|
|
</div>
|
|
|
- <div class="title-box">
|
|
|
+ <div class="title-box" v-if="newData.attachments[0]">
|
|
|
<p></p>
|
|
|
<p>附件</p>
|
|
|
</div>
|
|
|
+ <div class="attachments-box" v-if="newData.attachments[0]">
|
|
|
+ <p>{{newData.attachments[0].attachmentName}}</p>
|
|
|
+ <p @click="lookFile()">查看</p>
|
|
|
+ </div>
|
|
|
+ <fullScreenFileLook ref="fullScreenFileLook"></fullScreenFileLook>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
+ import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";
|
|
|
+ import {
|
|
|
examUserTrainingDetail
|
|
|
} from "@/api/safetyEducationExaminationNew/index";
|
|
|
//import { getDicts } from "@/api/commonality/noPermission";
|
|
|
//import { systemUserSelect } from "@/api/commonality/permission";
|
|
|
export default {
|
|
|
name: 'addPage',
|
|
|
+ components: {
|
|
|
+ fullScreenFileLook,
|
|
|
+ },
|
|
|
props: {
|
|
|
propsData: {}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- newData: {}
|
|
|
+ newData: {},
|
|
|
+ total:0,
|
|
|
+ count:0,
|
|
|
+ percentage:0,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -99,9 +120,25 @@ import {
|
|
|
this.examUserTrainingDetail()
|
|
|
},
|
|
|
methods: {
|
|
|
+ lookFile(){
|
|
|
+ let obj = {
|
|
|
+ name:this.newData.attachments[0].attachmentName,
|
|
|
+ url:this.newData.attachments[0].attachmentPath,
|
|
|
+ type:this.newData.attachments[0].attachmentType,
|
|
|
+ }
|
|
|
+ this.fullScreenFileLookClick(obj);
|
|
|
+ },
|
|
|
examUserTrainingDetail(){
|
|
|
examUserTrainingDetail({id:this.propsData.id}).then(response => {
|
|
|
this.$set(this,'newData',response.data);
|
|
|
+ if(response.data.trainingMode == 1 && response.data.coursewares){
|
|
|
+ const total = response.data.coursewares.length;
|
|
|
+ const count = response.data.coursewares.reduce((acc, cur) => acc + (cur.learnStatus === 1 ? 1 : 0), 0);
|
|
|
+ const percentage = total > 0 ? parseFloat(((count / total) * 100).toFixed(2)) : 0;
|
|
|
+ this.$set(this,'total ',total);
|
|
|
+ this.$set(this,'count ',count);
|
|
|
+ this.$set(this,'percentage',percentage);
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
//展示时间换算
|
|
|
@@ -111,12 +148,19 @@ import {
|
|
|
}
|
|
|
return Math.ceil(totalSeconds / 60);
|
|
|
},
|
|
|
+ format(percentage) {
|
|
|
+ return percentage === 100 ? '' : '';
|
|
|
+ },
|
|
|
+ fullScreenFileLookClick(item){
|
|
|
+ this.$refs['fullScreenFileLook'].initialize(item.name,item.url,item.type);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.trainingTask-addPage {
|
|
|
+ padding:20px;
|
|
|
.title-box{
|
|
|
display: flex;
|
|
|
p:nth-child(1){
|
|
|
@@ -186,21 +230,111 @@ import {
|
|
|
margin-bottom:12px;
|
|
|
}
|
|
|
.for-max-box{
|
|
|
+ display: flex;
|
|
|
+ padding:14px 16px;
|
|
|
+ border:1px solid #dde3ed;
|
|
|
+ border-radius:8px;
|
|
|
+ margin-bottom:10px;
|
|
|
.left-icon-p{
|
|
|
-
|
|
|
+ width:36px;
|
|
|
+ height:36px;
|
|
|
+ border-radius:8px;
|
|
|
+ text-align: center;
|
|
|
+ line-height:36px;
|
|
|
+ color:#666;
|
|
|
+ margin-right:20px
|
|
|
}
|
|
|
- .text-box{
|
|
|
-
|
|
|
+ .icon-p-a{
|
|
|
+ background: linear-gradient(135deg, #e6f4ff, #bae0ff);
|
|
|
+ }
|
|
|
+ .icon-p-b{
|
|
|
+ background: linear-gradient(135deg, #f6ffed, #d9f7be);
|
|
|
+ }
|
|
|
+ .icon-p-c{
|
|
|
+ background: linear-gradient(135deg, #fff7e6, #ffe7ba);
|
|
|
+ }
|
|
|
+ .text-center-box{
|
|
|
+ flex:1;
|
|
|
+ p:nth-child(1){
|
|
|
+ font-size:14px;
|
|
|
+ line-height:16px;
|
|
|
+ margin-bottom:4px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:12px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#8896a7;
|
|
|
+ }
|
|
|
}
|
|
|
.num-box{
|
|
|
-
|
|
|
+ margin-right:20px;
|
|
|
+ p:nth-child(1){
|
|
|
+ font-size:13px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#1857d4;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom:4px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:12px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#e67e22;
|
|
|
+ }
|
|
|
}
|
|
|
.right-p{
|
|
|
-
|
|
|
+ margin-top:8px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:12px;
|
|
|
+ padding: 0 9px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ .right-color-a{
|
|
|
+ background-color: #f4f6fa;
|
|
|
+ color:#8896a7;
|
|
|
+ }
|
|
|
+ .right-color-b{
|
|
|
+ background-color: #fef6ec;
|
|
|
+ color:#e67e22;
|
|
|
+ }
|
|
|
+ .right-color-c{
|
|
|
+ background-color: #e6f4ff;
|
|
|
+ color:#1677ff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+ .attachments-box{
|
|
|
+ display: flex;
|
|
|
+ border:1px solid #91caff;
|
|
|
+ background-color: #e6f4ff;
|
|
|
+ color:#1677ff;
|
|
|
+ border-radius:8px;
|
|
|
+ padding:10px 20px;
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .border-p{
|
|
|
+ border-bottom:1px solid #dedede;
|
|
|
+ margin:15px 0;
|
|
|
+ }
|
|
|
+ .progress-text-box{
|
|
|
+ display: flex;
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ font-size:13px;
|
|
|
+ color:#4a5568;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:13px;
|
|
|
+ color:#1857d4;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
.rich-text-box {
|
|
|
border:1px solid #dde3ed;
|
|
|
padding:5px 10px;
|
|
|
@@ -211,7 +345,6 @@ import {
|
|
|
line-height: 1.6; /* 基础行高 */
|
|
|
word-break: break-word; /* 防止长单词或长链接撑破布局 */
|
|
|
}
|
|
|
-
|
|
|
/* 穿透样式，控制富文本内部的标签 */
|
|
|
.rich-text-box ::v-deep img {
|
|
|
max-width: 100% !important; /* 防止图片超出容器 */
|
|
|
@@ -224,9 +357,5 @@ import {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
}
|
|
|
-
|
|
|
- .rich-text-box ::v-deep p {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
dedsudiyu