From c3bb35b20d6e076f73a1cad50fd6b9b94ca399a7 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期一, 06 一月 2025 16:15:05 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/onlineEducation/learnRecord/components/detailDialog.vue | 159 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 117 insertions(+), 42 deletions(-) diff --git a/src/views/onlineEducation/learnRecord/components/detailDialog.vue b/src/views/onlineEducation/learnRecord/components/detailDialog.vue index 06262e5..6584be3 100644 --- a/src/views/onlineEducation/learnRecord/components/detailDialog.vue +++ b/src/views/onlineEducation/learnRecord/components/detailDialog.vue @@ -1,73 +1,91 @@ <template> <el-dialog - title="学习记录详情" + 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="150px" style="padding-right: 50px" > - <div class="flex"> + <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> + <span>{{dataForm.idcard }}</span> </el-form-item> <el-form-item label="学习平台:" > - <span>{{dataForm.platformName}}</span> + <span>{{dataForm.institutionName}}</span> </el-form-item> <el-form-item label="所属机构:" > - <span>{{dataForm.trainingInstitution}}</span> + <span>{{dataForm.trainOrgName}}</span> </el-form-item> </div> <el-form-item label="当前班级(批次):"> - <span>{{dataForm.classBatch}}</span> + <span>{{dataForm.batchName}}</span> </el-form-item> <div class="flex"> <el-form-item label="课程:"> - <span>{{dataForm.course}}</span> + <span>{{dataForm.courseName}}</span> </el-form-item> <el-form-item label="章节:"> - <span>{{dataForm.chapter}}</span> + <span>{{dataForm.chapterName}}</span> </el-form-item> </div> <el-table - :data="examTable" - style="width: 80%;margin-left: 50px"> + :data="tableData" + style="width: 80%;margin-left: 50px" + :cell-style="tableAddClass"> <el-table-column - prop="learningTime" - label="学习时长"> + prop="durationDesc" + label="学习时长" align="center"> </el-table-column> <el-table-column prop="startTime" - label="开始时间"> + label="开始时间" width="150" align="center"> </el-table-column> <el-table-column - prop="startTime" - label="开始位置"> + prop="startPositionDesc" + label="开始位置" align="center"> </el-table-column> <el-table-column label="结束时间" - prop="endTime"> + prop="finishTime" width="150" align="center"> </el-table-column> <el-table-column label="结束位置" - prop="endTime"> + prop="finishPositionDesc" align="center"> </el-table-column> + <el-table-column + label="自然时间差" + prop="differenceDesc" align="center"> + </el-table-column> + </el-table> - <div class="columnFlex" style="margin: 30px 20px "> + <div style="margin: 30px 20px "> <span style="font-size: 20px;font-weight: 550">认证纪录集合</span> - <div class="columnFlex" style="margin-top: 15px"> - <img style="height: 130px;width: 130px;" src="../../../../assets/images/im.png"> - <div class="columnFlex" style="margin-top: 15px;font-size: 16px;line-height: 25px"> - <span>认证位置:xxxx</span> - <span>类别:签到</span> - <span>认证时间:2024-6-11 10:32:00</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> @@ -79,21 +97,21 @@ <span style="font-size: 20px;font-weight: 550">学习轨迹</span> <div class="columnFlex" style="margin-top: 5px"> <el-table - :data="examTable" + :data="trackList" style="width: 80%;margin: 10px 25px"> <el-table-column prop="startTime" label="开始时间" - width="180"> + width="180" align="center"> </el-table-column> <el-table-column label="结束时间" - prop="endTime"> + prop="endTime" align="center"> </el-table-column> <el-table-column - prop="learningTime" + prop="timeIntervalDesc" label="时间间隔" - width="180"> + width="180" align="center"> </el-table-column> </el-table> </div> @@ -101,7 +119,11 @@ <div class="columnFlex" style="margin: 30px 20px "> <span style="font-size: 20px;font-weight: 550">学时报告</span> <div class="columnFlex" style="margin-top: 10px"> - <img style="height: 130px;width: 150px;" src="../../../../assets/images/im.png"> + <el-image + style="width: 300px; height: 200px" + :src="dataForm.lessonReportUrl" + :preview-src-list="[dataForm.lessonReportUrl]"> + </el-image> </div> </div> @@ -110,7 +132,7 @@ </template> <script > - +import noPic from '@/assets/images/none.png' export default { name: 'addUser', components: { @@ -120,7 +142,9 @@ dialogVisible: false, dialogStatus: '', dataForm: {}, - examTable: [] + tableData: [], + trackList: [], + authList: [] } }, created() { @@ -128,19 +152,64 @@ methods: { openDialog (data) { this.dialogVisible = true; - this.dataForm = { - name: '张三', - idCard: '123456', - platformName: '链工宝', - trainingInstitution: '新疆水利水电学院', - classBatch: '2024第一批', - course: '测试课程1', - chapter: '测试章节1' + 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, + duration: data.duration, + difference: data.difference + }) + // 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"); + }, + tableAddClass({ row, column,rowIndex, columnIndex }) { + console.log('1',columnIndex) + if (row.difference < row.duration && columnIndex === 5) { + return { color:' red' } + } + return ""; }, } } @@ -152,6 +221,12 @@ margin-left: -85px } .columnFlex{ - display: flex;flex-direction: column + display: flex;flex-direction: column; +} +::v-deep .el-dialog__title { + line-height: 24px; + font-size: 22px; + color: #303133; + font-weight: 600; } </style> -- Gitblit v1.9.2