H5页面提交

linzhijie

2023-04-28 57f1b45ee6d64bc6bf6fc65b30a06434e032a4aa

 src/views/pdf/reportH5.vue

@@ -1,22 +1,71 @@
<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 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 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>
  <!--<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 () {

  data() {
    return {
      condition: true
    }
  },
  mounted () {
    this.drawLine()
@@ -33,26 +82,31 @@
        legend: {},
        radar: {
          // shape: 'circle',
          nameGap: 25,
          nameGap: 15,
          center: ['50%', '50%'],
          // 圆中心坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
          radius: 120,
          // 圆的半径，数组的第一项是内半径，第二项是外半径。
          startAngle: 90,
          indicator: [
            {
              name: '健康科学', max: '100',
              //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
              axisLabel: {
                show: true,
                fontSize: 12,
                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'}
            { name: '事物', max: '100' },
            { name: '自然', max: '100' },
            { name: '影响', max: '100' },
            { name: '组织', max: '100' },
            { name: '人', max: '100' },
            { name: '科技', max: '100' },
            { name: '创造性表达', max: '100' }
          ],
          splitArea: {   //圆环区域样式
            areaStyle: {
@@ -60,13 +114,13 @@
              shadowColor: 'rgba(230, 230, 230, 0.5)',
              shadowBlur: 20,
              shadowOffsetY: '10',
              shadowOffsetX: '-10',
              shadowOffsetX: '-10'
            }
          },
          splitNumber: 4,
          axisName: {
            color: '#7F7F7F',
            fontSize: 18
            fontSize: 10
          },
          axisLine: {
            show: false,
@@ -85,12 +139,12 @@
              color: '#E5E3E3' //阴影
            },
            itemStyle: {//折线拐点标志的样式
              color: "#34BBC4",
              color: "#34BBC4"
            },
            lineStyle: {//线条样式
              color: "#C0BEBD"
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -111,7 +165,7 @@
                show: false, //隐藏标示线
              }
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -131,9 +185,9 @@
              width: 0,
              labelLine: {
                show: false //隐藏标示线
              },
              }
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -152,10 +206,10 @@
            lineStyle: {
              width: 0,
              labelLine: {
                show: false, //隐藏标示线
              },
                show: false //隐藏标示线
              }
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -174,10 +228,10 @@
            lineStyle: {
              width: 0,
              labelLine: {
                show: false, //隐藏标示线
              },
                show: false //隐藏标示线
              }
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -196,10 +250,10 @@
            lineStyle: {
              width: 0,
              labelLine: {
                show: false, //隐藏标示线
              },
                show: false //隐藏标示线
              }
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -221,7 +275,7 @@
                show: false //隐藏标示线
              },
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -243,7 +297,7 @@
                show: false //隐藏标示线
              }
            },
            symbolSize: 20,//圆点大小
            symbolSize: 13,//圆点大小
            symbol: "circle",//圆点样式
            data: [
              {
@@ -261,13 +315,17 @@
}
</script>
<style scoped>
  /* 背景图片*/
  .page1{
    background:url('~@/assets/report/page1.png');
    width: 100%;
    height: 100%;
    position:fixed;
    background-size:100% 100%;
  .report {
    position: relative
  }

  .report .word {
    position: absolute;
  }

  #app {
    max-width: 100vh;
    max-height: 100vh
  }

</style>