From 32199bf4ed3c287e8bcbb1f61c106c276d82542c Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 18 Aug 2021 11:16:30 +0800
Subject: [PATCH] 样式
---
src/styles/top.scss | 35
src/page/index/layout.vue | 7
src/page/index/index.vue | 203 ++--
src/views/exam/startexam.vue | 292 ++++---
src/styles/media.scss | 16
src/page/index/top/top-theme.vue | 66
src/page/index/top/index.vue | 270 +++---
public/img/exam/startbg.jpg | 0
src/views/startexam/index.vue | 1472 ++++++++++++++++++-----------------
9 files changed, 1,233 insertions(+), 1,128 deletions(-)
diff --git a/public/img/exam/startbg.jpg b/public/img/exam/startbg.jpg
new file mode 100644
index 0000000..ef35f78
--- /dev/null
+++ b/public/img/exam/startbg.jpg
Binary files differ
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 7e1ad9e..ec7d7cc 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -1,26 +1,30 @@
<template>
- <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
+ <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
<div class="avue-header">
<!-- 顶部导航栏 -->
- <top ref="top"/>
+ <top ref="top" />
</div>
<div class="avue-layout">
- <div class="avue-left">
- <!-- 左侧导航栏 -->
- <sidebar/>
- </div>
+ <!-- <div class="avue-left"> -->
+ <!-- 左侧导航栏 -->
+ <!-- <sidebar/> -->
+ <!-- </div> -->
<div class="avue-main">
<!-- 顶部标签卡 -->
- <tags/>
+ <tags />
<transition name="fade-scale">
<search class="avue-view" v-show="isSearch"></search>
</transition>
<!-- 主体视图层 -->
- <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
+ <div
+ style="height: 100%; overflow-y: auto; overflow-x: hidden"
+ id="avue-view"
+ v-show="!isSearch"
+ >
<keep-alive>
- <router-view class="avue-view" v-if="$route.meta.keepAlive"/>
+ <router-view class="avue-view" v-if="$route.meta.keepAlive" />
</keep-alive>
- <router-view class="avue-view" v-if="!$route.meta.keepAlive"/>
+ <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
</div>
</div>
</div>
@@ -29,71 +33,70 @@
</template>
<script>
- import {mapGetters} from "vuex";
- import tags from "./tags";
- import search from "./search";
- import top from "./top/";
- import sidebar from "./sidebar/";
- import admin from "@/util/admin";
- import {validatenull} from "@/util/validate";
- import {calcDate} from "@/util/date.js";
- import {getStore} from "@/util/store.js";
+import { mapGetters } from "vuex";
+import tags from "./tags";
+import search from "./search";
+import top from "./top/";
+import sidebar from "./sidebar/";
+import admin from "@/util/admin";
+import { validatenull } from "@/util/validate";
+import { calcDate } from "@/util/date.js";
+import { getStore } from "@/util/store.js";
- export default {
- components: {
- top,
- tags,
- search,
- sidebar
+export default {
+ components: {
+ top,
+ tags,
+ search,
+ sidebar,
+ },
+ name: "index",
+ provide() {
+ return {
+ index: this,
+ };
+ },
+ data() {
+ return {
+ //搜索控制
+ isSearch: false,
+ //刷新token锁
+ refreshLock: false,
+ //刷新token的时间
+ refreshTime: "",
+ };
+ },
+ created() {
+ //实时检测刷新token
+ this.refreshToken();
+ },
+ mounted() {
+ this.init();
+ },
+ computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
+ props: [],
+ methods: {
+ showCollapse() {
+ this.$store.commit("SET_COLLAPSE");
},
- name: "index",
- provide() {
- return {
- index: this
+ // 初始化
+ init() {
+ this.$store.commit("SET_SCREEN", admin.getScreen());
+ window.onresize = () => {
+ setTimeout(() => {
+ this.$store.commit("SET_SCREEN", admin.getScreen());
+ }, 0);
};
+ this.$store.dispatch("FlowRoutes").then(() => {});
},
- data() {
- return {
- //搜索控制
- isSearch: false,
- //刷新token锁
- refreshLock: false,
- //刷新token的时间
- refreshTime: ""
- };
- },
- created() {
- //实时检测刷新token
- this.refreshToken();
- },
- mounted() {
- this.init();
- },
- computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
- props: [],
- methods: {
- showCollapse() {
- this.$store.commit("SET_COLLAPSE");
- },
- // 初始化
- init() {
- this.$store.commit("SET_SCREEN", admin.getScreen());
- window.onresize = () => {
- setTimeout(() => {
- this.$store.commit("SET_SCREEN", admin.getScreen());
- }, 0);
- };
- this.$store.dispatch("FlowRoutes").then(() => {
- });
- },
- //打开菜单
- openMenu(item = {}) {
- this.$store.dispatch("GetMenu", item.id).then(data => {
- if (data.length !== 0) {
- this.$router.$avueRouter.formatRoutes(data, true);
- }
- //当点击顶部菜单后默认打开第一个菜单
- /*if (!this.validatenull(item)) {
+ //打开菜单
+ openMenu(item = {}) {
+ this.$store.dispatch("GetMenu", item.id).then((data) => {
+ if (data.length !== 0) {
+ this.$router.$avueRouter.formatRoutes(data, true);
+ }
+ //当点击顶部菜单后默认打开第一个菜单
+ /*if (!this.validatenull(item)) {
let itemActive = {},
childItemActive = 0;
if (item.path) {
@@ -113,31 +116,39 @@
}, itemActive.meta)
});
}*/
-
- });
- },
- // 定时检测token
- refreshToken() {
- this.refreshTime = setInterval(() => {
- const token = getStore({
+ });
+ },
+ // 定时检测token
+ refreshToken() {
+ this.refreshTime = setInterval(() => {
+ const token =
+ getStore({
name: "token",
- debug: true
+ debug: true,
}) || {};
- const date = calcDate(token.datetime, new Date().getTime());
- if (validatenull(date)) return;
- if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
- this.refreshLock = true;
- this.$store
- .dispatch("refreshToken")
- .then(() => {
- this.refreshLock = false;
- })
- .catch(() => {
- this.refreshLock = false;
- });
- }
- }, 10000);
- }
- }
- };
+ const date = calcDate(token.datetime, new Date().getTime());
+ if (validatenull(date)) return;
+ if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
+ this.refreshLock = true;
+ this.$store
+ .dispatch("refreshToken")
+ .then(() => {
+ this.refreshLock = false;
+ })
+ .catch(() => {
+ this.refreshLock = false;
+ });
+ }
+ }, 10000);
+ },
+ },
+};
</script>
+
+<style scoped>
+.avue-layout {
+ width: 100%;
+ height: calc(100% - 45px);
+ box-sizing: border-box;
+}
+</style>
\ No newline at end of file
diff --git a/src/page/index/layout.vue b/src/page/index/layout.vue
index 96976dd..b6daadf 100644
--- a/src/page/index/layout.vue
+++ b/src/page/index/layout.vue
@@ -6,3 +6,10 @@
<router-view class="avue-view" v-if="!$route.meta.keepAlive" />
</div>
</template>
+
+<style scoped>
+.avue-view {
+ width: 100% !important;
+ height: 100% !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 7e480e1..8cca9b0 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -1,95 +1,115 @@
<template>
<div class="avue-top">
<div class="top-bar__left">
+ <div class="t_b_l_title">保安员考试系统</div>
+ </div>
+ <!-- <div class="top-bar__left">
<div class="avue-breadcrumb"
:class="[{ 'avue-breadcrumb--active': isCollapse }]"
v-if="showCollapse">
<i class="icon-navicon"
@click="setCollapse"></i>
</div>
- </div>
- <div class="top-bar__title">
- <div class="top-bar__item top-bar__item--show"
- v-if="showMenu">
+ </div> -->
+ <!-- <div class="top-bar__title">
+ <div class="top-bar__item top-bar__item--show" v-if="showMenu">
<top-menu ref="topMenu"></top-menu>
</div>
- <span class="top-bar__item"
- v-if="showSearch">
+ <span class="top-bar__item" v-if="showSearch">
<top-search></top-search>
</span>
- </div>
+ </div> -->
<div class="top-bar__right">
- <el-tooltip v-if="showColor"
- effect="dark"
- :content="$t('navbar.color')"
- placement="bottom">
+ <!-- <el-tooltip
+ v-if="showColor"
+ effect="dark"
+ :content="$t('navbar.color')"
+ placement="bottom"
+ >
<div class="top-bar__item">
<top-color></top-color>
</div>
- </el-tooltip>
- <el-tooltip v-if="showDebug"
- effect="dark"
- :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"
- placement="bottom">
+ </el-tooltip> -->
+ <!-- <el-tooltip
+ v-if="showDebug"
+ effect="dark"
+ :content="logsFlag ? $t('navbar.bug') : logsLen + $t('navbar.bugs')"
+ placement="bottom"
+ >
<div class="top-bar__item">
<top-logs></top-logs>
</div>
- </el-tooltip>
- <el-tooltip v-if="showLock"
- effect="dark"
- :content="$t('navbar.lock')"
- placement="bottom">
+ </el-tooltip> -->
+ <!-- <el-tooltip
+ v-if="showLock"
+ effect="dark"
+ :content="$t('navbar.lock')"
+ placement="bottom"
+ >
<div class="top-bar__item">
<top-lock></top-lock>
</div>
- </el-tooltip>
- <el-tooltip v-if="showTheme"
- effect="dark"
- :content="$t('navbar.theme')"
- placement="bottom">
- <div class="top-bar__item top-bar__item--show">
- <top-theme></top-theme>
+ </el-tooltip> -->
+ <!-- 主题 -->
+ <el-tooltip
+ effect="dark"
+ :content="$t('navbar.theme')"
+ placement="bottom"
+ >
+ <div class="top-bar__item top-bar__item--show" v-show="false">
+ <top-theme v-show="false"></top-theme>
</div>
</el-tooltip>
- <el-tooltip effect="dark"
- :content="$t('navbar.notice')"
- placement="bottom">
+ <!-- <el-tooltip
+ effect="dark"
+ :content="$t('navbar.notice')"
+ placement="bottom"
+ >
<div class="top-bar__item top-bar__item--show">
<top-notice></top-notice>
</div>
- </el-tooltip>
- <el-tooltip effect="dark"
- :content="$t('navbar.language')"
- placement="bottom">
+ </el-tooltip> -->
+ <!-- <el-tooltip
+ effect="dark"
+ :content="$t('navbar.language')"
+ placement="bottom"
+ >
<div class="top-bar__item top-bar__item--show">
<top-lang></top-lang>
</div>
- </el-tooltip>
- <el-tooltip v-if="showFullScren"
- effect="dark"
- :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
- placement="bottom">
+ </el-tooltip> -->
+ <!-- <el-tooltip
+ v-if="showFullScren"
+ effect="dark"
+ :content="
+ isFullScren ? $t('navbar.screenfullF') : $t('navbar.screenfull')
+ "
+ placement="bottom"
+ >
<div class="top-bar__item">
- <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
- @click="handleScreen"></i>
+ <i
+ :class="isFullScren ? 'icon-tuichuquanping' : 'icon-quanping'"
+ @click="handleScreen"
+ ></i>
</div>
- </el-tooltip>
- <img class="top-bar__img"
- :src="userInfo.avatar">
+ </el-tooltip> -->
+ <img class="top-bar__img" :src="userInfo.avatar" />
<el-dropdown>
<span class="el-dropdown-link">
- {{userInfo.userName}}
+ {{ userInfo.userName }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
- <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
+ <router-link to="/">{{ $t("navbar.dashboard") }}</router-link>
</el-dropdown-item>
<el-dropdown-item>
- <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
+ <router-link to="/info/index">{{
+ $t("navbar.userinfo")
+ }}</router-link>
</el-dropdown-item>
- <el-dropdown-item @click.native="logout"
- divided>{{$t('navbar.logOut')}}
+ <el-dropdown-item @click.native="logout" divided
+ >{{ $t("navbar.logOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -97,86 +117,88 @@
</div>
</template>
<script>
- import {resetRouter} from '@/router/router'
- import {mapGetters, mapState} from "vuex";
- import {fullscreenToggel, listenfullscreen} from "@/util/util";
- import topLock from "./top-lock";
- import topMenu from "./top-menu";
- import topSearch from "./top-search";
- import topTheme from "./top-theme";
- import topLogs from "./top-logs";
- import topColor from "./top-color";
- import topNotice from './top-notice'
- import topLang from "./top-lang";
+import { resetRouter } from "@/router/router";
+import { mapGetters, mapState } from "vuex";
+import { fullscreenToggel, listenfullscreen } from "@/util/util";
+import topLock from "./top-lock";
+import topMenu from "./top-menu";
+import topSearch from "./top-search";
+import topTheme from "./top-theme";
+import topLogs from "./top-logs";
+import topColor from "./top-color";
+import topNotice from "./top-notice";
+import topLang from "./top-lang";
- export default {
- components: {
- topLock,
- topMenu,
- topSearch,
- topTheme,
- topLogs,
- topColor,
- topNotice,
- topLang
+export default {
+ components: {
+ topLock,
+ topMenu,
+ topSearch,
+ topTheme,
+ topLogs,
+ topColor,
+ topNotice,
+ topLang,
+ },
+ name: "top",
+ data() {
+ return {};
+ },
+ filters: {},
+ created() {},
+ mounted() {
+ listenfullscreen(this.setScreen);
+ },
+ computed: {
+ ...mapState({
+ showDebug: (state) => state.common.showDebug,
+ showTheme: (state) => state.common.showTheme,
+ showLock: (state) => state.common.showLock,
+ showFullScren: (state) => state.common.showFullScren,
+ showCollapse: (state) => state.common.showCollapse,
+ showSearch: (state) => state.common.showSearch,
+ showMenu: (state) => state.common.showMenu,
+ showColor: (state) => state.common.showColor,
+ }),
+ ...mapGetters([
+ "userInfo",
+ "isFullScren",
+ "tagWel",
+ "tagList",
+ "isCollapse",
+ "tag",
+ "logsLen",
+ "logsFlag",
+ ]),
+ },
+ methods: {
+ handleScreen() {
+ fullscreenToggel();
},
- name: "top",
- data() {
- return {};
+ setCollapse() {
+ this.$store.commit("SET_COLLAPSE");
},
- filters: {},
- created() {
+ setScreen() {
+ this.$store.commit("SET_FULLSCREN");
},
- mounted() {
- listenfullscreen(this.setScreen);
- },
- computed: {
- ...mapState({
- showDebug: state => state.common.showDebug,
- showTheme: state => state.common.showTheme,
- showLock: state => state.common.showLock,
- showFullScren: state => state.common.showFullScren,
- showCollapse: state => state.common.showCollapse,
- showSearch: state => state.common.showSearch,
- showMenu: state => state.common.showMenu,
- showColor: state => state.common.showColor
- }),
- ...mapGetters([
- "userInfo",
- "isFullScren",
- "tagWel",
- "tagList",
- "isCollapse",
- "tag",
- "logsLen",
- "logsFlag"
- ])
- },
- methods: {
- handleScreen() {
- fullscreenToggel();
- },
- setCollapse() {
- this.$store.commit("SET_COLLAPSE");
- },
- setScreen() {
- this.$store.commit("SET_FULLSCREN");
- },
- logout() {
- this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
- confirmButtonText: this.$t("submitText"),
- cancelButtonText: this.$t("cancelText"),
- type: "warning"
- }).then(() => {
- this.$store.dispatch("LogOut").then(() => {
- resetRouter();
- this.$router.push({path: "/login"});
- });
+ logout() {
+ this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
+ confirmButtonText: this.$t("submitText"),
+ cancelButtonText: this.$t("cancelText"),
+ type: "warning",
+ }).then(() => {
+ this.$store.dispatch("LogOut").then(() => {
+ resetRouter();
+ this.$router.push({ path: "/login" });
});
- }
- }
- };
+ });
+ },
+ },
+};
</script>
<style lang="scss" scoped>
+.t_b_l_title {
+ color: #fff;
+}
</style>
diff --git a/src/page/index/top/top-theme.vue b/src/page/index/top/top-theme.vue
index d1c22c6..d04f396 100644
--- a/src/page/index/top/top-theme.vue
+++ b/src/page/index/top/top-theme.vue
@@ -1,26 +1,23 @@
<template>
<div>
- <el-dialog title="选择"
- append-to-body
- :visible.sync="box"
- width="50%">
- <el-radio-group v-model="text"
- class="list">
+ <el-dialog title="选择" append-to-body :visible.sync="box" width="50%">
+ <el-radio-group v-model="text" class="list">
<el-row :span="24">
- <el-col v-for="(item,index) in list"
- :key="index"
- :md="4"
- :xs="12"
- :sm="4">
- <el-radio :label="item.value">{{item.name}}</el-radio>
+ <el-col
+ v-for="(item, index) in list"
+ :key="index"
+ :md="4"
+ :xs="12"
+ :sm="4"
+ >
+ <el-radio :label="item.value">{{ item.name }}</el-radio>
</el-col>
</el-row>
</el-radio-group>
</el-dialog>
<span>
- <i class="icon-zhuti"
- @click="open"></i>
+ <i class="icon-zhuti" @click="open"></i>
</span>
</div>
</template>
@@ -29,78 +26,79 @@
import { setTheme } from "@/util/util";
import { mapGetters } from "vuex";
export default {
- data () {
+ data() {
return {
box: false,
text: "",
list: [
{
name: "默认主题",
- value: "default"
+ value: "default",
},
{
name: "白色主题",
- value: "theme-white"
+ value: "theme-white",
},
{
name: "黑色主题",
- value: "theme-dark"
+ value: "theme-dark",
},
{
name: "炫彩主题",
- value: "theme-star"
+ value: "theme-star",
},
{
name: "智能主题",
- value: "theme-bule"
+ // value: "theme-bule"
+ value: "theme-white",
},
{
name: "iview主题",
- value: "theme-iview"
+ value: "theme-iview",
},
{
name: "vip主题",
- value: "theme-vip"
+ value: "theme-vip",
},
{
name: "cool主题",
- value: "theme-cool"
+ value: "theme-cool",
},
{
name: "d2主题",
- value: "theme-d2"
+ value: "theme-d2",
},
{
name: "hey主题",
- value: "theme-hey"
+ value: "theme-hey",
},
{
name: "lte主题",
- value: "theme-lte"
- }
- ]
+ value: "theme-lte",
+ },
+ ],
};
},
watch: {
text: function (val) {
this.$store.commit("SET_THEME_NAME", val);
setTheme(val);
- }
+ },
},
computed: {
- ...mapGetters(["themeName"])
+ ...mapGetters(["themeName"]),
},
- mounted () {
+ mounted() {
this.text = this.themeName;
if (!this.text) {
this.text = "";
}
},
methods: {
- open () {
+ open() {
this.box = true;
- }
- }
+ },
+ },
};
</script>
diff --git a/src/styles/media.scss b/src/styles/media.scss
index d92e626..46b80ba 100644
--- a/src/styles/media.scss
+++ b/src/styles/media.scss
@@ -4,7 +4,7 @@
.avue-logo,
.avue-layout .login-logo,
.avue-main {
- transition: all .3s;
+ transition: all 0.3s;
}
.avue-contail {
@@ -40,8 +40,8 @@
}
.avue-header {
- padding-left: 240px;
- display: none;
+ padding-left: 38px;
+ // display: none;
width: 100%;
background-color: #fff;
box-sizing: border-box;
@@ -52,8 +52,10 @@
left: 240px;
padding: 0;
padding-bottom: 20px;
- width: calc(100% - 240px);
- height: calc(100% - 64px);
+ // width: calc(100% - 240px);
+ // height: calc(100% - 64px);
+ width: 100%;
+ height: 100%;
box-sizing: border-box;
overflow: hidden;
transition: all 0.5s;
@@ -97,7 +99,7 @@
right: 0;
top: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, .3);
+ background-color: rgba(0, 0, 0, 0.3);
z-index: 1024;
&--show {
display: block;
@@ -171,4 +173,4 @@
display: block;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/top.scss b/src/styles/top.scss
index a3f9b81..b9d96b8 100644
--- a/src/styles/top.scss
+++ b/src/styles/top.scss
@@ -1,31 +1,32 @@
-$height:64px;
+$height: 64px;
.avue-top {
- padding: 0 20px;
+ padding: 0 0px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
- color: rgba(0, 0, 0, .65);
+ color: rgba(0, 0, 0, 0.65);
font-size: 28px;
height: $height;
line-height: $height;
box-sizing: border-box;
white-space: nowrap;
- .el-menu-item{
- i,span{
+ .el-menu-item {
+ i,
+ span {
font-size: 13px;
}
}
- .el-menu--horizontal>.el-menu-item {
- height: $height;
- line-height: $height;
+ .el-menu--horizontal > .el-menu-item {
+ height: $height;
+ line-height: $height;
}
}
.avue-breadcrumb {
height: 100%;
- i{
+ i {
font-size: 30px !important;
}
&--active {
- transform:rotate(90deg);
+ transform: rotate(90deg);
}
}
@@ -33,7 +34,7 @@
box-sizing: border-box;
.el-menu-item {
padding: 0 10px;
- border:none !important;
+ border: none !important;
}
}
@@ -41,7 +42,7 @@
line-height: $height;
position: absolute !important;
left: 20px;
- top:0;
+ top: 0;
width: 400px !important;
.el-input__inner {
font-size: 13px;
@@ -66,7 +67,7 @@
height: $height;
position: absolute;
top: 0;
- i{
+ i {
line-height: $height;
}
}
@@ -85,20 +86,20 @@
position: relative;
display: inline-block;
height: $height;
- margin:0 10px;
+ margin: 0 10px;
font-size: 16px;
&--show {
display: inline-block !important;
}
- .el-badge__content.is-fixed{
- top:12px;
+ .el-badge__content.is-fixed {
+ top: 12px;
right: 5px;
}
}
.top-bar__title {
height: 100%;
- padding:0 40px;
+ padding: 0 40px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/src/views/exam/startexam.vue b/src/views/exam/startexam.vue
index c0da7eb..4d89b0c 100644
--- a/src/views/exam/startexam.vue
+++ b/src/views/exam/startexam.vue
@@ -6,7 +6,7 @@
* menu-name 考试管理
*/
<template>
- <div class="exam">
+ <!-- <div class="exam">
<button class="logout"
onmouseover="this.style.backgroundColor='red';"
onmouseout="this.style.backgroundColor='';"
@@ -15,45 +15,69 @@
<div class="no" v-if="!pageDisable">
<span>没有找到相应的考试信息</span>
</div>
+ </div> -->
+ <div class="startexam">
+ <div class="startexam_heard">
+ {{ option.data[0].title ? option.data[0].title : "保安员证考试" }}
</div>
-
+ <div class="startexam_main">
+ <div class="s_m_img">
+ <img src="/img/exam/startbg.jpg" alt="" />
+ </div>
+ <div class="s_m_value" v-if="option.data[0].list.length != 0">
+ <div v-for="(item, index) in option.data[0].list" :key="index">
+ <span class="s_m_v_title">{{ item.title }}</span>
+ <span>{{ item.value }}</span>
+ </div>
+ <div>
+ <el-button type="primary" round @click="startExam"
+ >开始考试</el-button
+ >
+ </div>
+ </div>
+ <div class="s_m_value" v-else>没有找到相应的考试信息</div>
+ </div>
+ </div>
</template>
<script>
-import { mapState } from 'vuex';
-import {getExamDetail} from "@/api/examapi/examination";
-import {updateApplyStatus} from "@/api/examapi/applyexam";
+import { mapState } from "vuex";
+import { getExamDetail } from "@/api/examapi/examination";
+import { updateApplyStatus } from "@/api/examapi/applyexam";
export default {
-
- data(){
+ data() {
return {
- resData:null,
- sex:"",
- pageDisable:false,
+ resData: null,
+ sex: "",
+ pageDisable: false,
option: {
span: 8,
- data: []
+ data: [
+ {
+ list: [],
+ },
+ ],
},
- }
+ };
},
computed: {
- ...mapState({
- userInfo: state => state.user.userInfo
- })
+ ...mapState({
+ userInfo: (state) => state.user.userInfo,
+ }),
},
mounted() {
- //获取数据
- this.getUserInfoBYExam();
- window.startExam=this.startExam;
- },
- methods:{
- //退出登录
+ //获取数据
+ this.getUserInfoBYExam();
+ window.startExam = this.startExam;
+ },
+ methods: {
+ //退出登录
handleLogout() {
this.$confirm("是否退出系统, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
- type: "warning"
+ type: "warning",
}).then(() => {
this.$store.dispatch("LogOut").then(() => {
this.$router.push({ path: "/login" });
@@ -61,128 +85,134 @@
});
},
//开始考试跳转
- startExam () {
+ startExam() {
var that = this;
//去修改考试状态
var data = {
- id:that.resData.applyId,
- examType:this.resData.examType
- }
- updateApplyStatus(data).then(() => {
- })
+ id: that.resData.applyId,
+ examType: this.resData.examType,
+ };
+ updateApplyStatus(data).then(() => {});
this.$router.push({
- path: `/startexam/${that.resData.id}`,
- query: that.resData
- })
+ path: `/startexam/${that.resData.id}`,
+ query: that.resData,
+ });
},
- getUserInfoBYExam(){
- var that = this;
- getExamDetail(this.userInfo.user_id).then((res) => {
- that.resData = res.data.data[0];
- var data = res.data.data[0];
- // debugger;
- if(res.data.data.length>0){
- that.pageDisable = true;
- if(data.sex==1){
- that.sex = "男"
- }
- if(data.sex==2){
- that.sex = "女"
- }
- that.option.data = [
- {
- title: that.resData.examName,
- color: '#ffa820',
- subtext: '开始考试',
- click: function () {
- window.parent.startExam();
- },
- list: [
- {
- title: '姓名： '+that.resData.realName,
- check: true,
- },
- {
- title: '准考证号： '+that.resData.candidateNo,
- check: true,
- },
- {
- title: '身份证号： '+that.resData.idCardNo,
- check: true,
- },
- {
- title: '性别： '+that.sex,
- check: true,
- }
- ]
- }
- ]
+ getUserInfoBYExam() {
+ var that = this;
+ getExamDetail(this.userInfo.user_id).then(
+ (res) => {
+ that.resData = res.data.data[0];
+ var data = res.data.data[0];
+ // debugger;
+ console.log(data, 254424);
+ if (res.data.data.length > 0) {
+ that.pageDisable = true;
+ if (data.sex == 1) {
+ that.sex = "男";
}
-
+ if (data.sex == 2) {
+ that.sex = "女";
+ }
+ that.option.data = [
+ {
+ title: that.resData.examName,
+ color: "#ffa820",
+ subtext: "开始考试",
+ click: function () {
+ window.parent.startExam();
+ },
+ list: [
+ {
+ title: "姓名： ",
+ value: that.resData.realName,
+ check: true,
+ },
+ {
+ title: "准考证号： ",
+ value: that.resData.candidateNo,
+ check: true,
+ },
+ {
+ title: "身份证号： ",
+ value: that.resData.idCardNo,
+ check: true,
+ },
+ {
+ title: "性别： ",
+ value: that.sex,
+ check: true,
+ },
+ ],
+ },
+ ];
+ }
},
(error) => {
window.console.log(error);
}
);
+ },
+ },
+};
+</script>
+<style lang="scss">
+//最终
+.startexam {
+ // width: 100%;
+ // height: 100%;
+ // border: 1px solid red;
+ width: 80%;
+ height: 90%;
+ margin: 2.5% 10%;
+ background-color: rgba($color: #fff, $alpha: 1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .startexam_heard {
+ font-size: 34px;
+ color: rgb(240, 114, 29);
+ position: relative;
+ top: -10%;
+ }
+ .startexam_main {
+ width: 960px;
+ height: 300px;
+ // border: 1px solid red;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-shadow: 5px 12px 15px -3px rgba($color: #797979, $alpha: 0.2);
+ .s_m_img {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 90%;
+ height: 90%;
+ }
+ }
+ .s_m_value {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ div {
+ width: 90%;
+ height: 15%;
+ font-size: 17px;
+ .s_m_v_title {
+ display: inline-block;
+ width: 100px;
+ }
+ }
}
}
}
-</script>
-<style lang="scss">
- .exam{
- width: 100%;
- height: 100%;
- position: fixed;
- align-items: center;
- justify-items: center;
- }
-
- .avue-data-pay .item {
- margin-left: 100% !important;
- width: 100% !important;
- min-height: 400px;
- margin-top: 240px;
- }
-
- .list {
- margin-left: 28% !important;
- }
-
- .avue-data-pay .img {
- display: none;
- }
-
- .avue-data-pay .title {
- padding: 40px 0 10px;
- }
-
-
- .no {
- background-color: #fff;
- width: 30%;
- height: 200px;
- border-radius: 5px;
- margin: 0 auto;
- margin-top: 15%;
- text-align: center;
- line-height: 200px;
-
- span{
- letter-spacing: 1px;
- color: blueviolet;
- font-size: 15px;
- }
- }
-
- .logout{
- border: 0px;
- margin-left: 92%;
- margin-top: 30px;
- border-radius: 5px;
- font-size: 14px;
- width: 80px;
- height: 30px;
- letter-spacing: 1px;
- }
</style>
diff --git a/src/views/startexam/index.vue b/src/views/startexam/index.vue
index 41a7c6c..0bd3f8b 100644
--- a/src/views/startexam/index.vue
+++ b/src/views/startexam/index.vue
@@ -1,777 +1,811 @@
<template>
-
- <el-row class="morpheus-box">
- <el-col :span="24">
- <el-card>
-
- <div class="exam-card-body">
-
- <div class="subject-box">
- <el-row :gutter="30">
- <el-col :span="5">
- <div class="tool-bar">
- <div class="time-remain">
- 剩余时间:
- <div class="time">
- <count-down v-on:start_callback="countDownS_cb(1)"
- v-on:end_callback="countDownE_cb(1)"
- :current-time="currentTime"
- :start-time="startTime"
- :end-time="endTime"
- :tip-text="'距离考试开始'"
- :tip-text-end="'距离考试结束'"
- :end-text="'考试结束'"
- :hourTxt="':'"
- :minutesTxt="':'"
- :secondsTxt="''">
- </count-down>
- </div>
- </div>
- <div class="current-progress">
- 当前进度: {{subjectIndex}}/{{subjectIds.length}}
- </div>
- <div class="answer-card">
- <el-button type="text"
- icon="el-icon-date"
- @click="answerCard">答题卡</el-button>
- </div>
- <el-button type="success"
- icon="el-icon-date"
- @click="submitExam"
- v-bind:disabled="disableSubmit">提交</el-button>
- </div>
- </el-col>
- <el-col :span="18">
- <div class="subject-box-card">
- <div class="subject-exam-title">{{exam.examinationName}}（共{{subjectIds.length}}题，合计100分）</div>
- <!-- 题目内容 -->
- <choices ref="choices"
- v-show="this.query.type === 0" />
-
- <multiple-choices ref="multipleChoices"
- v-show="this.query.type === 1" />
-
- <judgement ref="judgement"
- v-show="this.query.type === 2" />
-
- <practical-operation ref="practicalOperation"
- v-show="this.query.type === 3" />
-
- <short-answer ref="shortAnswer"
- v-show="this.query.type === 4" />
-
- <div class="subject-buttons"
- v-if="query.subjectId !== ''">
-
- <el-button plain
- @click="last"
- :loading="loadingLast">上一题</el-button>
- <el-button plain
- @click="next"
- :loading="loadingNext">下一题</el-button>
- <el-button type="success"
- style="display:none"
- @click="submitExam"
- v-bind:disabled="disableSubmit">提交</el-button>
-
- </div>
- </div>
- </el-col>
- </el-row>
- <el-dialog title="答题卡"
- :visible.sync="dialogVisible"
- width="50%"
- top="10vh"
- :modal='false'
- center>
- <div class="answer-card-title">{{exam.examinationName}}（共{{subjectIds.length}}题，合计{{exam.totalScore}}分）</div>
- <div class="answer-card-split"></div>
- <el-row class="answer-card-content">
- <el-button :class="{ 'answered': subjectIds[index].answered }"
- circle
- v-for="(value, index) in subjectIds"
- :style="{background: value.color}"
- :key="index"
- @click="toSubject(value.everyID, value.type, index)"> {{index + 1}} </el-button>
- </el-row>
- </el-dialog>
+ <el-row class="morpheus-box">
+ <el-col :span="24">
+ <el-card>
+ <div class="exam-card-body">
+ <div class="subject-box">
+ <el-row :gutter="30">
+ <el-col :span="5">
+ <div class="tool-bar">
+ <div class="time-remain">
+ 剩余时间:
+ <div class="time">
+ <count-down
+ v-on:start_callback="countDownS_cb(1)"
+ v-on:end_callback="countDownE_cb(1)"
+ :current-time="currentTime"
+ :start-time="startTime"
+ :end-time="endTime"
+ :tip-text="'距离考试开始'"
+ :tip-text-end="'距离考试结束'"
+ :end-text="'考试结束'"
+ :hourTxt="':'"
+ :minutesTxt="':'"
+ :secondsTxt="''"
+ >
+ </count-down>
</div>
-
+ </div>
+ <div class="current-progress">
+ 当前进度: {{ subjectIndex }}/{{ subjectIds.length }}
+ </div>
+ <div class="answer-card">
+ <el-button
+ type="text"
+ icon="el-icon-date"
+ @click="answerCard"
+ >答题卡</el-button
+ >
+ </div>
+ <el-button
+ type="success"
+ icon="el-icon-date"
+ @click="submitExam"
+ v-bind:disabled="disableSubmit"
+ >提交</el-button
+ >
</div>
+ </el-col>
+ <el-col :span="18">
+ <div class="subject-box-card">
+ <div class="subject-exam-title">
+ {{ exam.examinationName }}（共{{
+ subjectIds.length
+ }}题，合计100分）
+ </div>
+ <!-- 题目内容 -->
+ <choices ref="choices" v-show="this.query.type === 0" />
- </el-card>
- </el-col>
- </el-row>
+ <multiple-choices
+ ref="multipleChoices"
+ v-show="this.query.type === 1"
+ />
+ <judgement ref="judgement" v-show="this.query.type === 2" />
+
+ <practical-operation
+ ref="practicalOperation"
+ v-show="this.query.type === 3"
+ />
+
+ <short-answer
+ ref="shortAnswer"
+ v-show="this.query.type === 4"
+ />
+
+ <div class="subject-buttons" v-if="query.subjectId !== ''">
+ <el-button plain @click="last" :loading="loadingLast"
+ >上一题</el-button
+ >
+ <el-button plain @click="next" :loading="loadingNext"
+ >下一题</el-button
+ >
+ <el-button
+ type="success"
+ style="display: none"
+ @click="submitExam"
+ v-bind:disabled="disableSubmit"
+ >提交</el-button
+ >
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-dialog
+ title="答题卡"
+ :visible.sync="dialogVisible"
+ width="50%"
+ top="10vh"
+ :modal="false"
+ center
+ >
+ <div class="answer-card-title">
+ {{ exam.examinationName }}（共{{ subjectIds.length }}题，合计{{
+ exam.totalScore
+ }}分）
+ </div>
+ <div class="answer-card-split"></div>
+ <el-row class="answer-card-content">
+ <!-- <el-button
+ :class="{ answered: subjectIds[index].answered }"
+ circle
+ v-for="(value, index) in subjectIds"
+ :style="{ background: value.color }"
+ :key="index"
+ @click="toSubject(value.everyID, value.type, index)"
+ > {{ index + 1 }} </el-button> -->
+ <el-button
+ circle
+ v-for="(value, index) in subjectIds"
+ :key="index"
+ @click="toSubject(value.everyID, value.type, index)"
+ > {{ index + 1 }} </el-button
+ >
+ </el-row>
+ </el-dialog>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
</template>
<script>
-import { mapState } from 'vuex'
-import CountDown from 'vue2-countdown'
-import { saveAndNext } from '@/api/exam/answer'
-import { getSubjectIds } from '@/api/exam/exam'
-import { getCurrentTime } from '@/api/exam/examRecord'
-import { getSubjectResultInfo } from '@/api/exam/subject'
+import { mapState } from "vuex";
+import CountDown from "vue2-countdown";
+import { saveAndNext } from "@/api/exam/answer";
+import { getSubjectIds } from "@/api/exam/exam";
+import { getCurrentTime } from "@/api/exam/examRecord";
+import { getSubjectResultInfo } from "@/api/exam/subject";
-import moment from 'moment'
-import { messageSuccess, messageFail, messageWarn, isNotEmpty } from '@/util/util'
-import Tinymce from '@/components/Tinymce'
-import Choices from '@/components/Subjects/Choices'
+import moment from "moment";
+import {
+ messageSuccess,
+ messageFail,
+ messageWarn,
+ isNotEmpty,
+} from "@/util/util";
+import Tinymce from "@/components/Tinymce";
+import Choices from "@/components/Subjects/Choices";
-import MultipleChoices from '@/components/Subjects/MultipleChoices'
-import PracticalOperation from '@/components/Subjects/PracticalOperation'
-
-
-
+import MultipleChoices from "@/components/Subjects/MultipleChoices";
+import PracticalOperation from "@/components/Subjects/PracticalOperation";
// import ShortAnswer from '@/components/Subjects/ShortAnswer'
-import Judgement from '@/components/Subjects/Judgement'
+import Judgement from "@/components/Subjects/Judgement";
-import { nextSubjectType } from '@/const/constant'
+import { nextSubjectType } from "@/const/constant";
export default {
- components: {
- CountDown,
- Tinymce,
- Choices,
- MultipleChoices,
- PracticalOperation,
- Judgement,
- // ShortAnswer,
- },
- data () {
- return {
- loadingLast: false,
- loadingNext: false,
- //1:绿色 2：红色 3：无色
- result:3,
- currentTime: 0,
- startTime: 0,
- endTime: 0,
- disableSubmit: true,
- subjectIndex: 1,
- query: {
- examinationId: undefined,
- examRecordId: undefined,
- subjectId: undefined,
- userId: undefined,
- type: 0
- },
- subject: {},
- answer: '',
- dialogVisible: false,
- subjectIds: [],
- subjectStartTime: undefined,
- exam: {
- id: '590969316204220416',
- creator: 'admin',
- createDate: 1560939664000,
- modifier: 'preview',
- modifyDate: 1609835214000,
+ components: {
+ CountDown,
+ Tinymce,
+ Choices,
+ MultipleChoices,
+ PracticalOperation,
+ Judgement,
+ // ShortAnswer,
+ },
+ data() {
+ return {
+ loadingLast: false,
+ loadingNext: false,
+ //1:绿色 2：红色 3：无色
+ result: 3,
+ currentTime: 0,
+ startTime: 0,
+ endTime: 0,
+ disableSubmit: true,
+ subjectIndex: 1,
+ query: {
+ examinationId: undefined,
+ examRecordId: undefined,
+ subjectId: undefined,
+ userId: undefined,
+ type: 0,
+ },
+ subject: {},
+ answer: "",
+ dialogVisible: false,
+ subjectIds: [],
+ subjectStartTime: undefined,
+ exam: {
+ id: "590969316204220416",
+ creator: "admin",
+ createDate: 1560939664000,
+ modifier: "preview",
+ modifyDate: 1609835214000,
- delFlag: 0,
+ delFlag: 0,
- examinationName: '',
+ examinationName: "",
- startTime: null,
- endTime: null,
+ startTime: null,
+ endTime: null,
- totalScore: 50,
+ totalScore: 50,
- status: 0,
+ status: 0,
+ remark: "全国计算机统考练习题10道",
- remark: '全国计算机统考练习题10道',
+ newRecord: false,
+ },
+ firstFlag: true,
+ };
+ },
+ computed: {
+ ...mapState({
+ userInfo: (state) => state.user.userInfo,
+ }),
+ },
+ created() {
+ const examInfo = this.$route.params.id;
- newRecord: false
- },
- firstFlag: true
- }
- },
- computed: {
- ...mapState({
- userInfo: state => state.user.userInfo
- })
- },
- created () {
+ if (isNotEmpty(examInfo)) {
+ // 试卷ID
+ this.query.examinationId = this.$route.params.id;
- const examInfo = this.$route.params.id
+ // 考场ID
+ this.query.examRecordId = this.userInfo.user_id;
- if (isNotEmpty(examInfo)) {
- // 试卷ID
- this.query.examinationId = this.$route.params.id
+ this.query.userId = this.userInfo.user_id;
- // 考场ID
- this.query.examRecordId = this.userInfo.user_id
+ this.exam.id = this.userInfo.user_id + "" + this.$route.params.id;
- this.query.userId = this.userInfo.user_id
+ this.exam.examinationName = this.$route.query.examName;
+ // this.exam.startTime = this.$route.query.startTime
+ // this.exam.endTime = this.$route.query.endTime
+ // this.exam.totalScore = this.$route.query.totalScore
+ // this.exam.status = this.$route.query.examStatus
+ // this.exam.remark = this.$route.query.remark
- this.exam.id = this.userInfo.user_id + '' + this.$route.params.id
-
- this.exam.examinationName = this.$route.query.examName
- // this.exam.startTime = this.$route.query.startTime
- // this.exam.endTime = this.$route.query.endTime
- // this.exam.totalScore = this.$route.query.totalScore
- // this.exam.status = this.$route.query.examStatus
- // this.exam.remark = this.$route.query.remark
-
- this.validateExamTime()
- }
- },
- methods: {
- countDownS_cb: function () {
- messageSuccess(this, '考试开始')
- this.startTime = this.getCurrentTimes();
- },
- validateExamTime () {
- getCurrentTime().then(response => {
- const currentTime = moment(response.data.data)
- if (currentTime.isAfter(this.exam.endTime)) {
- messageWarn(this, '考试已结束')
- } else if (currentTime.isBefore(this.exam.startTime)) {
- messageWarn(this, '考试未开始')
- } else {
- this.startExam()
- const current = currentTime.valueOf()
- this.currentTime = current
- this.startTime = current
- this.subjectStartTime = current
- // this.endTime = moment(this.exam.endTime).valueOf()
- this.endTime = current+45*60*1000
- this.disableSubmit = false
- }
- }).catch(() => {
- messageFail(this, '开始考试失败！15')
- })
- },
- startExam () {
- // 获取题目ID列表
- getSubjectIds().then(subjectResponse => {
- const subjectData = subjectResponse.data.data
- if (subjectData.length > 0) {
- for (let i = 0; i < subjectData.length; i++) {
- this.subjectIds.push({
- subjectId: 1,
- everyID: subjectData[i].id,
- type: subjectData[i].choicesType,
- index: i + 1,
- answered: false,
- answer: '',
- score: subjectData[i].score,
- color: '#fff'
- })
- }
-
- this.query.type = parseInt(this.subjectIds[0].type)
-
- // 准考证号
- this.query.subjectId = this.subjectIds[0].everyID
-
- this.updateSubjectIndex()
- // 获取当前题目信息
- getSubjectResultInfo({
- id: this.subjectIds[0].everyID,
- }).then(response => {
- if (isNotEmpty(response.data.data)) {
- response.data.data.answer = ''
- this.setSubjectInfo(response.data.data)
- }
- }).catch(() => {
- messageFail(this, '获取题目失败！')
- })
- }
- }).catch(() => {
- messageFail(this, '开始考试失败！4646549888*8*')
- })
- },
- countDownE_cb: function () {
- messageWarn(this, '考试结束')
- this.disableSubmit = true
- },
- last () {
-
- for (let i = 0; i < this.subjectIds.length; i++) {
-
- if (this.subjectIds[i].everyID == this.query.subjectId) {
-
- this.subjectIds[i].answer = this.getAnswer()
-
- this.markAnswered(this.subjectIds[i].answer, i)
-
- if (i === 0) {
- messageSuccess(this, '已经是第一题了')
- break
- }
-
- let { everyID, type, index } = this.subjectIds[--i]
-
- this.subjectIndex = index
-
- this.saveCurrentSubjectAndGetNextSubjectLast(nextSubjectType.last, everyID, type)
-
- break
-
- }
-
- }
-
- },
- next () {
-
- for (let i = 0; i < this.subjectIds.length; i++) {
-
- if (this.subjectIds[i].everyID == this.query.subjectId) {
-
- this.subjectIds[i].answer = this.getAnswer()
-
- this.markAnswered(this.subjectIds[i].answer, i)
-
- if (i === this.subjectIds.length - 1) {
- messageSuccess(this, '已经是最后一题了')
- break
- }
-
- let { everyID, index } = this.subjectIds[++i]
-
- this.subjectIndex = index
-
- this.saveCurrentSubjectAndGetNextSubject(nextSubjectType.next, everyID,this.subjectIds[i-1])
-
- break
-
- }
-
- }
-
- },
- // 保存当前题目，同时根据序号加载下一题
- saveCurrentSubjectAndGetNextSubject (nextType, nextSubjectId,subjectIds) {
-
-
- this.startLoading(nextType)
-
- var data = {
- id:nextSubjectId,
- preSubJectId:this.query.subjectId,
- preResult:this.getAnswer()
- }
- getSubjectResultInfo(data).then(response => {
-
- if (response.data.data !== null) {
-
- // 保存成功后更新答题卡状态
- const subject = response.data.data
-
- //结果
- this.result = response.data.data.result;
-
- if(this.result==1){
- subjectIds.color = "#67C23A"
- }
- if(this.result==2){
- subjectIds.color = "red"
- }
-
- const { id, choicesType } = subject
-
- this.query.subjectId = id
-
- this.query.type = choicesType
-
- for (let i = 0; i < this.subjectIds.length; i++) {
-
- if (this.subjectIds[i].everyID == nextSubjectId) {
-
- subject.answer = this.subjectIds[i].answer
-
- break
-
- }
-
- }
-
-
-
- this.setSubjectInfo(subject)
-
- // store.dispatch('SetSubjectInfo', subject).then(() => { })
-
- }
- // 更新时间
- getCurrentTime().then(response => {
- this.subjectStartTime = moment(response.data.data)
- })
- this.endLoading(nextType)
- }).catch((error) => {
- console.log(error)
- messageFail(this, '获取题目失败')
- this.endLoading(nextType)
- })
- },
- // 保存当前题目，同时根据序号加载上一题
- saveCurrentSubjectAndGetNextSubjectLast (nextType, nextSubjectId) {
-
- this.startLoading(nextType)
-
- var data = {
- id:nextSubjectId
- }
- getSubjectResultInfo(data).then(response => {
-
- if (response.data.data !== null) {
-
- // 保存成功后更新答题卡状态
- const subject = response.data.data
-
- //结果
- this.result = response.data.data.result;
-
- // if(this.result==1){
- // subjectIds.color = "#67C23A"
- // }
- // if(this.result==2){
- // subjectIds.color = "red"
- // }
-
- const { id, choicesType } = subject
-
- this.query.subjectId = id
-
- this.query.type = choicesType
-
- for (let i = 0; i < this.subjectIds.length; i++) {
-
- if (this.subjectIds[i].everyID == nextSubjectId) {
-
- subject.answer = this.subjectIds[i].answer
-
- break
-
- }
-
- }
-
-
-
- this.setSubjectInfo(subject)
-
- // store.dispatch('SetSubjectInfo', subject).then(() => { })
-
- }
- // 更新时间
- getCurrentTime().then(response => {
- this.subjectStartTime = moment(response.data.data)
- })
- this.endLoading(nextType)
- }).catch((error) => {
- console.log(error)
- messageFail(this, '获取题目失败')
- this.endLoading(nextType)
- })
- },
- markAnswered (answer, index) {
- if (answer && answer !== null) {
- this.subjectIds[index].answered = true
- }
- },
- // 答题卡
- answerCard () {
- this.dialogVisible = true
- },
- // 跳转题目
- toSubject (everyID, type, index) {
-
- var ind = this.subjectIndex;
-
- if (this.firstFlag == false) {
- ind = this.subjectIndex;
- } else {
- ind = this.subjectIndex - 1;
- }
-
-
- this.subjectIds[ind].answer = this.getAnswer()
-
- this.markAnswered(this.subjectIds[ind].answer, ind)
-
- this.subjectIndex = index + 1
- this.firstFlag = true;
- // 保存当前题目，同时加载下一题
- this.saveCurrentSubjectAndGetNextSubject(nextSubjectType.next, everyID, type)
-
- this.dialogVisible = false
- },
- // 提交
- submitExam () {
-
- var ind = this.subjectIndex;
-
- if (this.firstFlag == false) {
- ind = this.subjectIndex;
- } else {
- ind = this.subjectIndex - 1;
- }
-
-
- this.subjectIds[ind].answer = this.getAnswer()
-
- this.markAnswered(this.subjectIds[ind].answer, ind)
-
- this.$confirm('确定要提交吗?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.disableSubmit = true
- this.doSubmitExam()
- }).catch(() => {
- })
- },
- doSubmitExam () {
- var obj = {
- examName: this.$route.query.examName,
- candidateNo: this.$route.query.candidateNo,
- securityName: this.userInfo.user_name,
- userId: this.userInfo.user_id,
- allScore: this.$route.query.totalScore,
- company: this.userInfo.dept_id,
- examTime: this.startTime,
- papersId: this.$route.query.id,
- examEndTime: this.getCurrentTimes(),
- examResultVOS: null
-
- }
- var arr = []
- this.subjectIds.forEach((item) => {
- if (item.type == 3) {
-
- var str = ''
-
- if (item.answer.length > 0) {
- item.answer.forEach(it => {
-
- if (it.value != '') {
- str += it.value + ','
- }
-
- })
-
- var a = str.substr(0, str.length - 1);
-
-
- arr.push(
- {
- "subjectChoicesId": item.everyID,
- "value": a,
- "grade": item.score
- }
-
- )
- }
- } else {
- arr.push(
- {
- "subjectChoicesId": item.everyID,
- "value": item.answer,
- "grade": item.score
- }
-
- )
- }
-
- })
-
- obj.examResultVOS = arr
-
- saveAndNext(obj).then(response => {
- messageSuccess(this, '提交成功')
- if (response) {
- this.$store.commit("DEL_TAG", this.$store.state.tags.tag);
- var obj = {
- userId:this.userInfo.user_id,
- examId:this.$route.query.id
- }
- this.$router.push({
- path: `/singleperformance/index`,
- query: obj
- });
- }
-
- }).catch(() => {
- this.disableSubmit = false
- messageFail(this, '提交题目失败')
- })
- },
- // 选中选项
- toggleOption (answer) {
- this.answer = answer
- },
- // 根据题目类型返回填写的答案
- getAnswer () {
- const ref = this.getSubjectRef()
- if (isNotEmpty(ref)) {
- const answer = ref.getAnswer()
- this.answer = answer
- return answer
- // {
- // id: answerId,
- // userId: this.userInfo.id,
- // examinationId: this.query.examinationId,
- // examRecordId: this.query.examRecordId,
- // subjectId: this.query.subjectId,
- // answer: answer,
- // type: this.query.type,
- // startTime: this.subjectStartTime
- // }
- }
- return {}
- },
- // 获取题目索引
- getSubjectIndex (targetId) {
- for (let subject of this.subjectIds) {
- let { subjectId, index } = subject
- if (subjectId === targetId) {
- return index
- }
- }
- return 1
- },
- // 更新题目索引
- updateSubjectIndex () {
- this.subjectIndex = this.getSubjectIndex(this.query.subjectId)
- },
- startLoading (nextType) {
- if (nextType === nextSubjectType.next) {
- this.loadingNext = true
- } else if (nextType === nextSubjectType.last) {
- this.loadingLast = true
- } else {
- this.loadingNext = true
- }
- },
- endLoading (nextType) {
- if (nextType === nextSubjectType.next) {
- this.loadingNext = false
- } else if (nextType === nextSubjectType.last) {
- this.loadingLast = false
- } else {
- this.loadingNext = false
- }
- },
- //获取当前时间
- getCurrentTimes() {
- let date = new Date();
- let dateYear = date.getFullYear(); //获取年
- let dateMonth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1); //获取月
- let dateDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); //获取当日
- let dateDay = date.getDay(); //获取当日星期数
- let dateHours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); //获取小时
- let dateMinutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); //获取分钟
- let dateSeconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); //获取秒
-
- return dateYear + '-' + dateMonth + '-' + dateDate + ' ' + dateHours + ':' + dateMinutes + ':' +
- dateSeconds
- },
-
- getSubjectRef () {
- let ref
-
- switch (this.query.type) {
- case 0:
- ref = this.$refs.choices
- break
- case 1:
- ref = this.$refs.multipleChoices
-
- break
- case 2:
- ref = this.$refs.judgement
- break
- case 3:
- ref = this.$refs.practicalOperation
- break
- case 4:
- ref = this.$refs.shortAnswer
- break
- }
- return ref
- },
- setSubjectInfo (subject) {
-
- const ref = this.getSubjectRef()
-
- if (isNotEmpty(ref)) {
- try {
- ref.setSubjectInfo(subject, this.subjectIds.length, this.subjectIndex)
- } catch (error) {
- console.error(error)
- }
- }
- }
+ this.validateExamTime();
}
-}
+ },
+ methods: {
+ countDownS_cb: function () {
+ messageSuccess(this, "考试开始");
+ this.startTime = this.getCurrentTimes();
+ },
+ validateExamTime() {
+ getCurrentTime()
+ .then((response) => {
+ const currentTime = moment(response.data.data);
+ if (currentTime.isAfter(this.exam.endTime)) {
+ messageWarn(this, "考试已结束");
+ } else if (currentTime.isBefore(this.exam.startTime)) {
+ messageWarn(this, "考试未开始");
+ } else {
+ this.startExam();
+ const current = currentTime.valueOf();
+ this.currentTime = current;
+ this.startTime = current;
+ this.subjectStartTime = current;
+ // this.endTime = moment(this.exam.endTime).valueOf()
+ this.endTime = current + 45 * 60 * 1000;
+ this.disableSubmit = false;
+ }
+ })
+ .catch(() => {
+ messageFail(this, "开始考试失败！15");
+ });
+ },
+ startExam() {
+ // 获取题目ID列表
+ getSubjectIds()
+ .then((subjectResponse) => {
+ const subjectData = subjectResponse.data.data;
+ if (subjectData.length > 0) {
+ for (let i = 0; i < subjectData.length; i++) {
+ this.subjectIds.push({
+ subjectId: 1,
+ everyID: subjectData[i].id,
+ type: subjectData[i].choicesType,
+ index: i + 1,
+ answered: false,
+ answer: "",
+ score: subjectData[i].score,
+ color: "#fff",
+ });
+ }
+
+ this.query.type = parseInt(this.subjectIds[0].type);
+
+ // 准考证号
+ this.query.subjectId = this.subjectIds[0].everyID;
+
+ this.updateSubjectIndex();
+ // 获取当前题目信息
+ getSubjectResultInfo({
+ id: this.subjectIds[0].everyID,
+ })
+ .then((response) => {
+ if (isNotEmpty(response.data.data)) {
+ response.data.data.answer = "";
+ this.setSubjectInfo(response.data.data);
+ }
+ })
+ .catch(() => {
+ messageFail(this, "获取题目失败！");
+ });
+ }
+ })
+ .catch(() => {
+ messageFail(this, "开始考试失败！4646549888*8*");
+ });
+ },
+ countDownE_cb: function () {
+ messageWarn(this, "考试结束");
+ this.disableSubmit = true;
+ },
+ last() {
+ for (let i = 0; i < this.subjectIds.length; i++) {
+ if (this.subjectIds[i].everyID == this.query.subjectId) {
+ this.subjectIds[i].answer = this.getAnswer();
+
+ this.markAnswered(this.subjectIds[i].answer, i);
+
+ if (i === 0) {
+ messageSuccess(this, "已经是第一题了");
+ break;
+ }
+
+ let { everyID, type, index } = this.subjectIds[--i];
+
+ this.subjectIndex = index;
+
+ this.saveCurrentSubjectAndGetNextSubjectLast(
+ nextSubjectType.last,
+ everyID,
+ type
+ );
+
+ break;
+ }
+ }
+ },
+ next() {
+ for (let i = 0; i < this.subjectIds.length; i++) {
+ if (this.subjectIds[i].everyID == this.query.subjectId) {
+ this.subjectIds[i].answer = this.getAnswer();
+
+ this.markAnswered(this.subjectIds[i].answer, i);
+
+ if (i === this.subjectIds.length - 1) {
+ messageSuccess(this, "已经是最后一题了");
+ break;
+ }
+
+ let { everyID, index } = this.subjectIds[++i];
+
+ this.subjectIndex = index;
+
+ this.saveCurrentSubjectAndGetNextSubject(
+ nextSubjectType.next,
+ everyID,
+ this.subjectIds[i - 1]
+ );
+
+ break;
+ }
+ }
+ },
+ // 保存当前题目，同时根据序号加载下一题
+ saveCurrentSubjectAndGetNextSubject(nextType, nextSubjectId, subjectIds) {
+ this.startLoading(nextType);
+
+ var data = {
+ id: nextSubjectId,
+ preSubJectId: this.query.subjectId,
+ preResult: this.getAnswer(),
+ };
+ getSubjectResultInfo(data)
+ .then((response) => {
+ if (response.data.data !== null) {
+ // 保存成功后更新答题卡状态
+ const subject = response.data.data;
+
+ //结果
+ this.result = response.data.data.result;
+
+ if (this.result == 1) {
+ subjectIds.color = "#67C23A";
+ }
+ if (this.result == 2) {
+ subjectIds.color = "red";
+ }
+
+ const { id, choicesType } = subject;
+
+ this.query.subjectId = id;
+
+ this.query.type = choicesType;
+
+ for (let i = 0; i < this.subjectIds.length; i++) {
+ if (this.subjectIds[i].everyID == nextSubjectId) {
+ subject.answer = this.subjectIds[i].answer;
+
+ break;
+ }
+ }
+
+ this.setSubjectInfo(subject);
+
+ // store.dispatch('SetSubjectInfo', subject).then(() => { })
+ }
+ // 更新时间
+ getCurrentTime().then((response) => {
+ this.subjectStartTime = moment(response.data.data);
+ });
+ this.endLoading(nextType);
+ })
+ .catch((error) => {
+ console.log(error);
+ messageFail(this, "获取题目失败");
+ this.endLoading(nextType);
+ });
+ },
+ // 保存当前题目，同时根据序号加载上一题
+ saveCurrentSubjectAndGetNextSubjectLast(nextType, nextSubjectId) {
+ this.startLoading(nextType);
+
+ var data = {
+ id: nextSubjectId,
+ };
+ getSubjectResultInfo(data)
+ .then((response) => {
+ if (response.data.data !== null) {
+ // 保存成功后更新答题卡状态
+ const subject = response.data.data;
+
+ //结果
+ this.result = response.data.data.result;
+
+ // if(this.result==1){
+ // subjectIds.color = "#67C23A"
+ // }
+ // if(this.result==2){
+ // subjectIds.color = "red"
+ // }
+
+ const { id, choicesType } = subject;
+
+ this.query.subjectId = id;
+
+ this.query.type = choicesType;
+
+ for (let i = 0; i < this.subjectIds.length; i++) {
+ if (this.subjectIds[i].everyID == nextSubjectId) {
+ subject.answer = this.subjectIds[i].answer;
+
+ break;
+ }
+ }
+
+ this.setSubjectInfo(subject);
+
+ // store.dispatch('SetSubjectInfo', subject).then(() => { })
+ }
+ // 更新时间
+ getCurrentTime().then((response) => {
+ this.subjectStartTime = moment(response.data.data);
+ });
+ this.endLoading(nextType);
+ })
+ .catch((error) => {
+ console.log(error);
+ messageFail(this, "获取题目失败");
+ this.endLoading(nextType);
+ });
+ },
+ markAnswered(answer, index) {
+ if (answer && answer !== null) {
+ this.subjectIds[index].answered = true;
+ }
+ },
+ // 答题卡
+ answerCard() {
+ this.dialogVisible = true;
+ },
+ // 跳转题目
+ toSubject(everyID, type, index) {
+ var ind = this.subjectIndex;
+
+ if (this.firstFlag == false) {
+ ind = this.subjectIndex;
+ } else {
+ ind = this.subjectIndex - 1;
+ }
+
+ this.subjectIds[ind].answer = this.getAnswer();
+
+ this.markAnswered(this.subjectIds[ind].answer, ind);
+
+ this.subjectIndex = index + 1;
+ this.firstFlag = true;
+ // 保存当前题目，同时加载下一题
+ this.saveCurrentSubjectAndGetNextSubject(
+ nextSubjectType.next,
+ everyID,
+ type
+ );
+
+ this.dialogVisible = false;
+ },
+ // 提交
+ submitExam() {
+ var ind = this.subjectIndex;
+
+ if (this.firstFlag == false) {
+ ind = this.subjectIndex;
+ } else {
+ ind = this.subjectIndex - 1;
+ }
+
+ this.subjectIds[ind].answer = this.getAnswer();
+
+ this.markAnswered(this.subjectIds[ind].answer, ind);
+
+ this.$confirm("确定要提交吗?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ this.disableSubmit = true;
+ this.doSubmitExam();
+ })
+ .catch(() => {});
+ },
+ doSubmitExam() {
+ var obj = {
+ examName: this.$route.query.examName,
+ candidateNo: this.$route.query.candidateNo,
+ securityName: this.userInfo.user_name,
+ userId: this.userInfo.user_id,
+ allScore: this.$route.query.totalScore,
+ company: this.userInfo.dept_id,
+ examTime: this.startTime,
+ papersId: this.$route.query.id,
+ examEndTime: this.getCurrentTimes(),
+ examResultVOS: null,
+ };
+ var arr = [];
+ this.subjectIds.forEach((item) => {
+ if (item.type == 3) {
+ var str = "";
+
+ if (item.answer.length > 0) {
+ item.answer.forEach((it) => {
+ if (it.value != "") {
+ str += it.value + ",";
+ }
+ });
+
+ var a = str.substr(0, str.length - 1);
+
+ arr.push({
+ subjectChoicesId: item.everyID,
+ value: a,
+ grade: item.score,
+ });
+ }
+ } else {
+ arr.push({
+ subjectChoicesId: item.everyID,
+ value: item.answer,
+ grade: item.score,
+ });
+ }
+ });
+
+ obj.examResultVOS = arr;
+
+ saveAndNext(obj)
+ .then((response) => {
+ messageSuccess(this, "提交成功");
+ if (response) {
+ this.$store.commit("DEL_TAG", this.$store.state.tags.tag);
+ var obj = {
+ userId: this.userInfo.user_id,
+ examId: this.$route.query.id,
+ };
+ this.$router.push({
+ path: `/singleperformance/index`,
+ query: obj,
+ });
+ }
+ })
+ .catch(() => {
+ this.disableSubmit = false;
+ messageFail(this, "提交题目失败");
+ });
+ },
+ // 选中选项
+ toggleOption(answer) {
+ this.answer = answer;
+ },
+ // 根据题目类型返回填写的答案
+ getAnswer() {
+ const ref = this.getSubjectRef();
+ if (isNotEmpty(ref)) {
+ const answer = ref.getAnswer();
+ this.answer = answer;
+ return answer;
+ // {
+ // id: answerId,
+ // userId: this.userInfo.id,
+ // examinationId: this.query.examinationId,
+ // examRecordId: this.query.examRecordId,
+ // subjectId: this.query.subjectId,
+ // answer: answer,
+ // type: this.query.type,
+ // startTime: this.subjectStartTime
+ // }
+ }
+ return {};
+ },
+ // 获取题目索引
+ getSubjectIndex(targetId) {
+ for (let subject of this.subjectIds) {
+ let { subjectId, index } = subject;
+ if (subjectId === targetId) {
+ return index;
+ }
+ }
+ return 1;
+ },
+ // 更新题目索引
+ updateSubjectIndex() {
+ this.subjectIndex = this.getSubjectIndex(this.query.subjectId);
+ },
+ startLoading(nextType) {
+ if (nextType === nextSubjectType.next) {
+ this.loadingNext = true;
+ } else if (nextType === nextSubjectType.last) {
+ this.loadingLast = true;
+ } else {
+ this.loadingNext = true;
+ }
+ },
+ endLoading(nextType) {
+ if (nextType === nextSubjectType.next) {
+ this.loadingNext = false;
+ } else if (nextType === nextSubjectType.last) {
+ this.loadingLast = false;
+ } else {
+ this.loadingNext = false;
+ }
+ },
+ //获取当前时间
+ getCurrentTimes() {
+ let date = new Date();
+ let dateYear = date.getFullYear(); //获取年
+ let dateMonth =
+ date.getMonth() + 1 < 10
+ ? "0" + (date.getMonth() + 1)
+ : date.getMonth() + 1; //获取月
+ let dateDate =
+ date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //获取当日
+ let dateDay = date.getDay(); //获取当日星期数
+ let dateHours =
+ date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //获取小时
+ let dateMinutes =
+ date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //获取分钟
+ let dateSeconds =
+ date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //获取秒
+
+ return (
+ dateYear +
+ "-" +
+ dateMonth +
+ "-" +
+ dateDate +
+ " " +
+ dateHours +
+ ":" +
+ dateMinutes +
+ ":" +
+ dateSeconds
+ );
+ },
+
+ getSubjectRef() {
+ let ref;
+
+ switch (this.query.type) {
+ case 0:
+ ref = this.$refs.choices;
+ break;
+ case 1:
+ ref = this.$refs.multipleChoices;
+
+ break;
+ case 2:
+ ref = this.$refs.judgement;
+ break;
+ case 3:
+ ref = this.$refs.practicalOperation;
+ break;
+ case 4:
+ ref = this.$refs.shortAnswer;
+ break;
+ }
+ return ref;
+ },
+ setSubjectInfo(subject) {
+ const ref = this.getSubjectRef();
+
+ if (isNotEmpty(ref)) {
+ try {
+ ref.setSubjectInfo(
+ subject,
+ this.subjectIds.length,
+ this.subjectIndex
+ );
+ } catch (error) {
+ console.error(error);
+ }
+ }
+ },
+ },
+};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.subject-box {
- margin-top: 50px;
- margin-left: 20px;
+ margin-top: 50px;
+ margin-left: 20px;
}
.subject-box-card {
- width: 80%;
- margin-bottom: 30px;
- min-height: 400px;
+ font-size: 28px;
+ width: 80%;
+ margin-bottom: 30px;
+ min-height: 400px;
}
.subject-buttons {
- text-align: right;
+ text-align: right;
+ position: fixed;
+ top: 70%;
+ right: 15%;
}
.tool-bar {
- margin-left: 20px;
+ margin-left: 20px;
}
.time-remain .time {
- display: inline-block;
- font-size: 18px;
- line-height: 22px;
- color: #ff0000;
- font-weight: 400;
+ display: inline-block;
+ font-size: 18px;
+ line-height: 22px;
+ color: #ff0000;
+ font-weight: 400;
}
/* 答题卡 */
.answer-card-title {
- font-size: 13px;
- color: #3a3e51;
- line-height: 17px;
- padding: 10px 0;
+ font-size: 24px;
+ color: #3a3e51;
+ line-height: 17px;
+ padding: 10px 0;
}
.answer-card-split {
- width: 100%;
- border-bottom: 1px solid #e6e6e6;
+ width: 100%;
+ border-bottom: 1px solid #e6e6e6;
}
.answer-card-content {
- padding-bottom: 10px;
- font-size: 0;
- margin-right: -15px;
- > button {
- margin-top: 5px;
- }
+ padding-bottom: 10px;
+ font-size: 0;
+ margin-right: -15px;
+ > button {
+ margin-top: 5px;
+ }
}
.answered {
- background-color: greenyellow;
+ background-color: greenyellow;
}
#avue-view > .morpheus-box {
- position: absolute;
- width: 70%;
- height: 75%;
- border-radius: 4px;
- top: 15%;
- left: 15%;
- right: 0px;
- bottom: 0px;
- padding: 10px !important;
+ position: absolute;
+ width: 100%;
+ height: 85%;
+ border-radius: 4px;
+ top: 10%;
+ padding: 10px !important;
+ box-sizing: border-box;
}
-
.exam-card-body {
- // border-top: 5px solid #ffa820 !important;
+ // border-top: 5px solid #ffa820 !important;
+}
+$sizeBut: 50px;
+.el-button.is-circle {
+ text-align: center;
+ width: $sizeBut !important;
+ height: $sizeBut !important;
+ border-radius: $sizeBut !important;
+ margin-left: 0 !important;
+ margin-right: 10px !important;
+ margin-top: 10px !important;
+ // display: flex;
+ // justify-content: center;
}
</style>
--
Gitblit v1.9.3