北斗应用技术培训考试题库

src/components/database/interlocution.vue

@@ -0,0 +1,83 @@
+<template>
+  <div style="height: 90%" class="flex justify-center items-center">
+    <div style="width: 10%">
+      <Page :showNow="offset > 1" direction="left" @flip="flip" />
+    </div>
+    <div class="grow">
+      <Interlocution v-if="topic.length > 0" :topic="topic[0]" />
+      <el-text v-if="topic.length == 0" style="font-weight: bold; color: red">
+        暂无题目
+      </el-text>
+    </div>
+    <div style="width: 10%">
+      <Page :showNow="offset < pageCount" direction="right" @flip="flip" />
+    </div>
+  </div>
+  <div style="height: 10%">
+    <Jump
+      v-if="topic.length > 0"
+      ref="jumpRef"
+      :id="topic.length > 0 ? topic[0].id : 0"
+      :min="min"
+      :count="pageCount"
+      @jumpToTopic="jumpToTopic"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+import Interlocution from "../topic/interlocution.vue";
+import Page from "../operate/page.vue";
+import Jump from "../operate/jump.vue";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const offset = ref(1);
+const min = ref(1);
+const pageCount = ref(0);
+const topic = ref([]);
+const jumpRef = ref(null);
+
+const init = () => {
+  const data = {
+    offset: offset.value,
+  };
+  $http.post($url.interlocution, data).then((res) => {
+    if (res.data.code === 200) {
+      min.value = res.data.min;
+      pageCount.value = res.data.count;
+      topic.value = res.data.rows;
+    }
+  });
+};
+
+const flip = (direction) => {
+  if (direction === "left" && offset.value > 1) {
+    offset.value--;
+  } else if (direction === "right" && offset.value < pageCount.value) {
+    offset.value++;
+  }
+  jumpRef.value.topicId = offset.value;
+  init();
+};
+
+const jumpToTopic = (topicId) => {
+  if (topicId == null) {
+    return;
+  } else if (topicId == 0 || topicId > pageCount.value) {
+    return;
+  } else {
+    offset.value = topicId;
+    init();
+  }
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped></style>

src/components/database/judgment.vue

@@ -0,0 +1,93 @@
+<template>
+  <div style="height: 90%" class="flex justify-center items-center">
+    <div style="width: 10%">
+      <Page :showNow="offset > 1" direction="left" @flip="flip" />
+    </div>
+    <div class="grow">
+      <Judgment
+        ref="judgmentRef"
+        v-if="topic.length > 0"
+        :topic="topic[0]"
+        :checked="checked"
+      />
+      <el-text v-if="topic.length == 0" style="font-weight: bold; color: red">
+        暂无题目
+      </el-text>
+    </div>
+    <div style="width: 10%">
+      <Page :showNow="offset < pageCount" direction="right" @flip="flip" />
+    </div>
+  </div>
+  <div style="height: 10%">
+    <Jump
+      v-if="topic.length > 0"
+      ref="jumpRef"
+      :id="topic.length > 0 ? topic[0].id : 0"
+      :min="min"
+      :count="pageCount"
+      @jumpToTopic="jumpToTopic"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+import Judgment from "../topic/judgment.vue";
+import Page from "../operate/page.vue";
+import Jump from "../operate/jump.vue";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const props = defineProps({ checked: Boolean });
+
+const offset = ref(1);
+const min = ref(1);
+const pageCount = ref(0);
+const judgmentRef = ref(null);
+const topic = ref([]);
+const jumpRef = ref(null);
+
+const init = () => {
+  const data = {
+    offset: offset.value,
+  };
+  $http.post($url.judgment, data).then((res) => {
+    if (res.data.code === 200) {
+      min.value = res.data.min;
+      pageCount.value = res.data.count;
+      topic.value = res.data.rows;
+    }
+  });
+};
+
+const flip = (direction) => {
+  if (direction === "left" && offset.value > 1) {
+    offset.value--;
+  } else if (direction === "right" && offset.value < pageCount.value) {
+    offset.value++;
+  }
+  jumpRef.value.topicId = offset.value;
+  init();
+  judgmentRef.value.reset();
+};
+
+const jumpToTopic = (topicId) => {
+  if (topicId == null) {
+    return;
+  } else if (topicId == 0 || topicId > pageCount.value) {
+    return;
+  } else {
+    offset.value = topicId;
+    init();
+    judgmentRef.value.reset();
+  }
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped></style>

src/components/database/multiple.vue

@@ -0,0 +1,93 @@
+<template>
+  <div style="height: 90%" class="flex justify-center items-center">
+    <div style="width: 10%">
+      <Page :showNow="offset > 1" direction="left" @flip="flip" />
+    </div>
+    <div class="grow">
+      <Multiple
+        ref="multipleRef"
+        v-if="topic.length > 0"
+        :topic="topic[0]"
+        :checked="checked"
+      />
+      <el-text v-if="topic.length == 0" style="font-weight: bold; color: red">
+        暂无题目
+      </el-text>
+    </div>
+    <div style="width: 10%">
+      <Page :showNow="offset < pageCount" direction="right" @flip="flip" />
+    </div>
+  </div>
+  <div style="height: 10%">
+    <Jump
+      v-if="topic.length > 0"
+      ref="jumpRef"
+      :id="topic.length > 0 ? topic[0].id : 0"
+      :min="min"
+      :count="pageCount"
+      @jumpToTopic="jumpToTopic"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+import Multiple from "../topic/multiple.vue";
+import Page from "../operate/page.vue";
+import Jump from "../operate/jump.vue";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const props = defineProps({ checked: Boolean });
+
+const offset = ref(1);
+const min = ref(1);
+const pageCount = ref(0);
+const multipleRef = ref(null);
+const topic = ref([]);
+const jumpRef = ref(null);
+
+const init = () => {
+  const data = {
+    offset: offset.value,
+  };
+  $http.post($url.multiple, data).then((res) => {
+    if (res.data.code === 200) {
+      min.value = res.data.min;
+      pageCount.value = res.data.count;
+      topic.value = res.data.rows;
+    }
+  });
+};
+
+const flip = (direction) => {
+  if (direction === "left" && offset.value > 1) {
+    offset.value--;
+  } else if (direction === "right" && offset.value < pageCount.value) {
+    offset.value++;
+  }
+  jumpRef.value.topicId = offset.value;
+  init();
+  multipleRef.value.reset();
+};
+
+const jumpToTopic = (topicId) => {
+  if (topicId == null) {
+    return;
+  } else if (topicId == 0 || topicId > pageCount.value) {
+    return;
+  } else {
+    offset.value = topicId;
+    init();
+    multipleRef.value.reset();
+  }
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped></style>

src/components/database/radio.vue

@@ -0,0 +1,93 @@
+<template>
+  <div style="height: 90%" class="flex justify-center items-center">
+    <div style="width: 10%">
+      <Page :showNow="offset > 1" direction="left" @flip="flip" />
+    </div>
+    <div class="grow">
+      <Radio
+        ref="radioRef"
+        v-if="topic.length > 0"
+        :topic="topic[0]"
+        :checked="checked"
+      />
+      <el-text v-if="topic.length == 0" style="font-weight: bold; color: red">
+        暂无题目
+      </el-text>
+    </div>
+    <div style="width: 10%">
+      <Page :showNow="offset < pageCount" direction="right" @flip="flip" />
+    </div>
+  </div>
+  <div style="height: 10%">
+    <Jump
+      v-if="topic.length > 0"
+      ref="jumpRef"
+      :id="topic.length > 0 ? topic[0].id : 0"
+      :min="min"
+      :count="pageCount"
+      @jumpToTopic="jumpToTopic"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+import Radio from "../topic/radio.vue";
+import Page from "../operate/page.vue";
+import Jump from "../operate/jump.vue";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const props = defineProps({ checked: Boolean });
+
+const offset = ref(1);
+const min = ref(1);
+const pageCount = ref(0);
+const radioRef = ref(null);
+const topic = ref([]);
+const jumpRef = ref(null);
+
+const init = () => {
+  const data = {
+    offset: offset.value,
+  };
+  $http.post($url.radio, data).then((res) => {
+    if (res.data.code === 200) {
+      min.value = res.data.min;
+      pageCount.value = res.data.count;
+      topic.value = res.data.rows;
+    }
+  });
+};
+
+const flip = (direction) => {
+  if (direction === "left" && offset.value > 1) {
+    offset.value--;
+  } else if (direction === "right" && offset.value < pageCount.value) {
+    offset.value++;
+  }
+  jumpRef.value.topicId = offset.value;
+  init();
+  radioRef.value.reset();
+};
+
+const jumpToTopic = (topicId) => {
+  if (topicId == null) {
+    return;
+  } else if (topicId == 0 || topicId > pageCount.value) {
+    return;
+  } else {
+    offset.value = topicId;
+    init();
+    radioRef.value.reset();
+  }
+};
+
+onMounted(() => {
+  init();
+});
+</script>
+
+<style scoped></style>

src/components/operate/jump.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex justify-center items-center">
+    <el-text style="font-weight: bold"> 第&nbsp;{{ id - min + 1 }}&nbsp;题 </el-text>
+    &nbsp;&nbsp;
+    <el-input
+      v-model="topicId"
+      style="width: 200px; border: 2px solid aqua"
+      placeholder="请输入要跳转到的题目序号"
+      @input="filter"
+      @blur="jumpToTopic"
+      clearable
+    />
+    &nbsp;&nbsp;
+    <el-text style="font-weight: bold"> 共&nbsp;{{ count }}&nbsp;题 </el-text>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({ id: String, min: String, count: String });
+
+const emit = defineEmits(["jumpToTopic"]);
+
+const topicId = ref("");
+
+const filter = () => {
+  topicId.value = topicId.value.replace(/\D/g, "");
+};
+
+const jumpToTopic = () => {
+  emit("jumpToTopic", topicId.value);
+};
+
+defineExpose({ topicId });
+</script>
+
+<style scoped></style>

src/components/operate/page.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <el-icon
+      v-if="showNow && direction == 'left'"
+      style="font-size: 100px; color: #409eff"
+      @click="page('left')"
+      ><CaretLeft
+    /></el-icon>
+    <el-icon
+      v-if="showNow && direction == 'right'"
+      style="font-size: 100px; color: #409eff"
+      @click="page('right')"
+      ><CaretRight
+    /></el-icon>
+  </div>
+</template>
+
+<script setup>
+import { CaretLeft, CaretRight } from "@element-plus/icons-vue";
+
+const props = defineProps({ showNow: Boolean, direction: String });
+
+const emit = defineEmits(["flip"]);
+
+const page = (direction) => {
+  emit("flip", direction);
+};
+</script>
+
+<style scoped></style>

src/components/page/login.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    status-icon
+    :rules="rules"
+    label-width="auto"
+    class="p-6 m-auto flex flex-col justify-center items-center bg-slate-100/70"
+  >
+    <el-form-item class="mx-1 font-bold" label="手机号码" prop="phone">
+      <el-input
+        clearable
+        placeholder="请输入手机号码"
+        v-model="ruleForm.phone"
+        @input="filter(ruleForm.phone, 'phone')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="密码" prop="password">
+      <el-input
+        clearable
+        placeholder="请输入密码"
+        v-model="ruleForm.password"
+        type="password"
+        show-password
+        maxlength="16"
+        autocomplete="off"
+        @input="filter(ruleForm.password, 'password')"
+        oncut="return false"
+        onpaste="return false"
+        oncopy="return false"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button
+        style="font-weight: bold"
+        type="primary"
+        @click="submitForm(ruleFormRef)"
+      >
+        登录
+      </el-button>
+      <el-button style="font-weight: bold" type="warning" @click="resetForm(ruleFormRef)"
+        >清除</el-button
+      >
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive, getCurrentInstance } from "vue";
+import { ElMessage } from "element-plus";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const ruleFormRef = ref();
+
+const phoneRegex = /^(?:13\d|14[579]|15\d|16[67]|17[0135678]|18\d|19[89])\d{8}$/;
+
+const emit = defineEmits(["changePage"]);
+
+const validatePhone = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请输入手机号码"));
+  } else if (!phoneRegex.test(value)) {
+    callback(new Error("手机号码格式错误, 请重新输入!"));
+  } else {
+    callback();
+  }
+};
+
+const validatePass = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请输入密码"));
+  } else {
+    callback();
+  }
+};
+
+const ruleForm = reactive({
+  phone: "",
+  password: "",
+});
+
+const rules = reactive({
+  phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
+  password: [{ required: true, validator: validatePass, trigger: "blur" }],
+});
+
+const filter = (value, label) => {
+  if (label == "phone") {
+    ruleForm.phone = value.replace(/\D/g, "");
+  }
+  if (label == "password") {
+    ruleForm.password = value.replace(/[=\s"'+-]/g, "");
+  }
+};
+
+const { proxy } = getCurrentInstance();
+
+const submitForm = (formEl) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      let encryptForm = {
+        phone: proxy.$AES_Encrypt(ruleForm.phone),
+        password: proxy.$AES_Encrypt(ruleForm.password),
+      };
+      $http.post($url.login, encryptForm).then((res) => {
+        if (res.data.code === 200) {
+          ElMessage({
+            message: "登录成功！",
+            type: "success",
+          });
+          localStorage.setItem("data", res.data.data);
+          window.location.href = window.location.href.replace("/initialService", "/main");
+        } else {
+          if (res.data.code === 444) {
+            ElMessage.error(res.data.msg);
+          } else {
+            ElMessage.error("登录失败！");
+          }
+        }
+      });
+    } else {
+      ElMessage.error("提交失败，请先完善登录信息！");
+    }
+  });
+};
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<style scoped></style>

