会议背景顶部预留边距
This commit is contained in:
@ -19,9 +19,7 @@
|
||||
|
||||
<script>
|
||||
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
||||
// import { getToken } from "@/utils/auth";
|
||||
import { onBeforeUnmount, ref, shallowRef, toRefs, watch } from "vue";
|
||||
|
||||
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
|
||||
|
||||
export default {
|
||||
@ -39,6 +37,10 @@ export default {
|
||||
type: String,
|
||||
default: "820px",
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, context) {
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
@ -68,14 +70,12 @@ export default {
|
||||
"redo",
|
||||
"undo",
|
||||
],
|
||||
|
||||
// excludeKeys: ["insertVideo", "uploadVideo"],
|
||||
};
|
||||
const editorConfig = {
|
||||
placeholder: "请输入内容...",
|
||||
autoFocus: props.focus,
|
||||
};
|
||||
|
||||
// console.log(editor.getMenuConfig('uploadImage'));
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
|
||||
@ -68,7 +68,10 @@ router.beforeEach(async (to) => {
|
||||
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("setJoinType", store.state.meeting.joinType);
|
||||
return `/verify/${to.params.meetingId}`;
|
||||
@ -94,6 +97,7 @@ router.beforeEach(async (to) => {
|
||||
}
|
||||
} else {
|
||||
if (_.isEmpty(store.state.joinUser)) {
|
||||
console.log("error");
|
||||
return `/verify/${to.params.meetingId}`;
|
||||
} else {
|
||||
if (store.state.meeting.joinType === "2") {
|
||||
|
||||
@ -10,7 +10,7 @@ const store = createStore({
|
||||
password: "", //参会密码
|
||||
joinType: localStorage.getItem("JOINTYPE")
|
||||
? JSON.parse(localStorage.getItem("JOINTYPE"))
|
||||
: "1",
|
||||
: "",
|
||||
},
|
||||
mutations: {
|
||||
// 设置参会人员信息
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<div
|
||||
class="display-message"
|
||||
v-html="editingMessage"
|
||||
@click="showRichEditor = true"
|
||||
@click="openRichMessageEditor"
|
||||
></div>
|
||||
<!-- <wangEditor v-model="editingMessage" :height="`100px`"></wangEditor> -->
|
||||
<!-- <div class="btns"> -->
|
||||
@ -58,7 +58,7 @@
|
||||
<messageList :messageList="messages"></messageList>
|
||||
<div class="option-bar">
|
||||
<el-input
|
||||
v-model="editingMessage"
|
||||
v-model="richMessage"
|
||||
style="margin-right: 15px"
|
||||
></el-input>
|
||||
<!-- <wangEditor
|
||||
@ -78,13 +78,12 @@
|
||||
>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog title="高级输入框" v-model="showRichEditor">
|
||||
<wangEditor v-model="editingMessage" width="100%"></wangEditor>
|
||||
<el-dialog title="富文本输入框" v-model="showRichEditor">
|
||||
<wangEditor v-model="richMessage" width="100%" :focus="true"></wangEditor>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="showRichEditor = false"
|
||||
>确定</el-button
|
||||
>
|
||||
<el-button type="warning" @click="cancelRichMessage">取消</el-button>
|
||||
<el-button type="primary" @click="saveRichMessage">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -93,6 +92,7 @@
|
||||
<script setup>
|
||||
import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import axios from "axios";
|
||||
import { signMeeting, generateSignature } from "@/api/meeting";
|
||||
import wangEditor from "@/components/wangEditor";
|
||||
import messageList from "@/components/messageList";
|
||||
@ -176,12 +176,12 @@ const setTextLabel = () => {
|
||||
const meetingConfig = reactive({
|
||||
client: ZoomMtgEmbedded.createClient(),
|
||||
// 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,
|
||||
passWord: store.state.password,
|
||||
role: route.name === "Host" ? 1 : 0,
|
||||
// signatureEndpoint: "http://120.26.107.74:4000",
|
||||
userEmail: "",
|
||||
userEmail: "webinartest@126.com",
|
||||
userName: joinName.value,
|
||||
// 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
|
||||
@ -212,6 +212,18 @@ const getSignature = async () => {
|
||||
role: meetingConfig.role,
|
||||
});
|
||||
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) => {
|
||||
@ -263,8 +275,6 @@ const startMeeting = async (signature) => {
|
||||
} catch (error) {
|
||||
isMeetingLoading.value = false;
|
||||
}
|
||||
// console.log(meetingConfig.client.checkSystemRequirements());
|
||||
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
|
||||
};
|
||||
const setFullScreen = () => {
|
||||
videoElementRef.value.requestFullscreen();
|
||||
@ -283,7 +293,7 @@ const initDesktopLayout = () => {
|
||||
".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
|
||||
) ||
|
||||
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`;
|
||||
|
||||
@ -312,30 +322,40 @@ const setLayout = (templateId) => {
|
||||
console.log(templateId);
|
||||
const v_s_wrap_el =
|
||||
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(
|
||||
".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 = "";
|
||||
|
||||
const v_wrap_el =
|
||||
document.querySelector(
|
||||
".zmwebsdk-makeStyles-wrap-167.zmwebsdk-makeStyles-wrap-171"
|
||||
) ||
|
||||
document.querySelector(
|
||||
".zmwebsdk-makeStyles-wrap-177.zmwebsdk-makeStyles-wrap-181"
|
||||
);
|
||||
if (templateId === "1" && inSharing.value) {
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
|
||||
if (!inSharing.value) return;
|
||||
|
||||
const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
|
||||
if (templateId === "1") {
|
||||
// 课件|视频 对半分
|
||||
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_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`;
|
||||
} 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_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") {
|
||||
showExamDialog.value = false;
|
||||
showQuestionnaireDialog.value = false;
|
||||
ElMessageBox.alert("会议已结束");
|
||||
socket.close();
|
||||
}
|
||||
@ -405,22 +423,27 @@ const 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 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 = () => {
|
||||
console.log(socket);
|
||||
@ -442,10 +465,6 @@ window.addEventListener("beforeunload", leaveConference);
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("beforeunload", leaveConference);
|
||||
});
|
||||
|
||||
// 是否显示考试和问卷弹窗
|
||||
const showExamDialog = ref(false);
|
||||
const showQuestionnaireDialog = ref(false);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#app-container {
|
||||
@ -485,11 +504,14 @@ const showQuestionnaireDialog = ref(false);
|
||||
margin: 5px;
|
||||
.display-message {
|
||||
border: 1px solid #666;
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
min-height: 100%;
|
||||
border-radius: 5px;
|
||||
margin-right: 5px;
|
||||
word-wrap: break-word;
|
||||
:deep(p) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.message-list) {
|
||||
@ -509,7 +531,7 @@ const showQuestionnaireDialog = ref(false);
|
||||
}
|
||||
}
|
||||
#video-element {
|
||||
visibility: hidden;
|
||||
// visibility: hidden;
|
||||
// height: 600px;
|
||||
}
|
||||
|
||||
|
||||
@ -92,24 +92,25 @@
|
||||
<script setup>
|
||||
import { computed, reactive, watch, ref, onMounted, onUnmounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import axios from "axios";
|
||||
import { signMeeting, generateSignature } from "@/api/meeting";
|
||||
import questions from "@/components/questions";
|
||||
import messageList from "@/components/messageList";
|
||||
import dayjs from "dayjs";
|
||||
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
|
||||
import _ from "lodash";
|
||||
// import { FullScreen } from "@element-plus/icons-vue";
|
||||
|
||||
import ReconnectingWebSocket from "reconnecting-websocket";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
console.log(route.name);
|
||||
|
||||
const meetingNote = computed(() => store.getters.meetingNote); // 会议介绍
|
||||
const meetingSchedule = computed(() => store.getters.meetingSchedule); // 会议日程
|
||||
const expertInfo = computed(() => store.getters.expertInfo); // 专家信息
|
||||
const isMeetingLoading = ref(true); // 视频课件是否正在加载
|
||||
const templateId = ref(1); // 布局 id
|
||||
const templateId = ref(6); // 布局 id
|
||||
if (store.getters.templateId) {
|
||||
templateId.value = store.getters.templateId;
|
||||
}
|
||||
@ -119,15 +120,12 @@ const screenWidth = ref(0); // 屏幕宽度
|
||||
const meetingWidth = ref(0); // 视频课件容器元素宽度
|
||||
const meetingHeight = ref(0); // 视频课件容器元素高度
|
||||
screenWidth.value = document.body.offsetWidth;
|
||||
if (route.name === "Host") {
|
||||
joinAccount.value = route.params.username;
|
||||
joinName.value = route.params.nickname;
|
||||
} else {
|
||||
joinAccount.value =
|
||||
store.getters.icCard || store.getters.phone || store.getters.nickname;
|
||||
joinName.value =
|
||||
store.getters.nickname || store.getters.phone || store.getters.icCard;
|
||||
}
|
||||
|
||||
joinAccount.value =
|
||||
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 videoElementRef = ref(null); // 视频课件容器元素
|
||||
@ -135,11 +133,11 @@ const chatRightRef = ref(null); // 右侧聊天元素
|
||||
onMounted(() => {
|
||||
meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`; // 设置背景图片
|
||||
setTextLabel();
|
||||
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.95;
|
||||
meetingHeight.value = (meetingWidth.value * 9) / 16;
|
||||
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.95; // zoom 会议组件宽度是父元素宽度的 95%
|
||||
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.height = meetingHeight.value + "px";
|
||||
chatRightRef.value.style.height = meetingHeight.value + "px";
|
||||
});
|
||||
|
||||
// 设置文本标签
|
||||
@ -150,63 +148,69 @@ const setTextLabel = () => {
|
||||
store.getters.textLabelList.forEach((item) => {
|
||||
const labelObj = JSON.parse(item.textLabel);
|
||||
const textEl = document.createElement("div");
|
||||
console.log(labelObj);
|
||||
textEl.id = `${_.uniqueId("tag-")}`;
|
||||
textEl.innerHTML = labelObj.content;
|
||||
textEl.className = "text-tag";
|
||||
// console.log(labelObj);
|
||||
textEl.style.backgroundColor = labelObj.backgroundColor;
|
||||
textEl.style.visibility =
|
||||
labelObj.visibility === "1" ? "visible" : "hidden";
|
||||
|
||||
textEl.style.left = `${labelObj.x}`;
|
||||
textEl.style.top = `${labelObj.y}`;
|
||||
meetingContainerRef.value.appendChild(textEl);
|
||||
});
|
||||
};
|
||||
// console.log(to.);
|
||||
|
||||
// 会议配置
|
||||
const meetingConfig = reactive({
|
||||
client: ZoomMtgEmbedded.createClient(),
|
||||
// This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
|
||||
sdkKey: "TUgbQFx4RhPHDPa0OQAKVgPL2dPGQoVqZIuW",
|
||||
meetingNumber: store.getters.meetingNumber,
|
||||
passWord: store.state.password,
|
||||
role: route.name === "Host" ? 1 : 0,
|
||||
sdkKey: "99Spa64AWHYVZD95imUpVyMD0KF9CpEIrIb1",
|
||||
// meetingNumber: store.getters.meetingNumber,
|
||||
// meetingNumber: store.getters.meetingNumber,
|
||||
// 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",
|
||||
userEmail: "",
|
||||
userName: joinName.value,
|
||||
// userEmail:
|
||||
// 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:
|
||||
// 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
|
||||
registrantToken: "",
|
||||
registrantToken:
|
||||
"Xhi0bKUzyNBnJwe2EJWZ0JZ3IYqtPgyyWE1CXW3z2X4.DQMAAAAWm3t-jxZqSS14R0dCSFRDNkFibVQwakpHbFd3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
|
||||
});
|
||||
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 { sign } = await generateSignature({
|
||||
meetingNumber: store.getters.meetingNumber,
|
||||
role: meetingConfig.role,
|
||||
});
|
||||
console.log(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) => {
|
||||
let meetingSDKElement = document.getElementById("video-element");
|
||||
try {
|
||||
@ -256,8 +260,6 @@ const startMeeting = async (signature) => {
|
||||
} catch (error) {
|
||||
isMeetingLoading.value = false;
|
||||
}
|
||||
// console.log(meetingConfig.client.checkSystemRequirements());
|
||||
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
|
||||
};
|
||||
const setFullScreen = () => {
|
||||
videoElementRef.value.requestFullscreen();
|
||||
@ -267,7 +269,6 @@ onMounted(() => {
|
||||
});
|
||||
// 初始化
|
||||
const initDesktopLayout = () => {
|
||||
console.log(meetingHeight.value);
|
||||
// 切换到 gallery view
|
||||
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"
|
||||
) ||
|
||||
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`;
|
||||
// document.querySelector(
|
||||
// ".zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
|
||||
// ).style.height = `${meetingHeight.value - 45}px`;
|
||||
console.log(meetingHeight.value);
|
||||
|
||||
// 初始化宽度
|
||||
//
|
||||
// zmwebsdk-MuiPaper-root zmwebsdk-makeStyles-root-21 zmwebsdk-MuiPaper-elevation1 zmwebsdk-MuiPaper-rounded
|
||||
document.querySelector(
|
||||
".zmwebsdk-MuiPaper-root.zmwebsdk-makeStyles-root-21.zmwebsdk-MuiPaper-elevation1.zmwebsdk-MuiPaper-rounded"
|
||||
).style.width = `${meetingWidth.value - 4}px`;
|
||||
console.log(`${meetingWidth.value - 4}px`);
|
||||
// 加载完成显示 video element
|
||||
document.querySelector("#video-element").style.visibility = "visible";
|
||||
};
|
||||
@ -296,11 +297,6 @@ setInterval(() => {
|
||||
const elSharing = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
|
||||
// console.log(elSharing);
|
||||
if (elSharing) {
|
||||
// if (elSharing.className.includes("in-sharing")) {
|
||||
// inSharing.value = true;
|
||||
// } else {
|
||||
// inSharing.value = false;
|
||||
// }
|
||||
inSharing.value = true;
|
||||
} else {
|
||||
inSharing.value = false;
|
||||
@ -312,51 +308,66 @@ const setLayout = (templateId) => {
|
||||
console.log(templateId);
|
||||
const v_s_wrap_el =
|
||||
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(
|
||||
".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 = "";
|
||||
|
||||
const v_wrap_el =
|
||||
document.querySelector(
|
||||
".zmwebsdk-makeStyles-wrap-167.zmwebsdk-makeStyles-wrap-171"
|
||||
) ||
|
||||
document.querySelector(
|
||||
".zmwebsdk-makeStyles-wrap-177.zmwebsdk-makeStyles-wrap-181"
|
||||
);
|
||||
if (templateId === "1" && inSharing.value) {
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
|
||||
if (!inSharing.value) return;
|
||||
|
||||
const s_wrap_el = document.querySelector(".zmwebsdk-makeStyles-inSharing-46");
|
||||
if (templateId === "1") {
|
||||
// 课件|视频 对半分
|
||||
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_s_wrap_el.style.flexDirection = "row-reverse";
|
||||
} else if (templateId === "3" && inSharing.value) {
|
||||
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
|
||||
} else if (templateId === "4" && inSharing.value) {
|
||||
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 4}px`;
|
||||
} else if (templateId === "3") {
|
||||
// 课件|视频 左4/5 | 右边1/5
|
||||
v_wrap_el.style.width = `${(meetingWidth.value - 4) / 5}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";
|
||||
} 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) => {
|
||||
console.log(newVal);
|
||||
if (newVal) {
|
||||
setLayout(templateId.value);
|
||||
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
|
||||
} else {
|
||||
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
|
||||
const galleryViewButton = document.querySelector(
|
||||
"#suspension-view-tab-thumbnail-gallery"
|
||||
);
|
||||
galleryViewButton.click();
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-171").style.width = "";
|
||||
document.querySelector(
|
||||
".zmwebsdk-MuiBox-root.zmwebsdk-makeStyles-root-166.zmwebsdk-makeStyles-root-170"
|
||||
).style.flexDirection = "";
|
||||
const v_wrap_el =
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-167") ||
|
||||
document.querySelector(".zmwebsdk-makeStyles-wrap-177");
|
||||
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({});
|
||||
const initWebSocket = () => {
|
||||
// 建立websocket连接
|
||||
@ -521,7 +532,7 @@ const showQuestionnaireDialog = ref(false);
|
||||
}
|
||||
}
|
||||
#video-element {
|
||||
visibility: hidden;
|
||||
// visibility: hidden;
|
||||
// height: 600px;
|
||||
}
|
||||
|
||||
|
||||
@ -37,7 +37,11 @@
|
||||
"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
@ -545,17 +549,19 @@ setJoinUserDefaultValue();
|
||||
const newJoinUserRef = ref(null);
|
||||
const submitVerify = async (newJoinUserRef) => {
|
||||
await newJoinUserRef.validate();
|
||||
console.log(meeting.value.joinType);
|
||||
if (meeting.value.joinType === "1") {
|
||||
store.commit("setJoinUser", newJoinUser.value);
|
||||
router.push(`/meeting/${meetingId.value}`);
|
||||
} else if (meeting.value.joinType === "2") {
|
||||
const { data } = await registerJoinUser(newJoinUser.value);
|
||||
store.commit("setPassword", data);
|
||||
// const { data } = await registerJoinUser(newJoinUser.value);
|
||||
// store.commit("setPassword", data);
|
||||
console.log(meetingId.value);
|
||||
store.commit("setJoinUser", newJoinUser.value);
|
||||
router.push(`/meeting/${meetingId.value}`);
|
||||
} else if (meeting.value.joinType === "3") {
|
||||
const { data } = await visitorJoinUser(newJoinUser.value);
|
||||
store.commit("setPassword", data);
|
||||
// const { data } = await visitorJoinUser(newJoinUser.value);
|
||||
// store.commit("setPassword", data);
|
||||
store.commit("setJoinUser", newJoinUser.value);
|
||||
router.push(`/meeting/${meetingId.value}`);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user