From f4e70fb0ad404cfbd212a6b340393f5ecf998087 Mon Sep 17 00:00:00 2001
From: 林致杰 <1003392067@qq.com>
Date: 星期五, 28 四月 2023 00:09:00 +0800
Subject: [PATCH] test
---
src/views/pdf/reportH5.vue | 301 +++++++------------------------------------------
1 files changed, 47 insertions(+), 254 deletions(-)
diff --git a/src/views/pdf/reportH5.vue b/src/views/pdf/reportH5.vue
index dbc49e9..e7330b7 100644
--- a/src/views/pdf/reportH5.vue
+++ b/src/views/pdf/reportH5.vue
@@ -1,12 +1,22 @@
<template>
- <div id="page1" class="page1">
- <div style="left: 19%;position: absolute;top: 10.5%;font-weight: bold;font-size: 19px;"> 鎭枩鎮ㄦ敞鍐屾垚鍔�!</div>
- <div style="left: 50%; position: absolute; top:27%; color: blue;font-weight:bold" id="show">涓汉鍙嶉鎶ュ憡</div>
- <div style="left: 40%; position: absolute; top:31%;font-size:18px">娴� 璇� 鑰咃細銆�%questionnaireTaker%銆�</div>
- <div style="left: 40%; position: absolute; top:31%;font-size:18px">娴嬭瘯鏃堕棿锛氥��%reportGenerationDate%銆�</div>
- <div style="left: 40%; position: absolute; top:31%;font-size:18px">甯� 妯★細涓浗澶у鐢�</div>
+ <div>
+ <div id="page1" style="margin-top: 16%;">
+ <el-image :src="require('@/assets/report/page1.png')">
+ </el-image>
+ <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">
+ 鎶ュ憡浠嬬粛
+ 鑱屼笟鍏磋叮鏄奖鍝嶆垜浠敓娑�夋嫨鐨勯噸瑕佸洜绱犱箣涓�锛屼粠浜嬩笌鑷繁鍏磋叮鐩稿叧鐨勮亴涓氫篃鏈夊姪浜庢垜浠湪宸ヤ綔涓彇寰楄緝濂界殑缁╂晥琛ㄧ幇浠ュ強宸ヤ綔婊℃剰搴︺�傛垜浠緷鎹亴涓氬叴瓒ETPOINT妯″瀷锛圫u et al., 2019锛夛紝骞跺熀浜庝腑鍥藉浗鎯呭紑鍙戜簡鏈娴嬭瘯鐨勯鐩�傛湰娴嬮獙娴嬮噺浜嗘偍鍦ㄥ叓澶ц亴涓氬叴瓒ｄ富棰樹笂鐨勫緱鍒嗭紝鎮ㄧ殑娴嬭瘯鍒嗘暟鏄湪浠ヤ腑鍥戒汉缇や负甯告ā鐨勫熀纭�涓婅绠楀嚭鐨勭櫨鍒嗕綅鏁般�傚彟澶栵紝鎴戜滑瀵广�婁腑鍗庝汉姘戝叡鍜屽浗鑱屼笟鍒嗙被澶у吀锛�2022鐗堬級銆嬩腑鍑虹幇鐨勮亴涓氱被鍨嬭繘琛屼簡缂栫爜锛屽苟鍩轰簬鎮ㄧ殑鍏磋叮鐗圭偣锛岀敓鎴愪簡鎮ㄥ彲鑳芥渶鎰熷叴瓒ｇ殑鍗佷釜鑱屼笟绫诲瀷鍜屾偍鍙兘鏈�涓嶆劅鍏磋叮鐨勫崄涓亴涓氱被鍨嬶紝甯姪鎮ㄦ洿鏈夋晥鍦版帰绱㈣亴涓氱敓娑�備换浣曞績鐞嗘祴璇曢兘涓嶅彲鑳藉仛鍒板畬鍏ㄧ簿纭紝鎵�浠ユ祴璇曞垎鏁颁互鍙婃帹鑽愮殑鑱屼笟绫诲瀷浠呬緵鎮ㄥ弬鑰冦��
+ </div>
</div>
- <!--<div id="myChart" style="width: 100%; height: 500px; margin-top: 100px"></div>-->
</template>
<script>
@@ -15,259 +25,42 @@
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',
- //鑻ュ皢姝ゅ睘鎬ф斁鍦╮adar涓嬶紝鍒欐瘡鏉ndicator閮戒細鏄剧ず鍦堜笂鐨勬暟鍊硷紝鏀惧湪杩欏効锛屽彧鍦ㄩ�氫俊杩欐潯indicator涓婃樉绀�
- axisLabel: {
- show: true,
- fontSize: 12,
- color: '#7F7F7F',
- showMaxLabel: true, //涓嶆樉绀烘渶澶у�硷紝鍗冲鍦堜笉鏄剧ず鏁板瓧30
- showMinLabel: true, //鏄剧ず鏈�灏忔暟瀛楋紝鍗充腑蹇冪偣鏄剧ず0
- }
- },
- {name: '浜嬬墿', max: '100'},
- {name: '鑷劧', max: '100'},
- {name: '褰卞搷', max: '100'},
- {name: '缁勭粐', max: '100'},
- {name: '浜�', max: '100'},
- {name: '绉戞妧', max: '100'},
- {name: '鍒涢�犳�ц〃杈�', max: '100'}
- ],
- splitArea: { //鍦嗙幆鍖哄煙鏍峰紡
- areaStyle: {
- color: ['#fff', '#fff', '#fff'],
- shadowColor: 'rgba(230, 230, 230, 0.5)',
- shadowBlur: 20,
- shadowOffsetY: '10',
- shadowOffsetX: '-10',
- }
- },
- splitNumber: 4,
- axisName: {
- color: '#7F7F7F',
- fontSize: 18
- },
- axisLine: {
- show: false,
- lineStyle: {
- shadowColor: '#F5F4F4',
- shadowBlur: 10
- }
- }
- },
- series: [
- {
- name: '鍋ュ悍绉戝',
- type: 'radar',
- z: 1,
- areaStyle: {
- color: '#E5E3E3' //闃村奖
- },
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#34BBC4",
- },
- lineStyle: {//绾挎潯鏍峰紡
- color: "#C0BEBD"
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- value: [50, 16, 22, 78, 55, 82, 67, 23],
- }
- ]
- },
- {
- name: '鍒涢�犳�ц〃杈�',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#E1AD04"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- }
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '1000', '1000', '1000', '1000', '1000', '1000', 23]
- }
- ]
- },
- {
- name: '绉戞妧',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#6D67AD"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false //闅愯棌鏍囩ず绾�
- },
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '1000', '1000', '1000', '1000', '1000', '67', '1000']
- }
- ]
- },
- {
- name: '浜�',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#EC7864"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- },
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '1000', '1000', '1000', '1000', '82', '1000', '1000']
- }
- ]
- },
- {
- name: '缁勭粐',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#D78EBB"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- },
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '1000', '1000', '1000', '55', '1000', '1000', '1000']
- }
- ]
- },
- {
- name: '褰卞搷',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#E8497D"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false, //闅愯棌鏍囩ず绾�
- },
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '1000', '1000', '78', '1000', '1000', '1000', '1000'],
- }
- ]
- },
- {
- name: '鑷劧',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#62BEA4"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false //闅愯棌鏍囩ず绾�
- },
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '1000', '22', '1000', '1000', '1000', '1000', '1000'],
- }
- ]
- },
- {
- name: '浜嬬墿',
- type: 'radar',
- z: 2,
- itemStyle: {//鎶樼嚎鎷愮偣鏍囧織鐨勬牱寮�
- color: "#4976BA"
- },
- lineStyle: {
- width: 0,
- labelLine: {
- show: false //闅愯棌鏍囩ず绾�
- }
- },
- symbolSize: 20,//鍦嗙偣澶у皬
- symbol: "circle",//鍦嗙偣鏍峰紡
- data: [
- {
- // 鎬濇兂鏄細璁剧疆鏃犵嚎澶э紝鍘绘帀閾炬帴绾垮嵆鍙�
- value: ['1000', '16', '1000', '1000', '1000', '1000', '1000', '1000'],
- }
- ]
- }
- ]
- }
- // 缁樺埗鍥捐〃
- myChart.setOption(option)
- }
}
}
</script>
<style scoped>
- /* 鑳屾櫙鍥剧墖*/
- .page1{
- background:url('~@/assets/report/page1.png');
- width: 100%;
- height: 100%;
- position:fixed;
- background-size:100% 100%;
- }
+/* 鑳屾櫙鍥剧墖*/
+.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%;
+}
+
+.one {
+ background:url('~@/assets/report/page1.png') no-repeat;
+ width: 100%;
+ height: 100%;
+ position:fixed;
+ background-size:100% 100%;
+}
+
+.two {
+ background:url('~@/assets/report/page2.png') no-repeat;
+ width: 100%;
+ height: 100%;
+ position:fixed;
+ background-size:100% 100%;
+}
+
+.font {
+ font-family: 榛戜綋;
+}
</style>
--
Gitblit v1.9.1