zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
Esacpe
2025-12-22 16:04:33 +08:00
parent c18dde1b43
commit ab9249479c
2 changed files with 384 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

420
src/components/Consultation/components/meetingView.vue
View File

@ -5,23 +5,45 @@
v-model:h="element.height"
v-model:w="element.width"
v-model:active="element.isActive"
:draggable="true"
:resizable="true"
:handles="['tl','tr','bl','br']"
handles-type="handles"
:active-on-hover="false"
:prevent-deactivation="true"
class-name-handle="drs-handle"
class="container"
>
<div ref="mainContentRef" class="conference-box">
<!-- 会议主题 -->
<div v-show="displaySubject" class="subject">
<h3 v-if="!editSubject" @click="editSubject = true">
{{ displaySubject }} ({{ activeMeetingConfig?.meeting.number }})
<!-- Header Area -->
<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>
<el-input v-else v-model="subject" autofocus allow-clear @blur="updateSubject"/>
<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>
<div class="participants-info">
<el-icon><User /></el-icon>
<span class="count-text">参会人员 {{ activeMeetingConfig?.members?.length || 0 }}</span>
</div>
</div>
<!-- Video Content Area -->
<div class="video-content-area">
<div class="top-box">
<!-- 当前正在讲话 -->
<el-row justify="space-around">
<el-tag v-for="name in speakingMemberNames" :key="name" bordered color="green" >{{ name }}</el-tag>
</el-row>
<!-- 共享者 -->
<el-tag v-if="activeMeetingConfig?.sharingMember" bordered color="orange">
{{ activeMeetingConfig?.sharingMember?.alias}}正在共享屏幕
@ -34,7 +56,7 @@
<!-- 广播相关（此处借用 video 标签获取对应的流） -->
<video id="conference_localvideo" ref="localVideoRef" autoplay playsinline :hidden="!showlocalVideo" class="video" />
<img v-if="isMicEnable" v-show="activeMeetingConfig?.broadcast" @click="stopBroadcast" src="@/assets/images/webPuc/svgs/img_broadcast.svg" alt="">
<img v-if="isMicEnable" v-show="activeMeetingConfig?.broadcast" @click="stopBroadcast" src="@/assets/images/webPuc/svgs/img_broadcast.svg" alt="" class="img_broadcast">
<el-upload
v-show="false"
:show-file-list="false"
@ -49,94 +71,63 @@
/>
<video id="conference_pushVideo" ref="pushVideoRef" autoplay playsinline :hidden="!showPushlVideo" class="video"/>
<audio ref="fileAudioRef" autoplay :hidden="true" />
<el-row class="buttonContainer" justify="space-around">
<div class="control-bar">
<!-- 锁定 -->
<el-button circle @click="lockConference">
<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-button>
<!-- 麦克风 -->
<el-button circle @click="setMuteMic">
<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>
<el-popover title="选择麦克风" trigger="click" position="bottom-end">
<template #reference>
<el-icon style="align-self: flex-end" color="#000"><ArrowDown/></el-icon>
<el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
</template>
<MicPop @changeDevice="changeDevice" />
</el-popover>
<!-- 扬声器 -->
<el-button circle @click="setMuteEar">
<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>
<el-popover title="选择扬声器" trigger="click" position="bottom-end">
<template #reference>
<el-icon style="align-self: flex-end" color="#000"><ArrowDown/></el-icon>
<el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
</template>
<!-- <AudioPop @changeDevice="changeDevice" /> -->
</el-popover>
<!-- 摄像头 -->
<el-button circle @click="setCamera">
<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>
<el-popover title="选择摄像头" trigger="click" position="bottom-end">
<template #reference>
<el-icon style="align-self: flex-end" color="#000"><ArrowDown/></el-icon>
<el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
</template>
<!-- <CameraPop @changeDevice="changeDevice" /> -->
</el-popover>
<!-- 屏幕共享 -->
<el-button circle @click="setShareScreenStatus(1)">
<el-button circle @click="setShareScreenStatus(1)" class="control-btn">
<img src="@/assets/images/webPuc/svgs/share_video.svg" alt="">
</el-button>
<!-- 成员管理 -->
<el-button circle @click="showMembers">
<el-icon color="#84888E" size="20"><Auatar/></el-icon>
</el-button>
<!-- 语音激励 -->
<el-button circle @click="setVoiceStimulation()">
<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>
<!-- 布局 -->
<!-- <LaoutType @setConfernceLayoutType="setConfernceLayoutType" /> -->
<!-- 画面抓取-截图 -->
<el-button circle @click="startScreenshot">
<el-icon color="#84888E" size="20"><Scissor/></el-icon>
</el-button>
<!-- 视频广播 -->
<el-button circle @click="broadcastAction">
<img src="@/assets/images/webPuc/svgs/icon_broadcast.svg" alt="">
</el-button>
<!-- 录屏 -->
<el-button circle @click="!isRecording ? mediaRecorder.start() : mediaRecorder.stop()">
<el-icon v-if="!isRecording"><Camera/></el-icon>
<el-icon v-else style="color: red"><Videopause/></el-icon>
</el-button>
<!-- 结束共享 -->
<!-- 结束共享 / 结束会议 (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>
@ -146,23 +137,48 @@
<el-button
type="danger"
shape="round"
class="hangup-btn"
@click="endConference">
结束会议
</el-button>
<!-- 退出会议 -->
<!-- <el-button
v-else
type="danger"
shape="round"
@click="hangupCall"
>退出会议</el-button
> -->
</template>
</el-row>
<!-- 成员管理 -->
<el-button circle @click="showMembers" class="control-btn">
<el-icon color="#fff" size="20"><Auatar/></el-icon>
</el-button>
<!-- 语音激励 -->
<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>
<!-- 布局 -->
<!-- <LaoutType @setConfernceLayoutType="setConfernceLayoutType" /> -->
<!-- 画面抓取-截图 -->
<el-button circle @click="startScreenshot" class="control-btn">
<el-icon color="#fff" size="20"><Scissor/></el-icon>
</el-button>
<!-- 视频广播 -->
<el-button circle @click="broadcastAction" class="control-btn">
<img src="@/assets/images/webPuc/svgs/icon_broadcast.svg" alt="">
</el-button>
<!-- 录屏 -->
<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-button>
</div>
</div>
<!-- 关闭按钮 -->
<el-button class="close" type="primary" icon="Close" circle @click="close"></el-button>
<el-button class="close-card-btn" type="text" circle @click="close">
<el-icon size="20"><Close /></el-icon>
</el-button>
</div>
<!-- 成员管理面板 暂时未改-->
@ -189,9 +205,9 @@ const store = useStore();
const element = ref({
x: 500,
y: -600,
width: 500,
width: 960,
height: 500,
isActive: false,
isActive: true,
});
const globalStore = store.state.useGlobalStore;
// 音视频会议-会控管理模块
@ -241,9 +257,10 @@ const speakers = ref([]);
const selfGranted = ref(false);
const displaySubject = computed(() => {
const text = globalStore.activeMeetingConfig?.subject || '';
subject.value = text;
return text;
const text = globalStore.activeMeetingConfig?.subject;
const defaultText = text && String(text).trim() ? text : '会议的标题';
subject.value = defaultText;
return defaultText;
});
// 0=关闭，1=打开，2=无扬声器
@ -725,6 +742,17 @@ const setAudio = (stream) => {
}
};
const copyMeetingNumber = () => {
const number = activeMeetingConfig.value?.meeting?.number;
if (number) {
navigator.clipboard.writeText(number).then(() => {
ElMessage.success('会议号已复制');
}).catch(() => {
ElMessage.error('复制失败');
});
}
};
onMounted(()=>{
console.log(globalStore,'=====0000000000000');
@ -759,85 +787,223 @@ onUnmounted(() => {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
margin: 2px;
background: rgb(28,32,41);
border: 2px dashed #e8e8e8;
border-radius: 16px;
background: #fff;
border: none;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
cursor: default;
overflow: visible;
}
.conference-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
/* Header Styles */
.conference-header {
padding: 16px 20px 10px;
background: #fff;
border-bottom: 1px solid #f0f0f0;
flex-shrink: 0;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 2px solid #c0c4cc;
}
.title-section {
display: flex;
align-items: center;
gap: 12px;
}
.conference-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #333;
cursor: pointer;
}
.title-input {
width: 200px;
}
.meeting-id-tag {
display: flex;
align-items: center;
background: #e6f7ff;
color: #1890ff;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.meeting-id-tag:hover {
background: #bae7ff;
}
.id-label {
margin-right: 4px;
}
.copy-icon {
margin-left: 4px;
}
.participants-info {
display: flex;
align-items: center;
color: #666;
font-size: 13px;
gap: 6px;
}
/* Video Area Styles */
.video-content-area {
flex: 1;
position: relative;
background: #000;
margin: 10px;
border-radius: 12px;
overflow: hidden;
}
.video {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: scale-down;
}
.buttonContainer {
position: absolute;
bottom: 0;
width: 96%;
margin: 8px;
padding: 5px 3px;
background: #fff;
border-radius: 3px;
}
.speaks {
align-items: center;
}
.wave {
top: 0;
width: 100%;
height: 100px;
}
.close {
position: absolute;
top: 0;
right: 0;
margin: 5px;
}
.subject {
position: absolute;
top: -53px;
padding: 0 5px;
color: #ffff;
background: #1c2029;
border-radius: 5px;
}
.subject .arco-input-wrapper {
margin: 8px 0;
}
.icon_broadcast {
fill: #fff;
}
.img_broadcast {
position: absolute;
right: 20px;
bottom: 60px;
pointer-events: none;
}
/* Top Box (Tags) */
.top-box {
position: absolute;
top: 10px;
left: 0;
right: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.top-box .arco-tag {
margin: 5px;
.top-box .el-tag {
margin: 4px;
pointer-events: auto;
}
/* Control Bar Styles */
.control-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(10px);
border-radius: 40px;
padding: 8px 24px;
display: flex;
align-items: center;
gap: 16px;
z-index: 20;
white-space: nowrap;
}
.control-btn {
background: transparent !important;
border: none !important;
color: #fff !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 50%;
}
.control-btn img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1); /* Make black icons white */
}
.control-arrow {
margin-left: -12px;
margin-top: 10px;
cursor: pointer;
}
.hangup-btn {
background-color: #f56c6c !important;
border-color: #f56c6c !important;
color: #fff !important;
height: 36px;
padding: 0 20px;
}
.hangup-btn:hover {
background-color: #f78989 !important;
border-color: #f78989 !important;
}
/* Close Card Button */
.close-card-btn {
position: absolute;
top: 10px;
right: 10px;
color: #999;
z-index: 100;
}
.close-card-btn:hover {
color: #666;
background: transparent;
}
/* Misc */
.img_broadcast {
position: absolute;
right: 20px;
bottom: 80px; /* Adjusted to be above control bar */
width: 40px;
height: 40px;
}
::v-deep .el-button.is-circle {
width: 32px;
height: 32px;
/* Reset element plus styles if needed */
}
::v-deep .drs-handle {
width: 10px;
height: 10px;
background: #1890ff;
border: 2px solid #fff;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
z-index: 1000;
pointer-events: auto;
}
</style>

2
src/components/Consultation/demo.vue
View File

@ -216,7 +216,7 @@ const getLoginAccountInfo =() =>{
const openInit = (it,type) =>{
modleType.value = type;
if(type == '会议'){
// 判断是否有会议号
判断是否有会议号
let into = it.number ? '确定开始会议?' : '没有找到会议，是否创建会议?'
ElMessageBox.confirm(into,'提示',{
confirmButtonText:'确定',