From db905ecd14f63dba9337b4f4715584ef2d7e8c7e Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Fri, 07 Mar 2025 14:45:00 +0800
Subject: [PATCH] 修改
---
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