From 9f4272b1d47606b6e81e573d7853cd495dfe920b Mon Sep 17 00:00:00 2001 From: tdg930622 <51816549+tdg930622@users.noreply.github.com> Date: Tue, 7 Jan 2025 17:49:32 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=88=BF=E9=97=B4=E9=83=A8?= =?UTF-8?q?=E5=88=86=E5=B8=83=E5=B1=80=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/svg/Invite-room.svg | 10 + src/assets/icons/svg/mute-all.svg | 3 + src/assets/icons/svg/remove-room.svg | 11 + src/assets/icons/svg/sound-off.svg | 4 + src/assets/icons/svg/video-recording-1.svg | 3 + src/assets/icons/svg/video-recording-2.svg | 3 + src/assets/icons/svg/zoom-1.svg | 3 + src/assets/icons/svg/zoom-2.svg | 3 + src/assets/js/directiveVideo.js | 127 +++++++ src/assets/style/common.scss | 3 + src/main.js | 1 + .../components/LayoutContentNew.vue | 6 +- .../components/VideoRoom-copy.vue | 102 ++++++ .../mediation-page/components/VideoRoom.vue | 340 ++++++++++++++---- .../components/caseVideoReservationDialog.vue | 7 +- 15 files changed, 543 insertions(+), 83 deletions(-) create mode 100644 src/assets/icons/svg/Invite-room.svg create mode 100644 src/assets/icons/svg/mute-all.svg create mode 100644 src/assets/icons/svg/remove-room.svg create mode 100644 src/assets/icons/svg/sound-off.svg create mode 100644 src/assets/icons/svg/video-recording-1.svg create mode 100644 src/assets/icons/svg/video-recording-2.svg create mode 100644 src/assets/icons/svg/zoom-1.svg create mode 100644 src/assets/icons/svg/zoom-2.svg create mode 100644 src/assets/js/directiveVideo.js create mode 100644 src/pages/mediation-page/components/VideoRoom-copy.vue diff --git a/src/assets/icons/svg/Invite-room.svg b/src/assets/icons/svg/Invite-room.svg new file mode 100644 index 0000000..cf47ad2 --- /dev/null +++ b/src/assets/icons/svg/Invite-room.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/svg/mute-all.svg b/src/assets/icons/svg/mute-all.svg new file mode 100644 index 0000000..3176009 --- /dev/null +++ b/src/assets/icons/svg/mute-all.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/svg/remove-room.svg b/src/assets/icons/svg/remove-room.svg new file mode 100644 index 0000000..00fe821 --- /dev/null +++ b/src/assets/icons/svg/remove-room.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/svg/sound-off.svg b/src/assets/icons/svg/sound-off.svg new file mode 100644 index 0000000..6c0ad18 --- /dev/null +++ b/src/assets/icons/svg/sound-off.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/svg/video-recording-1.svg b/src/assets/icons/svg/video-recording-1.svg new file mode 100644 index 0000000..b61c2d8 --- /dev/null +++ b/src/assets/icons/svg/video-recording-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/svg/video-recording-2.svg b/src/assets/icons/svg/video-recording-2.svg new file mode 100644 index 0000000..1bf845b --- /dev/null +++ b/src/assets/icons/svg/video-recording-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/svg/zoom-1.svg b/src/assets/icons/svg/zoom-1.svg new file mode 100644 index 0000000..26de3e2 --- /dev/null +++ b/src/assets/icons/svg/zoom-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/svg/zoom-2.svg b/src/assets/icons/svg/zoom-2.svg new file mode 100644 index 0000000..304cc22 --- /dev/null +++ b/src/assets/icons/svg/zoom-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/js/directiveVideo.js b/src/assets/js/directiveVideo.js new file mode 100644 index 0000000..f349b39 --- /dev/null +++ b/src/assets/js/directiveVideo.js @@ -0,0 +1,127 @@ +/** + * 自定义视频拖动元素 + * */ + +import Vue from "vue"; + +Vue.directive('vdrag', { + bind: (el) => { + // console.log(el, '---el') + // 获取弹框标题区域dom节点 + const headerDom = el.querySelector('.room-top'); + // 修改鼠标图标样式 + headerDom.style.cursor = "move"; + // 禁止拖拽时选中标题中文本内容 + headerDom.style.userSelect = "none"; + + // 获取弹框区域的dom节点 + const dialogDom = el; + console.log(dialogDom,'---dialogDom') + // 弹窗距离边界的距离 + const boundingPadding = 1; + + // 是否正在拖动 + let isDrag = false; + + // 鼠标按下时位置坐标 + let clientX = 0, clientY = 0; + + // 按下时弹框位置坐标 + let dialogLeft = 0, dialogTop = 0; + let newLeft = 0, newTop = 0; + let dialogWidth = 0, dialogHeight = 0; + let distLeft = 0, distTop = 0; + + // 监听鼠标按下事件 + headerDom.onmousedown = function(e) { + isDrag = true; + + // 获取当前鼠标位置坐标 + clientX = e.clientX; + clientY = e.clientY; + + if(dialogDom.style.left == '') + { + // 未获取到 直接取50% + dialogLeft = document.documentElement.clientWidth / 2; + } + else + { + // 获取当前弹窗位置坐标 + dialogLeft = parseFloat(dialogDom.style.left); + } + if(isNaN(dialogLeft)){ + dialogLeft = 0; + } + newLeft = dialogLeft; + + if(dialogDom.style.top == '') + { + // 未获取到 直接取50% + dialogTop = document.documentElement.clientHeight / 2; + } + else + { + // 获取当前弹窗位置坐标 + dialogTop = parseFloat(dialogDom.style.top); + } + if(isNaN(dialogTop)){ + dialogTop = 0; + } + newTop = dialogTop; + + const dialogBounding = dialogDom.getBoundingClientRect(); + dialogWidth = dialogBounding.width; + dialogHeight = dialogBounding.height; + distLeft = dialogLeft - dialogBounding.left; + distTop = dialogTop - dialogBounding.top; + + // 绑定鼠标移动事件 + document.addEventListener('mousemove', el.mousemove); + } + + // 监听鼠标移动事件 + el.mousemove = function(e) { + // 按下的时候，执行移动操作 + if(isDrag){ + // 设置弹窗位置以及边界处理 + newLeft = dialogLeft + e.clientX - clientX; + // console.log(newLeft, '---newLeft') + // console.log(distLeft, '---distLeft') + // console.log(boundingPadding, '---boundingPadding') + if(newLeft-distLeftwindow.innerWidth-boundingPadding-dialogWidth){ + newLeft = distLeft + window.innerWidth - boundingPadding - dialogWidth; + } + dialogDom.style.left = newLeft + 'px'; + + newTop = dialogTop + e.clientY - clientY; + // console.log(newTop, '---newTop') + // console.log(distTop, '---distTop') + // console.log(boundingPadding, '---boundingPadding') + if(newTop-distTop<=boundingPadding){ + newTop = boundingPadding + distTop; + }else if(newTop-distTop>=window.innerHeight-boundingPadding-dialogHeight){ + newTop = distTop + window.innerHeight - boundingPadding - dialogHeight; + } + dialogDom.style.top = newTop + 'px'; + } + } + + // 监听鼠标抬起事件 + el.mouseup = function(e) { + isDrag = false; + + // 解绑鼠标移动事件 + document.removeEventListener('mousemove', el.mousemove); + } + + // 绑定鼠标抬起事件 + document.addEventListener('mouseup', el.mouseup); + }, + unbind: (el) => { + // 解绑鼠标抬起事件 + document.removeEventListener('mouseup', el.mouseup); + } +}) \ No newline at end of file diff --git a/src/assets/style/common.scss b/src/assets/style/common.scss index 39b4e8d..c575bdf 100644 --- a/src/assets/style/common.scss +++ b/src/assets/style/common.scss @@ -351,6 +351,9 @@ html{ left: $left; } } +.mr-4{ + margin-right: 4px; +} .ml-4{ margin-left: 4px; } diff --git a/src/main.js b/src/main.js index b750933..a732714 100644 --- a/src/main.js +++ b/src/main.js @@ -18,6 +18,7 @@ import 'element-ui/lib/theme-chalk/icon.css' import {TrydoFiles} from "@trydo/files-utils" // 引入全局通用自定义指令 import '@/assets/js/directive'; +import '@/assets/js/directiveVideo'; Vue.use(ElementUI); diff --git a/src/pages/mediation-page/components/LayoutContentNew.vue b/src/pages/mediation-page/components/LayoutContentNew.vue index 18fda5b..b0fdae7 100644 --- a/src/pages/mediation-page/components/LayoutContentNew.vue +++ b/src/pages/mediation-page/components/LayoutContentNew.vue @@ -626,7 +626,7 @@
帮扶
- + + @@ -667,6 +669,7 @@ export default { singleofficeDeliveryPopover: () => import('./singleofficeDeliveryPopover.vue'),//发起送达 MediationRecordDialog: () => import('./MediationRecordDialog.vue'),//调解记录 singleJointlyPopover: () => import('./singleJointlyPopover.vue'),//案件协办 + VideoRoom: () => import('./VideoRoom'), }, data() { return { @@ -741,6 +744,7 @@ export default { communicationRecord: '', visiblePopover: null, + VideoCallDialog: null, }; }, computed: { diff --git a/src/pages/mediation-page/components/VideoRoom-copy.vue b/src/pages/mediation-page/components/VideoRoom-copy.vue new file mode 100644 index 0000000..70ce844 --- /dev/null +++ b/src/pages/mediation-page/components/VideoRoom-copy.vue @@ -0,0 +1,102 @@ + + + + + \ No newline at end of file diff --git a/src/pages/mediation-page/components/VideoRoom.vue b/src/pages/mediation-page/components/VideoRoom.vue index 70ce844..56406c6 100644 --- a/src/pages/mediation-page/components/VideoRoom.vue +++ b/src/pages/mediation-page/components/VideoRoom.vue @@ -1,102 +1,284 @@ - \ No newline at end of file diff --git a/src/pages/mediation-page/components/caseVideoReservationDialog.vue b/src/pages/mediation-page/components/caseVideoReservationDialog.vue index 7748ec4..a5a1f57 100644 --- a/src/pages/mediation-page/components/caseVideoReservationDialog.vue +++ b/src/pages/mediation-page/components/caseVideoReservationDialog.vue @@ -125,9 +125,10 @@ export default { }).catch(() => {}); }, handleVideoCall(item) { - this.VideoCallDialog = { - id: item.id - } + this.$parent.VideoCallDialog = {id: item.id} + // this.VideoCallDialog = { + // id: item.id + // } }, } }