|
|
@@ -0,0 +1,483 @@
|
|
|
+<!-- LED分辨率： 1920 * 1080 -->
|
|
|
+<template>
|
|
|
+ <view class="body">
|
|
|
+
|
|
|
+ <view v-if="pageType == 1" class="content bg-led01">
|
|
|
+ <view class="distance-container-1">
|
|
|
+ <view class="total-time-1">总用时: {{durationStr}}</view>
|
|
|
+ <view class="total-distance-1">{{distanceKm}}KM</view>
|
|
|
+ </view>
|
|
|
+ <!-- <image class="run" mode="aspectFit" src="/static/led/run.png"></image> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="pageType == 2" class="content bg-led02">
|
|
|
+ <view class="pic-container">
|
|
|
+ <!-- <image class="pic" mode="aspectFill" :src="imageSrc"></image> -->
|
|
|
+ <swiper ref="swiper" class="swiper" :autoplay="autoplay" circular :current="swiperCurrent" :interval="picInterval"
|
|
|
+ :duration="picDuration" @change="swiperChange" @animationfinish="animationfinish">
|
|
|
+ <swiper-item v-for="(image, index) in swiperData" :key="index">
|
|
|
+ <image class="pic-bg" :src="image"></image>
|
|
|
+ <image class="pic" mode="aspectFit" :src="image"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="distance-container-2">
|
|
|
+ <view class="total-time-2">总用时: {{durationStr}}</view>
|
|
|
+ <view class="total-distance-2">{{distanceKm}}KM</view>
|
|
|
+ </view>
|
|
|
+ <image class="mascot" mode="aspectFit" src="/static/led/mascot-2.png"></image>
|
|
|
+ <!-- <image class="lpzg" mode="aspectFit" src="/static/lpzg.png"></image> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tools from '../../common/tools';
|
|
|
+ import { apiGetStatistics, apiGetUploadPic } from '../../common/api';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ testMode: 0, // 测试模式 0:否 1:是
|
|
|
+ testDuration: 0,
|
|
|
+ testDistance: 0,
|
|
|
+ pageAutoChange: 0, // 有照片是否自动切换背景 0:否 1:是
|
|
|
+ pageType: 1, // 1: 无照片 2: 有照片
|
|
|
+ actIdArrStr: "",
|
|
|
+ SumDuration: 0,
|
|
|
+ SumDistance: 0,
|
|
|
+ picCount: 0,
|
|
|
+ autoplay: true,
|
|
|
+ swiperData: [], // swiper控件的数据
|
|
|
+ swiperCurrent: 0, // swiper当前所在滑块的 index
|
|
|
+ lastSwiperCurIndex: 0, // 用于新图片加载后恢复之前的图片index
|
|
|
+ picGroupSize: 90, // 图片分组 每组最大图片数量
|
|
|
+ picGroupNum: 0, // 图片分组 分组数量
|
|
|
+ picGroupCurIndex: 0,// 图片分组 当前播放的分组序号
|
|
|
+ picSwiperIndex: 0, // 图片分组 当前播放的分组内的图片序号
|
|
|
+ picList: [], // 图片列表 存放从服务器获取的所有图片
|
|
|
+ picInterval: 3000, // 自动切换时间间隔
|
|
|
+ picDuration: 500, // 滑动动画时长
|
|
|
+ intervalSta: 0,
|
|
|
+ intervalGrpSw: 0,
|
|
|
+ // imageSrc: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ durationStr() {
|
|
|
+ return tools.convertSecondsToHMS(this.SumDuration);
|
|
|
+ },
|
|
|
+ distanceKm() {
|
|
|
+ if (this.SumDistance < 1000000)
|
|
|
+ return Math.round(this.SumDistance * 10 / 1000) / 10;
|
|
|
+ else
|
|
|
+ return Math.round(this.SumDistance / 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(event) { // 类型非必填，可自动推导
|
|
|
+ // this.SumDuration = 1622;
|
|
|
+ // this.SumDistance = 999050;
|
|
|
+ // this.SumDistance = 999949;
|
|
|
+ // this.SumDistance = 2066869;
|
|
|
+ // this.imageSrc = "/static/led/pic2.jpg";
|
|
|
+
|
|
|
+ this.swiperData = this.picList[0];
|
|
|
+
|
|
|
+ this.testMode = event["test"] ?? 0;
|
|
|
+ this.pageAutoChange = event["pac"] ?? 0;
|
|
|
+ this.pageType = event["page"] ?? 1;
|
|
|
+ this.actIdArrStr = event["act"] ?? "175,176,177,178";
|
|
|
+
|
|
|
+ this.getUploadPic();
|
|
|
+ this.getStatistics();
|
|
|
+ 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() {
|
|
|
+ // console.log("[handleGroupSwitch] pic group: " + this.picGroupCurIndex + " / pic index: " + this.picSwiperIndex);
|
|
|
+ if (this.swiperData == undefined) {
|
|
|
+ setTimeout(this.handleGroupSwitch, 1000);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当前组已播完
|
|
|
+ if (this.picSwiperIndex == this.swiperData.length - 1) {
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.autoplay = true;
|
|
|
+ setTimeout(this.handleGroupSwitch, 1000);
|
|
|
+
|
|
|
+ }, this.picInterval - 100); // 时间-100ms，防止swiper滑动到下一个图片
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setTimeout(this.handleGroupSwitch, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setSwiperData(res) {
|
|
|
+ // console.log("[setSwiperData] res:", res);
|
|
|
+ if (res == undefined) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.swiperData = [];
|
|
|
+ for (let n=0; n<res.length; n++) {
|
|
|
+ this.swiperData.push(res[n]);
|
|
|
+ // console.log("[setSwiperData] swiperData.push", res[n]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getStatistics() {
|
|
|
+ if (this.testMode == 1) {
|
|
|
+ this.testDuration += 1;
|
|
|
+ this.testDistance += 100;
|
|
|
+ // this.testDistance = 999949;
|
|
|
+ this.SumDuration = this.testDuration;
|
|
|
+ this.SumDistance = this.testDistance;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.request({
|
|
|
+ url: apiGetStatistics,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ actIdArrStr: this.actIdArrStr
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("getStatistics", res)
|
|
|
+ const data = res.data.data;
|
|
|
+ this.SumDuration = data.SumDuration;
|
|
|
+ this.SumDistance = data.SumDistance;
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("getStatistics err", err)
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUploadPic() {
|
|
|
+ uni.request({
|
|
|
+ url: apiGetUploadPic,
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded",
|
|
|
+ },
|
|
|
+ method: "POST",
|
|
|
+ data: {
|
|
|
+ actIdArrStr: this.actIdArrStr
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ // console.log("getUploadPic", res);
|
|
|
+ const data = res.data.data;
|
|
|
+ const newCount = data.List.length;
|
|
|
+ console.log("获取到的图片数量:", newCount);
|
|
|
+
|
|
|
+ if (newCount > 0) {
|
|
|
+ if (this.pageAutoChange == 1) {
|
|
|
+ this.pageType = 2;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.pageAutoChange == 1) {
|
|
|
+ if (this.picCount == 0)
|
|
|
+ this.pageType = 1;
|
|
|
+ else
|
|
|
+ this.pageType = 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (newCount > this.picCount) { // 有新图片
|
|
|
+ console.log("有 " + (newCount - this.picCount) + " 张新图片");
|
|
|
+ // 将新增的图片追加到图片队列
|
|
|
+ for (let i = this.picCount; i < newCount; i++) {
|
|
|
+ let picUrl = data.Domain + data.List[i];
|
|
|
+
|
|
|
+ if (this.picList.length == 0) {
|
|
|
+ this.picGroupNum = 1;
|
|
|
+ this.picList[this.picGroupNum-1] = new Array();
|
|
|
+ console.log("新增图片分组: " + this.picGroupNum);
|
|
|
+ }
|
|
|
+ if (this.picList[this.picGroupNum-1].length >= this.picGroupSize) {
|
|
|
+ this.picGroupNum++;
|
|
|
+ this.picList[this.picGroupNum-1] = new Array();
|
|
|
+ console.log("新增图片分组: " + this.picGroupNum);
|
|
|
+ }
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ else { // 没有新图片
|
|
|
+ // 从第1组重新开始播放图片
|
|
|
+ console.log("没有新图片，从第1组重新开始播放图片");
|
|
|
+ this.autoplay = false;
|
|
|
+ this.picGroupCurIndex = 0;
|
|
|
+ this.swiperCurrent = 0;
|
|
|
+ this.picSwiperIndex = 0;
|
|
|
+ // this.swiperData = this.picList[this.picGroupCurIndex];
|
|
|
+ this.setSwiperData(this.picList[this.picGroupCurIndex]);
|
|
|
+ this.autoplay = true;
|
|
|
+ // console.log("picList", this.picList);
|
|
|
+ // console.log("swiperData", this.swiperData);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.picCount == 0) {
|
|
|
+ // console.log('this.picCount == 0');
|
|
|
+ setTimeout(this.getUploadPic, 1000);
|
|
|
+ }
|
|
|
+ else if (this.picCount == 1) {
|
|
|
+ // console.log('this.picCount == 1');
|
|
|
+ // swiper在只有1张图片的情况下不会触发 @change事件，需要在这里再次获取图片数据
|
|
|
+ setTimeout(this.getUploadPic, this.picInterval);
|
|
|
+ }
|
|
|
+ // console.log("picList", this.picList);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("getUploadPic err", err);
|
|
|
+ setTimeout(this.getUploadPic, 3000);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //当前轮播索引
|
|
|
+ swiperChange(e) {
|
|
|
+ console.log("pic group: " + this.picGroupCurIndex + " / pic index: " + e.detail.current);
|
|
|
+ // console.log("picGroupNum: " + this.picGroupNum);
|
|
|
+ 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滑动到下一个图片
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //点击轮播
|
|
|
+ swiperClick(e) {
|
|
|
+ console.log('点击轮播', e);
|
|
|
+ },
|
|
|
+ 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滑动到下一个图片
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .body {
|
|
|
+ /* width: 100%; */
|
|
|
+ /* height: 100vh; */
|
|
|
+ width: 1920px;
|
|
|
+ height: 1080px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ /* justify-content: flex-start; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-led01 {
|
|
|
+ background-image: url("/static/led/led01-3.webp");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-led02 {
|
|
|
+ background-image: url("/static/led/led02-3.webp");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-container {
|
|
|
+ width: 1220px;
|
|
|
+ height: 810px;
|
|
|
+ margin-left: 100px;
|
|
|
+ margin-top: 100px;
|
|
|
+ background: url("/static/led/pic_border-3.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ height: 812px;
|
|
|
+ mask-image: url('/static/led/pic_mask-3.png');
|
|
|
+ mask-size: 1218px;
|
|
|
+ mask-repeat: no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ margin: 3px;
|
|
|
+ width: 1218px;
|
|
|
+ height: 810px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic-bg {
|
|
|
+ position: absolute;
|
|
|
+ margin: -10px;
|
|
|
+ width: 1240px;
|
|
|
+ height: 830px;
|
|
|
+ filter: blur(15px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance-container-1 {
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 1130px;
|
|
|
+ height: 476px;
|
|
|
+ margin-left: 175px;
|
|
|
+ margin-top: 165px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-time-1 {
|
|
|
+ font-family: 'Arial Black';
|
|
|
+ font-size: 50px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-left: 390px;
|
|
|
+ line-height: 90px;
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-distance-1 {
|
|
|
+ font-family: 'Arial';
|
|
|
+ font-size: 330px;
|
|
|
+ transform: scaleX(0.8);
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .distance-container-2 {
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 660px;
|
|
|
+ height: 280px;
|
|
|
+ margin-left: -163px;
|
|
|
+ margin-top: 366px;
|
|
|
+ background: url("/static/led/distance_bg.png") no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-time-2 {
|
|
|
+ font-family: 'Arial Black';
|
|
|
+ font-size: 36px;
|
|
|
+ transform: scaleX(0.9);
|
|
|
+ color: #ffffff;
|
|
|
+ margin-left: 320px;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-distance-2 {
|
|
|
+ font-family: 'Arial';
|
|
|
+ font-size: 200px;
|
|
|
+ transform: scaleX(0.78);
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 180px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .run {
|
|
|
+ width: 468px;
|
|
|
+ height: 468px;
|
|
|
+ margin-left: -840px;
|
|
|
+ margin-top: 130px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mascot {
|
|
|
+ height: 358px;
|
|
|
+ margin-left: -525px;
|
|
|
+ margin-top: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lpzg {
|
|
|
+ width: 468px;
|
|
|
+ margin-left: -1510px;
|
|
|
+ margin-top: 832px;
|
|
|
+ }
|
|
|
+</style>
|
