From 9d8ad6de3ea97f5b1fe0c7034c2cb24e0fd1540c Mon Sep 17 00:00:00 2001
From: linzhijie <1003392067@qq.com>
Date: 星期四, 27 四月 2023 18:16:13 +0800
Subject: [PATCH] H5
---
src/assets/report/page1.png | 0
package-lock.json | 31 +++
src/main.js | 4
package.json | 1
src/assets/style/reset.css | 95 +++++++++++
src/router.js | 12 +
src/assets/style/rem | 27 +++
src/views/pdf/reportH5.vue | 273 ++++++++++++++++++++++++++++++++++
8 files changed, 443 insertions(+), 0 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5ce68fb..dd34b98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4718,6 +4718,22 @@
"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=="
+ }
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -13988,6 +14004,21 @@
"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=="
+ }
+ }
}
}
}
diff --git a/package.json b/package.json
index f2c58da..66fea60 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"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",
diff --git a/src/assets/report/page1.png b/src/assets/report/page1.png
new file mode 100644
index 0000000..1c810f9
--- /dev/null
+++ b/src/assets/report/page1.png
Binary files differ
diff --git a/src/assets/style/rem b/src/assets/style/rem
new file mode 100644
index 0000000..71616a7
--- /dev/null
+++ b/src/assets/style/rem
@@ -0,0 +1,27 @@
+;
+(function(win){
+ var doc = win.document;
+ var docEl = doc.documentElement;
+ var tid;
+
+ function refreshRem(){
+ var width = docEl.getBoundingClientRect().width;
+ if(width>640){
+ width = 640;
+ }
+ var rem = width /6.4;
+ docEl.style.fontSize = rem +'px';
+ }
+ win.addEventListener('resize',function(){
+ clearTimeout(tid);
+ tid = setTimeout(refreshRem,300);
+ },false);
+ win.addEventListener('pageshow',function(e){
+ if(e.persisted){
+ clearTimeout(tid);
+ tid = setTimeout(refreshRem,300);
+ }
+ },false);
+
+ refreshRem();
+})(window);
\ No newline at end of file
diff --git a/src/assets/style/reset.css b/src/assets/style/reset.css
new file mode 100644
index 0000000..538d66e
--- /dev/null
+++ b/src/assets/style/reset.css
@@ -0,0 +1,95 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font-weight: normal;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+/* custom */
+a {
+ color: #7e8c8d;
+ text-decoration: none;
+ -webkit-backface-visibility: hidden;
+}
+
+li {
+ list-style: none;
+}
+
+::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+}
+
+::-webkit-scrollbar-track-piece {
+ background-color: rgba(0, 0, 0, 0.2);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+ height: 5px;
+ background-color: rgba(125, 125, 125, 0.7);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+ width: 5px;
+ background-color: rgba(125, 125, 125, 0.7);
+ -webkit-border-radius: 6px;
+}
+
+html, body {
+ width: 100%;
+}
+
+body {
+ -webkit-text-size-adjust: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html{
+ height: 100%;
+ width: 100%;
+ background: #f3f3f3;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2b0de04..bd8d2e8 100644
--- a/src/main.js
+++ b/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, {
diff --git a/src/router.js b/src/router.js
index 958c913..7ae7335 100644
--- a/src/router.js
+++ b/src/router.js
@@ -154,6 +154,18 @@
meta: { title: '鎶ュ憡棰勮' }
}
]
+ },
+ {
+ path: '/pdf',
+ component: Layout,
+ children: [
+ {
+ path: 'h5',
+ component: () => import('@/views/pdf/reportH5'),
+ name: 'reportView',
+ meta: { title: '鎶ュ憡棰勮' }
+ }
+ ]
}
]
})
diff --git a/src/views/pdf/reportH5.vue b/src/views/pdf/reportH5.vue
new file mode 100644
index 0000000..dbc49e9
--- /dev/null
+++ b/src/views/pdf/reportH5.vue
@@ -0,0 +1,273 @@
+<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="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',
+ //鑻ュ皢姝ゅ睘鎬ф斁鍦╮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%;
+ }
+
+</style>
--
Gitblit v1.9.1