Merge remote-tracking branch 'origin/master'

zhouwx

2025-01-06 c3bb35b20d6e076f73a1cad50fd6b9b94ca399a7

 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>