feat: 减少页面dom层级

pages/index/index.vue

 <template>
-	<view
-		class="canvas"
-		:style="[styleObject]"
-	>
-		<view class="viewport-wrapper" :style="{
-			width: `${reportInfo.width * scale}px`,
-			height: `${reportInfo.height * scale}px`
-		}">
+	<view class="viewport-wrapper" :style="[styleObject]">
 		<template v-for="(element, index) in reportData">
 			<view
 				class="view-element"
@@ -60,7 +53,6 @@
 			</view>
 		</template>
 	</view>
-  </view>
 </template>
 
 <script>
@@ -75,9 +67,11 @@
 		computed: {
 			styleObject() {
 				let params = {}
-				const { backgroundColor, backgroundImage } = this.reportInfo
+				const { backgroundColor, backgroundImage, width, height } = this.reportInfo
 				if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
 				return {
+					width: `${width * this.scale}px`,
+					height: `${height * this.scale}px`,
 					'background-color': backgroundColor,
 					...params
 				}
@@ -90,7 +84,6 @@
 		}, 
 		onLoad() {
 			this.userAuthCheck()
-			this.getReportCharts()
 			/**
 			 * 组件交互 - 参数
 			 */
@@ -111,6 +104,7 @@
 		onUnload() {
 			// 移除监听事件
 			uni.$off('handleLinkParams')
+			uni.$off('handleLinkComp')
 			clearInterval(this.timename)
 		},
 		methods: {
@@ -121,7 +115,7 @@
 				var authorized = uni.getStorageSync('authorized')
 				if (userId) {
 						if (authorized) {
-							
+							this.getReportCharts()
 						} else {
 							uni.reLaunch({
 								url:'../login/authorized'
@@ -208,7 +202,7 @@
 </script>
 
 <style lang="scss" scoped>
-.canvas {
+.viewport-wrapper {
 	position: relative;
 	height: 100%;
 	user-select: none;
@@ -217,9 +211,6 @@
 	background-size: cover;
 	background-position: center;
 }
-.viewport-wrapper {
-	position: relative;
-}
 .view-element {
 	position: absolute;
 	user-select: none;