src/components/page/main.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="h-full bg-slate-400 flex flex-col" style="min-width: 520px">
+    <div class="flex">
+      <el-menu
+        class="flex font-bold"
+        style="background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1))"
+        :default-active="activeIndex"
+        @select="handleSelect"
+      >
+        <el-menu-item
+          index="1"
+          :style="activeIndex == '1' ? activeStyle : indexStyle"
+          class="border-x-4 border-slate-300"
+        >
+          单选题
+        </el-menu-item>
+        <el-menu-item
+          index="2"
+          :style="activeIndex == '2' ? activeStyle : indexStyle"
+          class="border-r-4 border-slate-300"
+        >
+          多选题
+        </el-menu-item>
+        <el-menu-item
+          index="3"
+          :style="activeIndex == '3' ? activeStyle : indexStyle"
+          class="border-r-4 border-slate-300"
+        >
+          判断题
+        </el-menu-item>
+        <el-menu-item
+          index="4"
+          :style="activeIndex == '4' ? activeStyle : indexStyle"
+          class="border-r-4 border-slate-300"
+        >
+          问答题
+        </el-menu-item>
+      </el-menu>
+      <div class="px-4 bg-green-100 flex items-center">
+        <el-checkbox v-model="checked" style="color: red" label="直接显示答案" />
+      </div>
+    </div>
+    <div class="flex-grow bg-white text-black">
+      <div v-show="activeIndex === '1'" class="w-h-full">
+        <Radio :checked="checked" />
+      </div>
+      <div v-show="activeIndex === '2'" class="w-h-full">
+        <Multiple :checked="checked" />
+      </div>
+      <div v-show="activeIndex === '3'" class="w-h-full">
+        <Judgment :checked="checked" />
+      </div>
+      <div v-show="activeIndex === '4'" class="w-h-full">
+        <Interlocution />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import Radio from "../database/radio.vue";
+import Multiple from "../database/multiple.vue";
+import Judgment from "../database/judgment.vue";
+import Interlocution from "../database/interlocution.vue";
+
+const activeIndex = ref("1");
+const indexStyle = "background-color: rgb(241 245 249);";
+const activeStyle = "background-color: rgb(207 250 254);";
+const checked = ref(false);
+
+const handleSelect = (key, keyPath) => {
+  activeIndex.value = key;
+};
+</script>
+
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+}
+</style>

