H5页面提交

linzhijie

2023-04-28 57f1b45ee6d64bc6bf6fc65b30a06434e032a4aa

 src/views/pdf/reportH5.vue

@@ -1,66 +1,331 @@
<template>
  <div>
    <div id="page1" style="margin-top: 16%;">
      <el-image :src="require('@/assets/report/page1.png')">
      </el-image>
      <div style="left: 19%;position: absolute;top: 12%;font-weight: bold;font-size: 1rem;">中国大学生职业兴趣量表</div>
      <div style="left: 9%;position: absolute;top: 65%;font-weight: bold;font-size: 2.1rem;">个人反馈报告</div>
      <div style="left: 10%;position: absolute;top: 72%;font-size: 0.1rem;">测 试 者：【%questionnaireTaker%】</div>
      <div style="left: 10%;position: absolute;top: 74%;font-size: 0.1rem;">测试时间：【%reportGenerationDate%】</div>
      <div style="left: 10%;position: absolute;top: 76%;font-size: 0.1rem;">常    模：中国大学生</div>
      <div style="left: 10%; position: absolute; top: 79%; font-size: 0.1rem;">报告主要内容：</div>
      <div style="left: 10%;position: absolute;top: 81%;font-size: 0.1rem;">1.   八大职业兴趣主题的介绍及个人分数</div>
      <div style="left: 10%;position: absolute;top: 83%;font-size: 0.1rem;width: 85%;">2.   基于《中华人民共和国职业分类大典（2022版）》生成的个人职业方向或领域的推荐清单</div>
  <div id="app">
    <div class="report">
      <el-image :src="require('@/assets/report/page1.jpg')"></el-image>
      <div class="word" style="left: 23.5%;top: 68.6%;font-size: 0.8rem;color: #313157">【林致杰】</div>
      <div class="word" style="left: 27%;top: 71.2%;font-size: 0.8rem;color: #313157">【2023/04/28】</div>
    </div>
    <div style="height: 1700px;background-color: white">
      报告介绍
      职业兴趣是影响我们生涯选择的重要因素之一，从事与自己兴趣相关的职业也有助于我们在工作中取得较好的绩效表现以及工作满意度。我们依据职业兴趣SETPOINT模型（Su et al., 2019），并基于中国国情开发了本次测试的题目。本测验测量了您在八大职业兴趣主题上的得分，您的测试分数是在以中国人群为常模的基础上计算出的百分位数。另外，我们对《中华人民共和国职业分类大典（2022版）》中出现的职业类型进行了编码，并基于您的兴趣特点，生成了您可能最感兴趣的十个职业类型和您可能最不感兴趣的十个职业类型，帮助您更有效地探索职业生涯。任何心理测试都不可能做到完全精确，所以测试分数以及推荐的职业类型仅供您参考。
    <div class="report">
      <el-image :src="require('@/assets/report/page2.png')"></el-image>
      <div id="myChart" style="width: 100%; height: 300px; "></div>
    </div>

    <div class="report">
      <el-image :src="require('@/assets/report/page3.png')"></el-image>
      <div class="word" style="left: 40%;top: 3.3%;font-size: 0.8rem;color: #34BBC4">12</div>
      <div class="word" style="left: 40%;top: 6.3%;font-size: 0.8rem;color: #E1AD04">12</div>
      <div class="word" style="left: 40%;top: 9.3%;font-size: 0.8rem;color: #6D67AD">12</div>
      <div class="word" style="left: 40%;top: 12.3%;font-size: 0.8rem;color: #EC7864">12</div>
      <div class="word" style="left: 80%;top: 3.3%;font-size: 0.8rem;color: #D78EBB">12</div>
      <div class="word" style="left: 80%;top: 6.3%;font-size: 0.8rem;color: #E8497D">12</div>
      <div class="word" style="left: 80%;top: 9.3%;font-size: 0.8rem;color: #62BEA4">12</div>
      <div class="word" style="left: 80%;top: 12.3%;font-size: 0.8rem;color: #4976BA">12</div>
      <div class="word" style="left: 14%;top: 36.3%;font-size: 0.6rem;font-weight: bold;line-height:25px">
        1.%occ1H%<br>
        2.%occ2H%<br>
        3.%occ3H%<br>
        4.%occ4H%<br>
        5.%occ5H%<br>
        6.%occ6H%<br>
        7.%occ7H%<br>
        8.%occ8H%<br>
        9.%occ9H%<br>
        10.%occ10H%
      </div>
      <div class="word" style="left: 14%;top: 72%;font-size: 0.6rem;font-weight: bold;line-height:25px">
        1.%occ1H%<br>
        2.%occ2H%<br>
        3.%occ3H%<br>
        4.%occ4H%<br>
        5.%occ5H%<br>
        6.%occ6H%<br>
        7.%occ7H%<br>
        8.%occ8H%<br>
        9.%occ9H%<br>
        10.%occ10H%
      </div>
    </div>
    <div class="report">
      <div v-if="condition == 1">
        <el-image :src="require('@/assets/report/page4.png')"></el-image>
      </div>
      <div v-if="condition == 0">
        <el-image :src="require('@/assets/report/page4-1.png')"></el-image>
      </div>
    </div>
    <div class="report">
      <el-image :src="require('@/assets/report/page5.png')"></el-image>
    </div>
  </div>
