定时器删除

pages/equipmentDataMonitoring/electronicMonitoring.vue

@@ -3,7 +3,8 @@
 		<view class="background">
 			<!-- 日期选择器 -->
 			<u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
-				mode="time" :params="params" :noselect="false" @confirm="selector2confirm"  @cancel="selector2cancel" @reset="selector2reset">
+				mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @cancel="selector2cancel"
+				@reset="selector2reset">
 			</u-picker-select>
 
 			<view class="navbar-c">
@@ -143,7 +144,7 @@
 
 			<view class="details">
 				<view class="item" v-for="(item, index) in abnormalRecordsList" :key="index"
-				@click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)">
+					@click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)">
 					<view class="name">
 						{{item.configName}}
 					</view>
@@ -167,38 +168,38 @@
 			</view>
 			<view class="grid">
 				<u-grid :col="3" :border="false">
-					<u-grid-item  @click="gotoInfo('3PhaseCurrentDetails','A','三相电流')" >
+					<u-grid-item @click="gotoInfo('3PhaseCurrentDetails','A','三相电流')">
 						<view class="icon icon1">
 							<image class="img" src="@/assets/img/Image@1.png" mode=""></image>
 						</view>
 						<view class="grid-text">三相电流</view>
 					</u-grid-item>
-					<u-grid-item  @click="gotoInfo('3PhaseCurrentDetails','V','三相电压')" >
+					<u-grid-item @click="gotoInfo('3PhaseCurrentDetails','V','三相电压')">
 						<view class="icon icon2">
 							<image class="img" src="@/assets/img/Image@2.png" mode=""></image>
 						</view>
 						<view class="grid-text">三相电压</view>
 					</u-grid-item>
-					<u-grid-item   @click="gotoInfo('3PhaseCurrentDetails','T','三相温度')" >
-						<view class="icon icon3" >
+					<u-grid-item @click="gotoInfo('3PhaseCurrentDetails','T','三相温度')">
+						<view class="icon icon3">
 							<image class="img" src="@/assets/img/Image@3.png" mode=""></image>
 						</view>
 						<view class="grid-text">三相温度</view>
 					</u-grid-item>
-					<u-grid-item  @click="gotoInfo('3PhaseCurrentDetails','P','三相有功功率')" >
+					<u-grid-item @click="gotoInfo('3PhaseCurrentDetails','P','三相有功功率')">
 						<view class="icon icon4">
 							<image class="img" src="@/assets/img/Image@4.png" mode=""></image>
 						</view>
 						<view class="grid-text">三相有功功率</view>
 					</u-grid-item>
-					<u-grid-item  @click="gotoInfo('3PhaseCurrentDetails','F','三相功率因数')"  >
-						<view class="icon icon5"   >
+					<u-grid-item @click="gotoInfo('3PhaseCurrentDetails','F','三相功率因数')">
+						<view class="icon icon5">
 							<image class="img" src="@/assets/img/Image@5.png" mode=""></image>
 						</view>
 						<view class="grid-text">三相功率因数</view>
 					</u-grid-item>
-					<u-grid-item   @click="gotoInfo('3PhaseCurrentDetails','AF','平均功率因数')"  >
-						<view class="icon icon6" >
+					<u-grid-item @click="gotoInfo('3PhaseCurrentDetails','AF','平均功率因数')">
+						<view class="icon icon6">
 							<image class="img" src="@/assets/img/Image@5.png" mode=""></image>
 						</view>
 						<view class="grid-text">平均功率因数</view>
@@ -219,13 +220,13 @@
 			</view>
 			<view class="grid">
 				<u-grid :col="3" :border="false">
-					<u-grid-item  @click="gotoInfo('chartYoYMoM','YoY','同比分析')" >
+					<u-grid-item @click="gotoInfo('chartYoYMoM','YoY','同比分析')">
 						<view class="icon icon7">
 							<image class="img" src="@/assets/img/Image@7.png" mode=""></image>
 						</view>
 						<view class="grid-text">同比分析</view>
 					</u-grid-item>
-					<u-grid-item  @click="gotoInfo('chartYoYMoM','MoM','环比分析')"  >
+					<u-grid-item @click="gotoInfo('chartYoYMoM','MoM','环比分析')">
 						<view class="icon icon8">
 							<image class="img" src="@/assets/img/Image@8.png" mode=""></image>
 						</view>
