TAI_OTS_BROWSER.git

<template>
  <div id="app" style="margin:auto">
    <div class="report">
      <el-image :src="require('@/assets/report/page1.jpg')"></el-image>
      <div class="word" style="left: 25%;top: 68.6%;font-size: 0.8rem;color: #313157">{{ data.questionnaireTaker }}</div>
      <div class="word" style="left: 28.5%;top: 71.2%;font-size: 0.8rem;color: #313157">{{ data.reportGenerationDate }}</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">{{ data.PR_Dim01 }}</div>
      <div class="word" style="left: 40%;top: 6.3%;font-size: 0.8rem;color: #E1AD04">{{ data.PR_Dim02 }}</div>
      <div class="word" style="left: 40%;top: 9.3%;font-size: 0.8rem;color: #6D67AD">{{ data.PR_Dim03 }}</div>
      <div class="word" style="left: 40%;top: 12.3%;font-size: 0.8rem;color: #EC7864">{{ data.PR_Dim04 }}</div>
      <div class="word" style="left: 80%;top: 3.3%;font-size: 0.8rem;color: #D78EBB">{{ data.PR_Dim05 }}</div>
      <div class="word" style="left: 80%;top: 6.3%;font-size: 0.8rem;color: #E8497D">{{ data.PR_Dim06 }}</div>
      <div class="word" style="left: 80%;top: 9.3%;font-size: 0.8rem;color: #62BEA4">{{ data.PR_Dim07 }}</div>
      <div class="word" style="left: 80%;top: 12.3%;font-size: 0.8rem;color: #4976BA">{{ data.PR_Dim08 }}</div>
      <div class="word career" style="left: 14%;top: 36%;font-size: 0.6rem;font-weight: bold;line-height:1rem">
        1.{{data.occ1H}}<br>
        2.{{data.occ2H}}<br>
        3.{{data.occ3H}}<br>
        4.{{data.occ4H}}<br>
        5.{{data.occ5H}}<br>
        6.{{data.occ6H}}<br>
        7.{{data.occ7H}}<br>
        8.{{data.occ8H}}<br>
        9.{{data.occ9H}}<br>
        10.{{data.occ10H}}
      </div>
      <div class="word career" style="left: 14%;top: 71%;font-size: 0.6rem;font-weight: bold;line-height:1rem">
        1.{{data.occ1L}}<br>
        2.{{data.occ2L}}<br>
        3.{{data.occ3L}}<br>
        4.{{data.occ4L}}<br>
        5.{{data.occ5L}}<br>
        6.{{data.occ6L}}<br>
        7.{{data.occ7L}}<br>
        8.{{data.occ8L}}<br>
        9.{{data.occ9L}}<br>
        10.{{data.occ10L}}
      </div>
    </div>
    <div class="report">
      <div v-if="data.condition != null">
        <el-image :src="require('@/assets/report/page4.png')"></el-image>
      </div>
      <div v-if="data.condition == null">
        <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 examPaperApi from '@/api/examPaper'
 
export default {
  name: 'reportH5',
  data () {
    return {
      tokenId: this.$route.query.tokenId,
      condition: true,
      data: {
        occ1L: '地质勘探工程技术人员（比如地质矿产调查工程技术人员）',
        occ3L: '矿山工程技术人员（比如选矿与矿物加工工程技术人员）',
        PR_Dim01: 10,
        PR_Dim02: 20,
        PR_Dim03: 30,
        PR_Dim04: 40,
        occ5H: '食品行业品评师（比如乳品评鉴师、品酒师）',
        occ9L: '信息通信网络运行管理人员（比如信息通信网络运行管理员）',
        occ7H: '自然保护区和草地监护人员（比如自然保护区巡护监测员、草地监护员）',
        occ1H: '绿化与园艺服务人员（比如盆景师、插花花艺师）',
        occ5L: '机械工程技术人员（比如机械设计工程技术人员、自动控制工程技术人员）',
        occ3H: '植物保护技术人员',
        occ7L: '工业机器人操作运维人员（比如工业机器人系统运维员、）',
        occ10H: '陶瓷制品制造人员（比如陶瓷装饰工、古建琉璃工）',
        occ10L: '地质勘查人员（比如物探工、地质调查员）',
        occ8H: '绿化与园艺服务人员（比如园林绿化工、草坪园艺师）',
        PR_Dim05: 50,
        PR_Dim06: 60,
        PR_Dim07: 70,
        questionnaireTaker: '测试',
        PR_Dim08: 80,
        reportGenerationDate: '2023-04-29',
        occ2L: '测绘和地理信息工程技术人员（比如工程测量工程技术人员）',
        occ4H: '园艺技术人员',
        occ8L: '电子工程技术人员（比如电子材料/电子元器件工程技术人员）',
        occ6H: '康养、休闲服务人员（比如森林园林康养师）',
        occ4L: '冶金工程技术人员（比如冶金热能工程技术人员、稀土工程技术人员）',
        occ2H: '国土空间规划与生态修复工程技术人员（比如城乡规划工程技术人员）',
        occ6L: '航空工程技术人员（比如飞行器制造工程技术人员）',
        condition: '注：您在八个兴趣主题上的得分显示您的职业兴趣分化程度不高，因此职业推荐的结果可能不够精确。建议您在参考上述职业领域的同时，也应对其他职业领域保持开放态度。',
        occ9H: '野生动植物保护人员（比如野生植物保护员、展出动物保育员）'
      }
    }
  },
  created () {
    let _this = this
    // 查询报告文件名
    examPaperApi.selectTesterReportResult(_this.tokenId).then(re => {
      if (re.code === 0) {
        _this.data = re.data.data
        this.drawLine()
      }
      console.log(re)
    })
  },
  mounted () {
 
  },
  methods: {
    drawLine () {
      let _this = this
      // 基于准备好的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: [_this.data.PR_Dim01, _this.data.PR_Dim08, _this.data.PR_Dim07, _this.data.PR_Dim06, _this.data.PR_Dim05, _this.data.PR_Dim04, _this.data.PR_Dim03, _this.data.PR_Dim02]
              }
            ]
          },
          {
            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', _this.data.PR_Dim02]
              }
            ]
          },
          {
            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', _this.data.PR_Dim03, '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', _this.data.PR_Dim04, '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', _this.data.PR_Dim05, '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', _this.data.PR_Dim06, '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', _this.data.PR_Dim07, '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', _this.data.PR_Dim08, '1000', '1000', '1000', '1000', '1000', '1000']
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
.report {
  position: relative
}
 
.report .word {
  position: absolute;
}
 
.career {
  display: inline-block;
  width: 72%;
  /*超出部分隐藏*/
  /*overflow: hidden;*/
  /*文本不换行*/
  /*white-space: nowrap;*/
  /*超出不封用三个省略号代替*/
  /*text-overflow: ellipsis;*/
}
 
#app {
  max-width: 100vh;
  max-height: 100vh;
  background-color: white;
}
 
</style>