会议背景顶部预留边距

This commit is contained in:
cxc
2022-05-25 17:31:14 +08:00
parent a9a9dca090
commit 7dee95c3ca
6 changed files with 179 additions and 136 deletions

View File

@ -19,9 +19,7 @@
<script> <script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css import "@wangeditor/editor/dist/css/style.css"; // 引入 css
// import { getToken } from "@/utils/auth";
import { onBeforeUnmount, ref, shallowRef, toRefs, watch } from "vue"; import { onBeforeUnmount, ref, shallowRef, toRefs, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default { export default {
@ -39,6 +37,10 @@ export default {
type: String, type: String,
default: "820px", default: "820px",
}, },
focus: {
type: Boolean,
default: false,
},
}, },
setup(props, context) { setup(props, context) {
// 编辑器实例,必须用 shallowRef // 编辑器实例,必须用 shallowRef
@ -68,14 +70,12 @@ export default {
"redo", "redo",
"undo", "undo",
], ],
// excludeKeys: ["insertVideo", "uploadVideo"],
}; };
const editorConfig = { const editorConfig = {
placeholder: "请输入内容...", placeholder: "请输入内容...",
autoFocus: props.focus,
}; };
// console.log(editor.getMenuConfig('uploadImage'));
// 组件销毁时,也及时销毁编辑器 // 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => { onBeforeUnmount(() => {
const editor = editorRef.value; const editor = editorRef.value;

View File

