Files
ks-app-employment-service/packageCa/testReport/generalCareerTestReport.vue
2025-11-07 18:38:01 +08:00

767 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 @updateValue="handleChildValueChange" :testType="testType" :userId="userId" :recordId="recordId" @compareParameters="opCompareParameters"></contrastBox>
<view class="section-block">
<testHead :reportTitle="'通用(职业)能力测评报告'" :testTime="testDate" :isIntroduce="false" :isVideo="false" :videoUrl="videoUrl" :introduceUrl="introduceUrl" ></testHead>
<view class="s-line"></view>
<view class="title">
<view class="name">非常优秀</view>
</view>
<view class="code-value">
<text class="scort" v-text="hightStr==''?'无':hightStr"></text>
</view>
<view class="title">
<view class="name">具有优势</view>
</view>
<view class="code-value">
<text class="scort" v-text="goodStr==''?'无':goodStr"></text>
</view>
<view class="title">
<view class="name">中等</view>
</view>
<view class="code-value">
<text class="scort" v-text="midStr==''?'无':midStr"></text>
</view>
<view class="title">
<view class="name">需要加强</view>
</view>
<view class="code-value">
<text class="scort" v-text="needStr==''?'无':needStr"></text>
</view>
<view class="title">
<view class="name">亟需加强</view>
</view>
<view class="code-value">
<text class="scort" v-text="lowStr==''?'无':lowStr"></text>
</view>
<view class="chat-wrap">
<view class="row-item"><l-echart ref="chartRef" class="charts-box"></l-echart>
</view>
</view>
</view>
<view class="section-block" style="margin-top: -116rpx;">
<view class="title">
<view class="name">测评建议</view>
</view>
<view class="desc-item-wrap">
<view class="desc-item" v-for="(item,index) in list" :key="index">
<view class="name-block" :class="'level-' + item.Level">
<view class="name">{{item.Name}}
<view class="label">{{item.LevelStr}}</view>
</view>
<view class="desc">{{item.Desc}}</view>
</view>
<view class="list" :class="item.showMore?'more':''">
<view class="row">
<text class="strong">提升途径</text>
<text class="txt">{{item.Suggest}}</text>
</view>
<view class="more-btn" @click="changeMore(index)"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import testHead from "@/packageCa/testReport/components/testHead.vue"
import contrastBox from "@/packageCa/testReport/components/contrastBox.vue"
import api from "@/packageCa/apiCa/testManage.js";
import theme from '@/uni_modules/lime-echart/static/walden.json';
const echarts = require('../../uni_modules/lime-echart/static/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 {
barHeight: wx.getWindowInfo().statusBarHeight,
videoUrl: "",
introduceUrl: "",
id: "",
testDate: "",
hightStr: "",
goodStr: "",
midStr: "",
needStr: "",
lowStr: "",
list: [],
result: [],
// 柱状图
barOption: {
title: {
text: ''
},
legend: {
show: true,
},
label: {
show: true,
position: 'right'
},
tooltip: {
className: 'echarts-tooltip',
show: false,
formatter: function(params) {
let result = params.seriesName + '<br>' + params.name + ' ' + params.data +
'分' // 获取横轴对应的数据作为提示信息的标题
return result
}
},
xAxis: {
type: 'value',
max: 5,
},
yAxis: {
type: 'category',
data: ['信息应用', '责任纪律', '创新发展', '问题解决', '团队合作', '人际互动', '持续学习', '沟通表达']
},
grid: {
left: '0%', // 根据实际情况调整
// right: '4%',
// bottom: '3%',
containLabel: true
},
series: [
// {
// name: '2012',
// data: [120, 200, 150, 80, 70, 110, 130,50],
// type: 'bar'
// },
// {
// name: '2011',
// data: [120, 200, 150, 80, 70, 110, 130,50],
// type: 'bar'
// }
]
},
testType: "-28",
userId: 0,
currentYear: 0,
currentTerm: 0,
recordId: 0,
labelName1: "",//表值1
labelName2: "",//表值2
}
},
onLoad(e) {
this.id = e.id;
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: {
changeMore(INDEX) {
this.list[INDEX].showMore = !this.list[INDEX].showMore
this.$forceUpdate();
},
//对比参数
opCompareParameters(value){
this.labelName1 = value.name1;
this.labelName2 = value.name2;
this.params = value;
this.getValue()
},
//获取报告结果
getTestRecord(currentYear, currentTerm,recordId) {
uni.showLoading({
title: "加载中"
})
api.queryCustomTestResult(this.testType, currentYear, currentTerm,recordId).then(res => {
uni.hideLoading();
if (res.Result === 1) {
this.testDate = res.Data.TestDate;
let list = res.Data.DimList;
this.result = list;
this.currentYear = res.Data.Year;
this.currentTerm = res.Data.Term;
this.recordId = res.Data.RecordId;
// this.userId = data.UserId;
this.labelName1 = res.Data.TestDate;
let hightStr = "",
goodStr = "",
midStr = "",
needStr = "",
lowStr = "";
list.find(item => {
item.showMore = false;
if (item.Level == 1) {
hightStr += item.Name + '、'
} else if (item.Level == 2) {
goodStr += item.Name + '、'
} else if (item.Level == 3) {
midStr += item.Name + '、'
} else if (item.Level == 4) {
needStr += item.Name + '、'
} else {
lowStr += item.Name + '、'
}
});
this.hightStr = hightStr == '' ? '' : hightStr.substring(0, hightStr.length - 1);
this.goodStr = goodStr == '' ? '' : goodStr.substring(0, goodStr.length - 1);
this.midStr = midStr == '' ? '' : midStr.substring(0, midStr.length - 1);
this.needStr = needStr == '' ? '' : needStr.substring(0, needStr.length - 1);
this.lowStr = lowStr == '' ? '' : lowStr.substring(0, lowStr.length - 1);
this.list = list;
this.initChart();
} else {
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
async initChart() {
let arr = [];
this.result.forEach(item => {
arr.push(item.Score)
})
this.barOption.series = {
name: this.labelName1,
data: arr,
type: "bar"
}
// chart 图表实例不能存在data里
const chart = await this.$refs.chartRef.init(echarts, "theme");
chart.clear();
chart.setOption(this.barOption)
},
//更改对比图
getValue() {
api.getBeCurrentJobGroupResult(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.data);
}
})
},
//时间维度/群体维度对比
async doChart(DATA) {
let name1 = this.labelName1;
let name2 = this.labelName2;
let arr = [];
this.result.forEach(item => {
arr.push(item.Score)
})
let arr2 = [];
DATA.forEach(item => {
arr2.push(item.Score)
})
this.barOption.series = [{
name: name1,
data: arr,
type: 'bar'
},
{
name: name2,
data: arr2,
type: 'bar'
},
];
const chart = await this.$refs.chartRef.init(echarts, "theme");
chart.clear();
chart.setOption(this.barOption)
},
goback() {
uni.navigateBack(-1);
}
}
}
</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;
}
}
}
.img-content {
display: flex;
justify-content: center;
height: 1200rpx;
overflow: auto;
image {
width: 690rpx;
}
}
.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;
}
}
.video-content {
padding: 0;
width: 710rpx;
background: #000;
video {
width: 100%;
}
}
.content {
padding: 35rpx 20rpx 220rpx;
.section-block {
padding: 40rpx 30rpx 20rpx;
background: #fff;
border-radius: 12rpx;
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: 30rpx;
.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;
}
}
}
.code-value {
position: relative;
display: flex;
align-items: flex-end;
padding-bottom: 40rpx;
.scort {
font-size: 36rpx;
color: #1677ff;
font-weight: 600;
}
}
.job-table {
border-left: 2rpx solid #EEF2FD;
border-top: 2rpx solid #EEF2FD;
border-right: 2rpx solid #EEF2FD;
border-radius: 4rpx;
width: 630rpx;
.tr {
display: flex;
border-bottom: 2rpx solid #EEF2FD;
&:nth-child(2n+1) {
background: #F6F9FE;
}
.th {
width: 469rpx;
height: 72rpx;
font-size: 24rpx;
color: #666666;
text-align: center;
line-height: 72rpx;
background: #f6f9fe;
&:nth-child(1) {
width: 132rpx;
}
}
.td {
display: flex;
align-items: center;
width: 459rpx;
padding: 0 20rpx;
height: 220rpx;
font-size: 28rpx;
color: #333333;
line-height: 42rpx;
&:nth-child(1) {
width: 132rpx;
padding: 0;
color: #666666;
justify-content: center;
}
}
}
}
.chat-wrap {
position: relative;
// padding: 15rpx 0;
// margin: 30rpx 0 0;
z-index: 1;
// &:before {
// position: absolute;
// left: 118rpx;
// top: 0;
// content: "";
// display: block;
// width: 2rpx;
// height: 100%;
// background: #c9cdd4;
// }
.row-item {
display: flex;
align-items: center;
.charts-box {
width: 100%;
height: 400px;
}
.name {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100rpx;
height: 60rpx;
font-size: 24rpx;
color: #666666;
margin-right: 20rpx;
}
// .bar-wrap {
// display: flex;
// align-items: center;
// width: 488rpx;
// .bar {
// position: relative;
// border-radius: 0 8rpx 8rpx 0rpx;
// height: 16rpx;
// background: linear-gradient(to left, #1677ff 0%, rgba(25, 137, 250, 0.5) 100%);
// .score {
// position: absolute;
// right: -33rpx;
// top: -9rpx;
// font-size: 24rpx;
// margin-left: 8rpx;
// color: #2E94FA;
// }
// }
// }
}
.level-desc {
position: absolute;
left: 110rpx;
bottom: -54rpx;
font-size: 24rpx;
color: #666666;
display: flex;
align-items: center;
z-index: -1;
.item-1 {
margin-right: 82rpx;
}
.item-2,
.item-3,
.item-4,
.item-5 {
position: relative;
margin-right: 67rpx;
width: 30rpx;
text-align: center;
&::after {
position: absolute;
left: 50%;
top: -408rpx;
transform: translateX(-50%);
content: "";
display: block;
width: 0;
height: 388rpx;
border-left: 2rpx dashed #E5E6EB;
}
}
.item-6 {
position: relative;
width: 30rpx;
text-align: center;
&::after {
position: absolute;
left: 50%;
top: -408rpx;
transform: translateX(-50%);
content: "";
display: block;
width: 0;
height: 388rpx;
border-left: 2rpx dashed #E5E6EB;
}
}
}
}
.desc-item-wrap {
.desc-item {
margin-bottom: 40rpx;
.name-block {
width: 590rpx;
padding: 25rpx 20rpx;
margin-bottom: 25rpx;
background: #F2F9FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E7F4FD;
.name {
display: flex;
align-items: center;
font-size: 32rpx;
color: #000000;
margin-bottom: 15rpx;
.label {
height: 36rpx;
padding: 0 15rpx;
background: #1677ff;
border-radius: 8rpx 8rpx 8rpx 8rpx;
text-align: center;
line-height: 36rpx;
font-size: 20rpx;
margin-left: 10rpx;
color: #FFFFFF;
}
}
.desc {
font-size: 28rpx;
color: #666666;
line-height: 42rpx;
}
&.level-1 {
background: #F2F9FF;
.name {
.label {
background: #1677ff;
}
}
}
&.level-2 {
background: #F7F7FF;
border: 2rpx solid #ECEEFD;
.name {
.label {
background: #7C7CFF;
}
}
}
&.level-3 {
background: #FFFBF7;
border: 2rpx solid #FDF1EC;
.name {
.label {
background: #FF9E3D;
}
}
}
&.level-4 {
background: #F7FFF9;
border: 2rpx solid #C1EDC9;
.name {
.label {
background: #20B664;
}
}
}
&.level-5 {
background: #FFF9F7;
border: 2rpx solid #FFD5D5;
.name {
.label {
background: #FC503C;
}
}
}
}
.list {
position: relative;
height: 83rpx;
line-height: 44rpx;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
.more-btn {
position: absolute;
right: 30rpx;
top: 20rpx;
width: 44rpx;
height: 44rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAG+SURBVFiF7ZjPTcMwFId/dlEPPXWEbABMAN2gbNCeLJ8oEzSdIOIUOZd2A2CDMgFs0IwAA+SZSwNJiN20TlKB/J2ivMTvp6dPzh/A4/F4/hXMVIiiaDwcDgPO+bjPQAAgpdyaasbASqkdgKCDPE14F0Jc1xW45abeJ1sgMBUuTAUiuuOc33QS5wBE9HqOvh5PH9i2tQWA+x6zFNkIIVZ1BeMuASDqKEwTQgBHBw4BzNrP0ojHM/X1eDx/HuuDgzF2mWXZSkqZ9hEmSZIrrfWSiF6klJu6a2zvw5HWesY53ymllt1E/EEptdBavwGYcs7XputsD45nANP9cZgkSdDFtKMoGo9Go3WhV967FqMSALCfbFg4lRLRpK3QewWeUP7CCE3vEYBdCQghVkQ0AZAHDNpSpKBAHjYlooktLHBgwjlxHAeDwWCttb79vpGxzSmK1CnAGNtmWTZvslajwDmuipyiQBWrElVcFDlVgSpHTTjnGEVcFWglcM4hRdpQoIpTYACI4/h2v9GXQgH4RPmrJSWiue03VBOcAwP1ipSaOCjway3XBYrUKAI4KlCl1cBASZEPInpwVcDj8XiO4wvpvvJkdM3Z9AAAAABJRU5ErkJggg==") no-repeat;
background-size: 100%;
transition: transform .8s;
}
.row {
position: relative;
width: 536rpx;
.strong {
font-size: 28rpx;
color: #333;
}
.txt {
font-size: 28rpx;
color: #666666;
}
}
&.more {
overflow: inherit;
display: block;
height: 100%;
.more-btn {
transform: rotate(180deg);
}
}
}
}
}
}
}
}
.lime-echart {
z-index: 10 !important;
}
</style>