student-client/src/features/OnlineExam/CheckComputer.vue

<template>
  <div style="max-width: 800px; margin: 30px auto; ">
    <Steps :current="current" size="small">
      <Step title="时钟"></Step>
      <Step title="网速"></Step>
      <Step title="摄像头"></Step>
      <Step title="声音"></Step>
      <Step title="微信小程序"></Step>
      <Step title="检测结果"></Step>
    </Steps>

    <div v-if="current === 0" class="section">
      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td class="first-td">检查项</td>
              <td>值</td>
              <td>状态</td>
            </tr>

            <tr>
              <td>电脑当前下载速度</td>
              <td>{{ network.downlink }}Mb</td>
              <td>
                <div v-if="network.downlinkStatus">
                  <Icon class="pass-check" type="md-checkmark" />
                </div>
                <div v-else>
                  <Icon
                    class="fail-cross"
                    title="下载速度不佳"
                    type="md-close"
                  />
                </div>
              </td>
            </tr>
            <tr>
              <td>电脑当前网络延迟</td>
              <td>{{ network.rrt }}毫秒</td>
              <td>
                <div v-if="network.rrtStatus">
                  <Icon class="pass-check" type="md-checkmark" />
                </div>
                <div v-else>
                  <Icon
                    class="fail-cross"
                    title="网络延迟较大"
                    type="md-close"
                  />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-if="current === 1" class="section">
      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td class="first-td">检查项</td>
              <td>值</td>
              <td>状态</td>
            </tr>

            <!-- <tr>
              <td>电脑当前时间</td>
              <td>{{ timeCurrent }} (北京时间)</td>
              <td></td>
            </tr> -->
            <!-- <tr>
              <td>电脑是否时间准确</td>
              <td>{{ timeDifference }}</td>
            </tr> -->
            <tr>
              <td>电脑时区</td>
              <td>{{ time.currentTimeZone }}</td>
              <td>
                <div v-if="time.timeZoneStatus">
                  <Icon class="pass-check" type="md-checkmark" />
                </div>
                <div v-else>
                  <Icon
                    class="fail-cross"
                    title="请将电脑设置为北京时区"
                    type="md-close"
                  />
                </div>
              </td>
            </tr>
            <tr>
              <td>电脑时钟频率</td>
              <td>
                <div v-if="time.clockRateStateResolved">
                  {{ time.clockRateDiff > 3 ? "时钟过慢" : "正常" }}
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
              <td>
                <div v-if="time.clockRateStateResolved">
                  <Icon
                    class="pass-check"
                    v-if="time.clockRateStatus"
                    type="md-checkmark"
                  />
                  <Icon
                    class="fail-cross"
                    v-else
                    title="请更换电脑"
                    type="md-close"
                  />
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-show="current === 2" class="section">
      <div>
        <div style="display: flex; justify-content: center;">
          <video
            id="video"
            ref="video"
            width="400"
            height="300"
            autoplay
          ></video>

          <!-- <div style="margin-left: 50px; margin-top: 100px;">
            <Button type="warning" @click="camera = '没有摄像头'">
              摄像头没有启用
            </Button>
            <div style="width: 30px; height: 30px;"></div>
            <Button type="primary" @click="camera = 'OK'">
              摄像头正常工作
            </Button>
          </div> -->
        </div>
      </div>

      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td class="first-td">检查项</td>
              <td>值</td>
              <td>状态</td>
            </tr>

            <tr>
              <td>摄像头正常启用</td>
              <td>{{ camera ? "正常" : "请检查摄像头" }}</td>
              <td>
                <div v-if="camera">
                  <Icon class="pass-check" type="md-checkmark" />
                </div>
                <div v-else>
                  <Icon
                    class="fail-cross"
                    title="请检查摄像头"
                    type="md-close"
                  />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-show="current === 3" class="section" style="text-align: center">
      <div>
        <div style="display: flex; margin-bottom: 30px;">
          <audio
            src="https://ecs-static.qmth.com.cn/check-audio.mp3"
            controls
            nodownload
            @loadeddata="
              sound.downloadResolved = true;
              sound.downloadStatus = true;
            "
            @error="
              sound.downloadResolved = true;
              sound.downloadStatus = false;
            "
          />

          <div style="margin-left: 30px; display: flex; ">
            <Button
              type="warning"
              @click="
                sound.playedStatusResolved = true;
                sound.playedStatus = false;
              "
              title="或者听不到声音"
            >
              不能播放声音
            </Button>
            <div style="width: 30px; height: 30px;"></div>
            <Button
              type="primary"
              @click="
                sound.playedStatusResolved = true;
                sound.playedStatus = true;
              "
            >
              能够播放声音
            </Button>
          </div>
        </div>
      </div>

      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td class="first-td">检查项</td>
              <td>值</td>
              <td>状态</td>
            </tr>

            <tr>
              <td>文件下载</td>
              <td>
                <div v-if="sound.downloadResolved">
                  {{ sound.downloadStatus ? "正常" : "出错" }}
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
              <td>
                <div v-if="sound.downloadResolved">
                  <div v-if="sound.downloadStatus">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon class="fail-cross" title="下载出错" type="md-close" />
                  </div>
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
            </tr>
            <tr>
              <td>声音播放</td>
              <td>
                <div v-if="sound.playedStatusResolved">
                  {{ sound.playedStatus ? "正常" : "出错" }}
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
              <td>
                <div v-if="sound.playedStatusResolved">
                  <div v-if="sound.playedStatus">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon
                      class="fail-cross"
                      title="不能播放声音"
                      type="md-close"
                    />
                  </div>
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-show="current === 4" class="section">
      <div>
        <div style="display: flex;">
          <div>
            <div v-if="wechat.qrValue" style="display: flex">
              <qrcode
                :value="wechat.qrValue"
                :options="{ width: 200 }"
                style="margin-left: -10px;"
              ></qrcode>
              <div style="margin-top: 10px;">
                <div style="font-size: 30px;">
                  请使用<span style="font-weight: 900; color: #1E90FF;"
                    >微信</span
                  >扫描二维码后，在微信小程序上录音，并上传文件。
                </div>
                <div
                  v-if="wechat.qrScanned"
                  style="margin-top: 30px; font-size: 30px;"
                >
                  {{ this.wechat.studentAnswer ? "已上传" : "已扫描" }}
                  <Icon type="md-checkmark" />
                </div>
              </div>
            </div>
            <div v-else>正在获取二维码...</div>
          </div>
        </div>

        <div
          class="audio-answer audio-answer-line-height"
          style="margin-top: 20px; text-align: left;"
        >
          <span class="audio-answer-line-height">上传文件：</span>
          <audio
            class="audio-answer-line-height"
            v-if="this.wechat.studentAnswer"
            controls
            controlsList="nodownload"
            :src="this.wechat.studentAnswer"
          />
          <span v-else class="audio-answer-line-height">未上传文件</span>
        </div>

        <div style=" margin-top: 30px; display: flex; margin-bottom: 30px;">
          <Button
            type="warning"
            @click="
              wechat.qrScannedResolved = true;
              wechat.qrScanned = false;
            "
            title="扫码不成功"
          >
            不能正确扫描二维码
          </Button>
          <div style="width: 30px; height: 30px;"></div>
          <Button
            type="warning"
            @click="
              wechat.uploadResolved = true;
              wechat.uploadStatus = false;
            "
            title="上传不成功"
          >
            上传不成功
          </Button>
        </div>
      </div>

      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td class="first-td">检查项</td>
              <td>值</td>
              <td>状态</td>
            </tr>

            <tr>
              <td>扫描二维码</td>
              <td>
                <div v-if="wechat.qrScannedResolved">
                  {{ wechat.qrScanned ? "正常" : "出错" }}
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
              <td>
                <div v-if="wechat.qrScannedResolved">
                  <div v-if="wechat.qrScanned">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon class="fail-cross" title="扫描出错" type="md-close" />
                  </div>
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
            </tr>

            <tr>
              <td>上传录音</td>
              <td>
                <div v-if="wechat.uploadResolved">
                  {{ wechat.uploadStatus ? "正常" : "出错" }}
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
              <td>
                <div v-if="wechat.uploadResolved">
                  <div v-if="wechat.uploadStatus">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon class="fail-cross" type="md-close" />
                  </div>
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div v-show="current === 5" class="section">
      <div class="list">
        <table>
          <tbody class="list-row">
            <tr class="list-header qm-primary-strong-text">
              <td class="first-td">检查项</td>
              <td>结果</td>
            </tr>

            <tr>
              <td>网速</td>
              <td>
                <div v-if="step1Status">
                  <Icon class="pass-check" type="md-checkmark" />
                </div>
                <div v-else>
                  <Icon class="fail-cross" type="md-close" />
                </div>
              </td>
            </tr>
            <tr>
              <td>时钟</td>
              <td>
                <div v-if="step2StatusResolved">
                  <div v-if="step2Status">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon class="fail-cross" type="md-close" />
                  </div>
                </div>
                <div v-else>
                  <PulseLoader />
                </div>
              </td>
            </tr>
            <tr>
              <td>摄像头</td>
              <td>
                <div v-if="step3Status">
                  <Icon class="pass-check" type="md-checkmark" />
                </div>
                <div v-else>
                  <Icon class="fail-cross" type="md-close" />
                </div>
              </td>
            </tr>
            <tr>
              <td>声音</td>
              <td>
                <div v-if="step4StatusResolved">
                  <div v-if="step4Status">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon class="fail-cross" type="md-close" />
                  </div>
                </div>
                <div v-else class="fail-cross">
                  请在“声音”步骤进行人工确认！
                </div>
              </td>
            </tr>
            <tr>
              <td>微信小程序</td>
              <td>
                <div v-if="step5StatusResolved">
                  <div v-if="step5Status">
                    <Icon class="pass-check" type="md-checkmark" />
                  </div>
                  <div v-else>
                    <Icon class="fail-cross" type="md-close" />
                  </div>
                </div>
                <div v-else class="fail-cross">
                  请在“微信小程序”步骤进行人工确认！
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div style="margin-top: 30px; text-align: center;">
      <Button type="primary" @click="previous" :disabled="current === 0">
        上一步
      </Button>
      <div style="width: 30px; height: 1px; display: inline-block;"></div>
      <Button type="primary" @click="next" :disabled="current === 5">
        下一步
      </Button>
      <div style="width: 30px; height: 1px; display: inline-block;"></div>
      <Button
        type="primary"
        @click="() => this.$emit('on-close')"
        v-if="current === 5"
      >
        进入考试
      </Button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
