feat:use that repleace this in some functions

components/BarMixMap/BarMixMap.vue

@@ -32,27 +32,28 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					clearInterval(this.changeTimer)
-					this.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this 
+				that.$nextTick(() => {
+					clearInterval(that.changeTimer)
+					that.$refs['barMixMapCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
 						})
 						canvas.setChart(chart)
-						let options = this.setMapOption()
-						const { mapMixBarShow, mapMixBarChangeInterval} = this.elementInfo.option.mapMix
+						let options = that.setMapOption()
+						const { mapMixBarShow, mapMixBarChangeInterval} = that.elementInfo.option.mapMix
 						let flag = true
 						chart.setOption(options, true)
 						chart.on('click', event => {
-							this.handleEchartsClick(event)
+							that.handleEchartsClick(event)
 						})
 						// 柱状图 地图 切换
 						if(mapMixBarShow && mapMixBarChangeInterval) {
-							clearInterval(this.changeTimer)
-							this.changeTimer = setInterval(() => {
-								options = flag ? this.setBarOption() : this.setMapOption()
+							clearInterval(that.changeTimer)
+							that.changeTimer = setInterval(() => {
+								options = flag ? that.setBarOption() : that.setMapOption()
 								flag = !flag
 								chart.setOption(options, true)
 							}, mapMixBarChangeInterval * 1000)

components/ChinaMap/ChinaMap.vue

@@ -28,15 +28,16 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.$refs['chinaMapCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this
+				that.$nextTick(() => {
+					that.$refs['chinaMapCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
 						})
 						canvas.setChart(chart)
-						const { dataList } = this.elementData
+						const { dataList } = that.elementData
 						const seriesData = dataList.chinaMapAreas || []
 						// 处理成地图所需的数据格式
 						const finalData = [];
@@ -71,7 +72,7 @@
 										curveness: 0.2
 									}
 								},
-								data: this.convertData(item[1])
+								data: that.convertData(item[1])
 							}, {
 								name: item[0],
 								type: 'effectScatter',
@@ -84,15 +85,15 @@
 									show: true,
 									position: 'right',
 									formatter: value => {
-										if(this.elementInfo.option.dataset.formatter) {
-											return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, value)
+										if(that.elementInfo.option.dataset.formatter) {
+											return that.$u.common.converFunction(that.elementInfo.option.dataset.formatter, value)
 										} else {
-											return this.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
+											return that.elementInfo.option.dataset.show ? `${value.data.name}:${value.data.value[2]}` : value.data.name
 										}
 									},
-									fontSize: this.elementInfo.option.dataset.fontSize,
-									color: this.elementInfo.option.dataset.color,
-									fontWeight: this.elementInfo.option.dataset.fontWeight
+									fontSize: that.elementInfo.option.dataset.fontSize,
+									color: that.elementInfo.option.dataset.color,
+									fontWeight: that.elementInfo.option.dataset.fontWeight
 								},
 								symbolSize: 4,
 								itemStyle: {
@@ -109,10 +110,10 @@
 						
 						const options = {
 							title: {
-								...this.elementInfo.option.title
+								...that.elementInfo.option.title
 							},
 							legend: {
-								...this.elementInfo.option.legend
+								...that.elementInfo.option.legend
 							},
 							geo: {
 								map: 'china',
@@ -132,7 +133,7 @@
 						}
 						chart.setOption(options)
 						chart.on('click', event => {
-							this.handleEchartsClick(event)
+							that.handleEchartsClick(event)
 						})
 						return chart
 					})

components/CountTo/CountTo.vue

@@ -28,11 +28,12 @@
 		},		
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.startVal = this.endVal
-					this.endVal = this.elementData.dataList.endVal
-					if(this.elementInfo.option.countTo.duration) {
-						this.duration = this.elementInfo.option.countTo.duration * 1000
+				const that = this
+				that.$nextTick(() => {
+					that.startVal = that.endVal
+					that.endVal = that.elementData.dataList.endVal
+					if(that.elementInfo.option.countTo.duration) {
+						that.duration = that.elementInfo.option.countTo.duration * 1000
 					}
 				})
 			},

components/HorizontalBar/HorizontalBar.vue

@@ -23,9 +23,10 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.$refs['horizontalBarCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this
+				that.$nextTick(() => {
+					that.$refs['horizontalBarCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
@@ -38,15 +39,15 @@
 								preview,
 								images
 							}
-						} = this.elementData
+						} = that.elementData
 						const options = {
-							...this.elementInfo.option,
+							...that.elementInfo.option,
 							tooltip: {},
 							yAxis: {
-								...this.elementInfo.option.yAxis,
+								...that.elementInfo.option.yAxis,
 								data: categories
 							},
-							series: this.dealSeriesData(series)
+							series: that.dealSeriesData(series)
 						}
 						chart.setOption(options)
 						chart.on('click', event => {
@@ -57,7 +58,7 @@
 									urls: images
 								})
 							} else {
-								this.handleEchartsClick(event)
+								that.handleEchartsClick(event)
 							}
 						})
 						return chart
