Newer
Older
DH_Apicture / src / views / RongyunCommunication / ModelRongYun / index.vue
@chenke chenke on 3 Dec 4 KB 优化
  1. <template>
  2. <div class="ModelRongYun">
  3. <!-- 视频弹窗 -->
  4. <ModalContact :dialogShow="allData.dialogVisible" @dialogHide="dialogHide"></ModalContact>
  5. <!-- 融云 -->
  6. <el-dialog
  7. :close-on-click-modal="false"
  8. v-model="RYShow"
  9. class="RongYunWindowShow"
  10. modal-class="pmpSitNewDialog"
  11. :z-index="10000"
  12. :before-close="clearRY"
  13. append-to-body
  14. >
  15. <div class="dialogTitle">
  16. <div class="title">视频会商</div>
  17. <div class="closeIcon" @click="clearRY"></div>
  18. </div>
  19. <div class="RYdia">
  20. <RongYunBox v-if="RYShow" ref="rongYun" :ryUser="allData.ryUser" :callType="allData.callType"></RongYunBox>
  21. </div>
  22. </el-dialog>
  23. </div>
  24. </template>
  25.  
  26. <script setup>
  27. import ModalContact from '@/views/RongyunCommunication/ModalContact/index.vue';
  28.  
  29. import RongYunBox from '@/views/RongyunCommunication/RongYunBox/index.vue';
  30. import bus from '@/utils/util';
  31.  
  32. const RYShow = ref(false);
  33. const allData = reactive({
  34. callType: '',
  35. ryUser: '',
  36. dialogVisible: false,
  37. // 融云
  38.  
  39. Getphone: '1123598821738675201',
  40. getmediaType: 2,
  41. UserTreeData: [],
  42. form: {
  43. UserIds: [],
  44. },
  45. });
  46. const rongYun = ref();
  47. const {
  48. callType,
  49. ryUser,
  50. dialogVisible,
  51. // 融云
  52. Getphone,
  53. getmediaType,
  54. UserTreeData,
  55. form,
  56. } = toRefs(allData);
  57.  
  58. const props = defineProps({
  59. RYdialogShow: Boolean,
  60. });
  61. watch(
  62. () => props.RYdialogShow,
  63. (newVal, oldVal) => {
  64. if (newVal) {
  65. allData.dialogVisible = true;
  66. allData.form.UserIds = [];
  67. }
  68. }
  69. );
  70. const emit = defineEmits(['OneDialogHide']);
  71. onMounted(() => {
  72. bus.off('OffRongYun');
  73. bus.on('OffRongYun', data => {
  74. console.log('OffRongYun方法', data);
  75. console.log('allData', allData);
  76. RYShow.value = true;
  77. allData.ryUser = data;
  78. allData.callType = data.type;
  79.  
  80. console.log('allData.ryUser', allData.ryUser);
  81. });
  82. });
  83.  
  84. const dialogHide = val => {
  85. if (!val) {
  86. allData.dialogVisible = false;
  87. emit('OneDialogHide', false);
  88. }
  89. };
  90.  
  91. // 融云清除
  92. const clearRY = () => {
  93. console.log(rongYun.value, 'rongYun');
  94. rongYun.value.close();
  95. RYShow.value = false;
  96. };
  97. </script>
  98. <style lang="scss">
  99. .RongYunWindowShow {
  100. background: #071645;
  101. box-shadow: 0 0 0 0.00521rem rgb(33, 109, 206), inset 0 0 0.10417rem rgb(33, 109, 206);
  102. top: 50px;
  103. width: 1300px;
  104. height: 700px;
  105.  
  106. :deep(.el-dialog) {
  107. width: 100% !important;
  108. line-height: 22px;
  109. }
  110.  
  111. :deep(.el-dialog__header) {
  112. display: none !important;
  113. }
  114.  
  115. :deep(.el-dialog__body) {
  116. padding: 0 !important;
  117. width: 100%;
  118. height: 600px !important;
  119. }
  120.  
  121. .RYdia {
  122. width: 100%;
  123. height: 100%;
  124. }
  125. }
  126. </style>
  127. <style lang="scss" scoped>
  128. .ModelRongYun {
  129. line-height: 22px;
  130. position: absolute;
  131. top: 50%;
  132. left: 50%;
  133.  
  134. #TitleDiv {
  135. width: 100%;
  136. height: 76px;
  137. line-height: 76px;
  138. font-size: 20px;
  139. -webkit-box-sizing: border-box;
  140. box-sizing: border-box;
  141. padding-left: 30px;
  142. font-family: YouSheBiaoTiHei;
  143. font-weight: 400;
  144. color: #f9feff;
  145. padding: 3px 20px;
  146. background: -webkit-gradient(linear, left bottom, left top, from(#9bd8ff), to(#d4edff));
  147. background: linear-gradient(0deg, #9bd8ff 0%, #d4edff 100%);
  148. -webkit-background-clip: text;
  149. -webkit-text-fill-color: transparent;
  150. }
  151.  
  152. #DialogForm {
  153. width: 100%;
  154. max-height: calc(100% - 135px);
  155. box-sizing: border-box;
  156. padding-top: 20px;
  157. overflow: auto;
  158.  
  159. :deep(.el-form-item__label) {
  160. color: #c0c3c6;
  161. }
  162. :deep(.el-input__inner),
  163. :deep(.el-textarea__inner) {
  164. background: #031c33;
  165. border: 1px solid #22598b;
  166. opacity: 0.8;
  167. border-radius: 4px;
  168. color: #5691b2;
  169. }
  170. :deep(.el-select .el-input .el-select__caret) {
  171. color: #00b4ff;
  172. }
  173. :deep(.el-checkbox) {
  174. color: #c0c3c6;
  175. }
  176. :deep(.el-checkbox__inner) {
  177. border: 1px solid #00b4ff;
  178. background: none;
  179. }
  180. }
  181.  
  182. // 融云样式
  183. .RYdia {
  184. z-index: 4;
  185. background: rgba(4, 42, 84, 0.9);
  186. border-radius: 5px;
  187. min-height: 250px;
  188. min-width: 250px;
  189. z-index: 10000;
  190. .topBox {
  191. display: flex;
  192. justify-content: space-between;
  193. align-items: center;
  194. height: 40px;
  195. padding: 0 10px 0 14px;
  196. background: linear-gradient(90deg, #13a0fe 0%, rgba(26, 198, 254, 0.1) 100%);
  197. .boxName {
  198. color: #fff;
  199. font-weight: 700;
  200. font-size: 18px;
  201. // i{
  202. // color: #000;
  203. // }
  204. }
  205. }
  206. .closeBtn {
  207. cursor: pointer;
  208. font-size: 24px;
  209. color: #c7d3dc;
  210. // color: #333;
  211. // text-align: center;
  212. // background: #fff;
  213. // width: 30px;
  214. // height: 20px;
  215. // line-height: 20px;
  216. // border-radius: 4px;
  217. // text-align: center;
  218. }
  219. }
  220. }
  221. </style>