HIYL-localization-web/src/views/videoCommunication/qualityControl.vue

<template>
  <div class="meeting-container">
    <!-- 顶部导航栏 -->
    <header class="top-bar">
      <div class="logo">
        <img src="@/assets/logo/logo.png" />
        <span>信联</span>
      </div>
      <div class="title">{{ queryParams.name }}</div>
      <div class="window-controls">
        <i class="el-icon-minus" @click="minimizeWindow"></i>
        <i class="el-icon-close" @click="closeWindow"></i>
      </div>
    </header>
    <!-- 主画面区域：2x2网格布局 -->
    <main class="main-content">
      <div class="video-grid" v-for="(item, index) in list" :key="index">
        <div class="video-box">
          <!-- 空状态：加号靠右垂直居中 -->
          <div v-if="!item.user || !item.user.id" class="empty-state">
            <button class="add-user-btn" @click="handleUpdate(index)">
              <i class="el-icon-plus"></i>
            </button>
          </div>
          <!-- 有用户时显示内容 -->
          <div v-else class="user-state">
            <!-- 单元格顶部行：左音量、中姓名、右取消质控 -->
            <div class="cell-top-bar">
              <div class="signal-icon">
                <i
                  v-for="n in 5"
                  :key="n"
                  class="bar"
                  :class="{ active: n <= item.signalLevel }"
                />
              </div>
              <div class="grid-top-name">{{ item.user.name }}</div>
              <div class="cancel-qc" @click="handleDelete(item, index, form)">
                取消质控
              </div>
            </div>
            <!-- 中间横向：头像 + 名字 + 离线按钮 -->
            <div class="user-info">
              <img
                v-if="item.user.avatar"
                :src="getAvatarUrl(item.user.avatar)"
                class="user-avatar"
              />
              <div v-else class="default-avatar">
                {{ item.user.name.charAt(0) || "?" }}
              </div>
              <span class="user-name">{{ item.user.name }}</span>
              <span class="offline-tag">离线</span>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 底部控制栏 -->
    <!-- <footer class="bottom-bar">
      <div class="control-left">
        <button class="control-btn" @click="toggleMute">
          <i v-if="!isMuted" class="el-icon-microphone"></i>
          <i v-else class="el-icon-microphone-off"></i>
          <span>{{ isMuted ? "取消静音" : "静音" }}</span>
        </button>
      </div>
      <div class="control-center">
        <span class="meeting-status" :class="{ joined: isJoined }">
          {{ isJoined ? "已进入房间" : "未进入房间" }}
        </span>
      </div>
      <div class="control-right">
        <button class="control-btn secondary" @click="leaveRoom">
          <i class="el-icon-log-out"></i>
          <span>退出会议</span>
        </button>
        <button class="control-btn danger" @click="stopMeeting">
          <i class="el-icon-stop"></i>
          <span>结束会议</span>
        </button>
      </div>
    </footer> -->
    <!-- 添加或邀请修改邀请公告对话框 -->
    <CreateGroupDialog
      ref="createGroupDialogRef"
      title="选择人员"
      :min-select-count="1"
      @confirm="submitForm"
    />
  </div>
</template>

<script>
import CreateGroupDialog from "@/views/message/components/CreateGroupDialog";
import {
  postQualityCreate,
  postQualityInvite,
  postUserInfo,
  postQualityQuit,
  postQualityStop,
} from "@/api/videoCommunication";

