CIAQ报告预览支持

林致杰

2023-05-01 ba3091c2e072d728344bc04db8adb1b5dece2bf0

CIAQ报告预览支持

 src/api/examPaper.js

@@ -9,5 +9,6 @@
  updateTestMemberStatus: tokenId => postOts('/api/exam/exampaper/answer/updateTestMemberStatus/' + tokenId),
  selectTesterReport: tokenId => postOts('/api/exam/paper/testerReport/' + tokenId),
  down: (fileName) => get('/api/exam/paper/download?fileName=' + fileName + '&delete=false'),
  selectTesterReportUrl: tokenId => postOts('/api/exam/paper/selectTesterReportUrl/' + tokenId)
  selectTesterReportUrl: tokenId => postOts('/api/exam/paper/selectTesterReportUrl/' + tokenId),
  selectTesterReportResult: tokenId => postOts('/api/exam/paper/selectTesterReportResult/' + tokenId)
}

 src/router.js

@@ -144,26 +144,26 @@
      ]
    },
    {
      path: '/pdf',
      path: '/report',
      component: Layout,
      children: [
        {
          path: 'view',
          component: () => import('@/views/pdf/reportView'),
          component: () => import('@/views/report/reportView'),
          name: 'reportView',
          meta: { title: 'reportView' }
          meta: { title: 'PDF报告' }
        }
      ]
    },
    {
      path: '/pdf',
      path: '/report',
      component: Layout,
      children: [
        {
          path: 'h5',
          component: () => import('@/views/pdf/reportH5'),
          component: () => import('@/views/report/reportH5'),
          name: 'reportH5',
          meta: { title: 'reportH5' }
          meta: { title: 'H5报告' }
        }
      ]
    }

 src/views/exam/paper/finish.vue

@@ -10,8 +10,11 @@
        <H1 v-if ="downDisable">{{$t('finishPersonalityDownInfo')}}</H1>
        <el-button type="danger" v-if ="downDisable" @click="downReport" round>{{$t('down')}}</el-button>
        <!-- 新增预览提示语 -->
        <H1 v-if ="viewDisable">{{$t('finishViewReportInfo')}}</H1>
        <el-button type="danger" v-if ="viewDisable" @click="viewReport" round>{{$t('view')}}</el-button>
<!--        <H1 v-if ="viewDisable">{{$t('finishViewReportInfo')}}</H1>-->
<!--        <el-button type="danger" v-if ="viewDisable" @click="viewReport" round>{{$t('view')}}</el-button>-->
        <!--  -->
        <H1 v-if ="type == 'CIAQ'">{{$t('finishViewReportInfo')}}</H1>
        <el-button type="danger" v-if ="type == 'CIAQ'" @click="viewReportH5" round>{{$t('view')}}</el-button>
      </el-main>
    </el-container>
  </div>
@@ -46,17 +49,17 @@
      }
    })

    // 查询报告文件名
    examPaperApi.selectTesterReportUrl(_this.tokenId).then(re => {
      if (re.code === 0) {
        _this.viewDisable = true
        // 设置预览路径
        _this.viewUrl = re.msg
        console.log(re)
      } else {
        console.log(re)
      }
    })
    // CIAQ PDF预览Url
    // examPaperApi.selectTesterReportUrl(_this.tokenId).then(re => {
    //   if (re.code === 0) {
    //     _this.viewDisable = true
    //     // 设置预览路径
    //     _this.viewUrl = re.msg
    //     console.log(re)
    //   } else {
    //     console.log(re)
    //   }
    // })
  },
  mounted () {

@@ -72,7 +75,12 @@
    // 预览报告
    viewReport: function () {
      let _this = this
      _this.$router.push({ path: '/pdf/view', query: { fileUrl: _this.viewUrl } })
      _this.$router.push({ path: '/report/view', query: { fileUrl: _this.viewUrl } })
    },
    // 预览报告(H5)
    viewReportH5: function () {
      let _this = this
      _this.$router.push({ path: '/report/h5', query: { tokenId: _this.tokenId } })
    }
  },
  computed: {

 src/views/pdf/reportH5.vue

File was deleted

 src/views/report/reportH5.vue

New file
@@ -0,0 +1,391 @@
<template>
  <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">【{{ data.questionnaireTaker }}】</div>
      <div class="word" style="left: 27%;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.3%;font-size: 0.6rem;font-weight: bold;line-height:25px">
        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: 72%;font-size: 0.6rem;font-weight: bold;line-height:25px">
        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: 260px;
  /*超出部分隐藏*/
  overflow: hidden;
  /*文本不换行*/
  white-space: nowrap;
  /*超出不封用三个省略号代替*/
  text-overflow: ellipsis;
}

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

</style>

 src/views/report/reportH5Bak.vue

 src/views/report/reportView.vue

File was renamed from src/views/pdf/reportView.vue
@@ -25,7 +25,7 @@
    initPdf () {
      // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
      // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
      this.pdfh5 = new Pdfh5('#pdf-content', {
      this.pdfh5 = new Pdfh5('#report-content', {
        pdfurl: this.pdfUrl,
        goto: 1
        // 设置每一页pdf上的水印