房间号生成逻辑是meetingType 数字转字符串

id 补齐3 位、前面补 0,例:5 → '005'、12 → '012'、123→'123'
拼接:meetingType + 3位补零id + 全局MEETING_PREFIX前缀
main
ysn 1 week ago
parent d3998450a6
commit 0e13426235
  1. 26
      src/views/videoCommunication/index.vue
  2. 99
      src/views/videoCommunication/qualityControl.vue

@ -179,7 +179,7 @@ import {
getConsultationList,
getConsultationMeetingInfo,
} from "@/api/videoCommunication";
import { mapGetters } from "vuex";
export default {
name: "VideoPage",
data() {
@ -198,6 +198,7 @@ export default {
color: "blue",
routeName: "RealTimeConsultation",
routePath: "/videoCommunication/realTimeConsultation",
type: 1,
},
{
title: "带教培训",
@ -205,6 +206,7 @@ export default {
color: "yellow",
routeName: "Training",
routePath: "/videoCommunication/training",
type: 9,
},
{
title: "在线质控",
@ -212,6 +214,7 @@ export default {
color: "grayblue",
routeName: "QualityControl",
routePath: "/videoCommunication/qualityControl",
type: 6,
},
{
title: "病例研讨",
@ -219,6 +222,7 @@ export default {
color: "greenblue",
routeName: "CaseStudy",
routePath: "/videoCommunication/caseStudy",
type: 3,
},
],
list: [],
@ -226,6 +230,9 @@ export default {
meetingDetail: {},
};
},
computed: {
...mapGetters(["userInfo", "config"]),
},
mounted() {
this.getList();
},
@ -271,12 +278,23 @@ export default {
this.loading = false;
});
},
generateRoomId(meetingType, id) {
// 1. id30
const idStr = String(id).padStart(3, "0");
// = + 3id +
const roomId = meetingType + idStr + this.config.MEETING_PREFIX;
return roomId;
},
//
handleModeClick(mode) {
this.$router.push({ name: mode.routeName });
this.$router.push({
name: mode.routeName,
query: {
name: this.userInfo.group,
roomId_id: this.generateRoomId(mode.type, this.userInfo.id),
},
});
},
//
getList() {
this.loading = true;

@ -1,6 +1,5 @@
<template>
<div class="meeting-container">
<!-- 顶部导航栏 -->
<header class="top-bar">
<div class="logo">
<img src="@/assets/logo/logo.png" />
@ -12,19 +11,15 @@
<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
@ -39,8 +34,8 @@
取消质控
</div>
</div>
<!-- 中间横向头像 + 名字 + 离线按钮 -->
<div class="user-info">
<div class="video-area">
<div class="video-placeholder">
<img
v-if="item.user.avatar"
:src="getAvatarUrl(item.user.avatar)"
@ -49,8 +44,18 @@
<div v-else class="default-avatar">
{{ item.user.name.charAt(0) || "?" }}
</div>
</div>
<div class="user-info-overlay">
<span class="user-name">{{ item.user.name }}</span>
<span class="offline-tag">离线</span>
<span
:class="[
'status-tag',
item.user.online === 1 ? 'online' : 'offline',
]"
>
{{ item.user.online === 1 ? "在线" : "离线" }}
</span>
</div>
</div>
</div>
</div>
@ -117,8 +122,8 @@ export default {
{ signalLevel: 2, user: {} },
],
queryParams: {
name: "测试部门的云质控",
room_id: "6689110",
name: "",
room_id: "",
},
index: 0,
form: {},
@ -135,6 +140,8 @@ export default {
};
},
mounted() {
this.queryParams.room_id = this.$route.query.roomId_id;
this.queryParams.name = this.$route.query.name + "的云质控";
this.$store.dispatch("app/toggleSideBarHide", true);
this.$store.dispatch("settings/changeSetting", {
key: "fixedHeader",
@ -147,6 +154,17 @@ export default {
this.getList();
// this.initRTC();
},
beforeDestroy() {
this.$store.dispatch("app/toggleSideBarHide", false);
this.$store.dispatch("settings/changeSetting", {
key: "fixedHeader",
value: true,
});
this.$store.dispatch("settings/changeSetting", {
key: "tagsView",
value: true,
});
},
// beforeUnmount() {
// this.leaveRoom();
// this.unbindEvent();
@ -538,38 +556,67 @@ export default {
}
}
.user-info {
.video-area {
height: calc(100% - 45px);
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
.user-avatar {
width: 90px;
height: 90px;
.video-placeholder {
width: 120px;
height: 120px;
border-radius: 14px;
overflow: hidden;
background: #00695c;
display: flex;
align-items: center;
justify-content: center;
.user-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.default-avatar {
width: 90px;
height: 90px;
font-size: 36px;
color: #fff;
}
}
.user-info-overlay {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
gap: 12px;
background: rgba(0, 0, 0, 0.6);
padding: 8px 16px;
border-radius: 20px;
.user-name {
font-size: 18px;
font-size: 16px;
color: #fff;
}
.offline-tag {
background: #00897b;
padding: 8px 22px;
border-radius: 6px;
font-size: 16px;
.status-tag {
padding: 4px 10px;
border-radius: 10px;
font-size: 12px;
&.online {
background: #4cd964;
color: #000;
}
&.offline {
background: #546e7a;
color: #fff;
}
}
}
}
}

Loading…
Cancel
Save