Files
ks-app-employment-service/packageCa/testReport/personalTestReport.vue

1145 lines
51 KiB
Vue
Raw Normal View History

<template>
<view class="interest-report-wrap">
<view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
<view class="go-back" @click="goback"></view>
<text>我的报告</text>
</view>
<view class="content">
<contrastBox :testType="testType" :userId="userId" :recordId="recordId" @compareParameters="opCompareParameters"></contrastBox>
<view class="section-block">
<testHead :reportTitle="'人格测评报告'" :testTime="testDate" :isIntroduce="false" :isVideo="true" :videoUrl="videoUrl" :introduceUrl="introduceUrl" ></testHead>
<view class="s-line"></view>
<view class="title">
<view class="name">强项特质</view>
</view>
<view class="text-desc-wrap" v-if="!isNoHight">
<view class="row" v-if="scoreDetail[0].Leavel >= 4">
在群体中充满能量和快乐<text class="strong">外向热情</text>
</view>
<view class="row" v-if="scoreDetail[1].Leavel >= 4">
有说服力和影响力争做团体中的<text class="strong">领导者</text>
</view>
<view class="row" v-if="scoreDetail[2].Leavel >= 4">
<text class="strong">善于交际</text>广交朋友朋友圈庞大
</view>
<view class="row" v-if="scoreDetail[3].Leavel >= 4">
<text class="strong">灵活变通</text>参考多方意见再做出自己的决定
</view>
<view class="row" v-if="scoreDetail[4].Leavel >= 4">
逆来顺受<text class="strong">几乎不与人发生冲突</text>脾气温和
</view>
<view class="row" v-if="scoreDetail[5].Leavel >= 4">
与人为善沟通能力强<text class="strong">易于亲近</text>
</view>
<view class="row" v-if="scoreDetail[6].Leavel >= 4">
做事尽职尽责竭尽全力未完成前<text class="strong">决不放弃</text>
</view>
<view class="row" v-if="scoreDetail[7].Leavel >= 4">
<text class="strong">严格遵守计划</text>生活规律有秩序
</view>
<view class="row" v-if="scoreDetail[8].Leavel >= 4">
需要长时间的思考和较多的信息才能做出决策<text class="strong">犹豫不果断</text></view>
<view class="row" v-if="scoreDetail[9].Leavel >= 4">
追求新鲜事物<text class="strong">愿意接受挑战与冒险</text>
</view>
<view class="row" v-if="scoreDetail[10].Leavel >= 4">
<text class="strong">随机应变</text>不拘泥规则限制对生活求新求变
</view>
<view class="row" v-if="scoreDetail[11].Leavel >= 4">
<text class="strong">情感丰富</text>同理心强艺术表现力和感受力较好
</view>
</view>
<view class="text-desc-wrap" v-else>
<view class="empty-tip">
无强项特质
</view>
</view>
<view class="title">
<view class="name">普通特质</view>
</view>
<view class="text-desc-wrap" v-if="!isNoMid">
<view class="row" v-if="scoreDetail[0].Leavel == 3">
在群体中<text class="strong">收放自如</text>可以较好的适应
</view>
<view class="row" v-if="scoreDetail[1].Leavel == 3">
具有一定的领导力<text class="strong">不会争做团队领头人</text>
</view>
<view class="row" v-if="scoreDetail[2].Leavel == 3">
有自己的朋友圈在交际中<text class="strong">不会过于热情</text>
</view>
<view class="row" v-if="scoreDetail[3].Leavel == 3">
墨守成规<text class="strong">做事不够灵活</text>可以多参考他人建议
</view>
<view class="row" v-if="scoreDetail[4].Leavel == 3">个性温和但遇事敢于挑战权威<text
class="strong">不会一味退让</text>
</view>
<view class="row" v-if="scoreDetail[5].Leavel == 3">
与人交往过程中可以<text class="strong">恰当的展现倾听和交流技巧</text>
</view>
<view class="row" v-if="scoreDetail[6].Leavel == 3">
<text class="strong">认真负责</text>但偶尔会
<text class="strong">虎头蛇尾</text>中途放弃
</view>
<view class="row" v-if="scoreDetail[7].Leavel == 3">
执行计划有一定<text class="strong">弹性</text>
</view>
<view class="row" v-if="scoreDetail[8].Leavel == 3">
做决定前会谨慎思考<text class="strong">不会长时间犹豫不决</text>
</view>
<view class="row" v-if="scoreDetail[9].Leavel == 3">
对新事物充满好奇<text class="strong">但没有信心与勇气接受新的挑战</text>
</view>
<view class="row" v-if="scoreDetail[10].Leavel == 3">
<text class="strong">稳重</text>难以突破自己但面对新变化<text class="strong">也会迎难而上去接受</text>
</view>
<view class="row" v-if="scoreDetail[11].Leavel == 3">
<text class="strong">感性与理智兼具</text>
</view>
</view>
<view class="text-desc-wrap" v-else>
<view class="empty-tip">
无普通特质
</view>
</view>
<view class="title">
<view class="name">弱项特质</view>
</view>
<view class="text-desc-wrap" v-if="!isNoLow">
<view class="row" v-if="scoreDetail[0].Leavel < 3">
在群体活动中表现<text class="strong">沉默孤独</text>
</view>
<view class="row" v-if="scoreDetail[1].Leavel < 3">
不会在团体中争做领导者<text class="strong">避免在集体中出风头</text>
</view>
<view class="row" v-if="scoreDetail[2].Leavel < 3">
冷漠<text class="strong">不善交际</text>朋友圈狭窄
</view>
<view class="row" v-if="scoreDetail[3].Leavel < 3">
<text class="strong">固执已见</text>拒绝他人介入自己的事情
</view>
<view class="row" v-if="scoreDetail[4].Leavel < 3">遇到不满的人和,<text class="strong">事敢于抗争</text>针锋相对
</view>
<view class="row" v-if="scoreDetail[5].Leavel < 3">缄默冷淡,<text class="strong">不易亲近</text>
</view>
<view class="row" v-if="scoreDetail[6].Leavel < 3">
不够认真专注做事<text class="strong">拖延</text>
</view>
<view class="row" v-if="scoreDetail[7].Leavel < 3">
<text class="strong">率性而为</text>不喜欢按照计划规律生活
</view>
<view class="row" v-if="scoreDetail[8].Leavel < 3">
<text class="strong">做事果断</text>不需要思考很久就可以行动
</view>
<view class="row" v-if="scoreDetail[9].Leavel < 3">
不愿接受过大改变<text class="strong">墨守成规</text>
</view>
<view class="row" v-if="scoreDetail[10].Leavel < 3">享受平稳、安逸的生活,<text class="strong">不要有过多变化</text>
</view>
<view class="row" v-if="scoreDetail[11].Leavel < 3">
理性现实对情绪或情感<text class="strong">较不敏感</text>难以同理他人
</view>
</view>
<view class="text-desc-wrap" v-else>
<view class="empty-tip">
无弱项特质
</view>
</view>
<view class="chat-wrap blue-bg" style="margin-bottom:40rpx;">
<view class="chat-title">
综合特质等级侧面图
</view>
<view class="row-item"><l-echart ref="charts1" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-tip">
<text>*强项等级4-5</text>
<text>普通等级3</text>
<text>弱项等级1-2</text>
</view>
</view>
<view class="section-block" >
<view class="title">
<view class="name">分特质解释说明</view>
</view>
<view class="score-item blue">
<view class="row">
<text class="name">{{scoreSummary1.Name}}</text>
<view class="level-label">
等级 {{scoreSummary1.Leavel}}
</view>
<view class="score-label">
原始分数 {{scoreSummary1.Score}}
</view>
</view>
<view class="item-desc">{{scoreSummary1.Desc}}</view>
</view>
<view class="chat-wrap blue-bg">
<view class="chat-title">
内外向综合特质侧面图
</view>
<view class="row-item"><l-echart ref="charts2" class="charts-box"></l-echart>
</view>
</view>
<view class="score-item purple">
<view class="row">
<text class="name">{{scoreSummary2.Name}}</text>
<view class="level-label">
等级 {{scoreSummary2.Leavel}}
</view>
<view class="score-label">
原始分数 {{scoreSummary2.Score}}
</view>
</view>
<view class="item-desc">{{scoreSummary2.Desc}}</view>
</view>
<view class="chat-wrap purple-bg">
<view class="chat-title">
人际关系综合特质侧面图
</view>
<view class="row-item"><l-echart ref="charts3" class="charts-box"></l-echart>
</view>
</view>
<view class="score-item orange">
<view class="row">
<text class="name">{{scoreSummary3.Name}}</text>
<view class="level-label">
等级 {{scoreSummary3.Leavel}}
</view>
<view class="score-label">
原始分数 {{scoreSummary3.Score}}
</view>
</view>
<view class="item-desc">{{scoreSummary3.Desc}}</view>
</view>
<view class="chat-wrap orange-bg">
<view class="chat-title">
严谨性综合特质侧面图
</view>
<view class="row-item"><l-echart ref="charts4" class="charts-box"></l-echart>
</view>
</view>
<view class="score-item green">
<view class="row">
<text class="name">{{scoreSummary4.Name}}</text>
<view class="level-label">
等级 {{scoreSummary4.Leavel}}
</view>
<view class="score-label">
原始分数 {{scoreSummary4.Score}}
</view>
</view>
<view class="item-desc">{{scoreSummary4.Desc}}</view>
</view>
<view class="chat-wrap green-bg">
<view class="chat-title">
开放性综合特质侧面图
</view>
<view class="row-item"><l-echart ref="charts5" class="charts-box"></l-echart>
</view>
</view>
</view>
<view class="section-block" >
<view class="title">
<view class="name">与你的人格特质可能相关的专业</view>
</view>
<view class="job-table">
<view class="tr">
<view class="th">特质名称</view>
<view class="th">专业选择</view>
</view>
<view class="tr" v-if="scoreDetail[0].Leavel > 2">
<view class="td">乐群性</view>
<view class="td">
<view class="row">
<text class="strong">人文科学</text>新闻传播学
</view>
<view class="row">
<text class="strong">社会科学</text>教育学心理学
</view>
<view class="row">
<text class="strong">体育</text>体育学
</view>
</view>
</view>
<view class="tr" v-if="scoreDetail[1].Leavel > 2">
<view class="td">领导性</view>
<view class="td">
<view class="row">
<text class="strong">人文科学</text>新闻传播学
</view>
<view class="row">
<text class="strong">经济管理</text>工商管理公共管理等
</view>
<view class="row">
<text class="strong">社会科学</text>法学
</view>
</view>
</view>
<view class="tr" v-if="scoreDetail[2].Leavel > 2">
<view class="td">社交性</view>
<view class="td">
<view class="row">
<text class="strong">人文科学</text>新闻传播学
</view>
<view class="row">
<text class="strong">经济管理</text>工商管理公共管理旅游管理等
</view>
</view>
</view>
<view class="tr" v-if="scoreDetail[9].Leavel > 2">
<view class="td">探究性</view>
<view class="td">
<view class="row">
<text class="strong">数理工程</text>数学物理学统计学计算机电子信息自动化土木等
</view>
<view class="row">
<text class="strong">化工</text>化学纺织轻工材料等
</view>
<view class="row">
<text class="strong">农林牧鱼</text>农业工程林业工程林学自然保护与环境生态等
</view>
<view class="row">
<text class="strong">生物医药</text>生物科学基础医学临床医学口腔医学医学药学护理学等
</view>
<view class="row">
<text class="strong">地理科学</text>地质矿业交通运输海洋工程天文等
</view>
</view>
</view>
<view class="tr" v-if="scoreDetail[10].Leavel > 2">
<view class="td">变通性</view>
<view class="td">
<view class="row">
<text class="strong">数理工程</text>土木建筑等
</view>
<view class="row">
<text class="strong">艺术设计</text>艺术学理论美术学设计学等
</view>
</view>
</view>
<view class="tr" v-if="scoreDetail[11].Leavel > 2">
<view class="td">感觉性</view>
<view class="td">
<view class="row">
<text class="strong">数理工程</text>土木建筑等
</view>
<view class="row">
<text class="strong">艺术设计</text>艺术学理论音乐与舞蹈戏剧与影视学美术学设计学等
</view>
<view class="row">
<text class="strong">人文科学</text>中国语言文学外国语言文学新闻传播等
</view>
</view>
</view>
</view>
<view class="title">
<view class="name">与你的人格特质可能相关的工作领域</view>
</view>
<view class="job-table">
<view class="tr">
<view class="th">特质名称</view>
<view class="th">工作领域</view>
</view>
<view class="tr" v-if="scoreDetail[3].Leavel > 2">
<view class="td">客观性</view>
<view class="td">顾客服务 市场销售 心理咨询 教育训练</view>
</view>
<view class="tr" v-if="scoreDetail[4].Leavel > 2">
<view class="td">顺从性</view>
<view class="td">行政管理 会计稽核 军警保安 工程制造</view>
</view>
<view class="tr" v-if="scoreDetail[5].Leavel > 2">
<view class="td">亲和性</view>
<view class="td">市场销售 教育训练 顾客服务 医护社工</view>
</view>
<view class="tr" v-if="scoreDetail[6].Leavel > 2">
<view class="td">坚毅性</view>
<view class="td">设计艺术 工程制造 医学治疗 科学研究 军警保安</view>
</view>
<view class="tr" v-if="scoreDetail[7].Leavel > 2">
<view class="td">秩序性</view>
<view class="td">财务会计 工程制造 医学治疗 科学研究 档案管理</view>
</view>
<view class="tr" v-if="scoreDetail[8].Leavel > 2">
<view class="td">深思性</view>
<view class="td">文艺写作 科学研究 设计艺术 文史哲学 信息程序</view>
</view>
</view>
<view class="title" @click="showTipLayer(1)">
<view class="name">作答态度</view>
<view class="tip-icon"></view>
</view>
<view class="score-item blue">
<view class="row">
<text class="name">{{scoreSummary5.Name}}</text>
<view class="level-label">
{{scoreSummary5.Leavel == 1?'一致性低':'一致性高'}}
</view>
<view class="score-label">
原始分数 {{scoreSummary5.Score}}
</view>
</view>
<view class="item-desc">{{scoreSummary5.Desc}}</view>
</view>
</view>
</view>
<u-modal :show="showTip" @confirm="showTip=false" @cancel="showTip=false" confirmText="我明白了">
<view class="slot-content">
<view class="tip-layer">
<view class="title">{{layerTitile}}</view>
<view class="desc" v-html="layerDesc"></view>
</view>
</view>
</u-modal>
</view>
</template>
<script>
import testHead from "@/packageCa/testReport/components/testHead.vue"
import contrastBox from "@/packageCa/testReport/components/contrastBox.vue"
import opts from "./chartOpts.js"
2025-11-07 18:38:01 +08:00
import api from "@/packageCa/apiCa/testManage.js";
import theme from '@/uni_modules/lime-echart/static/walden.json';
2025-11-07 19:01:00 +08:00
const echarts = require('../../utilCa/echarts.min.js');
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
// // 注册主题
// echarts.registerTheme('theme', theme);
export default {
components: {
contrastBox,
testHead
},
data() {
return {
platform: uni.getDeviceInfo().platform,
barHeight: wx.getWindowInfo().statusBarHeight,
showTip: false,
videoUrl: "http://2-video.oss-cn-shenzhen.aliyuncs.com/2023%E5%B9%B4%E8%A7%86%E9%A2%91/%E5%88%9D%E4%B8%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%BA%90/%E4%BA%BA%E6%A0%BC%E6%B5%8B%E8%AF%84%E8%A7%A3%E8%AF%BB1.16%E4%BF%AE%E6%94%B92.mp4",
introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/personalTestReport.png",
layerTitile: "",
layerDesc: "",
scoreSummary1: {},
scoreSummary2: {},
scoreSummary3: {},
scoreSummary4: {},
scoreSummary5: {},
scoreDetail: [], //
isNoHight: false,
isNoMid: false,
isNoLow: false,
scoreSummary: [],
testDate: "",
opts, //图表配置
chartData: {
categories: ["内外向", "人际关系", "严谨性", "开放性"],
series: [{
name: "",
data: []
}]
},
chartData1: {
categories: ["乐群性", "领导性", "社交性"],
series: [{
name: "",
data: []
}]
},
chartData2: {
categories: ["客观性", "顺从性", "亲和性"],
series: [{
name: "",
data: []
}]
},
chartData3: {
categories: ["坚毅性", "秩序性", "深思性"],
series: [{
name: "",
data: []
}]
},
chartData4: {
categories: ["探究性", "变通性", "感觉性"],
series: [{
name: "",
data: []
}]
},
opts2: {},
opts3: {},
opts4: {},
data1: [], //综合特质等级
data2: [], //内外向综合
data3: [], //人际关系综合
data4: [], //严谨性综合
data5: [], //开放性综合
option1: {},
option2: {},
option3: {},
option4: {},
option5: {},
showContrast: false,
currentYear: 0,
currentTerm: 0,
testType: "15",
userId: "",
platformType: 0,
recordId: 0,
labelName1: "",//表值1
labelName2: "",//表值2
params: {},//筛选参数
}
},
onLoad(e) {
if (e.year != null) {
this.currentYear = e.year;
}
if (e.term != null) {
this.currentTerm = e.term;
}
if (e.recordId != null) {
this.recordId = e.recordId;
}
this.getTestRecord(this.currentYear, this.currentTerm,this.recordId);
},
methods: {
//报告介绍
playIntroduce() {
this.showIntroduce = true;
},
//视频介绍
playVideo() {
this.videoUrlVisitor = this.videoUrl;
this.showVideo = true;
},
//对比参数
opCompareParameters(value){
this.labelName1 = value.name1;
this.labelName2 = value.name2;
this.params = value;
this.getValue()
},
//获取报告结果
getTestRecord(currentYear, currentTerm,recordId) {
uni.showLoading({
title: "加载中"
})
api.personalityTestResult(currentYear, currentTerm,recordId).then(res => {
uni.hideLoading();
if (res.Result === 1) {
if (res.Data != null) {
let info = res.Data.testRecord;
this.currentYear = info.Year;
this.currentTerm = info.Term;
this.recordId = info.Id;
this.userId = info.UserId;
this.labelName1 = res.Data.TestDate;
this.testDate = res.Data.TestDate;
let data = JSON.parse(res.Data.testRecord.Suggestion)
data.ScoreSummary.forEach(item => {
switch (item.Type) {
case 1: {
item.Name = "内外向综合特质";
this.scoreSummary1 = item;
break;
}
case 2: {
item.Name = "人际关系综合特质";
this.scoreSummary2 = item;
break;
}
case 3: {
item.Name = "严谨性综合特质";
this.scoreSummary3 = item;
break;
}
case 4: {
item.Name = "开放性综合特质";
this.scoreSummary4 = item;
break;
}
case 5: {
item.Name = "一致性";
this.scoreSummary5 = item;
break;
}
}
})
this.scoreSummary = data.ScoreSummary;
this.scoreDetail = data.ScoreDetail;
let hight = 0;
let mid = 0;
let low = 0;
data.ScoreDetail.forEach(item => {
if (item.Leavel < 4) {
hight++
}
if (item.Leavel != 3) {
mid++
}
if (item.Leavel >= 3) {
low++
}
})
if (hight == 12) {
this.isNoHight = true;
}
if (mid == 12) {
this.isNoMid = true;
}
if (low == 12) {
this.isNoLow = true;
}
// 综合特质等级侧面图
let leavelList = [];
this.scoreSummary.forEach((item, index) => {
if (index < 4) {
leavelList.push(item.Leavel)
}
})
this.data1 = leavelList;
// 内外向综合特质侧面图
this.data2 = [data.ScoreDetail[0].Leavel, data.ScoreDetail[1]
.Leavel, data.ScoreDetail[2].Leavel
];
// 人际关系综合特质侧面图
this.data3 = [data.ScoreDetail[3].Leavel, data.ScoreDetail[4]
.Leavel, data.ScoreDetail[5].Leavel
];
// 严谨性综合特质侧面图
this.data4 = [data.ScoreDetail[6].Leavel, data.ScoreDetail[7]
.Leavel, data.ScoreDetail[8].Leavel
];
// 开放性综合特质侧面图
this.data5 = [data.ScoreDetail[9].Leavel, data.ScoreDetail[10]
.Leavel, data.ScoreDetail[11].Leavel
];
this.initChart();
}
} else {
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
//更改对比图
getValue() {
//群体维度对比
api.getPersonTestGroupResult(this.params.year, this.params.term,this.params.schoolId, this.params.gradeid, this.params.classid, this.params.sex, this.params.departId,this.userId,this.params.recordId).then(res => {
if (res.Result >= 1) {
this.doChart(res.Data);
}
})
},
async initChart() {
let name = this.labelName1;
let legend = [name];
this.createdChart('charts1', '综合特质等级侧面图', ['内外向', '人际关系', '严谨性', '开放性'], legend, this.data1);
this.createdChart('charts2', '内外向综合特质侧面图', ['乐群性', '领导性', '社交性'], legend, this.data2);
this.createdChart('charts3', '人际关系综合特质侧面图', ['客观性', '顺从性', '亲和性'], legend, this.data3);
this.createdChart('charts4', '严谨性综合特质侧面图', ['坚毅性', '秩序性', '深思性'], legend, this.data4);
this.createdChart('charts5', '开放性综合特质侧面图', ['探究性', '变通性', '感觉性'], legend, this.data5);
},
//时间维度/群体维度对比
async doChart(DATA) {
let name1 = this.labelName1;
let name2 = this.labelName2;
let legend = [name1, name2];
let data1 = [],
data2 = [],
data3 = [],
data4 = [],
data5 = [];
if (DATA.result1.data != null) {
data1 = DATA.result1.data;
} else {
data1 = [0, 0, 0, 0];
}
if (DATA.result2.data != null) {
let dataScore = DATA.result2.data
data2 = [dataScore[0], dataScore[1], dataScore[2]];
data3 = [dataScore[3], dataScore[4], dataScore[5]];
data4 = [dataScore[6], dataScore[7], dataScore[8]];
data5 = [dataScore[9], dataScore[10], dataScore[11]];
} else {
data2 = [0, 0, 0];
data3 = [0, 0, 0];
data4 = [0, 0, 0];
data5 = [0, 0, 0];
}
this.createdChart('charts1', '综合特质等级侧面图', ['内外向', '人际关系', '严谨性', '开放性'], legend, this.data1, data1);
this.createdChart('charts2', '内外向综合特质侧面图', ['乐群性', '领导性', '社交性'], legend, this.data2, data2);
this.createdChart('charts3', '人际关系综合特质侧面图', ['客观性', '顺从性', '亲和性'], legend, this.data3, data3);
this.createdChart('charts4', '严谨性综合特质侧面图', ['坚毅性', '秩序性', '深思性'], legend, this.data4, data4);
this.createdChart('charts5', '开放性综合特质侧面图', ['探究性', '变通性', '感觉性'], legend, this.data5, data5);
},
//生成图表
async createdChart(EL, TITLE, CATEGORIES, LEGEND, DATA1, DATA2) {
let seriesDataAll = [{
name: LEGEND[0],
type: 'line',
data: DATA1
}];
if (DATA2) {
seriesDataAll.push({
name: LEGEND[1],
type: 'line',
data: DATA2
})
}
const option = {
tooltip: {
show:false,
trigger: 'axis'
},
label:{
show:true,
},
legend: {
// data: ['Email', 'Union Ads']
show: true,
data: LEGEND,
right: 4,
top: 4
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: CATEGORIES
},
yAxis: {
type: 'value',
max: 5
},
series: seriesDataAll
}
// chart 图表实例不能存在data里
if (EL == "charts1") {
this.option1 = option;
const chart = await this.$refs.charts1.init(echarts, "theme");
chart.clear();
chart.setOption(option)
} else if (EL == "charts2") {
this.option2 = option;
const chart = await this.$refs.charts2.init(echarts, "theme");
chart.clear();
chart.setOption( this.option2)
} else if (EL == "charts3") {
this.option3 = option;
const chart = await this.$refs.charts3.init(echarts, "theme");
chart.clear();
chart.setOption(this.option3)
} else if (EL == "charts4") {
this.option4 = option;
const chart = await this.$refs.charts4.init(echarts, "theme");
chart.clear();
chart.setOption(this.option4)
} else if (EL == "charts5") {
this.option5 = option;
const chart = await this.$refs.charts5.init(echarts, "theme");
chart.clear();
chart.setOption( this.option5)
}
},
goback() {
uni.navigateBack(-1);
},
showTipLayer(INDEX) {
switch (INDEX) {
case 1: {
this.layerTitile = "作答态度";
this.layerDesc =
"· 一致性分数代表了你的作答态度,也代表了测评是否更具有参考价值。<br>· 一致性分数越高代表你作答时越诚实认真,测评的结果也更能真实描述你的个性特质。";
break;
}
}
this.showTip = true;
},
}
}
</script>
<style lang="scss">
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
page {
background: #EEF1F8 url('#{$image-oss-url}/test_bg.png') no-repeat;
background-size: contain;
overflow-y:scroll;
}
</style>
<style lang="scss" scoped>
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
.vip-tip-block {
width: 650rpx;
height: 400rpx;
background: #fff url('#{$image-oss-url}/report-vip-tip.png') no-repeat;
background-size: 100%;
}
.tip-layer {
.title {
font-size: 36rpx;
color: #000000;
text-align: center;
font-weight: 600;
margin-bottom: 30rpx;
}
.desc {
font-size: 28rpx;
color: #666666;
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
}
.interest-report-wrap {
min-height: 100vh;
.head-bar {
position: relative;
text-align: center;
font-size: 36rpx;
font-weight: 600;
height: 60rpx;
line-height: 60rpx;
.go-back {
position: absolute;
left: 10rpx;
top: 0;
width: 60rpx;
height: 60rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
background-size: 38rpx 38rpx;
}
}
.content {
padding: 35rpx 20rpx 220rpx;
.section-block {
padding: 40rpx 30rpx 40rpx;
background: #fff;
border-radius: 12rpx;
margin-bottom: 20rpx;
overflow: hidden;
.s-line {
position: relative;
width: 630rpx;
margin: 15rpx auto 45rpx;
height: 2rpx;
background: #FAFAFA;
&:before {
content: "";
display: block;
position: absolute;
left: -56rpx;
top: -16rpx;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: #EEF1F8;
}
&::after {
content: "";
display: block;
position: absolute;
right: -56rpx;
top: -16rpx;
width: 32rpx;
height: 32rpx;
border-radius: 50%;
background: #EEF1F8;
}
}
.title {
display: flex;
align-items: center;
margin-bottom: 35rpx;
.name {
position: relative;
font-weight: 600;
font-size: 32rpx;
color: #000000;
z-index: 1;
&::after {
content: "";
display: block;
position: absolute;
bottom: -3rpx;
left: -6rpx;
width: calc(100% + 12rpx);
height: 12rpx;
background: #BBDCFF;
border-radius: 12rpx;
z-index: -1;
}
}
.tip-icon {
margin-left: 10rpx;
width: 56rpx;
height: 56rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAADMzMzPz8/Hx8fLy8vMzMzNzc3Nzc3KysrMzMzMzMzMzMzKysrLy8vMzMzMzMzMzMxTlLHLAAAAEHRSTlMA3xAgQFCPfzCfr+9gcL/P9mj/kgAAAQFJREFUKM9tUtsWwyAIUwS1um78/9fOFPB0l7woEAIi6QZikV7SH5Sa9UJu5Tt06A0H3WM9I2U0lnPgOjltPBDqYTHCj20to9Kl0HFQXQ7n0lSV8OkTirKUrK1j5SGW1QDv4h1Xo4sFsabaiNrKdWYx59Vb1ozjpdNTqjsBWCZIwQVlpMsygWmZaYDUVU9ruievnFJUE3uHo+3ZMfwCxm1Uh90siaHjINVX3E/VDsdwO1SioWI9O0oOXrgrKA6Ki1Xz8UWdabwYXwweeBrdB++VVCVewtHZdLW+P5tKio/ljzXZVvE1CfBEeJzCbeRYqA36XM2fzW2x1PX/0ncRppvjDWNoDuKTMIXYAAAAAElFTkSuQmCC") center no-repeat;
background-size: 50%;
border-radius: 50%;
}
}
.text-desc-wrap {
padding-bottom: 40rpx;
.row {
position: relative;
font-size: 28rpx;
color: #666666;
margin-bottom: 10rpx;
padding-left: 16rpx;
&:before {
position: absolute;
left: 0;
top: 16rpx;
content: "";
display: block;
width: 6rpx;
height: 6rpx;
background: #666;
border-radius: 50%;
}
.strong {
color: #1677ff;
font-weight: 600;
}
}
.empty-tip {
font-size: 28rpx;
color: #666666;
}
}
.score-item {
width: 606rpx;
padding: 25rpx 20rpx;
background: #F2F9FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E7F4FD;
background: #F2F9FF;
margin-bottom: 46rpx;
&.blue {
border: 2rpx solid #E7F4FD;
background: #F2F9FF;
}
&.purple {
border: 2rpx solid #ECEEFD;
background: #F7F7FF;
}
&.orange {
border: 2rpx solid #FDF1EC;
background: #FFFBF7;
}
&.green {
border: 2rpx solid #A5F3C9;
background: #F4FFF9;
}
.row {
display: flex;
align-items: center;
margin-bottom: 10rpx;
.name {
font-size: 32rpx;
color: #000000;
margin-right: 8rpx;
}
.level-label {
width: 96rpx;
height: 36rpx;
background: #1677ff;
border-radius: 8rpx 8rpx 8rpx 8rpx;
text-align: center;
line-height: 36rpx;
font-size: 20rpx;
color: #FFFFFF;
margin-right: 8rpx;
}
.score-label {
padding: 0 10rpx;
height: 36rpx;
background: #5A73FF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
text-align: center;
line-height: 36rpx;
font-size: 20rpx;
color: #FFFFFF;
}
}
.item-desc {
font-size: 28rpx;
color: #666666;
line-height: 42rpx;
}
}
.job-table {
border-left: 2rpx solid #EEF2FD;
border-top: 2rpx solid #EEF2FD;
margin-bottom: 40rpx;
border-radius: 4rpx;
width: 630rpx;
.tr {
display: flex;
.th {
width: 180rpx;
height: 72rpx;
font-size: 28rpx;
color: #666666;
text-align: center;
line-height: 72rpx;
background: #f6f9fe;
font-weight: 600;
border-right: 2rpx solid #EEF2FD;
border-bottom: 2rpx solid #EEF2FD;
&:nth-child(2) {
width: 450rpx;
}
}
.td {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 180rpx;
min-height: 80rpx;
font-size: 28rpx;
line-height: 42rpx;
color: #666666;
font-weight: 600;
border-right: 2rpx solid #EEF2FD;
border-bottom: 2rpx solid #EEF2FD;
&:nth-child(2) {
width: 410rpx;
padding: 20rpx 20rpx;
color: #3095F9;
}
.row {
display: block;
width: 100%;
.strong {
font-size: 28rpx;
color: #666666;
}
}
}
}
}
.chat-wrap {
width: 622rpx;
min-height: 452rpx;
border-radius: 12rpx;
margin: 0 14rpx;
box-shadow: 0 0 1rpx 14rpx #BBDCFF;
.row-item {
display: flex;
align-items: center;
justify-content: center;
justify-items: center;
.charts-box {
width: 100%;
height: 200px;
}
}
.chat {
height: 384rpx;
}
&.blue-bg {
box-shadow: 0 0 1rpx 14rpx #BBDCFF;
margin-bottom: 44rpx;
}
&.purple-bg {
box-shadow: 0 0 1rpx 14rpx #C7C7FF;
margin-bottom: 44rpx;
}
&.orange-bg {
box-shadow: 0 0 1rpx 14rpx #FFD4A8;
margin-bottom: 44rpx;
}
&.green-bg {
box-shadow: 0 0 1rpx 14rpx #8FDAB1;
margin-bottom: 44rpx;
}
.chat-title {
padding-top: 25rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 600;
color: #000000;
border-radius: 12rpx 12rpx 0 0;
}
}
.chat-tip {
font-size: 24rpx;
color: #999999;
text {
margin-right: 30rpx;
}
}
}
}
}
</style>