|
|
|
<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?"男":"女"}}
|
|
|
|
</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> |
...
|
...
|
|
