Merge branch 'v13-20230413'

阳洁

2023-05-10 93f30ecb74eea1c7ed460d45bc01df2ef14d69a3

Merge branch 'v13-20230413'

合并价值观与职业兴趣分支

 dist.zip

Binary files differ

 package-lock.json

@@ -2514,8 +2514,8 @@
    },
    "async-validator": {
      "version": "1.8.5",
      "resolved": "http://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
      "requires": {
        "babel-runtime": "6.x"
      }
@@ -2717,8 +2717,8 @@
    },
    "babel-helper-vue-jsx-merge-props": {
      "version": "2.0.3",
      "resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
    },
    "babel-loader": {
      "version": "8.0.6",
@@ -3568,7 +3568,8 @@
      "version": "4.6.0",
      "resolved": "http://registry.npm.taobao.org/co/download/co-4.6.0.tgz",
      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
      "dev": true
      "dev": true,
      "optional": true
    },
    "coa": {
      "version": "2.0.2",
@@ -4364,8 +4365,7 @@
    "de-indent": {
      "version": "1.0.2",
      "resolved": "http://registry.npm.taobao.org/de-indent/download/de-indent-1.0.2.tgz",
      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
      "dev": true
      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
    },
    "debug": {
      "version": "4.1.1",
@@ -4718,6 +4718,38 @@
        "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=="
        }
      }
    },
    "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",
@@ -4737,9 +4769,9 @@
      "dev": true
    },
    "element-ui": {
      "version": "2.10.1",
      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.10.1.tgz?cache=0&sync_timestamp=1562053824530&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felement-ui%2Fdownload%2Felement-ui-2.10.1.tgz",
      "integrity": "sha1-EBEBblDnb12ub7+chuU7blP8ues=",
      "version": "2.15.13",
      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.13.tgz",
      "integrity": "sha512-LJoatEYX6WV74FqXBss8Xfho9fh9rjDSzrDrTyREdGb1h1R3uRvmLh5jqp2JU137aj4/BgqA3K06RQpQBX33Bg==",
      "requires": {
        "async-validator": "~1.8.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -6115,7 +6147,8 @@
        "ansi-regex": {
          "version": "2.1.1",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -6136,12 +6169,14 @@
        "balanced-match": {
          "version": "1.0.0",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -6156,17 +6191,20 @@
        "code-point-at": {
          "version": "1.1.0",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -6283,7 +6321,8 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -6295,6 +6334,7 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -6309,6 +6349,7 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -6316,12 +6357,14 @@
        "minimist": {
          "version": "0.0.8",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@@ -6340,6 +6383,7 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -6420,7 +6464,8 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -6432,6 +6477,7 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -6517,7 +6563,8 @@
        "safe-buffer": {
          "version": "5.1.2",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -6553,6 +6600,7 @@
          "version": "1.0.2",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -6572,6 +6620,7 @@
          "version": "3.0.1",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -6615,12 +6664,14 @@
        "wrappy": {
          "version": "1.0.2",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        },
        "yallist": {
          "version": "3.0.3",
          "bundled": true,
          "dev": true
          "dev": true,
          "optional": true
        }
      }
    },
@@ -6971,8 +7022,7 @@
    "he": {
      "version": "1.2.0",
      "resolved": "http://registry.npm.taobao.org/he/download/he-1.2.0.tgz",
      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8=",
      "dev": true
      "integrity": "sha1-hK5l+n6vsWX922FWauFLrwVmTw8="
    },
    "hex-color-regex": {
      "version": "1.1.0",
@@ -9001,8 +9051,8 @@
    },
    "normalize-wheel": {
      "version": "1.0.1",
      "resolved": "http://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
    },
    "normalize.css": {
      "version": "8.0.1",
@@ -9521,6 +9571,11 @@
        "safe-buffer": "^5.0.1",
        "sha.js": "^2.4.8"
      }
    },
    "pdfh5": {
      "version": "1.4.2",
      "resolved": "https://registry.npmmirror.com/pdfh5/-/pdfh5-1.4.2.tgz",
      "integrity": "sha512-1BL8HIx/EEZowRPBgas7/WokbGEv1gxKNRmmHSimG113178mKxIBH4pxWBc0tj6d25Sy+EwnlQwv9cUUmQa42w=="
    },
    "performance-now": {
      "version": "2.1.0",
@@ -10872,8 +10927,8 @@
    },
    "resize-observer-polyfill": {
      "version": "1.5.1",
      "resolved": "http://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
    },
    "resolve": {
      "version": "1.10.0",
@@ -10989,7 +11044,8 @@
      "version": "4.0.8",
      "resolved": "http://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
      "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
      "dev": true
      "dev": true,
      "optional": true
    },
    "rx-lite-aggregates": {
      "version": "4.0.8",
@@ -11755,6 +11811,11 @@
      "requires": {
        "is-plain-obj": "^1.0.0"
      }
    },
    "sortablejs": {
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
    },
    "source-list-map": {
      "version": "2.0.1",
@@ -12569,8 +12630,8 @@
    },
    "throttle-debounce": {
      "version": "1.1.0",
      "resolved": "http://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
    },
    "through": {
      "version": "2.3.8",
@@ -13294,7 +13355,6 @@
      "version": "2.6.10",
      "resolved": "http://registry.npm.taobao.org/vue-template-compiler/download/vue-template-compiler-2.6.10.tgz",
      "integrity": "sha1-MjtPNJXwT6o1AzN6gvXWUHeZycw=",
      "dev": true,
      "requires": {
        "de-indent": "^1.0.2",
        "he": "^1.1.0"
@@ -13305,6 +13365,14 @@
      "resolved": "http://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz",
      "integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
      "dev": true
    },
    "vuedraggable": {
      "version": "2.24.3",
      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
      "requires": {
        "sortablejs": "1.10.2"
      }
    },
    "vuex": {
      "version": "3.1.0",
@@ -13952,6 +14020,36 @@
          "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=="
        }
      }
    },
    "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=="
        }
      }
    }
  }
}

 package.json

