zhouwx
2025-01-06 c3bb35b20d6e076f73a1cad50fd6b9b94ca399a7
src/views/onlineEducation/learnRecord/components/detailDialog.vue
@@ -1,6 +1,6 @@
<template>
  <el-dialog
    title="学习记录详情"
    title="学习记录详情(该记录将至少保留6年)"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
@@ -8,8 +8,8 @@
    :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>
@@ -32,12 +32,13 @@
          <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">
@@ -58,6 +59,11 @@
          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>
@@ -65,13 +71,17 @@
          <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>
@@ -122,7 +132,7 @@
</template>
<script >
import noPic from '@/assets/images/none.png'
export default {
  name: 'addUser',
  components: {
@@ -144,22 +154,62 @@
      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 "";
    },
  }
}
@@ -173,4 +223,10 @@
.columnFlex{
  display: flex;flex-direction: column;
}
::v-deep .el-dialog__title {
  line-height: 24px;
  font-size: 22px;
  color: #303133;
  font-weight: 600;
}
</style>