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`
-		}">
-			<template v-for="(element, index) in reportData">
-				<view
-					class="view-element"
-					v-if="!element.hide"
-					:key="element.id"
-					:style="{
-						width: `${element.width * scale}px`,
-						height: `${element.height * scale}px`,
-						left: `${element.left * scale}px`,
-						top: `${element.top * scale}px`,
-						zIndex: index + 1
-					}"
-				>
-					<!-- 普通柱状图 -->
-					<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
-					<!-- 普通折线图 -->
-					<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
-					<!-- 横向柱状图 -->
-					<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
-					<!-- 折柱图 -->
-					<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
-					<!-- 仪表盘 -->
-					<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
-					<!-- 饼图 -->
-					<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
-					<!-- 中国地图 -->
-					<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
-					<!-- 柱状图混合地图 -->
-					<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
-					<!-- 雷达图 -->
-					<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
-					<!-- 普通数字滚动 -->
-					<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
-					<!-- 数字滚动 -->
-					<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
-					<!-- 普通选项卡 -->
-					<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
-					<!-- 文本框 -->
-					<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
-					<!-- 真实时间 -->
-					<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
-					<!-- 普通进度条 -->
-					<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
-					<!-- 普通图片 -->
-					<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
-					<!-- 远程图片 -->
-					<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
-					<!-- 普通表格 -->
-					<!-- <NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable> -->
-					<Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table>
-				</view>
-			</template>
-		</view>
-  </view>
+	<view class="viewport-wrapper" :style="[styleObject]">
+		<template v-for="(element, index) in reportData">
+			<view
+				class="view-element"
+				v-if="!element.hide"
+				:key="element.id"
+				:style="{
+					width: `${element.width * scale}px`,
+					height: `${element.height * scale}px`,
+					left: `${element.left * scale}px`,
+					top: `${element.top * scale}px`,
+					zIndex: index + 1
+				}"
+			>
+				<!-- 普通柱状图 -->
+				<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
+				<!-- 普通折线图 -->
+				<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
+				<!-- 横向柱状图 -->
+				<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
+				<!-- 折柱图 -->
+				<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
+				<!-- 仪表盘 -->
+				<NormalGauge v-if="element.type == 'NormalGauge'" :elementInfo="element"></NormalGauge>
+				<!-- 饼图 -->
+				<NormalPie v-if="element.type == 'NormalPie'" :elementInfo="element"></NormalPie>
+				<!-- 中国地图 -->
+				<ChinaMap v-if="element.type == 'ChinaMap'" :elementInfo="element"></ChinaMap>
+				<!-- 柱状图混合地图 -->
+				<BarMixMap v-if="element.type == 'BarMixMap'" :elementInfo="element"></BarMixMap>
+				<!-- 雷达图 -->
+				<NormalRadar v-if="element.type == 'NormalRadar'" :elementInfo="element"></NormalRadar>
+				<!-- 普通数字滚动 -->
+				<CountTo v-if="element.type == 'CountTo'" :elementInfo="element"></CountTo>
+				<!-- 数字滚动 -->
+				<NumberScroll v-if="element.type == 'NumberScroll'" :elementInfo="element"></NumberScroll>
+				<!-- 普通选项卡 -->
+				<NormalTabs v-if="element.type == 'NormalTabs'" :elementInfo="element"></NormalTabs>
+				<!-- 文本框 -->
+				<BasicText v-if="element.type == 'BasicText'" :elementInfo="element"></BasicText>
+				<!-- 真实时间 -->
+				<RealTime v-if="element.type == 'RealTime'" :elementInfo="element"></RealTime>
+				<!-- 普通进度条 -->
+				<NormalProgress v-if="element.type == 'NormalProgress'" :elementInfo="element"></NormalProgress>
+				<!-- 普通图片 -->
+				<NormalImage v-if="element.type == 'NormalImage'" :elementInfo="element"></NormalImage>
+				<!-- 远程图片 -->
+				<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
+				<!-- 普通表格 -->
+				<!-- <NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable> -->
+				<Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table>
+			</view>
+		</template>
+	</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;