@@ -17,11 +17,13 @@
  "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",
    "normalize.css": "8.0.1",
    "nprogress": "0.2.0",
    "pdfh5": "^1.4.2",
    "vue": "2.6.10",
    "vue-i18n": "^8.15.3",
    "vue-router": "^3.0.3",

 src/api/examPaper.js

@@ -8,5 +8,7 @@
  pageList: query => post('/api/student/exam/paper/pageList', query),
  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')
  down: (fileName) => get('/api/exam/paper/download?fileName=' + fileName + '&delete=false'),
  selectTesterReportUrl: tokenId => postOts('/api/exam/paper/selectTesterReportUrl/' + tokenId),
  selectTesterReportResult: tokenId => postOts('/api/exam/paper/selectTesterReportResult/' + tokenId)
}

 src/assets/report/page1.jpg

 src/assets/report/page1.png

 src/assets/report/page2.png

 src/assets/report/page3.png

 src/assets/report/page4-1.png

 src/assets/report/page4.png

 src/assets/report/page5.png

 src/lang/en.js

@@ -2,6 +2,7 @@
  start: 'Continue testing',
  submission: 'submit',
  down: 'download report',
  view: 'view report',
  lastQuestion: 'Last',
  nextQuestion: 'Next',
  recommendedTime: 'Recommended Time:',
@@ -51,7 +52,9 @@
  partRemailTime: 'Remaining Time:',
  finishIntelligenceInfo: 'You have completed the cognitive ability test questionnaire, the data has been successfully uploaded to the server, and has been saved. Thank you.',
  finishPersonalityInfo: 'You have completed the personality quetionnaire, and the data has been successfully uploaded to the server and saved. ',
  finishCareerInterestsInfo: 'You have completed the Career Interests quetionnaire, and the data has been successfully uploaded to the server and saved. ',
  finishPersonalityDownInfo: 'You may click the red button below to download your test report.',
  finishViewReportInfo: 'You can click on the red button below to view your result report.',
  langWelcomeThai: 'ยินดีตอนรับสู่เว็บไซย์สำหรับทำแบบทดสอบของ',
  langOptionThai: 'กรุณาเลือกภาษา และคลิก “ดำเนินการต่อ.',
    values_finishValuesInfo:'Thank you! Your responses have been submitted. You can close this page now.',

 src/lang/th.js

@@ -2,6 +2,7 @@
  start: 'Continue testing',
  submission: 'submit',
  down: 'download report',
  view: 'view report',
  lastQuestion: 'Last',
  nextQuestion: 'Next',
  recommendedTime: 'Recommended Time:',
@@ -51,7 +52,9 @@
  partRemailTime: 'Remaining Time:',
  finishIntelligenceInfo: 'You have completed the cognitive ability test questionnaire, the data has been successfully uploaded to the server, and has been saved. Thank you.',
  finishPersonalityInfo: 'You have completed the personality quetionnaire, and the data has been successfully uploaded to the server and saved. ',
  finishCareerInterestsInfo: 'You have completed the Career Interests quetionnaire, and the data has been successfully uploaded to the server and saved. ',
  finishPersonalityDownInfo: 'You may click the red button below to download your test report.',
  finishViewReportInfo: 'You can click on the red button below to view your result report.',
  langWelcomeThai: 'ยินดีตอนรับสู่เว็บไซย์สำหรับทำแบบทดสอบของ',
  langOptionThai: 'กรุณาเลือกภาษา และคลิก “ดำเนินการต่อ.'
}

 src/lang/zh.js

@@ -2,6 +2,7 @@
  start: '继续测试',
  submission: ' 提交',
  down: '下载报告',
  view: '查看报告',
  lastQuestion: '回到上一题',
  nextQuestion: '下一题',
  recommendedTime: '建议时间：',
