webfront / highschooltwo · 提交

转到一个项目

作者 lihongjuan
提交 cb349e8c945577a5000ced1c2681e2adf91b4d0b 1 个父辈 e2e2c60d

1

内嵌 并排对比
正在显示 36 个修改的文件 包含 6577 行增加 和 26 行删除
... ... @@ -6,7 +6,6 @@ const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
... ... @@ -26,8 +25,6 @@ module.exports = {
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
... ... @@ -39,7 +36,6 @@ module.exports = {
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
... ...
... ... @@ -475,6 +475,12 @@ input {
.form_position .el-input__inner {
padding-left: 45px;
}
.el-select{
width:100%;
}
.form_position el-select {
padding-left: 45px;
}
.el-form-item {
margin-bottom: 36px !important;
}
... ...
... ... @@ -23,11 +23,12 @@ let LoadingInstance,
// 环境设置
// 环境的切换
if (process.env.NODE_ENV == "development") {
axios.defaults.baseURL = "http://cp.zgcareer.com";
// axios.defaults.baseURL = "http://cp.zgcareer.com";
axios.defaults.baseURL = "http://test.zgcareer.com"
} else if (process.env.NODE_ENV == "debug") {
axios.defaults.baseURL = "http://cp.zgcareer.com";
axios.defaults.baseURL = "http://test.zgcareer.com"
} else if (process.env.NODE_ENV == "production") {
axios.defaults.baseURL = "http://cp.zgcareer.com";
axios.defaults.baseURL = "http://test.zgcareer.com"
}
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// axios.defaults.headers.common['token'] = localStorage.getItem("token");
... ... @@ -206,7 +207,8 @@ export function uploadFile(Url, data) {
return new Promise((resolve, reject) => {
let instance = axios.create({
// http://cp.zgcareer.com
baseURL: "http://cp.zgcareer.com",
// baseURL: "http://cp.zgcareer.com",
baseURL: "http://test.zgcareer.com",
headers: {
"Content-Type": "multipart/form-data"
}
... ...
... ... @@ -21,6 +21,44 @@
<img src="@/assets/img/6.png" alt />
</div>
</el-form-item>
<el-form-item class="form_position">
<el-select v-model="value" placeholder="请选择学校" @change="selectschool(value)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.nickname"
:value="item.username">
</el-option>
</el-select>
<!-- <el-input v-model="ruleForm.userName" placeholder="请输入手机/学号/邮箱" @change="focued"></el-input> -->
<div class="input_tip" v-show="isName">请选择学校</div>
<div class="img_box">
<img src="@/assets/img/6.png" alt />
</div>
</el-form-item>
<!-- <el-form class="ms-content">
<el-form-item class="form_position">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div class="img_box">
<img src="@/assets/img/6.png" alt />
</div>
</el-form-item>
</el-form>
-->
<el-form-item class="form_position">
<el-input
placeholder="请输入密码"
... ... @@ -52,6 +90,23 @@
<img src="@/assets/img/6.png" alt />
</div>
</el-form-item>
<el-form-item class="form_position">
<el-select v-model="value" placeholder="请选择学校" @change="selectschool(value)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.nickname"
:value="item.username">
</el-option>
</el-select>
<!-- <el-input v-model="ruleForm.userName" placeholder="请输入手机/学号/邮箱" @change="focued"></el-input> -->
<div class="input_tip" v-show="isName">请选择学校</div>
<div class="img_box">
<img src="@/assets/img/6.png" alt />
</div>
</el-form-item>
<el-form-item class="form_position">
<el-input
placeholder="请输入密码"
... ... @@ -84,6 +139,22 @@
</div>
</el-form-item>
<el-form-item class="form_position">
<el-select v-model="value" placeholder="请选择学校" @change="selectschool(value)">
<el-option
v-for="item in options"
:key="item.value"
:label="item.nickname"
:value="item.username">
</el-option>
</el-select>
<!-- <el-input v-model="ruleForm.userName" placeholder="请输入手机/学号/邮箱" @change="focued"></el-input> -->
<div class="input_tip" v-show="isName">请选择学校</div>
<div class="img_box">
<img src="@/assets/img/6.png" alt />
</div>
</el-form-item>
<el-form-item class="form_position">
<el-input
placeholder="请输入密码"
type="password"
... ... @@ -149,6 +220,7 @@ export default {
message: "账号不能为空",
trigger: "blur"
}
],
password: [
{
... ... @@ -159,21 +231,75 @@ export default {
]
},
schoolId: "",
pwdType: ""
pwdType: "",
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
school_count:'',
school_names:''
};
},
methods: {
handleClick(tab, event) {
// console.log(tab, event);
},
// 获取登录账号对应的学校
getschoolcode(){
let type = "";
if (this.activeName == "first") {
// 学生
type = 1;
} else if (this.activeName == "second") {
// 老师
type = 3;
} else if (this.activeName == "third") {
// 家长
type = 2;
}
let url = "/api/common/login_school";
let params = {
account: this.ruleForm.userName,
type:type
};
post(url, params).then(res => {
console.log(res,9999999)
this.school_count=res.school_count;
// if(res.school_count=1){
// this.value=res.school_names[0].username
// }
this.options=res.school_names
});
},
// 账号判断
focued: function() {
if (!this.ruleForm.userName) {
this.isName = true;
this.getschoolcode();
} else {
this.getschoolcode()
this.isName = false;
}
},
// 学校选择判断
selectschool(value){
console.log(8888,value)
},
// 密码
focued2: function() {
if (!this.ruleForm.password) {
... ... @@ -202,9 +328,11 @@ export default {
},
// 登录
submitForm(formName) {
// this.$router.replace({ path: "/Index",query:{active:0} });
localStorage.removeItem("token");
let that = this;
this.$refs[formName].validate(valid => {
console.log(valid)
if (valid) {
let account = that.ruleForm.userName;
let password = that.ruleForm.password;
... ... @@ -223,7 +351,7 @@ export default {
account: account,
password: password,
type: type,
schoolId: this.schoolId
schoolId: this.value
};
let url = "/api/common/login";
post(url, params).then(res => {
... ...
... ... @@ -9,15 +9,15 @@
<!-- 导航栏 -->
<div class="nav">
<ul class="nav_ul layout align_center justify" v-show="groupId == 1 || groupId == 2">
<li class="nav_ul_li" :class="{nav_border:num == 0}" @click="change(0)">首页</li>
<li class="nav_ul_li" :class="{nav_border:num == 1}" @click="change(1)">生涯测评</li>
<li
<li class="nav_ul_li" :class="{nav_border:num == 0}" @click="change(0)" v-if="oneshow">首页</li>
<li class="nav_ul_li" :class="{nav_border:num == 1}" @click="change(1)" v-if="twoshow">生涯测评</li>
<li v-if="threeshow"
class="nav_ul_li"
:class="{nav_border:num == 2}"
@click="change(2)"
v-show="groupNumber == 1||groupNumber == ''"
>选课建议</li>
<li
<li v-if="fourshow"
class="nav_ul_li"
:class="{nav_border:num == 3}"
@click="change(3)"
... ... @@ -36,6 +36,7 @@
</ol>
</li>
<li
v-if="fiveshow"
class="nav_ul_li"
:class="{nav_border:num == 4}"
@click="change(4)"
... ... @@ -55,10 +56,10 @@
</li>
</ul>
<ul class="nav_ul layout align_center justify" v-show="groupId == 3">
<li class="nav_ul_li" :class="{nav_border:num == 0}" @click="change(0)">首页</li>
<li class="nav_ul_li" :class="{nav_border:num == 1}" @click="change(1)">学生测评</li>
<li class="nav_ul_li" :class="{nav_border:num == 2}" @click="change(2)">学生列表</li>
<li
<li class="nav_ul_li" :class="{nav_border:num == 0}" @click="change(0)" v-if="oneshow">首页</li>
<li class="nav_ul_li" :class="{nav_border:num == 1}" @click="change(1)" v-if="twoshow">学生测评</li>
<li class="nav_ul_li" :class="{nav_border:num == 2}" @click="change(2)" v-if="threeshow">学生列表</li>
<li v-if="fourshow"
class="nav_ul_li"
:class="{nav_border:num == 3}"
@click="change(3)"
... ... @@ -76,7 +77,7 @@
>{{item}}</li>
</ol>
</li>
<li
<li v-if="fiveshow"
class="nav_ul_li"
:class="{nav_border:num == 4}"
@click="change(4)"
... ... @@ -135,11 +136,49 @@ export default {
groupId: "",
groupNumber: "",
isWisdom: -1,
isCareer: -1
isCareer: -1,
rule_ids:[],
oneshow:false,
twoshow:false,
threeshow:false,
fourshow:false,
fiveshow:false
};
},
methods: {
// 跳转 改变颜色
// 获取顶部菜单
getTopmenu(){
let that=this;
let url = "/api/common/nav_rules/";
post(url).then(res => {
console.log('顶部菜单',res)
that.rule_ids=res.rule_ids;
if(that.rule_ids.indexOf("1")!=-1){
this.oneshow=true;
}
if(that.rule_ids.indexOf("2")!=-1){
this.twoshow=true
}
if(that.rule_ids.indexOf("3")!=-1){
console.log(334)
this.threeshow=true
}
if(that.rule_ids.indexOf("4")!=-1){
this.fourshow=true
}
if(that.rule_ids.indexOf("5")!=-1){
this.fiveshow=true;
}
});
},
change: function(index) {
// localStorage.removeItem("wisdomIndex");
// localStorage.removeItem("careerIndex");
... ... @@ -248,6 +287,12 @@ export default {
this.num = this.active;
}
this.groupId = localStorage.getItem("groupId");
let token=localStorage.getItem("token");
if(token!=null){
this.getTopmenu()
}
},
created() {
this.groupNumber = localStorage.getItem("groupNumber");
... ...
<template>
<!-- 语文部分具体问题 -->
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>第一部分</h2>
<div>
剩余时间：
<p class="cn_title_time">{{ansTime | seconds}}</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
<!-- 具体问题 -->
<div
class="cn_det_quest clearfix"
v-for="item in questionList"
:key="item.index"
:id="item.id"
>
<div class="det_quest_box layout flex_diection align_center">
<!-- 问题 -->
<div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="det_box_answer">
<div
class="det_answer_choice layout flex_row align_center"
v-for="ansItems in item.answer"
:key="ansItems.index"
@click="choiced(ansItems,item.id)"
>
<div class="det_answer_circle">
<img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
</div>
<div>
<i class="order_num">{{ansItems.order}}</i>
{{ansItems.ans}}
</div>
</div>
</div>
</div>
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">{{btnValue}}</div>
<!-- 结束提示弹窗 -->
<OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
</div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
data() {
return {
btnValue: "停！等候指示，才可以翻页再作答",
typeId:'',
overVisible: false,
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 答题的时间
ansTime: 0,
// 数据
questionList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 10,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
// questionList: []
};
},
methods: {
// 选择答案
choiced: function(item, num) {
let that = this;
for (let i in this.questionList) {
for (let j in this.questionList[i].answer) {
if (item.evaId == this.questionList[i].answer[j].evaId) {
that.$set(that.questionList[i].answer[j], "choiced", false);
if (item.index == this.questionList[i].answer[j].index) {
that.$set(that.questionList[i].answer[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("cnAnswer", JSON.stringify(answer1));
},
// 测评题目
getTestPluralisticList() {
clearInterval(ansTimer);
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let url = "/api/primary_pluralistic/getTestPluralisticList/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId")
};
let that = this;
post(url, params).then(res => {
this.questionList = res.list;
// 答案
for (var obj of this.questionList) {
if (that.currentPage == 1) {
answer1[obj.id] = "";
}
let arr = [];
arr.push(
{
evaId: obj.id,
index: obj.id + "-1",
order: "A",
ans: obj.option_a,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-2",
order: "B",
ans: obj.option_b,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-3",
order: "C",
ans: obj.option_c,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-4",
order: "D",
ans: obj.option_d,
choiced: false
}
);
obj.answer = arr;
};
let answered = JSON.parse(localStorage.getItem("cnAnswer"));
if(answered){
answer1 = answered;
};
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.questionList) {
if (i == obj.id) {
for (let k in obj.answer) {
if (answered[i] == obj.answer[k].order) {
obj.answer[k].choiced = true;
}
}
}
}
};
// 总页数
this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
// 当前显示的数据
// this.questionList = this.questionList.slice(begin, end);
// 答题时间
this.ansTime = res.time;
ansTimer = setInterval(function() {
res.time--;
that.ansTime = res.time;
if (that.ansTime == 0) {
clearInterval(ansTimer);
ansTimer = null;
that.setTestPluralistic();
}
}, 1000);
});
},
nextPage() {
// 所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.questionList) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
if (answer1[i]) {
ansArr.push(i / 1);
}
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
clearInterval(ansTimer);
this.setTestPluralistic();
// if (this.currentPage == this.pageNum) {
// clearInterval(ansTimer);
// ansTimer = null;
// this.setTestPluralistic();
// return "";
// } else {
// this.currentPage++;
// this.getTestPluralisticList();
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交测评
setTestPluralistic() {
let url = "/api/primary_pluralistic/setTestPluralistic/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId"),
data: JSON.stringify(answer1)
};
post(url, params).then(res => {
localStorage.setItem('is_complete',res.is_complete)
// 题目类型
localStorage.setItem("typeId", 2);
this.btnValue = "停！等候指示，才可以翻页再作答";
this.overVisible = true;
this.typeId = 1;
});
}
},
components: {
OverDialog
},
mounted() {
this.getTestPluralisticList();
},
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>
... ...
<template>
<!-- 语文辞意推理 -->
<div class="cn_example clearfix">
<!-- 左侧 说明-->
<div class="cn_exam_l clearfix">
<div class="cn_left_box">
<!-- 词意推理 -->
<div class="cn_box_title">
<h1>
第一部分
<br>
语文辞意推理
</h1>
</div>
<!-- 测评说明 -->
<!-- 说明的内容 -->
<!-- <div class="cn_box_explain clearfix">
<h2>测评说明：</h2>
<div class="cn_exp_step" v-for="item in stepList" :key="item.index">
<h3>{{item.step}}</h3>
<p class="cn_step_exp">{{item.content}}</p>
<p class="cn_step_exp">{{item.content2}}</p>
</div>
</div> -->
<!-- 图片 -->
<div class="cn_box_p" style="margin-top:181px">
<img src="@/assets/img/13.png" alt>
</div>
</div>
</div>
<!-- 右侧 题目 -->
<div class="cn_exam_r">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepList: [
{
index: 1,
step: "Step1：",
content:
"每个分测验都有说明与例题，阅读完后请按下【开始作答】进行该分测验，时间随即开始倒数。"
},
{
index: 2,
step: "Step2：",
content: "作答时若遇到不会的题目，可先跳往下一题作答；",
content2: "开始作答进行该分测验，时间随即开始倒数。"
}
]
};
},
};
</script>
<style scoped>
@import '../../../../../style/example.css'
</style>
... ...
<template>
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>指导和例题</h2>
<div>
作答时限：
<p class="cn_title_time">15分钟</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp">每一题都有两个词组，请观察他们之间的关系后，选出符合这样关系的答案，使整个句子完整而有意义。
此大题作答时间为5分钟，请把握时间尽可能快速且正确的回答。</div>
<!-- 请看下列两个例题： -->
<div class="cn_exam_two">
<h2>请看下面例题：</h2>
</div>
<!-- 具体例题 -->
<div class="cn_exam_detail" v-for="item in detList" :key="item.index">
<!-- 上层 -->
<!-- <div class="cn_det_top">
<p class="cn_top_title">{{item.title}}</p>
</div> -->
<!-- 下层 -->
<div class="cn_det_bot clearfix" style="border:none">
<div class="cn_bot_box layout flex_diection justify">
<!-- 问题 -->
<div class="cn_box_question layout">{{item.question}}</div>
<!-- 答案 -->
<div class="cn_box_answer layout align_center justify flex_row">
<p v-for="(secondItem,index) in item.answer" :key="index">{{secondItem}}</p>
</div>
<!-- 说明 -->
<div class="cn_box_explain">{{item.explain}}</div>
</div>
</div>
</div>
<!-- 提示 -->
<div class="induc_warn cn_exam_wran clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<!-- <p class="induc_warn_content cn_wran_content">正式作答时若你觉得某些问题太难，可先做较简单的题目，有剩余时间再回头补作。</p> -->
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">阅读完毕开始答题</div>
</div>
</template>
<script>
import { post } from "../../../../../api/http";
export default {
data() {
return {
detList: [
{
index: 1,
title: "例题1. 请选取相同关系的答案，使句子完整而有意义。",
question: "_______之于右，好像西之于_______",
answer: [
"A 左 —— 北",
"B 左 —— 南",
"C 错误 —— 方向",
"D 左 —— 东"
],
explain:
"在例题1.中，最适合的答案是D，因为“左之于右，好像西之于东”。“左对右”等于“西对东”。请点选D，以示其为正确的作答方式。"
},
// {
// index: 2,
// title: "例题2. 请判断字词之间的关系，使等号两端的意义相同。",
// question: "木头 ：腐朽 = 铁块 ：_______",
// answer: ["A 潮湿", "B 生锈", "C 钢铁", "D 破碎"],
// explain:
// "在例题2中，最适合的答案是B，因为“木头用久了会腐朽”与“铁块用久了会生锈”的相对意义是相同的。答案请点选选项B。"
// }
]
};
},
methods: {
// 阅读完毕开始答题
nextPage() {
this.$router.push({ path: "/chinesetail" });
}
},
mounted() {}
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
</style>
... ...
<template>
<div>
<el-dialog
:visible="overVisible"
@update:visible="$emit('update:overVisible',false)"
width="636px"
:before-close="next"
:close-on-click-modal="false"
append-to-body
center
>
<div class="over_tip">
多元性向潜能测验
<i class="overed">已结束</i>
</div>
<div class="over_explain">
亲爱的同学，第{{number}}部分多元性向潜能暨{{textName}}试题
<i class="overed">已结束</i>，可以休息一会再继续完成其他的试题~
</div>
<div class="over_method layout justify_center">
<div class="bind_now" @click="next">我知道了</div>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: ["overVisible", "typeId"],
data(){
return{
textName:"",
number:""
}
},
methods: {
// 下一测评
next() {
this.$emit("update:overVisible", false);
if (this.typeId == 1) {
// 辞意完成
localStorage.removeItem("cnAnswer");
this.check();
} else if (this.typeId == 2) {
// 数学完成
localStorage.removeItem("mathAnswer");
this.check();
} else if (this.typeId == 3) {
// 逻辑完成
localStorage.removeItem("logicAnswer");
this.check();
} else if (this.typeId == 4) {
// 速度完成
localStorage.removeItem("speedAnswer");
this.check();
} else if (this.typeId == 5) {
// 力矩完成
localStorage.removeItem("momentAnswer");
this.check();
} else if (this.typeId == 6) {
// 空间完成
localStorage.removeItem("spaceAnswer");
this.check();
} else if (this.typeId == 7) {
// 字词完成
localStorage.removeItem("wordAnswer");
this.check();
} else if (this.typeId == 8) {
// 语法完成
localStorage.removeItem("grammerAnswer");
this.check();
} else if (this.typeId == 9) {
// 英语完成
localStorage.removeItem("engAnswer");
this.check();
}
},
check(){
this.$router.replace({path:'/BlankPage'});
if(localStorage.getItem('is_complete')==1){
this.$router.replace({path:'/SetEvalute'})
}
}
},
mounted(){
switch(this.typeId){
case 1:this.textName = "语文辞意推理";this.number = "一";break;
case 2:this.textName = "数字概念推理";this.number = "二";break;
case 3:this.textName = "抽象逻辑推理";this.number = "三";break;
case 4:this.textName = "知觉速度统合";this.number = "四";break;
case 5:this.textName = "机械力矩推理";this.number = "五";break;
case 6:this.textName = "立体空间推理";this.number = "六";break;
case 7:this.textName = "中文字词推论";this.number = "七";break;
case 8:this.textName = "中文语法结构";this.number = "八";break;
case 9:this.textName = "英文基本能力";this.number = "九";break;
}
}
};
</script>
<style scoped>
/* 提示 */
.over_tip {
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
line-height: 1;
color: #34485e;
opacity: 1;
margin-top: -9px;
padding-bottom: 36px;
border-bottom: 1px solid #f1f1f1;
}
.overed {
color: #f44a5e;
}
/* 解释说明 */
.over_explain {
font-size: 16px;
line-height: 32px;
color: #5b5e63;
opacity: 1;
text-align: left;
margin-top: 27px;
font-family: Microsoft YaHei;
}
/* 按钮 */
.over_method {
margin-top: 21px;
text-align: center;
}
.bind_now {
width: 180px;
height: 40px;
border: 1px solid #409eff;
line-height: 40px;
border-radius: 3px;
font-size: 14px;
text-align: center;
background-color: #409eff;
color: #fff;
margin-bottom: -7px;
}
</style>
\ No newline at end of file
... ...
<template>
<!-- 语文辞意推理 -->
<div class="cn_example clearfix">
<!-- 左侧 说明-->
<div class="cn_exam_l clearfix">
<div class="cn_left_box">
<!-- 词意推理 -->
<div class="cn_box_title">
<h1>
第一部分
<br>
语文辞意推理
</h1>
</div>
<!-- 测评说明 -->
<!-- 说明的内容 -->
<!-- <div class="cn_box_explain clearfix">
<h2>测评说明：</h2>
<div class="cn_exp_step" v-for="item in stepList" :key="item.index">
<h3>{{item.step}}</h3>
<p class="cn_step_exp">{{item.content}}</p>
<p class="cn_step_exp">{{item.content2}}</p>
</div>
</div> -->
<!-- 图片 -->
<div class="cn_box_p" style="margin-top:181px">
<img src="@/assets/img/13.png" alt>
</div>
</div>
</div>
<!-- 右侧 题目 -->
<div class="cn_exam_r">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepList: [
{
index: 1,
step: "Step1：",
content:
"每个分测验都有说明与例题，阅读完后请按下【开始作答】进行该分测验，时间随即开始倒数。"
},
{
index: 2,
step: "Step2：",
content: "作答时若遇到不会的题目，可先跳往下一题作答；",
content2: "开始作答进行该分测验，时间随即开始倒数。"
}
]
};
},
};
</script>
<style scoped>
@import '../../../../../style/example.css'
</style>
... ...
<template>
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>指导和例题</h2>
<div>
作答时限：
<p class="cn_title_time">15分钟</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp">每一题都有两个词组，请观察他们之间的关系后，选出符合这样关系的答案，使整个句子完整而有意义。
此大题作答时间为5分钟，请把握时间尽可能快速且正确的回答。</div>
<!-- 请看下列两个例题： -->
<div class="cn_exam_two">
<h2>请看下面例题：</h2>
</div>
<!-- 具体例题 -->
<div class="cn_exam_detail" v-for="item in detList" :key="item.index">
<!-- 上层 -->
<!-- <div class="cn_det_top">
<p class="cn_top_title">{{item.title}}</p>
</div> -->
<!-- 下层 -->
<div class="cn_det_bot clearfix" style="border:none">
<div class="cn_bot_box layout flex_diection justify">
<!-- 问题 -->
<div class="cn_box_question layout">{{item.question}}</div>
<!-- 答案 -->
<div class="cn_box_answer layout align_center justify flex_row">
<p v-for="(secondItem,index) in item.answer" :key="index">{{secondItem}}</p>
</div>
<!-- 说明 -->
<div class="cn_box_explain">{{item.explain}}</div>
</div>
</div>
</div>
<!-- 提示 -->
<div class="induc_warn cn_exam_wran clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<!-- <p class="induc_warn_content cn_wran_content">正式作答时若你觉得某些问题太难，可先做较简单的题目，有剩余时间再回头补作。</p> -->
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">阅读完毕开始答题</div>
</div>
</template>
<script>
import { post } from "../../../../../api/http";
export default {
data() {
return {
detList: [
{
index: 1,
title: "例题1. 请选取相同关系的答案，使句子完整而有意义。",
question: "_______之于右，好像西之于_______",
answer: [
"A 左 —— 北",
"B 左 —— 南",
"C 错误 —— 方向",
"D 左 —— 东"
],
explain:
"在例题1.中，最适合的答案是D，因为“左之于右，好像西之于东”。“左对右”等于“西对东”。请点选D，以示其为正确的作答方式。"
},
// {
// index: 2,
// title: "例题2. 请判断字词之间的关系，使等号两端的意义相同。",
// question: "木头 ：腐朽 = 铁块 ：_______",
// answer: ["A 潮湿", "B 生锈", "C 钢铁", "D 破碎"],
// explain:
// "在例题2中，最适合的答案是B，因为“木头用久了会腐朽”与“铁块用久了会生锈”的相对意义是相同的。答案请点选选项B。"
// }
]
};
},
methods: {
// 阅读完毕开始答题
nextPage() {
this.$router.push({ path: "/chinesetail" });
}
},
mounted() {}
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
</style>
... ...
<template>
<!-- 语文部分具体问题 -->
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>第一部分</h2>
<div>
剩余时间：
<p class="cn_title_time">{{ansTime | seconds}}</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
<!-- 具体问题 -->
<div
class="cn_det_quest clearfix"
v-for="item in questionList"
:key="item.index"
:id="item.id"
>
<div class="det_quest_box layout flex_diection align_center">
<!-- 问题 -->
<div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="det_box_answer">
<div
class="det_answer_choice layout flex_row align_center"
v-for="ansItems in item.answer"
:key="ansItems.index"
@click="choiced(ansItems,item.id)"
>
<div class="det_answer_circle">
<img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
</div>
<div>
<i class="order_num">{{ansItems.order}}</i>
{{ansItems.ans}}
</div>
</div>
</div>
</div>
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">{{btnValue}}</div>
<!-- 结束提示弹窗 -->
<OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
</div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
data() {
return {
btnValue: "停！等候指示，才可以翻页再作答",
typeId:'',
overVisible: false,
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 答题的时间
ansTime: 0,
// 数据
questionList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 10,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
// questionList: []
};
},
methods: {
// 选择答案
choiced: function(item, num) {
let that = this;
for (let i in this.questionList) {
for (let j in this.questionList[i].answer) {
if (item.evaId == this.questionList[i].answer[j].evaId) {
that.$set(that.questionList[i].answer[j], "choiced", false);
if (item.index == this.questionList[i].answer[j].index) {
that.$set(that.questionList[i].answer[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("cnAnswer", JSON.stringify(answer1));
},
// 测评题目
getTestPluralisticList() {
clearInterval(ansTimer);
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let url = "/api/primary_pluralistic/getTestPluralisticList/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId")
};
let that = this;
post(url, params).then(res => {
this.questionList = res.list;
// 答案
for (var obj of this.questionList) {
if (that.currentPage == 1) {
answer1[obj.id] = "";
}
let arr = [];
arr.push(
{
evaId: obj.id,
index: obj.id + "-1",
order: "A",
ans: obj.option_a,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-2",
order: "B",
ans: obj.option_b,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-3",
order: "C",
ans: obj.option_c,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-4",
order: "D",
ans: obj.option_d,
choiced: false
}
);
obj.answer = arr;
};
let answered = JSON.parse(localStorage.getItem("cnAnswer"));
if(answered){
answer1 = answered;
};
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.questionList) {
if (i == obj.id) {
for (let k in obj.answer) {
if (answered[i] == obj.answer[k].order) {
obj.answer[k].choiced = true;
}
}
}
}
};
// 总页数
this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
// 当前显示的数据
// this.questionList = this.questionList.slice(begin, end);
// 答题时间
this.ansTime = res.time;
ansTimer = setInterval(function() {
res.time--;
that.ansTime = res.time;
if (that.ansTime == 0) {
clearInterval(ansTimer);
ansTimer = null;
that.setTestPluralistic();
}
}, 1000);
});
},
nextPage() {
// 所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.questionList) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
if (answer1[i]) {
ansArr.push(i / 1);
}
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
clearInterval(ansTimer);
this.setTestPluralistic();
// if (this.currentPage == this.pageNum) {
// clearInterval(ansTimer);
// ansTimer = null;
// this.setTestPluralistic();
// return "";
// } else {
// this.currentPage++;
// this.getTestPluralisticList();
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交测评
setTestPluralistic() {
let url = "/api/primary_pluralistic/setTestPluralistic/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId"),
data: JSON.stringify(answer1)
};
post(url, params).then(res => {
localStorage.setItem('is_complete',res.is_complete)
// 题目类型
localStorage.setItem("typeId", 2);
this.btnValue = "停！等候指示，才可以翻页再作答";
this.overVisible = true;
this.typeId = 1;
});
}
},
components: {
OverDialog
},
mounted() {
this.getTestPluralisticList();
},
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>
... ...
<template>
<!-- 语文部分具体问题 -->
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>第一部分</h2>
<div>
剩余时间：
<p class="cn_title_time">{{ansTime | seconds}}</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
<!-- 具体问题 -->
<div
class="cn_det_quest clearfix"
v-for="item in questionList"
:key="item.index"
:id="item.id"
>
<div class="det_quest_box layout flex_diection align_center">
<!-- 问题 -->
<div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="det_box_answer">
<div
class="det_answer_choice layout flex_row align_center"
v-for="ansItems in item.answer"
:key="ansItems.index"
@click="choiced(ansItems,item.id)"
>
<div class="det_answer_circle">
<img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
</div>
<div>
<i class="order_num">{{ansItems.order}}</i>
{{ansItems.ans}}
</div>
</div>
</div>
</div>
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">{{btnValue}}</div>
<!-- 结束提示弹窗 -->
<OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
</div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
data() {
return {
btnValue: "停！等候指示，才可以翻页再作答",
typeId:'',
overVisible: false,
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 答题的时间
ansTime: 0,
// 数据
questionList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 10,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
// questionList: []
};
},
methods: {
// 选择答案
choiced: function(item, num) {
let that = this;
for (let i in this.questionList) {
for (let j in this.questionList[i].answer) {
if (item.evaId == this.questionList[i].answer[j].evaId) {
that.$set(that.questionList[i].answer[j], "choiced", false);
if (item.index == this.questionList[i].answer[j].index) {
that.$set(that.questionList[i].answer[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("cnAnswer", JSON.stringify(answer1));
},
// 测评题目
getTestPluralisticList() {
clearInterval(ansTimer);
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let url = "/api/primary_pluralistic/getTestPluralisticList/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId")
};
let that = this;
post(url, params).then(res => {
this.questionList = res.list;
// 答案
for (var obj of this.questionList) {
if (that.currentPage == 1) {
answer1[obj.id] = "";
}
let arr = [];
arr.push(
{
evaId: obj.id,
index: obj.id + "-1",
order: "A",
ans: obj.option_a,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-2",
order: "B",
ans: obj.option_b,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-3",
order: "C",
ans: obj.option_c,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-4",
order: "D",
ans: obj.option_d,
choiced: false
}
);
obj.answer = arr;
};
let answered = JSON.parse(localStorage.getItem("cnAnswer"));
if(answered){
answer1 = answered;
};
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.questionList) {
if (i == obj.id) {
for (let k in obj.answer) {
if (answered[i] == obj.answer[k].order) {
obj.answer[k].choiced = true;
}
}
}
}
};
// 总页数
this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
// 当前显示的数据
// this.questionList = this.questionList.slice(begin, end);
// 答题时间
this.ansTime = res.time;
ansTimer = setInterval(function() {
res.time--;
that.ansTime = res.time;
if (that.ansTime == 0) {
clearInterval(ansTimer);
ansTimer = null;
that.setTestPluralistic();
}
}, 1000);
});
},
nextPage() {
// 所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.questionList) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
if (answer1[i]) {
ansArr.push(i / 1);
}
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
clearInterval(ansTimer);
this.setTestPluralistic();
// if (this.currentPage == this.pageNum) {
// clearInterval(ansTimer);
// ansTimer = null;
// this.setTestPluralistic();
// return "";
// } else {
// this.currentPage++;
// this.getTestPluralisticList();
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交测评
setTestPluralistic(){
let url = "/api/primary_pluralistic/setTestPluralistic/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId"),
data: JSON.stringify(answer1)
};
post(url, params).then(res => {
localStorage.setItem('is_complete',res.is_complete)
// 题目类型
localStorage.setItem("typeId", 2);
this.btnValue = "停！等候指示，才可以翻页再作答";
this.overVisible = true;
this.typeId = 1;
});
}
},
components: {
OverDialog
},
mounted() {
this.getTestPluralisticList();
},
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>
... ...
<template>
<!-- 语文辞意推理 -->
<div class="cn_example clearfix">
<!-- 左侧 说明-->
<div class="cn_exam_l clearfix">
<div class="cn_left_box">
<!-- 词意推理 -->
<div class="cn_box_title">
<h1>
第一部分
<br>
语文辞意推理
</h1>
</div>
<!-- 测评说明 -->
<!-- 说明的内容 -->
<!-- <div class="cn_box_explain clearfix">
<h2>测评说明：</h2>
<div class="cn_exp_step" v-for="item in stepList" :key="item.index">
<h3>{{item.step}}</h3>
<p class="cn_step_exp">{{item.content}}</p>
<p class="cn_step_exp">{{item.content2}}</p>
</div>
</div> -->
<!-- 图片 -->
<div class="cn_box_p" style="margin-top:181px">
<img src="@/assets/img/13.png" alt>
</div>
</div>
</div>
<!-- 右侧 题目 -->
<div class="cn_exam_r">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepList: [
{
index: 1,
step: "Step1：",
content:
"每个分测验都有说明与例题，阅读完后请按下【开始作答】进行该分测验，时间随即开始倒数。"
},
{
index: 2,
step: "Step2：",
content: "作答时若遇到不会的题目，可先跳往下一题作答；",
content2: "开始作答进行该分测验，时间随即开始倒数。"
}
]
};
},
};
</script>
<style scoped>
@import '../../../../../style/example.css'
</style>
... ...
<template>
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>指导和例题</h2>
<div>
作答时限：
<p class="cn_title_time">15分钟</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp">每一题都有两个词组，请观察他们之间的关系后，选出符合这样关系的答案，使整个句子完整而有意义。
此大题作答时间为5分钟，请把握时间尽可能快速且正确的回答。</div>
<!-- 请看下列两个例题： -->
<div class="cn_exam_two">
<h2>请看下面例题：</h2>
</div>
<!-- 具体例题 -->
<div class="cn_exam_detail" v-for="item in detList" :key="item.index">
<!-- 上层 -->
<!-- <div class="cn_det_top">
<p class="cn_top_title">{{item.title}}</p>
</div> -->
<!-- 下层 -->
<div class="cn_det_bot clearfix" style="border:none">
<div class="cn_bot_box layout flex_diection justify">
<!-- 问题 -->
<div class="cn_box_question layout">{{item.question}}</div>
<!-- 答案 -->
<div class="cn_box_answer layout align_center justify flex_row">
<p v-for="(secondItem,index) in item.answer" :key="index">{{secondItem}}</p>
</div>
<!-- 说明 -->
<div class="cn_box_explain">{{item.explain}}</div>
</div>
</div>
</div>
<!-- 提示 -->
<div class="induc_warn cn_exam_wran clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<!-- <p class="induc_warn_content cn_wran_content">正式作答时若你觉得某些问题太难，可先做较简单的题目，有剩余时间再回头补作。</p> -->
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">阅读完毕开始答题</div>
</div>
</template>
<script>
import { post } from "../../../../../api/http";
export default {
data() {
return {
detList: [
{
index: 1,
title: "例题1. 请选取相同关系的答案，使句子完整而有意义。",
question: "_______之于右，好像西之于_______",
answer: [
"A 左 —— 北",
"B 左 —— 南",
"C 错误 —— 方向",
"D 左 —— 东"
],
explain:
"在例题1.中，最适合的答案是D，因为“左之于右，好像西之于东”。“左对右”等于“西对东”。请点选D，以示其为正确的作答方式。"
},
// {
// index: 2,
// title: "例题2. 请判断字词之间的关系，使等号两端的意义相同。",
// question: "木头 ：腐朽 = 铁块 ：_______",
// answer: ["A 潮湿", "B 生锈", "C 钢铁", "D 破碎"],
// explain:
// "在例题2中，最适合的答案是B，因为“木头用久了会腐朽”与“铁块用久了会生锈”的相对意义是相同的。答案请点选选项B。"
// }
]
};
},
methods: {
// 阅读完毕开始答题
nextPage() {
this.$router.push({ path: "/chinesetail" });
}
},
mounted() {}
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
</style>
... ...
<template>
<!-- 语文部分具体问题 -->
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>第一部分</h2>
<div>
剩余时间：
<p class="cn_title_time">{{ansTime | seconds}}</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
<!-- 具体问题 -->
<div
class="cn_det_quest clearfix"
v-for="item in questionList"
:key="item.index"
:id="item.id"
>
<div class="det_quest_box layout flex_diection align_center">
<!-- 问题 -->
<div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="det_box_answer">
<div
class="det_answer_choice layout flex_row align_center"
v-for="ansItems in item.answer"
:key="ansItems.index"
@click="choiced(ansItems,item.id)"
>
<div class="det_answer_circle">
<img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
</div>
<div>
<i class="order_num">{{ansItems.order}}</i>
{{ansItems.ans}}
</div>
</div>
</div>
</div>
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">{{btnValue}}</div>
<!-- 结束提示弹窗 -->
<OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
</div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
data() {
return {
btnValue: "停！等候指示，才可以翻页再作答",
typeId:'',
overVisible: false,
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 答题的时间
ansTime: 0,
// 数据
questionList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 10,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
// questionList: []
};
},
methods: {
// 选择答案
choiced: function(item, num) {
let that = this;
for (let i in this.questionList) {
for (let j in this.questionList[i].answer) {
if (item.evaId == this.questionList[i].answer[j].evaId) {
that.$set(that.questionList[i].answer[j], "choiced", false);
if (item.index == this.questionList[i].answer[j].index) {
that.$set(that.questionList[i].answer[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("cnAnswer", JSON.stringify(answer1));
},
// 测评题目
getTestPluralisticList() {
clearInterval(ansTimer);
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let url = "/api/primary_pluralistic/getTestPluralisticList/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId")
};
let that = this;
post(url, params).then(res => {
this.questionList = res.list;
// 答案
for (var obj of this.questionList) {
if (that.currentPage == 1) {
answer1[obj.id] = "";
}
let arr = [];
arr.push(
{
evaId: obj.id,
index: obj.id + "-1",
order: "A",
ans: obj.option_a,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-2",
order: "B",
ans: obj.option_b,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-3",
order: "C",
ans: obj.option_c,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-4",
order: "D",
ans: obj.option_d,
choiced: false
}
);
obj.answer = arr;
};
let answered = JSON.parse(localStorage.getItem("cnAnswer"));
if(answered){
answer1 = answered;
};
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.questionList) {
if (i == obj.id) {
for (let k in obj.answer) {
if (answered[i] == obj.answer[k].order) {
obj.answer[k].choiced = true;
}
}
}
}
};
// 总页数
this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
// 当前显示的数据
// this.questionList = this.questionList.slice(begin, end);
// 答题时间
this.ansTime = res.time;
ansTimer = setInterval(function() {
res.time--;
that.ansTime = res.time;
if (that.ansTime == 0) {
clearInterval(ansTimer);
ansTimer = null;
that.setTestPluralistic();
}
}, 1000);
});
},
nextPage() {
// 所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.questionList) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
if (answer1[i]) {
ansArr.push(i / 1);
}
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
clearInterval(ansTimer);
this.setTestPluralistic();
// if (this.currentPage == this.pageNum) {
// clearInterval(ansTimer);
// ansTimer = null;
// this.setTestPluralistic();
// return "";
// } else {
// this.currentPage++;
// this.getTestPluralisticList();
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交测评
setTestPluralistic() {
let url = "/api/primary_pluralistic/setTestPluralistic/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId"),
data: JSON.stringify(answer1)
};
post(url, params).then(res => {
localStorage.setItem('is_complete',res.is_complete)
// 题目类型
localStorage.setItem("typeId", 2);
this.btnValue = "停！等候指示，才可以翻页再作答";
this.overVisible = true;
this.typeId = 1;
});
}
},
components: {
OverDialog
},
mounted() {
this.getTestPluralisticList();
},
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>
... ...
<template>
<!-- 语文辞意推理 -->
<div class="cn_example clearfix">
<!-- 左侧 说明-->
<div class="cn_exam_l clearfix">
<div class="cn_left_box">
<!-- 词意推理 -->
<div class="cn_box_title">
<h1>
第一部分
<br>
语文辞意推理
</h1>
</div>
<!-- 测评说明 -->
<!-- 说明的内容 -->
<!-- <div class="cn_box_explain clearfix">
<h2>测评说明：</h2>
<div class="cn_exp_step" v-for="item in stepList" :key="item.index">
<h3>{{item.step}}</h3>
<p class="cn_step_exp">{{item.content}}</p>
<p class="cn_step_exp">{{item.content2}}</p>
</div>
</div> -->
<!-- 图片 -->
<div class="cn_box_p" style="margin-top:181px">
<img src="@/assets/img/13.png" alt>
</div>
</div>
</div>
<!-- 右侧 题目 -->
<div class="cn_exam_r">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepList: [
{
index: 1,
step: "Step1：",
content:
"每个分测验都有说明与例题，阅读完后请按下【开始作答】进行该分测验，时间随即开始倒数。"
},
{
index: 2,
step: "Step2：",
content: "作答时若遇到不会的题目，可先跳往下一题作答；",
content2: "开始作答进行该分测验，时间随即开始倒数。"
}
]
};
},
};
</script>
<style scoped>
@import '../../../../../style/example.css'
</style>
... ...
<template>
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>指导和例题</h2>
<div>
作答时限：
<p class="cn_title_time">15分钟</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp">每一题都有两个词组，请观察他们之间的关系后，选出符合这样关系的答案，使整个句子完整而有意义。
此大题作答时间为5分钟，请把握时间尽可能快速且正确的回答。</div>
<!-- 请看下列两个例题： -->
<div class="cn_exam_two">
<h2>请看下面例题：</h2>
</div>
<!-- 具体例题 -->
<div class="cn_exam_detail" v-for="item in detList" :key="item.index">
<!-- 上层 -->
<!-- <div class="cn_det_top">
<p class="cn_top_title">{{item.title}}</p>
</div> -->
<!-- 下层 -->
<div class="cn_det_bot clearfix" style="border:none">
<div class="cn_bot_box layout flex_diection justify">
<!-- 问题 -->
<div class="cn_box_question layout">{{item.question}}</div>
<!-- 答案 -->
<div class="cn_box_answer layout align_center justify flex_row">
<p v-for="(secondItem,index) in item.answer" :key="index">{{secondItem}}</p>
</div>
<!-- 说明 -->
<div class="cn_box_explain">{{item.explain}}</div>
</div>
</div>
</div>
<!-- 提示 -->
<div class="induc_warn cn_exam_wran clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<!-- <p class="induc_warn_content cn_wran_content">正式作答时若你觉得某些问题太难，可先做较简单的题目，有剩余时间再回头补作。</p> -->
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">阅读完毕开始答题</div>
</div>
</template>
<script>
import { post } from "../../../../../api/http";
export default {
data() {
return {
detList: [
{
index: 1,
title: "例题1. 请选取相同关系的答案，使句子完整而有意义。",
question: "_______之于右，好像西之于_______",
answer: [
"A 左 —— 北",
"B 左 —— 南",
"C 错误 —— 方向",
"D 左 —— 东"
],
explain:
"在例题1.中，最适合的答案是D，因为“左之于右，好像西之于东”。“左对右”等于“西对东”。请点选D，以示其为正确的作答方式。"
},
// {
// index: 2,
// title: "例题2. 请判断字词之间的关系，使等号两端的意义相同。",
// question: "木头 ：腐朽 = 铁块 ：_______",
// answer: ["A 潮湿", "B 生锈", "C 钢铁", "D 破碎"],
// explain:
// "在例题2中，最适合的答案是B，因为“木头用久了会腐朽”与“铁块用久了会生锈”的相对意义是相同的。答案请点选选项B。"
// }
]
};
},
methods: {
// 阅读完毕开始答题
nextPage() {
this.$router.push({ path: "/chinesetail" });
}
},
mounted() {}
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
</style>
... ...
<template>
<!-- 语文部分具体问题 -->
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>第一部分</h2>
<div>
剩余时间：
<p class="cn_title_time">{{ansTime | seconds}}</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
<!-- 具体问题 -->
<div
class="cn_det_quest clearfix"
v-for="item in questionList"
:key="item.index"
:id="item.id"
>
<div class="det_quest_box layout flex_diection align_center">
<!-- 问题 -->
<div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="det_box_answer">
<div
class="det_answer_choice layout flex_row align_center"
v-for="ansItems in item.answer"
:key="ansItems.index"
@click="choiced(ansItems,item.id)"
>
<div class="det_answer_circle">
<img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
</div>
<div>
<i class="order_num">{{ansItems.order}}</i>
{{ansItems.ans}}
</div>
</div>
</div>
</div>
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">{{btnValue}}</div>
<!-- 结束提示弹窗 -->
<OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
</div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
data() {
return {
btnValue: "停！等候指示，才可以翻页再作答",
typeId:'',
overVisible: false,
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 答题的时间
ansTime: 0,
// 数据
questionList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 10,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
// questionList: []
};
},
methods: {
// 选择答案
choiced: function(item, num) {
let that = this;
for (let i in this.questionList) {
for (let j in this.questionList[i].answer) {
if (item.evaId == this.questionList[i].answer[j].evaId) {
that.$set(that.questionList[i].answer[j], "choiced", false);
if (item.index == this.questionList[i].answer[j].index) {
that.$set(that.questionList[i].answer[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("cnAnswer", JSON.stringify(answer1));
},
// 测评题目
getTestPluralisticList() {
clearInterval(ansTimer);
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let url = "/api/primary_pluralistic/getTestPluralisticList/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId")
};
let that = this;
post(url, params).then(res => {
this.questionList = res.list;
// 答案
for (var obj of this.questionList) {
if (that.currentPage == 1) {
answer1[obj.id] = "";
}
let arr = [];
arr.push(
{
evaId: obj.id,
index: obj.id + "-1",
order: "A",
ans: obj.option_a,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-2",
order: "B",
ans: obj.option_b,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-3",
order: "C",
ans: obj.option_c,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-4",
order: "D",
ans: obj.option_d,
choiced: false
}
);
obj.answer = arr;
};
let answered = JSON.parse(localStorage.getItem("cnAnswer"));
if(answered){
answer1 = answered;
};
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.questionList) {
if (i == obj.id) {
for (let k in obj.answer) {
if (answered[i] == obj.answer[k].order) {
obj.answer[k].choiced = true;
}
}
}
}
};
// 总页数
this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
// 当前显示的数据
// this.questionList = this.questionList.slice(begin, end);
// 答题时间
this.ansTime = res.time;
ansTimer = setInterval(function() {
res.time--;
that.ansTime = res.time;
if (that.ansTime == 0) {
clearInterval(ansTimer);
ansTimer = null;
that.setTestPluralistic();
}
}, 1000);
});
},
nextPage() {
// 所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.questionList) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
if (answer1[i]) {
ansArr.push(i / 1);
}
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
clearInterval(ansTimer);
this.setTestPluralistic();
// if (this.currentPage == this.pageNum) {
// clearInterval(ansTimer);
// ansTimer = null;
// this.setTestPluralistic();
// return "";
// } else {
// this.currentPage++;
// this.getTestPluralisticList();
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交测评
setTestPluralistic() {
let url = "/api/primary_pluralistic/setTestPluralistic/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId"),
data: JSON.stringify(answer1)
};
post(url, params).then(res => {
localStorage.setItem('is_complete',res.is_complete)
// 题目类型
localStorage.setItem("typeId", 2);
this.btnValue = "停！等候指示，才可以翻页再作答";
this.overVisible = true;
this.typeId = 1;
});
}
},
components: {
OverDialog
},
mounted() {
this.getTestPluralisticList();
},
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>
... ...
<template>
<!-- 语文辞意推理 -->
<div class="cn_example clearfix">
<!-- 左侧 说明-->
<div class="cn_exam_l clearfix">
<div class="cn_left_box">
<!-- 词意推理 -->
<div class="cn_box_title">
<h1>
第一部分
<br>
语文辞意推理
</h1>
</div>
<!-- 测评说明 -->
<!-- 说明的内容 -->
<!-- <div class="cn_box_explain clearfix">
<h2>测评说明：</h2>
<div class="cn_exp_step" v-for="item in stepList" :key="item.index">
<h3>{{item.step}}</h3>
<p class="cn_step_exp">{{item.content}}</p>
<p class="cn_step_exp">{{item.content2}}</p>
</div>
</div> -->
<!-- 图片 -->
<div class="cn_box_p" style="margin-top:181px">
<img src="@/assets/img/13.png" alt>
</div>
</div>
</div>
<!-- 右侧 题目 -->
<div class="cn_exam_r">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepList: [
{
index: 1,
step: "Step1：",
content:
"每个分测验都有说明与例题，阅读完后请按下【开始作答】进行该分测验，时间随即开始倒数。"
},
{
index: 2,
step: "Step2：",
content: "作答时若遇到不会的题目，可先跳往下一题作答；",
content2: "开始作答进行该分测验，时间随即开始倒数。"
}
]
};
},
};
</script>
<style scoped>
@import '../../../../../style/example.css'
</style>
... ...
<template>
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>指导和例题</h2>
<div>
作答时限：
<p class="cn_title_time">15分钟</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp">每一题都有两个词组，请观察他们之间的关系后，选出符合这样关系的答案，使整个句子完整而有意义。
此大题作答时间为5分钟，请把握时间尽可能快速且正确的回答。</div>
<!-- 请看下列两个例题： -->
<div class="cn_exam_two">
<h2>请看下面例题：</h2>
</div>
<!-- 具体例题 -->
<div class="cn_exam_detail" v-for="item in detList" :key="item.index">
<!-- 上层 -->
<!-- <div class="cn_det_top">
<p class="cn_top_title">{{item.title}}</p>
</div> -->
<!-- 下层 -->
<div class="cn_det_bot clearfix" style="border:none">
<div class="cn_bot_box layout flex_diection justify">
<!-- 问题 -->
<div class="cn_box_question layout">{{item.question}}</div>
<!-- 答案 -->
<div class="cn_box_answer layout align_center justify flex_row">
<p v-for="(secondItem,index) in item.answer" :key="index">{{secondItem}}</p>
</div>
<!-- 说明 -->
<div class="cn_box_explain">{{item.explain}}</div>
</div>
</div>
</div>
<!-- 提示 -->
<div class="induc_warn cn_exam_wran clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<!-- <p class="induc_warn_content cn_wran_content">正式作答时若你觉得某些问题太难，可先做较简单的题目，有剩余时间再回头补作。</p> -->
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">阅读完毕开始答题</div>
</div>
</template>
<script>
import { post } from "../../../../../api/http";
export default {
data() {
return {
detList: [
{
index: 1,
title: "例题1. 请选取相同关系的答案，使句子完整而有意义。",
question: "_______之于右，好像西之于_______",
answer: [
"A 左 —— 北",
"B 左 —— 南",
"C 错误 —— 方向",
"D 左 —— 东"
],
explain:
"在例题1.中，最适合的答案是D，因为“左之于右，好像西之于东”。“左对右”等于“西对东”。请点选D，以示其为正确的作答方式。"
},
// {
// index: 2,
// title: "例题2. 请判断字词之间的关系，使等号两端的意义相同。",
// question: "木头 ：腐朽 = 铁块 ：_______",
// answer: ["A 潮湿", "B 生锈", "C 钢铁", "D 破碎"],
// explain:
// "在例题2中，最适合的答案是B，因为“木头用久了会腐朽”与“铁块用久了会生锈”的相对意义是相同的。答案请点选选项B。"
// }
]
};
},
methods: {
// 阅读完毕开始答题
nextPage() {
this.$router.push({ path: "/chinesetail" });
}
},
mounted() {}
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
</style>
... ...
<template>
<!-- 语文部分具体问题 -->
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>第一部分</h2>
<div>
剩余时间：
<p class="cn_title_time">{{ansTime | seconds}}</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp cn_det_exp">（时间截止自动提交本部分作答，截止前未记录任何答案，禁止提前离开本页面。）</div>
<!-- 具体问题 -->
<div
class="cn_det_quest clearfix"
v-for="item in questionList"
:key="item.index"
:id="item.id"
>
<div class="det_quest_box layout flex_diection align_center">
<!-- 问题 -->
<div class="det_box_question layout">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="det_box_answer">
<div
class="det_answer_choice layout flex_row align_center"
v-for="ansItems in item.answer"
:key="ansItems.index"
@click="choiced(ansItems,item.id)"
>
<div class="det_answer_circle">
<img :src="ansItems.choiced?src1:src2" alt class="det_ans_pic" />
</div>
<div>
<i class="order_num">{{ansItems.order}}</i>
{{ansItems.ans}}
</div>
</div>
</div>
</div>
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">{{btnValue}}</div>
<!-- 结束提示弹窗 -->
<OverDialog :overVisible.sync="overVisible" v-if="overVisible" :typeId="typeId"></OverDialog>
</div>
</template>
<script>
import OverDialog from "../OverDialog";
import { post } from "@/api/http";
import { Notification } from "element-ui";
let answer1 = {};
let ansTimer = null;
export default {
data() {
return {
btnValue: "停！等候指示，才可以翻页再作答",
typeId:'',
overVisible: false,
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 答题的时间
ansTime: 0,
// 数据
questionList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 10,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
// questionList: []
};
},
methods: {
// 选择答案
choiced: function(item, num) {
let that = this;
for (let i in this.questionList) {
for (let j in this.questionList[i].answer) {
if (item.evaId == this.questionList[i].answer[j].evaId) {
that.$set(that.questionList[i].answer[j], "choiced", false);
if (item.index == this.questionList[i].answer[j].index) {
that.$set(that.questionList[i].answer[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("cnAnswer", JSON.stringify(answer1));
},
// 测评题目
getTestPluralisticList() {
clearInterval(ansTimer);
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let url = "/api/primary_pluralistic/getTestPluralisticList/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId")
};
let that = this;
post(url, params).then(res => {
this.questionList = res.list;
// 答案
for (var obj of this.questionList) {
if (that.currentPage == 1) {
answer1[obj.id] = "";
}
let arr = [];
arr.push(
{
evaId: obj.id,
index: obj.id + "-1",
order: "A",
ans: obj.option_a,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-2",
order: "B",
ans: obj.option_b,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-3",
order: "C",
ans: obj.option_c,
choiced: false
},
{
evaId: obj.id,
index: obj.id + "-4",
order: "D",
ans: obj.option_d,
choiced: false
}
);
obj.answer = arr;
};
let answered = JSON.parse(localStorage.getItem("cnAnswer"));
if(answered){
answer1 = answered;
};
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.questionList) {
if (i == obj.id) {
for (let k in obj.answer) {
if (answered[i] == obj.answer[k].order) {
obj.answer[k].choiced = true;
}
}
}
}
};
// 总页数
this.pageNum = Math.ceil(this.questionList.length / this.pageSize);
// 当前显示的数据
// this.questionList = this.questionList.slice(begin, end);
// 答题时间
this.ansTime = res.time;
ansTimer = setInterval(function() {
res.time--;
that.ansTime = res.time;
if (that.ansTime == 0) {
clearInterval(ansTimer);
ansTimer = null;
that.setTestPluralistic();
}
}, 1000);
});
},
nextPage() {
// 所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.questionList) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
if (answer1[i]) {
ansArr.push(i / 1);
}
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
clearInterval(ansTimer);
this.setTestPluralistic();
// if (this.currentPage == this.pageNum) {
// clearInterval(ansTimer);
// ansTimer = null;
// this.setTestPluralistic();
// return "";
// } else {
// this.currentPage++;
// this.getTestPluralisticList();
// document.body.scrollTop = 0;
// document.documentElement.scrollTop = 0;
// }
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交测评
setTestPluralistic() {
let url = "/api/primary_pluralistic/setTestPluralistic/";
let params = {
id: localStorage.getItem("evaluteId"),
type: localStorage.getItem("typeId"),
data: JSON.stringify(answer1)
};
post(url, params).then(res => {
localStorage.setItem('is_complete',res.is_complete)
// 题目类型
localStorage.setItem("typeId", 2);
this.btnValue = "停！等候指示，才可以翻页再作答";
this.overVisible = true;
this.typeId = 1;
});
}
},
components: {
OverDialog
},
mounted() {
this.getTestPluralisticList();
},
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
@import "../../../../../style/detailExample.css";
</style>
... ...
<template>
<!-- 语文辞意推理 -->
<div class="cn_example clearfix">
<!-- 左侧 说明-->
<div class="cn_exam_l clearfix">
<div class="cn_left_box">
<!-- 词意推理 -->
<div class="cn_box_title">
<h1>
第一部分
<br>
语文辞意推理
</h1>
</div>
<!-- 测评说明 -->
<!-- 说明的内容 -->
<!-- <div class="cn_box_explain clearfix">
<h2>测评说明：</h2>
<div class="cn_exp_step" v-for="item in stepList" :key="item.index">
<h3>{{item.step}}</h3>
<p class="cn_step_exp">{{item.content}}</p>
<p class="cn_step_exp">{{item.content2}}</p>
</div>
</div> -->
<!-- 图片 -->
<div class="cn_box_p" style="margin-top:181px">
<img src="@/assets/img/13.png" alt>
</div>
</div>
</div>
<!-- 右侧 题目 -->
<div class="cn_exam_r">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
stepList: [
{
index: 1,
step: "Step1：",
content:
"每个分测验都有说明与例题，阅读完后请按下【开始作答】进行该分测验，时间随即开始倒数。"
},
{
index: 2,
step: "Step2：",
content: "作答时若遇到不会的题目，可先跳往下一题作答；",
content2: "开始作答进行该分测验，时间随即开始倒数。"
}
]
};
},
};
</script>
<style scoped>
@import '../../../../../style/example.css'
</style>
... ...
<template>
<div class="cn_right_box clearfix">
<!-- 标题及时间 -->
<div class="cn_exam_title layout align_center justify">
<h2>指导和例题</h2>
<div>
作答时限：
<p class="cn_title_time">15分钟</p>
</div>
</div>
<!-- 说明 -->
<div class="cn_exam_exp">每一题都有两个词组，请观察他们之间的关系后，选出符合这样关系的答案，使整个句子完整而有意义。
此大题作答时间为5分钟，请把握时间尽可能快速且正确的回答。</div>
<!-- 请看下列两个例题： -->
<div class="cn_exam_two">
<h2>请看下面例题：</h2>
</div>
<!-- 具体例题 -->
<div class="cn_exam_detail" v-for="item in detList" :key="item.index">
<!-- 上层 -->
<!-- <div class="cn_det_top">
<p class="cn_top_title">{{item.title}}</p>
</div> -->
<!-- 下层 -->
<div class="cn_det_bot clearfix" style="border:none">
<div class="cn_bot_box layout flex_diection justify">
<!-- 问题 -->
<div class="cn_box_question layout">{{item.question}}</div>
<!-- 答案 -->
<div class="cn_box_answer layout align_center justify flex_row">
<p v-for="(secondItem,index) in item.answer" :key="index">{{secondItem}}</p>
</div>
<!-- 说明 -->
<div class="cn_box_explain">{{item.explain}}</div>
</div>
</div>
</div>
<!-- 提示 -->
<div class="induc_warn cn_exam_wran clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<!-- <p class="induc_warn_content cn_wran_content">正式作答时若你觉得某些问题太难，可先做较简单的题目，有剩余时间再回头补作。</p> -->
</div>
<!-- 阅读完毕开始答题 -->
<div class="currency_btn" @click="nextPage">阅读完毕开始答题</div>
</div>
</template>
<script>
import { post } from "../../../../../api/http";
export default {
data() {
return {
detList: [
{
index: 1,
title: "例题1. 请选取相同关系的答案，使句子完整而有意义。",
question: "_______之于右，好像西之于_______",
answer: [
"A 左 —— 北",
"B 左 —— 南",
"C 错误 —— 方向",
"D 左 —— 东"
],
explain:
"在例题1.中，最适合的答案是D，因为“左之于右，好像西之于东”。“左对右”等于“西对东”。请点选D，以示其为正确的作答方式。"
},
// {
// index: 2,
// title: "例题2. 请判断字词之间的关系，使等号两端的意义相同。",
// question: "木头 ：腐朽 = 铁块 ：_______",
// answer: ["A 潮湿", "B 生锈", "C 钢铁", "D 破碎"],
// explain:
// "在例题2中，最适合的答案是B，因为“木头用久了会腐朽”与“铁块用久了会生锈”的相对意义是相同的。答案请点选选项B。"
// }
]
};
},
methods: {
// 阅读完毕开始答题
nextPage() {
this.$router.push({ path: "/chinesetail" });
}
},
mounted() {}
};
</script>
<style scoped>
@import "../../../../../style/exampleRight.css";
</style>
... ...
<template>
<div class="agreement_wrap">
<!-- 多元测评协议 -->
<div class="agreement_box clearfix">
<!-- 多元测评标题 -->
<div class="mul_title agree_title clearfix">
<h1>多元性潜能发展测评</h1>
</div>
<!-- 使用条款 -->
<div class="agree_article clearfix">
<h2>使用条款</h2>
<!-- 具体条款 -->
<div class="det_article">
<div class="single" v-for="item in articleList" :key="item.index">
<div>{{item.content}}</div>
<div class="single_det" v-for="(items,index) in item.name" :key="index">{{items}}</div>
</div>
</div>
</div>
<!-- 同意 -->
<div class="agree_tips layout justify_center align_center">
<div class="agree_img" @click="agreeClause()">
<img :src="isAgree?src2:src1" alt />
</div>
<div class="agree_con">我已阅读并同意以上使用条款</div>
</div>
<div class="inter_answer_btn" @click="nextPage">下一页</div>
</div>
</div>
</template>
<script>
import { Notification } from "element-ui";
export default {
data() {
return {
articleList: [
{
articleId: 0,
content:
"欢迎使用PAC中学生测评系统，在您正式成为我们的使用者之前，请详细阅读本服务使用条款的内容。 "
},
{
articleId: 1,
content:
"一、主体： 本服务使用条款由您和本公司所共同约定，主要是为了规范您使用PAC中学生测评系统（以下称「本系统」）以及使用各项服务（以下称「本服务」）的行为。"
},
{
articleId: 2,
content:
"二、前提： 除非您已详细阅读本服务使用条款的内容并且同意所有条款，否则请不要登入或是使用本服务。本公司于确认您的身分后，本服务使用条款即构成本公司与您之 间的契约。另外，本公司往后对这份服务使用条款可以随时更改任何条款的内容，如果您不同意本公司所公布的更新条款，请您停止使用本服务并且通知本公司；如果您在 本公司公布更新条款后继续使用本服务，就视为您同意遵守我们的更新条款内容。"
},
{
articleId: 3,
content: "三、定义：",
name: [
"1.本系统：本服务使用条款所称的本系统包括本公司所开发的校园发展评量、职场潜能评量、心理健康评量在线测评系统、所有的更新版本以及任何本公司以后所提供的辅 助或附加应用程序。 ",
"2.正式使用者：本服务使用条款所称的正式使用者是指所有同意本服务使用条款内容，并完成登入程序成为正式用户。 ",
"3.内容：本服务使用条款所称的内容包括本系统内的各种心理测评服务结果、信息、文字、照片、图片、音乐及其他相关项目(以下统称「内容」)。",
"4.服务：本服务使用条款所称的服务是指本公司透过因特网，向正式使用者所提供的在线测评管理/评量服务。",
"5.使用者账号：系指经由本公司提供之账号密码，登入指定网页以使用本服务。",
"6.服务期间：服务期间系指各正式使用者按其所选择使用服务的内容及付费方式，所得使用本服务之期间。"
]
},
{
articleId: 4,
content:
" 四、授权： 在您同意本服务使用条款所有内容的前提下，本公司授权您使用本服务，但您必须确实遵守本服务使用条款的规定，如有任何违反本服务使用条款的地方，本 公司得在察觉该违反情形后，不经通知即单方面停止您使用本服务的权利。",
name: [
"1.本服务所容许的使用方式：本公司授权您使用本服务进行本服务各项内容之在线测评，但您不得更改、再授权、出租、销售、或转让任何本服务使用条款所赋予您的权 利。您并同意遵守所有适用的地方、国家及国际法律、法规，即只为合法目的而使用本服务。 ",
"2.本服务所禁止的使用方式：本公司禁止任何正式使用者对本服务的原始程序编码进行任何修改、阻止或妨碍其他正式使用者享受本服务、藉本服务而散布病毒或其他足以 损害他人计算机运作之程序、违反任何本服务使用条款的软件或内容、及任何可能侵害他人知识产权或其它权益之内容。您不可以对本系统进行还原工程、反向编码、简化 为常人可理解形式或反向组译。",
"3.除执行本系统所必要的情形外，您不得复制或修改本公司所提供的技术或网页档。如任何其他第三人检举，并且经本公司证实您使用本系统的方式确实超出本服务使用 条款所许可的范围，本公司得随时不经通知即取消您的正式用户权力。",
" 4.本公司保留采取任何必要的手段来阻止您以本服务使用条款所禁止的方式使用本服务，包括但不限于以技术性障碍阻止您登入本服务或直接与您的网络服务提供商联络。"
]
},
{
articleId: 5,
content: "五、使用者的责任：",
name: [
"1.如果您是付费使用本服务管理者系统的正式用户，您同意按照本公司的规定而给付使用本服务之费用。如果您未依规定缴交费用，本公司有权立即冻结您的账号并暂时终 止您使用本服务的权利，直到您补缴费用为止。 ",
"2.您同意于使用本服务各项内容之在线测评时，提供正确的个人资料，并秉持诚意、不故意为相反或错误之作答。",
"3.您使用本服务的行为，除了表示您同意遵守本服务使用条款的内容外，也表示您同意在遵守中华人民共和国著作权法之各项条款的前提下，使用本系统内之各项内容。",
"4.您应妥善保管您的账号和密码，以免遭他人冒用或不当使用。您对以您的账号所进行的任何及全部行为负责，包括但不限于任何因使用您的账号所获得之内容及服务而应 给付予本公司的费用。",
"5.您不得以本服务所容许使用范围外的方式修改、复制、公开展示、公布或分发系统内容或者以其他方式把它们用于任何公开或商业目的。本公司禁止以任何目的把系统内 容用于其他Web网站或连网计算机环境。系统的内容受版权保护，任何未经授权的使用都可能构成侵犯版权、商标和其他法律。如果您违反本条款，您使用本服务的权利 将自动终止，同时您必须自行负责一切违法使用的法律责任。",
"6.您同意本公司保存所有测评之相关资料复本3年，作为学校测评结果分析、日后产品研发参考及与其他测评结果统计比较之用等非销售用途。 "
]
},
{
articleId: 6,
content: "六、隐私权： ",
name: [
"1.本公司尊重正式使用者之隐私权并将其数据保密，但基于诚信、在合理的必要情况下、为满足法律、司法单位的要求、为增进、改善本服务内容、为正常地操作系统、为 保护本公司或第三人，或者本服务使用条款另有容许时，本公司可以披露任何有关您或是您的账号资料、以及您使用本服务的相关记录。您使用本服务即代表您同意本公司 在上述情形下可以不经通知您本人即披露前述信息。",
"2.如果您是以学校/机关/团体/机构/单位之成员的身分接受施测，则视为您同意本公司可以将您的测评分析报告向您学校/机关/团体/机构/单位内部之相关辅导人员揭露，以 供该辅导人员在其辅导业务范围内使用。但您了解该辅导人员原本（依法令或依契约）即负有保守您的个人隐私的义务，若该辅导人员擅自泄露您的测评分析报告，或者超 出其辅导业务范围而使用您的测评分析报告，应由该辅导人员自负一切责任，与本公司无涉。"
]
},
{
articleId: 7,
content:
"七、知识产权： 本公司所提供的软件、文本文件及任何编码，不论是储存于磁盘、可读式储存媒体、任何其他媒体上，本公司仅准许您使用本系统，而并非将其所有权移转 给您。您只可以根据本服务使用条款的内容加以使用，一切本公司没有在本服务使用条款中明确授予您的权利，均由本公司保留。本公司及其授权人保留对本系统的所有权 及一切知识产权。您承认本公司技术受版权法及国际条约规定的保护，并同意不会变更、消除、隐匿其中所包含的任何版权或其它所有权或产品的标记。 "
},
{
articleId: 8,
content: "八、责任限制：",
name: [
"1.本公司对于透过本服务所提供的任何信息、产品或服务，均仅依各该服务当时之功能及现况提供使用，至于其速度、安全性、正确性、可靠性、完整性及不会断线和出错 等，本公司不负任何形式或内容之担保或保证责任。",
"2.本公司不对由任何正式使用者所提供的内容负责，而且对透过本服务所提供内容的准确性、实时性、完整性、可靠性或有用性，不承担任何责任亦不承诺任何担保或保障。",
"3.无论在任何情况下，本公司及其授权人都不应该对使用者的任何损失负损害赔偿的责任，包括因使用或无法使用本系统或服务而引起的损失或其它直接、间接、意外、特 别或附随性的损失(包括但不限于任何其它金钱上的损失)。"
]
},
{
articleId: 9,
content:
"九、损害赔偿条款： 本公司对于正式使用者因本公司及其他正式使用者的故意过失行为所造成的任何瑕疵与损害不负担保与赔偿之责。这些瑕疵与损害包括但不限于因系 统延误而失去的数据、系统当机时间、错误发送、网络或系统停用、档案错误或服务中断等情形。您并同意维护本公司与其母公司、子公司及相关公司，以及雇员、受许可 人之权益，而使其不承担任何损失、责任、赔偿要求、要求、损害赔偿以及律师费用。 "
},
{
articleId: 10,
content:
"十、服务使用条款的修改： 本服务使用条款构成您与本公司就使用本服务所同意的全部内容。本公司保留随时修改本服务使用条款的权利，而且修改后的服务使用条款一经 本公司的网站上公布即生效，本公司不另外个别通知各位正式使用者。如果您不能接受本公司对本服务使用条款所做的任何修改，您可以随时通知本公司终止您的正式使用 者资格。当本公司将修改后的服务使用条款内容于本公司网站上公布以后，您若继续使用本系统与服务的行为即视为您已接受此修改。"
}
],
src1: require("../../../assets/img/agree1.png"),
src2: require("../../../assets/img/agree.png"),
isAgree: true
};
},
methods: {
agreeClause() {
this.isAgree = !this.isAgree;
},
nextPage() {
if (this.isAgree) {
this.$router.push({ path: "/MulSchoolEvalution" });
} else {
Notification.info({
title: "提示",
message: "请选择用户协议",
duration: 1500
});
}
}
}
};
</script>
<style scoped>
/* 施测说明标题 */
@import "../../../style/mulTitle.css";
/* 下一页按钮 */
@import "../../../style/btn.css";
.agreement_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 36px 0 40px;
}
.agreement_box {
width: 1200px;
margin: 0 auto;
background: #fff;
}
/* 标题 */
.agree_title {
padding-top: 69px;
}
/* 使用条款 */
.agree_article {
width: 1108px;
margin: 0 auto;
background-color: #f1f1f1;
}
h2 {
color: #34485e;
font-size: 20px;
padding: 30px 0 0;
}
.det_article {
padding: 27px 23px 0;
font-size: 14px;
color: #8c9198;
}
/* 单个条款 */
.single {
margin-bottom: 30px;
text-align: left;
}
/* 同意 */
.agree_img {
margin-right: 8px;
width: 14px;
height: 14px;
line-height: 14px;
}
.agree_img img {
display: block;
}
.agree_tips {
color: #409eff;
margin-top: 54px;
}
/* 下一页 */
.inter_answer_btn {
margin-bottom: 53px;
}
</style>
... ...
... ... @@ -32,7 +32,8 @@
<div class="test_style clearfix">
<div class="test_style_l">
<div class="test_interest">
<p>{{item.test_category == 'interest'?"兴趣测评":"多元性向GS"}}</p>
<!-- <p>{{item.test_category == 'interest'?"兴趣测评":"多元性向GS"}}</p> -->
<p>{{item.type_category_text}}</p>
<p>{{item.title}}</p>
</div>
<div class="test_start_end">
... ... @@ -106,6 +107,19 @@ export default {
localStorage.setItem("evaluteId", item.id);
// 学生
if (this.groupId == 1) {
// if (item.test_category == "interest") {
// // 兴趣测评
// this.$router.push({ path: "/Inducte" });
// } else if (item.test_category == "pluralistic") {
// // 多元性向测评
// this.$router.push({ path: "/MulAgreement" });
// }else if(item.test_category=='school_suit'){
// // 校园生活适应测评
// this.$router.push({ path: "/SchoolLife" });
// }else if(item.test_category=='junior_interest'){
// // 初中兴趣测评
// this.$router.push({ path: "/JuniorIntrest" });
// }
if (item.button_status == 1) {
if (item.is_to_show_student == 1) {
// 查看报告
... ... @@ -115,7 +129,21 @@ export default {
path: "/AssessmentReport",
query: { testId: item.test_student_id }
});
} else if (item.test_category == "pluralistic") {
}else if(item.test_category == "junior_interest"){
// 初中兴趣测评
this.$router.push({
path: "/juniorintrestresult",
query: { testId: item.test_student_id }
});
}else if(item.test_category == "primary_pluralistic"){
// 小学多元测评
// this.$router.push({
// path: "/juniorintrestresult",
// query: { testId: item.test_student_id }
// });
}else if (item.test_category == "pluralistic") {
// 多元测评报告
this.$router.push({ path: "/MulReport" });
}
... ... @@ -133,7 +161,17 @@ export default {
} else if (item.test_category == "pluralistic") {
// 多元性向测评
this.$router.push({ path: "/MulAgreement" });
}else if(item.test_category=='school_suit'){
// 校园生活适应测评
this.$router.push({ path: "/SchoolLife" });
}else if(item.test_category=='junior_interest'){
// 初中兴趣测评
this.$router.push({ path: "/JuniorIntrest" });
}else if(item.test_category=='primary_pluralistic'){
// 小学多元测评
this.$router.push({ path: "/SchoolMulAgreement" });
}
}
} else if (this.groupId == 2) {
// 家长
... ...
<template>
<div class="induc_wrap">
<!-- 施测说明 -->
<div class="induc clearfix">
<div class="induc_box clearfix">
<!-- 施测说明标题 -->
<div class="induc_title clearfix">
<h1>施测说明</h1>
</div>
<!-- 提示 -->
<div class="induc_tips">面对未来，许多人会想选择有兴趣的专业或工作，
因为兴趣让人有热情、活力与成就感。这份测验能帮助你了解自己的兴趣，
进而探索适当的专业及工作。 测验中列举了一些活动和职业名称，
回答时只需要考虑「喜欢」或者「不喜欢」的程度，
不必在意是否有机会去做这件事。作答时，有的根据您从小到大的生活经验；
至于有些没有经历过的事，
就请你以直觉来回答。作答时间大约15分钟。</div>
<!-- 选项说明 -->
<div class="induc_option clearfix">
<!-- 左侧图片 -->
<div class="induc_option_l">
<img src="@/assets/img/11.png" alt />
</div>
<!-- 右侧说明 -->
<div class="induc_option_r clearfix">
<h3>选项说明：</h3>
<ul class="induc_ul">
<li v-for="(item,index) in inducList" :key="index">{{item}}</li>
</ul>
</div>
</div>
<!-- 评测按钮 -->
<div class="induc_btn currency_btn" @click="toInter">开始测评</div>
<!-- 提示 -->
<div class="induc_warn clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<p class="induc_warn_content">本测评无标准答案，与学业成绩无关，请按个人真实感受客观选择，不建议短时间内多次重复测评</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 1,
inducList: [
"非常喜欢：有强烈（特别喜欢）的感觉",
"喜欢：有（喜欢做）的快乐感觉，不会日久生厌",
"不喜欢：有（不想做）的厌烦感觉",
"非常不喜欢：有强烈（排斥）的感觉"
],
};
},
methods: {
// 生涯兴趣测评
toInter: function() {
localStorage.removeItem("interAnswer2");
this.$router.push({ path: "/JuniorIntrestTest"});
}
},
};
</script>
<style scoped>
.induc_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 36px 0 134px;
}
.induc {
width: 1200px;
/* height: 731px; */
background-color: #fff;
margin: 0 auto;
padding-bottom: 32px;
box-sizing: border-box;
}
.induc_box {
width: 713px;
margin: 0 auto;
padding-top: 95px;
text-align: center;
}
/* 施测说明标题 */
.induc_title h1 {
font-size: 36px;
color: #34485e;
position: relative;
width: 144px;
margin: 0 auto;
margin-bottom: 68px;
}
.induc_title h1:after {
content: "";
position: absolute;
bottom: -31px;
left: 29px;
width: 87px;
height: 1px;
background-color: #34485e;
}
/* 提示 */
.induc_tips {
font-size: 16px;
color: #409eff;
text-align: left;
line-height: 22px;
}
/* 选项说明 */
.induc_option {
margin: 41px 0 59px;
}
/* 左侧图片 */
.induc_option_l {
float: left;
width: 287px;
height: 246px;
margin-left: 22px;
}
.induc_option_l img {
width: 100%;
height: 100%;
}
/* 右侧说明 */
.induc_option_r {
float: right;
margin-top: 38px;
text-align: left;
}
.induc_option_r h3 {
font-size: 20px;
color: #409eff;
}
.induc_ul {
text-align: left;
font-size: 14px;
color: #8c9198;
line-height: 19px;
margin-top: 32px;
margin-left: 18px;
}
.induc_ul li {
list-style: disc;
margin-bottom: 10px;
}
/* 警告 */
.induc_warn_content {
color: #409eff;
font-size: 16px;
}
</style>
... ...
<template>
<!-- 兴趣检测报告 -->
<div class="assessment_report">
<div class="assessment_wrap">
<!-- 第一部分 -->
<div class="assessment_first layout align_center justify_center clearfix">
<div>
<img src="@/assets/img/note.png" alt />
</div>
<h1>
个人报告
<br />生涯兴趣测验
</h1>
</div>
<!-- 第二部分 -->
<div class="assessment_second clearfix">
<!-- 书签 -->
<div class="first_bg_l">
<img src="@/assets/img/bg.png" alt />
</div>
<div class="first_bg_r">
<img src="@/assets/img/bg.png" alt />
</div>
<!-- 上层 -->
<div class="assess_second_top layout justify clearfix">
<!-- 受试者资料 -->
<div class="assess_top_l layout flex_diection align_left clearfix">
<h2>受试者资料</h2>
<div class="assess_det_data layout justify align_center">
<!-- 头像 -->
<div class="assess_img">
<img :src="studentInfo.avatar" alt />
</div>
<!-- 资料 -->
<div class="assess_msg layout justify flex_diection align_left">
<h3>{{studentInfo.nickname}}</h3>
<!-- 个人信息 -->
<div class="personal_infor layout flex_row">
<div class="per_infor_single">
性别：
<i></i>
{{studentInfo.sex == 1?"男":"女"}}&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="per_infor_single">
年级：
<i></i>
{{studentInfo.group}}
</div>
<!-- <div class="per_infor_single per_infor_num">
学号：
<i></i>
{{userName}}
</div>-->
</div>
<div class="layout flex_row">
<div class="per_infor_single">
班级：
<i></i>
{{studentInfo.class}}
</div>
<div class="per_infor_single">
学校：
<i></i>
{{studentInfo.school_name}}
</div>
<!-- <div class="per_infor_single">
日期：
<i></i>
{{reportList.endtime_text}}
</div>-->
</div>
</div>
</div>
</div>
<!-- 这份报告你会看到 -->
<div class="assess_top_r layout flex_diection justify align_left clearfix">
<h2>这份报告你会看到</h2>
<div class="report_content layout flex_row">
<div
class="report_single layout justify_center align_center"
v-for="item in watchList"
:class="{report_center:item.watchId == 2,report_right:item.watchId == 3}"
:key="item.watchId"
@click="goAnchor(item.watchId)"
>
{{item.name}}
<br />
{{item.name1}}
</div>
</div>
</div>
</div>
<!-- 下层 -->
<div class="assess_second_bot">
<div v-for="(item,index) in contentList" :key="index" class="assess_bot_content">{{item}}</div>
</div>
<!-- 书签 -->
<div class="second_bg_l">
<img src="@/assets/img/bg.png" alt />
</div>
<div class="second_bg_r">
<img src="@/assets/img/bg.png" alt />
</div>
</div>
<!-- 第三部分 -->
<div class="assessment_third clearfix layout flex_diection align_left" id="first">
<!-- 六类型分数 -->
<div class="assess_third_score layout flex_diection align_left">
<h2>六类型分数</h2>
<table class="assess_type_score">
<tr class="tr_type">
<td v-for="(item,index) in titList" :key="index">{{item.name}}</td>
</tr>
<tr>
<td v-for="(item,index) in tdList" :key="index" class="tr_score">{{item}}</td>
</tr>
</table>
</div>
<!-- 测评反馈 -->
<div class="assess_third_induc layout flex_diection align_left">
<!-- 图表 -->
<div class="assess_third_echats layout">
<!-- 六角星图 -->
<div class="assess_echats_radar layout align_left flex_diection">
<h2>六角星图</h2>
<div id="myChart" :style="{width: '477px', height: '401px'}"></div>
</div>
<!-- 数线图 -->
<div class="assess_echats_line layout align_left flex_diection">
<h2>数线图</h2>
<div id="lineChart" :style="{width: '482px', height: '415px'}"></div>
</div>
</div>
<!-- 评价 -->
<div class="assess_third_eva">
<ul class="assess_third_ul layout flex_diection align_left">
<li>
生涯兴趣组型（Holland Code）：
<i class="assess_third_bold">{{coded}}</i>
</li>
<li>
我的生涯特质：
<i class="assess_third_bold">{{traits}}</i>
</li>
<li>
自我介绍三码：
<i class="assess_third_bold">{{introduceCode}}</i>
</li>
<li>
区分性：
<i class="assess_third_bold">{{strong}}</i>
</li>
</ul>
</div>
<!-- 选课意向 -->
<div class="assess_third_choice" id="second">
<ul class="assess_choice_ul">
<li class="assess_choice_li clearfix">
<p class="assess_ul_p">我有兴趣的选课倾向：</p>
<div v-for="(item,index) in currList1" :key="index" class="curr">{{item}}</div>
</li>
<li class="assess_choice_li clearfix">
<p class="assess_ul_p">我有兴趣的科系：</p>
<div class="assess_ul_div">
<div v-for="(item,index) in currList2" :key="index">
<i class="curr" v-for="(items,index) in item" :key="index">{{items}}</i>
</div>
</div>
</li>
<li class="assess_choice_li clearfix">
<p class="assess_ul_p">我有兴趣的职业：</p>
<div class="assess_ul_div">
<div v-for="(item,index) in currList3" :key="index" class="curr">
<i class="curr" v-for="(items,index) in item" :key="index">{{items}}</i>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 得分说明 -->
<div class="assess_third_score_induc" id="third">
<h2>得分说明</h2>
<div class="third_score_induc">
<div class="third_score_det" v-for="(item,index) in inducList" :key="index">{{item}}</div>
</div>
</div>
<!-- 书签 -->
<div class="third_bg_l">
<img src="@/assets/img/bg.png" alt />
</div>
<div class="third_bg_r">
<img src="@/assets/img/bg.png" alt />
</div>
</div>
<!-- 第四部分 -->
<div class="assessment_fourth clearfix layout align_left flex_diection">
<h2>六型介绍</h2>
<!-- 具体类型 -->
<div class="assess_four_type clearfix layout flex_row">
<div
class="assess_det_type"
v-for="item in typeList"
:key="item.typeId"
@click="showDialog(item)"
:class="{type_two:item.typeId == 2,type_three:item.typeId == 3,type_four:item.typeId == 4,type_five:item.typeId == 5,type_six:item.typeId == 6}"
>
<i>{{item.letter}}</i>
<br />
{{item.name}}
<!-- 类型介绍图片 -->
<div
class="type_pic"
v-show="item.typeId == isType"
:class="{type_pic1:item.typeId == 1||item.typeId == 2,type_pic3:item.typeId == 3,type_pic4:item.typeId == 4,type_pic5:item.typeId == 5||item.typeId == 6}"
>
<div class="type_close" @click.stop="closeTypePic(item)"></div>
<img :src="item.img" alt />
</div>
</div>
</div>
</div>
<div class="second_btn">
<a :href="assessReportUrl" target="_blank">下载报告</a>
</div>
</div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入雷达图组件
require("echarts/lib/chart/radar");
// 引入折线图组件
require("echarts/lib/chart/line");
// 引入提示框
require("echarts/lib/component/tooltip");
import { post } from "@/api/http";
export default {
data() {
return {
assessReportUrl: "",
isType: "",
title: "",
// 兴趣测评报告
reportList: [],
// 看到内容
watchList: [
{ watchId: 1, name: "生涯兴趣 ", name1: "测评介绍" },
{ watchId: 2, name: "适配的学系 ", name1: "与职业" },
{ watchId: 3, name: "得分及 ", name1: "说明" }
],
// 弹窗内容
dialogList: [
"兴趣类型：喜欢在讲求实际、技术规范下动手做明确的工作，对机械、仪器、工具、动能设备有兴趣。生活喜以以实用为主，眼前的事胜于对未来的想像。情绪稳定，不善与人有深入的接触。",
"职业活动：适合从事机械，电子、土木建筑、生物科技等工作。",
"性格特征：情绪安稳、内向不善表达，严谨按部就班，谦虚有礼。"
],
contentList: [
"生涯兴趣测验是每一个人在生涯选择时一项重要能力指标，生涯兴趣就是个人在职业、工作、嗜好与休閒上的表现，可以反映出每个人的自我概念、生活目标、甚至创造力等特质。这一份测验採用美国霍兰德教授(Dr. John Holland)的类型论为理论参考架构(Holland, 1994)，经过不断的修正，我们尽量使这一份题目能够符合目前的社会情况。",
"本测验可测量六种兴趣类型，包括实用（R）、研究（I） 、艺术（A） 、社会（S） 、企业（E）和事务（C）的倾向，得分越高，代表你在日常生活中比较喜欢从事该类型的相关活动,也会比较喜欢在同类型的环境下工作，工作表现也较佳。得分较低表示你在相关活动的兴趣不高，在这类环境工作容易出现不适应的情形。"
],
// 得分
tdList: [],
titList: [],
coded: "",
// 特质
traits: "",
// 自我介绍
introduceCode: "",
// 区分
strong: "",
// 选课意向
currList1: [],
// 科系
currList2: ["", "", "", ""],
// 职业
currList3: ["", "", "", ""],
inducList: [
"1. 得分最高的前三项兴趣类型就是你的生涯兴趣组型Holland Code",
"2. 六角形图是将六类生涯兴趣依照特定的排序而成，因此六个角分别代表一个兴趣类型，根据你的兴趣高低落在六个角内不同的位置，得分越高离中心点越远，得分越低越接近中心点,以不规则的六角形描绘出你的生涯兴趣型态。",
"3. 区分性是指你在六个得分得差距程度，当区分性越大的时候，表示你的兴趣组型越能突显，容易找到你的职业发展方向及历程。",
"4. 数线图是区分性的表示方法，本报告将六个兴趣类型分数由高到低排列，你可以看出六个类型相聚或远离的状态，以表示六个类型的区分程度。",
"5. 自我介绍三码通常是反映个人内心深处的渴望，如果和「生涯兴趣组型」一致或相近，表示你的兴趣类型清晰和稳定。如果不一致时，有可能你的兴趣倾向未来还会改变，也有可能你在选择自我介绍类型有特别的理由。"
],
// 六型介绍
typeList: [
{
typeId: 1,
letter: "R",
name: "实际型",
img: require("../../../assets/img/r.png")
},
{
typeId: 2,
letter: "I",
name: "研究型",
img: require("../../../assets/img/i.png")
},
{
typeId: 3,
letter: "A",
name: "艺术型",
img: require("../../../assets/img/a.png")
},
{
typeId: 4,
letter: "S",
name: "社会型",
img: require("../../../assets/img/s.png")
},
{
typeId: 5,
letter: "E",
name: "企业型",
img: require("../../../assets/img/e.png")
},
{
typeId: 6,
letter: "C",
name: "事务型",
img: require("../../../assets/img/c.png")
}
],
// 图表分数
lineScore: [],
// x轴
lineLike: [],
// y轴
yAxis: [],
// 测评结果Id
testId: "",
// 学生信息
studentInfo: ""
};
},
methods: {
handleClose: function() {
this.dialogVisible = false;
},
// 锚点跳转
goAnchor(id) {
if (id == 1) {
document.getElementById("first").scrollIntoView();
} else if (id == 2) {
document.getElementById("second").scrollIntoView();
} else if (id == 3) {
document.getElementById("third").scrollIntoView();
}
},
// 六型弹窗
showDialog(item) {
this.isType = item.typeId;
},
// 关闭弹窗
closeTypePic(item) {
this.isType = "";
},
// 获取测评结果
getcepingresult(){
let url = "/api/junior_interest/downloadTestJuniorInterestResult";
let params = {
id: this.testId,
};
post(url, params)
.then(res => {
this.assessReportUrl = res.pdf;
})
.catch(err => {
console.log(err,378347874378)
// answer1 = {};
// answer2 = {};
// localStorage.removeItem("interAnswer");
// localStorage.removeItem("interAnswer2");
});
},
// 兴趣测评报告
getTestInterestResult() {
let that = this;
let url = "/api/junior_interest/getTestJuniorInterestResult";
let params = {
id: this.testId,
student_id:''
};
post(url, params).then(res => {
this.reportList = res;
this.studentInfo = res.user;
// 组型
this.coded = res.result.threeCode;
// 特质
let arr = [];
for (let i in res.result.traits) {
arr.push(res.result.traits[i])
}
this.traits = arr[0];
// 自我介绍
this.introduceCode = res.result.introduceCode;
// 区分性
this.strong = res.result.strong;
// 选课意向
this.currList1 = res.result.majorData.arts_sciences.total;
// 科系
this.currList2 = res.result.majorData.major.total;
// 职业
this.currList3 = res.result.majorData.occupation.total;
// x轴
this.lineLike = res.xAxis;
// y轴
this.yAxis = res.yAxis;
// 分数
this.tdList = res.result.result;
for (var i in this.tdList) {
let obj = {};
if (i == "A") {
obj["name"] = "艺术型（A）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "E") {
obj["name"] = "企业型（E）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "R") {
obj["name"] = "实际型（R）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "I") {
obj["name"] = "研究型（I）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "S") {
obj["name"] = "社会型（S）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "C") {
obj["name"] = "事务型（C）";
obj["max"] = 120;
this.titList.push(obj);
}
this.lineScore.push(i);
}
this.drawLine();
});
},
drawLine() {
// 折线图横轴
let lineX = this.lineLike;
// 纵轴
let lineY = this.yAxis;
// 类型
let style = this.lineScore;
let indic = this.titList;
// 基于准备好的dom，初始化echarts实例
// 六角星
let myChart = echarts.init(document.getElementById("myChart"));
// 折线图
let lineChart = echarts.init(document.getElementById("lineChart"));
// 绘制六角星图表
myChart.setOption({
tooltip: {
confine: true,
enterable: true,
backgroundColor: "#fff",
textStyle: {
//提示框浮层的文本样式。
color: "#8C9198",
fontSize: 14
}
},
radar: {
name: {
color: "#8C9198",
fontSize: 14
},
splitNumber: 3, // 雷达图圈数设置
// 设置雷达图中间射线的颜色
axisLine: {
lineStyle: {
color: "#C8C8C8"
}
},
splitArea: {
areaStyle: {
color: "#fff"
}
},
legend: {
data: style
},
indicator: indic
},
series: [
{
type: "radar",
tooltip: {
trigger: "item",
// 提示框背景色
backgroundColor: "#fff",
// 文本
textStyle: {
color: "#8C9198",
rich: ""
},
// 位置
position: "top",
padding: [5, 13, 5, 13]
// 显示文字
// formatter: function(params) {
// console.log(params);
// }
},
// 填充区域颜色
areaStyle: {
color: "#E3F0FF"
},
symbolSize: 6,
lineStyle: {
color: "#409eff" //线的颜色
},
itemStyle: {
borderColor: "#409eff"
},
data: [
{
name: [],
value: lineY
}
]
}
]
});
// 绘制折线图
lineChart.setOption({
textStyle: {
color: "#fff"
},
xAxis: {
type: "category",
// x轴换行
data: lineX.map(function(str) {
return str.replace(" ", "\n");
}),
// data:lineX,
nameTextStyle: {
fontSize: 14,
fontWeight: "bold"
},
axisLine: {
show: false, // 坐标轴是否显示
lineStyle: {
color: "#fff"
}
},
axisTick: {
//刻度线
show: false //去掉刻度线
}
},
yAxis: {
type: "value",
nameTextStyle: {
fontSize: 10
},
axisLine: {
show: false,
lineStyle: {
color: "#fff"
}
},
axisTick: {
//刻度线
show: false //去掉刻度线
},
splitNumber: 9
},
tooltip: {
trigger: "item",
// 提示框背景色
backgroundColor: "#fff",
// 文本
textStyle: {
color: "#8C9198",
rich: ""
},
// 位置
position: "top",
// 显示文字
formatter: "{b0}" + "<br>" + "得分：{c0}",
padding: [5, 13, 5, 13]
},
legend: {
// data: ["实际型（R）", "事务型（C）", "企业型（E）", "社会型（S）", "艺术型（A）","研究型（I）"]
},
series: [
{
data: lineY,
type: "line",
symbol: "circle", //拐点图形
symbolSize: 6,
hoverAnimation: false,
itemStyle: {
borderColor: "#fff", //拐点的边框色
color: "#409eff" //拐点颜色
},
lineStyle: {
color: "#fff" //线的颜色
}
}
]
});
}
},
mounted() {
// 测评结果Id
this.testId = this.$route.query.testId;
// 兴趣测评报告
this.getTestInterestResult();
// 获取测评结果
// this.getcepingresult()
}
};
</script>
<style scoped>
@import "../../../style/report.css";
@import "../../../style/btn.css";
.type_pic {
position: absolute;
top: -390px;
z-index: 999;
}
.type_pic1 {
left: 59px;
}
.type_pic3 {
left: -235px;
}
.type_pic4 {
left: -427px;
}
.type_pic5 {
right: 67px;
}
.type_close {
width: 25px;
height: 25px;
float: right;
z-index: 1000;
position: relative;
right: 12px;
top: 37px;
background-color:rgba(255,255,255,0);
}
.second_btn {
margin-top: 49px;
}
.second_btn a {
color: #fff;
font-size: 14px;
}
</style>
... ...
<template>
<div class="inter_wrap">
<!-- 兴趣测评 -->
<div class="inter_test clearfix">
<!-- 左侧提示 -->
<div class="inter_test_l">
<div class="inter_l_box clearfix">
<div class="inter_box_t clearfix">
<h1>生涯兴趣测验(CIA)</h1>
</div>
<!-- 选项说明 -->
<div class="inter_box_b">
<h2>选项说明：</h2>
<ul>
<li v-for="item in list" :key="item.index" class="clearfix">
<p class="inter_b_title">{{item.title}}</p>
<p class="inter_b_content">{{item.content}}</p>
</li>
</ul>
</div>
<!-- 图片 -->
<div class="inter_box_pic">
<img src="@/assets/img/14.png" alt />
</div>
</div>
</div>
<!-- 右侧选项 -->
<div class="inter_test_r">
<div class="inter_r_box clearfix">
<!-- 答题组数 倒计时 -->
<div class="inter_r_num layout align_center justify">
<div class="inter_group_num">第{{currentPage}}组/共{{pageNum}}组</div>
<div class="inter_count_down">
已用时间：
<p class="count_down_time">{{useTime | seconds}}</p>
</div>
</div>
<!-- 题目 -->
<div class="inter_r_problem clearfix">
<!-- 所有的问题 -->
<div
class="inter_pro_box layout flex_diection"
v-for="item in dataShow"
:key="item.id"
v-show="isLast"
:id="item.id"
@change="goTop()"
>
<!-- 问题 -->
<div class="inter_pro_question layout justify">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="inter_pro_answer">
<ul class="layout align_center justify inter_answer_ul">
<li
class="inter_answer_li"
v-for="arrItem in item.arr"
:key="arrItem.index"
@click="choiced(arrItem,item.id)"
>
<div class="inter_answer_circle">
<img :src="arrItem.choiced?src1:src2" alt />
</div>
{{arrItem.name}}
</li>
</ul>
</div>
</div>
<!-- 最后一组问题 -->
<div class="inter_pro_last" v-show="!isLast">
<h3>下面哪一种「自我介绍」最能代表你自己？</h3>
<table class="inter_pro_table">
<tr v-for="item in introduceData" :key="item.id" class="inter_table_tr">
<td class="td_left">
<p class="td_l_p">{{item.id}}</p>
</td>
<td class="td_right">{{item.value}}</td>
</tr>
</table>
</div>
<div
class="inter_pro_box layout flex_diection"
v-for="item in introduceList"
:key="item.id"
v-show="!isLast"
>
<!-- 问题 -->
<div class="inter_pro_question layout justify">{{item.id}}.{{item.value}}</div>
<!-- 答案 -->
<div class="inter_pro_answer">
<ul class="layout align_center justify inter_answer_ul">
<li
class="inter_answer_li"
v-for="arrItem in item.arr"
:key="arrItem.num"
@click="choicedLast(arrItem,item.id)"
>
<div class="inter_answer_circle">
<img :src="arrItem.choiced?src1:src2" alt />
</div>
{{arrItem.num}}
</li>
</ul>
</div>
</div>
<!-- 下一页按钮 -->
<div class="inter_answer_btn" @click="nextPage">{{isLast?"下一页":"提交"}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { post } from "../../../api/http";
import { Notification } from "element-ui";
let answer1 = {};
let answer2 = {};
export default {
data() {
return {
// 已用时间
useTime: 0,
// 单选框的值
checkedValue: [],
list: [
{ index: 1, title: "非常喜欢：", content: "有强烈（特别喜欢）的感觉" },
{
index: 2,
title: "喜欢：",
content: "有（喜欢做）的快乐感觉，不会日久生厌"
},
{ index: 3, title: "不喜欢：", content: "有（不想做）的厌烦感觉" },
{ index: 4, title: "非常不喜欢：", content: "有强烈（排斥）的感觉" }
],
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 数据
interestList: [],
// 自我介绍
introduceData: [],
introduceList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 36,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
dataShow: [],
isLast: true,
flag: false,
count: 0,
userTimer: null
};
},
methods: {
// 选择答案
choiced: function(item, num) {
this.count++;
let that = this;
for (let i in that.dataShow) {
for (let j in that.dataShow[i].arr) {
if (item.interId == that.dataShow[i].arr[j].interId) {
that.$set(that.dataShow[i].arr[j], "choiced", false);
if (item.index == that.dataShow[i].arr[j].index) {
that.$set(that.dataShow[i].arr[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("interAnswer", JSON.stringify(answer1));
},
// 自我介绍选择答案
choicedLast: function(arrItem, index) {
for (let i in this.introduceList) {
for (let j in this.introduceList[i].arr) {
if (arrItem.interId == this.introduceList[i].arr[j].interId) {
this.$set(this.introduceList[i].arr[j], "choiced", false);
if (arrItem.index == this.introduceList[i].arr[j].index) {
this.$set(this.introduceList[i].arr[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer2[index] = arrItem.num;
localStorage.setItem("interAnswer2", JSON.stringify(answer2));
},
// 兴趣测评题目
getTestInterestList: function() {
let url = "/api/junior_interest/getTestJuniorInterestList";
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
console.log(begin);
console.log(end)
let that = this;
let params = {
id: localStorage.getItem("evaluteId")
};
clearInterval(that.userTimer);
post(url, params).then(res => {
console.log('测评题目',res)
// 计时器
that.userTimer = setInterval(function() {
that.useTime++;
}, 1000);
// 提交测评id
localStorage.setItem("testStatus", res.student_test_id);
// 自我介绍
this.introduceData = res.junior_interest.introduce;
// 自我介绍题目
this.introduceList = res.junior_interest.test;
for (var obj of this.introduceList) {
let arr = [];
arr.push(
{ interId: obj.id, index: obj.id + "-1", num: "1", choiced: false },
{ interId: obj.id, index: obj.id + "-2", num: "2", choiced: false },
{ interId: obj.id, index: obj.id + "-3", num: "3", choiced: false },
{ interId: obj.id, index: obj.id + "-4", num: "4", choiced: false },
{ interId: obj.id, index: obj.id + "-5", num: "5", choiced: false },
{ interId: obj.id, index: obj.id + "-6", num: "6", choiced: false }
);
obj.arr = arr;
}
// 兴趣试题
this.interestList = res.interest;
for (var obj of this.interestList) {
let answerArr = [];
answerArr.push(
{
interId: obj.id,
index: obj.id + "-1",
name: obj.option_a,
choiced: false,
order: "A"
},
{
interId: obj.id,
index: obj.id + "-2",
name: obj.option_b,
choiced: false,
order: "B"
},
{
interId: obj.id,
index: obj.id + "-3",
name: obj.option_c,
choiced: false,
order: "C"
},
{
interId: obj.id,
index: obj.id + "-4",
name: obj.option_d,
choiced: false,
order: "D"
}
);
obj.arr = answerArr;
}
console.log(this.interestList)
let answered = JSON.parse(localStorage.getItem("interAnswer"));
let answered2 = JSON.parse(localStorage.getItem("interAnswer2"));
if (answered) {
answer1 = answered;
}
if (answered2) {
answer2 = answered2;
}
// 前180答案
//缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.interestList) {
if (i == obj.id) {
for (let k in obj.arr) {
if (answered[i] == obj.arr[k].order) {
obj.arr[k].choiced = true;
}
}
}
}
}
//181-183答案
for (let i1 in answered) {
// 所有数据
for (let obj of this.introduceList) {
if (i1 == obj.id) {
for (let k1 in obj.arr) {
if (answered[i1] == obj.arr[k1].order) {
obj.arr[k1].choiced = true;
}
}
}
}
}
// 总页数
this.pageNum = Math.ceil(this.interestList.length / this.pageSize + 1);
this.dataShow = this.interestList.slice(begin, end);
});
},
// 下一页
nextPage: function() {
let that = this;
// 兴趣所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.dataShow) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
ansArr.push(i / 1);
}
console.log(ansArr)
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
console.log(allArr,'全部选择')
if (allArr.length > 3) {
//
if (this.currentPage < this.pageNum - 1) {
console.log(6666)
this.currentPage++;
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
// 当前显示的数据
this.dataShow = this.interestList.slice(begin, end);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
} else {
console.log(11111)
// this.currentPage++;
this.isLast = false;
// this.currentPage = 6;
// 自我介绍已选择问题
let inducArr = [];
console.log('答案',answer2)
for (let i in answer2) {
inducArr.push(i / 1);
}
console.log(this.pageNum,'当前页面')
console.log(this.currentPage,'页面页面')
console.log('页面里的题',inducArr)
if (this.currentPage == this.pageNum) {
if (inducArr.length == 3) {
clearInterval(that.userTimer);
this.setTestInterest();
return "";
} else {
Notification.info({
title: "提示",
message: "请选择自我介绍答案",
duration: 1500
});
}
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
this.currentPage = this.pageNum;
return false;
}else{
this.currentPage++
}
}
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 181-183提交
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交兴趣测评
setTestInterest() {
let url = "/api/junior_interest/setTestJuniorInterest";
let params = {
id: localStorage.getItem("testStatus"),
answer1: JSON.stringify(answer1),
answer2: JSON.stringify(answer2)
};
post(url, params)
.then(res => {
// answer1 = {};
// answer2 = {};
// localStorage.removeItem("interAnswer");
// localStorage.removeItem("interAnswer2");
Notification.info({
title: "提示",
message: "提交成功",
duration: 1500
});
this.$router.push({ path: "/SetEvalute" });
})
.catch(err => {
console.log(err,378347874378)
// answer1 = {};
// answer2 = {};
// localStorage.removeItem("interAnswer");
// localStorage.removeItem("interAnswer2");
});
}
},
mounted() {
answer2 = {};
localStorage.removeItem("interAnswer2");
this.getTestInterestList();
},
computed: {}
};
</script>
<style scoped>
@import "../../../style/btn.css";
.inter_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 36px 0 25px;
}
.inter_test {
width: 1200px;
margin: 0 auto;
background-color: #fff;
}
/* 左侧提示 */
.inter_test_l {
width: 430px;
float: left;
text-align: left;
}
.inter_l_box {
margin: 65px 0 0 70px;
}
/* 生涯兴趣测验(CIA) */
.inter_box_t h1 {
font-size: 24px;
color: #34485e;
position: relative;
margin-bottom: 60px;
}
h1:after {
position: absolute;
bottom: -30px;
left: 0;
content: "";
width: 54px;
height: 1px;
background-color: #34485e;
}
/* 选项说明 */
.inter_box_b {
margin-bottom: 45px;
}
.inter_box_b h2 {
margin-bottom: 14px;
font-size: 18px;
color: #34485e;
}
.inter_box_b p {
float: left;
font-size: 14px;
line-height: 28px;
}
.inter_b_title {
color: #409eff;
}
.inter_b_content {
color: #8c9198;
}
/* 图片 */
.inter_box_pic {
width: 281px;
height: 188px;
margin-left: 5px;
}
.inter_box_pic img {
width: 100%;
height: 100%;
}
/* 右侧选项 */
.inter_test_r {
width: 769px;
border-left: 1px solid #eee;
float: right;
}
.inter_r_box {
margin: 59px 120px 0 77px;
}
/* 答题组数 时间 */
.inter_r_num {
margin-bottom: 31px;
}
.inter_group_num {
font-size: 18px;
font-weight: bold;
color: #34485e;
}
/* 时间 */
.inter_count_down {
font-size: 14px;
color: #5b5e63;
}
.count_down_time {
float: right;
color: #409eff;
}
/* 题目 */
.inter_r_problem {
padding: 0 8px 0 4px;
width: 100%;
}
.inter_pro_box {
width: 100%;
margin-bottom: 20px;
font-size: 14px;
color: #8c9198;
}
/* 问题 */
.inter_pro_question {
margin-bottom: 9px;
}
/* 答案 */
.inter_answer_ul {
padding-left: 3px;
}
.inter_answer_li {
line-height: 19px;
}
/* 选择框 */
.inter_answer_circle {
width: 12px;
height: 12px;
vertical-align: middle;
margin: 3px 4px 0 0;
line-height: 12px;
float: left;
vertical-align: middle;
}
.inter_answer_circle img {
width: 100%;
height: 100%;
}
/* 最后一组问题 */
h3 {
font-size: 18px;
color: #34485e;
text-align: left;
margin-bottom: 20px;
}
/* 表格 */
.inter_pro_table {
width: 646px;
height: 570px;
margin-bottom: 40px;
}
.inter_table_tr:last-child .td_left {
border-bottom: 1px solid #409eff;
}
/* 表格左侧 */
.td_left {
width: 85px;
background-color: #409eff;
border-bottom: 1px solid #fff;
}
.td_l_p {
width: 29px;
height: 29px;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
opacity: 1;
color: #409eff;
line-height: 29px;
margin: 0 auto;
}
/* 表格右侧 */
.td_right {
border: 1px solid #eee;
border-left: none;
font-size: 14px;
color: #8c9198;
text-align: left;
line-height: 19px;
padding: 0 11px 0 18px;
}
</style>
... ...
<template>
<div class="induc_wrap">
<!-- 施测说明 -->
<div class="induc clearfix">
<div class="induc_box clearfix">
<!-- 施测说明标题 -->
<div class="induc_title clearfix">
<h1>施测说明</h1>
</div>
<!-- 提示 -->
<div class="induc_tips">亲爱的同学</div>
<div class="induc_tips">
我们现在要做「多元性向潜能发展测验」，主要目的是帮助各位了解自己的能力，诸如语文推理、数字推理等等，帮助你增进对自我的了解。这是一个测验你潜在能力的测验，这份测验不是考试，尽力做就可以，不会也不会关系。</div>
<div class="induc_tips">
本测验共有六个大题，每一大题都会有「说明与例题」以及「作答限制时间」，时间结束便不能再进行填答，所以请把握时间尽量迅速且正确的作答。如果您需要做任何计算，请利用桌上的纸张。</div>
<!-- 选项说明 -->
<div class="induc_option clearfix">
<!-- 左侧图片 -->
<div class="induc_option_l">
<img src="@/assets/img/11.png" alt />
</div>
<!-- 右侧说明 -->
<div class="induc_option_r clearfix" >
<h3>选项说明：</h3>
<ul class="induc_ul">
<li v-for="(item,index) in inducList" :key="index">{{item}}</li>
</ul>
<h3 style="margin-top:68px">测试规定</h3>
<ul class="induc_ul">
<li v-for="(item,index) in guidinglist" :key="index">{{item}}</li>
</ul>
</div>
</div>
<!-- 评测按钮 -->
<div class="induc_btn currency_btn" @click="toInter">开始测评</div>
<!-- 提示 -->
<div class="induc_warn clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<p class="induc_warn_content">本测评无标准答案，与学业成绩无关，请按个人真实感受客观选择，不建议短时间内多次重复测评</p>
</div>
</div>
</div>
</div>
</template>
<script>
import {post} from '@/api/http';
export default {
data() {
return {
active: 1,
inducList: [
"非常喜欢：有强烈（特别喜欢）的感觉",
"喜欢：有（喜欢做）的快乐感觉，不会日久生厌",
"不喜欢：有（不想做）的厌烦感觉",
"非常不喜欢：有强烈（排斥）的感觉"
],
guidinglist:[
"施测时间：约45分钟，详细流程如下表《施测流程》",
"施测地点：合适的作答环境，可正常书写、思考",
"施测材料：电脑及基本设施、白纸1-2张/每人（计算用）"
]
};
},
methods: {
// 生涯兴趣测评
toInter: function() {
let url = "/api/primary_pluralistic/addTestPluralistic/";
let params = {
id:localStorage.getItem('evaluteId')
}
post(url,params)
.then(res=>{
this.$router.push({path: "/MulSchoolExample"});
})
}
},
};
</script>
<style scoped>
.induc_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 36px 0 134px;
}
.induc {
width: 1200px;
/* height: 731px; */
background-color: #fff;
margin: 0 auto;
padding-bottom: 32px;
box-sizing: border-box;
}
.induc_box {
width: 777px;
margin: 0 auto;
padding-top: 95px;
text-align: center;
}
/* 施测说明标题 */
.induc_title h1 {
font-size: 36px;
color: #34485e;
position: relative;
width: 144px;
margin: 0 auto;
margin-bottom: 68px;
}
.induc_title h1:after {
content: "";
position: absolute;
bottom: -31px;
left: 29px;
width: 87px;
height: 1px;
background-color: #34485e;
}
/* 提示 */
.induc_tips {
font-size: 16px;
color: #409eff;
text-align: left;
line-height: 22px;
}
/* 选项说明 */
.induc_option {
margin: 41px 0 59px;
}
/* 左侧图片 */
.induc_option_l {
float: left;
width: 287px;
height: 246px;
margin-left: 22px;
}
.induc_option_l img {
width: 100%;
height: 100%;
}
/* 右侧说明 */
.induc_option_r {
float: right;
margin-top: 38px;
text-align: left;
}
.induc_option_r h3 {
font-size: 20px;
color: #409eff;
}
.induc_ul {
text-align: left;
font-size: 14px;
color: #8c9198;
line-height: 19px;
margin-top: 32px;
margin-left: 18px;
}
.induc_ul li {
list-style: disc;
margin-bottom: 10px;
}
/* 警告 */
.induc_warn_content {
color: #409eff;
font-size: 16px;
}
</style>
... ...
<template>
<div class="mul_ex_wrap">
<!-- 多元测评例题 -->
<div class="mul_ex_box clearfix">
<!-- 上部 分类 -->
<div class="mul_ex_classify clearfix">
<div
v-for="item in list"
:key="item.id"
class="mul_ex_subject layout align_center justify"
:class="{color_blue:isBlue == item.id,bg_color:item.complete}"
>
<div class="mul_sub_pic">
<img :src="item.complete?src2:isBlue == item.id?src1:src" alt />
</div>
<div class="mul_sub_name">{{item.name}}</div>
</div>
</div>
<!-- 下部 各种学科例题-->
<router-view></router-view>
</div>
</div>
</template>
<script>
import { post } from "../../../api/http";
export default {
data() {
return {
list: [],
isBlue: 1,
src: require("@/assets/img/wait.png"),
src1: require("@/assets/img/progress.png"),
src2: require("@/assets/img/complete.png")
};
},
methods: {
// 多元性向测评题目类型
getTestPluralisticType() {
let url = "/api/primary_pluralistic/getTestPluralisticType/";
let params = {
id: localStorage.getItem("evaluteId")
};
post(url, params).then(res => {
console.log('测评例题',res)
this.list = res;
for (let obj of res) {
if (obj.is_answer == 1) {
this.$set(obj, "complete", true);
}
}
let routerArr = [];
for (let obj of this.list) {
switch (obj.id) {
case 1:
localStorage.setItem("chineseStatus", obj.is_answer);
break;
case 2:
localStorage.setItem("wenfaStatus", obj.is_answer);
break;
case 3:
localStorage.setItem("chouxiangStatus", obj.is_answer);
break;
case 4:
localStorage.setItem("shuziStatus", obj.is_answer);
break;
case 5:
localStorage.setItem("tuwenStatus", obj.is_answer);
break;
case 6:
localStorage.setItem("studystyleStatus", obj.is_answer);
break;
}
console.log('3477377',obj)
if (obj.is_answer != 1) {
routerArr.push(obj.id);
}
}
switch (routerArr[0]) {
case 1:
this.$router.replace({ path: "/ChineseExample" });
// 题目类型
localStorage.setItem("typeId", 1);
// 答题状态
this.isBlue = 1;
break;
case 2:
this.$router.replace({ path: "/WenfaApplyexample" });
// 题目类型
localStorage.setItem("typeId", 2);
// 答题状态
this.isBlue = 2;
break;
case 3:
this.$router.replace({ path: "/LogicExample" });
// 题目类型
localStorage.setItem("typeId", 3);
// 答题状态
this.isBlue = 3;
break;
case 4:
this.$router.replace({ path: "/SpeedExample" });
// 题目类型
localStorage.setItem("typeId", 4);
// 答题状态
this.isBlue = 4;
break;
case 5:
this.$router.replace({ path: "/MomentExample" });
// 题目类型
localStorage.setItem("typeId", 5);
// 答题状态
this.isBlue = 5;
break;
case 6:
this.$router.replace({ path: "/SpaceExample" });
// 题目类型
localStorage.setItem("typeId", 6);
// 答题状态
this.isBlue = 6;
break;
case 7:
this.$router.replace({ path: "/WordExample" });
// 题目类型
localStorage.setItem("typeId", 7);
// 答题状态
this.isBlue = 7;
break;
case 8:
this.$router.replace({ path: "/GrammerExample" });
// 题目类型
localStorage.setItem("typeId", 8);
// 答题状态
this.isBlue = 8;
break;
case 9:
this.$router.replace({ path: "/EnglishExample" });
// 题目类型
localStorage.setItem("typeId", 9);
// 答题状态
this.isBlue = 9;
break;
case 10:
this.$router.replace({ path: "/StyleExample" });
// 题目类型
localStorage.setItem("typeId", 10);
// 答题状态
this.isBlue = 10;
break;
}
}).catch(err => {
console.log(err,347843787)
});;
}
},
mounted() {
},
created(){
console.log(3434439)
this.getTestPluralisticType();
// if (!localStorage.getItem("typeId")) {
// localStorage.setItem("typeId", 1);
// }
}
};
</script>
<style scoped>
.mul_ex_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 22px 0 27px;
}
.mul_ex_box {
width: 1200px;
margin: 0 auto;
}
/* 上部分类 */
.mul_ex_classify {
height: 177px;
width: 1200px;
background-color: #fff;
margin-bottom: 21px;
}
.mul_ex_all {
width: 1116px;
height: 177px;
margin: 0 auto;
}
/* 学科名称 */
.mul_ex_subject {
width: 181px;
height: 48px;
background: rgba(243, 243, 243, 1);
font-size: 18px;
color: #8c9198;
float: left;
margin-left: 47px;
margin-top: 26px;
border-radius: 3px;
border: 1px solid rgba(243, 243, 243, 1);
}
.color_blue {
color: #409eff;
border-color: #409eff;
background-color: #fff;
}
.bg_color {
background-color: #409eff;
color: #fff;
}
/* 图标 */
.mul_sub_pic {
margin-left: 21px;
}
/* 名字 */
.mul_sub_name {
margin-right: 11px;
width: 108px;
}
/* 下部 各种学科例题 */
</style>
... ...
<template>
<div class="induc_wrap">
<!-- 施测说明 -->
<div class="induc clearfix">
<div class="induc_box clearfix">
<!-- 施测说明标题 -->
<div class="induc_title clearfix">
<h1>施测说明</h1>
</div>
<!-- 提示 -->
<div class="induc_tips">本测验目的为在了解国中学生于校园环境经验中，生气感受强度；对校园情境的认知观点；以及生气时的因应方式。
</div>
<div class="induc_tips">
经由测验结果可帮助初中学生进行自我探索与了解，进而以个别或团体方式辅导，促使心理及性格健康发展。</div>
<!-- 选项说明 -->
<div class="induc_option clearfix">
<!-- 左侧图片 -->
<div class="induc_option_l">
<img src="@/assets/img/11.png" alt />
</div>
<!-- 右侧说明 -->
<div class="induc_option_r clearfix">
<h3>选项说明：</h3>
<ul class="induc_ul">
<li v-for="(item,index) in inducList" :key="index">{{item}}</li>
</ul>
</div>
</div>
<!-- 评测按钮 -->
<div class="induc_btn currency_btn" @click="toInter">开始测评</div>
<!-- 提示 -->
<div class="induc_warn clearfix layout justify_center align_center">
<div class="induc_pic">
<img src="@/assets/img/12.png" alt />
</div>
<p class="induc_warn_content">本测评无标准答案，与学业成绩无关，请按个人真实感受客观选择，不建议短时间内多次重复测评</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: 1,
inducList: [
"非常喜欢：有强烈（特别喜欢）的感觉",
"喜欢：有（喜欢做）的快乐感觉，不会日久生厌",
"不喜欢：有（不想做）的厌烦感觉",
"非常不喜欢：有强烈（排斥）的感觉"
],
};
},
methods: {
// 生涯兴趣测评
toInter: function() {
localStorage.removeItem("interAnswer2");
this.$router.push({ path: "/SchoolLifeTest"});
}
},
};
</script>
<style scoped>
.induc_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 36px 0 134px;
}
.induc {
width: 1200px;
/* height: 731px; */
background-color: #fff;
margin: 0 auto;
padding-bottom: 32px;
box-sizing: border-box;
}
.induc_box {
width: 713px;
margin: 0 auto;
padding-top: 95px;
text-align: center;
}
/* 施测说明标题 */
.induc_title h1 {
font-size: 36px;
color: #34485e;
position: relative;
width: 144px;
margin: 0 auto;
margin-bottom: 68px;
}
.induc_title h1:after {
content: "";
position: absolute;
bottom: -31px;
left: 29px;
width: 87px;
height: 1px;
background-color: #34485e;
}
/* 提示 */
.induc_tips {
font-size: 16px;
color: #409eff;
text-align: left;
line-height: 22px;
}
/* 选项说明 */
.induc_option {
margin: 41px 0 59px;
}
/* 左侧图片 */
.induc_option_l {
float: left;
width: 287px;
height: 246px;
margin-left: 22px;
}
.induc_option_l img {
width: 100%;
height: 100%;
}
/* 右侧说明 */
.induc_option_r {
float: right;
margin-top: 38px;
text-align: left;
}
.induc_option_r h3 {
font-size: 20px;
color: #409eff;
}
.induc_ul {
text-align: left;
font-size: 14px;
color: #8c9198;
line-height: 19px;
margin-top: 32px;
margin-left: 18px;
}
.induc_ul li {
list-style: disc;
margin-bottom: 10px;
}
/* 警告 */
.induc_warn_content {
color: #409eff;
font-size: 16px;
}
</style>
... ...
<template>
<!-- 兴趣检测报告 -->
<div class="assessment_report">
<div class="assessment_wrap">
<!-- 第一部分 -->
<div class="assessment_first layout align_center justify_center clearfix">
<div>
<img src="@/assets/img/note.png" alt />
</div>
<h1>
个人报告
<br />生涯兴趣测验
</h1>
</div>
<!-- 第二部分 -->
<div class="assessment_second clearfix">
<!-- 书签 -->
<div class="first_bg_l">
<img src="@/assets/img/bg.png" alt />
</div>
<div class="first_bg_r">
<img src="@/assets/img/bg.png" alt />
</div>
<!-- 上层 -->
<div class="assess_second_top layout justify clearfix">
<!-- 受试者资料 -->
<div class="assess_top_l layout flex_diection align_left clearfix">
<h2>受试者资料</h2>
<div class="assess_det_data layout justify align_center">
<!-- 头像 -->
<div class="assess_img">
<img :src="studentInfo.avatar" alt />
</div>
<!-- 资料 -->
<div class="assess_msg layout justify flex_diection align_left">
<h3>{{studentInfo.nickname}}</h3>
<!-- 个人信息 -->
<div class="personal_infor layout flex_row">
<div class="per_infor_single">
性别：
<i></i>
{{studentInfo.sex == 1?"男":"女"}}&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="per_infor_single">
年级：
<i></i>
{{studentInfo.group}}
</div>
<!-- <div class="per_infor_single per_infor_num">
学号：
<i></i>
{{userName}}
</div>-->
</div>
<div class="layout flex_row">
<div class="per_infor_single">
班级：
<i></i>
{{studentInfo.class}}
</div>
<div class="per_infor_single">
学校：
<i></i>
{{studentInfo.school_name}}
</div>
<!-- <div class="per_infor_single">
日期：
<i></i>
{{reportList.endtime_text}}
</div>-->
</div>
</div>
</div>
</div>
<!-- 这份报告你会看到 -->
<div class="assess_top_r layout flex_diection justify align_left clearfix">
<h2>这份报告你会看到</h2>
<div class="report_content layout flex_row">
<div
class="report_single layout justify_center align_center"
v-for="item in watchList"
:class="{report_center:item.watchId == 2,report_right:item.watchId == 3}"
:key="item.watchId"
@click="goAnchor(item.watchId)"
>
{{item.name}}
<br />
{{item.name1}}
</div>
</div>
</div>
</div>
<!-- 下层 -->
<div class="assess_second_bot">
<div v-for="(item,index) in contentList" :key="index" class="assess_bot_content">{{item}}</div>
</div>
<!-- 书签 -->
<div class="second_bg_l">
<img src="@/assets/img/bg.png" alt />
</div>
<div class="second_bg_r">
<img src="@/assets/img/bg.png" alt />
</div>
</div>
<!-- 第三部分 -->
<div class="assessment_third clearfix layout flex_diection align_left" id="first">
<!-- 六类型分数 -->
<div class="assess_third_score layout flex_diection align_left">
<h2>六类型分数</h2>
<table class="assess_type_score">
<tr class="tr_type">
<td v-for="(item,index) in titList" :key="index">{{item.name}}</td>
</tr>
<tr>
<td v-for="(item,index) in tdList" :key="index" class="tr_score">{{item}}</td>
</tr>
</table>
</div>
<!-- 测评反馈 -->
<div class="assess_third_induc layout flex_diection align_left">
<!-- 图表 -->
<div class="assess_third_echats layout">
<!-- 六角星图 -->
<div class="assess_echats_radar layout align_left flex_diection">
<h2>六角星图</h2>
<div id="myChart" :style="{width: '477px', height: '401px'}"></div>
</div>
<!-- 数线图 -->
<div class="assess_echats_line layout align_left flex_diection">
<h2>数线图</h2>
<div id="lineChart" :style="{width: '482px', height: '415px'}"></div>
</div>
</div>
<!-- 评价 -->
<div class="assess_third_eva">
<ul class="assess_third_ul layout flex_diection align_left">
<li>
生涯兴趣组型（Holland Code）：
<i class="assess_third_bold">{{coded}}</i>
</li>
<li>
我的生涯特质：
<i class="assess_third_bold">{{traits}}</i>
</li>
<li>
自我介绍三码：
<i class="assess_third_bold">{{introduceCode}}</i>
</li>
<li>
区分性：
<i class="assess_third_bold">{{strong}}</i>
</li>
</ul>
</div>
<!-- 选课意向 -->
<div class="assess_third_choice" id="second">
<ul class="assess_choice_ul">
<li class="assess_choice_li clearfix">
<p class="assess_ul_p">我有兴趣的选课倾向：</p>
<div v-for="(item,index) in currList1" :key="index" class="curr">{{item}}</div>
</li>
<li class="assess_choice_li clearfix">
<p class="assess_ul_p">我有兴趣的科系：</p>
<div class="assess_ul_div">
<div v-for="(item,index) in currList2" :key="index">
<i class="curr" v-for="(items,index) in item" :key="index">{{items}}</i>
</div>
</div>
</li>
<li class="assess_choice_li clearfix">
<p class="assess_ul_p">我有兴趣的职业：</p>
<div class="assess_ul_div">
<div v-for="(item,index) in currList3" :key="index" class="curr">
<i class="curr" v-for="(items,index) in item" :key="index">{{items}}</i>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 得分说明 -->
<div class="assess_third_score_induc" id="third">
<h2>得分说明</h2>
<div class="third_score_induc">
<div class="third_score_det" v-for="(item,index) in inducList" :key="index">{{item}}</div>
</div>
</div>
<!-- 书签 -->
<div class="third_bg_l">
<img src="@/assets/img/bg.png" alt />
</div>
<div class="third_bg_r">
<img src="@/assets/img/bg.png" alt />
</div>
</div>
<!-- 第四部分 -->
<div class="assessment_fourth clearfix layout align_left flex_diection">
<h2>六型介绍</h2>
<!-- 具体类型 -->
<div class="assess_four_type clearfix layout flex_row">
<div
class="assess_det_type"
v-for="item in typeList"
:key="item.typeId"
@click="showDialog(item)"
:class="{type_two:item.typeId == 2,type_three:item.typeId == 3,type_four:item.typeId == 4,type_five:item.typeId == 5,type_six:item.typeId == 6}"
>
<i>{{item.letter}}</i>
<br />
{{item.name}}
<!-- 类型介绍图片 -->
<div
class="type_pic"
v-show="item.typeId == isType"
:class="{type_pic1:item.typeId == 1||item.typeId == 2,type_pic3:item.typeId == 3,type_pic4:item.typeId == 4,type_pic5:item.typeId == 5||item.typeId == 6}"
>
<div class="type_close" @click.stop="closeTypePic(item)"></div>
<img :src="item.img" alt />
</div>
</div>
</div>
</div>
<div class="second_btn">
<a :href="assessReportUrl" target="_blank">下载报告</a>
</div>
</div>
</div>
</template>
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入雷达图组件
require("echarts/lib/chart/radar");
// 引入折线图组件
require("echarts/lib/chart/line");
// 引入提示框
require("echarts/lib/component/tooltip");
import { post } from "@/api/http";
export default {
data() {
return {
assessReportUrl: "",
isType: "",
title: "",
// 兴趣测评报告
reportList: [],
// 看到内容
watchList: [
{ watchId: 1, name: "生涯兴趣 ", name1: "测评介绍" },
{ watchId: 2, name: "适配的学系 ", name1: "与职业" },
{ watchId: 3, name: "得分及 ", name1: "说明" }
],
// 弹窗内容
dialogList: [
"兴趣类型：喜欢在讲求实际、技术规范下动手做明确的工作，对机械、仪器、工具、动能设备有兴趣。生活喜以以实用为主，眼前的事胜于对未来的想像。情绪稳定，不善与人有深入的接触。",
"职业活动：适合从事机械，电子、土木建筑、生物科技等工作。",
"性格特征：情绪安稳、内向不善表达，严谨按部就班，谦虚有礼。"
],
contentList: [
"生涯兴趣测验是每一个人在生涯选择时一项重要能力指标，生涯兴趣就是个人在职业、工作、嗜好与休閒上的表现，可以反映出每个人的自我概念、生活目标、甚至创造力等特质。这一份测验採用美国霍兰德教授(Dr. John Holland)的类型论为理论参考架构(Holland, 1994)，经过不断的修正，我们尽量使这一份题目能够符合目前的社会情况。",
"本测验可测量六种兴趣类型，包括实用（R）、研究（I） 、艺术（A） 、社会（S） 、企业（E）和事务（C）的倾向，得分越高，代表你在日常生活中比较喜欢从事该类型的相关活动,也会比较喜欢在同类型的环境下工作，工作表现也较佳。得分较低表示你在相关活动的兴趣不高，在这类环境工作容易出现不适应的情形。"
],
// 得分
tdList: [],
titList: [],
coded: "",
// 特质
traits: "",
// 自我介绍
introduceCode: "",
// 区分
strong: "",
// 选课意向
currList1: [],
// 科系
currList2: ["", "", "", ""],
// 职业
currList3: ["", "", "", ""],
inducList: [
"1. 得分最高的前三项兴趣类型就是你的生涯兴趣组型Holland Code",
"2. 六角形图是将六类生涯兴趣依照特定的排序而成，因此六个角分别代表一个兴趣类型，根据你的兴趣高低落在六个角内不同的位置，得分越高离中心点越远，得分越低越接近中心点,以不规则的六角形描绘出你的生涯兴趣型态。",
"3. 区分性是指你在六个得分得差距程度，当区分性越大的时候，表示你的兴趣组型越能突显，容易找到你的职业发展方向及历程。",
"4. 数线图是区分性的表示方法，本报告将六个兴趣类型分数由高到低排列，你可以看出六个类型相聚或远离的状态，以表示六个类型的区分程度。",
"5. 自我介绍三码通常是反映个人内心深处的渴望，如果和「生涯兴趣组型」一致或相近，表示你的兴趣类型清晰和稳定。如果不一致时，有可能你的兴趣倾向未来还会改变，也有可能你在选择自我介绍类型有特别的理由。"
],
// 六型介绍
typeList: [
{
typeId: 1,
letter: "R",
name: "实际型",
img: require("../../../assets/img/r.png")
},
{
typeId: 2,
letter: "I",
name: "研究型",
img: require("../../../assets/img/i.png")
},
{
typeId: 3,
letter: "A",
name: "艺术型",
img: require("../../../assets/img/a.png")
},
{
typeId: 4,
letter: "S",
name: "社会型",
img: require("../../../assets/img/s.png")
},
{
typeId: 5,
letter: "E",
name: "企业型",
img: require("../../../assets/img/e.png")
},
{
typeId: 6,
letter: "C",
name: "事务型",
img: require("../../../assets/img/c.png")
}
],
// 图表分数
lineScore: [],
// x轴
lineLike: [],
// y轴
yAxis: [],
// 测评结果Id
testId: "",
// 学生信息
studentInfo: ""
};
},
methods: {
handleClose: function() {
this.dialogVisible = false;
},
// 锚点跳转
goAnchor(id) {
if (id == 1) {
document.getElementById("first").scrollIntoView();
} else if (id == 2) {
document.getElementById("second").scrollIntoView();
} else if (id == 3) {
document.getElementById("third").scrollIntoView();
}
},
// 六型弹窗
showDialog(item) {
this.isType = item.typeId;
},
// 关闭弹窗
closeTypePic(item) {
this.isType = "";
},
// 兴趣测评报告
getTestInterestResult() {
let that = this;
let url = "/api/test/getTestInterestResult";
let params = {
id: this.testId
};
post(url, params).then(res => {
this.reportList = res;
this.assessReportUrl = res.pdf;
this.studentInfo = res.user;
// 组型
this.coded = res.result.threeCode;
// 特质
let arr = [];
for (let i in res.result.traits) {
arr.push(res.result.traits[i])
}
this.traits = arr[0];
// 自我介绍
this.introduceCode = res.result.introduceCode;
// 区分性
this.strong = res.result.strong;
// 选课意向
this.currList1 = res.result.majorData.arts_sciences.total;
// 科系
this.currList2 = res.result.majorData.major.total;
// 职业
this.currList3 = res.result.majorData.occupation.total;
// x轴
this.lineLike = res.xAxis;
// y轴
this.yAxis = res.yAxis;
// 分数
this.tdList = res.result.result;
for (var i in this.tdList) {
let obj = {};
if (i == "A") {
obj["name"] = "艺术型（A）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "E") {
obj["name"] = "企业型（E）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "R") {
obj["name"] = "实际型（R）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "I") {
obj["name"] = "研究型（I）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "S") {
obj["name"] = "社会型（S）";
obj["max"] = 120;
this.titList.push(obj);
}
if (i == "C") {
obj["name"] = "事务型（C）";
obj["max"] = 120;
this.titList.push(obj);
}
this.lineScore.push(i);
}
this.drawLine();
});
},
drawLine() {
// 折线图横轴
let lineX = this.lineLike;
// 纵轴
let lineY = this.yAxis;
// 类型
let style = this.lineScore;
let indic = this.titList;
// 基于准备好的dom，初始化echarts实例
// 六角星
let myChart = echarts.init(document.getElementById("myChart"));
// 折线图
let lineChart = echarts.init(document.getElementById("lineChart"));
// 绘制六角星图表
myChart.setOption({
tooltip: {
confine: true,
enterable: true,
backgroundColor: "#fff",
textStyle: {
//提示框浮层的文本样式。
color: "#8C9198",
fontSize: 14
}
},
radar: {
name: {
color: "#8C9198",
fontSize: 14
},
splitNumber: 3, // 雷达图圈数设置
// 设置雷达图中间射线的颜色
axisLine: {
lineStyle: {
color: "#C8C8C8"
}
},
splitArea: {
areaStyle: {
color: "#fff"
}
},
legend: {
data: style
},
indicator: indic
},
series: [
{
type: "radar",
tooltip: {
trigger: "item",
// 提示框背景色
backgroundColor: "#fff",
// 文本
textStyle: {
color: "#8C9198",
rich: ""
},
// 位置
position: "top",
padding: [5, 13, 5, 13]
// 显示文字
// formatter: function(params) {
// console.log(params);
// }
},
// 填充区域颜色
areaStyle: {
color: "#E3F0FF"
},
symbolSize: 6,
lineStyle: {
color: "#409eff" //线的颜色
},
itemStyle: {
borderColor: "#409eff"
},
data: [
{
name: [],
value: lineY
}
]
}
]
});
// 绘制折线图
lineChart.setOption({
textStyle: {
color: "#fff"
},
xAxis: {
type: "category",
// x轴换行
data: lineX.map(function(str) {
return str.replace(" ", "\n");
}),
// data:lineX,
nameTextStyle: {
fontSize: 14,
fontWeight: "bold"
},
axisLine: {
show: false, // 坐标轴是否显示
lineStyle: {
color: "#fff"
}
},
axisTick: {
//刻度线
show: false //去掉刻度线
}
},
yAxis: {
type: "value",
nameTextStyle: {
fontSize: 10
},
axisLine: {
show: false,
lineStyle: {
color: "#fff"
}
},
axisTick: {
//刻度线
show: false //去掉刻度线
},
splitNumber: 9
},
tooltip: {
trigger: "item",
// 提示框背景色
backgroundColor: "#fff",
// 文本
textStyle: {
color: "#8C9198",
rich: ""
},
// 位置
position: "top",
// 显示文字
formatter: "{b0}" + "<br>" + "得分：{c0}",
padding: [5, 13, 5, 13]
},
legend: {
// data: ["实际型（R）", "事务型（C）", "企业型（E）", "社会型（S）", "艺术型（A）","研究型（I）"]
},
series: [
{
data: lineY,
type: "line",
symbol: "circle", //拐点图形
symbolSize: 6,
hoverAnimation: false,
itemStyle: {
borderColor: "#fff", //拐点的边框色
color: "#409eff" //拐点颜色
},
lineStyle: {
color: "#fff" //线的颜色
}
}
]
});
}
},
mounted() {
// 测评结果Id
this.testId = this.$route.query.testId;
// 兴趣测评报告
// this.getTestInterestResult();
}
};
</script>
<style scoped>
@import "../../../style/report.css";
@import "../../../style/btn.css";
.type_pic {
position: absolute;
top: -390px;
z-index: 999;
}
.type_pic1 {
left: 59px;
}
.type_pic3 {
left: -235px;
}
.type_pic4 {
left: -427px;
}
.type_pic5 {
right: 67px;
}
.type_close {
width: 25px;
height: 25px;
float: right;
z-index: 1000;
position: relative;
right: 12px;
top: 37px;
background-color:rgba(255,255,255,0);
}
.second_btn {
margin-top: 49px;
}
.second_btn a {
color: #fff;
font-size: 14px;
}
</style>
... ...
<template>
<div class="inter_wrap">
<!-- 兴趣测评 -->
<div class="inter_test clearfix">
<!-- 左侧提示 -->
<div class="inter_test_l">
<div class="inter_l_box clearfix">
<div class="inter_box_t clearfix">
<h1>校园生活适应测验</h1>
</div>
<!-- 选项说明 -->
<div class="inter_box_b">
<div style="color:#8C9198;font-size:14px">依照题目描述之生活情境，如果这些事在学校发生，你会有多生气？</div>
<!-- <h2>选项说明：</h2>
<ul>
<li v-for="item in list" :key="item.index" class="clearfix">
<p class="inter_b_title">{{item.title}}</p>
<p class="inter_b_content">{{item.content}}</p>
</li>
</ul> -->
</div>
<!-- 图片 -->
<div class="inter_box_pic">
<img src="@/assets/img/14.png" alt />
</div>
</div>
</div>
<!-- 右侧选项 -->
<div class="inter_test_r">
<div class="inter_r_box clearfix">
<!-- 答题组数 倒计时 -->
<div class="inter_r_num layout align_center justify">
<div class="inter_group_num">第{{currentPage}}组/共{{pageNum}}组</div>
<div class="inter_count_down">
已用时间：
<p class="count_down_time">{{useTime | seconds}}</p>
</div>
</div>
<!-- 题目 -->
<div class="inter_r_problem clearfix">
<!-- 所有的问题 -->
<div
class="inter_pro_box layout flex_diection"
v-for="item in dataShow"
:key="item.id"
v-show="isLast"
:id="item.id"
@change="goTop()"
>
<!-- 问题 -->
<div class="inter_pro_question layout justify">{{item.id}}.{{item.title}}</div>
<!-- 答案 -->
<div class="inter_pro_answer">
<ul class="layout align_center justify inter_answer_ul">
<li
class="inter_answer_li"
v-for="arrItem in item.arr"
:key="arrItem.index"
@click="choiced(arrItem,item.id)"
>
<div class="inter_answer_circle">
<img :src="arrItem.choiced?src1:src2" alt />
</div>
{{arrItem.name}}
</li>
</ul>
</div>
</div>
<!-- 最后一组问题 -->
<div class="inter_pro_last" v-show="!isLast">
<h3>下面哪一种「自我介绍」最能代表你自己？</h3>
<table class="inter_pro_table">
<tr v-for="item in introduceData" :key="item.id" class="inter_table_tr">
<td class="td_left">
<p class="td_l_p">{{item.id}}</p>
</td>
<td class="td_right">{{item.value}}</td>
</tr>
</table>
</div>
<div
class="inter_pro_box layout flex_diection"
v-for="item in introduceList"
:key="item.id"
v-show="!isLast"
>
<!-- 问题 -->
<div class="inter_pro_question layout justify">{{item.id}}.{{item.value}}</div>
<!-- 答案 -->
<div class="inter_pro_answer">
<ul class="layout align_center justify inter_answer_ul">
<li
class="inter_answer_li"
v-for="arrItem in item.arr"
:key="arrItem.num"
@click="choicedLast(arrItem,item.id)"
>
<div class="inter_answer_circle">
<img :src="arrItem.choiced?src1:src2" alt />
</div>
{{arrItem.num}}
</li>
</ul>
</div>
</div>
<!-- 下一页按钮 -->
<div class="inter_answer_btn" @click="nextPage">{{isLast?"下一页":"提交"}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { post } from "../../../api/http";
import { Notification } from "element-ui";
let answer1 = {};
let answer2 = {};
export default {
data() {
return {
// 已用时间
useTime: 0,
// 单选框的值
checkedValue: [],
list: [
{ index: 1, title: "非常喜欢：", content: "有强烈（特别喜欢）的感觉" },
{
index: 2,
title: "喜欢：",
content: "有（喜欢做）的快乐感觉，不会日久生厌"
},
{ index: 3, title: "不喜欢：", content: "有（不想做）的厌烦感觉" },
{ index: 4, title: "非常不喜欢：", content: "有强烈（排斥）的感觉" }
],
src1: require("@/assets/img/15.png"),
src2: require("@/assets/img/9.png"),
// 数据
interestList: [],
// 自我介绍
introduceData: [],
introduceList: [],
// 共几页
pageNum: "",
// 每页数量
pageSize: 36,
// 默认显示第一页
currentPage: 1,
// 当前显示的数据
dataShow: [],
isLast: true,
flag: false,
count: 0,
userTimer: null
};
},
methods: {
// 选择答案
choiced: function(item, num) {
this.count++;
let that = this;
for (let i in that.dataShow) {
for (let j in that.dataShow[i].arr) {
if (item.interId == that.dataShow[i].arr[j].interId) {
that.$set(that.dataShow[i].arr[j], "choiced", false);
if (item.index == that.dataShow[i].arr[j].index) {
that.$set(that.dataShow[i].arr[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer1[num] = item.order;
localStorage.setItem("interAnswer", JSON.stringify(answer1));
},
// 自我介绍选择答案
choicedLast: function(arrItem, index) {
for (let i in this.introduceList) {
for (let j in this.introduceList[i].arr) {
if (arrItem.interId == this.introduceList[i].arr[j].interId) {
this.$set(this.introduceList[i].arr[j], "choiced", false);
if (arrItem.index == this.introduceList[i].arr[j].index) {
this.$set(this.introduceList[i].arr[j], "choiced", true);
}
}
}
this.$forceUpdate();
}
answer2[index] = arrItem.num;
localStorage.setItem("interAnswer2", JSON.stringify(answer2));
},
// 兴趣测评题目
getTestInterestList: function() {
let url = "/api/test/getTestInterestList";
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
let that = this;
let params = {
id: localStorage.getItem("evaluteId")
};
clearInterval(that.userTimer);
post(url, params).then(res => {
// 计时器
that.userTimer = setInterval(function() {
that.useTime++;
}, 1000);
// 提交测评id
localStorage.setItem("testStatus", res.student_test_id);
// 自我介绍
this.introduceData = res.introduce.introduce;
// 自我介绍题目
this.introduceList = res.introduce.test;
for (var obj of this.introduceList) {
let arr = [];
arr.push(
{ interId: obj.id, index: obj.id + "-1", num: "1", choiced: false },
{ interId: obj.id, index: obj.id + "-2", num: "2", choiced: false },
{ interId: obj.id, index: obj.id + "-3", num: "3", choiced: false },
{ interId: obj.id, index: obj.id + "-4", num: "4", choiced: false },
{ interId: obj.id, index: obj.id + "-5", num: "5", choiced: false },
{ interId: obj.id, index: obj.id + "-6", num: "6", choiced: false }
);
obj.arr = arr;
}
// 兴趣试题
this.interestList = res.interest;
for (var obj of this.interestList) {
let answerArr = [];
answerArr.push(
{
interId: obj.id,
index: obj.id + "-1",
name: obj.option_a,
choiced: false,
order: "A"
},
{
interId: obj.id,
index: obj.id + "-2",
name: obj.option_b,
choiced: false,
order: "B"
},
{
interId: obj.id,
index: obj.id + "-3",
name: obj.option_c,
choiced: false,
order: "C"
},
{
interId: obj.id,
index: obj.id + "-4",
name: obj.option_d,
choiced: false,
order: "D"
}
);
obj.arr = answerArr;
}
let answered = JSON.parse(localStorage.getItem("interAnswer"));
let answered2 = JSON.parse(localStorage.getItem("interAnswer2"));
if (answered) {
answer1 = answered;
}
if (answered2) {
answer2 = answered2;
}
// 前180答案
// 缓存的数据
for (let i in answered) {
// 所有数据
for (let obj of this.interestList) {
if (i == obj.id) {
for (let k in obj.arr) {
if (answered[i] == obj.arr[k].order) {
obj.arr[k].choiced = true;
}
}
}
}
}
// 181-183答案
for (let i1 in answered) {
// 所有数据
for (let obj of this.introduceList) {
if (i1 == obj.id) {
for (let k1 in obj.arr) {
if (answered[i1] == obj.arr[k1].order) {
obj.arr[k1].choiced = true;
}
}
}
}
}
// 总页数
this.pageNum = Math.ceil(this.interestList.length / this.pageSize + 1);
this.dataShow = this.interestList.slice(begin, end);
});
},
// 下一页
nextPage: function() {
let that = this;
// 兴趣所有问题
let allArr = [];
// 已选择问题
let ansArr = [];
for (let obj of this.dataShow) {
allArr.push(obj.id);
}
// 已选择问题
for (let i in answer1) {
ansArr.push(i / 1);
}
for (var i = 0; i < allArr.length; i++) {
if (ansArr.indexOf(allArr[i]) == -1) {
allArr = allArr[i];
}
}
if (allArr.length > 3) {
//
if (this.currentPage < this.pageNum - 1) {
this.currentPage++;
let begin = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
// 当前显示的数据
this.dataShow = this.interestList.slice(begin, end);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
} else {
this.isLast = false;
this.currentPage = 6;
// 自我介绍已选择问题
let inducArr = [];
for (let i in answer2) {
inducArr.push(i / 1);
}
if (this.currentPage == this.pageNum) {
if (inducArr.length == 3) {
clearInterval(that.userTimer);
this.setTestInterest();
return "";
} else {
// Notification.info({
// title: "提示",
// message: "请全部选择",
// duration: 1500
// });
}
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
this.currentPage = this.pageNum;
return false;
}
}
} else {
Notification.info({
title: "提示",
message: "请全部选择",
duration: 1500
});
this.goTop(allArr);
}
},
// 181-183提交
// 未选择跳转
goTop(id) {
document.getElementById(id).scrollIntoView();
},
// 提交兴趣测评
setTestInterest() {
let url = "/api/test/setTestInterest";
let params = {
id: localStorage.getItem("testStatus"),
answer1: JSON.stringify(answer1),
answer2: JSON.stringify(answer2)
};
post(url, params)
.then(res => {
answer1 = {};
answer2 = {};
localStorage.removeItem("interAnswer");
localStorage.removeItem("interAnswer2");
Notification.info({
title: "提示",
message: "提交成功",
duration: 1500
});
this.$router.push({ path: "/SetEvalute" });
})
.catch(err => {
answer1 = {};
answer2 = {};
localStorage.removeItem("interAnswer");
localStorage.removeItem("interAnswer2");
});
}
},
mounted() {
answer2 = {};
localStorage.removeItem("interAnswer2");
this.getTestInterestList();
},
computed: {}
};
</script>
<style scoped>
@import "../../../style/btn.css";
.inter_wrap {
width: 100%;
background-color: #f2f5fa;
padding: 36px 0 25px;
}
.inter_test {
width: 1200px;
margin: 0 auto;
background-color: #fff;
}
/* 左侧提示 */
.inter_test_l {
width: 430px;
float: left;
text-align: left;
}
.inter_l_box {
margin: 65px 0 0 70px;
}
/* 生涯兴趣测验(CIA) */
.inter_box_t h1 {
font-size: 24px;
color: #34485e;
position: relative;
margin-bottom: 60px;
}
h1:after {
position: absolute;
bottom: -30px;
left: 0;
content: "";
width: 54px;
height: 1px;
background-color: #34485e;
}
/* 选项说明 */
.inter_box_b {
margin-bottom: 45px;
}
.inter_box_b h2 {
margin-bottom: 14px;
font-size: 18px;
color: #34485e;
}
.inter_box_b p {
float: left;
font-size: 14px;
line-height: 28px;
}
.inter_b_title {
color: #409eff;
}
.inter_b_content {
color: #8c9198;
}
/* 图片 */
.inter_box_pic {
width: 281px;
height: 188px;
margin-left: 5px;
}
.inter_box_pic img {
width: 100%;
height: 100%;
}
/* 右侧选项 */
.inter_test_r {
width: 769px;
border-left: 1px solid #eee;
float: right;
}
.inter_r_box {
margin: 59px 120px 0 77px;
}
/* 答题组数 时间 */
.inter_r_num {
margin-bottom: 31px;
}
.inter_group_num {
font-size: 18px;
font-weight: bold;
color: #34485e;
}
/* 时间 */
.inter_count_down {
font-size: 14px;
color: #5b5e63;
}
.count_down_time {
float: right;
color: #409eff;
}
/* 题目 */
.inter_r_problem {
padding: 0 8px 0 4px;
width: 100%;
}
.inter_pro_box {
width: 100%;
margin-bottom: 20px;
font-size: 14px;
color: #8c9198;
}
/* 问题 */
.inter_pro_question {
margin-bottom: 9px;
}
/* 答案 */
.inter_answer_ul {
padding-left: 3px;
}
.inter_answer_li {
line-height: 19px;
}
/* 选择框 */
.inter_answer_circle {
width: 12px;
height: 12px;
vertical-align: middle;
margin: 3px 4px 0 0;
line-height: 12px;
float: left;
vertical-align: middle;
}
.inter_answer_circle img {
width: 100%;
height: 100%;
}
/* 最后一组问题 */
h3 {
font-size: 18px;
color: #34485e;
text-align: left;
margin-bottom: 20px;
}
/* 表格 */
.inter_pro_table {
width: 646px;
height: 570px;
margin-bottom: 40px;
}
.inter_table_tr:last-child .td_left {
border-bottom: 1px solid #409eff;
}
/* 表格左侧 */
.td_left {
width: 85px;
background-color: #409eff;
border-bottom: 1px solid #fff;
}
.td_l_p {
width: 29px;
height: 29px;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
opacity: 1;
color: #409eff;
line-height: 29px;
margin: 0 auto;
}
/* 表格右侧 */
.td_right {
border: 1px solid #eee;
border-left: none;
font-size: 14px;
color: #8c9198;
text-align: left;
line-height: 19px;
padding: 0 11px 0 18px;
}
</style>
... ...
... ... @@ -113,7 +113,8 @@ export default {
schooList: [],
newsId: "",
url: "",
isSchool: -1
isSchool: -1,
rule_ids:[]
};
},
methods: {
... ... @@ -123,6 +124,7 @@ export default {
closeDetail() {
this.isSchool = "";
},
// 轮播图
getCarouselList() {
let url = "/api/index/getCarouselList/";
... ... @@ -180,13 +182,14 @@ export default {
Bottom
},
mounted() {
let test = this.$route.query.test;
// let test = this.$route.query.test;
if (localStorage.getItem("token")) {
this.getCarouselList();
this.getNewsList();
this.getFamousList();
}else{
this.$router.push({ path: "/login/"+test });
this.$router.push({ path: "/login/"});
}
}
};
... ...
... ... @@ -25,7 +25,7 @@ export default new Router({
},
//登录
{
// path: '/Login/:test',
//path: '/Login/:test',
path: '/Login',
name: 'Login',
component: Login
... ... @@ -379,6 +379,298 @@ export default new Router({
},
]
},
// 二开项目
// 初中兴趣量表
{
path: '/JuniorIntrest',
name: 'JuniorIntrest',
component: resolve => require(["@/components/pages/Evalution/juniorintrest.vue"], resolve)
},
// 初中兴趣题目
{
path: '/JuniorIntrestTest',
name: 'JuniorIntrestTest',
component: resolve => require(["@/components/pages/Evalution/juniorintresttest.vue"], resolve)
},
// 校园生活适应检测表
{
path: '/SchoolLife',
name: 'SchoolLife',
component: resolve => require(["@/components/pages/Evalution/schoollife.vue"], resolve)
},
// 校园生活适应检测表题目
{
path: '/SchoolLifeTest',
name: 'SchoolLifeTest',
component: resolve => require(["@/components/pages/Evalution/schoollifetest.vue"], resolve)
},
// 小学多元测评协议
{
path: '/SchoolMulAgreement',
name: 'SchoolMulAgreement',
component: resolve => require(["@/components/pages/Evalution/SchoolMulAgreement.vue"], resolve)
},
// 小学多元测评说明
{
path: '/MulSchoolEvalution',
name: 'MulSchoolEvalution',
component: resolve => require(["@/components/pages/Evalution/mulschoolevalution.vue"], resolve)
},
// 小学多元测评
{
path: '/MulSchoolExample',
name: 'MulSchoolExample',
component: resolve => require(['@/components/pages/Evalution/mulschoolexample.vue'], resolve),
redirect: '/ChineseExample',
children: [
// 语文词意推理
{
path: '/ChineseExample',
name: 'ChineseExample',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/chinese/chineseexample.vue'], resolve),
redirect: '/ChineseRight',
children: [
// 语文辞意推导
{
path: '/ChineseRight',
name: 'ChineseRight',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/chinese/chineseright.vue'], resolve),
},
// 语文辞意推导例题
{
path: '/ChineseTail',
name: 'ChineseTail',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/chinese/chinesetail.vue'], resolve)
},
]
},
// 文法应用
{
path: '/WenfaApplyexample',
name: 'WenfaApplyexample',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/wenfaapplay/wenfaapplyexample.vue'], resolve),
redirect: '/WenfaApplyright',
children: [
// 文法应用例题
{
path: '/WenfaApplyright',
name: 'WenfaApplyright',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/wenfaapplay/wenfaapplyright.vue'], resolve)
},
// 文法应用具体题目
{
path: '/Wenfaapplydetail',
name: 'Wenfaapplydetail',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/wenfaapplay/wenfaapplydetail.vue'], resolve)
},
]
},
// 数字逻辑推理
{
path: '/MathtuiliExample',
name: 'MathtuiliExample',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/Mathtuili/Mathtuiliexample.vue'], resolve),
redirect: '/MathtuiRight',
children: [
// 数字逻辑推理题指导
{
path: '/MathtuiRight',
name: 'MathtuiRight',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/Mathtuili/Mathtuiright.vue'], resolve)
},
// 数字逻辑推理例题
{
path: '/MathtuiliDetail',
name: 'MathtuiliDetail',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/Mathtuili/Mathtuilidetail.vue'], resolve)
},
]
},
// 图文对照
{
path: '/PicduizhaoExample',
name: 'PicduizhaoExample',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/picduizhao/picduizhaoexample.vue'], resolve),
redirect: '/Picduizhaoright',
children: [
// 图文对照例题指导
{
path: '/Picduizhaoright',
name: 'Picduizhaoright',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/picduizhao/picduizhaoright.vue'], resolve),
},
// 图文对照具体例题
{
path: '/Picduizhaodetail',
name: 'Picduizhaodetail',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/picduizhao/picduizhaodetail.vue'], resolve),
}
]
},
// 学习风格例题
{
path: '/Studystyleexample',
name: 'Studystyleexample',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/studystyle/studystyleexample.vue'], resolve),
redirect: '/Studystyleright',
children: [
// 力矩例题指导
{
path: '/Studystyleright',
name: 'Studystyleright',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/studystyle/studystyleright.vue'], resolve),
},
// 力矩具体例题
{
path: '/Studystyledetail',
name: 'Studystyledetail',
component: resolve => require(['@/components/pages/Evalution/SchoolExample/studystyle/studystyledetail.vue'], resolve),
}
]
},
// 空间例题
{
path: '/SpaceExample',
name: 'SpaceExample',
component: resolve => require(['@/components/pages/Evalution/Example/Space/SpaceExample.vue'], resolve),
redirect: '/SpaceExampleRight',
children: [
// 空间例题指导
{
path: '/SpaceExampleRight',
name: 'SpaceExampleRight',
component: resolve => require(['@/components/pages/Evalution/Example/Space/SpaceExampleRight.vue'], resolve),
},
// 空间具体例题
{
path: '/SpaceDetailExample',
name: 'SpaceDetailExample',
component: resolve => require(['@/components/pages/Evalution/Example/Space/SpaceDetailExample.vue'], resolve),
}
]
},
// 字词例题
{
path: '/WordExample',
name: 'WordExample',
component: resolve => require(['@/components/pages/Evalution/Example/Word/WordExample.vue'], resolve),
redirect: '/WordExampleRight',
children: [
// 字词例题指导
{
path: '/WordExampleRight',
name: 'WordExampleRight',
component: resolve => require(['@/components/pages/Evalution/Example/Word/WordExampleRight.vue'], resolve),
},
// 字词具体例题
{
path: '/WordDetailExample',
name: 'WordDetailExample',
component: resolve => require(['@/components/pages/Evalution/Example/Word/WordDetailExample.vue'], resolve),
}
]
},
// 语法例题
{
path: '/GrammerExample',
name: 'GrammerExample',
component: resolve => require(['@/components/pages/Evalution/Example/Grammer/GrammerExample.vue'], resolve),
redirect: '/GrammerExampleRight',
children: [
// 语法例题指导
{
path: '/GrammerExampleRight',
name: 'GrammerExampleRight',
component: resolve => require(['@/components/pages/Evalution/Example/Grammer/GrammerExampleRight.vue'], resolve),
},
// 语法具体例题
{
path: '/GrammerDetailExample',
name: 'GrammerDetailExample',
component: resolve => require(['@/components/pages/Evalution/Example/Grammer/GrammerDetailExample.vue'], resolve),
}
]
},
// 英语例题
{
path: '/EnglishExample',
name: 'EnglishExample',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishExample.vue'], resolve),
redirect: '/EnglishExampleRight',
children: [
// 英语例题指导
{
path: '/EnglishExampleRight',
name: 'EnglishExampleRight',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishExampleRight.vue'], resolve),
},
// 模拟
{
path: '/EnglishSimulationExample',
name: 'EnglishDetailExample',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishSimulationExample.vue'], resolve),
},
// 同义词
{
path: '/EnglishSynonymExample',
name: 'EnglishSynonymExample',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishSynonymExample.vue'], resolve),
},
// 阅读理解文章 1
{
path: '/EnglishReadExample',
name: 'EnglishReadExample',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishReadExample.vue'], resolve),
},
// 题目1
{
path: '/EnglishReadQuestExample',
name: 'EnglishReadQuestExample',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishReadQuestExample.vue'], resolve),
},
// 阅读理解文章 2
{
path: '/EnglishReadTwo',
name: 'EnglishReadTwo',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishReadTwo.vue'], resolve),
},
// 题目1
{
path: '/EnglishReadTwoQuest',
name: 'EnglishReadTwoQuest',
component: resolve => require(['@/components/pages/Evalution/Example/English/EnglishReadTwoQuest.vue'], resolve),
},
]
},
// 学习风格
{
path: '/StyleExample',
name: 'StyleExample',
component: resolve => require(['@/components/pages/Evalution/Example/Style/StyleExample.vue'], resolve),
redirect: '/StyleDetailExample',
children: [
// 学习风格具体例题
{
path: '/StyleDetailExample',
name: 'StyleDetailExample',
component: resolve => require(['@/components/pages/Evalution/Example/Style/StyleDetailExample.vue'], resolve),
}
]
},
]
},
//一期测评结果
// 兴趣测评报告
{
path: '/AssessmentReport',
... ... @@ -391,6 +683,21 @@ export default new Router({
name: 'MulReport',
component: resolve => require(["@/components/pages/Evalution/MulReport.vue"], resolve)
},
// 二期报告结果
// 初中测量结果
{
path: '/JuniorIntrestResult',
name: 'JuniorIntrestResult',
component: resolve => require(["@/components/pages/Evalution/juniorintrestresult.vue"], resolve)
},
// 校园生活适应检测结果
{
path: '/SchoolLifeResult',
name: 'SchoolLifeResult',
component: resolve => require(["@/components/pages/Evalution/schoolliferesult.vue"], resolve)
},
]
},
// 施测说明
... ...