| | |
| | | <template> |
| | | <el-dialog |
| | | title="学习记录详情" |
| | | title="学习记录详情(该记录将至少保留6年)" |
| | | :visible.sync="dialogVisible" |
| | | :modal-append-to-body="false" |
| | | :close-on-click-modal="false" |
| | |
| | | :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> |
| | |
| | | <span>{{dataForm.courseName}}</span> |
| | | </el-form-item> |
| | | <el-form-item label="章节:"> |
| | | <span>{{dataForm.catalogName}}</span> |
| | | <span>{{dataForm.chapterName}}</span> |
| | | </el-form-item> |
| | | </div> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 80%;margin-left: 50px"> |
| | | style="width: 80%;margin-left: 50px" |
| | | :cell-style="tableAddClass"> |
| | | <el-table-column |
| | | prop="durationDesc" |
| | | label="学习时长" align="center"> |
| | |
| | | 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="margin-top: 15px;margin-left: 30px" v-for="item in authList"> |
| | | <el-image |
| | | style="width: 150px; height: 150px" |
| | | :src="dataForm.approvePhoto" |
| | | :preview-src-list="[dataForm.approvePhoto]"> |
| | | :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>类别:{{ item.faceType == 10 ? '签到' : '认证' }}</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> |
| | |
| | | </template> |
| | | |
| | | <script > |
| | | |
| | | import noPic from '@/assets/images/none.png' |
| | | export default { |
| | | name: 'addUser', |
| | | components: { |
| | |
| | | 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 |
| | | 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 ""; |
| | | }, |
| | | } |
| | | } |
| | |
| | | .columnFlex{ |
| | | display: flex;flex-direction: column; |
| | | } |
| | | ::v-deep .el-dialog__title { |
| | | line-height: 24px; |
| | | font-size: 22px; |
| | | color: #303133; |
| | | font-weight: 600; |
| | | } |
| | | </style> |