@@ -51,7 +52,9 @@
  partRemailTime: '剩余时间:',
  finishIntelligenceInfo: '您已经完成了认知能力测试问卷，数据已经成功的上传至服务器，并已经保存好。谢谢。',
  finishPersonalityInfo: '您已经完成了人格测试问卷，数据已经成功的上传至服务器，并已经保存好。',
  finishCareerInterestsInfo: '您已经完成了职业兴趣问卷，数据已经成功的上传至服务器，并已经保存好。',
  finishPersonalityDownInfo: '您可以点击下面红色按钮下载您的结果报告。',
  finishViewReportInfo: '您可以点击下面红色按钮查看您的结果报告。',
  langWelcomeThai: 'ยินดีตอนรับสู่เว็บไซย์สำหรับทำแบบทดสอบของ',
  langOptionThai: 'กรุณาเลือกภาษา และคลิก “ดำเนินการต่อ.',
    values_finishValuesInfo: '测试结束！您的所有选项数据已经上传至服务器，并已保存好。您可以关闭浏览器，退出答题界面。',

 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

@@ -130,6 +130,36 @@
              meta: { title: 'values' }
            }
          ]
    },
    {
      path: '/exam',
      component: Layout,
      children: [
        {
          path: 'career_interests',
          component: () => import('@/views/exam/paper/career_interests'),
          name: 'ExamPaperCareerInterests',
          meta: { title: 'career_interests' }
        }
      ]
    },
    {
      path: '/report',
      component: Layout,
      children: [
        {
          path: 'view',
          component: () => import('@/views/report/reportView'),
          name: 'reportView',
          meta: { title: 'PDF报告' }
        }
      ]
    },
    {
      path: '/report/h5',
      component: () => import('@/views/report/reportH5'),
      name: 'reportH5',
      meta: { title: 'H5报告' }
        }
  ]
})

 src/views/demography/index.vue

