会议结束提醒，考试、问卷弹窗关闭后重新打开

2022-06-15 15:36:20 +08:00
parent 95beed3435
commit 8390993384
5 changed files with 201 additions and 35 deletions
--- a/src/components/mediaCheck.vue
+++ b/src/components/mediaCheck.vue
@ -6,6 +6,7 @@
      v-model="showCheckMediaVideo"
      :close-on-click-modal="false"
      :fullscreen="screenWidth < 900"
+      :show-close="false"
      width="60%"
    >
      <el-alert
--- a/src/components/questions.vue
+++ b/src/components/questions.vue
@ -6,8 +6,12 @@
    :width="'80%'"
    :fullscreen="screenWidth < 900"
    @close="closeDialog"
-  >
-    <div class="questions-list">
+    ><div
+      v-if="isQuestionsLoading"
+      v-loading="isQuestionsLoading"
+      style="width: 100%; height: 400px"
+    ></div>
+    <div v-else class="questions-list">
      <el-form :model="form" ref="questionsRef">
        <el-form-item
          v-for="(item, index) in form.questionsList"
@ -96,10 +100,14 @@ const props = defineProps({
    type: [String, Number],
    required: true,
  },
+  questionsList: {
+    type: Array,
+    default: [],
+  },
 });
 const screenWidth = ref(0);
-screenWidth.width = window.screen.width;
-const { showDialog, mode } = toRefs(props);
+screenWidth.value = window.screen.width;
+const { showDialog, mode, questionsList } = toRefs(props);
 const emit = defineEmits(["close", "stage"]);
 const joinAccount = ref("");
 joinAccount.value =
@ -109,19 +117,31 @@ joinAccount.value =
 const form = ref({
  questionsList: [],
 });
-
+const isQuestionsLoading = ref(true);
 const loadQuestionsList = async () => {
-  const { data } = await getQuestionsList({
-    meetingId: store.getters.meetingId,
-    type: mode.value,
-  });
-  form.value.questionsList = data.map((item) => {
-    return {
-      ...item,
-      choiceAnswerIdStr: [],
-    };
-  });
-  stageAnswer();
+  try {
+    let data;
+    if (questionsList.value.length > 0) {
+      console.log(questionsList.value.length);
+      form.value.questionsList = questionsList.value.map((el) => el);
+    } else {
+      data = await getQuestionsList({
+        meetingId: store.getters.meetingId,
+        type: mode.value,
+      });
+      console.log(data);
+      form.value.questionsList = data.data.map((item) => {
+        return {
+          ...item,
+          choiceAnswerIdStr: [],
+        };
+      });
+    }
+    isQuestionsLoading.value = false;
+    stageAnswer();
+  } catch (error) {
+    isQuestionsLoading.value = false;
+  }
 };

 const questionsRef = ref(null);
--- a/src/router/index.js
+++ b/src/router/index.js
@ -10,6 +10,7 @@ import {
  panelistJoinMeeting,
  superviseJoinMeeting,
 } from "@/api/meeting";
