- <template>
- <div class="ModelRongYun">
- <!-- 视频弹窗 -->
- <ModalContact :dialogShow="allData.dialogVisible" @dialogHide="dialogHide"></ModalContact>
- <!-- 融云 -->
- <el-dialog
- :close-on-click-modal="false"
- v-model="RYShow"
- class="RongYunWindowShow"
- modal-class="pmpSitNewDialog"
- :z-index="10000"
- :before-close="clearRY"
- append-to-body
- >
- <div class="dialogTitle">
- <div class="title">视频会商</div>
- <div class="closeIcon" @click="clearRY"></div>
- </div>
- <div class="RYdia">
- <RongYunBox v-if="RYShow" ref="rongYun" :ryUser="allData.ryUser" :callType="allData.callType"></RongYunBox>
- </div>
- </el-dialog>
- </div>
- </template>
-
- <script setup>
- import ModalContact from '@/views/RongyunCommunication/ModalContact/index.vue';
-
- import RongYunBox from '@/views/RongyunCommunication/RongYunBox/index.vue';
- import bus from '@/utils/util';
-
- const RYShow = ref(false);
- const allData = reactive({
- callType: '',
- ryUser: '',
- dialogVisible: false,
- // 融云
-
- Getphone: '1123598821738675201',
- getmediaType: 2,
- UserTreeData: [],
- form: {
- UserIds: [],
- },
- });
- const rongYun = ref();
- const {
- callType,
- ryUser,
- dialogVisible,
- // 融云
- Getphone,
- getmediaType,
- UserTreeData,
- form,
- } = toRefs(allData);
-
- const props = defineProps({
- RYdialogShow: Boolean,
- });
- watch(
- () => props.RYdialogShow,
- (newVal, oldVal) => {
- if (newVal) {
- allData.dialogVisible = true;
- allData.form.UserIds = [];
- }
- }
- );
- const emit = defineEmits(['OneDialogHide']);
- onMounted(() => {
- bus.off('OffRongYun');
- bus.on('OffRongYun', data => {
- console.log('OffRongYun方法', data);
- console.log('allData', allData);
- RYShow.value = true;
- allData.ryUser = data;
- allData.callType = data.type;
-
- console.log('allData.ryUser', allData.ryUser);
- });
- });
-
- const dialogHide = val => {
- if (!val) {
- allData.dialogVisible = false;
- emit('OneDialogHide', false);
- }
- };
-
- // 融云清除
- const clearRY = () => {
- console.log(rongYun.value, 'rongYun');
- rongYun.value.close();
- RYShow.value = false;
- };
- </script>
- <style lang="scss">
- .RongYunWindowShow {
- background: #071645;
- box-shadow: 0 0 0 0.00521rem rgb(33, 109, 206), inset 0 0 0.10417rem rgb(33, 109, 206);
- top: 50px;
- width: 1300px;
- height: 700px;
-
- :deep(.el-dialog) {
- width: 100% !important;
- line-height: 22px;
- }
-
- :deep(.el-dialog__header) {
- display: none !important;
- }
-
- :deep(.el-dialog__body) {
- padding: 0 !important;
- width: 100%;
- height: 600px !important;
- }
-
- .RYdia {
- width: 100%;
- height: 100%;
- }
- }
- </style>
- <style lang="scss" scoped>
- .ModelRongYun {
- line-height: 22px;
- position: absolute;
- top: 50%;
- left: 50%;
-
- #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;
- }
-
- #DialogForm {
- width: 100%;
- max-height: calc(100% - 135px);
- 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;
- }
- }
-
- // 融云样式
- .RYdia {
- z-index: 4;
- background: rgba(4, 42, 84, 0.9);
- border-radius: 5px;
- min-height: 250px;
- min-width: 250px;
- z-index: 10000;
- .topBox {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 40px;
- padding: 0 10px 0 14px;
- background: linear-gradient(90deg, #13a0fe 0%, rgba(26, 198, 254, 0.1) 100%);
- .boxName {
- color: #fff;
- font-weight: 700;
- font-size: 18px;
- // i{
- // color: #000;
- // }
- }
- }
- .closeBtn {
- cursor: pointer;
- font-size: 24px;
- color: #c7d3dc;
- // color: #333;
- // text-align: center;
- // background: #fff;
- // width: 30px;
- // height: 20px;
- // line-height: 20px;
- // border-radius: 4px;
- // text-align: center;
- }
- }
- }
- </style>