@@ -56,20 +56,23 @@
        </div>
        <div v-if="item.types=='select' && item.isRequired =='1'">
          <el-form-item :label="item.paramName"
                        :prop="'data.'+index+'.paramValue'"
                        :rules="[{ required: true, message: $t('required'),trigger: 'change'}]">
            <el-select v-model="item.paramValue" :placeholder= "$t('pleaseSelect')">
            <el-select v-model="item.paramValue" :placeholder= "$t('pleaseSelect')" :popper-append-to-body="false">
              <el-option
                v-for="itemIter in item.dictData"
                :key="itemIter.dictValue"
                :label="itemIter.dictLabel"
                :value="itemIter.dictValue">
                :value="itemIter.dictValue"
                :title="itemIter.dictLabel">
                <span>{{ itemIter.dictLabel }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="item.types=='select' && item.isRequired !='1'">
          <el-form-item :label="item.paramName">
            <el-select v-model="item.paramValue" :placeholder= "$t('pleaseSelect')">
            <el-select v-model="item.paramValue" :placeholder= "$t('pleaseSelect')" :popper-append-to-body="false">
              <el-option
                v-for="itemIter in item.dictData"
                :key="itemIter.dictValue"
@@ -115,6 +118,7 @@
    submitDemography: function () {
      let _this = this
      _this.submitDisable = true
      console.log( this.$refs.demographyMenber)
      this.$refs.demographyMenber.validate(vaild => {
        if (vaild) {
          _this.parasInfos = []
@@ -214,4 +218,27 @@
  .align-center {
    text-align: center
  }

/*  .product-style /deep/ .el-select-dropdown__item {
    width: 300px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }*/

  //样式修改部分
  .el-select .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item{
    white-space: pre-wrap;
    color: #606266;
    height: auto;
    font-weight: normal;
    width: 300px;
  }
  /*.el-select .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view .el-select-dropdown__item.selected{
    background: #0090FF;
    color: #fff;
    font-weight: 700
  }*/

</style>

 src/views/demography/login.vue

@@ -18,7 +18,8 @@
      parasInfos: [],
      parasInfoIds: {},
      formDo: {},
      statusInfo: { '2': this.$t('statusInfo2'), '3': this.$t('statusInfo3'), '4': this.$t('statusInfo4') }
      statusInfo: { '2': this.$t('statusInfo2'), '3': this.$t('statusInfo3'), '4': this.$t('statusInfo4') },
      doUrl: null
    }
  },
  created () {
@@ -35,6 +36,7 @@
      } else if (re.response.status !== '1') {
        _this.$router.push({ path: '/exam/exception', query: { name: '', content: _this.statusInfo[re.response.status] } })
      } else {
        _this.doUrl = re.response.doUrl
        _this.setMemberTocken(_this.paraMemberToken)
        _this.setDoUrl(re.response.doUrl)
        _this.setReportTemplateId(re.response.reportTemplateId)
@@ -50,6 +52,14 @@
      demographyApi.queryDemographyParamInfo(_this.paraMemberToken).then(
        reParam => {
          if (reParam.code !== 1) {
            // 职业兴趣报告特殊化处理 只有中文
            if(_this.doUrl === 'career_interests') {
              _this.$i18n.locale = 'zh'
              _this.setLangType('Chinese')
              _this.$router.push({ path: '/demography/fill/index', query: { demographyMenber: _this.memberToken, isStart: false } })
              return
            }

            // 先选择密码
            _this.$router.push({ path: '/demography/fill/langOption', query: { langSelectValue: _this.langType } })
            _this.setMemberTocken(_this.paraMemberToken)

 src/views/exam/components/QuestionEdit.vue

@@ -57,7 +57,7 @@
  name: 'QuestionShow',
  data () {
    return {
      abcValue: { '1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E', '6': 'F' }
      abcValue: { '1': 'A', '2': 'B', '3': 'C', '4': 'D', '5': 'E', '6': 'F', '7': 'G', '8': 'H', '9': 'I', '10': 'J' }
    }
  },
  props: {

 src/views/exam/paper/career_interests.vue

New file
@@ -0,0 +1,570 @@
<template>
  <div>
    <el-container  class="app-item-contain">
      <el-header class="align-center" v-if="guide">
        <h1></h1>
      </el-header>
      <el-main style="padding-top: 3%;">
        <div v-html="guideDescirption" v-if="guide" :style="ismobile?'padding-top: 2%;margin-top: 5%;':'padding-top: 2%;margin: 0 auto;width:66%'"></div>
        <el-row class="do-align-center" v-if="guide">
          <el-button @click="startDo" type="primary" :disable="startDoDisable">{{$t('start')}}</el-button>
        </el-row >
        <el-form :model="form" ref="form" v-loading="formLoading" label-width="100%" v-else>
          <el-row :key="index"  v-for="(titleItem,index) in titleItems">
            <div class="q-content">{{titleItem.description}}</div>
            <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0"  style="border:2px solid #2b90ff;">
              <div class="align-center"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">●{{form.name}}●</span></div>
              <hr style="border : 1px dashed #b3d8ff;" />
              <el-form-item :key="itemOrder" label-width="1px">
                <QuestionEdit @callNextSubject="nextSubject" :qType="questionItem.questionType" :question="questionItem"
                              :answer="answer.answerItems[questionItem.itemOrder-1]" :qLabel="itemOrder+'/'+itemSize"/>
              </el-form-item>
              <hr style="border : 0.5px dashed #b3d8ff;" />
              <div style="color: red;font-size: smaller">{{$t('pleaseAnswerCarefully')}}</div>
              <el-row class="do-align-center" v-if="order < problemLength">
            <el-button @click="preSubject" type="warning"  v-if ="preDisable" round>{{$t('lastQuestion')}}</el-button>
            <el-button @click="nextSubject" type="primary" v-if ="nextDisable" round>{{$t('nextQuestion')}}</el-button>
          </el-row>
          <el-row class="do-align-center" v-else>
            <el-button @click="preSubject" type="warning" v-if ="preDisable" round>{{$t('lastQuestion')}}</el-button>
            <el-button @click="submitForm" type="primary" :disabled="submitDisable" round>{{$t('submission')}}</el-button>
          </el-row>
            </el-card>
          </el-row>
        </el-form>

      </el-main>
    </el-container>
    <el-row class="do-exam-title footer">
      <el-col :span="24">
        <!--<el-popover placement="top" title="题目列表" width="200" trigger="click" ref="popovertag">-->
          <!--<el-tag type="success" slot="reference">题目</el-tag>-->
          <!--<span :key="item.itemOrder" v-for="(item) in answer.answerItems">-->
             <!--<el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag"-->
                     <!--&gt;{{item.itemOrder}}</el-tag>-->
        <!--</span>-->
        <!--</el-popover>-->
        <span class="do-exam-time">
          <!--<label>{{$t('remainingTime')}}</label>-->
          <!--<label>{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</label>-->
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import { formatSeconds, formatSecondsG, formatDate } from '@/utils'
import QuestionEdit from '../components/QuestionEdit'
import examPaperApi from '@/api/examPaper'
import examPaperAnswerApi from '@/api/examPaperAnswer'
import demographyApi from '@/api/demography'
export default {
  name: 'career_interests',
  components: { QuestionEdit },
  data () {
    return {
      form: {},
      formLoading: false,
      answer: {
        questionId: null,
        doTime: 0,
        answerItems: [],
        verifyStatus: 2
      },
      timer: null,
      problemLength: 0,
      titleItemsLength: 0,
      remainTime: 0,
      titleItemName: '', // 考试第二标题
      itemOrder: '', // 题目的序号
      questionItem: {}, // 题目
      titleItems: [],
      order: 0,
      guide: false,
      answered: [],
      submitDisable: true,
      doTime: 0,
      preDisable: false,
      nextDisable: false,
      partOrder: 0,
      parts: [],
      guideTitle: '',
      guideDescirption: '',
      isCallTain: '',
      isSignalObject: '',
      memberName: '',
      itemSize: '', // 题目长度
      startDoDisable: true,
      ismobile: false
    }
  },
  created: function () {
    let _this = this
    _this.ismobile = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(navigator.userAgent.toLowerCase())
    // 多语言
    _this.setLangFlag(false)
    _this.form = this.$route.query.formDo
    if (_this.form !== {} && _this.form !== undefined) {
      _this.formLoading = true
      _this.remainTime = _this.form.suggestTime * 60
      _this.problemLength = _this.form.titleItems[0].questionItems.length - 1
      _this.titleItemsLength = _this.form.titleItems.length
      _this.titleItems.push(_this.form.titleItems[0])
      _this.questionItem = _this.form.titleItems[0].questionItems[0]
      _this.partOrder = _this.questionItem.partOrder
      _this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
      _this.timeReduce()
      _this.initAnswer()
      _this.formLoading = false
      _this.memberName = _this.form.memberName
      _this.itemSize = _this.form.titleItems[0].questionItems.length
    } else {
      _this.formLoading = true
      // 防止刷新成了不同的语言
      demographyApi.queryDemographyParamInfo(_this.memberToken).then(
        re => {
          if (re.response[0].langType !== null || re.response[0].langType.trim() !== '') {
            _this.setLangType(re.response[0].langType)
          }
          // 加载题目
          examPaperApi.select(_this.memberToken, _this.langType).then(re => {
            _this.form = re.response
            _this.remainTime = re.response.suggestTime * 60
            _this.problemLength = _this.form.titleItems[0].questionItems.length - 1
            _this.titleItemsLength = _this.form.titleItems.length
            _this.titleItems.push(_this.form.titleItems[0])
            _this.itemOrder = _this.form.titleItems[0].questionItems[_this.order].itemOrder
            _this.itemSize = _this.form.titleItems[0].questionItems.length
            _this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
            _this.partOrder = _this.questionItem.partOrder
            _this.initAnswer()
            _this.formLoading = false
            _this.memberName = _this.form.memberName

            examPaperApi.selectTokenId(_this.memberToken).then(re => {
              _this.answered = re.response.examItemOrderAndContentList
              _this.doTime = re.response.doTime
              _this.timeReduce()

              if (_this.answered !== null) {
                _this.answered.forEach(it => {
                  _this.answer.answerItems[parseInt(it.itemOrder) - 1].content = it.content
                  _this.answer.answerItems[parseInt(it.itemOrder) - 1].completed = true
                })
              }

              for (let i = 0; i < _this.answer.answerItems.length; i++) {
                if (!_this.answer.answerItems[i].completed || _this.answer.answerItems[i].content === null || _this.answer.answerItems[i].content === '') {
                  _this.questionItem = _this.form.titleItems[0].questionItems[i]
                  _this.partOrder = _this.questionItem.partOrder
                  _this.itemOrder = _this.form.titleItems[0].questionItems[i].itemOrder
                  _this.order = i
                  _this.preDisable = true
                  break
                }

                if (_this.isForFinish(i)) {
                  _this.$router.push({ path: '/exam/finish', query: { name: '', content: _this.$t('finishMsg'), tokenId: _this.memberToken } })
                }
              }
              // 如果上一题不是本段，则不能返回上一段
              if (this.isDiffPartOrder()) {
                _this.preDisable = false
              }

              if (this.isDiffPartOrder()) {
                _this.showNextGuide(re.response.signalObject, false)
              }
            }).catch(e => {
              // _this.$message.error('题目查询异常')
            })
          }).catch(e => {
            _this.$message.info(_this.$t('noquestionMsg'))
          })
        }
      ).catch(e => {
      })
    }
  },
  mounted () {
  },
  beforeDestroy () {
    window.clearInterval(this.timer)
  },
  methods: {
    formatSeconds (theTime) {
      return formatSeconds(theTime)
    },
    formatSecondsG (theTime, hour, min, second) {
      return formatSecondsG(theTime, hour, min, second)
    },
    formatDate (time, formatsrc) {
      return formatDate(time, formatsrc)
    },
    timeReduce: function () {
      let _this = this
      _this.answer.doTime += _this.doTime
      this.timer = setInterval(function () {
        if (_this.answer.doTime <= 0) {
          _this.answer.doTime = 0
        }
        ++_this.answer.doTime
      }, 1000)
    },
    questionCompleted (completed) {
      return this.enumFormat(this.doCompletedTag, completed)
    },
    goAnchor (selector) {
      let _this = this
      let num = parseInt(selector.substr(10)) - 1
      this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
      this.questionItem = _this.form.titleItems[0].questionItems[num]
      _this.order = num
      setTimeout(function () {
        _this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
      }, 200)
      _this.$refs['popovertag'].doClose()
    },
    initAnswer () {
      this.answer.id = this.form.id
      this.answer.questionOrder = this.form.questionOrder
      let titleItemArray = this.form.titleItems
      for (let tIndex in titleItemArray) {
        let questionArray = titleItemArray[tIndex].questionItems
        for (let qIndex in questionArray) {
          let question = questionArray[qIndex]
          this.answer.answerItems.push({ title: question.title, permanentId: question.permanentId, questionId: question.id, content: null, contentArray: [], completed: false, itemOrder: question.itemOrder, lastContent: null, startTime: question.startTime, endTime: question.endTime, partOrder: question.partOrder, questionReport: {}, readOnly: false })
        }
      }

      // 初始化开始时间，设置第一个时间
      for (let i = 0; i < this.answer.answerItems.length; i++) {
        if (this.answer.answerItems[i].startTime == null || this.answer.answerItems[i].startTime.trim() === '') {
          this.answer.answerItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
          break
        }
      }
    },
    isContentNotEmpty: function (num) {
      let _this = this
      return _this.answer.answerItems[num].content !== '' && _this.answer.answerItems[num].content !== null && _this.answer.answerItems[num].content.trim() !== ''
    },
    nextQuestion: function (nowPartOrder) {
      let _this = this
      let num = ++_this.order
      _this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
      // 跳到没有答的题目
      while (_this.isContentNotEmpty(num) && num !== _this.answer.answerItems.length - 1) {
        num = ++_this.order
        this.getEmptySubjct(num)
      }
      _this.questionItem = _this.form.titleItems[0].questionItems[num]
      _this.partOrder = _this.questionItem.partOrder
      if (_this.partOrder !== nowPartOrder) {
        _this.isShowGuide(true)
      }

      // 如果上一题不是本段，则不能返回上一段
      if (this.isDiffPartOrder()) {
        _this.preDisable = false
      } else {
        _this.preDisable = true
      }
      _this.nextDisable = false
      _this.answer.answerItems[_this.order].startTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')

      // 如果是最后一个并且已经完成了，就提交
      if (num === _this.answer.answerItems.length - 1 && _this.isForFinish(num)) {
        this.submitForm()
      }
    },
    nextQuestionOrder: function (nowPartOrder) {
      if (this.order < this.problemLength) {
        this.nextQuestion(nowPartOrder)
      } else {
        this.submitDisable = false
      }
    },
    isNextShowGuide: function (nowPartOrder) {
      let _this = this
      // 本段的每一题都打完要指导语
      let showGuideFlag = true
      for (let i = 0; i < _this.answer.answerItems.length; i++) {
        if (_this.form.titleItems[0].questionItems[i].partOrder === nowPartOrder && !_this.isContentNotEmpty(i)) {
          showGuideFlag = false
        }
      }
      return showGuideFlag
    },
    catThaiSubmit: function (answerSubmit) {
      answerSubmit.isCallTain = 'CallThai'
    },
    setSignalObject: function (answerSubmit) {
      answerSubmit.isSignalObject = 'CIAQ'
    },
    getEmptySubjct: function (order) {
      let _this = this
      _this.itemOrder = _this.form.titleItems[0].questionItems[order].itemOrder
      _this.questionItem = _this.form.titleItems[0].questionItems[order]
      _this.partOrder = _this.questionItem.partOrder
      _this.preDisable = false
      _this.answer.answerItems[order].readOnly = false
      // _this.answer.answerItems[order].content = ''
      // _this.answer.answerItems[order].completed = false
      _this.order = order
    },
    isNotEmpty (obj) {
      return obj !== null && obj !== undefined && obj !== ''
    },
    isEmpty (obj) {
      return !this.isNotEmpty(obj)
    },
    nextSubject: function () {
      let _this = this
      _this.isShowGuide(false)
      let nowPartOrder = _this.partOrder
      // 设置上一题的结束时间
      this.answer.answerItems[_this.order].endTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // 循环没有答的题目,这里同时决定了问答题打完可以进入下一题
      for (let i = 0; i < _this.order; i++) {
        if (!this.isContentNotEmpty(i)) {
          // 返回之前没做的那道题
          this.getEmptySubjct(i)
          return
        }
        // 如果循环到最后一题就提交
        if (_this.isForFinish(i)) {
          _this.submitForm()
          return
        }
      }

      // 全部答完了就可以提交了,但是如果是最后一题就自己提交
      for (let i = 0; i < _this.answer.answerItems.length; i++) {
        if (!_this.isContentNotEmpty(i)) {
          break
        }
        if (i === _this.answer.answerItems.length - 1 && _this.order !== _this.answer.answerItems.length - 1) {
          _this.submitForm()
          return
        }
      }
      this.answer.answerItems[_this.order].readOnly = true
      let answerSubmit = _this.getSubmitAnswerValue(nowPartOrder)
      console.log(answerSubmit)
      // 已经答到了最后一题了,不用自动跳到下一题
      if (this.order + 1 > this.problemLength) {
        this.submitDisable = false
        return
      }
      // 如果是最后一题就上面提交了，不会走到这里
      if (this.isNextShowGuide(nowPartOrder)) {
        this.setSignalObject(answerSubmit)
      }
      examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
        if (re.code !== 1) {
          _this.$message.error(re.message)
          throw (re.message)
        }

        // 展示指导语
        if (this.isNextShowGuide(nowPartOrder)) {
          // 展示指导语
          _this.showNextGuide(re.response.signalObject, true)
        } else {
          this.nextQuestionOrder(nowPartOrder)
        }
      }).catch(e => {
        _this.reloadPage(e)
      })
    },
    getSubmitAnswerValue (nowPartOrder) {
      let _this = this
      let answerSubmit = JSON.parse(JSON.stringify(_this.answer))
      answerSubmit.answerItems.forEach(answerItem => {
        // 题目报表，如果没有结束时间，开始时间也不需要
        if (answerItem.endTime == null || answerItem.endTime === '') {
          answerItem.startTime = ''
        }
        answerItem.questionReport = { questionOrder: answerItem.questionId, questionTitle: answerItem.title, permanentId: answerItem.permanentId, startTime: answerItem.startTime, endTime: answerItem.endTime, langType: _this.langType, partOrder: answerItem.partOrder, answer: answerItem.content }
      })
      answerSubmit.langType = _this.langType
      answerSubmit.isCallTain = _this.isCallTain
      answerSubmit.isSignalObject = _this.isSignalObject
      answerSubmit.partOrder = nowPartOrder
      answerSubmit.itemOrder = _this.itemOrder
      return answerSubmit
    },
    preSubject () {
      let _this = this
      _this.isShowGuide(false)
      if (_this.order > 0) {
        // 清空本题的选择
        _this.answer.answerItems[_this.order].content = null
        _this.answer.answerItems[_this.order].completed = false
        _this.answer.answerItems[_this.order].questionReport = null
        _this.answer.answerItems[_this.order].readOnly = false

        // 设置回到上一题
        let num = --_this.order
        _this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
        _this.questionItem = _this.form.titleItems[0].questionItems[num]
        _this.partOrder = _this.questionItem.partOrder
        _this.preDisable = false
        _this.nextDisable = true
        _this.answer.answerItems[_this.order].readOnly = false
      }
    },
    submitForm () {
      let _this = this
      _this.submitDisable = true
      window.clearInterval(_this.timer)
      _this.formLoading = true
      let unFinish = false
      for (let i = 0; i < _this.answer.answerItems.length; i++) {
        if (_this.answer.answerItems[i].content === null) {
          unFinish = true
          // 有未完成的答题应该是 2答题中
          // 之前是0未处理
          _this.answer.finish = 2
        }
      }
      if (unFinish) {
        // 直接停留在没有打完的题目
        for (let i = 0; i < _this.answer.answerItems.length; i++) {
          if (!_this.isContentNotEmpty(i)) {
            _this.questionItem = _this.form.titleItems[0].questionItems[i]
            _this.partOrder = _this.questionItem.partOrder
            _this.itemOrder = _this.form.titleItems[0].questionItems[i].itemOrder
            _this.order = i
            _this.preDisable = true
            break
          }
          _this.formLoading = false
          _this.submitDisable = false
        }
      } else {
        _this.answer.verifyStatus = 1
        _this.answer.finish = 1
        _this.submitAnswer(_this.$t('finishCareerInterestsInfo'))
      }
    },
    startDo: function () {
      let _this = this
      _this.guide = false
      _this.isCallTain = ''
      _this.isSignalObject = ''
    },
    submitAnswer: function (mess) {
      let _this = this
      this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      // 提交之前提交最后一段
      let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
      _this.catThaiSubmit(answerSubmit)
      let loading = _this.$loading({
        lock: false,
        text: _this.$t('uploadInfo'),
        spinner: 'el-icon-loading'
      })
      examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
        loading.close()
        if (re.code === 1) {
          _this.$router.push({ path: '/exam/finish', query: { name: _this.form.name, content: mess, tokenId: _this.memberToken, type: 'CIAQ' } })
        } else {
          _this.$message.error(re.message + '/exam/finish')
        }
        _this.formLoading = false
      }).catch(e => {
        _this.reloadPage(e)
        loading.close()
      })
    },
    showNextGuide: function (signalObject, nextQuestion) {
      let _this = this
      _this.guideDescirption = signalObject.signalDescription
      if (_this.guideDescirption !== null && _this.guideDescirption !== undefined && _this.guideDescirption !== '') {
        _this.isShowGuide(true)
        _this.preDisable = false
      } else {
        throw (signalObject.message)
      }
      if (Object.keys(_this.guideDescirption).length === 0) {
        _this.isShowGuide(false)
        _this.preDisable = false
      }
      _this.startDoDisable = false
      if (!nextQuestion) {
        return
      }
      _this.nextQuestionOrder()
    },
    isNull: function (obj) {
      return obj === null || obj === undefined
    },
    isShowGuide (flag) {
      let _this = this
      _this.guide = flag
      // _this.isCallTain = flag ? 'callTain' : ''
    },
    reloadPage (e) {
      let _this = this
      let mes = ''
      if (e.message !== null && e.message !== undefined && e.message.indexOf('timeout') !== -1) {
        mes = _this.$t('submitTimeout') + ',' + 'order:' + _this.order + ',' + e.message// 提交后台超时
      } else {
        mes = JSON.stringify(e) + ',' + 'order:' + _this.order + ',' + e.message
      }
      // 调试用
      // _this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') + '<br>' + mes } })
      _this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') } })
      _this.formLoading = false
      _this.submitDisable = false
    },
    isForFinish (i) {
      return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this.answer.answerItems[i].content !== '')
    },
    isDiffPartOrder: function () {
      let _this = this
      return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0].questionItems[_this.order - 1].partOrder
    },
    ...mapMutations('user', ['setLangType']),
    ...mapMutations('user', ['setLangFlag'])
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', { doCompletedTag: state => state.exam.question.answer.doCompletedTag }),
    ...mapState('user', { memberToken: state => state.memberToken }),
    ...mapState('user', { langType: state => state.langType }),
    ...mapState('user', { langFlag: state => state.langFlag }),
    ...mapState('exam', { doUrl: state => state.doUrl })
  }
}
</script>

<style lang="scss" scoped>
  .align-center {
    text-align: center;
  }

  .exam-question-item {
    padding: 10px;
    font-size: large;

    .el-form-item__label {
      font-size: large !important;
    }
  }

  .question-title-padding {
    padding-left: 25px;
    padding-right: 25px;
  }
  .footer {
    position: absolute;
    position: fixed;
    z-index: 1000;
    bottom: 0px;
  }
</style>

 src/views/exam/paper/finish.vue

@@ -9,6 +9,12 @@
        <!-- 新增下载报告提示语 -->
        <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 ="type == 'CIAQ'">{{$t('finishViewReportInfo')}}</H1>
        <el-button type="danger" v-if ="type == 'CIAQ' && isMobile()" @click="viewReportH5" round>{{$t('view')}}</el-button>
      </el-main>
    </el-container>
  </div>
@@ -22,8 +28,11 @@
      name: this.$route.query.name,
      content: this.$route.query.content,
      tokenId: this.$route.query.tokenId,
      type: this.$route.query.type,
      downDisable: false,
      downUrl: ''
      viewDisable: false,
      downUrl: '',
      viewUrl: ''
    }
  },
  created () {
@@ -39,6 +48,18 @@
        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 () {

@@ -50,6 +71,20 @@
    downReport: function () {
      let _this = this
      window.open(_this.downUrl)
    },
    // 预览报告
    viewReport: function () {
      let _this = this
      _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 } })
    },
    isMobile () {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    }
  },
  computed: {

 src/views/exam/paper/guide.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-container class="app-item-contain">
      <el-header class="align-center" style="height: 50px;padding: 1%;">
      <el-header class="align-center" style="height: 50px;padding: 1%;margin-top: 4%">
        <H2 v-html="$t('guide')" v-if="formDo.questionTemplateId !== 'job' || formDo.questionTemplateId !== 'values'"></H2>
      </el-header>
      <el-main style="padding-top:0%">

 src/views/exam/paper/personality.vue

@@ -402,6 +402,13 @@
      let _this = this
      _this.isShowGuide(false)
      if (_this.order > 0) {
        // 清空本题的选择
        _this.answer.answerItems[_this.order].content = null
        _this.answer.answerItems[_this.order].completed = false
        _this.answer.answerItems[_this.order].questionReport = null
        _this.answer.answerItems[_this.order].readOnly = false

        // 设置回到上一题
        let num = --_this.order
        _this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
        _this.questionItem = _this.form.titleItems[0].questionItems[num]

 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

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>

 src/views/report/reportView.vue

New file
@@ -0,0 +1,46 @@
<template>
  <div class="m-pdf">
    <div id="pdf-content"></div>
  </div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'

export default {
  name: 'Pdfh5',
  data () {
    return {
      pdfh5: null,
      // 可引入网络文件或者本地文件
      pdfUrl: this.$route.query.fileUrl
      // 如果引入本地pdf文件，需要将pdf放在public文件夹下，引用时使用绝对路径（/：表示public文件夹）
    }
  },
  mounted () {
    console.log(this.pdfUrl)
    this.initPdf()
  },
  methods: {
    initPdf () {
      // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以用来操作pdf，监听相关事件
      // pdfh5 = new Pdfh5(selector, options) goto初始到第几页，logo设置每一页pdf上的水印
      this.pdfh5 = new Pdfh5('#report-content', {
        pdfurl: this.pdfUrl,
        goto: 1
        // 设置每一页pdf上的水印
        // logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }
      })
      this.pdfh5.scrollEnable(true) // 允许pdf滚动
      // 监听pdf准备开始渲染，此时可以拿到pdf总页数
      this.pdfh5.on('ready', function () {
        console.log('总页数:' + this.totalNum)
      })
      // 监听pdf加载完成事件，加载失败、渲染成功都会触发
      this.pdfh5.on('complete', (status, msg, time) => {
        console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
      })
    }
  }
}
</script>

 vue.config.js

@@ -19,6 +19,7 @@
    hotOnly: false,
    proxy: {
      '/': {
        ws: false,
        target: 'http://127.0.0.1:8090',
        changeOrigin: true
      }