tangyi
/
zycp-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
zycp-demo/src/views/user/report/index.vue

681 lines
22 KiB
Vue
Raw Normal View History

页面布局
2022-03-03 15:51:14 +08:00
<template>
志愿测评
2022-03-04 20:25:37 +08:00
<div class="content my-content">
<!-- 头部 -->
<div :class="{ header: true, 'scroll white': isScrollTop, white: true }">
<div class="back" @click="$router.go(-1)">
<img src="../../../assets/images/home/expert/back.png" alt="" />
</div>
<div class="header-title">我的报告</div>
</div>
<div class="report pull-content">
<ul class="report-nav">
<li :class="{ active: isShow }" @click="isShow = !isShow">
个性特质分析
</li>
<li :class="{ active: !isShow }" @click="isShow = !isShow">
专业类匹配度
</li>
</ul>
<div class="report-item-all">
<div class="report-item" v-show="isShow">
<div class="report-relation">
<span>{{ evaluationData.student.student_name }}</span>
<span>{{ evaluationData.student.student_native_str }}</span>
<span v-show="evaluationData.evaluation.role_type == 'student'"
>考生测评</span
>
<span v-show="evaluationData.evaluation.role_type == 'parents'"
>亲属测评</span
>
<span>{{ evaluationData.student.done_at }}</span>
</div>
<div class="report-box3 report-box">
<div class="report-title">
{{
evaluationData.evaluation.report.base.profession_concept.name
}}
<!-- 一、{{baseList1.summary}} -->
</div>
<span class="report-h2">
{{
evaluationData.evaluation.report.base.profession_concept
.reportTextList.summary
}}
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
{{
evaluationData.evaluation.report.base.profession_concept
.reportTextList.keywords_text
}}
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
{{
evaluationData.evaluation.report.base.profession_concept
.reportTextList.description
}}
<!-- {{baseList1.reportspanList.description}} -->
</span>
<div id="intellect" ref="profession_concept"></div>
</div>
<div class="report-box1 report-box">
<div class="report-title">
{{ evaluationData.evaluation.report.base.intellect.name }}
<!-- 一、{{baseList1.summary}} -->
</div>
<span class="report-h2">
{{
evaluationData.evaluation.report.base.intellect.reportTextList
.summary
}}
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
{{
evaluationData.evaluation.report.base.intellect.reportTextList
.keywords_text
}}
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
{{
evaluationData.evaluation.report.base.intellect.reportTextList
.description
}}
<!-- {{baseList1.reportspanList.description}} -->
</span>
<div id="intellect" ref="intellect"></div>
</div>
<div class="report-box4 report-box">
<div class="report-title">
{{
evaluationData.evaluation.report.base.profession_interest.name
}}
<!-- 一、{{baseList1.summary}} -->
</div>
<span class="report-h2">
{{
evaluationData.evaluation.report.base.profession_interest
.reportTextList.summary
}}
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
{{
evaluationData.evaluation.report.base.profession_interest
.reportTextList.keywords_text
}}
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
{{
evaluationData.evaluation.report.base.profession_interest
.reportTextList.description
}}
<!-- {{baseList1.reportspanList.description}} -->
</span>
<div id="intellect" ref="profession_interest"></div>
</div>
<div class="report-box2 report-box">
<div class="report-title">
{{ evaluationData.evaluation.report.base.mbti_character.name }}
<!-- 一、{{baseList1.summary}} -->
</div>
<span class="report-h2">
{{
evaluationData.evaluation.report.base.mbti_character
.reportTextList.summary
}}
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
{{
evaluationData.evaluation.report.base.mbti_character
.reportTextList.keywords_text
}}
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
{{
evaluationData.evaluation.report.base.mbti_character
.reportTextList.description
}}
<!-- {{baseList1.reportspanList.description}} -->
</span>
<dir class="report-box4-ex">
<div v-for="item in arrData" :key="item">
<p>{{item.A.factor_name}}</p>
<div class="content-ex">
<div>
<p
:style="{
width: proportion(item.A.avg_score, (item.A.avg_score-0)+(item.B.avg_score-0)),
}"
v-if="(item.A.avg_score-0)>=(item.B.avg_score-0)"
></p>
</div>
<div>
<p
v-if="(item.A.avg_score-0)<=(item.B.avg_score-0)"
:style="{
width: proportion(item.B.avg_score, (item.A.avg_score-0)+(item.B.avg_score-0)),
}"></p>
</div>
</div>
<p>{{item.B.factor_name}}</p>
</div>
</dir>
</div>
<div class="report-box5 report-box">
<div class="report-title">
{{ evaluationData.evaluation.report.base.subjects.name }}
<!-- 一、{{baseList1.summary}} -->
</div>
<span class="report-h2">
{{
evaluationData.evaluation.report.base.subjects.reportTextList
.summary
}}
<!-- {{baseList1.reportspanList.summary}} -->
</span>
<span class="txt2">
{{
evaluationData.evaluation.report.base.subjects.reportTextList
.keywords_text
}}
<!-- {{baseList1.reportspanList.keywords_span}} -->
</span>
<span class="report-h3">
{{
evaluationData.evaluation.report.base.subjects.reportTextList
.description
}}
<!-- {{baseList1.reportspanList.description}} -->
</span>
<div id="intellect" ref="subjects"></div>
</div>
</div>
<!-- 专业类匹配度 -->
<div class="report-item" v-show="!isShow">
<div class="report-exponent">
<div class="exponent-title">
<div class="exponent-star">
推荐指数：<span>★</span><span>★</span><span>★</span
><span>★</span><span>★</span>
<!-- <span a:for="{{item.stars}}">★</span> -->
</div>
<div class="percentage">匹配度：>90%<!-- {{item.degree}} --></div>
</div>
<div class="exponent-list">
<div class="exponent-item">
<span>
自然学科类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
社会科学类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
人文科学类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
</div>
</div>
<div class="report-exponent">
<div class="exponent-title">
<div class="exponent-star">
推荐指数：<span>★</span><span>★</span><span>★</span
><span>★</span><span>★</span>
<!-- <span a:for="{{item.stars}}">★</span> -->
</div>
<div class="percentage">匹配度：>90%<!-- {{item.degree}} --></div>
</div>
<div class="exponent-list">
<div class="exponent-item">
<span>
自然学科类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
社会科学类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
人文科学类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
</div>
</div>
</div>
</div>
<div class="report-exponent">
<div class="exponent-title">
<div class="exponent-star">
推荐指数：<span>★</span><span>★</span><span>★</span
><span>★</span><span>★</span>
<!-- <span a:for="{{item.stars}}">★</span> -->
</div>
<div class="percentage">匹配度：>90%<!-- {{item.degree}} --></div>
</div>
<div class="exponent-list">
<div class="exponent-item">
<span>
自然学科类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>自然保护与环境生态类</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
社会科学类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son">
<span>中西医结合</span>
<span>中西医结合</span>
<span>中西医结合</span>
</div>
</div>
<div class="exponent-item">
<span>
人文科学类<br />
(10)
<!-- {{item2.name}}
页面布局
2022-03-03 15:51:14 +08:00
({{item2.childrenSize}}) -->
志愿测评
2022-03-04 20:25:37 +08:00
</span>
<div class="exponent-item-son"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
页面布局
2022-03-03 15:51:14 +08:00
</template>
<script>
志愿测评
2022-03-04 20:25:37 +08:00
import * as echarts from "echarts";
export default {
name: "report",
data() {
return {
isScrollTop: false,
isShow: true, //切换报告
roleTType: "student", //报告人类型
evaluationData: {},
arrData:"",
};
},
created() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
mounted() {
this.getData();
},
methods: {
proportion(obj, max) {
console.log(obj ,max,"---")
return ((Math.abs(obj) - 0) / (max - 0)) * 100 + "%";
},
// 页面跳转
goPage(path) {
this.$router.push(path);
},
drawLine(dataNmae, dataNum, title) {
// 基于准备好的dom，初始化echarts实例
setTimeout(() => {
let myChart = echarts.init(this.$refs[title]);
// 绘制图表
let option = {
grid: {},
xAxis: {
data: dataNmae,
type: "category",
axisLabel: { interval: 0, rotate: 60 },
},
yAxis: {
type: "value",
},
series: [
{
data: dataNum,
type: "bar",
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#666",
fontSize: 12,
},
},
},
},
},
],
};
myChart.setOption(option);
}, 10);
},
leidata(valueArr, indicator, title) {
console.log(valueArr, indicator);
setTimeout(() => {
let myChart = echarts.init(this.$refs[title]);
// let valueArr = [];
// let indicator = [];
// let sum = 0;
let option = {
radar: {
// shape: 'circle',
indicator: indicator,
// [
// { name: "Sales", max: 9 },
// { name: "Administration", max: 9 },
// { name: "Information Technology", max: 9 },
// { name: "Customer Support", max: 9 },
// { name: "Development", max: 9 },
// { name: "Marketing", max: 9 },
// ],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
// value: [4200, 3000, 20000, 35000, 50000, 18000],
value: valueArr,
name: "Allocated Budget",
},
],
},
],
};
myChart.setOption(option);
}, 1000);
},
getData() {
let that = this;
this.axios
.post(this.HOME + "/api/evaluation/evaluation-info", {
id: this.$route.query.id,
})
.then(function (res) {
console.log(res);
that.evaluationData = res.data.data;
let dataName = [];
let dataNun = [];
for (
let index = 0;
index <
that.evaluationData.evaluation.report.base.intellect.reportData
.length;
index++
) {
dataNun.push(
that.evaluationData.evaluation.report.base.intellect.reportData[
index
].avg_score
);
dataName.push(
that.evaluationData.evaluation.report.base.intellect.reportData[
index
].factor_name
);
}
that.drawLine(dataName, dataNun, "intellect");
let dataNamea = [];
let dataNuna = [];
for (
let index = 0;
index <
that.evaluationData.evaluation.report.base.profession_concept
.reportData.length;
index++
) {
dataNuna.push(
that.evaluationData.evaluation.report.base.profession_concept
.reportData[index].avg_score
);
dataNamea.push(
that.evaluationData.evaluation.report.base.profession_concept
.reportData[index].factor_name
);
}
that.drawLine(dataNamea, dataNuna, "profession_concept");
let dataNameb = [];
let dataNunb = [];
for (
let index = 0;
index <
that.evaluationData.evaluation.report.base.profession_interest
.reportData.length;
index++
) {
dataNunb.push(
that.evaluationData.evaluation.report.base.profession_interest
.reportData[index].avg_score
);
dataNameb.push({
name: that.evaluationData.evaluation.report.base
.profession_interest.reportData[index].factor_name,
max: 9,
});
}
that.leidata(dataNunb, dataNameb, "profession_interest");
let dataNameC = [];
let dataNunC = [];
for (
let index = 0;
index <
that.evaluationData.evaluation.report.base.subjects.reportData
.length;
index++
) {
dataNunC.push(
that.evaluationData.evaluation.report.base.subjects.reportData[
index
].avg_score
);
dataNameC.push({
name: that.evaluationData.evaluation.report.base.subjects
.reportData[index].factor_name,
max: 9,
});
}
that.leidata(dataNunC, dataNameC, "subjects");
let arrData = [
{
A: "",
B: "",
},
{
A: "",
B: "",
},
{
A: "",
B: "",
},
{
A: "",
B: "",
},
];
let arrAD= that.evaluationData.evaluation.report.base.mbti_character.reportData
// console.log((arrAD[0].factor_subgroup_id-0)-1);
for (
let index = 0;
index < arrAD.length; index++) {
if (arrData[(arrAD[index].factor_subgroup_id-0)-1].A) {
arrData[(arrAD[index].factor_subgroup_id-0)-1].B= arrAD[index]
}else{
arrData[(arrAD[index].factor_subgroup_id-0)-1].A=arrAD[index]
页面布局
2022-03-03 15:51:14 +08:00
}
志愿测评
2022-03-04 20:25:37 +08:00
}
console.log(arrData)
that.arrData=arrData
});
},
// 滚动改变样式
eventScrollTop() {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop >= 5) {
if (this.isScroll) {
this.isScroll = false;
this.isScrollTop = true;
}
} else {
if (!this.isScroll) {
this.isScroll = true;
this.isScrollTop = false;
}
}
},
},
destroyed() {
window.removeEventListener("scroll", this.eventScrollTop);
},
//keep-alive进入时触发
activated() {
this.isScroll = true;
window.addEventListener("scroll", this.eventScrollTop);
},
//keep-alive离开时触发
deactivated() {
window.removeEventListener("scroll", this.eventScrollTop);
},
};
页面布局
2022-03-03 15:51:14 +08:00
</script>
<style scoped>
志愿测评
2022-03-04 20:25:37 +08:00
#intellect {
width: 100%;
height: 320px;
}
.report-box4-ex > div {
display: flex;
justify-content: space-between;
align-items: center;
}
.content-ex {
width: 80%;
height: 0.5rem;
display: flex;
}
.content-ex > div {
width: 50%;
height: 100%;
}
页面布局
2022-03-03 15:51:14 +08:00
志愿测评
2022-03-04 20:25:37 +08:00
.content-ex > div > p {
background-color: red;
width: 0px;
height: 100%;
}
.content-ex > :nth-child(1) {
display: flex;
justify-content: flex-end;
}
页面布局
2022-03-03 15:51:14 +08:00
</style>