From 57f1b45ee6d64bc6bf6fc65b30a06434e032a4aa Mon Sep 17 00:00:00 2001
From: linzhijie <1003392067@qq.com>
Date: 星期五, 28 四月 2023 18:01:20 +0800
Subject: [PATCH] H5页面提交
---
src/views/pdf/reportH5.vue | 150 ++++++++++++++++++++++++++++++++++---------------
1 files changed, 104 insertions(+), 46 deletions(-)
diff --git a/src/views/pdf/reportH5.vue b/src/views/pdf/reportH5.vue
index dbc49e9..4e8da18 100644
--- a/src/views/pdf/reportH5.vue
+++ b/src/views/pdf/reportH5.vue
@@ -1,22 +1,71 @@
<template>
- <div id="page1" class="page1">
- <div style="left: 19%;position: absolute;top: 10.5%;font-weight: bold;font-size: 19px;"> 鎭枩鎮ㄦ敞鍐屾垚鍔�!</div>
- <div style="left: 50%; position: absolute; top:27%; color: blue;font-weight:bold" id="show">涓汉鍙嶉鎶ュ憡</div>
- <div style="left: 40%; position: absolute; top:31%;font-size:18px">娴� 璇� 鑰咃細銆�%questionnaireTaker%銆�</div>
- <div style="left: 40%; position: absolute; top:31%;font-size:18px">娴嬭瘯鏃堕棿锛氥��%reportGenerationDate%銆�</div>
- <div style="left: 40%; position: absolute; top:31%;font-size:18px">甯� 妯★細涓浗澶у鐢�</div>
+ <div 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>
- <!--<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 () {
-
+ data() {
+ return {
+ condition: true
+ }
},
mounted () {
this.drawLine()
@@ -33,26 +82,31 @@
legend: {},
radar: {
// shape: 'circle',
- nameGap: 25,
+ nameGap: 15,
+ center: ['50%', '50%'],
+ // 鍦嗕腑蹇冨潗鏍囷紝鏁扮粍鐨勭涓�椤规槸妯潗鏍囷紝绗簩椤规槸绾靛潗鏍囥�俒 default: ['50%', '50%'] ]
+ radius: 120,
+ // 鍦嗙殑鍗婂緞锛屾暟缁勭殑绗竴椤规槸鍐呭崐寰勶紝绗簩椤规槸澶栧崐寰勩��
+ startAngle: 90,
indicator: [
{
name: '鍋ュ悍绉戝', max: '100',
//鑻ュ皢姝ゅ睘鎬ф斁鍦╮adar涓嬶紝鍒欐瘡鏉ndicator閮戒細鏄剧ず鍦堜笂鐨勬暟鍊硷紝鏀惧湪杩欏効锛屽彧鍦ㄩ�氫俊杩欐潯indicator涓婃樉绀�
axisLabel: {
show: true,
- fontSize: 12,
+ 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'}
+ { name: '浜嬬墿', max: '100' },
+ { name: '鑷劧', max: '100' },
+ { name: '褰卞搷', max: '100' },
+ { name: '缁勭粐', max: '100' },
+ { name: '浜�', max: '100' },
+ { name: '绉戞妧', max: '100' },
+ { name: '鍒涢�犳�ц〃杈�', max: '100' }
],
splitArea: { //鍦嗙幆鍖哄煙鏍峰紡
areaStyle: {
@@ -60,13 +114,13 @@
shadowColor: 'rgba(230, 230, 230, 0.5)',
shadowBlur: 20,
shadowOffsetY: '10',
- shadowOffsetX: '-10',
+ shadowOffsetX: '-10'
}
},
splitNumber: 4,
axisName: {
color: '#7F7F7F',
- fontSize: 18
+ fontSize: 10
},
axisLine: {
show: false,
@@ -85,12 +139,12 @@
color: '#E5E3E3' //闃村奖
},
itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#34BBC4",
+ color: "#34BBC4"
},
lineStyle: {//绾挎潯鏍峰紡
color: "#C0BEBD"
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -111,7 +165,7 @@
show: false, //闅愯棌鏍囩ず绾�
}
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -131,9 +185,9 @@
width: 0,
labelLine: {
show: false //闅愯棌鏍囩ず绾�
- },
+ }
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -152,10 +206,10 @@
lineStyle: {
width: 0,
labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- },
+ show: false //闅愯棌鏍囩ず绾�
+ }
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -174,10 +228,10 @@
lineStyle: {
width: 0,
labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- },
+ show: false //闅愯棌鏍囩ず绾�
+ }
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -196,10 +250,10 @@
lineStyle: {
width: 0,
labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- },
+ show: false //闅愯棌鏍囩ず绾�
+ }
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -221,7 +275,7 @@
show: false //闅愯棌鏍囩ず绾�
},
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -243,7 +297,7 @@
show: false //闅愯棌鏍囩ず绾�
}
},
- symbolSize: 20,//鍦嗙偣澶у皬
+ symbolSize: 13,//鍦嗙偣澶у皬
symbol: "circle",//鍦嗙偣鏍峰紡
data: [
{
@@ -261,13 +315,17 @@
}
</script>
<style scoped>
- /* 鑳屾櫙鍥剧墖*/
- .page1{
- background:url('~@/assets/report/page1.png');
- width: 100%;
- height: 100%;
- position:fixed;
- background-size:100% 100%;
+ .report {
+ position: relative
+ }
+
+ .report .word {
+ position: absolute;
+ }
+
+ #app {
+ max-width: 100vh;
+ max-height: 100vh
}
</style>
--
Gitblit v1.9.1