// import "moment-duration-format";
import VueQrcode from "@chenfengyuan/vue-qrcode";
import PulseLoader from "vue-spinner/src/PulseLoader.vue";
import {
  openWS,
  closeWsWithoutReconnect,
  getQRCode,
} from "@/features/OnlineExam/Examing/ws";
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("examingHomeModule");

const CLOCK_RATE_TIMEOUT = 10;

// console.log(
//   moment.duration(-new Date().getTimezoneOffset(), "minutes").format("hh:mm")
// );
export default {
  name: "check-computer",
  data() {
    return {
      current: 0,
      // status: ["process", "wait", "wait", "wait", "wait"],
      network: {
        downlink: navigator.connection.downlink,
        downlinkStatus: navigator.connection.downlink > 0.5,
        rrt: navigator.connection.rtt,
        rrtStatus: navigator.connection.rtt < 1000,
      },
      time: {
        // nowDate: Date.now(),
        // timeDifference: 0,
        currentTimeZone: moment().format("Z"),
        timeZoneStatus: new Date().getTimezoneOffset() / 60 === -8,
        clockRateDiff: null,
        clockRateStateResolved: false,
        clockRateStatus: false,
      },
      camera: false,
      sound: {
        downloadResolved: false,
        downloadStatus: false,
        playedStatusResolved: false,
        playedStatus: false,
      },
      wechat: {
        qrValue: " ",
        qrScannedResolved: false,
        qrScanned: false,
        uploadResolved: false,
        uploadStatus: false,
        studentAnswer: null,
        examRecordDataId: null,
      },
    };
  },
  async created() {
    this.getNowInterval = setInterval(() => {
      this.nowDate = Date.now();
    }, 1000);
    openWS({ examRecordDataId: this.$store.state.user.id });
    if (!getQRCode(1, "AUDIO", { testEnv: true })) {
      setTimeout(() => {
        getQRCode(1, "AUDIO", { testEnv: true });
      }, 3000);
    }
  },
  async mounted() {
    let start, end;
    // const networkStart = performance.now();
    fetch("/oe/login", { Method: "HEAD" }).then(e => {
      start = moment(e.headers.get("date"));
      // const networkEnd = performance.now();

      // this.timeDifference =
      //   Math.abs(moment().diff(start) - (networkEnd - networkStart) / 2) <
      //   60 * 1000
      //     ? "OK"
      //     : "与服务器时间差异超过60秒";
    });
    this.checkClockRateTimeout = setTimeout(() => {
      fetch("/oe/login", { Method: "HEAD" }).then(e => {
        end = moment(e.headers.get("date"));
        this.time.clockRateStateResolved = true;
        this.time.clockRateDiff =
          end.diff(start, "seconds") - CLOCK_RATE_TIMEOUT;
        this.time.clockRateStatus =
          end.diff(start, "seconds") < CLOCK_RATE_TIMEOUT + 2;
      });
    }, CLOCK_RATE_TIMEOUT * 1000);

    await this.openCamera();
  },
  beforeDestroy() {
    if (this.$refs.video.srcObject) {
      this.$refs.video.srcObject.getTracks().forEach(function(track) {
        track.stop();
      });
    }
    clearInterval(this.getNowInterval);
    clearTimeout(this.checkClockRateTimeout);
    closeWsWithoutReconnect();
  },
  methods: {
    previous() {
      if (this.current >= 0) {
        this.current -= 1;
      }
    },
    next() {
      if (this.current < 5) {
        this.current += 1;
      }
    },
    async openCamera() {
      const video = this.$refs.video;
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        try {
          console.log("启动摄像头");
          const stream = await navigator.mediaDevices.getUserMedia({
            video: {
              facingMode: "user",
              // width: 400,
              // height: this.showRecognizeButton ? 300 : 250
            },
          });
          if (stream) {
            video.srcObject = stream;
            try {
              await video.play();
              this.camera = true;
            } catch (error) {
              console.log("摄像头没有正常启用", error);
              this.$Message.error({
                content: "摄像头没有正常启用",
                duration: 15,
                closable: true,
              });
            }
          } else {
            this.$Message.error({
              content: "没有可用的视频流",
              duration: 15,
              closable: true,
            });
            window._hmt.push([
              "_trackEvent",
              "摄像头框-环境检测",
              "摄像头状态",
              "没有可用的视频流",
            ]);
          }
        } catch (error) {
          console.log("无法启用摄像头", error);
          this.$Message.error({
            content: "无法启用摄像头",
            duration: 15,
            closable: true,
          });
          window._hmt.push([
            "_trackEvent",
            "摄像头框-环境检测",
            "摄像头状态",
            "无法启用摄像头",
          ]);
        }
      } else {
        this.$Message.error({
          content: "没有找到可用的摄像头",
          duration: 15,
          closable: true,
        });
        window._hmt.push([
          "_trackEvent",
          "摄像头框-环境检测",
          "摄像头状态",
          "没有找到可用的摄像头",
        ]);
      }
    },
  },
  computed: {
    ...mapState([
      "questionQrCode",
      "questionQrCodeScanned",
      "questionAnswerFileUrl",
    ]),
    timeCurrent() {
      return moment(this.nowDate)
        .utcOffset("+08:00")
        .format("YYYY-MM-DD HH:mm:ssZZ");
    },
    step1Status() {
      return this.network.downlinkStatus && this.network.rrtStatus;
    },
    step2StatusResolved() {
      return this.time.clockRateStateResolved;
    },
    step2Status() {
      return this.time.timeZoneStatus && this.time.clockRateStatus;
    },
    step3Status() {
      return this.camera;
    },
    step4StatusResolved() {
      return this.sound.downloadResolved && this.sound.playedStatusResolved;
    },
    step4Status() {
      return this.sound.downloadStatus && this.sound.playedStatus;
    },
    step5StatusResolved() {
      return this.wechat.qrScannedResolved && this.wechat.uploadResolved;
    },
    step5Status() {
      return this.wechat.qrScanned && this.wechat.uploadStatus;
    },
  },
  watch: {
    questionQrCode(value) {
      // console.log(this.examQuestion.studentAnswer);
      // console.log("watch", value);
      this.wechat.qrValue = value.qrCode;
      this.wechat.examRecordDataId = decodeURIComponent(value.qrCode).match(
        /&examRecordDataId=(\d+)&/
      )[1];
    },
    questionQrCodeScanned() {
      // console.log(this.examQuestion.studentAnswer);
      // console.log("watch", value);
      this.wechat.qrScanned = true;
      this.wechat.qrScannedResolved = true;
    },
    questionAnswerFileUrl(value) {
      // console.log(this.examQuestion.studentAnswer);
      // console.log("watch", value);
      const examRecordDataId = this.wechat.examRecordDataId;
      for (const q of value) {
        if (!q.saved) {
          let acknowledgeStatus = "CONFIRMED";

          this.$http
            .post(
              "/api/ecs_oe_student/examControl/saveUploadedFileAcknowledgeStatus",
              {
                examRecordDataId,
                filePath: q.fileUrl,
                order: q.order,
                acknowledgeStatus,
              }
            )
            .then(() => {
              this.wechat.studentAnswer = q.fileUrl;
              this.wechat.uploadResolved = true;
              this.wechat.uploadStatus = true;
              q.saved = true;
              if (acknowledgeStatus === "CONFIRMED")
                this.$Message.info({
                  content: "小程序作答已更新",
                  duration: 5,
                  closable: true,
                });
            })
            .catch(() => {
              this.$Message.error({
                content: "更新小程序答案失败！",
                duration: 15,
                closable: true,
              });
            });
        }
      }
    },
  },
  components: {
    qrcode: VueQrcode,
    PulseLoader,
  },
};
</script>

<style scoped>
.section {
  margin-top: 10px;
}

.list {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  text-align: center;
}

.list table {
  width: 100%;
  border-collapse: collapse !important;
  border-spacing: 0;
}
.list td {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  border-collapse: separate !important;
  padding: 10px;
}
.list .first-td {
  width: 50%;
}

.pass-check {
  font-size: 20px;
  color: green;
}

.fail-cross {
  font-size: 20px;
  color: red;
}
</style>