考试和问卷弹窗
This commit is contained in:
465
src/views/meeting.vue
Normal file
465
src/views/meeting.vue
Normal file
@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div id="app-container" ref="appContainer">
|
||||
<div class="meeting-container" ref="meetingContainerRef">
|
||||
<div id="video-element"></div>
|
||||
</div>
|
||||
|
||||
<el-tabs class="tabs" type="border-card">
|
||||
<el-tab-pane label="会议介绍">
|
||||
<div class="meeting-info meeting-note" v-html="meetingNote"></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="会议日程"
|
||||
><div
|
||||
class="meeting-info meeting-schedule"
|
||||
v-html="meetingSchedule"
|
||||
></div
|
||||
></el-tab-pane>
|
||||
<el-tab-pane label="专家介绍"
|
||||
><div class="meeting-info expert-info" v-html="expertInfo"></div
|
||||
></el-tab-pane>
|
||||
<el-tab-pane label="聊天"
|
||||
><div class="meeting-info chat">
|
||||
<messageList :messageList="messages"></messageList>
|
||||
<div class="option-bar">
|
||||
<wangEditor
|
||||
v-model="editingMessage"
|
||||
height="100px"
|
||||
width="80%"
|
||||
></wangEditor>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="sendMessage"
|
||||
:disabled="editingMessage.length === 0"
|
||||
>发送</el-button
|
||||
>
|
||||
</div>
|
||||
</div></el-tab-pane
|
||||
>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog
|
||||
v-model="showSignDialog"
|
||||
:close-on-click-modal="false"
|
||||
title="签到"
|
||||
width="30%"
|
||||
>
|
||||
<span>是否确认签到</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="submitSign">确定</el-button>
|
||||
<el-button type="primary" @click="showSignDialog = false"
|
||||
>取消</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<questions
|
||||
mode="1"
|
||||
:showDialog="showExamDialog"
|
||||
@close="showExamDialog = $event"
|
||||
></questions>
|
||||
|
||||
<questions
|
||||
mode="2"
|
||||
:showDialog="showQuestionnaireDialog"
|
||||
@close="showQuestionnaireDialog = $event"
|
||||
></questions>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, reactive, watch, ref, onMounted } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { signMeeting } from "@/api/meeting";
|
||||
import wangEditor from "@/components/wangEditor";
|
||||
import questions from "@/components/questions";
|
||||
import messageList from "@/components/messageList";
|
||||
import dayjs from "dayjs";
|
||||
import ZoomMtgEmbedded from "@zoomus/websdk/embedded";
|
||||
import axios from "axios";
|
||||
import _ from "lodash";
|
||||
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const meetingNote = computed(() => store.getters.meetingNote);
|
||||
const meetingSchedule = computed(() => store.getters.meetingSchedule);
|
||||
const expertInfo = computed(() => store.getters.expertInfo);
|
||||
|
||||
const templateId = ref(1);
|
||||
if (store.getters.templateId) {
|
||||
templateId.value = store.getters.templateId;
|
||||
}
|
||||
const joinAccount = ref("");
|
||||
joinAccount.value =
|
||||
store.getters.nickname || store.getters.phone || store.getters.icCard;
|
||||
const meetingWidth = ref(0);
|
||||
const meetingHeight = ref(0);
|
||||
// 设置会议背景大小、图片
|
||||
const meetingContainerRef = ref(null);
|
||||
onMounted(() => {
|
||||
meetingContainerRef.value.style.background = `url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
|
||||
setTextLabel();
|
||||
console.log(meetingContainerRef.value.offsetWidth);
|
||||
meetingWidth.value = meetingContainerRef.value.offsetWidth * 0.8;
|
||||
meetingHeight.value = (meetingWidth.value * 3) / 4;
|
||||
document.querySelector("#video-element").style.width =
|
||||
meetingWidth.value + "px";
|
||||
document.querySelector("#video-element").style.height =
|
||||
meetingHeight.value + "px";
|
||||
});
|
||||
|
||||
// 设置文本标签
|
||||
const setTextLabel = () => {
|
||||
document.querySelectorAll(".text-tag").forEach((el) => {
|
||||
el.remove();
|
||||
});
|
||||
store.getters.textLabelList.forEach((item) => {
|
||||
const labelObj = JSON.parse(item.textLabel);
|
||||
const textEl = document.createElement("div");
|
||||
textEl.id = `${_.uniqueId("tag-")}`;
|
||||
textEl.innerHTML = labelObj.content;
|
||||
textEl.className = "text-tag";
|
||||
console.log(labelObj);
|
||||
textEl.style.left = `${labelObj.x}`;
|
||||
textEl.style.top = `${labelObj.y}`;
|
||||
document.querySelector(".meeting-container").appendChild(textEl);
|
||||
});
|
||||
};
|
||||
|
||||
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: 0,
|
||||
signatureEndpoint: "http://120.26.107.74:4000",
|
||||
userEmail: "",
|
||||
userName: joinAccount.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
|
||||
// Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/webinars#join-registered
|
||||
registrantToken: "",
|
||||
});
|
||||
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 res = await checkMedia();
|
||||
if (!res.audio || !res.video) {
|
||||
return ElMessageBox.alert(
|
||||
`摄像头状态 : ${res.video ? "可用" : "禁用"}\n麦克风状态 : ${
|
||||
res.audio ? "可用" : "禁用"
|
||||
}`
|
||||
);
|
||||
}
|
||||
console.log(res);
|
||||
axios
|
||||
.post(meetingConfig.signatureEndpoint, {
|
||||
meetingNumber: meetingConfig.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");
|
||||
|
||||
console.log(meetingConfig);
|
||||
meetingConfig.client.init({
|
||||
debug: true,
|
||||
zoomAppRoot: meetingSDKElement,
|
||||
language: "zh-CN",
|
||||
customize: {
|
||||
video: {
|
||||
isResizable: false,
|
||||
popper: {
|
||||
disableDraggable: true,
|
||||
},
|
||||
viewSizes: {
|
||||
default: {
|
||||
width: meetingWidth.value,
|
||||
height: meetingHeight.value,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
meetingInfo: [
|
||||
"topic",
|
||||
"host",
|
||||
"mn",
|
||||
"pwd",
|
||||
"telPwd",
|
||||
"invite",
|
||||
"participant",
|
||||
"dc",
|
||||
"enctype",
|
||||
],
|
||||
// toolbar: {
|
||||
// buttons: [
|
||||
// {
|
||||
// text: "Custom Button",
|
||||
// className: "CustomButton",
|
||||
// onClick: () => {
|
||||
// console.log("custom button");
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
},
|
||||
});
|
||||
await meetingConfig.client.join({
|
||||
sdkKey: meetingConfig.sdkKey,
|
||||
signature: signature,
|
||||
meetingNumber: meetingConfig.meetingNumber,
|
||||
password: meetingConfig.passWord,
|
||||
userName: meetingConfig.userName,
|
||||
userEmail: meetingConfig.userEmail,
|
||||
tk: meetingConfig.registrantToken,
|
||||
});
|
||||
// console.log(meetingConfig.client.checkSystemRequirements());
|
||||
initDesktopLayout();
|
||||
// document.querySelector("#suspension-view-tab-thumbnail-speaker").click();
|
||||
};
|
||||
// 初始化
|
||||
const initDesktopLayout = () => {
|
||||
console.log(meetingHeight.value);
|
||||
// 切换到 gallery view
|
||||
document.querySelector("#suspension-view-tab-thumbnail-gallery").click();
|
||||
// 初始化高度
|
||||
document.querySelector(".MuiBox-root.jss167.jss161.jss165").style.height = `${
|
||||
meetingHeight.value - 45
|
||||
}px`;
|
||||
// 初始化宽度
|
||||
document.querySelector(
|
||||
".MuiPaper-root.jss25.MuiPaper-elevation1.MuiPaper-rounded"
|
||||
).style.width = `${meetingWidth.value - 4}px`;
|
||||
// 加载完成显示 video element
|
||||
document.querySelector("#video-element").style.visibility = "visible";
|
||||
};
|
||||
// 检测屏幕共享开启状态变化
|
||||
const inSharing = ref(false); // 是否开启屏幕共享
|
||||
setInterval(() => {
|
||||
const elSharing = document.querySelector(".jss51");
|
||||
if (elSharing) {
|
||||
if (elSharing.className.includes("in-sharing")) {
|
||||
inSharing.value = true;
|
||||
} else {
|
||||
inSharing.value = false;
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// 根据id设置布局
|
||||
const setLayout = (templateId) => {
|
||||
console.log(templateId);
|
||||
document.querySelector(
|
||||
".MuiBox-root.jss167.jss161.jss165"
|
||||
).style.flexDirection = "";
|
||||
if (templateId === "1" && inSharing.value) {
|
||||
document.querySelector(".jss162.jss166").style.width = `${
|
||||
meetingWidth.value / 2 - 2
|
||||
}px`;
|
||||
} else if (templateId === "2" && inSharing.value) {
|
||||
document.querySelector(".jss162.jss166").style.width = `${
|
||||
meetingWidth.value / 2 - 2
|
||||
}px`;
|
||||
document.querySelector(
|
||||
".MuiBox-root.jss167.jss161.jss165"
|
||||
).style.flexDirection = "row-reverse";
|
||||
} else if (templateId === "3" && inSharing.value) {
|
||||
document.querySelector(".jss162.jss166").style.width = `${
|
||||
(meetingWidth.value - 4) / 4
|
||||
}px`;
|
||||
} else if (templateId === "4" && inSharing.value) {
|
||||
document.querySelector(".jss162.jss166").style.width = `${
|
||||
(meetingWidth.value - 4) / 4
|
||||
}px`;
|
||||
document.querySelector(
|
||||
".MuiBox-root.jss167.jss161.jss165"
|
||||
).style.flexDirection = "row-reverse";
|
||||
}
|
||||
};
|
||||
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(".jss162.jss166").style.width = "";
|
||||
document.querySelector(
|
||||
".MuiBox-root.jss167.jss161.jss165"
|
||||
).style.flexDirection = "";
|
||||
}
|
||||
});
|
||||
getSignature();
|
||||
|
||||
// 建立websocket连接
|
||||
const socket = new WebSocket(
|
||||
`ws://118.195.192.58:1618/websocket/meeting/${store.getters.meetingId}/${joinAccount.value}`
|
||||
);
|
||||
socket.addEventListener("open", () => {
|
||||
// socket.send("Hello Server!");
|
||||
console.log("websocket,已连接");
|
||||
});
|
||||
|
||||
/* 签到功能 */
|
||||
// 提交签到
|
||||
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("签到成功");
|
||||
};
|
||||
|
||||
// 监听websocket消息
|
||||
socket.addEventListener("message", async (event) => {
|
||||
const data = JSON.parse(JSON.parse(event.data));
|
||||
console.log(data);
|
||||
// 会议信息更新时
|
||||
if (data.type === "isRefreshMeeting") {
|
||||
await store.dispatch("getMeetingInfo", store.getters.meetingId);
|
||||
meetingContainerRef.value.style.background = ` url(${store.getters.templateBackgroundPic}) 0% 0% / cover no-repeat`;
|
||||
templateId.value = store.getters.templateId;
|
||||
setLayout(templateId.value);
|
||||
setTextLabel();
|
||||
}
|
||||
// 开始签到时
|
||||
else if (data.type === "isStartSign") {
|
||||
console.log(data);
|
||||
showSignDialog.value = true;
|
||||
}
|
||||
// 签到结束时
|
||||
else if (data.type === "isEndSign") {
|
||||
showSignDialog.value = false;
|
||||
}
|
||||
// 收到聊天消息时
|
||||
else if (data.type === "isChat") {
|
||||
console.log(JSON.parse(data.content));
|
||||
messages.value.push({
|
||||
...JSON.parse(data.content),
|
||||
id: _.uniqueId(),
|
||||
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
||||
});
|
||||
}
|
||||
// 开始考试时
|
||||
else if (data.type === "isStartExam") {
|
||||
showExamDialog.value = true;
|
||||
}
|
||||
// 开始问卷时
|
||||
else if (data.type === "isStartQuestionnaire") {
|
||||
showQuestionnaireDialog.value = true;
|
||||
}
|
||||
// 会议结束时
|
||||
else if (data.type === "isCloseMeeting") {
|
||||
showExamDialog.value = false;
|
||||
showQuestionnaireDialog.value = false;
|
||||
ElMessageBox.alert("会议已结束");
|
||||
}
|
||||
});
|
||||
|
||||
/* 聊天功能 */
|
||||
const messages = ref([]); // 消息列表
|
||||
const editingMessage = ref(""); // 正在编辑的内容
|
||||
// 发送消息
|
||||
const sendMessage = () => {
|
||||
console.log(socket);
|
||||
socket.send(editingMessage.value);
|
||||
messages.value.push({
|
||||
id: _.uniqueId(),
|
||||
account: joinAccount.value,
|
||||
msg: editingMessage.value,
|
||||
isMe: true,
|
||||
time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
||||
});
|
||||
editingMessage.value = "";
|
||||
};
|
||||
|
||||
// 是否显示考试和问卷弹窗
|
||||
const showExamDialog = ref(false);
|
||||
const showQuestionnaireDialog = ref(false);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#app-container {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
:deep(.text-tag) {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.meeting-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#video-element {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
.meeting-info {
|
||||
:deep(p) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
:deep(.el-tabs__content) {
|
||||
.chat {
|
||||
.option-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.MuiPaper-root) {
|
||||
background: transparent;
|
||||
box-shadow: 0 0;
|
||||
}
|
||||
:deep(.MuiToolbar-root) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.MuiPaper-root.jss2.jss9.MuiPaper-elevation1.MuiPaper-rounded) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user