@ -68,7 +68,10 @@ router.beforeEach(async (to) => {
store.commit("setJoinUser", {}); store.commit("setJoinUser", {});
} }
// 如果参会方式发生更改,则清除数据 // 如果参会方式发生更改,则清除数据
if (store.state.meeting.joinType !== store.state.joinType) { if (
store.state.joinType &&
store.state.meeting.joinType !== store.state.joinType
) {
store.commit("setJoinUser", {}); store.commit("setJoinUser", {});
store.commit("setJoinType", store.state.meeting.joinType); store.commit("setJoinType", store.state.meeting.joinType);
return `/verify/${to.params.meetingId}`; return `/verify/${to.params.meetingId}`;
@ -94,6 +97,7 @@ router.beforeEach(async (to) => {
} }
} else { } else {
if (_.isEmpty(store.state.joinUser)) { if (_.isEmpty(store.state.joinUser)) {
console.log("error");
return `/verify/${to.params.meetingId}`; return `/verify/${to.params.meetingId}`;
} else { } else {
if (store.state.meeting.joinType === "2") { if (store.state.meeting.joinType === "2") {

View File

@ -10,7 +10,7 @@ const store = createStore({
password: "", //参会密码 password: "", //参会密码
joinType: localStorage.getItem("JOINTYPE") joinType: localStorage.getItem("JOINTYPE")
? JSON.parse(localStorage.getItem("JOINTYPE")) ? JSON.parse(localStorage.getItem("JOINTYPE"))
: "1", : "",
}, },
mutations: { mutations: {
// 设置参会人员信息 // 设置参会人员信息

View File

@ -22,7 +22,7 @@
<div <div
class="display-message" class="display-message"
v-html="editingMessage" v-html="editingMessage"
@click="showRichEditor = true" @click="openRichMessageEditor"
></div> ></div>
<!-- <wangEditor v-model="editingMessage" :height="`100px`"></wangEditor> --> <!-- <wangEditor v-model="editingMessage" :height="`100px`"></wangEditor> -->
<!-- <div class="btns"> --> <!-- <div class="btns"> -->
@ -58,7 +58,7 @@
<messageList :messageList="messages"></messageList> <messageList :messageList="messages"></messageList>
<div class="option-bar"> <div class="option-bar">
<el-input <el-input
v-model="editingMessage" v-model="richMessage"
style="margin-right: 15px" style="margin-right: 15px"
></el-input> ></el-input>
<!-- <wangEditor <!-- <wangEditor
@ -78,13 +78,12 @@
> >
</el-tabs> </el-tabs>
<el-dialog title="高级输入框" v-model="showRichEditor"> <el-dialog title="富文本输入框" v-model="showRichEditor">
<wangEditor v-model="editingMessage" width="100%"></wangEditor> <wangEditor v-model="richMessage" width="100%" :focus="true"></wangEditor>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button type="primary" @click="showRichEditor = false" <el-button type="warning" @click="cancelRichMessage">取消</el-button>
>确定</el-button <el-button type="primary" @click="saveRichMessage">确定</el-button>
>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -93,6 +92,7 @@
<script setup> <script setup>
import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue"; import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
import axios from "axios";
import { signMeeting, generateSignature } from "@/api/meeting"; import { signMeeting, generateSignature } from "@/api/meeting";
import wangEditor from "@/components/wangEditor"; import wangEditor from "@/components/wangEditor";
import messageList from "@/components/messageList"; import messageList from "@/components/messageList";
@ -176,12 +176,12 @@ const setTextLabel = () => {
const meetingConfig = reactive({ const meetingConfig = reactive({
client: ZoomMtgEmbedded.createClient(), client: ZoomMtgEmbedded.createClient(),
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
sdkKey: "TUgbQFx4RhPHDPa0OQAKVgPL2dPGQoVqZIuW", sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
meetingNumber: store.getters.meetingNumber, meetingNumber: store.getters.meetingNumber,
passWord: store.state.password, passWord: store.state.password,
role: route.name === "Host" ? 1 : 0, role: route.name === "Host" ? 1 : 0,
// signatureEndpoint: "http://120.26.107.74:4000", // signatureEndpoint: "http://120.26.107.74:4000",
userEmail: "", userEmail: "webinartest@126.com",
userName: joinName.value, userName: joinName.value,
// pass in the registrant's token if your meeting or webinar requires registration. More info here: // pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered
@ -212,6 +212,18 @@ const getSignature = async () => {
role: meetingConfig.role, role: meetingConfig.role,
}); });
startMeeting(sign); startMeeting(sign);
// axios
// .post("http://localhost:4000", {
// meetingNumber: store.getters.meetingNumber,
// role: meetingConfig.role,
// })
// .then((res) => {
// console.log(res.data.signature);
// startMeeting(res.data.signature);
// })
// .catch((error) => {
// console.log(error);
// });
}; };
const startMeeting = async (signature) => { const startMeeting = async (signature) => {
@ -263,8 +275,6 @@ const startMeeting = async (signature) => {
} catch (error) { } catch (error) {
isMeetingLoading.value = false; isMeetingLoading.value = false;
} }
// console.log(meetingConfig.client.checkSystemRequirements());
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
}; };
const setFullScreen = () => { const setFullScreen = () => {
videoElementRef.value.requestFullscreen(); videoElementRef.value.requestFullscreen();
@ -283,7 +293,7 @@ const initDesktopLayout = () => {
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
) || ) ||
document.querySelector( document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
); );
heightEl.style.height = `${meetingHeight.value - 45}px`; heightEl.style.height = `${meetingHeight.value - 45}px`;
@ -312,30 +322,40 @@ const setLayout = (templateId) => {
console.log(templateId); console.log(templateId);
const v_s_wrap_el = const v_s_wrap_el =
document.querySelector( document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
) || ) ||
document.querySelector( document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
); ); // 包含视频和课件的容器
v_s_wrap_el.style.flexDirection = ""; v_s_wrap_el.style.flexDirection = "";
const v_wrap_el = const v_wrap_el =
document.querySelector( document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
".zmwebsdk-makeStyles-wrap-167.zmwebsdk-makeStyles-wrap-171" document.querySelector(".zmwebsdk-makeStyles-wrap-177");
) || if (!inSharing.value) return;
document.querySelector(
".zmwebsdk-makeStyles-wrap-177.zmwebsdk-makeStyles-wrap-181" const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
); if (templateId === "1") {
if (templateId === "1" && inSharing.value) { // 课件|视频 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
} else if (templateId === "2" && inSharing.value) { } else if (templateId === "2") {
// 视频|课件 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
v_s_wrap_el.style.flexDirection = "row-reverse"; v_s_wrap_el.style.flexDirection = "row-reverse";
} else if (templateId === "3" && inSharing.value) { } else if (templateId === "3") {
// 课件|视频 左3/4 | 右边1/4
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`; v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
} else if (templateId === "4" && inSharing.value) { } else if (templateId === "4") {
// 视频|课件 左1/4 | 右边3/4
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`; v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
v_s_wrap_el.style.flexDirection = "row-reverse"; v_s_wrap_el.style.flexDirection = "row-reverse";
} else if (templateId === "5") {
// 只显示课件
v_wrap_el.style.display = `none`;
} else if (templateId === "6") {
// 只显示视频
s_wrap_el.style.display = "none";
v_wrap_el.style.width = `${meetingWidth.value - 4}px`;
} }
}; };
@ -391,8 +411,6 @@ const initWebSocket = () => {
// 会议结束时 // 会议结束时
else if (data.type === "isCloseMeeting") { else if (data.type === "isCloseMeeting") {
showExamDialog.value = false;
showQuestionnaireDialog.value = false;
ElMessageBox.alert("会议已结束"); ElMessageBox.alert("会议已结束");
socket.close(); socket.close();
} }
@ -405,22 +423,27 @@ const initWebSocket = () => {
}); });
}; };
initWebSocket(); initWebSocket();
/* 签到功能 */
// 提交签到
const showSignDialog = ref(false); //是否显示签到窗口
const submitSign = async () => {
await signMeeting({
meetingId: store.getters.meetingId,
signTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
account: joinAccount.value,
});
showSignDialog.value = false;
ElMessage.success("签到成功");
};
/* 聊天功能 */ /* 聊天功能 */
const messages = ref([]); // 消息列表 const messages = ref([]); // 消息列表
const editingMessage = ref(""); // 正在编辑的内容 const editingMessage = ref(""); // 要发送的内容
const richMessage = ref(""); // 正在编辑的富文本内容--主持人独有
// 保存富文本聊天内容
const saveRichMessage = () => {
showRichEditor.value = false;
editingMessage.value = richMessage.value;
richMessage.value = "";
};
// 取消保存富文本
const cancelRichMessage = () => {
showRichEditor.value = false;
};
// 打开富文本编辑器窗口
const openRichMessageEditor = () => {
showRichEditor.value = true;
richMessage.value = editingMessage.value;
};
// 发送消息 // 发送消息
const sendMessage = () => { const sendMessage = () => {
console.log(socket); console.log(socket);
@ -442,10 +465,6 @@ window.addEventListener("beforeunload", leaveConference);
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener("beforeunload", leaveConference); window.removeEventListener("beforeunload", leaveConference);
}); });
// 是否显示考试和问卷弹窗
const showExamDialog = ref(false);
const showQuestionnaireDialog = ref(false);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
#app-container { #app-container {
@ -485,11 +504,14 @@ const showQuestionnaireDialog = ref(false);
margin: 5px; margin: 5px;
.display-message { .display-message {
border: 1px solid #666; border: 1px solid #666;
width: 100%; width: 80%;
min-height: 100%; min-height: 100%;
border-radius: 5px; border-radius: 5px;
margin-right: 5px; margin-right: 5px;
word-wrap: break-word; word-wrap: break-word;
:deep(p) {
margin: 0;
}
} }
} }
:deep(.message-list) { :deep(.message-list) {
@ -509,7 +531,7 @@ const showQuestionnaireDialog = ref(false);
} }
} }
#video-element { #video-element {
visibility: hidden; // visibility: hidden;
// height: 600px; // height: 600px;
} }

