From defdf4a6af629cb55b9bc12b9a365be4f924cc96 Mon Sep 17 00:00:00 2001
From: 阳洁 <2077506045@qq.com>
Date: 星期一, 22 五月 2023 16:49:30 +0800
Subject: [PATCH] 调整价值观中文
---
src/views/report/reportH5.vue | 398 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 398 insertions(+), 0 deletions(-)
diff --git a/src/views/report/reportH5.vue b/src/views/report/reportH5.vue
new file mode 100644
index 0000000..f612ad1
--- /dev/null
+++ b/src/views/report/reportH5.vue
@@ -0,0 +1,398 @@
+<template>
+ <div id="app" style="margin:auto">
+ <div class="report">
+ <el-image :src="require('@/assets/report/page1.jpg')"></el-image>
+ <div class="word" style="left: 12%;top: 66.8%;color: #313157;font-weight:bold">娴嬭瘯鑰咃細{{ data.questionnaireTaker }}</div>
+ <div class="word" style="left: 12%;top: 69.2%;color: #313157;font-weight:bold">娴嬭瘯鏃堕棿锛歿{ data.reportGenerationDate }}</div>
+ <div class="word" style="left: 12%;top: 71.5%;color: #313157;font-weight:bold">甯告ā锛氫腑鍥藉ぇ瀛︾敓</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: 9.8%;color: #34BBC4">{{ data.PR_Dim01 }}</div>
+ <div class="word" style="left: 40%;top: 18.4%;color: #E1AD04">{{ data.PR_Dim02 }}</div>
+ <div class="word" style="left: 40%;top: 26.6%;color: #6D67AD">{{ data.PR_Dim03 }}</div>
+ <div class="word" style="left: 40%;top: 35.6%;color: #EC7864">{{ data.PR_Dim04 }}</div>
+ <div class="word" style="left: 80%;top: 9.8%;color: #D78EBB">{{ data.PR_Dim05 }}</div>
+ <div class="word" style="left: 80%;top: 18.4%;color: #E8497D">{{ data.PR_Dim06 }}</div>
+ <div class="word" style="left: 80%;top: 26.6%;color: #62BEA4">{{ data.PR_Dim07 }}</div>
+ <div class="word" style="left: 80%;top: 35.6%;color: #4976BA">{{ data.PR_Dim08 }}</div>
+ </div>
+ <div style="border:2px solid #F3EEE3;border-radius: 25px;margin-left: 8%;margin-right: 8%;">
+ <div style="font-size: 0.9rem;font-weight: bold;line-height: 25px;padding: 15px;">
+ 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>
+ <div class="report">
+ <el-image :src="require('@/assets/report/page3-1.png')"></el-image>
+ </div>
+ <div style="border:2px solid #F3EEE3;border-radius: 25px;margin-left: 8%;margin-right: 8%;">
+ <div style="font-size: 0.9rem;font-weight: bold;line-height: 25px;padding: 15px;">
+ 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 && data.condition != ''">
+ <el-image :src="require('@/assets/report/page4.png')"></el-image>
+ </div>
+ <div v-if="data.condition == null || data.condition == ''">
+ <el-image :src="require('@/assets/report/page4-1.png')"></el-image>
+ </div>
+ </div>
+ <div class="report">
+ <el-image :src="require('@/assets/report/page5.jpg')"></el-image>
+ </div>
+ </div>
+</template>
+
+<script>
+import examPaperApi from '@/api/examPaper'
+import '@/styles/h5font.scss'
+
+export default {
+ name: 'reportH5',
+ data () {
+ return {
+ tokenId: this.$route.query.tokenId,
+ 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',
+ //鑻ュ皢姝ゅ睘鎬ф斁鍦╮adar涓嬶紝鍒欐瘡鏉ndicator閮戒細鏄剧ず鍦堜笂鐨勬暟鍊硷紝鏀惧湪杩欏効锛屽彧鍦ㄩ�氫俊杩欐潯indicator涓婃樉绀�
+ axisLabel: {
+ show: true,
+ fontSize: 8,
+ color: '#7F7F7F',
+ showMaxLabel: true, //涓嶆樉绀烘渶澶у�硷紝鍗冲鍦堜笉鏄剧ず鏁板瓧30
+ showMinLabel: true, //鏄剧ず鏈�灏忔暟瀛楋紝鍗充腑蹇冪偣鏄剧ず0
+ }
+ },
+ { name: '浜嬬墿', max: '100' },
+ { name: '鑷劧', max: '100' },
+ { name: '褰卞搷', max: '100' },
+ { name: '缁勭粐', max: '100' },
+ { name: '浜�', max: '100' },
+ { name: '绉戞妧', max: '100' },
+ { name: '鍒涢�犳�ц〃杈�', max: '100' }
+ ],
+ splitArea: { //鍦嗙幆鍖哄煙鏍峰紡
+ areaStyle: {
+ color: ['#fff', '#fff', '#fff'],
+ shadowColor: 'rgba(230, 230, 230, 0.5)',
+ shadowBlur: 20,
+ shadowOffsetY: '10',
+ shadowOffsetX: '-10'
+ }
+ },
+ splitNumber: 4,
+ axisName: {
+ color: '#7F7F7F',
+ fontSize: 10
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ shadowColor: '#F5F4F4',
+ shadowBlur: 10
+ }
+ }
+ },
+ series: [
+ {
+ name: '鍋ュ悍绉戝',
+ type: 'radar',
+ z: 1,
+ areaStyle: {
+ color: '#E5E3E3' //闃村奖
+ },
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#34BBC4'
+ },
+ lineStyle: {//绾挎潯鏍峰紡
+ color: '#C0BEBD'
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ value: [_this.data.PR_Dim01, _this.data.PR_Dim08, _this.data.PR_Dim07, _this.data.PR_Dim06, _this.data.PR_Dim05, _this.data.PR_Dim04, _this.data.PR_Dim03, _this.data.PR_Dim02]
+ }
+ ]
+ },
+ {
+ name: '鍒涢�犳�ц〃杈�',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#E1AD04'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false, //闅愯棌鏍囩ず绾�
+ }
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', '1000', '1000', '1000', '1000', '1000', '1000', _this.data.PR_Dim02]
+ }
+ ]
+ },
+ {
+ name: '绉戞妧',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#6D67AD'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false //闅愯棌鏍囩ず绾�
+ }
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', '1000', '1000', '1000', '1000', '1000', _this.data.PR_Dim03, '1000']
+ }
+ ]
+ },
+ {
+ name: '浜�',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#EC7864'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false //闅愯棌鏍囩ず绾�
+ }
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', '1000', '1000', '1000', '1000', _this.data.PR_Dim04, '1000', '1000']
+ }
+ ]
+ },
+ {
+ name: '缁勭粐',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#D78EBB'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false //闅愯棌鏍囩ず绾�
+ }
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', '1000', '1000', '1000', _this.data.PR_Dim05, '1000', '1000', '1000']
+ }
+ ]
+ },
+ {
+ name: '褰卞搷',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#E8497D'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false //闅愯棌鏍囩ず绾�
+ }
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', '1000', '1000', _this.data.PR_Dim06, '1000', '1000', '1000', '1000']
+ }
+ ]
+ },
+ {
+ name: '鑷劧',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#62BEA4'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false //闅愯棌鏍囩ず绾�
+ },
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', '1000', _this.data.PR_Dim07, '1000', '1000', '1000', '1000', '1000']
+ }
+ ]
+ },
+ {
+ name: '浜嬬墿',
+ type: 'radar',
+ z: 2,
+ itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
+ color: '#4976BA'
+ },
+ lineStyle: {
+ width: 0,
+ labelLine: {
+ show: false //闅愯棌鏍囩ず绾�
+ }
+ },
+ symbolSize: 13,//鍦嗙偣澶у皬
+ symbol: 'circle',//鍦嗙偣鏍峰紡
+ data: [
+ {
+ // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
+ value: ['1000', _this.data.PR_Dim08, '1000', '1000', '1000', '1000', '1000', '1000']
+ }
+ ]
+ }
+ ]
+ }
+ // 缁樺埗鍥捐〃
+ myChart.setOption(option)
+ }
+ }
+}
+</script>
+<style scoped>
+.report {
+ position: relative
+}
+
+.report .word {
+ position: absolute;
+}
+
+.career {
+ display: inline-block;
+ width: 72%;
+ /*瓒呭嚭閮ㄥ垎闅愯棌*/
+ /*overflow: hidden;*/
+ /*鏂囨湰涓嶆崲琛�*/
+ /*white-space: nowrap;*/
+ /*瓒呭嚭涓嶅皝鐢ㄤ笁涓渷鐣ュ彿浠ｆ浛*/
+ /*text-overflow: ellipsis;*/
+}
+
+#app {
+ max-width: 100vh;
+ max-height: 100vh;
+ background-color: white;
+}
+
+</style>
--
Gitblit v1.9.1