364 lines
7.4 KiB
Vue
364 lines
7.4 KiB
Vue
<template>
|
||
<div class="setvideodialog" v-if="dialogInfo.showDialog">
|
||
<div class="listdetail">
|
||
<div class="dialog-content-more">
|
||
<div class="dialog-title">
|
||
<img src="@/assets/images/titleIcon.png" alt="" />
|
||
<div class="title-text">
|
||
<i>{{ dialogInfo.postData?.title }}</i>
|
||
</div>
|
||
<div class="close-icon" @click="closeDialog">
|
||
<el-icon>
|
||
<Close />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="contont-video" style="color: #fff; font-size: 24px">
|
||
<div class="video-list" v-for="(item, index) in dialogInfo.videoUploadList" :key="item.id">
|
||
<div>{{ item.title }}：</div>
|
||
<el-upload
|
||
ref="upload"
|
||
class="upload-demo"
|
||
:action="BASEURL + '/upload/image'"
|
||
:on-success="(file: any) => handleSuccess(file, index)"
|
||
:beforeUpload="handleBeforeUploadVideo"
|
||
:on-error="handleError"
|
||
name="files"
|
||
:show-file-list="false"
|
||
>
|
||
<template #trigger>
|
||
<el-button type="primary">
|
||
<span class="videoupload">上传</span>
|
||
<el-icon color="#fff" :size="24" class="no-inherit">
|
||
<UploadFilled />
|
||
</el-icon>
|
||
</el-button>
|
||
</template>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, reactive, ref } from "vue";
|
||
import { UploadFilled } from "@element-plus/icons-vue";
|
||
import { ElMessage } from "element-plus";
|
||
import type { UploadInstance } from "element-plus";
|
||
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";
|
||
import { configWeekVideoSaveApi, configWeekVideoListApi } from "@/api/modules/agjtCommandApi";
|
||
import { GlobalStore } from "@/stores";
|
||
import moment from "moment";
|
||
import { COMPANY } from "@/config/config";
|
||
const store = GlobalStore();
|
||
const BASEURL = import.meta.env.VITE_API_URL;
|
||
const emits = defineEmits(["updateConfig"]);
|
||
const videoConfigData = ref();
|
||
const dialogInfo = reactive({
|
||
showDialog: false,
|
||
postData: {} as any,
|
||
videoUploadList: [
|
||
{
|
||
id: 1,
|
||
title: "周一"
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "周二"
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "周三"
|
||
},
|
||
{
|
||
id: 4,
|
||
title: "周四"
|
||
},
|
||
{
|
||
id: 5,
|
||
title: "周五"
|
||
},
|
||
{
|
||
id: 6,
|
||
title: "周六"
|
||
},
|
||
{
|
||
id: 7,
|
||
title: "周日"
|
||
}
|
||
]
|
||
});
|
||
// 获取一周的配置视频数据
|
||
const configWeekVideoListFn = async (showLoading: boolean) => {
|
||
const res: any = await configWeekVideoListApi(
|
||
{
|
||
projectSn: store.sn
|
||
},
|
||
showLoading
|
||
);
|
||
if (res.result) {
|
||
videoConfigData.value = res.result;
|
||
}
|
||
};
|
||
// 修改一周内某一天的视频
|
||
const configWeekVideoEditFn = async (showLoading: boolean, url: any, weekIndex: number) => {
|
||
console.log(url);
|
||
let requestData: any = {
|
||
projectSn: store.sn
|
||
};
|
||
// 星期参数
|
||
const today = weekIndex == 6 ? 0 : weekIndex + 1;
|
||
const weekParamsKey = ["sun", "mon", "tues", "wed", "thur", "fri", "sat"];
|
||
requestData[weekParamsKey[+today]] = url;
|
||
// type参数
|
||
if (COMPANY == "agjtProjectKanban") {
|
||
requestData.type = 1;
|
||
} else if (COMPANY == "agjtOverviewScreen") {
|
||
requestData.type = 2;
|
||
} else if (COMPANY == "agjtLive") {
|
||
requestData.type = 3;
|
||
}
|
||
// id参数
|
||
if (videoConfigData.value && videoConfigData.value.length) {
|
||
requestData.id = videoConfigData.value[0].id;
|
||
}
|
||
const res: any = await configWeekVideoSaveApi(requestData, showLoading);
|
||
if (res.success) {
|
||
console.log("修改成功", res);
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "上传成功",
|
||
type: "success"
|
||
});
|
||
configWeekVideoListFn(true);
|
||
emits("updateConfig");
|
||
}
|
||
};
|
||
// 视频文件上传 之前
|
||
function handleBeforeUploadVideo(file: any) {
|
||
console.log(file, "上传之前");
|
||
let fileType = file.type.split("/")[0];
|
||
if (fileType == "video") {
|
||
showFullScreenLoading();
|
||
return true;
|
||
} else {
|
||
ElMessage({
|
||
showClose: true,
|
||
message: "请选择正确的视频文件",
|
||
type: "warning"
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
// 视频上传成功
|
||
function handleSuccess(file: any, index: number) {
|
||
if (file.code == 200 || file.status == "SUCCESS") {
|
||
console.log(file, "上传成功");
|
||
tryHideFullScreenLoading();
|
||
let url = file.data[0].imageUrl;
|
||
// this.imgUrl = url;
|
||
configWeekVideoEditFn(true, url, index);
|
||
}
|
||
}
|
||
// 视频上传成功
|
||
function handleError() {
|
||
tryHideFullScreenLoading();
|
||
}
|
||
|
||
const closeDialog = () => {
|
||
dialogInfo.showDialog = false;
|
||
dialogInfo.postData = {};
|
||
};
|
||
function openDialog(obj: any) {
|
||
dialogInfo.postData = obj;
|
||
dialogInfo.showDialog = true;
|
||
}
|
||
|
||
const upload = ref<UploadInstance>();
|
||
|
||
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
||
defineExpose({
|
||
openDialog
|
||
});
|
||
onMounted(async () => {
|
||
configWeekVideoListFn(true);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.setvideodialog {
|
||
position: absolute;
|
||
width: 70%;
|
||
height: 60%;
|
||
right: 3%;
|
||
top: 5%;
|
||
background: rgba(7, 28, 49, 0.5);
|
||
z-index: 100;
|
||
|
||
.dialog-content {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
padding: 1%;
|
||
left: 15%;
|
||
top: 21%;
|
||
width: 70%;
|
||
height: 60%;
|
||
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 21;
|
||
}
|
||
|
||
.dialog-content-show {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
padding: 1%;
|
||
left: 15%;
|
||
top: 1%;
|
||
width: 70%;
|
||
height: 98%;
|
||
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 21;
|
||
}
|
||
|
||
.listdetail {
|
||
position: absolute;
|
||
// box-sizing: border-box;
|
||
// padding: 1%;
|
||
// right: 3%;
|
||
// top: 5%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(8, 31, 63, 0.7);
|
||
z-index: 21;
|
||
|
||
.dialog-content-more {
|
||
// position: absolute;
|
||
// box-sizing: border-box;
|
||
// padding: 1%;
|
||
// left: 15%;
|
||
// top: 21%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 21;
|
||
}
|
||
|
||
.contont-video {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
.video-list {
|
||
width: 33%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
margin-top: 30px;
|
||
font-weight: bold;
|
||
.no-inherit {
|
||
margin-left: 8px;
|
||
}
|
||
.upload-demo {
|
||
width: 45%;
|
||
}
|
||
:deep(.el-upload-list),
|
||
:deep(.el-upload-list__item) {
|
||
margin: 0;
|
||
}
|
||
:deep(.el-upload-list__item-info) {
|
||
width: 100%;
|
||
}
|
||
:deep(.el-button.el-button--primary.el-button--default) {
|
||
padding: 10px 15px;
|
||
height: 40px;
|
||
}
|
||
|
||
:deep(.videoupload) {
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog-content,
|
||
.dialog-content-show,
|
||
.dialog-content-more {
|
||
position: relative;
|
||
|
||
.political-outlook {
|
||
height: 100%;
|
||
}
|
||
|
||
.dialog-article {
|
||
height: 95%;
|
||
}
|
||
|
||
.close-icon {
|
||
// position: absolute;
|
||
// right: 3%;
|
||
// top: 3%;
|
||
cursor: pointer;
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.dialog-title {
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
font-family: "OPPOSans-Bold";
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0 20px;
|
||
padding-top: 10px;
|
||
|
||
.title-time {
|
||
font-size: 30px;
|
||
color: #f34234;
|
||
position: absolute;
|
||
top: 3%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.title-img {
|
||
width: 3%;
|
||
height: 3%;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.title-text {
|
||
margin-left: 1%;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.notoDta {
|
||
top: 73%;
|
||
width: 12%;
|
||
left: 44%;
|
||
position: absolute;
|
||
|
||
img {
|
||
width: 40%;
|
||
margin: 5% 30%;
|
||
}
|
||
|
||
p {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin: -6% 37%;
|
||
}
|
||
}
|
||
</style>
|