@@ -69,14 +70,15 @@
 			 */
 			dealSeriesData(data) {
 				if (!data) return
+				const that = this
 				const newData = data.map(item => {
 					const config = {
 						type: 'bar',
-						...this.elementInfo.option.bar,
+						...that.elementInfo.option.bar,
 						label: {
-							...this.elementInfo.option.dataset,
+							...that.elementInfo.option.dataset,
 							formatter: val => {
-								return this.$u.common.converFunction(this.elementInfo.option.dataset
+								return that.$u.common.converFunction(that.elementInfo.option.dataset
 									.formatter, val)
 							}
 						}

components/LineMixBar/LineMixBar.vue

@@ -28,9 +28,10 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.$refs['lineMixBarCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this
+				that.$nextTick(() => {
+					that.$refs['lineMixBarCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
@@ -41,28 +42,28 @@
 								categories,
 								series
 							}
-						} = this.elementData
+						} = that.elementData
 						const options = {
-							...this.elementInfo.option,
+							...that.elementInfo.option,
 							tooltip: {},
 							xAxis: {
-								...this.elementInfo.option.xAxis,
+								...that.elementInfo.option.xAxis,
 								data: categories
 							},
 							yAxis: [{
-									...this.elementInfo.option.yAxis,
+									...that.elementInfo.option.yAxis,
 									type: 'value'
 								},
 								{
-									...this.elementInfo.option.yAxis,
+									...that.elementInfo.option.yAxis,
 									type: 'value'
 								}
 							],
-							series: this.dealSeriesData(series)
+							series: that.dealSeriesData(series)
 						}
 						chart.setOption(options)
 						chart.on('click', event => {
-							this.handleEchartsClick(event)
+							that.handleEchartsClick(event)
 						})
 						return chart
 					})
@@ -73,25 +74,26 @@
 			 */
 			dealSeriesData(data) {
 				if (!data) return
+				const that = this
 				const newData = data.map(item => {
 					let config = {
 						label: {
-							...this.elementInfo.option.dataset,
+							...that.elementInfo.option.dataset,
 							formatter: val => {
-								return this.$u.common.converFunction(this.elementInfo.option.dataset.formatter, val)
+								return that.$u.common.converFunction(that.elementInfo.option.dataset.formatter, val)
 							}
 						}
 					}
 					if (item.type === 'bar') {
 						config = {
 							...config,
-							...this.elementInfo.option.bar
+							...that.elementInfo.option.bar
 						}
 					} else if (item.type === 'line') {
 						config = {
 							yAxisIndex: 1,
 							...config,
-							...this.elementInfo.option.line
+							...that.elementInfo.option.line
 						}
 					}
 					return {

components/NormalBar/NormalBar.vue

@@ -23,9 +23,10 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.$refs['normalbarCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this
+				that.$nextTick(() => {
+					that.$refs['normalbarCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
@@ -36,19 +37,19 @@
 								categories,
 								series
 							}
-						} = this.elementData
+						} = that.elementData
 						const options = {
-							...this.elementInfo.option,
+							...that.elementInfo.option,
 							tooltip: {},
 							xAxis: {
-								...this.elementInfo.option.xAxis,
+								...that.elementInfo.option.xAxis,
 								data: categories
 							},
-							series: this.dealSeriesData(series)
+							series: that.dealSeriesData(series)
 						}
 						chart.setOption(options)
 						chart.on('click', event => {
-							this.handleEchartsClick(event)
+							that.handleEchartsClick(event)
 						})
 						return chart
 					})
@@ -59,14 +60,15 @@
 			 */
 			dealSeriesData(data) {
 				if (!data) return
+				const that = this
 				const newData = data.map(item => {
 					const config = {
 						type: 'bar',
-						...this.elementInfo.option.bar,
+						...that.elementInfo.option.bar,
 						label: {
-							...this.elementInfo.option.dataset,
+							...that.elementInfo.option.dataset,
 							formatter: val => {
-								return this.$u.common.converFunction(this.elementInfo.option.dataset
+								return that.$u.common.converFunction(that.elementInfo.option.dataset
 									.formatter, val)
 							}
 						}

components/NormalGauge/NormalGauge.vue

@@ -31,17 +31,18 @@ export default {
 	
 	methods: {
 		initChart() {
-			this.$nextTick(() => {
-				this.$refs['normalGaugeCanvas'].init((canvas, width, height, canvasDpr) => {
-					chart = this.$echarts.init(canvas, null, {
+			const that = this
+			that.$nextTick(() => {
+				that.$refs['normalGaugeCanvas'].init((canvas, width, height, canvasDpr) => {
+					chart = that.$echarts.init(canvas, null, {
 						width: width,
 						height: height,
 						devicePixelRatio: canvasDpr
 					})
 					canvas.setChart(chart)
-					const { dataList: { guageChart } } = this.elementData
+					const { dataList: { guageChart } } = that.elementData
 					const options = {
-						...this.elementInfo.option,
+						...that.elementInfo.option,
 						tooltip: {
 						    formatter: '{a} <br/>{b} : {c}%'
 						},

components/NormalLine/NormalLine.vue

@@ -22,9 +22,10 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.$refs['normalLineCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this
+				that.$nextTick(() => {
+					that.$refs['normalLineCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
@@ -35,22 +36,22 @@
 								categories,
 								series
 							}
-						} = this.elementData
+						} = that.elementData
 						const options = {
-							...this.elementInfo.option,
+							...that.elementInfo.option,
 							color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
 								'#f0ad54', '#ffffff', '#000000'
 							],
 							tooltip: {},
 							xAxis: {
-								...this.elementInfo.option.xAxis,
+								...that.elementInfo.option.xAxis,
 								data: categories
 							},
-							series: this.dealSeriesData(series)
+							series: that.dealSeriesData(series)
 						}
 						chart.setOption(options)
 						chart.on('click', event => {
-							this.handleEchartsClick(event)
+							that.handleEchartsClick(event)
 						})
 						return chart
 					})
@@ -61,14 +62,15 @@
 			 */
 			dealSeriesData(data) {
 				if (!data) return
+				const that = this
 				const newData = data.map(item => {
 					const config = {
 						type: 'line',
-						...this.elementInfo.option.line,
+						...that.elementInfo.option.line,
 						label: {
-							...this.elementInfo.option.dataset,
+							...that.elementInfo.option.dataset,
 							formatter: val => {
-								return this.$u.common.converFunction(this.elementInfo.option.dataset
+								return that.$u.common.converFunction(that.elementInfo.option.dataset
 									.formatter, val)
 							}
 						}

components/NormalPie/NormalPie.vue

@@ -31,27 +31,28 @@ export default {
 	
 	methods: {
 		initChart() {
-			this.$nextTick(() => {
-				this.$refs['normalPieCanvas'].init((canvas, width, height, canvasDpr) => {
-					chart = this.$echarts.init(canvas, null, {
+			const that = this
+			that.$nextTick(() => {
+				that.$refs['normalPieCanvas'].init((canvas, width, height, canvasDpr) => {
+					chart = that.$echarts.init(canvas, null, {
 						width: width,
 						height: height,
 						devicePixelRatio: canvasDpr
 					})
 					canvas.setChart(chart)
-					const { dataList: { series } } = this.elementData
+					const { dataList: { series } } = that.elementData
 					const options = {
-						...this.elementInfo.option,
+						...that.elementInfo.option,
 						color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'],
 						tooltip: {
 						    trigger: 'item',
 						    formatter: '{a}<br/>{b}:{c}({d}%)'
 						},
-						series: this.dealSeriesData(series)
+						series: that.dealSeriesData(series)
 					}
 					chart.setOption(options)
 					chart.on('click', event => {
-						this.handleEchartsClick(event)
+						that.handleEchartsClick(event)
 					})
 					return chart
 				})

components/NormalRadar/NormalRadar.vue

@@ -28,9 +28,10 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.$refs['normalRadarCanvas'].init((canvas, width, height, canvasDpr) => {
-						chart = this.$echarts.init(canvas, null, {
+				const that = this
+				that.$nextTick(() => {
+					that.$refs['normalRadarCanvas'].init((canvas, width, height, canvasDpr) => {
+						chart = that.$echarts.init(canvas, null, {
 							width: width,
 							height: height,
 							devicePixelRatio: canvasDpr
@@ -41,7 +42,7 @@
 								indicator,
 								series
 							}
-						} = this.elementData
+						} = that.elementData
 						const config = {
 							tooltip: {},
 							radar: {
@@ -50,9 +51,9 @@
 							series: [{
 								type: 'radar',
 								label: {
-									...this.elementInfo.option.dataset
+									...that.elementInfo.option.dataset
 								},
-								data: this.dealSeriesData(series)
+								data: that.dealSeriesData(series)
 							}]
 						}
 						chart.setOption(config)

components/NormalTable/NormalTable.vue

@@ -72,9 +72,10 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.columns = this.elementInfo.table.column
-					this.chartTables = this.elementData.dataList.chartTables
+				const that = this
+				that.$nextTick(() => {
+					that.columns = that.elementInfo.table.column
+					that.chartTables = that.elementData.dataList.chartTables
 				})
 			},
 			cellClick(e) {

components/NumberScroll/NumberScroll.vue

@@ -45,9 +45,10 @@
 		
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.endVal = this.elementData.dataList.endVal
-					this.toOrderNumber(this.endVal)
+				const that = this
+				that.$nextTick(() => {
+					that.endVal = that.elementData.dataList.endVal
+					that.toOrderNumber(that.endVal)
 				})
 			},
 			

components/RealTime/RealTime.vue

@@ -33,9 +33,10 @@
 		},
 		methods: {
 			getRealTime() {
-				this.timer = setInterval(() => {
+				const that = this
+				that.timer = setInterval(() => {
 					const timestamp = new Date().getTime()
-					this.realTime = this.$u.timeFormat(timestamp, this.getDateFormat())
+					that.realTime = that.$u.timeFormat(timestamp, that.getDateFormat())
 				}, 1000)
 			},
 			initChart() {},

components/RemoteImage/RemoteImage.vue

@@ -24,8 +24,9 @@
 		},
 		methods:{
 			initChart() {
-				this.$nextTick(() => {
-					this.imageUrl = this.elementData.dataList.imageUrl
+				const that = this
+				that.$nextTick(() => {
+					that.imageUrl = that.elementData.dataList.imageUrl
 				})
 			}
 		}

components/Table/Table.vue

@@ -89,8 +89,9 @@
 		},
 		methods: {
 			initChart() {
-				this.$nextTick(() => {
-					this.chartTables = this.elementData.dataList.chartTables
+				const that = this
+				that.$nextTick(() => {
+					that.chartTables = that.elementData.dataList.chartTables
 				})
 			},
 			cellClick(e) {

mixins/echartElementData.js

@@ -24,15 +24,16 @@ export default {
 		 * 动态数据
 		 */
 		async handleDynamicData (value) {
+			const that = this
 			let { dataUrl, dataMethod, dataFormatter, dataProcessing } = { ...value }
 			dataUrl = dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
-			let res = await this.$u.api[`${dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, {
+			let res = await that.$u.api[`${dataMethod.toLowerCase()}Http`](dataUrl, dataFormatter, {
 				custom: { loading: false }
 			})
 			if (dataProcessing) {
-				this.elementData.dataList = this.$u.common.converFunction(dataProcessing, res.data)
+				that.elementData.dataList = that.$u.common.converFunction(dataProcessing, res.data)
 			} else {
-				this.elementData.dataList = JSON.parse(JSON.stringify(res.data.Result))
+				that.elementData.dataList = JSON.parse(JSON.stringify(res.data.Result))
 			}
 		},
 		/**
@@ -52,16 +53,17 @@ export default {
 		 */
 		async handleDataSet (value) {
 			const { dataSetInfo } = value
-			let res = await this.$u.api.dataSetPreview(dataSetInfo)
+			const that = this
+			let res = await that.$u.api.dataSetPreview(dataSetInfo)
 			const { Status, Msg } = res.data;
 			if (Status == "true") {
 				if(dataSetInfo.script) {
-					this.elementData.dataList = this.$u.common.converFunction(dataSetInfo.script, res.data.Result)
+					that.elementData.dataList = that.$u.common.converFunction(dataSetInfo.script, res.data.Result)
 				} else {
-					this.elementData.dataList = res.data.Result
+					that.elementData.dataList = res.data.Result
 				}
 			} else {
-				this.$u.toast(Msg)
+				that.$u.toast(Msg)
 			}
 		},
 		clearTimer() {
@@ -85,31 +87,32 @@ export default {
   watch: {
 		'elementInfo.data': {
 			handler(newVal) {
-				if(this.elementInfo.hide) return false
+				const that = this
+				if(that.elementInfo.hide) return false
 				if (newVal.dataType === 'static') {
-					this.handleStaticData(newVal)
+					that.handleStaticData(newVal)
 				}
 				else if (newVal.dataType === 'dynamic') {
-					this.handleDynamicData(newVal)
+					that.handleDynamicData(newVal)
 					if (newVal.dataPolling) {
-						this.timer = setInterval(() => {
-							this.handleDynamicData(newVal)
+						that.timer = setInterval(() => {
+							that.handleDynamicData(newVal)
 						}, newVal.dataPollingInterval * 1000)
 					} else {
-						clearInterval(this.timer)
+						clearInterval(that.timer)
 					}
 				}
 				else if (newVal.dataType === 'public') {
-					this.handlePublicData(newVal)
+					that.handlePublicData(newVal)
 				}
 				else if (newVal.dataType === 'dataSet') {
-					this.handleDataSet(newVal)
+					that.handleDataSet(newVal)
 					if (newVal.dataPolling) {
-						this.timer = setInterval(() => {
-							this.handleDataSet(newVal)
+						that.timer = setInterval(() => {
+							that.handleDataSet(newVal)
 						}, newVal.dataPollingInterval * 1000)
 					} else {
-						clearInterval(this.timer)
+						clearInterval(that.timer)
 					}
 				}
 			},

pages/center/index.vue

@@ -34,7 +34,7 @@
 		async onLoad() {
 			var admin = uni.getStorageSync('admin')
             if (admin) {
-                this.$data.admin = admin
+                this.admin = admin
             }
 		},
         onShow() {
@@ -59,7 +59,7 @@
                         itemList[2].count = Result.authorized;
                     }
                     
-                    this.$data.itemList = itemList
+                    this.itemList = itemList
                 })
             },
             // item 点击

pages/details/details.vue

 <template>
 	<view class="viewport-wrapper" :style="[styleObject]">
-		<template v-for="(element, index) in reportData">
+		<template v-for="(element, index) in reportInfo.list">
 			<view
 				class="view-element"
 				v-show="!element.hide"
@@ -60,42 +60,51 @@
 		data() {
 			return {
 				reportInfo: {},
-				reportData: [],
-				timename: null,
-				detailId: ""
+				detailId: "",
+				timename: null
 			}
 		},
 		computed: {
 			styleObject() {
+				if(JSON.stringify(this.reportInfo) == "{}") {
+					return
+				}
 				let params = {}
-				const { backgroundColor, backgroundImage } = this.reportInfo
+				const { backgroundColor, backgroundImage, width, height } = this.reportInfo.info
 				if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
 				return {
+					width: `${width * this.scale}px`,
+					height: `${height * this.scale}px`,
 					'background-color': backgroundColor,
 					...params
 				}
 			},
 			scale() {
+				if(JSON.stringify(this.reportInfo) == "{}") {
+					return
+				}
 				const { windowWidth } = uni.getSystemInfoSync()
-				const { width, height } = this.reportInfo
+				const { width, height } = this.reportInfo.info
 				return windowWidth / width
 			}
 		}, 
 		onLoad(option) {
 			this.detailId = option.id
 			this.userAuthCheck()
-			this.getReportCharts()
+		},  
+		onShow() {
+			const that = this
 			/**
 			 * 组件交互 - 参数
 			 */
 			uni.$on('handleLinkParams', ({index, paramName, value}) => {
-				this.handleValueChange(index, paramName, value)
+				that.handleValueChange(index, paramName, value)
 			})
 			/**
 			 * 组件交互 - 组件
 			 */
 			uni.$on('handleLinkComp', ({ showData, hideData }) => {
-				this.reportData = this.reportData.map(item => {
+				that.reportInfo.list = that.reportInfo.list.map(item => {
 					if(showData.includes(item.id)) item.hide = false
 					if(hideData.includes(item.id)) item.hide = true
 					return item
@@ -105,6 +114,7 @@
 		onUnload() {
 			// 移除监听事件
 			uni.$off('handleLinkParams')
+			uni.$off('handleLinkComp')
 			clearInterval(this.timename)
 		},
 		methods: {
@@ -115,7 +125,7 @@
 				var authorized = uni.getStorageSync('authorized')
 				if (userId) {
 						if (authorized) {
-							
+							this.getReportCharts()
 						} else {
 							uni.reLaunch({
 								url:'../login/authorized'
@@ -144,57 +154,56 @@
 			 */
 			async getReportCharts() {
 				clearInterval(this.timename)
-				let res = await this.$u.api.getReportCharts({id: this.detailId})
+				const that = this 
+				let res = await that.$u.api.getReportCharts({id: that.detailId})
 				uni.stopPullDownRefresh()
 				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
 					if(info.dataUrl) {
-						this.getGlobalData(info)
+						that.getGlobalData(info)
 						if(info.dataPollingInterval) {
-							this.timename = setInterval(() => {
-								this.getGlobalData(info)
+							that.timename = setInterval(() => {
+								that.getGlobalData(info)
 							}, parseInt(info.dataPollingInterval) * 1000)
 						}
 					}
-					this.reportInfo = info
-					this.reportData = list
+					that.reportInfo = res.data.Result
 				}
 			},
 			/**
 			 * 获取全局接口数据
 			 */
 			async getGlobalData(info) {
+				const that = this
 				const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
-				let res = await this.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
+				let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
 					custom: { loading: false }
 				})
-				this.$u.vuex('vuex_globalData', JSON.stringify(res.data))
+				that.$u.vuex('vuex_globalData', JSON.stringify(res.data))
 			},
 			/**
 			 * 组件之间关联
 			 */
 			handleValueChange(index, paramName, value) {
 				if(index.length && paramName && value) {
-					this.reportData = this.reportData.map(item => {
+					const that = this
+					that.reportInfo.list = that.reportInfo.list.map(item => {
 						const flag = index.includes(item.id)
 						if(flag && item.type === 'BasicText' && item.data.dataType === 'static') {
-							this.$set(item.data.dataList, 'text', value)
+							that.$set(item.data.dataList, 'text', value)
 						}
 						if(flag && item.data.dataType === 'dynamic') {
 							if(!item.data.dataFormatter) item.data.dataFormatter = {}
-							this.$set(item.data.dataFormatter, paramName, value)
+							that.$set(item.data.dataFormatter, paramName, value)
 						}
 						if(flag && item.data.dataType === 'dataSet') {
 							if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
-							this.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
+							that.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
 						}
 						return item
 					})
 				}
 			}
-		},
-		onReachBottom() {
-			
 		},
 		onPullDownRefresh() {
 			this.getReportCharts()
@@ -203,18 +212,15 @@
 </script>
 
 <style lang="scss" scoped>
-.canvas {
+.viewport-wrapper {
 	position: relative;
 	height: 100%;
 	user-select: none;
-	overflow: auto;
+	// overflow: auto;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
 }
-.viewport-wrapper {
-	position: relative;
-}
 .view-element {
 	position: absolute;
 	user-select: none;

pages/index/index.vue

 <template>
 	<view class="viewport-wrapper" :style="[styleObject]">
-		<template v-for="(element, index) in reportData">
+		<template v-for="(element, index) in reportInfo.list">
 			<view
 				class="view-element"
 				v-show="!element.hide"
@@ -60,14 +60,16 @@
 		data() {
 			return {
 				reportInfo: {},
-				reportData: [],
 				timename: null
 			}
 		},
 		computed: {
 			styleObject() {
+				if(JSON.stringify(this.reportInfo) == "{}") {
+					return
+				}
 				let params = {}
-				const { backgroundColor, backgroundImage, width, height } = this.reportInfo
+				const { backgroundColor, backgroundImage, width, height } = this.reportInfo.info
 				if(backgroundImage) params = { 'background-image': `url(${backgroundImage})` }
 				return {
 					width: `${width * this.scale}px`,
@@ -77,31 +79,39 @@
 				}
 			},
 			scale() {
+				if(JSON.stringify(this.reportInfo) == "{}") {
+					return
+				}
 				const { windowWidth } = uni.getSystemInfoSync()
-				const { width, height } = this.reportInfo
+				const { width, height } = this.reportInfo.info
 				return windowWidth / width
 			}
 		}, 
 		onLoad() {
 			this.userAuthCheck()
+		}, 
+		 
+		// detail页面也会监听这两个事件，所有index页面需要在onShow里面增加监听，在onHide里面移除监听
+		onShow() {
+			const that = this
 			/**
 			 * 组件交互 - 参数
 			 */
 			uni.$on('handleLinkParams', ({index, paramName, value}) => {
-				this.handleValueChange(index, paramName, value)
+				that.handleValueChange(index, paramName, value)
 			})
 			/**
 			 * 组件交互 - 组件
 			 */
 			uni.$on('handleLinkComp', ({ showData, hideData }) => {
-				this.reportData = this.reportData.map(item => {
+				that.reportInfo.list = that.reportInfo.list.map(item => {
 					if(showData.includes(item.id)) item.hide = false
 					if(hideData.includes(item.id)) item.hide = true
 					return item
 				})
 			})			
 		},
-		onUnload() {
+		onHide() {
 			// 移除监听事件
 			uni.$off('handleLinkParams')
 			uni.$off('handleLinkComp')
@@ -144,49 +154,51 @@
 			 */
 			async getReportCharts() {
 				clearInterval(this.timename)
-				let res = await this.$u.api.getReportCharts({id: '61cd2ba1c06bffbdae442c4f'})
+				const that = this 
+				let res = await that.$u.api.getReportCharts({id: '61cd2ba1c06bffbdae442c4f'})
 				uni.stopPullDownRefresh()
 				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
 					if(info.dataUrl) {
-						this.getGlobalData(info)
+						that.getGlobalData(info)
 						if(info.dataPollingInterval) {
-							this.timename = setInterval(() => {
-								this.getGlobalData(info)
+							that.timename = setInterval(() => {
+								that.getGlobalData(info)
 							}, parseInt(info.dataPollingInterval) * 1000)
 						}
 					}
-					this.reportInfo = info
-					this.reportData = list
+					that.reportInfo = res.data.Result
 				}
 			},
 			/**
 			 * 获取全局接口数据
 			 */
 			async getGlobalData(info) {
+				const that = this
 				const dataUrl = info.dataUrl.replace(/^(\/dashboardCharts)?|^(\/dashboardAPI)?/, '')
-				let res = await this.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
+				let res = await that.$u.api[`${info.dataMethod.toLowerCase()}Http`](dataUrl, info.dataFormatter, {
 					custom: { loading: false }
 				})
-				this.$u.vuex('vuex_globalData', JSON.stringify(res.data))
+				that.$u.vuex('vuex_globalData', JSON.stringify(res.data))
 			},
 			/**
 			 * 组件之间关联
 			 */
 			handleValueChange(index, paramName, value) {
 				if(index.length && paramName && value) {
-					this.reportData = this.reportData.map(item => {
+					const that = this
+					that.reportInfo.list = that.reportInfo.list.map(item => {
 						const flag = index.includes(item.id)
 						if(flag && item.type === 'BasicText' && item.data.dataType === 'static') {
-							this.$set(item.data.dataList, 'text', value)
+							that.$set(item.data.dataList, 'text', value)
 						}
 						if(flag && item.data.dataType === 'dynamic') {
 							if(!item.data.dataFormatter) item.data.dataFormatter = {}
-							this.$set(item.data.dataFormatter, paramName, value)
+							that.$set(item.data.dataFormatter, paramName, value)
 						}
 						if(flag && item.data.dataType === 'dataSet') {
 							if(!item.data.dataSetInfo.queryFormatter) item.data.dataSetInfo.queryFormatter = {}
-							this.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
+							that.$set(item.data.dataSetInfo.queryFormatter, paramName, value)
 						}
 						return item
 					})

pages/reports/reports.vue

@@ -37,7 +37,7 @@
 					pageSize: 10,
 					totalPages: 0,
 					totals: 0,
-					folderId: '61cd45a8c06bffbdae442d09',
+					folderId: '621db7710668d7e647d5f4cc',
 					superAdmin: true
 				}
 			}
@@ -50,16 +50,18 @@
 			 * 获取页面报表配置
 			 */
 			async getReportList() {
-				let res = await this.$u.api.getReportList(this.params)
+				const that = this 
+				let res = await that.$u.api.getReportList(that.params)
 				const { Status, Result } = res.data
+				uni.stopPullDownRefresh()
 				if (Status === 'true') {
-					if(this.params.pageNumber === 1) {
-						this.reportList = Result.content
+					if(that.params.pageNumber === 1) {
+						that.reportList = Result.content
 					} else {
-						this.reportList = this.reportList.concat(Result.content)
+						that.reportList = that.reportList.concat(Result.content)
 					}
-					this.params.totals = Result.total
-					this.params.totalPages = Result.totalPages
+					that.params.totals = Result.total
+					that.params.totalPages = Result.totalPages
 				}
 			},