frontend-admin/pages/download/App.vue

<template>
  <div class="app download">
    <div class="download-header">
      <div class="download-header-body">
        <img class="download-logo" :src="info.logo" :alt="info.name" />
      </div>
    </div>
    <div class="download-info">
      <div class="download-info-body">
        <h1 class="download-title">在线考试客户端下载</h1>
        <p class="download-desc">让考试更诚信，让监考更轻松</p>
        <div v-if="info.packagePath" class="download-action">
          <div class="download-btn" @click="toDownload">客户端下载</div>
          <div class="download-qrcode">
            <img src="./assets/docImgs/app-qr.png" alt="监考APP下载" />
            <p>监考APP下载</p>
          </div>
        </div>
      </div>
    </div>
    <div class="download-qa">
      <div class="download-qa-body">
        <div class="download-qa-menu">
          <el-menu
            active-text-color="rgba(1, 115, 255, 1)"
            text-color="rgba(32, 43, 75, 1)"
            :default-active="curMenu.id"
            unique-opened
            @select="handleSelect"
          >
            <el-submenu v-for="menu in menus" :key="menu.id" :index="menu.id">
              <template slot="title">
                <i :class="['icon', menu.icon]"></i>
                <span>{{ menu.title }}</span>
              </template>
              <el-menu-item
                v-for="(nav, nindex) in menu.children"
                :key="nav.id"
                :index="nav.id"
              >
                {{ nindex + 1 }}.{{ nav.title }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
        <div class="download-qa-texts">
          <div class="download-qa-title">{{ curMenu.title }}</div>
          <div
            v-if="curMenu.desc && curMenu.desc.length"
            class="download-qa-content"
          >
            <p v-for="(cont, index) in curMenu.desc" :key="index">{{ cont }}</p>
          </div>
          <!-- 1 -->
          <div v-if="curMenu.id === '1-2'" class="download-qa-content">
            <p><img src="./assets/docImgs/1-2-1.png" alt="1-2-1" /></p>
            <p>
              这是因为系统默认安装在d盘，但考生电脑没有D盘导致，可以让他选择安装在其他盘符。具体操作如下：
            </p>
            <p><img src="./assets/docImgs/1-2-2.png" alt="1-2-2" /></p>
          </div>
          <div v-if="curMenu.id === '1-3'" class="download-qa-content">
            <p><img src="./assets/docImgs/1-3-1.png" alt="1-3-1" /></p>
            <p>
              网上下载VC合集，安装完成后，再打开程序，一般都能解决。如果还是不行请按照<a
                href="https://www.jb51.net/dll/72355.html"
                target="_block"
                >https://www.jb51.net/dll/72355.html</a
              >
              网页的说明处理
            </p>
          </div>
          <div v-if="curMenu.id === '1-4'" class="download-qa-content">
            <p><img src="./assets/docImgs/1-4-1.png" alt="1-4-1" /></p>
            <p>
              检查电脑时区是否是中国时区utc+8，若时区正确，则电脑操作系统的字库有问题，需要重新安装操作系统或更换电脑。
            </p>
            <p>
              检查电脑时区方法可以百度，若win10操作系统也可以按下图所示操作：
            </p>
            <p><img src="./assets/docImgs/1-4-2.png" alt="1-4-2" /></p>
            <p>
              若更改时区后还是显示乱码，则是电脑操作系统字库缺失文件导致。需要重装电脑操作系统或更换电脑。
            </p>
          </div>
          <!-- 2 -->
          <div v-if="curMenu.id === '2-1'" class="download-qa-content">
            <p><img src="./assets/docImgs/2-1-1.png" alt="2-1-1" /></p>
            <p>
              考试系统不允许通过无线或有线的方式连接第二块屏幕或投屏，若有连接，需要断开后再打开考试系统；
            </p>
            <p>
              若没有以上操作，可以将电脑屏幕分辨率调整为1920*1080后，再打开考试系统。
            </p>
          </div>
          <div v-if="curMenu.id === '2-2'" class="download-qa-content">
            <p>
              右键“我的电脑”，点击属性：
            </p>
            <p><img src="./assets/docImgs/2-2-1.png" alt="2-2-1" /></p>
            <p>
              打开属性界面，点击“关于”界面的高级系统设置：
            </p>
            <p><img src="./assets/docImgs/2-2-2.png" alt="2-2-2" /></p>
            <p>
              选择远程栏，取消勾选。
            </p>
            <p><img src="./assets/docImgs/2-2-3.png" alt="2-2-3" /></p>
          </div>
          <div v-if="curMenu.id === '2-3'" class="download-qa-content">
            <p>
              协通是个远程软件，可以退出或卸载该软件，也可以在进程里(任务管理器-进程)关闭XT或协通开头的进程。
            </p>
            <p>
              如何打开任务管理-进程可以百度，也可以参照下图所示：
            </p>
            <p><img src="./assets/docImgs/2-3-1.png" alt="2-3-1" /></p>
            <p>打开任务管理-进程，列表为空，需要点击详细信息。如下图所示：</p>
            <p><img src="./assets/docImgs/2-3-2.png" alt="2-3-2" /></p>
          </div>
          <div v-if="curMenu.id === '2-5'" class="download-qa-content">
            <p>
              该问题是考生电脑与服务器网络不畅通导致（注：可以上网不代表网络稳定畅通），可以重启路由器和光猫设备再登录，或者试试以下方法：
            </p>
            <ul>
              <li>Cmd中运行下列命令刷新DNS：ipconfig/flushdns</li>
              <li>修改首选DNS为阿里公共DNS：223.5.5.5</li>
            </ul>
            <p>若设置后还是不行，则需要考生自行解决网络问题后再考试</p>
          </div>
          <!-- 3 -->
          <div v-if="curMenu.id === '3-5'" class="download-qa-content">
            <p><img src="./assets/docImgs/3-5-1.png" alt="3-5-1" /></p>
            <p>
              这是考生电脑时间和时区的问题，有可能考生电脑和北京时间不一致，或者时区不是中国时区，是美国时区阿富汗时区之类的，调整后再登录。
            </p>
          </div>
          <!-- 4 -->
          <div v-if="curMenu.id === '4-1'" class="download-qa-content">
            <p><img src="./assets/docImgs/4-1-1.png" alt="4-1-1" /></p>
            <p>
              电脑摄像头未开启，需要找到键盘上摄像头的开关，或者看看有没有其他物理开关。联想的电脑可以按下f8键试试。
            </p>
          </div>
          <div v-if="curMenu.id === '4-2'" class="download-qa-content">
            <p><img src="./assets/docImgs/4-2-1.png" alt="4-2-1" /></p>
            <p>
              将电脑上的360杀毒软件和360安全卫士退出后，再登录考试客户端。
            </p>
          </div>
          <div v-if="curMenu.id === '4-3'" class="download-qa-content">
            <p><img src="./assets/docImgs/4-3-1.png" alt="4-3-1" /></p>
            <p><img src="./assets/docImgs/4-3-2.png" alt="4-3-2" /></p>
            <p>
              大多数杀毒软件会禁止摄像头运行，将电脑上杀毒软件、360安全卫士、电脑管家等退出，再登录试试
            </p>
            <p>若还是显示黑色或灰色，可以按下图方法处理下：</p>
            <p><img src="./assets/docImgs/4-3-3.png" alt="4-3-3" /></p>
            <p>
              处理后还是不行，则可能是电脑和摄像头兼容性的问题，建议更换电脑。
            </p>
          </div>
          <div v-if="curMenu.id === '4-5'" class="download-qa-content">
            <p><img src="./assets/docImgs/4-5-1.png" alt="4-5-1" /></p>
            <p>
              首先此提示不会影响成绩；出现提示时可以适当进行坐姿调整，保持人脸正对摄像头，完整清晰的出现在摄像头的范围内，面部光线充足，背后无强光源，右下角监控中人脸清晰完整。如果有带眼镜也可能导致误报，误报不影响成绩。
            </p>
          </div>
          <div v-if="curMenu.id === '4-7'" class="download-qa-content">
            <p><img src="./assets/docImgs/4-7-1.png" alt="4-7-1" /></p>
            <p>
              修改电脑显示设置中“缩放与布局”，将更改文本、应用等项目的大小修改100%。
            </p>
            <p>WIN10操作系统为如下方式：</p>
            <p><img src="./assets/docImgs/4-7-2.png" alt="4-7-2" /></p>
            <p>WIN7操作系统为如下方式：</p>
            <p><img src="./assets/docImgs/4-7-3.png" alt="4-7-3" /></p>
          </div>
          <div v-if="curMenu.id === '4-8'" class="download-qa-content">
            <p><img src="./assets/docImgs/4-8-1.png" alt="4-8-1" /></p>
          </div>
          <!-- 5 -->
          <div v-if="curMenu.id === '5-1'" class="download-qa-content">
            <p>
              整场考试答题过程中，需要将整个人脸保持在摄像头范围内（不要带口罩或遮挡人脸）。考生需要时刻关注并确认电脑摄像头画面中的自己的人脸完整，摄像头工作正常（电脑右下角）。错误示例见下图：
            </p>
            <p>
              <img src="./assets/docImgs/5-1-1.png" alt="5-1-1" />
              <img src="./assets/docImgs/5-1-2.png" alt="5-1-2" />
              <img src="./assets/docImgs/5-1-3.png" alt="5-1-3" />
              <img src="./assets/docImgs/5-1-4.png" alt="5-1-4" />
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSchoolInfo } from "./api";
import { menus } from "./constant/menu";

function getParam(paramName) {
  const hs = window.location.href.split(/\?|&/);
  const validh = hs.find((item) => item.startsWith(paramName));
  if (!validh) return;
  return validh.split("=")[1];
}

export default {
  name: "app",
  data() {
    return {
      info: {
        name: "",
        logo: "",
        packagePath: "",
        version: {
          name: "",
        },
      },
      curMenu: {
        id: "",
        title: "",
      },
      menus,
    };
  },
  created() {
    this.getData();
    this.handleSelect("1-1", ["1"]);
  },
  methods: {
    async getData() {
      const code = getParam("code");
      if (!code) {
        window.alert("学校code丢失！");
        return;
      }
      const res = await getSchoolInfo(code);
      this.info = res.data.data;
      if (!this.info.version) {
        this.$message.error("数据错误！");
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      const parentId = keyPath[0];
      const pmenu = this.menus.find((item) => item.id === parentId);
      if (!pmenu) return;
      this.curMenu = pmenu.children.find((item) => item.id === key);
    },
    toDownload() {
      if (!this.info.packagePath) return;
      window.open(this.info.packagePath);
    },
  },
};
</script>