H5页面提交

linzhijie

2023-04-28 57f1b45ee6d64bc6bf6fc65b30a06434e032a4aa

H5页面提交

 dist.zip

Binary files differ

 public/SETPOINTÖ°ÒµÐËȤÁ¿±í·´À¡±¨¸æ1.0.pdf

Binary files differ

 src/assets/report/page1.jpg

 src/assets/report/page1.png

 src/assets/report/page2.png

 src/assets/report/page3.png

 src/assets/report/page4-1.png

 src/assets/report/page4.png

 src/assets/report/page5.png

 src/assets/style/rem

File was deleted

 src/assets/style/reset.css

File was deleted

 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>