mdm-client 1.0.3 → 1.0.4

package/src/components/other/leadershipFocus.vue

@@ -0,0 +1,422 @@
+<template>
+  <div
+    class="leadership"
+    id="leadership"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="leadership-container">
+      <!-- 视频元素 -->
+      <video
+        class="p-video"
+        id="video-leadership"
+        autoplay
+        webkit-playsinline
+        playsinline
+        x5-video-player-type="h5"
+        ref="videoRef"
+      ></video>
+      <!-- 屏幕共享提示 -->
+      <div
+        v-if="participant.isScreenShareEnabled"
+        id="screenshare-leadership"
+        class="screen-share-suspension"
+      >
+        {{ participant.name }} 正在共享屏幕
+      </div>
+      <!-- 摄像头关闭时的头像展板 -->
+      <div
+        v-if="!participant.isCameraEnabled && !participant.isScreenShareEnabled"
+        id="board-leadership"
+        class="board"
+      >
+        <div class="board-icon"></div>
+      </div>
+      <!-- 网络状态图标 -->
+      <div
+        v-if="!participant.isScreenShareEnabled"
+        id="signal-leadership"
+        :class="['signal-icon', getSignalClass]"
+        :style="{ visibility: isHovered ? 'visible' : 'hidden' }"
+      />
+      <!-- 更多操作按钮 -->
+      <div
+        v-if="!participant.isScreenShareEnabled && showMoreButton"
+        id="more-leadership"
+        class="more-icon"
+        :style="{ visibility: isHovered ? 'visible' : 'hidden' }"
+        @click="handleMoreClick"
+      />
+      <!-- 旋转按钮（仅平台ID为4显示） -->
+      <div
+        v-if="showRotateButton"
+        id="rotate-leadership"
+        class="rotate-icon rotate-icon1"
+        :style="{ visibility: isHovered ? 'visible' : 'hidden' }"
+        @click="handleRotateClick"
+      />
+      <!-- 底部信息栏 -->
+      <div class="describe">
+        <div
+          id="microphone-leadership"
+          :class="getMicrophoneClass"
+          @click="handleMicrophoneClick"
+        />
+        <div class="identity">
+          {{ participant.isLocal ? participant.name + "(我)" : participant.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'LeadershipFocus',
+    props: {
+      participant: {
+        type: Object,
+        required: true,
+      },
+      localMetadata: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    data() {
+      return {
+        isHovered: false,
+        currentRotateDeg: 0,
+      };
+    },
+    injected: ['rotateDegreeMap'],
+    // Vue2 风格的侦听器：监听 videoTrack 的变化并绑定/解绑到 video 元素
+    watch: {
+      'participant.videoTrack': {
+        handler(newTrack, oldTrack) {
+          // 等待 DOM 更新，确保 $refs 可用
+          this.$nextTick(() => {
+            const videoElm = this.$refs.videoRef
+            try {
+              if (oldTrack && videoElm && typeof oldTrack.detach === 'function') {
+                oldTrack.detach(videoElm)
+              }
+            } catch (err) {
+              console.warn('failed to detach oldTrack', err)
+            }
+            try {
+              if (newTrack && videoElm && typeof newTrack.attach === 'function') {
+                newTrack.attach(videoElm)
+              }
+            } catch (err) {
+              console.warn('failed to attach newTrack', err)
+            }
+          })
+        }
+      },
+      participant: {
+        handler(newParticipant) {
+          try {
+            this.applyVideoObjectFit(newParticipant)
+            // 元素尺寸/适配变化后，重新应用旋转
+            const deg = this.rotateDegreeMap?.get(newParticipant?.identity) || 0
+            this.currentRotateDeg = deg
+            console.log('props.participant changed', deg, this.rotateDegreeMap)
+            this.applyLeadershipRotation(deg)
+          } catch (err) {
+            console.error('participant watch handler error', err)
+          }
+        },
+      }
+    },
+    computed: {
+      getSignalClass() {
+        const quality = this.participant.connectionQuality;
+        return quality === "excellent" || quality === "good" ? "signal-icon-good" : "signal-icon-poor";
+      },
+      getMicrophoneClass() {
+        return this.participant.isMicrophoneEnabled
+          ? "microphone microphone-active"
+          : "microphone microphone-inactive";
+      },
+      showMoreButton() {
+        return this.localMetadata?.isOwner || this.localMetadata?.isCoHost;
+      },
+      // 是否展示旋转按钮：仅当平台为4且非屏幕共享时显示（与多画面一致）
+      showRotateButton() {
+        try {
+          return !this.participant.isScreenShareEnabled && this.participant?.metadata?.platformID === 4
+        } catch (e) {
+          return false
+        }
+      }
+    },
+    methods: {
+      handleMouseEnter() {
+        this.isHovered = true;
+      },
+      handleMouseLeave() {
+        this.isHovered = false;
+      },
+      handleMoreClick(event) {
+        this.$emit("moreClick", {
+          event,
+          identity: this.participant.identity,
+        });
+      },
+      handleMicrophoneClick() {
+        this.$emit("microphoneClick", {
+          identity: this.participant.identity,
+          isMuted: this.participant.isMicrophoneEnabled,
+        });
+      },
+      // 旋转按钮点击：顺时针旋转90°
+      handleRotateClick() {
+        if (!this.participant?.identity) return
+        const cur = this.rotateDegreeMap?.get(this.participant.identity) || 0
+        const next = (cur + 90) % 360
+        this.rotateDegreeMap?.set(this.participant.identity, next)
+        console.log('afterClick', this.rotateDegreeMap);
+        this.currentRotateDeg = next
+        this.applyLeadershipRotation(next)
+      },
+      // 将旋转角度应用到领导聚焦的视频元素
+      applyLeadershipRotation(degree) {
+        try {
+          const norm = ((degree % 360) + 360) % 360
+          const videoElm = this.$refs.videoRef
+          if (!videoElm) return
+
+          videoElm.style.transformOrigin = 'center center'
+          // 针对90/270度，居中并以高度为基准适配
+          if (norm === 90 || norm === 270) {
+            const parent = videoElm.parentElement
+            if (parent) {
+              const rect = parent.getBoundingClientRect()
+              videoElm.style.top = '50%'
+              videoElm.style.left = '50%'
+              videoElm.style.width = `${rect.height}px`
+              videoElm.style.height = `${rect.width}px`
+              videoElm.style.transform = `translate(-50%, -50%) rotate(${norm}deg)`
+              videoElm.style.objectFit = 'cover'
+            }
+          } else {
+            // 0/180度直接占满容器
+            videoElm.style.top = '0'
+            videoElm.style.left = '0'
+            videoElm.style.width = '100%'
+            videoElm.style.height = '100%'
+            videoElm.style.transform = `rotate(${norm}deg)`
+            // 恢复原有objectFit策略
+            this.applyVideoObjectFit(this.participant)
+          }
+          // 更新本组件旋转图标的外观（1..4）
+          const rotateElm = document.getElementById('rotate-leadership')
+          if (rotateElm) {
+            let clsIndex = 1
+            if (norm === 0) clsIndex = 1
+            else if (norm === 90) clsIndex = 2
+            else if (norm === 180) clsIndex = 3
+            else if (norm === 270) clsIndex = 4
+            rotateElm.className = `rotate-icon rotate-icon${clsIndex}`
+          }
+        } catch (err) {
+          console.error('applyLeadershipRotation error', err)
+        }
+      },
+      applyVideoObjectFit(videoItem) {
+        this.$nextTick(() => {
+          if(videoItem.metadata?.platformID == 1 || videoItem.metadata?.platformID == 4 || videoItem.metadata?.platformID == 7) {
+            this.$refs.videoRef && (this.$refs.videoRef.style.objectFit = "contain");
+          } else {
+            if(videoItem?.source == "camera") {
+              this.$refs.videoRef && (this.$refs.videoRef.style.objectFit = "cover");
+            } else {
+              this.$refs.videoRef && (this.$refs.videoRef.style.objectFit = "contain");
+            }
+          }
+        })
+      },
+    },
+    mounted() {
+      const videoRef = this.$refs.videoRef
+      if(this.participant.videoTrack && videoRef) {
+        console.log('testLeadershipFocus', this.participant.videoTrack, videoRef);
+        this.participant.videoTrack.attach(videoRef)
+        this.applyVideoObjectFit(this.participant)
+        // 初始应用旋转角度
+        const deg = this.rotateDegreeMap?.get(this.participant.identity) || 0
+        console.log('initialRotateDeg', deg, this.rotateDegreeMap);
+        this.currentRotateDeg = deg
+        this.applyLeadershipRotation(deg)
+      }
+    },
+    beforeDestroy() {
+      if (this.participant.videoTrack && this.$refs.videoRef) {
+        this.participant.videoTrack.detach(this.$refs.videoRef);
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.leadership {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 5px;
+  background: var(--meeting-bg);
+  z-index: 2000;
+  left: 0;
+  top: 0;
+  &-container {
+    background: var(--meeting-board-bg) no-repeat center / 100% 100%;
+    position: relative;
+    // border: 1px solid #798BA4;
+    border-radius: 5px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    // margin: 5px;
+    .p-video {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 10;
+      object-fit: contain;
+      border-radius: 5px;
+      backface-visibility: hidden; // 避免3D旋转引发的锯齿闪烁
+      will-change: transform; // 提示浏览器优化旋转
+    }
+    .board {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      z-index: 30;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--meeting-board-bg) no-repeat center / 100% 100%;
+      .board-icon {
+        width: 20%;
+        height: auto;
+        aspect-ratio: 1/1;
+        background: var(--default-avatar) no-repeat center / 100% 100%;
+      }
+    }
+    .screen-share-suspension {
+      &::before {
+        content: "";
+        position: absolute;
+        left: 11px;
+        top: 10px;
+        width: 20px;
+        height: 20px;
+        background: var(--meeting-share-icon) no-repeat center / 100% 100%;
+      }
+      & {
+        position: absolute;
+        left: 24px;
+        top: 20px;
+        z-index: 50;
+        padding: 9px 13px 9px 41px;
+        background: rgba(28,36,47,0.6);
+        border-radius: 8px;
+        white-space: nowrap;
+        font-weight: 500;
+        font-size: 16px;
+        color: var(--theme-font-color);
+      }
+    }
+    .describe {
+      position: absolute;
+      left: 30px;
+      bottom: 6px;
+      z-index: 50;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      padding: 0 10px;
+      background: var(--call-audio-text-bg);
+      border-radius: 4px;
+      .microphone {
+        width: 11px;
+        height: 16px;
+        cursor: pointer;
+        margin-right: 6px;
+        &-active {
+          background: var(--call-user-mic-on-icon) no-repeat center / 100% 100%;
+        }
+        &-inactive {
+          background: var(--call-user-mic-off-icon) no-repeat center / 100% 100%;
+        }
+      }
+      .identity {
+        white-space: nowrap;
+        font-weight: 400;
+        font-size: 14px;
+        color: #fff;
+      }
+    }
+    .signal-icon {
+      position: absolute;
+      top: 10px;
+      left: 14px;
+      z-index: 50;
+      width: auto;
+      height: 5%;
+      min-height: 30px;
+      aspect-ratio: 1/1;
+      visibility: hidden;
+      &-good {
+        background: var(--signal-good-icon) no-repeat center / 100% 100%;
+      }
+      &-poor {
+        background: var(--signal-poor-icon) no-repeat center / 100% 100%;
+      }
+    }
+    .more-icon {
+      visibility: hidden;
+      cursor: pointer;
+      position: absolute;
+      top: 10px;
+      right: 14px;
+      z-index: 50;
+      aspect-ratio: 1/1;
+      width: auto;
+      height: 5%;
+      min-height: 30px;
+      background: var(--more-icon) no-repeat center / 100% 100%;
+    }
+    .rotate-icon {
+      visibility: hidden;
+      cursor: pointer;
+      position: absolute;
+      bottom: 10px;
+      right: 14px;
+      z-index: 50;
+      aspect-ratio: 1/1;
+      width: auto;
+      height: 5%;
+      min-height: 30px;
+      &1 {
+        background: var(--rotate-icon1) no-repeat center / 100% 100%;
+      }
+      &2 {
+        background: var(--rotate-icon2) no-repeat center / 100% 100%;
+      }
+      &3 {
+        background: var(--rotate-icon3) no-repeat center / 100% 100%;
+      }
+      &4 {
+        background: var(--rotate-icon4) no-repeat center / 100% 100%;
+      }
+    }
+  }
+}
+</style>

package/src/components/other/leaveOptionDialog.vue

@@ -57,7 +57,7 @@ export default {
 .check-dialog {
   width: 160px;
   position: absolute;
-  z-index: 100;
+  z-index: 2100;
   &-inner {
     width: 100%;
     background: var(--dialog-bg);

package/src/components/other/moreOptionDialog.vue

@@ -41,6 +41,10 @@ export default {
     },
     meetingCoHost: {
       type: Array,
+    },
+    leaderShipFocus: {
+      type: String,
+      default: "",
     }
   },
   computed: {
@@ -59,6 +63,7 @@ export default {
               this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
               participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
               participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+              this.leaderShipFocus ? this.leaderShipFocus === this.identity ? "取消聚焦画面" : "聚焦画面" : "聚焦画面"
             ];
             // 如果不是本地与会者，添加主持人权限操作
             if (!isLocalParticipant) {
@@ -77,6 +82,7 @@ export default {
               this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
               participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
               participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+              this.leaderShipFocus ? this.leaderShipFocus === this.identity ? "取消聚焦画面" : "聚焦画面" : "聚焦画面"
             ];
             if (!isLocalParticipant) {
               options.push(
@@ -95,6 +101,7 @@ export default {
               this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
               participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
               participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+              this.leaderShipFocus ? this.leaderShipFocus === this.identity ? "取消聚焦画面" : "聚焦画面" : "聚焦画面"
             ];
             if (!isLocalParticipant) {
               options.push(
@@ -118,6 +125,7 @@ export default {
               this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
               participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
               participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+              this.leaderShipFocus ? this.leaderShipFocus === this.identity ? "取消聚焦画面" : "聚焦画面" : "聚焦画面"
             ];
             
             // 如果不是本地与会者，添加联席主持人权限操作
@@ -137,6 +145,7 @@ export default {
               this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
               participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
               participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+              this.leaderShipFocus ? this.leaderShipFocus === this.identity ? "取消聚焦画面" : "聚焦画面" : "聚焦画面"
             ];
             // 如果不是本地与会者，添加联席主持人权限操作
             if (!isLocalParticipant) {
@@ -156,6 +165,7 @@ export default {
               this.curBlur === this.identity ? "取消设为主屏" : "设为主屏",
               participantItem.isMicrophoneEnabled ? "关闭麦克风" : "打开麦克风",
               participantItem.isCameraEnabled ? "关闭摄像头" : "打开摄像头",
+              this.leaderShipFocus ? this.leaderShipFocus === this.identity ? "取消聚焦画面" : "聚焦画面" : "聚焦画面"
             ];
             
             // 如果不是本地与会者，添加联席主持人权限操作
@@ -248,6 +258,12 @@ export default {
         case "移出会议":
           this.$emit("remove", this.identity);
           break;
+        case "聚焦画面":
+          this.$emit("openLeadershipFocus", this.identity);
+          break;
+        case "取消聚焦画面":
+          this.$emit("closeLeadershipFocus", this.identity);
+          break;
       }
       this.$emit("close");
     }
@@ -265,7 +281,7 @@ export default {
   border: 1px solid var(--dialog-border-color);
   padding: 4px 6px;
   position: absolute;
-  z-index: 100;
+  z-index: 2100;
   &-item {
     width: 100%;
     height: 36px;

package/src/components/other/selectDialog.vue

@@ -200,7 +200,7 @@ export default {
   width: 340px;
   padding-bottom: 10px;
   position: absolute;
-  z-index: 1000;
+  z-index: 2100;
   &-mini {
     width: 110px;
     .control-list-item-value {

package/src/components/other/selectSpecialDialog.vue

@@ -165,7 +165,7 @@ export default {
   width: 206px;
   padding-bottom: 10px;
   position: absolute;
-  z-index: 1000;
+  z-index: 2100;
   &-inner {
     width: 100%;
     background: var(--dialog-bg);

package/src/utils/api.js

@@ -89,3 +89,22 @@ export const getVolteAddressBook = (params = {}, { baseUrl, token } = {}) => {
     },
   });
 }
+// 获取会议终端通讯录树
+export const getMeetingRoomAddressBook = (params = {}, { baseUrl, token } = {}) => {
+  return http.post("/api/v1/meeting/queryMeetingRoomAddressBook", params, {
+    baseURL: baseUrl,
+    headers: {
+      satoken: token,
+    },
+  });
+};
+// 更新会议终端会议号
+export const updateConfTerminal = (params = {}, { baseUrl, token } = {}) => {
+  // 参数：{ id: number, callMeetingID: string }
+  return http.post("/api/v1/meeting/updateConfTerminal", params, {
+    baseURL: baseUrl,
+    headers: {
+      satoken: token,
+    },
+  });
+};