FE-lab-xcx/pages_safetyEducationExamination/views/home/component/dataStatisticsReport.vue

<!-- 毕业教育考试数据统计报告 -->
<template>
  <view class="dataStatisticsReport-addPage" v-if="visible" @tap="onOverlayTap">
    <!-- 弹窗容器 -->
    <view class="report-wrap" @tap.stop="stopProp">
      <!-- 关闭按钮 -->
      <view class="close-btn" @tap="handleClose">✕</view>
      <scroll-view scroll-y class="report-scroll">
      <view class="report-wrap-big-box">
        <view class="report-wrap-min-box">
          <!-- logo -->
          <view class="logo-box">
            <image :src="logUrl" mode="widthFix" />
          </view>
          <!-- 标题 -->
          <text class="title-p">实验室安全教育成绩报告</text>
          <!-- 用户信息 -->
          <view class="user-box">
            <view class="user-min-box">
              <view>
                <text class="label">姓名：</text>
                <text>{{newData.userName}}</text>
              </view>
              <view>
                <text class="label">学号：</text>
                <text>{{newData.account}}</text>
              </view>
            </view>
            <view class="user-min-box">
              <view>
                <text class="label">学院：</text>
                <text>{{newData.deptName}}</text>
              </view>
              <view>
                <text class="label">年级：</text>
                <text>{{newData.grade}}</text>
              </view>
            </view>
            <view class="user-min-box">
              <view>
                <text class="label">用户类型：</text>
                <text>{{newData.educationTypeName}}</text>
              </view>
            </view>
          </view>
          <!-- 学年学时 -->
          <view class="study-hours-max-big-box" v-if="newData.studyHoursList && newData.studyHoursList[0]">
            <view class="study-hours-title-box">
              <view class="title-bar"></view>
              <text class="title-text">学年学时完成情况</text>
            </view>
            <view class="study-hours-text-title-box">
              <text>学年</text>
              <text>完成学时</text>
              <text>要求学时</text>
            </view>
            <view class="study-hours-for-box" v-for="(item, index) in newData.studyHoursList" :key="index">
              <text>{{item.academicYear}}</text>
              <text>{{item.completedStudyHours}}</text>
              <text>{{item.studyHoursRequirement}}</text>
            </view>
            <view class="study-hours-bottom-box">
              <text class="sum-label">累计</text>
              <text class="sum-value">{{newData.totalStudyHours}} 学时</text>
            </view>
          </view>
          <!-- 考试通过记录 -->
          <view class="study-hours-max-big-box-2" v-if="newData.examPassRecords && newData.examPassRecords[0]">
            <view class="study-hours-title-box">
              <view class="title-bar"></view>
              <text class="title-text">考试通过记录</text>
            </view>
            <view class="study-hours-text-title-box">
              <text>学年</text>
              <text>考试类型</text>
              <text>成绩</text>
            </view>
            <view class="study-hours-for-box" v-for="(item, index) in newData.examPassRecords" :key="index">
              <text>{{item.academicYear}}</text>
              <text>{{item.examTypeName}}</text>
              <text>{{item.score}}</text>
            </view>
          </view>
          <!-- 描述信息 -->
          <text class="study-text-p">　　该同学在校期间认真完成实验室安全教育各项学习任务，累计完成 <text class="bold-text">{{newData.totalStudyHours}}</text> 学时安全培训，通过全部年度安全考核，具备良好的实验室安全意识和规范操作能力，特此证明。</text>
          <!-- 落款 -->
          <view class="signature-box">
            <text>{{newData.issuingUnit}}</text>
            <text>{{newData.issuingTime}}</text>
          </view>
        </view>
      </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'dataStatisticsReport',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      dataStatisticsReportPropsData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        logUrl: 'https://labcontrol.nwafu.edu.cn/statics/2024/07/22/d1a9d129-ced7-49ac-b258-e5167d85232d.png',
        newData: {
          userName: '',
          account: '',
          deptName: '',
          grade: '',
          educationTypeName: '',
          totalStudyHours: '',
          studyHoursList: [],
          examPassRecords: [],
          issuingUnit: '',
          issuingTime: '',
        },
      }
    },
    watch: {
      dataStatisticsReportPropsData: {
        immediate: true,
        handler(val) {
          if (val && Object.keys(val).length) {
            this.$set(this, 'newData', val);
          }
        }
      }
    },
    methods: {
      stopProp(e) {
        e.stopPropagation && e.stopPropagation();
      },
      handleClose() {
        this.$emit('close');
      },
      onOverlayTap() {
        this.$emit('close');
      },
    }
  }
</script>

