275 lines
8.2 KiB
Vue
275 lines
8.2 KiB
Vue
<template>
|
|
<Card title="专题活动">
|
|
<div class="bottom-center">
|
|
<el-carousel ref="carousel" indicator-position="none" :autoplay="false" @change="onChange">
|
|
<el-carousel-item v-for="item in videoInfo.videoList" :key="item.id">
|
|
<div class="videoBox">
|
|
<!-- loop autoplay -->
|
|
<video v-if="item.fileType == 1" id="myVideo" :src="item.filePath" class="slideshow_videos" controls></video>
|
|
<el-image class="images" v-else-if="item.fileType == 2" :src="item.filePath" fit="fill" />
|
|
</div>
|
|
<div class="detail-text">
|
|
<div class="title" :title="item.title">{{ item.title || " " }}</div>
|
|
<div class="time">{{ item.createTime || " " }}</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div class="notoDta" v-if="videoInfo.videoList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import Card from "@/components/card.vue";
|
|
// import symbolIcon from "@/assets/images/lineSymbol.png";
|
|
import { onMounted, reactive, ref, nextTick } from "vue";
|
|
import { GlobalStore } from "@/stores";
|
|
import { getSceneExposeSpecialPage } from "@/api/modules/civilizedConstruction";
|
|
const store = GlobalStore();
|
|
const carousel = ref(null as any);
|
|
const videoInfo = reactive({
|
|
videoList: [] as any,
|
|
videoIndex: 0,
|
|
timeout: null as any,
|
|
barrageString: "",
|
|
secondTime: 0,
|
|
newVideoIndex: -1,
|
|
isPlus: +1,
|
|
elevideo: null as any,
|
|
oldIndex: -1,
|
|
removeEventListener: null as any,
|
|
fn: null as any
|
|
});
|
|
const optionTime = [1000, 60 * 1000, 60 * 60 * 1000];
|
|
const onChange = (newIndex: number, oldIndex?: number) => {
|
|
// 2 0 0 2 右 其实是左
|
|
// 0 2 2 2 左 其实是右
|
|
// 1 0 0 2 左 其实是右
|
|
// 0 空 (1 0)(2 1) (0 2) 2 - 0
|
|
// 0 空 (2 0)(1 2) (0 1)
|
|
console.log(newIndex, oldIndex, videoInfo.videoIndex, videoInfo.videoList.length - 1);
|
|
if (oldIndex != undefined) {
|
|
// (oldIndex < newIndex && newIndex != videoInfo.videoList.length - 1)
|
|
// (oldIndex < newIndex && newIndex != videoInfo.videoList.length - 1 || ) ||
|
|
// (oldIndex < newIndex && oldIndex == videoInfo.videoList.length - 1) ||
|
|
// oldIndex > newIndex ||
|
|
// newIndex == 0
|
|
videoInfo.isPlus =
|
|
(oldIndex < newIndex && newIndex != videoInfo.videoList.length - 1) ||
|
|
(oldIndex == videoInfo.videoList.length - 2 && newIndex == videoInfo.videoList.length - 1) ||
|
|
(oldIndex == videoInfo.videoList.length - 1 && newIndex == 0)
|
|
? 1
|
|
: -1;
|
|
// const a = oldIndex == videoInfo.videoList.length - 1 && newIndex == 0 ? "最后" : "不是";
|
|
// const b = newIndex == videoInfo.videoList.length - 1 && oldIndex == 0 ? "最后" : "不是";
|
|
// console.log(a, b);
|
|
// if (oldIndex == videoInfo.videoList.length - 1 && newIndex == 0) {
|
|
// videoInfo.videoIndex = -1;
|
|
// }
|
|
}
|
|
if (videoInfo.removeEventListener) {
|
|
videoInfo.removeEventListener.pause();
|
|
videoInfo.removeEventListener.removeEventListener("ended", videoInfo.fn);
|
|
videoInfo.removeEventListener = null;
|
|
videoInfo.fn = null;
|
|
}
|
|
// videoInfo.oldIndex = oldIndex;
|
|
// videoInfo.videoIndex = newIndex;
|
|
videoInfo.videoIndex = newIndex + 1 == videoInfo.videoList.length ? 0 : newIndex + 1;
|
|
console.log("判断是左是右", videoInfo.isPlus > 0 ? "右" : "左");
|
|
console.log("我是最新的索引", newIndex, oldIndex, videoInfo.videoIndex);
|
|
if (videoInfo.timeout) {
|
|
clearTimeout(videoInfo.timeout);
|
|
}
|
|
if (videoInfo.videoList[newIndex].fileType == 1) {
|
|
const resIndex = videoInfo.videoList.filter((item: any) => item.fileType == 1);
|
|
console.log(videoInfo.newVideoIndex, resIndex.length - 1);
|
|
|
|
if (videoInfo.newVideoIndex == resIndex.length - 1) {
|
|
videoInfo.newVideoIndex = videoInfo.isPlus > 0 ? -1 : resIndex.length;
|
|
}
|
|
videoInfo.newVideoIndex = videoInfo.isPlus > 0 ? videoInfo.newVideoIndex : videoInfo.newVideoIndex - 1;
|
|
getVideo();
|
|
} else if (videoInfo.videoList[newIndex].fileType == 2) {
|
|
const newTime = videoInfo.videoList[newIndex].showTime * optionTime[videoInfo.videoList[newIndex].showUnit - 1];
|
|
videoInfo.timeout = setTimeout(() => {
|
|
// videoInfo.videoIndex = newIndex;
|
|
console.log("我是图片的加载", videoInfo.videoIndex);
|
|
setVideoIndex();
|
|
videoInfo.timeout = null;
|
|
}, newTime);
|
|
console.log("我是图片", newTime);
|
|
}
|
|
};
|
|
|
|
const setVideoIndex = () => {
|
|
// console.log("我是自动播放的", videoInfo.videoIndex, videoInfo.videoList.length, videoInfo.isPlus);
|
|
console.log(videoInfo.oldIndex);
|
|
console.log("我是视频的加载", videoInfo.videoIndex);
|
|
if (videoInfo.videoIndex == 0) {
|
|
videoInfo.videoIndex = 0;
|
|
videoInfo.timeout = null;
|
|
videoInfo.newVideoIndex = -1;
|
|
videoInfo.isPlus = +1;
|
|
videoInfo.oldIndex = -1;
|
|
videoInfo.elevideo = null;
|
|
videoInfo.elevideo = document.querySelectorAll(".slideshow_videos");
|
|
}
|
|
carousel.value.setActiveItem(videoInfo.videoIndex);
|
|
};
|
|
const getVideo = () => {
|
|
console.log("我是开始的", videoInfo.newVideoIndex, videoInfo.isPlus);
|
|
videoInfo.newVideoIndex = videoInfo.newVideoIndex + videoInfo.isPlus;
|
|
videoInfo.newVideoIndex = videoInfo.newVideoIndex < 0 ? 0 : videoInfo.newVideoIndex;
|
|
console.log("我是结束的", videoInfo.newVideoIndex, videoInfo.isPlus);
|
|
// videoInfo.elevideo.forEach((element: any) => {
|
|
// element.pause();
|
|
// });
|
|
|
|
const elevideo = videoInfo.elevideo[videoInfo.newVideoIndex];
|
|
// let elevideo: any = document.getElementById("myVideo");
|
|
console.log(elevideo);
|
|
elevideo.currentTime = 0;
|
|
elevideo.play();
|
|
const fn = () => {
|
|
//结束
|
|
console.log("播放结束");
|
|
elevideo.pause();
|
|
elevideo.load();
|
|
elevideo.removeEventListener("ended", fn);
|
|
setVideoIndex();
|
|
// elevideo = null;
|
|
};
|
|
elevideo.addEventListener("ended", fn);
|
|
videoInfo.removeEventListener = elevideo;
|
|
videoInfo.fn = fn;
|
|
};
|
|
// 获取一周的配置视频数据
|
|
const configWeekVideoListFn = async () => {
|
|
let data = {
|
|
projectSn: store.sn,
|
|
type: 3
|
|
};
|
|
const res: any = await getSceneExposeSpecialPage(data);
|
|
if (res.result) {
|
|
// console.log(res.result.records);
|
|
videoInfo.videoList = res.result.records
|
|
.map((item: any) => {
|
|
const file = JSON.parse(item.image);
|
|
console.log(file[0].url);
|
|
let str = file.length > 0 ? file[0].url : "";
|
|
let strIndex = file.length > 0 ? str.lastIndexOf(".") : -1;
|
|
console.log(strIndex);
|
|
str = strIndex > -1 ? str.substring(strIndex, str.length) : "";
|
|
const fileType = str ? (str.includes(".mp4") ? 1 : 2) : -1;
|
|
return {
|
|
...item,
|
|
filePath: file[0].url,
|
|
fileType: fileType,
|
|
showTime: 3,
|
|
showUnit: 1
|
|
};
|
|
})
|
|
.filter((item: any) => item.fileType != -1);
|
|
console.log(videoInfo.videoList);
|
|
videoInfo.videoList = videoInfo.videoList.reduce((prev: any, item: any) => {
|
|
const resultIndex = videoInfo.videoList.filter((ele: any) => ele.fileType == 1).findIndex((ele: any) => item.id == ele.id);
|
|
prev.push({
|
|
...item,
|
|
resIndex: resultIndex ? resultIndex : -1
|
|
});
|
|
return prev;
|
|
}, [] as any[]);
|
|
nextTick(() => {
|
|
videoInfo.elevideo = document.querySelectorAll(".slideshow_videos");
|
|
onChange(0);
|
|
});
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
configWeekVideoListFn();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.detail-text {
|
|
width: 100%;
|
|
margin: 0 2%;
|
|
display: flex;
|
|
.title {
|
|
width: 70%;
|
|
white-space: nowrap; //单行
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
.time {
|
|
margin-left: 4%;
|
|
font-size: 12px;
|
|
color: #a1accb;
|
|
}
|
|
}
|
|
.el-carousel {
|
|
height: 100%;
|
|
}
|
|
:deep(.el-carousel__container) {
|
|
height: 100%;
|
|
}
|
|
.videoBox {
|
|
width: 100%;
|
|
height: 90%;
|
|
transform: translateY(-11px);
|
|
.slideshow_videos,
|
|
.images {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
}
|
|
}
|
|
.bottom-center {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
.notoDta {
|
|
top: 10%;
|
|
width: 50%;
|
|
left: 25%;
|
|
position: absolute;
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
//调整走马灯箭头-左箭头
|
|
:deep(.el-carousel__arrow--left) {
|
|
width: 5%;
|
|
height: 20%;
|
|
background: rgba(5, 18, 32, 0.7);
|
|
top: 40%;
|
|
left: 0%;
|
|
font-size: 16px;
|
|
border-radius: 0%;
|
|
color: #a8a8a8;
|
|
}
|
|
//右箭头
|
|
:deep(.el-carousel__arrow--right) {
|
|
width: 5%;
|
|
height: 20%;
|
|
background: rgba(5, 18, 32, 0.7);
|
|
border-radius: 0%;
|
|
top: 40%;
|
|
right: 0%;
|
|
font-size: 16px;
|
|
color: #a8a8a8;
|
|
}
|
|
}
|
|
</style>
|