<template>
|
<el-dialog
|
title="学习记录详情（该记录将至少保留6年）"
|
:visible.sync="dialogVisible"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
width="900px"
|
:before-close="handleClose"
|
append-to-body
|
>
|
<el-form ref="dataForm" :model="dataForm" label-position="right" label-width="160px" >
|
<div class="flex" style="flex-wrap: wrap">
|
<el-form-item label="姓名:">
|
<span>{{dataForm.name}}</span>
|
</el-form-item>
|
<el-form-item label="身份证号:" >
|
<span>{{dataForm.idcard }}</span>
|
</el-form-item>
|
<el-form-item label="学习平台:" >
|
<span>{{dataForm.institutionName}}</span>
|
</el-form-item>
|
<el-form-item label="所属机构:" >
|
<span>{{dataForm.trainOrgName}}</span>
|
</el-form-item>
|
</div>
|
<el-form-item label="当前班级（批次）:">
|
<span>{{dataForm.batchName}}</span>
|
</el-form-item>
|
|
<div class="flex">
|
<el-form-item label="课程:">
|
<span>{{dataForm.courseName}}</span>
|
</el-form-item>
|
<el-form-item label="章节:">
|
<span>{{dataForm.chapterName}}</span>
|
</el-form-item>
|
</div>
|
<el-table
|
:data="tableData"
|
style="width: 80%;margin-left: 50px">
|
<el-table-column
|
prop="durationDesc"
|
label="学习时长" align="center">
|
</el-table-column>
|
<el-table-column
|
prop="startTime"
|
label="开始时间" width="150" align="center">
|
</el-table-column>
|
<el-table-column
|
prop="startPositionDesc"
|
label="开始位置" align="center">
|
</el-table-column>
|
<el-table-column
|
label="结束时间"
|
prop="finishTime" width="150" align="center">
|
</el-table-column>
|
<el-table-column
|
label="结束位置"
|
prop="finishPositionDesc" align="center">
|
</el-table-column>
|
<el-table-column
|
label="自然时间差"
|
prop="differenceDesc" align="center">
|
</el-table-column>
|
|
</el-table>
|
<div style="margin: 30px 20px ">
|
<span style="font-size: 20px;font-weight: 550">认证纪录集合</span>
|
<div style="display: flex;flex-wrap: wrap;">
|
<div style="margin-top: 15px;margin-left: 30px" v-for="item in authList">
|
<el-image
|
style="width: 150px; height: 150px"
|
:src="item.approvePhoto"
|
:preview-src-list="[item.approvePhoto]">
|
</el-image>
|
<div class="columnFlex" style="margin-top: 15px;font-size: 16px;line-height: 25px">
|
<span>认证位置：{{ item.authPostionDesc}}</span>
|
<span>类别：人脸面部识别</span>
|
<span>认证时间：{{item.authTime}}</span>
|
<div style="display: flex;align-items: center;">
|
<span>IP：{{item.ip? item.ip : '--'}}</span>
|
<span style="margin-left: 15px">MAC：{{item.mac ? item.mac : '--'}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<div class="columnFlex" style="margin: 30px 20px ">
|
<span style="font-size: 20px;font-weight: 550">视频存档 (非必传)</span>
|
<div class="columnFlex" style="margin-top: 5px">
|
<span style="font-size: 18px;">无</span>
|
</div>
|
</div>
|
<div class="columnFlex" style="margin: 30px 20px ">
|
<span style="font-size: 20px;font-weight: 550">学习轨迹</span>
|
<div class="columnFlex" style="margin-top: 5px">
|
<el-table
|
:data="trackList"
|
style="width: 80%;margin: 10px 25px">
|
<el-table-column
|
prop="startTime"
|
label="开始时间"
|
width="180" align="center">
|
</el-table-column>
|
<el-table-column
|
label="结束时间"
|
prop="endTime" align="center">
|
</el-table-column>
|
<el-table-column
|
prop="timeIntervalDesc"
|
label="时间间隔"
|
width="180" align="center">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="columnFlex" style="margin: 30px 20px ">
|
<span style="font-size: 20px;font-weight: 550">学时报告</span>
|
<div class="columnFlex" style="margin-top: 10px">
|
<el-image
|
style="width: 300px; height: 200px"
|
:src="dataForm.lessonReportUrl"
|
:preview-src-list="[dataForm.lessonReportUrl]">
|
</el-image>
|
</div>
|
</div>
|
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script >
|
import noPic from '@/assets/images/none.png'
|
export default {
|
name: 'addUser',
|
components: {
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
dialogStatus: '',
|
dataForm: {},
|
tableData: [],
|
trackList: [],
|
authList: []
|
}
|
},
|
created() {
|
},
|
methods: {
|
openDialog (data) {
|
this.dialogVisible = true;
|
console.log('data',data)
|
this.dataForm = data
|
if(this.dataForm.lessonReportUrl == '-'){
|
this.dataForm.lessonReportUrl = noPic
|
}
|
this.tableData.push(
|
{
|
durationDesc: data.durationDesc,
|
startTime: data.startTime,
|
finishTime: data.finishTime,
|
finishPositionDesc: data.finishPositionDesc,
|
startPositionDesc: data.startPositionDesc,
|
differenceDesc: data.differenceDesc
|
})
|
// this.tableData.forEach(item => {
|
// item.timeDiff = this.getTimeDifferenceInSeconds(item.startTime,item.finishTime)
|
// })
|
this.trackList = data.trackList
|
this.authList = data.authList
|
|
|
},
|
getTimeDifferenceInSeconds(dateStr1, dateStr2) {
|
const date1 = new Date(dateStr1);
|
const date2 = new Date(dateStr2);
|
const timeDiff = Math.abs(date2 - date1); // 计算时间差
|
|
const seconds = Math.floor(timeDiff / 1000)
|
const hour = Math.floor(seconds / 3600)
|
const hours = hour ==0 ? '' : hour>=10 ? hour: '0' + hour
|
const minute = Math.floor((seconds % 3600) / 60);
|
const minutes = minute == 0 ? '' : minute>= 10 ? minute: '0' + minute
|
const sec = seconds % 60;
|
const secs = sec == 0 ? '' : sec >= 10 ? sec: '0' + sec
|
|
return [
|
hours ? hours + '时' : '',
|
minutes ? minutes + '分' : '',
|
secs + '秒'
|
].filter(Boolean);
|
|
},
|
handleClose() {
|
this.tableData = [];
|
this.dataForm = {}
|
this.trackList = []
|
this.authList =[]
|
this.dialogVisible = false;
|
this.$emit("getList");
|
},
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.flex{
|
display: flex;
|
margin-left: -85px
|
}
|
.columnFlex{
|
display: flex;flex-direction: column;
|
}
|
::v-deep .el-dialog__title {
|
line-height: 24px;
|
font-size: 22px;
|
color: #303133;
|
font-weight: 600;
|
}
|
</style>
|