<style scoped lang="scss">
.dataStatisticsReport-addPage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  .report-wrap {
    position: relative;
    width: 90%;
    max-height: 80vh;
    background: #fffdf5;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;

    .close-btn {
      position: absolute;
      top: 16rpx;
      right: 24rpx;
      z-index: 10;
      font-size: 36rpx;
      color: #8b452f;
      line-height: 1;
      padding: 8rpx;
    }

    .report-scroll {
      flex: 1;
      max-height: 80vh;
    }

    .report-wrap-big-box {
      margin: 20rpx;
      border: 1rpx solid #c9a84c;
      border-radius: 4rpx;
      background-color: #fffdf5;

      .report-wrap-min-box {
        display: flex;
        flex-direction: column;
        border: 1rpx solid #c9a84c;
        border-radius: 4rpx;
        margin: 1rpx;

        // logo
        .logo-box {
          width: 578rpx;
          height: 88rpx;
          border-radius: 6rpx;
          background-color: #1a6e3a;
          margin: 40rpx 0 0 48rpx;
          overflow: hidden;

          image {
            width: 350rpx;
            margin: 6rpx auto;
            display: block;
          }
        }

        // 标题
        .title-p {
          line-height: 56rpx;
          color: #8b452f;
          text-align: center;
          font-size: 20rpx;
          letter-spacing: 6rpx;
          display: block;
        }

        // 用户信息
        .user-box {
          width: 578rpx;
          background-color: #faf6ec;
          border: 1rpx solid #e8dcc8;
          margin: 9rpx 0 0 48rpx;
          border-radius: 4rpx;
          padding: 10rpx 20rpx;
          box-sizing: border-box;

          .user-min-box {
            display: flex;

            view {
              flex: 1;
              display: flex;

              .label {
                line-height: 26rpx;
                font-size: 14rpx;
                color: #4a3c2a;
                font-weight: 700;
              }

              text:not(.label) {
                line-height: 26rpx;
                font-size: 14rpx;
                color: #4a3c2a;
              }
            }
          }
        }

        // 学年学时列表
        .study-hours-max-big-box {
          margin: 20rpx 48rpx 0 48rpx;

          .study-hours-title-box {
            display: flex;
            align-items: center;

            .title-bar {
              height: 20rpx;
              width: 3rpx;
              background-color: #c9a84c;
            }

            .title-text {
              line-height: 20rpx;
              font-size: 12rpx;
              flex: 1;
              color: #8b4513;
              margin-left: 8rpx;
              font-weight: 700;
            }
          }

          .study-hours-text-title-box {
            display: flex;
            background-color: #f5edd8;
            border-bottom: 1rpx solid #d4c5a0;
            margin-top: 10rpx;

            text {
              line-height: 34rpx;
              font-size: 12rpx;
              color: #5a4320;
              flex: 1;
              text-align: center;
              font-weight: 700;
            }
          }

          .study-hours-for-box {
            display: flex;
            border-bottom: 1rpx solid #ebe3d0;

            text {
              line-height: 32rpx;
              font-size: 12rpx;
              color: #4a3c2a;
              flex: 1;
              text-align: center;
            }
          }

          .study-hours-bottom-box {
            display: flex;
            background-color: #faf6ec;
            border-bottom: 1rpx solid #ebe3d0;

            .sum-label {
              width: 216rpx;
              line-height: 32rpx;
              font-size: 12rpx;
              color: #4a3c2a;
              font-weight: 700;
              text-align: center;
            }

            .sum-value {
              flex: 1;
              line-height: 32rpx;
              font-size: 12rpx;
              color: #4a3c2a;
              font-weight: 700;
              text-align: center;
            }
          }
        }

        // 考试通过记录列表
        .study-hours-max-big-box-2 {
          margin: 20rpx 48rpx 0 48rpx;

          .study-hours-title-box {
            display: flex;
            align-items: center;

            .title-bar {
              height: 20rpx;
              width: 3rpx;
              background-color: #c9a84c;
            }

            .title-text {
              line-height: 20rpx;
              font-size: 12rpx;
              flex: 1;
              color: #8b4513;
              margin-left: 8rpx;
              font-weight: 700;
            }
          }

          .study-hours-text-title-box {
            display: flex;
            background-color: #f5edd8;
            border-bottom: 1rpx solid #d4c5a0;
            margin-top: 10rpx;

            text {
              line-height: 34rpx;
              font-size: 12rpx;
              color: #5a4320;
              flex: 1;
              text-align: center;
              font-weight: 700;
            }
          }

          .study-hours-for-box {
            display: flex;
            border-bottom: 1rpx solid #ebe3d0;

            text {
              line-height: 32rpx;
              font-size: 12rpx;
              color: #4a3c2a;
              flex: 1;
              text-align: center;
            }
          }
        }

        // 描述信息
        .study-text-p {
          margin: 25rpx 48rpx 0 48rpx;
          line-height: 24rpx;
          font-size: 14rpx;
          color: #4a3c2a;
          display: block;

          .bold-text {
            font-weight: 700;
          }
        }

        // 落款
        .signature-box {
          margin: 103rpx 180rpx 80rpx 48rpx;

          text {
            height: 24rpx;
            display: block;
            text-align: right;
            font-size: 14rpx;
            color: #4a3c2a;
            line-height: 24rpx;
          }
        }
      }
    }
  }
}
</style>