zhouwx
2024-06-27 ae43feac8c6b2372f5a061ead68e71027e8877e1
src/views/onlineEducation/learnRecord/components/detailDialog.vue
@@ -6,6 +6,7 @@
    :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">
@@ -13,61 +14,68 @@
          <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.catalogName}}</span>
        </el-form-item>
      </div>
      <el-table
        :data="examTable"
        :data="tableData"
        style="width: 80%;margin-left: 50px">
        <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>
      <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="dataForm.approvePhoto"
              :preview-src-list="[dataForm.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>认证时间:{{item.authTime}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="columnFlex" style="margin: 30px 20px ">
        <span style="font-size: 20px;font-weight: 550">视频存档 (非必传)</span>
@@ -79,21 +87,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 +109,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>
@@ -120,7 +132,9 @@
      dialogVisible: false,
      dialogStatus: '',
      dataForm: {},
      examTable: []
      tableData: [],
      trackList: [],
      authList: []
    }
  },
  created() {
@@ -128,15 +142,20 @@
  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
      this.tableData.push(
        {
          durationDesc: data.durationDesc,
          startTime: data.startTime,
          finishTime: data.finishTime,
          finishPositionDesc: data.finishPositionDesc,
          startPositionDesc: data.startPositionDesc
        })
      this.trackList = data.trackList
      this.authList = data.authList
    },
    handleClose() {
      this.dialogVisible = false;
@@ -152,6 +171,6 @@
  margin-left: -85px
}
.columnFlex{
  display: flex;flex-direction: column
  display: flex;flex-direction: column;
}
</style>