export default {
  name: "qualityControl",
  components: {
    CreateGroupDialog,
  },
  data() {
    return {
      loading: true,
      total: 0,
      list: [
        { signalLevel: 5, user: {} },
        { signalLevel: 4, user: {} },
        { signalLevel: 3, user: {} },
        { signalLevel: 2, user: {} },
      ],
      queryParams: {
        name: "测试部门的云质控",
        room_id: "6689110",
      },
      index: 0,
      form: {},
      // 语音会议相关状态
      // isJoined: false,
      // isMuted: false,
      // storageKey: "HiWebRTC",
      // serviceID: "90f4d5a954ab449e9b6aac92",
      // serviceKey: "2c17c6393771ee3048ae34d6b380c5ec",
      // BasicRoomServiceToken: "https://121.36.105.19:7080/v1/auth/token",
      // userID: "",
      // joinRetry: 0,
      // maxRetry: 3,
    };
  },
  mounted() {
    this.$store.dispatch("app/toggleSideBarHide", true);
    this.$store.dispatch("settings/changeSetting", {
      key: "fixedHeader",
      value: false,
    });
    this.$store.dispatch("settings/changeSetting", {
      key: "tagsView",
      value: false,
    });
    this.getList();
    // this.initRTC();
  },
  // beforeUnmount() {
  //   this.leaveRoom();
  //   this.unbindEvent();
  // },
  methods: {
    // 初始化RTC SDK
    // initRTC() {
    //   let localData = window.localStorage.getItem(this.storageKey);
    //   if (localData) {
    //     localData = JSON.parse(localData);
    //     this.serviceID = localData.serviceID;
    //     this.serviceKey = localData.serviceKey;
    //     this.BasicRoomServiceToken = localData.BasicRoomServiceToken;
    //   }

    //   if (window.hirtcwebsdk) {
    //     window.hirtcwebsdk.init({
    //       leaveBeforeUnload: false,
    //       debug: false,
    //       forceArea: true,
    //     });
    //     this.bindEvent();
    //     this.userID =
    //       this.$store.state.user.userInfo.id ||
    //       new Date().getTime().toString(16).split("").reverse().join("");
    //   }
    // },
    // // 绑定事件
    // bindEvent() {
    //   if (!window.hirtcwebsdk) return;

    //   window.hirtcwebsdk.on("joined", (users) => {
    //     this.handleJoined(users);
    //   });

    //   window.hirtcwebsdk.on("leave", () => {
    //     this.handleLeave();
    //   });

    //   window.hirtcwebsdk.on("error", (errorCode, detail) => {
    //     this.handleError(errorCode, detail);
    //   });

    //   window.hirtcwebsdk.on("someoneJoin", (userID) => {
    //     this.handleSomeoneJoin(userID);
    //   });

    //   window.hirtcwebsdk.on("someoneLeave", (userID) => {
    //     this.handleSomeoneLeave(userID);
    //   });
    // },
    // // 解绑事件
    // unbindEvent() {
    //   if (!window.hirtcwebsdk) return;
    //   window.hirtcwebsdk.off("joined");
    //   window.hirtcwebsdk.off("leave");
    //   window.hirtcwebsdk.off("error");
    //   window.hirtcwebsdk.off("someoneJoin");
    //   window.hirtcwebsdk.off("someoneLeave");
    // },
    // // 进入房间
    // joinRoom() {
    //   if (!window.hirtcwebsdk) {
    //     this.$message.error("RTC SDK 未初始化");
    //     return;
    //   }

    //   window.hirtcwebsdk.join({
    //     serviceID: this.serviceID,
    //     serviceKey: this.serviceKey,
    //     BasicRoomServiceToken: this.BasicRoomServiceToken,
    //     userID: this.userID.toString(),
    //     roomID: this.queryParams.room_id,
    //     joinConfig: {
    //       audio: true,
    //       video: false,
    //     },
    //   });
    // },
    // // 离开房间
    // leaveRoom() {
    //   if (!window.hirtcwebsdk || !this.isJoined) return;

    //   window.hirtcwebsdk.leave();
    // },
    // // 结束会议
    // stopMeeting() {
    //   this.$confirm("确定要结束本次会议吗？", "提示", {
    //     type: "warning",
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //   })
    //     .then(() => {
    //       // 调用后端接口结束质控
    //       postQualityStop({
    //         quality_id: this.form.quality_id,
    //       })
    //         .then(() => {
    //           this.$modal.msgSuccess("会议已结束");
    //           this.leaveRoom();
    //           this.closeWindow();
    //         })
    //         .catch(() => {
    //           this.$modal.msgError("结束会议失败");
    //         });
    //     })
    //     .catch(() => {});
    // },
    // // 切换麦克风
    // toggleMute() {
    //   if (!window.hirtcwebsdk || !this.isJoined) {
    //     this.$message.warning("请先进入房间");
    //     return;
    //   }

    //   if (this.isMuted) {
    //     // 取消静音
    //     window.hirtcwebsdk.unmuteAudio();
    //     this.isMuted = false;
    //     this.$message.success("麦克风已开启");
    //   } else {
    //     // 静音
    //     window.hirtcwebsdk.muteAudio();
    //     this.isMuted = true;
    //     this.$message.success("麦克风已关闭");
    //   }
    // },
    // // 进房成功回调
    // handleJoined(users) {
    //   this.joinRetry = 0;
    //   this.isJoined = true;
    //   this.$message.success("已进入语音房间");

    //   // 自动开启麦克风
    //   if (window.hirtcwebsdk) {
    //     window.hirtcwebsdk.unmuteAudio();
    //   }
    // },
    // // 离开房间回调
    // handleLeave() {
    //   this.isJoined = false;
    //   this.isMuted = false;
    //   this.$message.info("已离开房间");
    // },
    // // 错误处理
    // handleError(errorCode, detail) {
    //   if (errorCode === window.hirtcwebsdk?.ErrorCode.JoinError) {
    //     if (this.joinRetry < this.maxRetry) {
    //       this.joinRetry++;
    //       this.joinRoom();
    //     } else {
    //       this.joinRetry = 0;
    //       this.$message.error("进房失败，请检查网络");
    //     }
    //   }
    // },
    // // 有人进入
    // handleSomeoneJoin(userID) {
    //   this.$message.info(`${userID} 进入了房间`);
    // },
    // // 有人离开
    // handleSomeoneLeave(userID) {
    //   this.$message.info(`${userID} 离开了房间`);
    // },
    minimizeWindow() {
      this.$router.push("/video/index");
    },
    closeWindow() {
      this.$confirm("确定要退出本次质控吗?", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          // this.leaveRoom();
          this.$store.dispatch("app/toggleSideBarHide", false);
          this.$store.dispatch("settings/changeSetting", {
            key: "fixedHeader",
            value: true,
          });
          this.$store.dispatch("settings/changeSetting", {
            key: "tagsView",
            value: true,
          });
          this.$router.push("/");
        })
        .catch(() => {});
    },
    getList() {
      this.loading = true;
      postQualityCreate({
        avatar: "",
        init_users: [],
        invite_code: "1234",
        name: this.queryParams.name,
        room_id: this.queryParams.room_id,
      }).then((response) => {
        this.form = response.data;
        this.loading = false;
        // 创建质控成功后自动进入语音房间
        // this.joinRoom();
      });
    },
    getAvatarUrl(avatar) {
      return this.$store.getters.config.MINIO_ENDPOINT_HTTPS + avatar;
    },
    handleUpdate(index) {
      this.index = index;
      this.$refs.createGroupDialogRef.show();
    },
    submitForm(selectedMembers) {
      const inviteArr = selectedMembers.map((item) => item.id);
      postQualityInvite({
        invite_users: inviteArr,
        quality_id: this.form.quality_id,
      }).then(() => {
        this.$modal.msgSuccess("邀请成功");
        this.handleViewData({ user_id: selectedMembers[0].id });
      });
    },
    handleViewData(row) {
      postUserInfo(row).then((response) => {
        this.list[this.index].user = { ...response.data };
      });
    },
    handleDelete(row, index, form) {
      const that = this;
      this.$modal
        .confirm("确定要取消该成员的质控吗？")
        .then(function () {
          return postQualityQuit({
            invite_type_detail: 9,
            quality_id: form.quality_id,
            user_id: row.user.id,
          });
        })
        .then(() => {
          that.list[index].user = {};
          that.$modal.msgSuccess("取消质控成功");
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
.meeting-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #004d40;
  color: #ffffff;

  .top-bar {
    height: 40px;
    background: #00695c;
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: space-between;

    .logo {
      display: flex;
      align-items: center;
      font-weight: 600;
      img {
        width: 28px;
        margin-right: 8px;
      }
    }

    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: #ffffff;
      font-weight: 500;
    }

    .window-controls {
      display: flex;
      align-items: center;
      i {
        margin-left: 15px;
        cursor: pointer;
        font-size: 20px;
        color: #ffffff;
      }
    }
  }

  .main-content {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    background-color: #00796b;

    .video-grid {
      background-color: #004d40;
      position: relative;

      .video-box {
        width: 100%;
        height: 100%;
        position: relative;

        .empty-state {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          .add-user-btn {
            width: 90px;
            height: 90px;
            border-radius: 14px;
            background-color: #00897b;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
              font-size: 42px;
              color: #ffffff;
            }
          }
        }

        .user-state {
          width: 100%;
          height: 100%;
          position: relative;

          .cell-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            border-bottom: 1px solid #00695c;

            .signal-icon {
              display: flex;
              align-items: flex-end;
              gap: 2px;
              height: 14px;
              z-index: 10;
              .bar {
                width: 3px;
                background: #666;
                border-radius: 1px;
                &:nth-child(1) {
                  height: 4px;
                }
                &:nth-child(2) {
                  height: 7px;
                }
                &:nth-child(3) {
                  height: 10px;
                }
                &:nth-child(4) {
                  height: 13px;
                }
                &:nth-child(5) {
                  height: 16px;
                }
                &.active {
                  background: #4cd964;
                }
              }
            }

            .grid-top-name {
              font-size: 18px;
            }

            .cancel-qc {
              background: #fff;
              color: #333;
              padding: 4px 12px;
              border-radius: 3px;
              font-size: 15px;
              cursor: pointer;
            }
          }

          .user-info {
            height: calc(100% - 45px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;

            .user-avatar {
              width: 90px;
              height: 90px;
              border-radius: 14px;
              object-fit: cover;
            }

            .default-avatar {
              width: 90px;
              height: 90px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 26px;
            }

            .user-name {
              font-size: 18px;
            }

            .offline-tag {
              background: #00897b;
              padding: 8px 22px;
              border-radius: 6px;
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .bottom-bar {
    height: 60px;
    background: #00695c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-top: 1px solid #00796b;

    .control-left {
      display: flex;
      gap: 10px;
    }

    .control-center {
      .meeting-status {
        padding: 8px 20px;
        border-radius: 20px;
        background: #004d40;
        color: #fff;
        font-size: 14px;

        &.joined {
          background: #4cd964;
          color: #000;
        }
      }
    }

    .control-right {
      display: flex;
      gap: 10px;
    }

    .control-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 20px;
      border-radius: 20px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      background: #00897b;
      color: #fff;

      &:hover {
        background: #00a085;
      }

      &.secondary {
        background: #546e7a;

        &:hover {
          background: #607d8b;
        }
      }

      &.danger {
        background: #ef5350;

        &:hover {
          background: #e53935;
        }
      }

      i {
        font-size: 16px;
      }
    }
  }
}
</style>