+import dayjs from "dayjs";
 const router = createRouter({
  history: createWebHistory(),
  routes: [
@ -38,11 +39,6 @@ const router = createRouter({
      name: "Panelist",
      component: () => import("@/views/meeting.vue"),
    },
-    // {
-    //   path: "/host/:meetingId/:hostinfo",
-    //   name: "Host",
-    //   component: () => import("@/views/host.vue"),
-    // },
    {
      path: "/host/:meetingId/:createEmail/:pwd/:username/:nickname",
      name: "Host",
@ -53,11 +49,23 @@ const router = createRouter({
      name: "Supervisor",
      component: () => import("@/views/meeting.vue"),
    },
+    {
+      path: "/error",
+      name: "Error",
+      component: () => import("@/views/error.vue"),
+    },
    {
      path: "/:pathMatch(.*)*",
      name: "NotFound",
-      component: () => import("@/views/NotFound.vue"),
+      component: () => import("@/views/error.vue"),
+      // redirect: "/error?errorType=notfound",
    },
+    // {
+    //   path: "/:pathMatch(.*)*",
+    //   name: "NotFound",
+    //   // component: () => import("@/views/error.vue"),
+    //   redirect: "/error?errorType=notfound",
+    // },
  ],
 });

@ -67,10 +75,20 @@ router.beforeEach(async (to) => {
  if (!store.state.meeting.id && to.params.meetingId) {
    await store.dispatch("getMeetingInfo", to.params.meetingId);
  }
-  // 当参会角色（host,panelist,meeting,supervisor）改变时,清空用户信息、消息列表
-  // console.log(["Meeting", "Host", "Panelist", "Supervisor"].includes(to.name));
+  // 判断会议是否结束
+  if (
+    dayjs().isAfter(
+      dayjs(store.state.meeting.startTime).add(
+        store.state.meeting.duration,
+        "minute"
+      )
+    ) &&
+    to.name !== "Error"
+  ) {
+    return `/error?errorType=ended`;
+  }
  if (["Meeting", "Host", "Panelist", "Supervisor"].includes(to.name)) {
-    console.log(to.name);
+    // 当参会角色（host,panelist,meeting,supervisor）改变时,清空用户信息、消息列表
    if (store.state.joinRole && store.state.joinRole !== to.name) {
      store.commit("setJoinUser", {});
      store.commit("setMessagesList", []);
--- a/src/views/error.vue
+++ b/src/views/error.vue
@ -0,0 +1,26 @@
+<template>
+  <el-row type="flex" justify="center">
+    <el-col :sm="12" :lg="6">
+      <el-result
+        v-if="route.name === 'NotFound'"
+        icon="error"
+        title="没有找到页面"
+      >
+      </el-result>
+      <el-result
+        v-else-if="errorType === 'ended'"
+        icon="error"
+        title="会议已经结束"
+      >
+      </el-result>
+      <el-result v-else icon="error" title="其他错误"> </el-result>
+    </el-col>
+  </el-row>
+</template>
+<script setup name="Error">
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+const route = useRoute();
+const errorType = ref("");
+errorType.value = route.query.errorType;
+</script>
--- a/src/views/meeting.vue
+++ b/src/views/meeting.vue
@ -64,17 +64,42 @@
          @send="sendMessage"
        />
      </el-tab-pane>
-      <el-tab-pane label="其他">
+      <el-tab-pane label="考核">
        <!-- // 签到、考试、问卷弹窗 -->
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"
-            ><el-button style="width: 100%">按钮</el-button></el-col
+            ><el-button
+              type="primary"
+              :disabled="
+                !isDuringSignPeriod || store.state.joinUser.signSubmited
+              "
+              style="width: 100%"
+              @click="showSignDialog = true"
+              >签到</el-button
+            ></el-col
          >
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"
-            ><el-button style="width: 100%">按钮</el-button></el-col
+            ><el-button
+              type="primary"
+              :disabled="
+                !isDuringExamPeriod || store.state.joinUser.examSubmited
+              "
+              @click="handleReOpenExam"
+              style="width: 100%"
+              >考试</el-button
+            ></el-col
          >
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8"
-            ><el-button style="width: 100%">按钮</el-button></el-col
+            ><el-button
+              type="primary"
+              style="width: 100%"
+              @click="showQuestionnaireDialog = true"
+              :disabled="
+                !isDuringQuestionnairePeriod ||
+                store.state.joinUser.questionnaireSubmited
+              "
+              >问卷</el-button
+            ></el-col
          >
        </el-row>
      </el-tab-pane>
@ -97,11 +122,29 @@
        </span>
      </template>
    </el-dialog>
+
+    <!-- <el-dialog
+      v-model="showSignSubmitedDialog"
+      :close-on-click-modal="false"
+      title="签到"
+      width="30%"
+      :fullscreen="screenWidth < 900"
+    >
+      <span>您已经签到过了</span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="showSignSubmitedDialog = false"
+            >关闭</el-button
+          >
+        </span>
+      </template></el-dialog
+    > -->
    <mediaCheck />

    <questions
      mode="1"
      @stage="getStageExamAnswer"
+      :questions-list="examQuestionsList"
      v-if="showExamDialog && route.name !== 'Host'"
      :showDialog="showExamDialog"
      @close="showExamDialog = $event"
@ -110,6 +153,7 @@
    <questions
      mode="2"
      @state="getStageQuestionnaireAnswer"
+      :questions-list="questionnaireQuestionsList"
      v-if="showQuestionnaireDialog && route.name !== 'Host'"
      :showDialog="showQuestionnaireDialog"
      @close="showQuestionnaireDialog = $event"
@ -184,6 +228,59 @@ const meetingConfig = reactive({
  registrantToken: route.name === "Host" ? "" : store.getters.token,
 });

+// 是否在签到时间段内
+const now = ref(dayjs());
+setInterval(() => {
+  now.value = dayjs();
+}, 1000);
+const isDuringSignPeriod = computed(() => {
+  const signModelList = store.state.meeting.signModelList.map((el) => el);
+  if (signModelList.length === 0) {
+    return false;
+  } else {
+    return signModelList.some((el) => {
+      return (
+        now.value.isAfter(dayjs(el.signStartTime)) &&
+        now.value.isBefore(dayjs(el.signEndTime))
+      );
+    });
+  }
+});
+
+const isDuringExamPeriod = computed(() => {
+  const examStartTime = dayjs(store.state.meeting.examStartTime);
+  const meetingEndTime = dayjs(store.state.meeting.startTime).add(
+    store.state.meeting.duration,
+    "minute"
+  );
+  if (!examStartTime) {
+    return false;
+  } else {
+    return (
+      now.value.isAfter(examStartTime) && now.value.isBefore(meetingEndTime)
+    );
+  }
+});
+const handleReOpenExam = () => {
+  showExamDialog.value = true;
+};
+const isDuringQuestionnairePeriod = computed(() => {
+  const questionnaireStartTime = dayjs(
+    store.state.meeting.questionnaireStartTime
+  );
+  const meetingEndTime = dayjs(store.state.meeting.startTime).add(
+    store.state.meeting.duration,
+    "minute"
+  );
+  if (!questionnaireStartTime) {
+    return false;
+  } else {
+    return (
+      now.value.isAfter(questionnaireStartTime) &&
+      now.value.isBefore(meetingEndTime)
+    );
+  }
+});
 // 开始会议
 const startMeeting = async () => {
  const { sign } = await generateSignature({
@ -224,7 +321,7 @@ const startMeeting = async () => {
      },
    });

-    console.log(meetingWidth.value, meetingHeight.value);
+    // console.log(meetingWidth.value, meetingHeight.value);
    await meetingConfig.client.join({
      sdkKey: meetingConfig.sdkKey,
      signature: sign,
@ -324,7 +421,7 @@ const switchToVideoOn = () => {
    const displayLiEl = document.querySelector(
      'ul[class^="zmwebsdk-makeStyles-avatarList"]>li'
    );
-    console.log(displayLiEl);
+    // console.log(displayLiEl);
    if (displayLiEl.className.includes("videoOn")) {
      console.log("开启了视频");
      clearInterval(timer);
@ -339,7 +436,7 @@ const switchToVideoOn = () => {
        const displayLiEl = document.querySelector(
          'ul[class^="zmwebsdk-makeStyles-avatarList"]>li'
        );
-        console.log(displayLiEl);
+        // console.log(displayLiEl);
      }, 100);
      clearInterval(timer);
    }
@ -406,7 +503,7 @@ setInterval(() => {

 // 监听共享屏幕状态
 watch(inSharing, (val) => {
-  console.log(val);
+  // console.log(val);
  if (val) {
    // setLayout(templateId.value);
    // makeVideoTop();
@ -429,7 +526,7 @@ watch(inSharing, (val) => {

 // 监听参会人员videoOn状态变化，自动切换到已开启摄像头的用户
 watch(attendeeslist, (val) => {
-  console.log(val);
+  // console.log(val);
  if (inSharing.value) {
    switchToVideoOn();
  }
@ -473,7 +570,7 @@ const setFullScreen = async () => {
    videoElementRef.value.style.height = `${
      screen.height - screen.width * 0.08
    }px`;
-    console.log(`${screen.height - screen.width * 0.08}px`);
+    // console.log(`${screen.height - screen.width * 0.08}px`);
    document
      .querySelectorAll(
        "div[id*=suspension-view-tabpanel]>.zmwebsdk-MuiBox-root.zmwebsdk-MuiBox-root"
@ -500,6 +597,10 @@ const submitSign = async () => {
    account: joinAccount.value,
  });
  showSignDialog.value = false;
+  store.commit("setJoinUser", {
+    ...store.state.joinUser,
+    signSubmited: true,
+  });
  ElMessage.success("签到成功");
 };
 // 当考试和问卷弹框未能正确弹出时，（即考试开始时，未加入会议），加载题目列表