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" :style="{ height: scrollHeight + 'px' }">
      <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 class="action-bar">
        <view class="btn-close" @tap="handleClose">关闭</view>
        <view class="btn-save" @tap="saveAsImage">保存图片</view>
      </view>
    </view>
    <!-- 用于截图的离屏 canvas，需要有实际尺寸才能绘制 -->
    <canvas canvas-id="reportCanvas" :style="{ width: canvasW + 'px', height: canvasH + 'px', position: 'fixed', left: '-9999px', top: '0' }"></canvas>
  </view>
</template>

<script>
  export default {
    name: 'dataStatisticsReport',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      dataStatisticsReportPropsData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
				logUrl: uni.getStorageSync('rectangleLogo'),
				// logUrl: 'https://gzu.zjznai.com/statics/2026/06/17/00df3205-5321-4b46-aae3-0ffe4451ee51.png',
        canvasW: 340,
        canvasH: 100,
        scrollHeight: Math.floor(uni.getSystemInfoSync().windowHeight * 0.85) - 100,
        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');
      },
      saveAsImage() {
        uni.showLoading({ title: '生成中...' });
        const d = this.newData;
        const W = 680;
        const lineH = 36;
        const pad = 48;
        const tableW = W - pad * 2;

        // 计算高度（加 buffer 防截断）
        const studyRows = (d.studyHoursList || []).length;
        const examRows = (d.examPassRecords || []).length;
        const descLines = 4; // 描述文字大约 4 行
        const H = 120
          + 100 + 56  // logo + 标题
          + 100 + 20  // 用户信息
          + (studyRows > 0 ? 46 + 34 + studyRows * 32 + 32 + 20 : 0)  // 学年学时
          + (examRows > 0 ? 46 + 34 + examRows * 32 + 20 : 0)          // 考试记录
          + descLines * lineH + 40                                       // 描述
          + 80 + 80;                                                     // 落款 + 底部

        // 先同步 canvas 尺寸（微信小程序 canvas 需要真实 px 尺寸）
        this.canvasW = W / 2;
        this.canvasH = H / 2;

        // 等 DOM 更新后再绘制
        this.$nextTick(() => {
          this._drawCanvas(W, H, pad, tableW, lineH, d, studyRows, examRows);
        });
      },
      _drawCanvas(W, H, pad, tableW, lineH, d, studyRows, examRows) {
        const ctx = uni.createCanvasContext('reportCanvas', this);

        // 背景
        ctx.setFillStyle('#fffdf5');
        ctx.fillRect(0, 0, W, H);

        // 外边框
        ctx.setStrokeStyle('#c9a84c');
        ctx.setLineWidth(1);
        ctx.strokeRect(2, 2, W - 4, H - 4);
        ctx.strokeRect(6, 6, W - 12, H - 12);

        let y = 40;

        // logo 背景块
        ctx.setFillStyle('#77161B');
        ctx.fillRect(pad, y, 578, 88);
        y += 88 + 16;

        // 标题
        ctx.setFontSize(20);
        ctx.setFillStyle('#8b452f');
        ctx.setTextAlign('center');
        ctx.fillText('实验室安全教育成绩报告', W / 2, y + 20);
        y += 56;

        // 用户信息背景
        ctx.setFillStyle('#faf6ec');
        ctx.fillRect(pad, y, tableW, 80);
        ctx.setStrokeStyle('#e8dcc8');
        ctx.strokeRect(pad, y, tableW, 80);

        ctx.setFontSize(14);
        ctx.setFillStyle('#4a3c2a');
        ctx.setTextAlign('left');
        const col1 = pad + 12;
        const col2 = pad + tableW / 2 + 12;
        ctx.fillText('姓名：' + (d.userName || ''), col1, y + 22);
        ctx.fillText('学号：' + (d.account || ''), col2, y + 22);
        ctx.fillText('学院：' + (d.deptName || ''), col1, y + 46);
        ctx.fillText('年级：' + (d.grade || ''), col2, y + 46);
        ctx.fillText('用户类型：' + (d.educationTypeName || ''), col1, y + 70);
        y += 80 + 20;

        // 学年学时表
        if (studyRows > 0) {
          // 小标题
          ctx.setFillStyle('#c9a84c');
          ctx.fillRect(pad, y, 3, 20);
          ctx.setFontSize(14);
          ctx.setFillStyle('#8b4513');
          ctx.setTextAlign('left');
          ctx.fillText('学年学时完成情况', pad + 10, y + 16);
          y += 26;

          // 表头
          ctx.setFillStyle('#f5edd8');
          ctx.fillRect(pad, y, tableW, 34);
          ctx.setStrokeStyle('#d4c5a0');
          ctx.strokeRect(pad, y, tableW, 34);
          ctx.setFontSize(12);
          ctx.setFillStyle('#5a4320');
          ctx.setTextAlign('center');
          const cw = tableW / 3;
          ctx.fillText('学年', pad + cw * 0.5, y + 22);
          ctx.fillText('完成学时', pad + cw * 1.5, y + 22);
          ctx.fillText('要求学时', pad + cw * 2.5, y + 22);
          y += 34;

          // 数据行
          for (let i = 0; i < studyRows; i++) {
            const row = d.studyHoursList[i];
            ctx.setFillStyle(i % 2 === 0 ? '#fffdf5' : '#faf6ec');
            ctx.fillRect(pad, y, tableW, 32);
            ctx.setStrokeStyle('#ebe3d0');
            ctx.strokeRect(pad, y, tableW, 32);
            ctx.setFontSize(12);
            ctx.setFillStyle('#4a3c2a');
            ctx.setTextAlign('center');
            ctx.fillText(String(row.academicYear || ''), pad + cw * 0.5, y + 20);
            ctx.fillText(String(row.completedStudyHours || ''), pad + cw * 1.5, y + 20);
            ctx.fillText(String(row.studyHoursRequirement || ''), pad + cw * 2.5, y + 20);
            y += 32;
          }

          // 累计行
          ctx.setFillStyle('#faf6ec');
          ctx.fillRect(pad, y, tableW, 32);
          ctx.setStrokeStyle('#ebe3d0');
          ctx.strokeRect(pad, y, tableW, 32);
          ctx.setFontSize(12);
          ctx.setFillStyle('#4a3c2a');
          ctx.setTextAlign('center');
          ctx.fillText('累计', pad + cw * 0.5, y + 20);
          ctx.fillText((d.totalStudyHours || '') + ' 学时', pad + cw * 1.5, y + 20);
          y += 32 + 20;
        }

        // 考试通过记录表
        if (examRows > 0) {
          ctx.setFillStyle('#c9a84c');
          ctx.fillRect(pad, y, 3, 20);
          ctx.setFontSize(14);
          ctx.setFillStyle('#8b4513');
          ctx.setTextAlign('left');
          ctx.fillText('考试通过记录', pad + 10, y + 16);
          y += 26;

          ctx.setFillStyle('#f5edd8');
          ctx.fillRect(pad, y, tableW, 34);
          ctx.setStrokeStyle('#d4c5a0');
          ctx.strokeRect(pad, y, tableW, 34);
          ctx.setFontSize(12);
          ctx.setFillStyle('#5a4320');
          ctx.setTextAlign('center');
          const cw2 = tableW / 3;
          ctx.fillText('学年', pad + cw2 * 0.5, y + 22);
          ctx.fillText('考试类型', pad + cw2 * 1.5, y + 22);
          ctx.fillText('成绩', pad + cw2 * 2.5, y + 22);
          y += 34;

          for (let i = 0; i < examRows; i++) {
            const row = d.examPassRecords[i];
            ctx.setFillStyle(i % 2 === 0 ? '#fffdf5' : '#faf6ec');
            ctx.fillRect(pad, y, tableW, 32);
            ctx.setStrokeStyle('#ebe3d0');
            ctx.strokeRect(pad, y, tableW, 32);
            ctx.setFontSize(12);
            ctx.setFillStyle('#4a3c2a');
            ctx.setTextAlign('center');
            ctx.fillText(String(row.academicYear || ''), pad + cw2 * 0.5, y + 20);
            ctx.fillText(String(row.examTypeName || ''), pad + cw2 * 1.5, y + 20);
            ctx.fillText(String(row.score || ''), pad + cw2 * 2.5, y + 20);
            y += 32;
          }
          y += 20;
        }

        // 描述文字
        ctx.setFontSize(14);
        ctx.setFillStyle('#4a3c2a');
        ctx.setTextAlign('left');
        const desc = `  该同学在校期间认真完成实验室安全教育各项学习任务，累计完成 ${d.totalStudyHours || ''} 学时安全培训，通过全部年度安全考核，具备良好的实验室安全意识和规范操作能力，特此证明。`;
        // 简单换行处理
        const maxWidth = tableW;
        const words = desc.split('');
        let line = '';
        for (let i = 0; i < words.length; i++) {
          const testLine = line + words[i];
          const metrics = ctx.measureText(testLine);
          if (metrics.width > maxWidth && line !== '') {
            ctx.fillText(line, pad, y);
            y += lineH;
            line = words[i];
          } else {
            line = testLine;
          }
        }
        if (line) { ctx.fillText(line, pad, y); y += lineH; }
        y += 40;

        // 落款
        ctx.setFontSize(14);
        ctx.setFillStyle('#4a3c2a');
        ctx.setTextAlign('right');
        ctx.fillText(d.issuingUnit || '', W - pad, y);
        y += 28;
        ctx.fillText(d.issuingTime || '', W - pad, y);

        ctx.draw(false, () => {
          wx.canvasToTempFilePath({
            canvasId: 'reportCanvas',
            x: 0,
            y: 0,
            width: W,
            height: H,
            destWidth: W * 2,
            destHeight: H * 2,
            fileType: 'jpg',
            quality: 1,
            success: (res) => {
              uni.hideLoading();
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: () => {
                  uni.showToast({ title: '已保存到相册', icon: 'success' });
                },
                fail: (err) => {
                  if (err.errMsg && err.errMsg.indexOf('auth deny') !== -1) {
                    uni.showModal({
                      title: '需要授权',
                      content: '请在设置中允许访问相册',
                      showCancel: false,
                    });
                  } else {
                    uni.showToast({ title: '保存失败，请重试', icon: 'none' });
                  }
                }
              });
            },
            fail: () => {
              uni.hideLoading();
              uni.showToast({ title: '图片生成失败', icon: 'none' });
            }
          }, this);
        });
      },
    }
  }
</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%;
    background: #fffdf5;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    max-height: 85vh;

    .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;
      overflow: hidden;
    }

    .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;
          background-color: #77161B;
          margin: 40rpx 0 0 24rpx;
          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 24rpx;
          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 24rpx 0 24rpx;

          .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 24rpx 0 24rpx;

          .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;
          }
        }
      }
    }

    .action-bar {
      display: flex;
      padding: 20rpx 32rpx;
      border-top: 1rpx solid #e8dcc8;
      background: #fffdf5;
      border-radius: 0 0 8rpx 8rpx;
      gap: 24rpx;

      .btn-close {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        color: #8b4513;
        border: 1rpx solid #c9a84c;
        border-radius: 8rpx;
        background: #fff;
      }

      .btn-save {
        flex: 2;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        color: #fff;
        background: #8b4513;
        border-radius: 8rpx;
      }
    }
  }
}
</style>