From ba3091c2e072d728344bc04db8adb1b5dece2bf0 Mon Sep 17 00:00:00 2001 From: 林致杰 <1003392067@qq.com> Date: 星期一, 01 五月 2023 00:42:43 +0800 Subject: [PATCH] CIAQ报告预览支持 --- src/views/report/reportView.vue | 2 src/views/exam/paper/finish.vue | 36 +- /dev/null | 331 ------------------------- src/views/report/reportH5Bak.vue | 0 src/views/report/reportH5.vue | 391 ++++++++++++++++++++++++++++++ src/router.js | 12 src/api/examPaper.js | 3 7 files changed, 422 insertions(+), 353 deletions(-) diff --git a/src/api/examPaper.js b/src/api/examPaper.js index 7da89b7..426349d 100644 --- a/src/api/examPaper.js +++ b/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) } diff --git a/src/router.js b/src/router.js index bcd09fd..768820f 100644 --- a/src/router.js +++ b/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鎶ュ憡' } } ] } diff --git a/src/views/exam/paper/finish.vue b/src/views/exam/paper/finish.vue index 053124f..a5cde74 100644 --- a/src/views/exam/paper/finish.vue +++ b/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: { diff --git a/src/views/pdf/reportH5.vue b/src/views/pdf/reportH5.vue deleted file mode 100644 index 4e8da18..0000000 --- a/src/views/pdf/reportH5.vue +++ /dev/null @@ -1,331 +0,0 @@ -<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">銆愭灄鑷存澃銆�</div> - <div class="word" style="left: 27%;top: 71.2%;font-size: 0.8rem;color: #313157">銆�2023/04/28銆�</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">12</div> - <div class="word" style="left: 40%;top: 6.3%;font-size: 0.8rem;color: #E1AD04">12</div> - <div class="word" style="left: 40%;top: 9.3%;font-size: 0.8rem;color: #6D67AD">12</div> - <div class="word" style="left: 40%;top: 12.3%;font-size: 0.8rem;color: #EC7864">12</div> - <div class="word" style="left: 80%;top: 3.3%;font-size: 0.8rem;color: #D78EBB">12</div> - <div class="word" style="left: 80%;top: 6.3%;font-size: 0.8rem;color: #E8497D">12</div> - <div class="word" style="left: 80%;top: 9.3%;font-size: 0.8rem;color: #62BEA4">12</div> - <div class="word" style="left: 80%;top: 12.3%;font-size: 0.8rem;color: #4976BA">12</div> - <div class="word" style="left: 14%;top: 36.3%;font-size: 0.6rem;font-weight: bold;line-height:25px"> - 1.%occ1H%<br> - 2.%occ2H%<br> - 3.%occ3H%<br> - 4.%occ4H%<br> - 5.%occ5H%<br> - 6.%occ6H%<br> - 7.%occ7H%<br> - 8.%occ8H%<br> - 9.%occ9H%<br> - 10.%occ10H% - </div> - <div class="word" style="left: 14%;top: 72%;font-size: 0.6rem;font-weight: bold;line-height:25px"> - 1.%occ1H%<br> - 2.%occ2H%<br> - 3.%occ3H%<br> - 4.%occ4H%<br> - 5.%occ5H%<br> - 6.%occ6H%<br> - 7.%occ7H%<br> - 8.%occ8H%<br> - 9.%occ9H%<br> - 10.%occ10H% - </div> - </div> - <div class="report"> - <div v-if="condition == 1"> - <el-image :src="require('@/assets/report/page4.png')"></el-image> - </div> - <div v-if="condition == 0"> - <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> -export default { - name: 'reportH5', - data() { - return { - condition: true - } - }, - 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: 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: [50, 16, 22, 78, 55, 82, 67, 23], - } - ] - }, - { - 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', 23] - } - ] - }, - { - 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', '67', '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', '82', '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', '55', '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', '78', '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', '22', '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', '16', '1000', '1000', '1000', '1000', '1000', '1000'], - } - ] - } - ] - } - // 缁樺埗鍥捐〃 - myChart.setOption(option) - } - } -} -</script> -<style scoped> - .report { - position: relative - } - - .report .word { - position: absolute; - } - - #app { - max-width: 100vh; - max-height: 100vh - } - -</style> diff --git a/src/views/report/reportH5.vue b/src/views/report/reportH5.vue new file mode 100644 index 0000000..6624eaf --- /dev/null +++ b/src/views/report/reportH5.vue @@ -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', + //鑻ュ皢姝ゅ睘鎬ф斁鍦╮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: 260px; + /*瓒呭嚭閮ㄥ垎闅愯棌*/ + overflow: hidden; + /*鏂囨湰涓嶆崲琛�*/ + white-space: nowrap; + /*瓒呭嚭涓嶅皝鐢ㄤ笁涓渷鐣ュ彿浠f浛*/ + text-overflow: ellipsis; +} + +#app { + max-width: 100vh; + max-height: 100vh; + background-color: white; +} + +</style> diff --git a/src/views/pdf/reportH5Bak.vue b/src/views/report/reportH5Bak.vue similarity index 100% rename from src/views/pdf/reportH5Bak.vue rename to src/views/report/reportH5Bak.vue diff --git a/src/views/pdf/reportView.vue b/src/views/report/reportView.vue similarity index 96% rename from src/views/pdf/reportView.vue rename to src/views/report/reportView.vue index d93f5b9..43e6adb 100644 --- a/src/views/pdf/reportView.vue +++ b/src/views/report/reportView.vue @@ -25,7 +25,7 @@ initPdf () { // pdfh5瀹炰緥鍖栨椂浼犱袱涓弬鏁帮細selector閫夋嫨鍣紝options閰嶇疆椤瑰弬鏁帮紝浼氳繑鍥炰竴涓猵dfh5瀹炰緥瀵硅薄锛屽彲浠ョ敤鏉ユ搷浣減df锛岀洃鍚浉鍏充簨浠� // pdfh5 = new Pdfh5(selector, options) goto鍒濆鍒扮鍑犻〉锛宭ogo璁剧疆姣忎竴椤祊df涓婄殑姘村嵃 - this.pdfh5 = new Pdfh5('#pdf-content', { + this.pdfh5 = new Pdfh5('#report-content', { pdfurl: this.pdfUrl, goto: 1 // 璁剧疆姣忎竴椤祊df涓婄殑姘村嵃 -- Gitblit v1.9.1