src/components/topic/interlocution.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-text style="font-weight: bold">
+    难度：{{
+      topic.difficulty == "0" ? "简单" : topic.difficulty == "1" ? "普通" : "困难"
+    }}
+  </el-text>
+  <br />
+  <br />
+  <el-text style="font-weight: bold"> 题目：{{ topic.stem }} </el-text>
+  <br />
+  <br />
+  <el-text style="font-weight: bold"> 答案：{{ topic.answer }} </el-text>
+</template>
+
+<script setup>
+const props = defineProps({ topic: Array });
+</script>
+
+<style scoped></style>

src/components/topic/judgment.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-text style="font-weight: bold">
+    难度：{{
+      topic.difficulty == "0" ? "简单" : topic.difficulty == "1" ? "普通" : "困难"
+    }}
+  </el-text>
+  <br />
+  <br />
+  <el-text style="font-weight: bold"> 题目：{{ topic.stem }} </el-text>
+  <br />
+  <el-radio-group v-model="radio" class="flex flex-col">
+    <el-radio value="1" style="margin-right: 0px"> 正确 </el-radio>
+    <el-radio value="0" style="margin-right: 0px"> 错误 </el-radio>
+  </el-radio-group>
+  <br />
+  <el-text v-show="checked ? true : showAnswer" style="font-weight: bold">
+    答案：{{ topic.answer ? "正确" : "错误" }}
+  </el-text>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({ topic: Array, checked: Boolean });
+
+const radio = ref("");
+const showAnswer = ref(false);
+
+const reset = () => {
+  radio.value = "";
+  showAnswer.value = false;
+};
+
+defineExpose({ reset });
+
+watch(radio, (value) => {
+  showAnswer.value = false;
+  if (value != "") {
+    showAnswer.value = true;
+  }
+});
+</script>
+
+<style scoped></style>

