test

林致杰

2023-04-28 f4e70fb0ad404cfbd212a6b340393f5ecf998087

test

 package-lock.json

@@ -4734,6 +4734,22 @@
        }
      }
    },
    "echarts": {
      "version": "5.4.2",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
      "requires": {
        "tslib": "2.3.0",
        "zrender": "5.4.3"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -14019,6 +14035,21 @@
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    },
    "zrender": {
      "version": "5.4.3",
      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
      "requires": {
        "tslib": "2.3.0"
      },
      "dependencies": {
        "tslib": {
          "version": "2.3.0",
          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    }
  }
}

 src/assets/report/page2.png

 src/router.js

@@ -151,7 +151,7 @@
          path: 'view',
          component: () => import('@/views/pdf/reportView'),
          name: 'reportView',
          meta: { title: '报告预览' }
          meta: { title: 'reportView' }
        }
      ]
    },
@@ -162,8 +162,8 @@
        {
          path: 'h5',
          component: () => import('@/views/pdf/reportH5'),
          name: 'reportView',
          meta: { title: '报告预览' }
          name: 'reportH5',
          meta: { title: 'reportH5' }
        }
      ]
    }

 src/views/pdf/reportH5.vue

@@ -1,12 +1,22 @@
<template>
  <div id="page1" class="page1">
    <div style="left: 19%;position: absolute;top: 10.5%;font-weight: bold;font-size: 19px;"> 恭喜您注册成功!</div>
    <div style="left: 50%; position: absolute; top:27%; color: blue;font-weight:bold" id="show">个人反馈报告</div>
    <div style="left: 40%; position: absolute; top:31%;font-size:18px">测 试 者：【%questionnaireTaker%】</div>
    <div style="left: 40%; position: absolute; top:31%;font-size:18px">测试时间：【%reportGenerationDate%】</div>
    <div style="left: 40%; position: absolute; top:31%;font-size:18px">常    模：中国大学生</div>
  <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>
    <div style="height: 1700px;background-color: white">
      报告介绍
      职业兴趣是影响我们生涯选择的重要因素之一，从事与自己兴趣相关的职业也有助于我们在工作中取得较好的绩效表现以及工作满意度。我们依据职业兴趣SETPOINT模型（Su et al., 2019），并基于中国国情开发了本次测试的题目。本测验测量了您在八大职业兴趣主题上的得分，您的测试分数是在以中国人群为常模的基础上计算出的百分位数。另外，我们对《中华人民共和国职业分类大典（2022版）》中出现的职业类型进行了编码，并基于您的兴趣特点，生成了您可能最感兴趣的十个职业类型和您可能最不感兴趣的十个职业类型，帮助您更有效地探索职业生涯。任何心理测试都不可能做到完全精确，所以测试分数以及推荐的职业类型仅供您参考。
    </div>
  </div>
  <!--<div id="myChart" style="width: 100%; height: 500px; margin-top: 100px"></div>-->
</template>

<script>
@@ -15,259 +25,42 @@

export default {
  name: 'reportH5',
  data () {

  },
  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: 25,
          indicator: [
            {
              name: '健康科学', max: '100',
              //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
              axisLabel: {
                show: true,
                fontSize: 12,
                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: 18
          },
          axisLine: {
            show: false,
            lineStyle: {
              shadowColor: '#F5F4F4',
              shadowBlur: 10
            }
          }
        },
        series: [
          {
            name: '健康科学',
            type: 'radar',
            z: 1,
            areaStyle: {
              color: '#E5E3E3' //阴影
            },
            itemStyle: {//折线拐点标志的样式
              color: "#34BBC4",
            },
            lineStyle: {//线条样式
              color: "#C0BEBD"
            },
            symbolSize: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
                // 思想是：设置无线大，去掉链接线即可
                value: ['1000', '16', '1000', '1000', '1000', '1000', '1000', '1000'],
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
  /* 背景图片*/
  .page1{
    background:url('~@/assets/report/page1.png');
    width: 100%;
    height: 100%;
    position:fixed;
    background-size:100% 100%;
  }
/* 背景图片*/
.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%;
}

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

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

.font {
  font-family: 黑体;
}

</style>

 src/views/pdf/reportH5Bak.vue

New file
@@ -0,0 +1,298 @@
<template>
  <div>
    <div id="page1" class="page1 font">
      <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>
    <div style="height: 1700px;background-color: white">
      报告介绍
      职业兴趣是影响我们生涯选择的重要因素之一，从事与自己兴趣相关的职业也有助于我们在工作中取得较好的绩效表现以及工作满意度。我们依据职业兴趣SETPOINT模型（Su et al., 2019），并基于中国国情开发了本次测试的题目。本测验测量了您在八大职业兴趣主题上的得分，您的测试分数是在以中国人群为常模的基础上计算出的百分位数。另外，我们对《中华人民共和国职业分类大典（2022版）》中出现的职业类型进行了编码，并基于您的兴趣特点，生成了您可能最感兴趣的十个职业类型和您可能最不感兴趣的十个职业类型，帮助您更有效地探索职业生涯。任何心理测试都不可能做到完全精确，所以测试分数以及推荐的职业类型仅供您参考。
    </div>
  </div>
  <!--<div id="myChart" style="width: 100%; height: 500px; margin-top: 100px"></div>-->
</template>

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

export default {
  name: 'reportH5',
  data () {

  },
  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: 25,
          indicator: [
            {
              name: '健康科学', max: '100',
              //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
              axisLabel: {
                show: true,
                fontSize: 12,
                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: 18
          },
          axisLine: {
            show: false,
            lineStyle: {
              shadowColor: '#F5F4F4',
              shadowBlur: 10
            }
          }
        },
        series: [
          {
            name: '健康科学',
            type: 'radar',
            z: 1,
            areaStyle: {
              color: '#E5E3E3' //阴影
            },
            itemStyle: {//折线拐点标志的样式
              color: "#34BBC4",
            },
            lineStyle: {//线条样式
              color: "#C0BEBD"
            },
            symbolSize: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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: 20,//圆点大小
            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%;
  overflow:auto;
}

.bg {
  width: 500px;
  height: 300px;
  background:url('~@/assets/report/page1.png') no-repeat;
  border: 1px solid #72bf3d;
  /* background-size: contain; */
  /* background-size: cover; */
}

.font {
  font-family: 黑体;
}

</style>