This commit is contained in:
2026-01-27 17:22:12 +08:00
parent 390ef86532
commit 9e09db7f49
3 changed files with 173 additions and 74 deletions

View File

@ -1,12 +1,19 @@
<template>
<DraggableResizableVue v-if="props.modelValue"
<div class="mimiBox flex" @click="handleWindowSize" v-show="isMinimized" >
<div class="item mr5 one"></div>
<div class="item mr5 two"></div>
<div class="item mr5 three"></div>
<div class="item mr5 four"></div>
<div class="item mr5 five"></div>
</div>
<DraggableResizableVue v-show="!isMinimized"
v-model:x="element.x"
v-model:y="element.y"
v-model:h="element.height"
v-model:w="element.width"
v-model:active="element.isActive"
:draggable="true"
:resizable="true"
:resizable="!isMinimized"
:handles="['tl','tr','bl','br']"
handles-type="handles"
:active-on-hover="false"
@ -19,17 +26,17 @@
<div class="conference-header">
<div class="header-top">
<div class="title-section" v-show="displaySubject">
<h3 v-if="!editSubject" @click="editSubject = true" class="conference-title">
{{ displaySubject }}
</h3>
<h3 v-if="!editSubject" @click="editSubject = true" class="conference-title">{{ displaySubject }} </h3>
<el-input v-else v-model="subject" autofocus allow-clear @blur="updateSubject" class="title-input"/>
<div class="meeting-id-tag" @click="copyMeetingNumber" v-if="activeMeetingConfig?.meeting?.number">
<span class="id-label">会议号:</span>
<span class="id-value">{{ activeMeetingConfig?.meeting?.number }}</span>
<el-icon class="copy-icon"><CopyDocument /></el-icon>
</div>
</div>
<div style="color: #999999;padding-right: 30px;">
<el-icon size="18px" @click="handleWindowSize"><Minus /></el-icon>
</div>
</div>
<div class="participants-info">
<el-icon><User /></el-icon>
@ -75,17 +82,22 @@
<div class="control-bar">
<!-- 锁定 -->
<div class="flex dir-column align-center">
<el-button circle @click="lockConference" class="control-btn">
<el-icon size="20px" v-if="activeMeetingConfig?.lockStatus == 1"><Lock/></el-icon>
<el-icon size="20px" v-else ><Unlock/></el-icon>
<el-icon size="24px" v-if="activeMeetingConfig?.lockStatus == 1"><Lock/></el-icon>
<el-icon size="24px" v-else ><Unlock/></el-icon>
</el-button>
<div>{{ activeMeetingConfig?.lockStatus == 1 ? '已锁定' : '未锁定' }}</div>
</div>
<!-- 麦克风 -->
<div class="flex dir-column align-center">
<el-button circle @click="setMuteMic" class="control-btn">
<img v-if="isMicEnable" src="@/assets/images/webPuc/svgs/microphone.svg" alt="">
<img v-else src="@/assets/images/webPuc/svgs/microphone_mute.svg" alt="">
</el-button>
<div>麦克风</div>
</div>
<el-popover title="选择麦克风" trigger="click" position="bottom-end">
<template #reference>
<el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
@ -94,10 +106,14 @@
</el-popover>
<!-- 扬声器 -->
<div class="flex dir-column align-center">
<el-button circle @click="setMuteEar" class="control-btn">
<img v-if="audioOuputStatus == 1" src="@/assets/images/webPuc/svgs/earpiece.svg" alt="">
<img v-else src="@/assets/images/webPuc/svgs/trumpet_mute.svg" alt="">
</el-button>
<div>扬声器</div>
</div>
<el-popover title="选择扬声器" trigger="click" position="bottom-end">
<template #reference>
<el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
@ -106,10 +122,13 @@
</el-popover>
<!-- 摄像头 -->
<div class="flex dir-column align-center">
<el-button circle @click="setCamera" class="control-btn">
<img v-if="userInfo?.camera_status === CAMERA_STATUS_OPEN" src="@/assets/images/webPuc/svgs/camera.svg" alt="">
<img v-else src="@/assets/images/webPuc/svgs/camera_mute.svg" alt="">
</el-button>
<div>摄像头</div>
</div>
<el-popover title="选择摄像头" trigger="click" position="bottom-end">
<template #reference>
<el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
@ -118,64 +137,72 @@
</el-popover>
<!-- 屏幕共享 -->
<div class="flex dir-column align-center">
<el-button circle @click="setShareScreenStatus(1)" class="control-btn">
<img src="@/assets/images/webPuc/svgs/share_video.svg" alt="">
</el-button>
<div>屏幕共享</div>
</div>
<!-- 结束共享 / 结束会议 (Center) -->
<el-button v-if="activeMeetingConfig?.sharingMember?.basedata_id === userInfo?.basedata_id"
type="danger"
shape="round"
status="danger"
class="hangup-btn"
@click="setShareScreenStatus(0)">
结束共享
</el-button>
<template v-else>
<el-button v-if="activeMeetingConfig?.sharingMember?.basedata_id === userInfo?.basedata_id" type="danger" shape="round" status="danger" class="hangup-btn" @click="setShareScreenStatus(0)">结束共享</el-button>
<!-- 结束会议 v-if="globalStore.IS_CURRENT_MEETING_OWNER"-->
<el-button
type="danger"
shape="round"
class="hangup-btn"
@click="endConference">
结束会议
</el-button>
</template>
<el-button v-else type="danger" shape="round" class="hangup-btn" @click="endConference">结束会议</el-button>
<!-- 成员管理 -->
<div class="flex dir-column align-center">
<el-button circle @click="showMembers" class="control-btn">
<el-icon color="#fff" size="20"><Auatar/></el-icon>
<el-icon color="#fff" size="24px"><Grid /></el-icon>
</el-button>
<div>成员管理</div>
</div>
<!-- 语音激励 -->
<div class="flex dir-column align-center">
<el-button circle @click="setVoiceStimulation()" class="control-btn">
<img v-if="activeMeetingConfig?.voiceStimulation" src="@/assets/images/webPuc/svgs/icon_embrave.svg" alt="">
<img v-else src="@/assets/images/webPuc/svgs/conference_icom_cancel_voice_stimulation.svg" alt="">
</el-button>
<div>语音激励</div>
</div>
<!-- 布局 -->
<!-- <LaoutType @setConfernceLayoutType="setConfernceLayoutType" /> -->
<!-- 画面抓取-截图 -->
<div class="flex dir-column align-center">
<el-button circle @click="startScreenshot" class="control-btn">
<el-icon color="#fff" size="20"><Scissor/></el-icon>
<el-icon color="#fff" size="24px"><Scissor/></el-icon>
</el-button>
<div>截图</div>
</div>
<!-- 视频广播 -->
<div class="flex dir-column align-center">
<el-button circle @click="broadcastAction" class="control-btn">
<img src="@/assets/images/webPuc/svgs/icon_broadcast.svg" alt="">
</el-button>
<div>视频广播</div>
</div>
<!-- 录屏 -->
<div class="flex dir-column align-center">
<el-button circle @click="!isRecording ? mediaRecorder.start() : mediaRecorder.stop()" class="control-btn">
<el-icon v-if="!isRecording"><Camera/></el-icon>
<el-icon v-else style="color: red"><Videopause/></el-icon>
<el-icon size="24px" v-if="!isRecording"><Camera/></el-icon>
<el-icon size="24px" v-else style="color: red"><Videopause/></el-icon>
</el-button>
<div>{{ isRecording ? '录屏':'停止' }}</div>
</div>
<div class="flex dir-column align-center">
<el-button circle @click="toggleFullscreen" class="control-btn">
<el-icon v-if="!isFullscreen"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M384 192H192a64 64 0 00-64 64v192a32 32 0 1064 0V288h192a32 32 0 000-64zm384 64H576a32 32 0 100 64h192v160a32 32 0 1064 0V256a64 64 0 00-64-64zM352 768H192V608a32 32 0 10-64 0v192a64 64 0 0064 64h160a32 32 0 100-64zm544-160a32 32 0 00-32 32v128H704a32 32 0 100 64h160a64 64 0 0064-64V640a32 32 0 00-32-32z"/></svg></el-icon>
<el-icon v-else><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M352 288a32 32 0 010-64h160a32 32 0 0132 32v160a32 32 0 11-64 0V320H352zm320 448a32 32 0 010 64H512a32 32 0 01-32-32V608a32 32 0 1164 0v128h128zM256 672a32 32 0 00-32-32H96a32 32 0 00-32 32v128a32 32 0 1064 0v-96h64a32 32 0 0032-32zm640-384a32 32 0 00-32 32v96h-64a32 32 0 100 64h128a32 32 0 0032-32V288a32 32 0 00-32-32z"/></svg></el-icon>
<el-icon size="24px" v-if="!isFullscreen"><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M384 192H192a64 64 0 00-64 64v192a32 32 0 1064 0V288h192a32 32 0 000-64zm384 64H576a32 32 0 100 64h192v160a32 32 0 1064 0V256a64 64 0 00-64-64zM352 768H192V608a32 32 0 10-64 0v192a64 64 0 0064 64h160a32 32 0 100-64zm544-160a32 32 0 00-32 32v128H704a32 32 0 100 64h160a64 64 0 0064-64V640a32 32 0 00-32-32z"/></svg></el-icon>
<el-icon size="24px" v-else ><svg class="icon" width="200" height="200" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M352 288a32 32 0 010-64h160a32 32 0 0132 32v160a32 32 0 11-64 0V320H352zm320 448a32 32 0 010 64H512a32 32 0 01-32-32V608a32 32 0 1164 0v128h128zM256 672a32 32 0 00-32-32H96a32 32 0 00-32 32v128a32 32 0 1064 0v-96h64a32 32 0 0032-32zm640-384a32 32 0 00-32 32v96h-64a32 32 0 100 64h128a32 32 0 0032-32V288a32 32 0 00-32-32z"/></svg></el-icon>
</el-button>
<div>{{ !isFullscreen ? '全屏':'退出' }}</div>
</div>
</div>
</div>
@ -773,6 +800,18 @@ const setAudio = (stream) => {
}
};
const isMinimized = ref(false);
const lastHeight = ref(0);
// 最小化
function handleWindowSize() {
isMinimized.value = !isMinimized.value;
if (isMinimized.value) {
lastHeight.value = element.value.height;
element.value.height = 70;
} else {
element.value.height = lastHeight.value;
}
}
onMounted(()=>{
console.log(globalStore,'=====0000000000000');
@ -795,6 +834,7 @@ onMounted(()=>{
});
onUnmounted(() => {
emitter.off('onMediaStream');
emitter.off('onHangup');
@ -804,7 +844,67 @@ onUnmounted(() => {
</script>
<style scoped>
<style scoped lang="scss">
.mimiBox {
position: absolute;
top: 10px;
right: 20px;
display: flex;
align-items: flex-end;
padding: 6px 8px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.mimiBox .item {
width: 3px;
height: 14px;
margin-right: 3px;
background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
border-radius: 999px;
animation: sound-wave 1s ease-in-out infinite;
transform-origin: bottom;
}
.mimiBox .item:last-child {
margin-right: 0;
}
.mimiBox .item:nth-child(1) {
animation-delay: 0s;
}
.mimiBox .item:nth-child(2) {
animation-delay: 0.15s;
}
.mimiBox .item:nth-child(3) {
animation-delay: 0.3s;
}
.mimiBox .item:nth-child(4) {
animation-delay: 0.45s;
}
.mimiBox .item:nth-child(5) {
animation-delay: 0.6s;
}
@keyframes sound-wave {
0%,
100% {
transform: scaleY(0.4);
opacity: 0.7;
}
50% {
transform: scaleY(1.4);
opacity: 1;
}
}
.container {
position: absolute;
display: flex;

View File

@ -3,9 +3,9 @@
<!-- 无人机拖动视频 -->
<DraggerAble v-if="showVideo" v-model="showVideo" ref="RefEqripment"></DraggerAble>
<!-- 新增音视频会议 -->
<AudioAndVoice v-if="showDailog" v-model="showDailog"></AudioAndVoice>
<AudioAndVoice v-model="showDailog" v-if="showDailog"></AudioAndVoice>
<!-- 音视频会议窗口 -->
<MeetingView v-if="openMeeting" v-model="openMeeting"></MeetingView>
<MeetingView v-model="openMeeting" v-if="openMeeting" ></MeetingView>
</template>
<script setup>
@ -25,7 +25,7 @@ const sdkBDModule = useBaseDataModule();
const baseInfo = localStorage.getItem('rhInfo') ? JSON.parse(localStorage.getItem('rhInfo')) : {};
const showVideo = ref(false)//拖动视频
const showDailog = ref(false)//showDailog
const openMeeting = ref(false) //打开会议
const openMeeting = ref(true) //打开会议
const jsonData = ref('');
const loginStatusCallbackId = ref() //token监听状态
const RefEqripment = ref()

View File

@ -26,8 +26,7 @@
</div>
<div class="mid">
<div class="left">
<!-- <div class="title ellipsis">参会人员{{ item.chry }}</div> -->
<div class="desc noScollLine">
<div class="desc">
<div class="info ellipsis" v-for="(el, i) in item.xsplList" :key="i">{{ i + 1 }}{{ el.plnr }}</div>
</div>
</div>
@ -164,9 +163,9 @@ const jsonData = ref('')
const currRow = ref({})
onMounted(() => {
jsonData.value = require('@/components/Consultation/components/zh_CN.json');
getList();
tabHeightFn();
// jsonData.value = require('@/components/Consultation/components/zh_CN.json');
// getList();
// tabHeightFn();
});
const updateItem = (item) => {