v1.2.2 优化LED页面图片组播放规则

poly/manifest.json

@@ -2,8 +2,8 @@
     "name" : "mobile_h5",
     "appid" : "__UNI__DE74995",
     "description" : "",
-    "versionName" : "1.2.0",
-    "versionCode" : 120,
+    "versionName" : "1.2.2",
+    "versionCode" : 122,
     "uni-app-x" : {},
     /* 快应用特有相关 */
     "quickapp" : {},

poly/pages/led/index2.uvue

@@ -35,7 +35,6 @@
 	import tools from '../../common/tools';
 	import { apiGetStatistics, apiGetUploadPic } from '../../common/api';
 
-
 	export default {
 		data() {
 			return {
@@ -51,17 +50,21 @@
 				autoplay: true,
 				swiperData: [],		// swiper控件的数据 
 				swiperCurrent: 0,	// swiper当前所在滑块的 index
-				lastSwiperCurIndex: 0,	// 用于新图片加载后恢复之前的图片index
-				picGroupSize: 90,	// 图片分组 每组最大图片数量
+				
+				picGroupSize: 30,	// 图片分组 每组最大图片数量
 				picGroupNum: 0,		// 图片分组 分组数量
 				picGroupCurIndex: 0,// 图片分组 当前播放的分组序号
 				picSwiperIndex: 0,	// 图片分组 当前播放的分组内的图片序号
 				picList: [],		// 图片列表 存放从服务器获取的所有图片
+				
+				jumpFlag: false,	// 图片分组跳转标志 每组图片播放完都会请求新数据，有则直接跳转到新图片所在组
+				jumpGroupIndex: 0,	// 跳转前所在图片分组序号
+				jumpPicIndex: 0,	// 跳转前所在图片分组内的图片序号
+				
 				picInterval: 3000,	// 自动切换时间间隔
 				picDuration: 500,	// 滑动动画时长
 				intervalSta: 0,
 				intervalGrpSw: 0,
-				// imageSrc: '',
 			}
 		},
 		computed: {
@@ -76,11 +79,8 @@
 			}
 		},
 		onLoad(event) { // 类型非必填，可自动推导
-			// this.SumDuration = 1622;
-			// this.SumDistance = 999050;
-			// this.SumDistance = 999949;
-			// this.SumDistance = 2066869;
-			// this.imageSrc = "/static/led/pic2.jpg";
+			console.log("图片组容量：" + this.picGroupSize);
+			console.log("图片显示时长(ms)：" + this.picInterval);
 			
 			this.swiperData = this.picList[0];
 
@@ -94,12 +94,10 @@
 			this.handleGroupSwitch();
 
 			this.intervalSta = setInterval(this.getStatistics, 1000);
-			// this.intervalGrpSw = setInterval(this.handleGroupSwitch, 1000);
 		},
 		onUnload() {
 			console.log("onUnload");
 			clearInterval(this.intervalSta);
-			// clearInterval(this.intervalGrpSw);
 		},
 		methods: {
 			handleGroupSwitch() {
@@ -114,21 +112,9 @@
 					this.picSwiperIndex = 0;
 					this.autoplay = false;
 					setTimeout(() => {
-						// 播放下一组图片
-						if (this.picGroupCurIndex < this.picGroupNum - 1) {
-							this.picGroupCurIndex++;
-							// this.swiperData = this.picList[this.picGroupCurIndex];
-							this.setSwiperData(this.picList[this.picGroupCurIndex]);
-							this.swiperCurrent = 0;
-							console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
-						}
-						// 所有图片组都播放完后，重新获取图片数据
-						else {
-							console.log("播放完毕，重新获取图片数据...  picGroupCurIndex: " , this.picGroupCurIndex);
-							this.lastSwiperCurIndex = this.picSwiperIndex;
-							this.getUploadPic();
-						}
-						
+						// 每播放完一组图片后都向服务器请求一次新图片数据
+						console.log("组 " + this.picGroupCurIndex + " 播放完毕，获取新图片数据...");
+						this.getUploadPic();
 						this.autoplay = true;
 						setTimeout(this.handleGroupSwitch, 1000);
 						
@@ -143,6 +129,8 @@
 				if (res == undefined) {
 					return;
 				}
+				// this.swiperData = res;
+				
 				this.swiperData = [];
 				for (let n=0; n<res.length; n++) {
 					this.swiperData.push(res[n]);
@@ -210,6 +198,10 @@
 
 						if (newCount > this.picCount) { // 有新图片
 							console.log("有 " + (newCount - this.picCount) + " 张新图片");
+							
+							let firstNewPicGroupIndex = 0;	// 第一张新图片的组序号
+							let firstNewPicIndex = 0;		// 第一张新图片所属组内的序号
+							
 							// 将新增的图片追加到图片队列
 							for (let i = this.picCount; i < newCount; i++) {
 								let picUrl = data.Domain + data.List[i];
@@ -217,49 +209,83 @@
 								if (this.picList.length == 0) {
 									this.picGroupNum = 1;
 									this.picList[this.picGroupNum-1] = new Array();
-									console.log("新增图片分组: " + this.picGroupNum);
+									console.log("新增图片分组: " + (this.picGroupNum-1));
 								}
+								
 								if (this.picList[this.picGroupNum-1].length >= this.picGroupSize) {
 									this.picGroupNum++;
 									this.picList[this.picGroupNum-1] = new Array();
-									console.log("新增图片分组: " + this.picGroupNum);
+									console.log("新增图片分组: " + (this.picGroupNum-1));
+								}
+								
+								if (i == this.picCount) {	// 第一张新图片
+									firstNewPicGroupIndex = this.picGroupNum-1;
+									firstNewPicIndex = this.picList[this.picGroupNum-1].length;
 								}
+								
 								this.picList[this.picGroupNum-1].push(picUrl);
-								// console.log("picList[" + (this.picGroupNum-1) + "][" + (this.picList[this.picGroupNum-1].length-1) + "]: " + picUrl);
-								// console.log("--> picList", this.picList[this.picGroupNum-1]);
-								// for (let j=0; j<15; j++) {
-								// 	this.picList[this.picGroupNum-1].push(picUrl);
-								// }
 							}
 							// console.log("*** picList 总数量", this.picList.length);
 							
-							// if (this.picCount > 0) {
-							// 	// this.swiperCurrent = this.picCount;
-							// 	this.swiperCurrent = this.lastSwiperCurIndex;
-							// 	console.log("重定位 picGroupCurIndex", this.picGroupCurIndex);
-							// 	console.log("重定位 index", this.swiperCurrent);
-							// }
-							
 							this.picCount = newCount;
-							this.autoplay = false;
-							// this.swiperData = this.picList[this.picGroupCurIndex];
-							this.setSwiperData(this.picList[this.picGroupCurIndex]);
-							this.swiperCurrent = this.lastSwiperCurIndex;
-							this.picSwiperIndex = this.lastSwiperCurIndex;
-							this.autoplay = true;
-							console.log("重定位 picGroupCurIndex", this.picGroupCurIndex);
-							console.log("重定位 index", this.swiperCurrent);
+							
+							// 有新图片，将跳转到新图片所在组, 先保存跳转位置，用于新图片播放完后的回跳
+							this.jumpFlag = true;
+							this.jumpGroupIndex = this.picGroupCurIndex;
+							this.jumpPicIndex = this.picSwiperIndex;
+							
+							// 跳转到第一张新图片所在的组
+							this.setSwiperData(this.picList[firstNewPicGroupIndex]);
+							this.picGroupCurIndex = firstNewPicGroupIndex;
+							this.swiperCurrent = firstNewPicIndex;
+							this.picSwiperIndex = firstNewPicIndex;
+							
+							console.log("==> 新图片跳转 pic group: " + this.picGroupCurIndex + " / pic index: " + this.picSwiperIndex);
 						}
 						else { // 没有新图片
-							// 从第1组重新开始播放图片
-							console.log("没有新图片，从第1组重新开始播放图片");
-							this.autoplay = false;
-							this.picGroupCurIndex = 0;
-							this.swiperCurrent = 0;
-							this.picSwiperIndex = 0;
-							// this.swiperData = this.picList[this.picGroupCurIndex];
+							// 当前播放组不是最后一组
+							if (this.picGroupCurIndex < this.picGroupNum - 1) {
+								// 继续播放下一组图片
+								this.picGroupCurIndex++;
+								this.swiperCurrent = 0;
+								this.picSwiperIndex = 0;
+								console.log("没有新图片，继续播放下一组图片 pic group: " + this.picGroupCurIndex);
+							}
+							// 当前播放组是最后一组
+							else {
+								// 判断是否需要回跳
+								if (this.jumpFlag) {
+									this.jumpFlag = false;
+									
+									// 回跳组不是最后一组
+									if (this.jumpGroupIndex < this.picGroupNum - 1) {
+										// 回跳到原先发生跳转组的下一个组
+										this.picGroupCurIndex = this.jumpGroupIndex + 1;
+									}
+									// 回跳组是最后一组
+									else {
+										// 回跳到第一组
+										this.picGroupCurIndex = 0;
+									}
+									this.swiperCurrent = 0;
+									this.picSwiperIndex = 0;
+									
+									// 回跳到原先发生跳转的组
+									// this.picGroupCurIndex = this.jumpGroupIndex;
+									// this.swiperCurrent = this.jumpPicIndex;
+									// this.picSwiperIndex = this.jumpPicIndex;
+									
+									console.log("==> 全部播放完毕，没有新图片，回跳播放 pic group: " + this.picGroupCurIndex);
+								}
+								else {	// 从第1组重新开始播放图片
+									this.picGroupCurIndex = 0;
+									this.swiperCurrent = 0;
+									this.picSwiperIndex = 0;
+									console.log("全部播放完毕，没有新图片，开始重播 pic group: " + this.picGroupCurIndex);
+								}
+							}
 							this.setSwiperData(this.picList[this.picGroupCurIndex]);
-							this.autoplay = true;
+							
 							// console.log("picList", this.picList);
 							// console.log("swiperData", this.swiperData);
 						}
@@ -288,25 +314,9 @@
 				const curIndex = e.detail.current;
 				this.picSwiperIndex = curIndex;
 				
-				// // 当前组已播完
+				// 当前组已播完
 				if (curIndex == this.swiperData.length - 1) {
 					this.autoplay = false;
-				// 	setTimeout(() => {
-				// 		// 播放下一组图片
-				// 		if (this.picGroupCurIndex < this.picGroupNum - 1) {
-				// 			this.picGroupCurIndex++;
-				// 			// this.swiperData = this.picList[this.picGroupCurIndex];
-				// 			// this.swiperCurrent = 0;
-				// 			this.setSwiperData(this.picList[this.picGroupCurIndex]);
-				// 			console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
-				// 		}
-				// 		// 所有图片组都播放完后，重新获取图片数据
-				// 		else {
-				// 			console.log("播放完毕，重新获取图片数据..." , this.picGroupCurIndex);
-				// 			this.lastSwiperCurIndex = curIndex;
-				// 			this.getUploadPic();
-				// 		}
-				// 	}, this.picInterval - 100);	// 时间-100ms，防止swiper滑动到下一个图片
 				}
 
 			},
@@ -317,30 +327,6 @@
 			animationfinish(e) {
 				// console.log('animationfinish');
 				// console.log("pic group: " + this.picGroupCurIndex + " / pic index: " + e.detail.current);
-				// const curIndex = e.detail.current;
-				
-				// // 当前组已播完
-				// if (curIndex == this.swiperData.length - 1) {
-				// 	// setTimeout(() => {
-				// 		// 播放下一组图片
-				// 		if (this.picGroupCurIndex < this.picGroupNum - 1) {
-				// 			this.picGroupCurIndex++;
-				// 			this.swiperCurrent = 0;
-				// 			// this.swiperData = this.picList[this.picGroupCurIndex];
-				// 			this.setSwiperData(this.picList[this.picGroupCurIndex]);
-				// 			console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
-				// 			// console.log("picList", this.picList);
-				// 			// console.log("swiperData", this.swiperData);
-				// 		}
-				// 		// 所有图片组都播放完后，重新获取图片数据
-				// 		else {
-				// 			console.log("播放完毕，重新获取图片数据..." , this.picGroupCurIndex);
-				// 			this.lastSwiperCurIndex = curIndex;
-				// 			this.getUploadPic();
-				// 		}
-				// 	// }, this.picInterval - 1000);	// 时间-100ms，防止swiper滑动到下一个图片
-				// }
-				
 			}
 		}
 	}

poly/pages/led/index3.uvue

@@ -50,17 +50,21 @@
 				autoplay: true,
 				swiperData: [],		// swiper控件的数据 
 				swiperCurrent: 0,	// swiper当前所在滑块的 index
-				lastSwiperCurIndex: 0,	// 用于新图片加载后恢复之前的图片index
-				picGroupSize: 90,	// 图片分组 每组最大图片数量
+				
+				picGroupSize: 30,	// 图片分组 每组最大图片数量
 				picGroupNum: 0,		// 图片分组 分组数量
 				picGroupCurIndex: 0,// 图片分组 当前播放的分组序号
 				picSwiperIndex: 0,	// 图片分组 当前播放的分组内的图片序号
 				picList: [],		// 图片列表 存放从服务器获取的所有图片
+				
+				jumpFlag: false,	// 图片分组跳转标志 每组图片播放完都会请求新数据，有则直接跳转到新图片所在组
+				jumpGroupIndex: 0,	// 跳转前所在图片分组序号
+				jumpPicIndex: 0,	// 跳转前所在图片分组内的图片序号
+				
 				picInterval: 3000,	// 自动切换时间间隔
 				picDuration: 500,	// 滑动动画时长
 				intervalSta: 0,
 				intervalGrpSw: 0,
-				// imageSrc: '',
 			}
 		},
 		computed: {
@@ -75,11 +79,8 @@
 			}
 		},
 		onLoad(event) { // 类型非必填，可自动推导
-			// this.SumDuration = 1622;
-			// this.SumDistance = 999050;
-			// this.SumDistance = 999949;
-			// this.SumDistance = 2066869;
-			// this.imageSrc = "/static/led/pic2.jpg";
+			console.log("图片组容量：" + this.picGroupSize);
+			console.log("图片显示时长(ms)：" + this.picInterval);
 			
 			this.swiperData = this.picList[0];
 
@@ -93,12 +94,10 @@
 			this.handleGroupSwitch();
 
 			this.intervalSta = setInterval(this.getStatistics, 1000);
-			// this.intervalGrpSw = setInterval(this.handleGroupSwitch, 1000);
 		},
 		onUnload() {
 			console.log("onUnload");
 			clearInterval(this.intervalSta);
-			// clearInterval(this.intervalGrpSw);
 		},
 		methods: {
 			handleGroupSwitch() {
@@ -113,21 +112,9 @@
 					this.picSwiperIndex = 0;
 					this.autoplay = false;
 					setTimeout(() => {
-						// 播放下一组图片
-						if (this.picGroupCurIndex < this.picGroupNum - 1) {
-							this.picGroupCurIndex++;
-							// this.swiperData = this.picList[this.picGroupCurIndex];
-							this.setSwiperData(this.picList[this.picGroupCurIndex]);
-							this.swiperCurrent = 0;
-							console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
-						}
-						// 所有图片组都播放完后，重新获取图片数据
-						else {
-							console.log("播放完毕，重新获取图片数据...  picGroupCurIndex: " , this.picGroupCurIndex);
-							this.lastSwiperCurIndex = this.picSwiperIndex;
-							this.getUploadPic();
-						}
-						
+						// 每播放完一组图片后都向服务器请求一次新图片数据
+						console.log("组 " + this.picGroupCurIndex + " 播放完毕，获取新图片数据...");
+						this.getUploadPic();
 						this.autoplay = true;
 						setTimeout(this.handleGroupSwitch, 1000);
 						
@@ -142,6 +129,8 @@
 				if (res == undefined) {
 					return;
 				}
+				// this.swiperData = res;
+				
 				this.swiperData = [];
 				for (let n=0; n<res.length; n++) {
 					this.swiperData.push(res[n]);
@@ -209,6 +198,10 @@
 
 						if (newCount > this.picCount) { // 有新图片
 							console.log("有 " + (newCount - this.picCount) + " 张新图片");
+							
+							let firstNewPicGroupIndex = 0;	// 第一张新图片的组序号
+							let firstNewPicIndex = 0;		// 第一张新图片所属组内的序号
+							
 							// 将新增的图片追加到图片队列
 							for (let i = this.picCount; i < newCount; i++) {
 								let picUrl = data.Domain + data.List[i];
@@ -216,49 +209,83 @@
 								if (this.picList.length == 0) {
 									this.picGroupNum = 1;
 									this.picList[this.picGroupNum-1] = new Array();
-									console.log("新增图片分组: " + this.picGroupNum);
+									console.log("新增图片分组: " + (this.picGroupNum-1));
 								}
+								
 								if (this.picList[this.picGroupNum-1].length >= this.picGroupSize) {
 									this.picGroupNum++;
 									this.picList[this.picGroupNum-1] = new Array();
-									console.log("新增图片分组: " + this.picGroupNum);
+									console.log("新增图片分组: " + (this.picGroupNum-1));
 								}
+								
+								if (i == this.picCount) {	// 第一张新图片
+									firstNewPicGroupIndex = this.picGroupNum-1;
+									firstNewPicIndex = this.picList[this.picGroupNum-1].length;
+								}
+								
 								this.picList[this.picGroupNum-1].push(picUrl);
-								// console.log("picList[" + (this.picGroupNum-1) + "][" + (this.picList[this.picGroupNum-1].length-1) + "]: " + picUrl);
-								// console.log("--> picList", this.picList[this.picGroupNum-1]);
-								// for (let j=0; j<15; j++) {
-								// 	this.picList[this.picGroupNum-1].push(picUrl);
-								// }
 							}
 							// console.log("*** picList 总数量", this.picList.length);
 							
-							// if (this.picCount > 0) {
-							// 	// this.swiperCurrent = this.picCount;
-							// 	this.swiperCurrent = this.lastSwiperCurIndex;
-							// 	console.log("重定位 picGroupCurIndex", this.picGroupCurIndex);
-							// 	console.log("重定位 index", this.swiperCurrent);
-							// }
-							
 							this.picCount = newCount;
-							this.autoplay = false;
-							// this.swiperData = this.picList[this.picGroupCurIndex];
-							this.setSwiperData(this.picList[this.picGroupCurIndex]);
-							this.swiperCurrent = this.lastSwiperCurIndex;
-							this.picSwiperIndex = this.lastSwiperCurIndex;
-							this.autoplay = true;
-							console.log("重定位 picGroupCurIndex", this.picGroupCurIndex);
-							console.log("重定位 index", this.swiperCurrent);
+							
+							// 有新图片，将跳转到新图片所在组, 先保存跳转位置，用于新图片播放完后的回跳
+							this.jumpFlag = true;
+							this.jumpGroupIndex = this.picGroupCurIndex;
+							this.jumpPicIndex = this.picSwiperIndex;
+							
+							// 跳转到第一张新图片所在的组
+							this.setSwiperData(this.picList[firstNewPicGroupIndex]);
+							this.picGroupCurIndex = firstNewPicGroupIndex;
+							this.swiperCurrent = firstNewPicIndex;
+							this.picSwiperIndex = firstNewPicIndex;
+							
+							console.log("==> 新图片跳转 pic group: " + this.picGroupCurIndex + " / pic index: " + this.picSwiperIndex);
 						}
 						else { // 没有新图片
-							// 从第1组重新开始播放图片
-							console.log("没有新图片，从第1组重新开始播放图片");
-							this.autoplay = false;
-							this.picGroupCurIndex = 0;
-							this.swiperCurrent = 0;
-							this.picSwiperIndex = 0;
-							// this.swiperData = this.picList[this.picGroupCurIndex];
+							// 当前播放组不是最后一组
+							if (this.picGroupCurIndex < this.picGroupNum - 1) {
+								// 继续播放下一组图片
+								this.picGroupCurIndex++;
+								this.swiperCurrent = 0;
+								this.picSwiperIndex = 0;
+								console.log("没有新图片，继续播放下一组图片 pic group: " + this.picGroupCurIndex);
+							}
+							// 当前播放组是最后一组
+							else {
+								// 判断是否需要回跳
+								if (this.jumpFlag) {
+									this.jumpFlag = false;
+									
+									// 回跳组不是最后一组
+									if (this.jumpGroupIndex < this.picGroupNum - 1) {
+										// 回跳到原先发生跳转组的下一个组
+										this.picGroupCurIndex = this.jumpGroupIndex + 1;
+									}
+									// 回跳组是最后一组
+									else {
+										// 回跳到第一组
+										this.picGroupCurIndex = 0;
+									}
+									this.swiperCurrent = 0;
+									this.picSwiperIndex = 0;
+									
+									// 回跳到原先发生跳转的组
+									// this.picGroupCurIndex = this.jumpGroupIndex;
+									// this.swiperCurrent = this.jumpPicIndex;
+									// this.picSwiperIndex = this.jumpPicIndex;
+									
+									console.log("==> 全部播放完毕，没有新图片，回跳播放 pic group: " + this.picGroupCurIndex);
+								}
+								else {	// 从第1组重新开始播放图片
+									this.picGroupCurIndex = 0;
+									this.swiperCurrent = 0;
+									this.picSwiperIndex = 0;
+									console.log("全部播放完毕，没有新图片，开始重播 pic group: " + this.picGroupCurIndex);
+								}
+							}
 							this.setSwiperData(this.picList[this.picGroupCurIndex]);
-							this.autoplay = true;
+							
 							// console.log("picList", this.picList);
 							// console.log("swiperData", this.swiperData);
 						}
@@ -287,25 +314,9 @@
 				const curIndex = e.detail.current;
 				this.picSwiperIndex = curIndex;
 				
-				// // 当前组已播完
+				// 当前组已播完
 				if (curIndex == this.swiperData.length - 1) {
 					this.autoplay = false;
-				// 	setTimeout(() => {
-				// 		// 播放下一组图片
-				// 		if (this.picGroupCurIndex < this.picGroupNum - 1) {
-				// 			this.picGroupCurIndex++;
-				// 			// this.swiperData = this.picList[this.picGroupCurIndex];
-				// 			// this.swiperCurrent = 0;
-				// 			this.setSwiperData(this.picList[this.picGroupCurIndex]);
-				// 			console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
-				// 		}
-				// 		// 所有图片组都播放完后，重新获取图片数据
-				// 		else {
-				// 			console.log("播放完毕，重新获取图片数据..." , this.picGroupCurIndex);
-				// 			this.lastSwiperCurIndex = curIndex;
-				// 			this.getUploadPic();
-				// 		}
-				// 	}, this.picInterval - 100);	// 时间-100ms，防止swiper滑动到下一个图片
 				}
 
 			},
@@ -316,30 +327,6 @@
 			animationfinish(e) {
 				// console.log('animationfinish');
 				// console.log("pic group: " + this.picGroupCurIndex + " / pic index: " + e.detail.current);
-				// const curIndex = e.detail.current;
-				
-				// // 当前组已播完
-				// if (curIndex == this.swiperData.length - 1) {
-				// 	// setTimeout(() => {
-				// 		// 播放下一组图片
-				// 		if (this.picGroupCurIndex < this.picGroupNum - 1) {
-				// 			this.picGroupCurIndex++;
-				// 			this.swiperCurrent = 0;
-				// 			// this.swiperData = this.picList[this.picGroupCurIndex];
-				// 			this.setSwiperData(this.picList[this.picGroupCurIndex]);
-				// 			console.log("播放下一组图片 picGroupCurIndex = " + this.picGroupCurIndex);
-				// 			// console.log("picList", this.picList);
-				// 			// console.log("swiperData", this.swiperData);
-				// 		}
-				// 		// 所有图片组都播放完后，重新获取图片数据
-				// 		else {
-				// 			console.log("播放完毕，重新获取图片数据..." , this.picGroupCurIndex);
-				// 			this.lastSwiperCurIndex = curIndex;
-				// 			this.getUploadPic();
-				// 		}
-				// 	// }, this.picInterval - 1000);	// 时间-100ms，防止swiper滑动到下一个图片
-				// }
-				
 			}
 		}
 	}