更新

src/components/Consultation/components/meetingView.vue

@@ -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">
+             <h3 v-if="!editSubject" @click="editSubject = true" class="conference-title">{{ displaySubject }} </h3>
-                {{ 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="24px" v-if="activeMeetingConfig?.lockStatus == 1"><Lock/></el-icon>
-                <el-icon size="20px" v-else ><Unlock/></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"
+            <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>
-              type="danger"
-              shape="round"
-              status="danger"
-              class="hangup-btn"
-              @click="setShareScreenStatus(0)">
-              结束共享
-            </el-button>
-
-            <template v-else>
             <!-- 结束会议 v-if="globalStore.IS_CURRENT_MEETING_OWNER"-->
-              <el-button
+            <el-button v-else type="danger" shape="round" class="hangup-btn" @click="endConference">结束会议</el-button>
-                type="danger"
-                shape="round"
-                class="hangup-btn"
-                @click="endConference">
-                结束会议
-              </el-button>
-            </template>
 
             <!-- 成员管理 -->
+              <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 size="24px" v-if="!isRecording"><Camera/></el-icon>
-                <el-icon v-else style="color: red"><Videopause/></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  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 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-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;

src/components/Consultation/demo.vue

@@ -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()

src/views/backOfficeSystem/JudgmentHome/MeetingRoom/index.vue

@@ -26,8 +26,7 @@
         </div>
         <div class="mid">
           <div class="left">
-            <!-- <div class="title ellipsis">参会人员：{{ item.chry }}</div> -->
+            <div class="desc">
-            <div class="desc noScollLine">
               <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');
+  // jsonData.value = require('@/components/Consultation/components/zh_CN.json');
-  getList();
+  // getList();
-  tabHeightFn();
+  // tabHeightFn();
 });
 
 const updateItem = (item) => {