src/components/topic/multiple.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-text style="font-weight: bold">
+    难度：{{
+      topic.difficulty == "0" ? "简单" : topic.difficulty == "1" ? "普通" : "困难"
+    }}
+  </el-text>
+  <br />
+  <br />
+  <el-text style="font-weight: bold"> 题目：{{ topic.stem }} </el-text>
+  <div class="my-2">
+    <el-checkbox v-model="checked1" :label="'A：' + topic.options_a" />
+    <br />
+    <el-checkbox v-model="checked2" :label="'B：' + topic.options_b" />
+    <br />
+    <el-checkbox v-model="checked3" :label="'C：' + topic.options_c" />
+    <br />
+    <el-checkbox v-model="checked4" :label="'D：' + topic.options_d" />
+    <br />
+    <el-checkbox
+      v-show="topic.options_e != null"
+      v-model="checked5"
+      :label="'E：' + topic.options_e"
+    />
+  </div>
+  <el-button type="primary" v-show="showButton" @click="showAnswer = true">
+    查看答案
+  </el-button>
+  <br />
+  <br />
+  <el-text v-show="checked ? true : showAnswer" style="font-weight: bold">
+    答案：{{ topic.answer }}
+  </el-text>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({ topic: Array, checked: Boolean });
+
+const checked1 = ref(false);
+const checked2 = ref(false);
+const checked3 = ref(false);
+const checked4 = ref(false);
+const checked5 = ref(false);
+const showButton = ref(false);
+const showAnswer = ref(false);
+
+const reset = () => {
+  checked1.value = false;
+  checked2.value = false;
+  checked3.value = false;
+  checked4.value = false;
+  checked5.value = false;
+  showButton.value = false;
+  showAnswer.value = false;
+};
+
+watch(checked1, (value) => {
+  showButton.value = false;
+  if (value != "") {
+    showButton.value = true;
+  }
+});
+
+watch(checked2, (value) => {
+  showButton.value = false;
+  if (value != "") {
+    showButton.value = true;
+  }
+});
+
+watch(checked3, (value) => {
+  showButton.value = false;
+  if (value != "") {
+    showButton.value = true;
+  }
+});
+
+watch(checked4, (value) => {
+  showButton.value = false;
+  if (value != "") {
+    showButton.value = true;
+  }
+});
+
+watch(checked5, (value) => {
+  showButton.value = false;
+  if (value != "") {
+    showButton.value = true;
+  }
+});
+
+defineExpose({ reset });
+</script>
+
+<style scoped></style>

