H5

linzhijie

2023-04-27 9d8ad6de3ea97f5b1fe0c7034c2cb24e0fd1540c

H5

 package-lock.json

@@ -4718,6 +4718,22 @@
        "safer-buffer": "^2.1.0"
      }
    },
    "echarts": {
      "version": "5.4.2",
      "resolved": "https://registry.npmjs.org/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.npmjs.org/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",
@@ -13988,6 +14004,21 @@
          "dev": true
        }
      }
    },
    "zrender": {
      "version": "5.4.3",
      "resolved": "https://registry.npmjs.org/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.npmjs.org/tslib/-/tslib-2.3.0.tgz",
          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
        }
      }
    }
  }
}

 package.json

@@ -17,6 +17,7 @@
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "^2.6.9",
    "echarts": "^5.4.2",
    "element-ui": "^2.14.1",
    "es6-promise": "^4.2.8",
    "js-cookie": "2.2.0",

 src/assets/report/page1.png

 src/assets/style/rem

New file
@@ -0,0 +1,27 @@
;
(function(win){
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if(width>640){
            width = 640;
        }
        var rem = width /6.4;
        docEl.style.fontSize = rem +'px';
    }
    win.addEventListener('resize',function(){
        clearTimeout(tid);
        tid = setTimeout(refreshRem,300);
    },false);
    win.addEventListener('pageshow',function(e){
        if(e.persisted){
            clearTimeout(tid);
            tid = setTimeout(refreshRem,300);
        }
    },false);

    refreshRem();
})(window);

 src/assets/style/reset.css

New file
@@ -0,0 +1,95 @@
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* custom */
a {
    color: #7e8c8d;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
}

li {
    list-style: none;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

html, body {
    width: 100%;
}

body {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
    height: 100%;
    width: 100%;
    background: #f3f3f3;
}

 src/main.js

@@ -17,6 +17,10 @@

import 'babel-polyfill'
import promise from 'es6-promise'

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

promise.polyfill()

Vue.use(Element, {

 src/router.js

@@ -154,6 +154,18 @@
          meta: { title: '报告预览' }
        }
      ]
    },
    {
      path: '/pdf',
      component: Layout,
      children: [
        {
          path: 'h5',
          component: () => import('@/views/pdf/reportH5'),
          name: 'reportView',
          meta: { title: '报告预览' }
        }
      ]
    }
  ]
})

 src/views/pdf/reportH5.vue

New file
@@ -0,0 +1,273 @@
<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="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{
    background:url('~@/assets/report/page1.png');
    width: 100%;
    height: 100%;
    position:fixed;
    background-size:100% 100%;
  }

</style>