@@ -377,7 +378,6 @@
 	export default {
 		data() {
 			return {
-				timeOut: true,
 				abnormalRecordsList: [], //异常list
 				companyId: '', //企业id
 				meterId: '', //设备id
@@ -459,7 +459,9 @@
 					name: '指定月份',
 					disabled: false
 				}],
-				value: '2'
+				value: '2',
+				intervalId: null, // 用于存储间隔ID  
+				intervalReady: true, // 用于存储间隔ID 
 			};
 		},
 		onLoad(op) {
@@ -481,35 +483,47 @@
 			this.getCompanyInfoList();
 			this.getAbnormalAlarmRecord();
 		},
-		onReady() {
-			this.getBarCharts(false);
-		},
-		onUnload() {
-			this.timeOut = false;
-		},
 		onHide() {
-			this.timeOut = false;
+			this.clearTimer(); // 组件销毁前清除定时器
+			this.intervalReady=false;
+			console.log( "组件销毁前清除定时器")
 		},
 		methods: {
-			gotoInfo(path,type,name){
-							 if(!this.FormData.meterId){
-								uni.showToast({
-									title: "未查询到电表",
-									icon: "none"
-								})
-								
-								 return
-							 }
-							 uni.navigateTo({
-								 url:"/pages/equipmentDataMonitoring/"+path+"?id="+this.FormData.meterId+"&type="+type+"&typeName="+name
-							 })
-						
+			clearTimer() {
+				if (this.intervalId) {
+					clearInterval(this.intervalId); // 清除定时器  
+					this.intervalId = null; // 重置定时器ID  
+				}
 			},
-			
+			startInterval() {
+				this.clearTimer(); // 组件销毁前清除定时器 
+				this.intervalId = setInterval(() => {
+					// 每隔5秒运行的代码  
+					// console.log('这段代码每隔5秒运行一次');
+					this.getElectricityStatistics(true)
+					this.getTimeSlotStatistics(true)
+				}, 60000);
+			},
+			gotoInfo(path, type, name) {
+				if (!this.FormData.meterId) {
+					uni.showToast({
+						title: "未查询到电表",
+						icon: "none"
+					})
+
+					return
+				}
+				uni.navigateTo({
+					url: "/pages/equipmentDataMonitoring/" + path + "?id=" + this.FormData.meterId + "&type=" + type +
+						"&typeName=" + name
+				})
+
+			},
+
 			// 异常告警记录
 			getAbnormalAlarmRecord() {
 				var queryDate = parseUnixTime(new Date(), '{y}-{m}');
-				
+
 				uni.showLoading({
 					title: "加载中",
 					mask: true,
@@ -665,34 +679,25 @@
 					})
 				})
 			},
-			getTimeSlotStatistics(bl) {
-				if(!bl) {
+			getTimeSlotStatistics(interval) {
+				if (!interval) {
 					uni.showLoading({
 						title: "加载中",
 						mask: true,
 					})
 				}
-				
+
 				this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
 				API.timeSlotStatistics(this.FormData2).then((response) => {
-					if(!bl) {
+					if (!interval) {
 						uni.hideLoading();
 					}
 					this.hourMap = response.data.hourMap;
 					this.sumQuantity = response.data.allKwh;
-					if(!bl) {
-						this.getBarCharts(this.hourMap);
-					} else {
-						this.myChart.setOption({
-							series: [{
-								data: this.hourMap
-							}]
-						});
-					}
-					if(this.timeOut) {
-						setTimeout(() => {
-							this.getTimeSlotStatistics(true);
-						}, 10000)
+					this.getBarCharts(this.hourMap,interval);
+					
+					if(!interval){
+						this.startInterval(); // 组件挂载后开始间隔  
 					}
 				}).catch(error => {
 					uni.showToast({
@@ -701,11 +706,13 @@
 					})
 				})
 			},
-			getElectricityStatistics() {
-				uni.showLoading({
-					title: "加载中",
-					mask: true,
-				})
+			getElectricityStatistics(interval) {
+				if(!interval){
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					})
+				}
 				var obj = {
 					...this.FormData
 				}
@@ -713,7 +720,9 @@
 				// 	obj.queryDate+="-01"
 				// }
 				API.electricityStatistics(obj).then((response) => {
-					uni.hideLoading();
+					if(!interval){
+						uni.hideLoading();
+					}
 					this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
 					var electricity = response.data.kwhMap.kwh + "";
 
@@ -734,6 +743,10 @@
 						}
 						this.$forceUpdate()
 					}
+					
+					if(!interval){
+						this.startInterval(); // 组件挂载后开始间隔  
+					}
 				}).catch(error => {
 					uni.showToast({
 						title: error,
@@ -741,23 +754,25 @@
 					})
 				})
 			},
-			getBarCharts(list) {
+			getBarCharts(list,interval) {
 				if (!this.myChart) {
 					this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
 						width: uni.upx2px(700),
 						height: uni.upx2px(480)
 					});
 				}
-				this.myChart.clear();
+				if(!interval) {
+					this.myChart.clear();
+				}
 
-				var data1=[];
-				var data2=[];
+				var data1 = [];
+				var data2 = [];
 				// var sumQuantity=0
-				for(var i in list){
+				for (var i in list) {
 					data1.push(i)
 					data2.push(list[i])
 					// sumQuantity+=list[i]
-					
+
 				}
 				// this.sumQuantity = sumQuantity.toFixed(2);
 				var headitemby = "";
@@ -814,8 +829,8 @@
 					this.queryDate(this.tabsFrom.show2Index, false)
 				}
 			},
