401 lines
8.2 KiB
Vue
401 lines
8.2 KiB
Vue
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
|
<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 style="border: 1px solid #ccc; width: 95%">
|
|
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
|
|
<Editor class="editor" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
|
|
</div>
|
|
<div class="footer-btn">
|
|
<el-button color="#0a2249" :icon="CircleCloseFilled" @click="closeDialog">取消</el-button>
|
|
<el-button color="#0a2249" :icon="CircleCheckFilled" @click="saveBtn">保存</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
|
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
|
import { onMounted, reactive, ref, onBeforeUnmount, shallowRef, watch } from "vue";
|
|
import { CircleCloseFilled, CircleCheckFilled } from "@element-plus/icons-vue";
|
|
import { ElMessage } from "element-plus";
|
|
//引入现场大屏API
|
|
import { getLiveScreenDanmuSaveObj } from "@/api/modules/agjtLiveApi";
|
|
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 props = defineProps(["valueHtml"]);
|
|
const emits = defineEmits(["updateConfig"]);
|
|
const mode = ref("default"); // 或 'simple'
|
|
// 编辑器实例，必须用 shallowRef
|
|
const editorRef = shallowRef();
|
|
|
|
// 内容 HTML
|
|
const valueHtml = ref("");
|
|
|
|
// 模拟 ajax 异步获取内容
|
|
onMounted(() => {
|
|
// setTimeout(() => {
|
|
// valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
|
|
// }, 1500);
|
|
});
|
|
|
|
watch(
|
|
() => props.valueHtml,
|
|
() => {
|
|
console.log("我是弹幕配置", props.valueHtml);
|
|
valueHtml.value = props.valueHtml;
|
|
}
|
|
);
|
|
|
|
const toolbarConfig = {
|
|
toolbarKeys: ["undo", "redo", "fontFamily", "bold", "italic", "underline", "color"]
|
|
};
|
|
const editorConfig = {
|
|
placeholder: "请输入文字...",
|
|
hoverbarKeys: {
|
|
text: {
|
|
menuKeys: [
|
|
"bold", // 加粗
|
|
"italic", // 斜体
|
|
"underline", // 下划线
|
|
"color", // 颜色
|
|
"clearStyle" // 清除格式
|
|
]
|
|
}
|
|
}
|
|
};
|
|
|
|
const saveBtn = async () => {
|
|
console.log(valueHtml.value);
|
|
const requestData = {
|
|
projectSn: store.sn,
|
|
userId: store.userId,
|
|
content: valueHtml.value
|
|
};
|
|
const res: any = await getLiveScreenDanmuSaveObj(requestData, true);
|
|
if (res.success) {
|
|
console.log("修改成功", res);
|
|
ElMessage({
|
|
showClose: true,
|
|
message: "保存成功",
|
|
type: "success"
|
|
});
|
|
dialogInfo.showDialog = false;
|
|
// configWeekVideoListFn(true);
|
|
emits("updateConfig");
|
|
}
|
|
};
|
|
|
|
// 组件销毁时，也及时销毁编辑器
|
|
onBeforeUnmount(() => {
|
|
const editor = editorRef.value;
|
|
if (editor == null) return;
|
|
editor.destroy();
|
|
});
|
|
|
|
const handleCreated = (editor: any) => {
|
|
editorRef.value = editor; // 记录 editor 实例，重要！
|
|
};
|
|
|
|
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 closeDialog = () => {
|
|
dialogInfo.showDialog = false;
|
|
dialogInfo.postData = {};
|
|
};
|
|
function openDialog(obj: any) {
|
|
dialogInfo.postData = obj;
|
|
dialogInfo.showDialog = true;
|
|
}
|
|
|
|
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
|
defineExpose({
|
|
openDialog
|
|
});
|
|
onMounted(async () => {});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.setvideodialog {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
right: 0%;
|
|
top: 0%;
|
|
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: 70%;
|
|
// height: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
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 {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
.footer-btn {
|
|
padding: 20px;
|
|
> button:first-child {
|
|
margin-right: 40px;
|
|
}
|
|
> button {
|
|
border: 1px solid #ccc;
|
|
}
|
|
}
|
|
:deep(.w-e-bar) {
|
|
color: #ffecec !important;
|
|
background-color: transparent !important;
|
|
svg {
|
|
fill: #ffecec !important;
|
|
}
|
|
.w-e-bar-item .disabled,
|
|
.w-e-bar-item button {
|
|
color: #ffecec !important;
|
|
background-color: transparent;
|
|
}
|
|
.w-e-bar-item .disabled:hover,
|
|
.w-e-bar-item button:hover {
|
|
background-color: transparent;
|
|
}
|
|
.w-e-bar-divider {
|
|
display: none;
|
|
}
|
|
.w-e-select-list {
|
|
background-color: #112748 !important;
|
|
}
|
|
|
|
.w-e-select-list ul .selected,
|
|
.w-e-select-list ul li:hover {
|
|
background-color: white !important;
|
|
color: black !important;
|
|
}
|
|
}
|
|
.editor {
|
|
height: 380px !important;
|
|
:deep(.w-e-text-container) {
|
|
color: #ffecec !important;
|
|
background-color: transparent !important;
|
|
font-size: 16px !important;
|
|
}
|
|
:deep() {
|
|
.w-e-hover-bar {
|
|
background-color: #0a2249 !important;
|
|
}
|
|
}
|
|
}
|
|
// .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>
|