387 lines
9.1 KiB
Vue
387 lines
9.1 KiB
Vue
<template>
|
||
<div class="leftTop">
|
||
<Card title="项目展示">
|
||
<div class="top-tab" v-if="COMPANY === 'agjt'">
|
||
<div
|
||
class="tab-box"
|
||
:style="boxStyle(item)"
|
||
v-for="(item, index) in topText2"
|
||
:key="item.id"
|
||
@click="activeBtn(item, index)"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
<div class="top-tab" v-else>
|
||
<div
|
||
class="tab-box"
|
||
:style="boxStyle(item)"
|
||
v-for="(item, index) in topText"
|
||
:key="item.id"
|
||
@click="activeBtn(item, index)"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="href-content" v-if="showVideo == 1">
|
||
<el-carousel indicator-position="none" height="450px" style="width: 76%;">
|
||
<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
|
||
<ckplayerComp
|
||
:name="index"
|
||
:poster="''"
|
||
:deviceIp="`http://${item.account}:${item.password}`"
|
||
:videoUrls="item.serialNumber"
|
||
:autoPlay="true"
|
||
></ckplayerComp>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="videoBox" v-if="showVideo == 2" @mouseenter="showChangeVideo = true" @mouseleave="showChangeVideo = false">
|
||
<el-upload
|
||
:action="BASEURL + '/upload/image'"
|
||
:on-success="file => handleSuccessTwo(file, 1)"
|
||
:on-error="file => handleError(file, 1)"
|
||
:beforeUpload="file => handleBeforeUploadVideo(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<!-- 更换视频 -->
|
||
<span class="change-video" v-if="showChangeVideo">更换视频</span>
|
||
</el-upload>
|
||
<video :src="BASEURL + '/image/' + projectData.videoUrl" class="videos" autoplay controls loop></video>
|
||
</div>
|
||
<div class="imgBox" v-if="showVideo == 3">
|
||
<div class="imgs" @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false">
|
||
<el-upload
|
||
:action="BASEURL + '/upload/image'"
|
||
:on-success="file => handleSuccess(file, 1)"
|
||
:on-error="file => handleError(file, 1)"
|
||
:beforeUpload="file => handleBeforeUploadPic(file, 1)"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<!-- 更换图片 -->
|
||
<span class="change-video" v-if="showChangeImg">更换图片</span>
|
||
</el-upload>
|
||
<img :src="BASEURL + '/image/' + picUrl" alt="" />
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "@/components/card.vue";
|
||
import { ref, onMounted, watch } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import { ElMessage } from "element-plus";
|
||
|
||
import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview";
|
||
import { selectLiveVideoListApi } from "@/api/modules/video";
|
||
import ckplayerComp from "./ckplayerComp.vue";
|
||
import { COMPANY } from "@/config/config";
|
||
|
||
const store = GlobalStore();
|
||
const videoList = ref([] as any);
|
||
// ts
|
||
type Props = {
|
||
projectData?: any; // 传入项目信息
|
||
};
|
||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
projectData: {}
|
||
});
|
||
// 项目信息
|
||
const projectData = ref({} as any);
|
||
|
||
watch(
|
||
() => props.projectData,
|
||
newVal => {
|
||
// console.log(newVal, "newVal");
|
||
if (newVal) {
|
||
// props.xData = newVal;
|
||
projectData.value = newVal;
|
||
}
|
||
}
|
||
);
|
||
//效果图
|
||
const picUrl = ref("" as any);
|
||
|
||
const BASEURL = import.meta.env.VITE_API_URL;
|
||
// 显示视频
|
||
const showVideo = ref(1 as any);
|
||
|
||
// 显示更换图片
|
||
const showChangeImg = ref(false as any);
|
||
|
||
// 显示更换视频
|
||
const showChangeVideo = ref(false as any);
|
||
|
||
let topText2 = ref([
|
||
{ id: 1, title: "现场视频", isActive: true },
|
||
{ id: 2, title: "宣传视频", isActive: false },
|
||
{ id: 3, title: "效果图", isActive: false }
|
||
]);
|
||
let topText = ref([
|
||
// { id: 1, title: "现场视频", isActive: true },
|
||
{ id: 2, title: "宣传视频", isActive: true },
|
||
{ id: 3, title: "效果图", isActive: false }
|
||
]);
|
||
const getVideoList = async () => {
|
||
let res: any = await selectLiveVideoListApi({
|
||
projectSn: store.sn
|
||
});
|
||
console.log(res,'445566')
|
||
if(res.result && res.result.extend1){
|
||
videoList.value = JSON.parse(res.result.extend1).result.videoList;
|
||
console.log(videoList.value,'112233')
|
||
// 为了解决视频播放器渲染，第二个总是会默认显示一半，我动态设置样式让视图刷新，只要设置百分百就有问题，所以只能使用此方法
|
||
setTimeout(() => {
|
||
// 获取所有的 video 元素
|
||
var videos = document.querySelectorAll(".href-content video")
|
||
// var videos = document.getElementsByTagName("video");
|
||
// 遍历所有的 video 元素
|
||
for (var i = 0; i < videos.length; i++) {
|
||
// 修改视频元素的样式
|
||
videos[i].style.width = "99.9%";
|
||
videos[i].style.height = "99.9%";
|
||
}
|
||
}, 2000);
|
||
}
|
||
};
|
||
|
||
function boxStyle(item: any) {
|
||
if (item.isActive) {
|
||
let choiseStyle = {
|
||
color: "#fff"
|
||
};
|
||
return choiseStyle;
|
||
}
|
||
return {};
|
||
}
|
||
let tabIndex = ref(1 as any);
|
||
function activeBtn(item: any) {
|
||
let currentState = item.isActive;
|
||
if (!currentState) {
|
||
topText.value.forEach(el => {
|
||
el.isActive = false;
|
||
});
|
||
item.isActive = !currentState;
|
||
tabIndex.value = item.id;
|
||
}
|
||
showVideo.value = item.id;
|
||
console.log(showVideo.value)
|
||
}
|
||
|
||
const uploadFail = () => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传失败，请重试",
|
||
type: "warning"
|
||
});
|
||
};
|
||
|
||
const fileTypeFail = (text: any) => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: text,
|
||
type: "warning"
|
||
});
|
||
};
|
||
|
||
const uploadSuccess = () => {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功",
|
||
type: "success"
|
||
});
|
||
};
|
||
|
||
// 视频文件上传 之前
|
||
function handleBeforeUploadVideo(file: any) {
|
||
console.log(file, "上传之前");
|
||
let fileType = file.type.split("/")[0];
|
||
if (fileType == "video") {
|
||
return true;
|
||
} else {
|
||
fileTypeFail("请选择正确的视频文件"); //"请选择正确的文件"
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 图片文件上传 之前
|
||
function handleBeforeUploadPic(file: any) {
|
||
console.log(file, "上传之前");
|
||
let fileType = file.type.split("/")[0];
|
||
if (fileType == "image") {
|
||
return true;
|
||
} else {
|
||
fileTypeFail("请选择正确的图片文件"); //"请选择正确的文件"
|
||
return false;
|
||
}
|
||
}
|
||
|
||
//上传失败
|
||
function handleError(file: any) {
|
||
console.log(file, "上传失败");
|
||
uploadFail(); //"上传失败，请重试"
|
||
}
|
||
// 效果图上传成功
|
||
function handleSuccess(file: any) {
|
||
console.log("效果图上传成功", file);
|
||
if (file.code == 200 || file.status == "SUCCESS") {
|
||
console.log(file);
|
||
let url = file.data[0].imageUrl;
|
||
saveEffectData(url);
|
||
}
|
||
}
|
||
|
||
// 视频上传成功
|
||
function handleSuccessTwo(file: any) {
|
||
if (file.code == 200 || file.status == "SUCCESS") {
|
||
console.log(file, "上传成功");
|
||
let url = file.data[0].imageUrl;
|
||
// this.imgUrl = url;
|
||
saveOrDeleteVideo(url);
|
||
}
|
||
}
|
||
//效果图 保存
|
||
function saveEffectData(url: any) {
|
||
// let configValue = JSON.stringify(url);
|
||
let data = {
|
||
projectSn: store.sn,
|
||
showType: 3,
|
||
showTitle: "效果图", //'效果图'
|
||
configValue: url
|
||
};
|
||
eidtProjectShowConfig(data).then((res: any) => {
|
||
if (res.code == 200) {
|
||
getQueryBySnData();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 查询效果图
|
||
function getQueryBySnData() {
|
||
queryBySnData({
|
||
projectSn: store.sn,
|
||
showType: 3
|
||
}).then((res: any) => {
|
||
console.log(res, "效果图");
|
||
if (res.result) {
|
||
picUrl.value = res.result.configValue;
|
||
}
|
||
});
|
||
}
|
||
// //保存或删除宣传视频
|
||
function saveOrDeleteVideo(url) {
|
||
editProjectInfo({
|
||
projectSn: store.sn,
|
||
videoUrl: url
|
||
}).then(res => {
|
||
console.log("保存成功", res);
|
||
uploadSuccess(); //"上传成功"
|
||
projectData.value.videoUrl = url;
|
||
});
|
||
}
|
||
//将方法暴露给父组件
|
||
defineExpose({
|
||
getQueryBySnData
|
||
})
|
||
onMounted(async () => {
|
||
if(COMPANY !== 'agjt') showVideo.value = 2
|
||
await getVideoList();
|
||
getQueryBySnData();
|
||
if(COMPANY != 'agjt'){
|
||
showVideo.value = 2;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.leftTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.videoBox {
|
||
width: 100%;
|
||
height: 92%;
|
||
margin-top: 8%;
|
||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.videos {
|
||
width: 78%;
|
||
height: 90%;
|
||
margin-left: 11%;
|
||
margin-top: 1%;
|
||
}
|
||
}
|
||
.imgBox {
|
||
width: 100%;
|
||
height: 92%;
|
||
margin-top: 8%;
|
||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.imgs {
|
||
width: 78%;
|
||
height: 82%;
|
||
margin: 3% 11%;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-top: 5%;
|
||
}
|
||
}
|
||
}
|
||
.href-content {
|
||
width: 100%;
|
||
height: 92%;
|
||
margin-top: 8%;
|
||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
// .href-content {
|
||
// width: 95%;
|
||
// height: 92%;
|
||
// margin: 0 auto;
|
||
// margin-top: 8%;
|
||
// }
|
||
|
||
.change-video {
|
||
position: absolute;
|
||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
padding: 1% 2%;
|
||
font-size: 16px;
|
||
left: 45%;
|
||
top: 55%;
|
||
z-index: 10;
|
||
}
|
||
|
||
.top-tab {
|
||
position: absolute;
|
||
top: 12%;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 30%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.tab-box {
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.3);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
::v-deep .h-card .content {
|
||
background: none;
|
||
}
|
||
</style>
|