-			selector2cancel(){
-				this.value=this.clickType;
+			selector2cancel() {
+				this.value = this.clickType;
 			},
 			selector2reset(e) {
 				console.log(e)

pages/statistics/statistics.vue

@@ -189,7 +189,7 @@
 
 			</view>
 			<!-- 统计3 设备数据监测-->
-			<view class="statistics-3 statistics" v-if="codes.indexOf('detector') != -1">
+			<view class="statistics-3 statistics" v-if="codes.indexOf('detector')!=-1 && deviceList.length!=0">
 				<view class="title">
 					<view class="icon">
 						<image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
@@ -407,7 +407,6 @@
 		},
 		data() {
 			return {
-				timeOut: true,
 				abnormalRecordsList: [], // 异常告警记录
 				queryDate: '',
 				alarmsPercent: 0,
@@ -431,7 +430,9 @@
 				current: 0,
 				myLineChart: null, // 图表
 				myBarChart: null,
-				myPieChart: null
+				myPieChart: null,
+				intervalId: null, // 用于存储间隔ID
+				intervalReady: true, // 用于存储间隔ID 
 			}
 		},
 		onLoad() {
@@ -452,13 +453,26 @@
 			// this.getBarCharts();
 			// this.getLineCharts();
 		},
-		onUnload() {
-			this.timeOut = false;
-		},
 		onHide() {
-			this.timeOut = false;
+			this.clearTimer(); // 组件销毁前清除定时器
+			this.intervalReady=false;
+			console.log( "组件销毁前清除定时器")
 		},
 		methods: {
+			clearTimer() {
+				if (this.intervalId) {
+					clearInterval(this.intervalId); // 清除定时器  
+					this.intervalId = null; // 重置定时器ID  
+				}
+			},
+			startInterval() {
+				this.clearTimer(); // 组件销毁前清除定时器 
+				this.intervalId = setInterval(() => {
+					// 每隔5秒运行的代码  
+					// console.log('这段代码每隔5秒运行一次');
+					this.getPowerConsumption(0,true)
+				}, 60000);
+			},
 			merchantChange(item, index) {
 				var m = item;
 				var n = this.merchantList1[this.current];
@@ -575,24 +589,31 @@
 				})
 			},
 			// 用电量
-			getPowerConsumption(pl) {
+			getPowerConsumption(pl,interval) {
 				this.pageIndexp = this.pageIndexp + pl;
 				if (this.pageIndexp > this.totalPagep) {
 					this.pageIndexp = 1;
 				}
-
+				
+				if (!interval) {
+					uni.showLoading({
+						title: "加载中",
+						mask: true,
+					})
+				}
 				API.homePageKwh({
 					pageIndex: this.pageIndexp,
 					pageSize: 5,
 					companyId: this.companyId
 				}).then((response) => {
-					
+					if (!interval) {
+						uni.hideLoading();
+					}
 					this.kWhList = response.data.data;
 					this.totalPagep = response.data.totalPage;
-					if(this.timeOut) {
-						setTimeout(() => {
-							this.getPowerConsumption(this.pageIndexp);
-						}, 10000)
+					
+					if(!interval){
+						this.startInterval(); // 组件挂载后开始间隔  
 					}
 				}).catch(error => {
 					uni.showToast({