View File

@ -92,24 +92,25 @@
<script setup> <script setup>
import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue"; import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
import { useStore } from "vuex"; import { useStore } from "vuex";
import axios from "axios";
import { signMeeting, generateSignature } from "@/api/meeting"; import { signMeeting, generateSignature } from "@/api/meeting";
import questions from "@/components/questions"; import questions from "@/components/questions";
import messageList from "@/components/messageList"; import messageList from "@/components/messageList";
import dayjs from "dayjs"; import dayjs from "dayjs";
import ZoomMtgEmbedded from "@zoomus/websdk/embedded"; import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
import _ from "lodash"; import _ from "lodash";
// import { FullScreen } from "@element-plus/icons-vue";
import ReconnectingWebSocket from "reconnecting-websocket"; import ReconnectingWebSocket from "reconnecting-websocket";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
const store = useStore(); const store = useStore();
console.log(route.name);
const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍 const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍
const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程 const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程
const expertInfo = computed(() => store.getters.expertInfo); // 专家信息 const expertInfo = computed(() => store.getters.expertInfo); // 专家信息
const isMeetingLoading = ref(true); // 视频课件是否正在加载 const isMeetingLoading = ref(true); // 视频课件是否正在加载
const templateId = ref(1); // 布局 id const templateId = ref(6); // 布局 id
if (store.getters.templateId) { if (store.getters.templateId) {
templateId.value = store.getters.templateId; templateId.value = store.getters.templateId;
} }
@ -119,15 +120,12 @@ const screenWidth = ref(0); // 屏幕宽度
const meetingWidth = ref(0); // 视频课件容器元素宽度 const meetingWidth = ref(0); // 视频课件容器元素宽度
const meetingHeight = ref(0); // 视频课件容器元素高度 const meetingHeight = ref(0); // 视频课件容器元素高度
screenWidth.value = document.body.offsetWidth; screenWidth.value = document.body.offsetWidth;
if (route.name === "Host") {
joinAccount.value = route.params.username; joinAccount.value =
joinName.value = route.params.nickname; store.getters.icCard || store.getters.phone || store.getters.nickname;
} else { joinName.value =
joinAccount.value = store.getters.nickname || store.getters.phone || store.getters.icCard;
store.getters.icCard || store.getters.phone || store.getters.nickname;
joinName.value =
store.getters.nickname || store.getters.phone || store.getters.icCard;
}
// 设置会议背景大小、图片 // 设置会议背景大小、图片
const meetingContainerRef = ref(null); // 会议容器元素(包含背景) const meetingContainerRef = ref(null); // 会议容器元素(包含背景)
const videoElementRef = ref(null); // 视频课件容器元素 const videoElementRef = ref(null); // 视频课件容器元素
@ -135,11 +133,11 @@ const chatRightRef = ref(null); // 右侧聊天元素
onMounted(() => { onMounted(() => {
meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`; // 设置背景图片 meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`; // 设置背景图片
setTextLabel(); setTextLabel();
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.95; meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.95; // zoom 会议组件宽度是父元素宽度的 95%
meetingHeight.value = (meetingWidth.value * 9) / 16; meetingHeight.value = (meetingWidth.value * 9) / 16; // 根据 zoom 会议组件长宽比 16:9 计算出会议组件高度
meetingContainerRef.value.style.paddingTop = `${meetingHeight.value * 0.2}px`; // 父元素顶部padding 是会议组件高度的20%
videoElementRef.value.style.width = meetingWidth.value + "px"; videoElementRef.value.style.width = meetingWidth.value + "px";
videoElementRef.value.style.height = meetingHeight.value + "px"; videoElementRef.value.style.height = meetingHeight.value + "px";
chatRightRef.value.style.height = meetingHeight.value + "px";
}); });
// 设置文本标签 // 设置文本标签
@ -150,63 +148,69 @@ const setTextLabel = () => {
store.getters.textLabelList.forEach((item) => { store.getters.textLabelList.forEach((item) => {
const labelObj = JSON.parse(item.textLabel); const labelObj = JSON.parse(item.textLabel);
const textEl = document.createElement("div"); const textEl = document.createElement("div");
console.log(labelObj);
textEl.id = `${_.uniqueId("tag-")}`; textEl.id = `${_.uniqueId("tag-")}`;
textEl.innerHTML = labelObj.content; textEl.innerHTML = labelObj.content;
textEl.className = "text-tag"; textEl.className = "text-tag";
// console.log(labelObj);
textEl.style.backgroundColor = labelObj.backgroundColor; textEl.style.backgroundColor = labelObj.backgroundColor;
textEl.style.visibility = textEl.style.visibility =
labelObj.visibility === "1" ? "visible" : "hidden"; labelObj.visibility === "1" ? "visible" : "hidden";
textEl.style.left = `${labelObj.x}`; textEl.style.left = `${labelObj.x}`;
textEl.style.top = `${labelObj.y}`; textEl.style.top = `${labelObj.y}`;
meetingContainerRef.value.appendChild(textEl); meetingContainerRef.value.appendChild(textEl);
}); });
}; };
// console.log(to.);
// 会议配置 // 会议配置
const meetingConfig = reactive({ const meetingConfig = reactive({
client: ZoomMtgEmbedded.createClient(), client: ZoomMtgEmbedded.createClient(),
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
sdkKey: "TUgbQFx4RhPHDPa0OQAKVgPL2dPGQoVqZIuW", sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
meetingNumber: store.getters.meetingNumber, // meetingNumber: store.getters.meetingNumber,
passWord: store.state.password, // meetingNumber: store.getters.meetingNumber,
role: route.name === "Host" ? 1 : 0, // passWord: store.state.password,
// sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
meetingNumber: "97097842319",
passWord: "111916",
// role: route.name === "Host" ? 1 : 0,
role: 0,
// signatureEndpoint: "http://120.26.107.74:4000", // signatureEndpoint: "http://120.26.107.74:4000",
userEmail: "", // userEmail:
userName: joinName.value, // Number(Math.random().toString().substr(3, 8) + Date.now()).toString(36) +
// "@163.com",
userEmail: "934510341@qq.com",
// userName: joinName.value,
userName: "afasde1",
// pass in the registrant's token if your meeting or webinar requires registration. More info here: // pass in the registrant's token if your meeting or webinar requires registration. More info here:
// Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/meetings#join-registered
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered // Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered
registrantToken: "", registrantToken:
"Xhi0bKUzyNBnJwe2EJWZ0JZ3IYqtPgyyWE1CXW3z2X4.DQMAAAAWm3t-jxZqSS14R0dCSFRDNkFibVQwakpHbFd3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
}); });
console.log(meetingConfig); console.log(meetingConfig);
const checkMedia = async () => {
const result = {};
try {
await navigator.mediaDevices.getUserMedia({ video: true });
result.video = true;
} catch (error) {
result.video = false;
}
try {
await navigator.mediaDevices.getUserMedia({ audio: true });
result.audio = true;
} catch (error) {
result.audio = false;
}
return result;
};
// 生成签名
const getSignature = async () => { const getSignature = async () => {
const { sign } = await generateSignature({ const { sign } = await generateSignature({
meetingNumber: store.getters.meetingNumber, meetingNumber: store.getters.meetingNumber,
role: meetingConfig.role, role: meetingConfig.role,
}); });
console.log(sign);
startMeeting(sign); startMeeting(sign);
// axios
// .post("http://localhost:4000", {
// meetingNumber: store.getters.meetingNumber,
// role: meetingConfig.role,
// })
// .then((res) => {
// console.log(res.data.signature);
// startMeeting(res.data.signature);
// })
// .catch((error) => {
// console.log(error);
// });
}; };
// 开始会议
const startMeeting = async (signature) => { const startMeeting = async (signature) => {
let meetingSDKElement = document.getElementById("video-element"); let meetingSDKElement = document.getElementById("video-element");
try { try {
@ -256,8 +260,6 @@ const startMeeting = async (signature) => {
} catch (error) { } catch (error) {
isMeetingLoading.value = false; isMeetingLoading.value = false;
} }
// console.log(meetingConfig.client.checkSystemRequirements());
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
}; };
const setFullScreen = () => { const setFullScreen = () => {
videoElementRef.value.requestFullscreen(); videoElementRef.value.requestFullscreen();
@ -267,7 +269,6 @@ onMounted(() => {
}); });
// 初始化 // 初始化
const initDesktopLayout = () => { const initDesktopLayout = () => {
console.log(meetingHeight.value);
// 切换到 gallery view // 切换到 gallery view
document.querySelector("#suspension-view-tab-thumbnail-gallery").click(); document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
// 初始化高度 // 初始化高度
@ -276,17 +277,17 @@ const initDesktopLayout = () => {
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
) || ) ||
document.querySelector( document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-252"
); );
heightEl.style.height = `${meetingHeight.value - 45}px`; heightEl.style.height = `${meetingHeight.value - 45}px`;
// document.querySelector( console.log(meetingHeight.value);
// ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
// ).style.height = `${meetingHeight.value - 45}px`;
// 初始化宽度 // 初始化宽度
// // zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded
document.querySelector( document.querySelector(
".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded" ".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
).style.width = `${meetingWidth.value - 4}px`; ).style.width = `${meetingWidth.value - 4}px`;
console.log(`${meetingWidth.value - 4}px`);
// 加载完成显示 video element // 加载完成显示 video element
document.querySelector("#video-element").style.visibility = "visible"; document.querySelector("#video-element").style.visibility = "visible";
}; };
@ -296,11 +297,6 @@ setInterval(() => {
const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46"); const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
// console.log(elSharing); // console.log(elSharing);
if (elSharing) { if (elSharing) {
// if (elSharing.className.includes("in-sharing")) {
// inSharing.value = true;
// } else {
// inSharing.value = false;
// }
inSharing.value = true; inSharing.value = true;
} else { } else {
inSharing.value = false; inSharing.value = false;
@ -312,51 +308,66 @@ const setLayout = (templateId) => {
console.log(templateId); console.log(templateId);
const v_s_wrap_el = const v_s_wrap_el =
document.querySelector( document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
) || ) ||
document.querySelector( document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176.zmwebsdk-makeStyles-root-180" ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
); ); // 包含视频和课件的容器
v_s_wrap_el.style.flexDirection = ""; v_s_wrap_el.style.flexDirection = "";
const v_wrap_el = const v_wrap_el =
document.querySelector( document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
".zmwebsdk-makeStyles-wrap-167.zmwebsdk-makeStyles-wrap-171" document.querySelector(".zmwebsdk-makeStyles-wrap-177");
) || if (!inSharing.value) return;
document.querySelector(
".zmwebsdk-makeStyles-wrap-177.zmwebsdk-makeStyles-wrap-181" const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
); if (templateId === "1") {
if (templateId === "1" && inSharing.value) { // 课件|视频 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
} else if (templateId === "2" && inSharing.value) { } else if (templateId === "2") {
// 视频|课件 对半分
v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`; v_wrap_el.style.width = `${meetingWidth.value / 2 - 2}px`;
v_s_wrap_el.style.flexDirection = "row-reverse"; v_s_wrap_el.style.flexDirection = "row-reverse";
} else if (templateId === "3" && inSharing.value) { } else if (templateId === "3") {
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`; // 课件|视频 左4/5 | 右边1/5
} else if (templateId === "4" && inSharing.value) { v_wrap_el.style.width = `${(meetingWidth.value - 4) / 5}px`;
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`; } else if (templateId === "4") {
// 视频|课件 左1/4 | 右边3/4
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 5}px`;
v_s_wrap_el.style.flexDirection = "row-reverse"; v_s_wrap_el.style.flexDirection = "row-reverse";
} else if (templateId === "5") {
// 只显示课件
v_wrap_el.style.display = `none`;
} else if (templateId === "6") {
// 只显示视频
s_wrap_el.style.display = "none";
v_wrap_el.style.width = `${meetingWidth.value - 4}px`;
} }
}; };
watch(inSharing, (newVal) => { watch(inSharing, (newVal) => {
console.log(newVal); console.log(newVal);
if (newVal) { if (newVal) {
setLayout(templateId.value); setLayout(templateId.value);
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
} else { } else {
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
const galleryViewButton = document.querySelector( const galleryViewButton = document.querySelector(
"#suspension-view-tab-thumbnail-gallery" "#suspension-view-tab-thumbnail-gallery"
); );
galleryViewButton.click(); galleryViewButton.click();
document.querySelector(".zmwebsdk-makeStyles-wrap-171").style.width = ""; const v_wrap_el =
document.querySelector( document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
".zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170" document.querySelector(".zmwebsdk-makeStyles-wrap-177");
).style.flexDirection = ""; v_wrap_el.style.width = "";
const v_s_wrap_el =
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166"
) ||
document.querySelector(
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-176"
);
v_s_wrap_el.style.flexDirection = "";
} }
}); });
// const reconnectCount = ref(0); //重连次数
let socket = reactive({}); let socket = reactive({});
const initWebSocket = () => { const initWebSocket = () => {
// 建立websocket连接 // 建立websocket连接
@ -521,7 +532,7 @@ const showQuestionnaireDialog = ref(false);
} }
} }
#video-element { #video-element {
visibility: hidden; // visibility: hidden;
// height: 600px; // height: 600px;
} }