</template>

<script>
// import '@/assets/style/rem'
// import '@/assets/style/reset.css'

export default {
  name: 'reportH5',
  data() {
    return {
      condition: true
    }
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let option = {
        title: {
          text: '职业兴趣主题得分',
          show: false
        },
        legend: {},
        radar: {
          // shape: 'circle',
          nameGap: 15,
          center: ['50%', '50%'],
          // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
          radius: 120,
          // 圆的半径，数组的第一项是内半径，第二项是外半径。
          startAngle: 90,
          indicator: [
            {
              name: '健康科学', max: '100',
              //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
              axisLabel: {
                show: true,
                fontSize: 8,
                color: '#7F7F7F',
                showMaxLabel: true, //不显示最大值，即外圈不显示数字30
                showMinLabel: true, //显示最小数字，即中心点显示0
              }
            },
            { name: '事物', max: '100' },
            { name: '自然', max: '100' },
            { name: '影响', max: '100' },
            { name: '组织', max: '100' },
            { name: '人', max: '100' },
            { name: '科技', max: '100' },
            { name: '创造性表达', max: '100' }
          ],
          splitArea: {   //圆环区域样式
            areaStyle: {
              color: ['#fff', '#fff', '#fff'],
              shadowColor: 'rgba(230, 230, 230, 0.5)',
              shadowBlur: 20,
              shadowOffsetY: '10',
              shadowOffsetX: '-10'
            }
          },
          splitNumber: 4,
          axisName: {
            color: '#7F7F7F',
            fontSize: 10
          },
          axisLine: {
            show: false,
            lineStyle: {
              shadowColor: '#F5F4F4',
              shadowBlur: 10
            }
          }
        },
        series: [
          {
            name: '健康科学',
            type: 'radar',
            z: 1,
            areaStyle: {
              color: '#E5E3E3' //阴影
            },
            itemStyle: {//折线拐点标志的样式
              color: "#34BBC4"
            },
            lineStyle: {//线条样式
              color: "#C0BEBD"
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                value: [50, 16, 22, 78, 55, 82, 67, 23],
              }
            ]
          },
          {
            name: '创造性表达',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#E1AD04"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false, //隐藏标示线
              }
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '1000', '1000', '1000', '1000', '1000', '1000', 23]
              }
            ]
          },
          {
            name: '科技',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#6D67AD"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              }
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '1000', '1000', '1000', '1000', '1000', '67', '1000']
              }
            ]
          },
          {
            name: '人',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#EC7864"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              }
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '1000', '1000', '1000', '1000', '82', '1000', '1000']
              }
            ]
          },
          {
            name: '组织',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#D78EBB"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              }
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '1000', '1000', '1000', '55', '1000', '1000', '1000']
              }
            ]
          },
          {
            name: '影响',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#E8497D"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              }
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '1000', '1000', '78', '1000', '1000', '1000', '1000'],
              }
            ]
          },
          {
            name: '自然',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#62BEA4"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              },
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '1000', '22', '1000', '1000', '1000', '1000', '1000'],
              }
            ]
          },
          {
            name: '事物',
            type: 'radar',
            z: 2,
            itemStyle: {//折线拐点标志的样式
              color: "#4976BA"
            },
            lineStyle: {
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              }
            },
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '16', '1000', '1000', '1000', '1000', '1000', '1000'],
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
/* 背景图片*/
.page1{
  margin-top: 50px;
  background:url('~@/assets/report/page1.png') no-repeat;
  width: 100%;
  height: 100%;
  position:fixed;
  background-size: cover;
  background-size:100% 100%;
}
  .report {
    position: relative
  }

.one {
  background:url('~@/assets/report/page1.png') no-repeat;
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
}
  .report .word {
    position: absolute;
  }

.two {
  background:url('~@/assets/report/page2.png') no-repeat;
  width: 100%;
  height: 100%;
  position:fixed;
  background-size:100% 100%;
}

.font {
  font-family: 黑体;
}
  #app {
    max-width: 100vh;
    max-height: 100vh
  }

</style>