|
|
@@ -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滑动到下一个图片
|
|
|
- // }
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