src/components/topic/radio.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-text style="font-weight: bold">
+    难度：{{
+      topic.difficulty == "0" ? "简单" : topic.difficulty == "1" ? "普通" : "困难"
+    }}
+  </el-text>
+  <br />
+  <br />
+  <el-text style="font-weight: bold"> 题目：{{ topic.stem }} </el-text>
+  <br />
+  <el-radio-group v-model="radio" class="flex flex-col">
+    <div class="w-full">
+      <el-radio value="a" style="margin-right: 0px"> A：{{ topic.options_a }} </el-radio>
+    </div>
+    <div class="w-full">
+      <el-radio value="b" style="margin-right: 0px"> B：{{ topic.options_b }} </el-radio>
+    </div>
+    <div class="w-full">
+      <el-radio value="c" style="margin-right: 0px"> C：{{ topic.options_c }} </el-radio>
+    </div>
+    <div class="w-full">
+      <el-radio value="d" style="margin-right: 0px"> D：{{ topic.options_d }} </el-radio>
+    </div>
+  </el-radio-group>
+  <br />
+  <el-text v-show="checked ? true : showAnswer" style="font-weight: bold">
+    答案：{{ topic.answer }}
+  </el-text>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+
+const props = defineProps({ topic: Array, checked: Boolean });
+
+const radio = ref("");
+const showAnswer = ref(false);
+
+const reset = () => {
+  radio.value = "";
+  showAnswer.value = false;
+};
+
+defineExpose({ reset });
+
+watch(radio, (value) => {
+  showAnswer.value = false;
+  if (value != "") {
+    showAnswer.value = true;
+  }
+});
+</script>
+
+<style scoped></style>