<template> <div class="ModelRongYun"> <!-- 触发按钮 --> <div class="contentSlot"> <slot name="center" :OpenRongYUnDialog="OpenRongYUnDialog"></slot> </div> <!-- <div class="btn" :style="{ 'left': `${posLeft}px` }" @click="OpenRongYUnDialog"></div> --> <!-- 视频弹窗 --> <div id="pop-up" v-if="dialogVisible" class="seletepeople2"> <div class="leftangle"></div> <div class="rightangle"></div> <div class="weather-head"> <div class="head-bg">选择人员</div> <el-icon class="weather-icon" size='18' color="#1096DB" @click="closevisible"> <Close /> </el-icon> </div> <div class="custom-body" style="height: 100%;"> <ModalContact v-if="dialogVisible"></ModalContact> </div> </div> <!-- <el-dialog v-model="dialogVisible" :append-to-body="true" :close-on-click-modal="false" class="responseDialog" custom-class="my-dialog" center :show-close="false"> <template #header="{ close, titleId, titleClass }"> <div class="my-header"> <img @click="dialogVisible = false" src="@/assets/images/zhubo/gb_btn.png" alt="" style="cursor: pointer; position: absolute; right: 30px; top: 30px" /> </div> </template> <ModalContact v-if="dialogVisible"></ModalContact> <ModalContact v-if="dialogVisible && Boxtype == 'DP'"></ModalContact> <OnDutyToday v-if="dialogVisible && Boxtype == 'Tab'"></OnDutyToday> </el-dialog> --> <!-- 融云 --> <div id="pop-up" v-if="RYShow" class="seletepeople3"> <div class="leftangle"></div> <div class="rightangle"></div> <div class="weather-head"> <div class="head-bg">视频会商</div> <el-icon v-show="RongYunWindow" class="weather-icon" size='18' color="#1096DB" @click="clearRY"> <Close /> </el-icon> </div> <div class="custom-body" style="height: 100%;"> <RongYunBox ref="rongYun" v-if="RYShow" :ryUser="ryUser" @close="close" :callType="callType"></RongYunBox> </div> </div> <!-- <el-dialog :close-on-click-modal="false" v-model="RYShow" class="RongYunWindowShow" custom-class="call-dialog" :show-close="false"> <template #header="{ close, titleId, titleClass }"> </template> <div class="RYdia" v-if="RYShow"> <div class="topBox"> <div class="boxName"> <i class="el-icon-caret-right"></i> 视频会商 </div> <div class="closeBtn" v-show="RongYunWindow"> <close class="el-icon-close" style=" width: 1em; height: 1em; vertical-align: middle; cursor: pointer; " @click="clearRY" /> </div> </div> <RongYunBox ref="rongYun" v-if="RYShow" :ryUser="ryUser" @close="close" :callType="callType"></RongYunBox> </div> </el-dialog> --> </div> </template> <script setup> import ModalContact from "@/components/ModalContact/index.vue"; import OnDutyToday from "@/components/ModalContact/OnDutyToday.vue"; import RongYunBox from "@/components/rongyun/RongYunBox.vue"; import bus from "@/utils"; // import { deptUserTree } from "@/api/fxkhPage/crossLookSqualls"; const allData = reactive({ callType: "2", ryUser: "", dialogVisible: true, // 融云 RYShow: false, RongYunWindow: true, Getphone: "1123598821738675201", getmediaType: 2, UserTreeData: [], form: { UserIds: [], }, rules: { UserIds: [{ required: true, message: "请选择人员", trigger: "change" }], }, UserTreeProps: { multiple: true, value: "id", label: "name", emitPath: false, }, }); const rongYun = ref(); const { callType, ryUser, dialogVisible, // 融云 RYShow, RongYunWindow, Getphone, getmediaType, UserTreeData, form, rules, UserTreeProps, } = toRefs(allData); const props = defineProps({ posLeft: { type: Number, default: () => { return "-50"; }, }, Boxtype: { type: String, default: () => { // 默认大屏 return "DP"; }, }, }); // components: { // RongYunBox, // ModalContact, // OnDutyToday, // } function closevisible () { allData.dialogVisible = false; bus.emit('changeactiveitem') } onMounted(() => { bus.off("OffRongYun"), bus.on("OffRongYun", (data) => { allData.RYShow = true; allData.ryUser = data; allData.callType = data.type; }); bus.off("OffRongYunWindow"), bus.on("OffRongYunWindow", (data) => { allData.RongYunWindow = data; }); }); const OpenRongYUnDialog = () => { console.log("融云触发"); allData.dialogVisible = true; allData.form.UserIds = []; // allData.loadAddZLUser(); }; //呼叫融云 const callRonYunHandel = () => { allData.$refs["ruleForm"].validate((valid) => { if (valid) { // alert('submit!'); allData.dialogVisible = false; allData.RongYunWindow = true; allData.RYShow = true; } else { // console.log('error submit!!'); return false; } }); }; // 融云清除 const clearRY = () => { console.log(rongYun.value, "rongYun"); rongYun.value.close(); allData.RYShow = false; }; // 获取新增指令所有的人员 const loadAddZLUser = () => { deptUserTree() .then((res) => { allData.UserTreeData = res.data.data; }) .catch(() => { }); }; </script> <style lang="scss"> .my-dialog { width: 680px !important; height: 600px !important; // background: url("@/assets/images/zhubo/tkbj_img.png") no-repeat !important; background-size: 100% 100% !important; } .call-dialog { width: 860px !important; height: 510px !important; background: transparent !important; // background-size: 100% 100% !important; } </style> <style lang="scss" scoped> //@import "@/assets/styles/cockpit.scss"; .ModelRongYun { // .btn { // width: 34px; // height: 34px; // position: absolute; // // left: -50px; // top: 50%; // margin-top: -17px; // cursor: pointer; // z-index: 101; // background: url("~@/assets/images/zhubo/RongYun_icon.png") no-repeat center; // } } .responseDialog { #TitleDiv { width: 100%; height: 76px; line-height: 76px; font-size: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 30px; font-family: YouSheBiaoTiHei; font-weight: 400; color: #f9feff; padding: 3px 20px; background: -webkit-gradient( linear, left bottom, left top, from(#9bd8ff), to(#d4edff) ); background: linear-gradient(0deg, #9bd8ff 0%, #d4edff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } :deep(.el-dialog__header) { display: none; } :deep(.el-dialog__body) { padding: 0; width: 100%; height: calc(100% - 80px); } ::deep(.el-dialog) { width: 680px; height: 550px; // background: url("@/assets/images/zhubo/tkbj_img.png") no-repeat; background-size: 100% 100%; } #DialogForm { width: 100%; max-height: calc(100% - 75px); box-sizing: border-box; padding-top: 20px; overflow: auto; :deep().el-form-item__label { color: #c0c3c6; } :deep(.el-input__inner), :deep(.el-textarea__inner) { background: #031c33; border: 1px solid #22598b; opacity: 0.8; border-radius: 4px; color: #5691b2; } :deep(.el-select .el-input .el-select__caret) { color: #00b4ff; } :deep(.el-checkbox) { color: #c0c3c6; } :deep(.el-checkbox__inner) { border: 1px solid #00b4ff; background: none; } } } .RongYunWindowShow { :deep(.el-dialog__header) { display: none; } :deep(.el-dialog__body) { padding: 0; width: 100%; height: calc(100% - 80px); } } .RYdia { position: fixed; left: 50%; top: 35%; transform: translate(-50%, -50%); z-index: 4; background: #185d7fba; border-radius: 5px; min-height: 250px; min-width: 250px; max-width: 1370px; width: 854px; height: auto; .topBox { display: flex; justify-content: space-between; padding: 0 10px; } } </style>