视频房间部分布局内容
This commit is contained in:
tdg930622
parent
0655bb8f50
commit
9f4272b1d4
10
src/assets/icons/svg/Invite-room.svg
Normal file
10
src/assets/icons/svg/Invite-room.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_706_229690)">
|
||||
<path d="M12.25 1.60156C8.85642 1.60156 7.45002 3.77836 7.45002 6.40156C7.45002 7.28476 7.8719 8.17188 7.8719 8.17188C7.7023 8.26947 7.42337 8.57929 7.49377 9.12969C7.62497 10.1561 8.06995 10.4175 8.35315 10.4391C8.46115 11.3967 9.49002 12.6216 9.85002 12.8V14.4C9.05002 16.8 2.65002 15.2 2.65002 20.8H11.8688C11.6024 20.048 11.45 19.2432 11.45 18.4C11.45 15.5688 13.0881 13.1268 15.4641 11.95C15.7913 11.494 16.0909 10.9327 16.1469 10.4391C16.4301 10.4175 16.8751 10.1561 17.0063 9.12969C17.0767 8.57849 16.7977 8.26947 16.6281 8.17188C16.6281 8.17188 17.05 7.37036 17.05 6.40156C17.05 4.45916 16.2876 2.80156 14.65 2.80156C14.65 2.80156 14.0812 1.60156 12.25 1.60156ZM18.65 12.8C15.5572 12.8 13.05 15.3072 13.05 18.4C13.05 21.4928 15.5572 24 18.65 24C21.7428 24 24.25 21.4928 24.25 18.4C24.25 15.3072 21.7428 12.8 18.65 12.8ZM18.65 15.2C19.0916 15.2 19.45 15.5576 19.45 16V17.6H21.05C21.4916 17.6 21.85 17.9576 21.85 18.4C21.85 18.8424 21.4916 19.2 21.05 19.2H19.45V20.8C19.45 21.2424 19.0916 21.6 18.65 21.6C18.2084 21.6 17.85 21.2424 17.85 20.8V19.2H16.25C15.8084 19.2 15.45 18.8424 15.45 18.4C15.45 17.9576 15.8084 17.6 16.25 17.6H17.85V16C17.85 15.5576 18.2084 15.2 18.65 15.2Z" fill="#4E5969"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_706_229690">
|
||||
<rect width="24" height="24" fill="white" transform="translate(0.25)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
src/assets/icons/svg/mute-all.svg
Normal file
3
src/assets/icons/svg/mute-all.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="25" height="20" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.03125 0.398438C5.30005 0.398438 4.75 1.19844 4.75 1.19844C0.562 1.19844 2.87259 7.88315 1.64219 8.86875C1.64219 8.86875 2.3964 9.80156 4.75 9.80156V10.6C4.0996 12.2944 0.75 11.668 0.75 14.7984H7.16875C7.73195 14.4576 9.55 13.5125 9.55 13.5125C9.1156 13.0485 8.48894 12.2463 8.26094 11.6391C7.76174 11.3887 7.3396 11.0944 7.15 10.6V9.79219C7.302 9.79219 7.75021 9.75708 7.90781 9.72188C7.55101 9.17228 7.25 7.91959 7.25 7.21719C7.25 5.43079 8.01931 3.96143 9.29531 3.04063C8.91051 1.56783 8.05605 0.398438 6.03125 0.398438ZM19.15 0.398438C17.3716 0.398438 16.2796 1.6218 16.0156 3.225C17.3084 3.9178 18.15 5.41139 18.15 7.29219C18.15 7.88019 18.0129 8.44598 17.8641 8.88438C17.9193 9.10118 17.95 9.34294 17.95 9.61094C17.95 11.5869 15.95 13.5578 15.95 13.5578C16.3844 13.7474 17.7742 14.4536 18.3422 14.7984H24.75C24.75 10.5984 21.3396 11.7984 20.75 9.99844V8.79844C21.0156 8.66484 21.6481 7.74496 21.7281 7.02656C21.9361 7.01056 22.35 6.50208 22.35 6.04688C22.35 5.59167 22.2053 5.40016 22.0797 5.32656C22.0797 5.32656 22.35 4.72564 22.35 3.99844C22.35 2.54164 21.9564 1.19844 20.75 1.19844C20.75 1.19844 20.4036 0.398438 19.15 0.398438ZM12.75 3.59844C10.5964 3.59844 8.85 4.89559 8.85 7.21719C8.85 8.19879 9.4 8.96406 9.4 8.96406C9.4 8.96406 9.15 9.08694 9.15 9.61094C9.15 10.6293 9.80469 10.8734 9.80469 10.8734C9.89589 11.6798 11.15 12.8609 11.15 12.8609V14.2094C10.4764 16.2302 6.35 14.8984 6.35 19.5984H19.15C19.15 14.8824 15.0236 16.2302 14.35 14.2094V12.8609C14.35 12.8609 15.6041 11.6798 15.6953 10.8734C15.6953 10.8734 16.35 10.4213 16.35 9.61094C16.35 9.04934 16.1 8.96406 16.1 8.96406C16.1 8.96406 16.55 8.10819 16.55 7.29219C16.55 5.65619 15.7292 4.39844 14.35 4.39844C14.35 4.39844 13.7644 3.59844 12.75 3.59844Z" fill="#4E5969"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
11
src/assets/icons/svg/remove-room.svg
Normal file
11
src/assets/icons/svg/remove-room.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" rx="12" fill="black" fill-opacity="0.5"/>
|
||||
<g clip-path="url(#clip0_706_229627)">
|
||||
<path d="M12 5.06641C9.73761 5.06641 8.80001 6.51761 8.80001 8.26641C8.80001 8.85521 9.08126 9.44661 9.08126 9.44661C8.96819 9.51168 8.78224 9.71822 8.82917 10.0852C8.91664 10.7694 9.21329 10.9437 9.40209 10.9581C9.47409 11.5965 10.16 12.4131 10.4 12.532V13.5987C9.86667 15.1987 5.60001 14.132 5.60001 17.8654H11.7458C11.5682 17.364 11.4667 16.8275 11.4667 16.2654C11.4667 14.3779 12.5587 12.7499 14.1427 11.9654C14.3608 11.6614 14.5606 11.2871 14.5979 10.9581C14.7867 10.9437 15.0834 10.7694 15.1708 10.0852C15.2178 9.71769 15.0318 9.51168 14.9188 9.44661C14.9188 9.44661 15.2 8.91227 15.2 8.26641C15.2 6.97147 14.6917 5.86641 13.6 5.86641C13.6 5.86641 13.2208 5.06641 12 5.06641ZM16.2667 12.532C14.2048 12.532 12.5333 14.2035 12.5333 16.2654C12.5333 18.3272 14.2048 19.9987 16.2667 19.9987C18.3285 19.9987 20 18.3272 20 16.2654C20 14.2035 18.3285 12.532 16.2667 12.532ZM15.2 14.6654C15.3364 14.6654 15.4728 14.7173 15.5771 14.8216L16.2667 15.5112L16.9563 14.8216C17.1648 14.6131 17.5019 14.6131 17.7104 14.8216C17.919 15.0301 17.919 15.3672 17.7104 15.5758L17.0208 16.2654L17.7104 16.9549C17.919 17.1635 17.919 17.5006 17.7104 17.7091C17.6064 17.8131 17.4699 17.8654 17.3333 17.8654C17.1968 17.8654 17.0603 17.8131 16.9563 17.7091L16.2667 17.0195L15.5771 17.7091C15.4731 17.8131 15.3365 17.8654 15.2 17.8654C15.0635 17.8654 14.9269 17.8131 14.8229 17.7091C14.6144 17.5006 14.6144 17.1635 14.8229 16.9549L15.5125 16.2654L14.8229 15.5758C14.6144 15.3672 14.6144 15.0301 14.8229 14.8216C14.9272 14.7173 15.0636 14.6654 15.2 14.6654Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_706_229627">
|
||||
<rect width="16" height="16" fill="white" transform="translate(4 4)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
4
src/assets/icons/svg/sound-off.svg
Normal file
4
src/assets/icons/svg/sound-off.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" rx="12" fill="black" fill-opacity="0.5"/>
|
||||
<path d="M12 5.06641C11.1163 5.06641 10.4 5.78267 10.4 6.66641V13.0664C10.4 13.9501 11.1163 14.6664 12 14.6664C12.8837 14.6664 13.6 13.9501 13.6 13.0664V6.66641C13.6 5.78267 12.8837 5.06641 12 5.06641ZM8.79165 10.3924C8.65038 10.3947 8.51577 10.4528 8.41734 10.5542C8.31891 10.6555 8.26472 10.7918 8.26665 10.9331V13.0664C8.26665 14.9405 9.66261 16.4962 11.4667 16.757V17.8664H9.86665C9.79598 17.8654 9.72581 17.8785 9.66023 17.9048C9.59465 17.9312 9.53495 17.9703 9.48462 18.0199C9.43429 18.0695 9.39433 18.1287 9.36705 18.1939C9.33977 18.2591 9.32572 18.3291 9.32572 18.3997C9.32572 18.4704 9.33977 18.5404 9.36705 18.6056C9.39433 18.6708 9.43429 18.7299 9.48462 18.7796C9.53495 18.8292 9.59465 18.8683 9.66023 18.8947C9.72581 18.921 9.79598 18.9341 9.86665 18.9331H11.9104C11.968 18.9426 12.0268 18.9426 12.0844 18.9331H14.1333C14.204 18.9341 14.2742 18.921 14.3397 18.8947C14.4053 18.8683 14.465 18.8292 14.5153 18.7796C14.5657 18.7299 14.6056 18.6708 14.6329 18.6056C14.6602 18.5404 14.6742 18.4704 14.6742 18.3997C14.6742 18.3291 14.6602 18.2591 14.6329 18.1939C14.6056 18.1287 14.5657 18.0695 14.5153 18.0199C14.465 17.9703 14.4053 17.9312 14.3397 17.9048C14.2742 17.8785 14.204 17.8654 14.1333 17.8664H12.5333V16.757C14.3374 16.4962 15.7333 14.9405 15.7333 13.0664V10.9331C15.7343 10.8624 15.7213 10.7922 15.6949 10.7267C15.6686 10.6611 15.6294 10.6014 15.5798 10.551C15.5302 10.5007 15.471 10.4607 15.4058 10.4335C15.3406 10.4062 15.2707 10.3921 15.2 10.3921C15.1293 10.3921 15.0593 10.4062 14.9941 10.4335C14.9289 10.4607 14.8698 10.5007 14.8202 10.551C14.7705 10.6014 14.7314 10.6611 14.7051 10.7267C14.6787 10.7922 14.6657 10.8624 14.6667 10.9331V13.0664C14.6667 14.5253 13.5112 15.6978 12.0604 15.7299C12.0376 15.7271 12.0146 15.7257 11.9917 15.7258C11.9721 15.7261 11.9527 15.7275 11.9333 15.7299C10.4855 15.6946 9.33332 14.5232 9.33332 13.0664V10.9331C9.3343 10.8617 9.32094 10.7909 9.29406 10.7248C9.26717 10.6587 9.22729 10.5987 9.17678 10.5482C9.12627 10.4978 9.06616 10.4581 9.00001 10.4313C8.93385 10.4045 8.863 10.3913 8.79165 10.3924Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
3
src/assets/icons/svg/video-recording-1.svg
Normal file
3
src/assets/icons/svg/video-recording-1.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6 2C6.30754 2 2 6.30754 2 11.6C2 16.8925 6.30754 21.2 11.6 21.2C16.8925 21.2 21.2 16.8925 21.2 11.6C21.2 6.30754 16.8925 2 11.6 2ZM11.6 3.6C16.0278 3.6 19.6 7.17225 19.6 11.6C19.6 16.0278 16.0278 19.6 11.6 19.6C7.17225 19.6 3.6 16.0278 3.6 11.6C3.6 7.17225 7.17225 3.6 11.6 3.6ZM11.6 7.6C10.5391 7.6 9.52172 8.02143 8.77157 8.77157C8.02143 9.52172 7.6 10.5391 7.6 11.6C7.6 12.6609 8.02143 13.6783 8.77157 14.4284C9.52172 15.1786 10.5391 15.6 11.6 15.6C12.6609 15.6 13.6783 15.1786 14.4284 14.4284C15.1786 13.6783 15.6 12.6609 15.6 11.6C15.6 10.5391 15.1786 9.52172 14.4284 8.77157C13.6783 8.02143 12.6609 7.6 11.6 7.6Z" fill="#4E5969"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 753 B |
3
src/assets/icons/svg/video-recording-2.svg
Normal file
3
src/assets/icons/svg/video-recording-2.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6 2C6.30754 2 2 6.30754 2 11.6C2 16.8925 6.30754 21.2 11.6 21.2C16.8925 21.2 21.2 16.8925 21.2 11.6C21.2 6.30754 16.8925 2 11.6 2ZM11.6 3.6C16.0278 3.6 19.6 7.17225 19.6 11.6C19.6 16.0278 16.0278 19.6 11.6 19.6C7.17225 19.6 3.6 16.0278 3.6 11.6C3.6 7.17225 7.17225 3.6 11.6 3.6ZM11.6 7.6C10.5391 7.6 9.52172 8.02143 8.77157 8.77157C8.02143 9.52172 7.6 10.5391 7.6 11.6C7.6 12.6609 8.02143 13.6783 8.77157 14.4284C9.52172 15.1786 10.5391 15.6 11.6 15.6C12.6609 15.6 13.6783 15.1786 14.4284 14.4284C15.1786 13.6783 15.6 12.6609 15.6 11.6C15.6 10.5391 15.1786 9.52172 14.4284 8.77157C13.6783 8.02143 12.6609 7.6 11.6 7.6Z" fill="#F53F3F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 753 B |
3
src/assets/icons/svg/zoom-1.svg
Normal file
3
src/assets/icons/svg/zoom-1.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.33335 5.33203V0.332031H5.00002V4.9987H0.333355V6.33203H5.33477C5.89075 6.33203 6.33335 5.88061 6.33335 5.33203ZM13.6667 7.66536L8.66527 7.66536C8.10929 7.66536 7.66669 8.11679 7.66669 8.66537L7.66669 13.6654H9.00002L9.00002 8.9987L13.6667 8.9987V7.66536Z" fill="#4E5969"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 428 B |
3
src/assets/icons/svg/zoom-2.svg
Normal file
3
src/assets/icons/svg/zoom-2.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.33337 2.58203H2.66533C2.10945 2.58203 1.66671 3.03335 1.66671 3.58203V8.2487H3.00004V3.91536H7.33337V2.58203ZM14.3334 14.2487L14.3334 9.58203H13L13 13.9154H8.66671V15.2487H13.3348C13.8906 15.2487 14.3334 14.7974 14.3334 14.2487Z" fill="#4E5969"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 402 B |
127
src/assets/js/directiveVideo.js
Normal file
127
src/assets/js/directiveVideo.js
Normal file
@ -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-distLeft<boundingPadding){
|
||||
newLeft = boundingPadding+distLeft;
|
||||
}else if(newLeft-distLeft>window.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);
|
||||
}
|
||||
})
|
||||
@ -351,6 +351,9 @@ html{
|
||||
left: $left;
|
||||
}
|
||||
}
|
||||
.mr-4{
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ml-4{
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -626,7 +626,7 @@
|
||||
<div class="pl-4 f14">帮扶</div>
|
||||
</div>
|
||||
|
||||
<el-popover
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="400"
|
||||
v-model="singlejointlyvisible"
|
||||
@ -644,6 +644,8 @@
|
||||
|
||||
<caseVideoReservationDialog v-if="visiblePopover" :visible-popover.sync="visiblePopover" />
|
||||
<MediationRecordDialog v-if="visiblemediatRecord" :visiblemediatRecord.sync="visiblemediatRecord" />
|
||||
<!-- 视频房间 -->
|
||||
<VideoRoom v-if="VideoCallDialog" :eventDialog.sync="VideoCallDialog" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -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: {
|
||||
|
||||
102
src/pages/mediation-page/components/VideoRoom-copy.vue
Normal file
102
src/pages/mediation-page/components/VideoRoom-copy.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div
|
||||
:style="contentStyle"
|
||||
class="content"
|
||||
@mousedown="startDrag"
|
||||
@mouseup="stopDrag"
|
||||
@mouseleave="stopDrag">
|
||||
<div class="drag-div" @mousedown.stop="startDrag"></div>
|
||||
<div>Other content</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
position: { x: 0, y: 0 },
|
||||
dragging: false,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
mouseMoveHandler: null,
|
||||
mouseUpHandler: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
contentStyle() {
|
||||
return {
|
||||
left: `${this.position.x}px`,
|
||||
top: `${this.position.y}px`,
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startDrag(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!event.target.closest('.drag-div')) return;
|
||||
|
||||
this.dragging = true;
|
||||
this.offsetX = event.clientX - this.position.x;
|
||||
this.offsetY = event.clientY - this.position.y;
|
||||
|
||||
this.removeEventListeners();
|
||||
|
||||
this.mouseMoveHandler = this.onMouseMove.bind(this);
|
||||
this.mouseUpHandler = this.stopDrag.bind(this);
|
||||
|
||||
document.addEventListener('mousemove', this.mouseMoveHandler, true);
|
||||
document.addEventListener('mouseup', this.mouseUpHandler, true);
|
||||
},
|
||||
onMouseMove(event) {
|
||||
if (this.dragging) {
|
||||
requestAnimationFrame(() => {
|
||||
this.updatePosition(event.clientX, event.clientY);
|
||||
});
|
||||
}
|
||||
},
|
||||
updatePosition(clientX, clientY) {
|
||||
this.position.x = clientX - this.offsetX;
|
||||
this.position.y = clientY - this.offsetY;
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
stopDrag() {
|
||||
this.dragging = false;
|
||||
this.removeEventListeners();
|
||||
},
|
||||
removeEventListeners() {
|
||||
if (this.mouseMoveHandler) {
|
||||
document.removeEventListener('mousemove', this.mouseMoveHandler, true);
|
||||
}
|
||||
if (this.mouseUpHandler) {
|
||||
document.removeEventListener('mouseup', this.mouseUpHandler, true);
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.removeEventListeners();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.drag-div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #f00;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
cursor: grab;
|
||||
}
|
||||
</style>
|
||||
@ -1,102 +1,284 @@
|
||||
<template>
|
||||
<div
|
||||
:style="contentStyle"
|
||||
class="content"
|
||||
@mousedown="startDrag"
|
||||
@mouseup="stopDrag"
|
||||
@mouseleave="stopDrag">
|
||||
<div class="drag-div" @mousedown.stop="startDrag"></div>
|
||||
<div>Other content</div>
|
||||
<!-- <div class="video-dialog-wrapper">-->
|
||||
|
||||
<!-- </div>-->
|
||||
<div ref="videoRoom" class="room-content border-radius-8" v-vdrag :class="zoomActive ? `room-content-big` : 'room-content-small'">
|
||||
<div class="room-top flex-row justify-content-between align-items-center">
|
||||
<div class="f16 f-weight600">调解视频画面</div>
|
||||
<div class="room-top-btn background-color-fff flex-row align-items-center border-radius-4 cursor-pointer"
|
||||
@click="toggleZoom">
|
||||
<span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
|
||||
<svg-icon
|
||||
:icon-class="zoomActive ? `zoom-1` : 'zoom-2'"
|
||||
className="tabs-svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-middle">
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="video-col position-r" :class="personnelNumber.length <= 4 ? 'w-50' : 'w-33'">
|
||||
<div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
|
||||
<div class="video-col-btn" v-if="zoomActive">
|
||||
<div class="cursor-pointer"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
|
||||
<div class="cursor-pointer"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
|
||||
</div>
|
||||
<div class="video-col-name text-center color-fff f12">申请人 XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="zoomActive" class="room-bottom border-radius-8 background-color-fff flex-row justify-content-between align-items-center">
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<svg-icon icon-class="video-recording-1" className="tabs-svg" />
|
||||
<div class="pl-4 f14">录制</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<svg-icon icon-class="Invite-room" className="tabs-svg" />
|
||||
<div class="pl-4 f14">邀请</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<i class="f24 el-icon-microphone color-4E5969"></i>
|
||||
<div class="pl-4 f14">关闭语音</div>
|
||||
</div>
|
||||
<div class="flex-row align-items-center cursor-pointer">
|
||||
<svg-icon icon-class="mute-all" className="tabs-svg" />
|
||||
<div class="pl-4 f14">全部静音</div>
|
||||
</div>
|
||||
<div class="room-bottom-btn-finish border-radius-4 f14 color-fff" @click="handleClose">
|
||||
结束录制
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
eventDialog: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
position: { x: 0, y: 0 },
|
||||
dragging: false,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
mouseMoveHandler: null,
|
||||
mouseUpHandler: null
|
||||
zoomActive: true,// true 放大状态、false 缩小状态
|
||||
personnelNumber: [1,2,3,4,5]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
contentStyle() {
|
||||
return {
|
||||
left: `${this.position.x}px`,
|
||||
top: `${this.position.y}px`,
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
startDrag(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!event.target.closest('.drag-div')) return;
|
||||
|
||||
this.dragging = true;
|
||||
this.offsetX = event.clientX - this.position.x;
|
||||
this.offsetY = event.clientY - this.position.y;
|
||||
|
||||
this.removeEventListeners();
|
||||
|
||||
this.mouseMoveHandler = this.onMouseMove.bind(this);
|
||||
this.mouseUpHandler = this.stopDrag.bind(this);
|
||||
|
||||
document.addEventListener('mousemove', this.mouseMoveHandler, true);
|
||||
document.addEventListener('mouseup', this.mouseUpHandler, true);
|
||||
handleClose() {
|
||||
this.$emit('update:eventDialog', null)
|
||||
},
|
||||
onMouseMove(event) {
|
||||
if (this.dragging) {
|
||||
requestAnimationFrame(() => {
|
||||
this.updatePosition(event.clientX, event.clientY);
|
||||
});
|
||||
}
|
||||
},
|
||||
updatePosition(clientX, clientY) {
|
||||
this.position.x = clientX - this.offsetX;
|
||||
this.position.y = clientY - this.offsetY;
|
||||
toggleZoom() {
|
||||
this.zoomActive = !this.zoomActive;
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
stopDrag() {
|
||||
this.dragging = false;
|
||||
this.removeEventListeners();
|
||||
},
|
||||
removeEventListeners() {
|
||||
if (this.mouseMoveHandler) {
|
||||
document.removeEventListener('mousemove', this.mouseMoveHandler, true);
|
||||
}
|
||||
if (this.mouseUpHandler) {
|
||||
document.removeEventListener('mouseup', this.mouseUpHandler, true);
|
||||
}
|
||||
const zoomedStyles = {
|
||||
left: '269px',
|
||||
top: '330px'
|
||||
};
|
||||
const defaultStyles = {
|
||||
left: '157px',
|
||||
// 一排 71 两排 106.5 141
|
||||
top: '35.5'
|
||||
};
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.videoRoom) {
|
||||
this.$refs.videoRoom.style.left = this.zoomActive ? zoomedStyles.left : defaultStyles.left;
|
||||
// this.$refs.videoRoom.style.left = '100px';
|
||||
this.$refs.videoRoom.style.top = this.zoomActive ? zoomedStyles.top : defaultStyles.top;
|
||||
// this.$refs.videoRoom.style.top = '100px';
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.removeEventListeners();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
<style scoped lang="scss">
|
||||
.video-dialog-wrapper{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.room-content{
|
||||
background: linear-gradient(180deg, #F8E8FF 0%, #E7EAFE 100%);
|
||||
border: 2px solid #FFFFFF;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
margin: 0 !important;
|
||||
transform: translate(-50%, -50%);
|
||||
.room-top{
|
||||
.room-top-btn{
|
||||
padding: 6px 10px;
|
||||
.tabs-svg{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.room-middle{
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 当子元素总宽度超过父容器时，子元素会自动换到下一行 */
|
||||
|
||||
.drag-div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #f00;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
cursor: grab;
|
||||
}
|
||||
.video-col{
|
||||
aspect-ratio: 1 / 1; /* 宽度与高度的比例为1:1 */
|
||||
//flex: 0 0 auto; /* 禁用子元素的伸缩性 */
|
||||
.video-col-Graphics{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.video-col-btn{
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 10px;
|
||||
.tabs-svg{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.video-col-name{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 21px;
|
||||
background-color: #00000059;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.room-bottom{
|
||||
position: absolute;
|
||||
left: 24px;
|
||||
bottom: 24px;
|
||||
padding: 8px 16px;
|
||||
width: calc(100% - 45px);
|
||||
.tabs-svg{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.room-bottom-btn-finish{
|
||||
background-color: #F53F3F;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-content-big{
|
||||
padding: 24px;
|
||||
width: 536px;
|
||||
height: 658px;
|
||||
//left: calc(50% - 268px);
|
||||
//bottom: 86px;
|
||||
|
||||
.room-middle{
|
||||
padding: 16px 0;
|
||||
width: 488px;
|
||||
//height: 488px;
|
||||
gap: 8px; /* 子元素之间的间隔 */
|
||||
.w-100{
|
||||
width: calc(100%);
|
||||
//height: calc(100%);
|
||||
}
|
||||
.w-50{
|
||||
width: calc(50% - 4px);
|
||||
//height: calc(50% - 4px);
|
||||
}
|
||||
.w-33{
|
||||
width: calc(33% - 5px);
|
||||
//height: calc(33% - 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-content-small{
|
||||
padding: 12px 16px;
|
||||
//width: 300px;
|
||||
min-height: 140px;
|
||||
//top: 0;
|
||||
//left: 0;
|
||||
.room-middle{
|
||||
padding: 8px 0;
|
||||
width: 272px;
|
||||
gap: 4px; /* 子元素之间的间隔 */
|
||||
.video-col{
|
||||
width: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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
|
||||
// }
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user