View File

@ -37,7 +37,11 @@
" "
> >
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="phone">
<el-input v-model="newJoinUser.phone" placeholder="请输入手机号" /> <el-input
v-model.number="newJoinUser.phone"
placeholder="请输入手机号"
max="11"
/>
</el-form-item> </el-form-item>
</div> </div>
<div <div
@ -545,17 +549,19 @@ setJoinUserDefaultValue();
const newJoinUserRef = ref(null); const newJoinUserRef = ref(null);
const submitVerify = async (newJoinUserRef) => { const submitVerify = async (newJoinUserRef) => {
await newJoinUserRef.validate(); await newJoinUserRef.validate();
console.log(meeting.value.joinType);
if (meeting.value.joinType === "1") { if (meeting.value.joinType === "1") {
store.commit("setJoinUser", newJoinUser.value); store.commit("setJoinUser", newJoinUser.value);
router.push(`/meeting/${meetingId.value}`); router.push(`/meeting/${meetingId.value}`);
} else if (meeting.value.joinType === "2") { } else if (meeting.value.joinType === "2") {
const { data } = await registerJoinUser(newJoinUser.value); // const { data } = await registerJoinUser(newJoinUser.value);
store.commit("setPassword", data); // store.commit("setPassword", data);
console.log(meetingId.value);
store.commit("setJoinUser", newJoinUser.value); store.commit("setJoinUser", newJoinUser.value);
router.push(`/meeting/${meetingId.value}`); router.push(`/meeting/${meetingId.value}`);
} else if (meeting.value.joinType === "3") { } else if (meeting.value.joinType === "3") {
const { data } = await visitorJoinUser(newJoinUser.value); // const { data } = await visitorJoinUser(newJoinUser.value);
store.commit("setPassword", data); // store.commit("setPassword", data);
store.commit("setJoinUser", newJoinUser.value); store.commit("setJoinUser", newJoinUser.value);
router.push(`/meeting/${meetingId.value}`); router.push(`/meeting/${meetingId.value}`);
} }