素质测评,生涯规划,个人档案,职业库功能完成

This commit is contained in:
2025-11-05 11:09:27 +08:00
parent 328721e6e9
commit 17f393df45
54 changed files with 18573 additions and 17 deletions

View File

@@ -0,0 +1,32 @@
let opts = {
color: ["#1677ff"],
padding: [15,10,0,10],
enableScroll: false,
xAxis: {
disableGrid: true,
axisLineColor: "#EEEEEE",
},
legend: {
show: false,
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
gridColor: "#EEEEEE",
data: [{
max: 5,
min: 0,
axisLine: false,
title: "等级"
}]
},
extra: {
line: {
type: "straight",
width: 3,
activeType: "hollow"
}
}
}
export default opts

View File

@@ -0,0 +1,693 @@
<template>
<view class="contrast-box">
<view class="head-box">
<view class="desc">
<text class="icon"></text>
<view class="txt-item">
{{allOptionStr}}
</view>
</view>
<view class="btn" @click="showContrastLayer">
数据对比
</view>
</view>
<!-- 数据对比 -->
<uni-popup @change="popupChange" ref="pop_contrast" type="bottom">
<view class="search-content">
<view class="head-title">
<text>数据对比</text>
<view @click="closeDialog()" class="s_close"></view>
</view>
<view class="content" v-if="platformType!=1">
<view class="title">我的报告</view>
<view class="sel-box" @click="selTimeList(1)">
{{optionStr1}}
<view class="iocn"></view>
</view>
<view class="s-line" style="display:none;"><text>对比</text></view>
<view class="title">时间维度</view>
<view class="sel-box" @click="selTimeList(2)">
{{optionStr2}}
<view class="iocn"></view>
</view>
<!-- <view class="title">群体维度</view>
<view class="options">
<view class="item" :class="[schoolLevel == 1?'on':'', gradeShow?'':'disable']" v-on:click="selectSchoolLevel(1)" >班级</view>
<view class="item" :class="[schoolLevel == 2?'on':'', gradeShow?'':'disable']" v-on:click="selectSchoolLevel(2)">年级</view>
<view class="item" v-on:click="selectSchoolLevel(3)" :class="schoolLevel == 3?'on':''">学校</view>
</view>
<view class="title" style="padding-top: 10rpx;">受测对象</view>
<view class="options">
<view class="item" v-on:click="selectSex(1)" :class="sexType == 1?'on':''"></view>
<view class="item" v-on:click="selectSex(2)" :class="sexType == 2?'on':''"></view>
</view> -->
</view>
<view class="content" v-else>
<view class="title">我的报告</view>
<view class="sel-box" @click="selTimeList(1)">
{{optionStr1}}
<view class="iocn"></view>
</view>
<view class="s-line" style='position: relative;'><text>对比</text></view>
<view class="title">时间维度</view>
<view class="sel-box" @click="selTimeList(2)">
{{optionStr2}}
<view class="iocn"></view>
</view>
<!-- <view class="title">群体维度</view>
<view class="options">
<view v-for="(item, index) in departList" :key="index">
<view class="item" v-on:click="selectSchoolLevel(item)" :class="schoolLevel == item.DepartId?'on':''">
{{item.Name}}
</view>
</view>
</view>
<view class="title">受测对象</view>
<view class="options">
<view class="item" v-on:click="selectSex(1)" :class="sexType == 1?'on':''"></view>
<view class="item" v-on:click="selectSex(2)" :class="sexType == 2?'on':''"></view>
</view> -->
</view>
<view class="btn-wrap">
<view class="btn" v-on:click="confirmCompute">
确认对比
</view>
</view>
</view>
</uni-popup>
<uni-popup @change="popupChange" ref="pop_time" type="bottom">
<view class="search-content">
<view class="head-title">选择时间</view>
<!-- 第一个时间 -->
<view class="time-content" v-if="timeType == 1">
<view class="left">
<view class="time-item" :class="item.id == selYTItem1.id?'on':''" v-for="(item,index) in treeList" :key="index" @click="changeYearTrem(item,1)">{{item.label}}</view>
</view>
<view class="right">
<view class="time-item" :class="item.id == selRepItem1.id?'on':''" v-for="(item,index) in childrenList" :key="index" @click="changeRepTime(item,1)">{{item.label}}</view>
</view>
</view>
<!-- 第二个对比时间 -->
<view class="time-content" v-if="timeType == 2">
<view class="left">
<view class="time-item" :class="item.id == selYTItem2.id?'on':''" v-for="(item,index) in treeList" :key="index" @click="changeYearTrem(item,2)">{{item.label}}</view>
</view>
<view class="right">
<view class="time-item" :class="[item.id == selRepItem2.id?'on':'',item.disabled ?'disabled':'']" v-for="(item,index) in childrenList" :key="index" @click="changeRepTime(item,2)">{{item.label}}</view>
</view>
</view>
<view class="btn-wrap">
<view class="btn" v-on:click="comfirmTime">
确认选择
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import api from "@/apiCa/testManage.js";
export default {
props: {
testType: {
type: String,
default: "",
},
userId: {
type: String,
default: "",
},
recordId: {
type: Number,
default: 0,
}
},
data() {
return {
platformType: 0, //高校/普教
showContrast: false, //显示对比
showTime: false, //显示时间选择
treeList: [], //时间列表
childrenList: [],//时间子级
selYTItem1: {},//临时选中的学年1
selRepItem1: {},//临时选中的报告1
selYTItem2: {},//临时选中的学年2
selRepItem2: {},//临时选中的报告2
checkedRepItem1: {},//确认选中报告1
checkedRepItem2: {},//确认选中报告2
timeType: 1,//时间类型是报告时间1还是对比时间2
optionStr1: "",//我的报告展示字段
optionStr2: "",//我的报告展示字段
allOptionStr: "",//全部条件展示字段
schoolLevel: 0,//群体
sexType: 0, //1男2女
gradeShow: false,//是否分班
departName: "",
departList:[],//高校群体对象
}
},
watch: {
recordId: {
handler(val) {
console.log(val);
if(val > 0) {
//this.recordId = val;
this.getCareerYearAndTermListNew()
}
},
immediate: true
}
},
created() {
},
methods: {
closeDialog(){
this.$refs.pop_contrast.close();
},
popupChange(e) {
console.log('当前模式:' + e.type + ',状态:' + e.show)
if (!e.show) {
// 弹窗关闭时的处理逻辑
this.$emit("updateValue", true);
}
},
//改变报告时间
changeRepTime(ITEM,INDEX){
if(INDEX == 1){
this.selRepItem1 = ITEM;
}else {
if(ITEM.disabled){
return
}
this.selRepItem2 = ITEM;
}
},
//确认选择时间
comfirmTime(){
if(this.timeType == 1){
if(this.selRepItem1 == null){
uni.showToast({
title: "请先选择报告时间",
icon: "none"
})
return
}
// 选了我的报告
if(this.checkedRepItem1.id == this.selRepItem1.id){
console.log("选了一样");
this.optionStr1 = this.selYTItem1.label + '/' + this.selRepItem1.label;
this.checkedRepItem1 = this.selRepItem1;
this.$refs.pop_contrast.open('bottom') //底部弹出 //底部弹出
this.$emit("updateValue", false);
//this.showContrast = true;
}else {
//this.showContrast = false;
this.$refs.pop_contrast.close() //底部弹出
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const currentRoute = currentPage.route;
uni.redirectTo({
url: `/${currentRoute}?recordId=${this.selRepItem1.id}&year=${this.selRepItem1.Year}&term=${this.selRepItem1.Term}&testType=${this.testType}`
})
}
}else {
if(this.selRepItem2 == null){
uni.showToast({
title: "请先选择报告时间",
icon: "none"
})
return
}
//this.showContrast = true;
this.$refs.pop_contrast.open('bottom') //底部弹出
this.$emit("updateValue", false);
this.checkedRepItem2 = this.selRepItem2;
this.optionStr2 = this.selYTItem2.label + '/' + this.selRepItem2.label;
this.schoolLevel = 0;
this.sexType = 0;
}
//this.showTime = false;
this.$refs.pop_time.close();
},
//改变学年
changeYearTrem(ITEM,INDEX){
if(INDEX == 1){
this.selYTItem1 = ITEM;
this.selRepItem1 = {};
}else {
this.selYTItem2 = ITEM;
this.selRepItem2 = {};
}
this.childrenList = ITEM.children;
console.log(this.selYTItem2);
console.log(this.selRepItem2);
console.log(this.childrenList);
},
// 显示团队对比弹窗
showContrastLayer(){
this.timeType=1;
this.$refs.pop_contrast.open('bottom') //底部弹出
this.$emit("updateValue", false);
//this.showContrast = true;
},
// 获取报告时间列表
getCareerYearAndTermListNew(){
api.getCareerYearAndTermListNew(this.testType, this.userId).then(res => {
if (res.Result === 1) {
this.treeList = res.Data.DataList.TreeDataList;
this.platformType = res.Data.DataList.PlatformType;
if(this.platformType == 1){
this.departList = res.Data.DepartList;
}
this.schoolId = res.Data.DataList.SchoolId;
let list = JSON.parse(JSON.stringify(res.Data.DataList.TreeDataList));
list.forEach(item => {
if (item.children) {
item.children.forEach(child => {
if (child.id == this.recordId) {
this.selYTItem1 = item;
this.checkedRepItem1 = this.selRepItem1 = child;
this.childrenList = item.children;
this.allOptionStr = this.optionStr1 = item.label + '/' + child.label
if(child.GradeId == 0 && res.Data.DataList.PlatformType == 0){
this.gradeShow = false;
}else {
this.gradeShow = true;
}
}
});
}
});
} else {
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
//选时间
selTimeList(INDEX){
this.$refs.pop_time.open('bottom');
this.$refs.pop_contrast.close();
this.$emit("updateValue", false);
//this.showTime = true;
//this.showContrast = false;
this.timeType = INDEX;
if(INDEX == 1){
this.selRepItem1 = this.checkedRepItem1;
this.treeList.forEach(item => {
if (item.children) {
item.children.forEach(child => {
if (child.id == this.checkedRepItem1.id) {
this.selYTItem1 = item;
this.childrenList = item.children;
}
});
}
});
}else {
this.childrenList = []
this.selYTItem2 = [];
this.selRepItem2 = this.checkedRepItem2;
this.treeList.forEach(item => {
if (item.children) {
item.children.forEach(child => {
child.disabled = false;
if (child.id == this.checkedRepItem1.id) {
child.disabled = true;
}
if (this.checkedRepItem2 != null && child.id == this.checkedRepItem2.id) {
this.selYTItem2 = item;
this.childrenList = item.children;
}
});
}
});
}
},
// 关闭选时间
closeTime(){
this.$refs.pop_contrast.open('bottom');
this.$refs.pop_time.close();
//this.showContrast = true;
//this.showTime = false;
},
//选中群体维度
selectSchoolLevel(info) {
console.log(info);
if (this.platformType == 1) {
this.departName = info.Name;
//高校
this.schoolLevel = info.DepartId;
this.sexType = 0;
} else {
if(!this.gradeShow && info < 3){
return uni.showToast({
title: "当前学期未进行分班,无法进行对比",
icon: "none"
})
}
//普教
this.schoolLevel = info;
this.sexType = 0;
}
this.optionStr2 = "";
this.selYTItem2 = null;
this.selRepItem2 = null;
this.checkedRepItem2 = null;
// this.$forceUpdate();
},
// 选男女
selectSex(INDEX) {
if (this.schoolLevel == 0) {
return uni.showToast({
title: '请先选择群体维度',
icon: "none"
})
}
if (this.sexType == INDEX) {
this.sexType = 0;
} else {
this.sexType = INDEX;
}
},
//关闭弹窗团体对比
closeContrast() {
//this.showContrast = false;
this.$refs.pop_contrast.close();
},
//确定对比
confirmCompute() {
if(this.schoolLevel == 0 && this.checkedRepItem2 == null){
uni.showToast({
title: "请选择对比数据",
icon: "none"
})
return
}
//this.showContrast = false;
this.$refs.pop_contrast.close();
let name1 = this.checkedRepItem1.label;
let name2 = "";
let year2 = "";
let term2 = "";
if (this.schoolLevel == 0) {
name2 = this.checkedRepItem2.label;
year2 = this.checkedRepItem2.Year;
term2 = this.checkedRepItem2.Term;
}else {
if (this.platformType == 1) {
name2 = `${this.departName}${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
} else {
if (this.schoolLevel == 1) {
name2 = `班级${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
} else if (this.schoolLevel == 2) {
name2 = `年级${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
} else if (this.schoolLevel == 3) {
name2 = `学校${this.sexType == 1 ? '(男)' : this.sexType == 2 ? '(女)' : ''}`;
}
}
}
this.allOptionStr = '已对比 | '+ this.optionStr1;
let gradeid = 0,
classid = 0,
departId = 0,
recordId= 0;
if(this.schoolLevel == 0){
recordId = this.checkedRepItem2.id;
}else{
if (this.platformType == 1) {
//高校
departId = this.schoolLevel;
}else {
if (this.schoolLevel == 1) {
classid = this.checkedRepItem1.ClassId;
} else if (this.schoolLevel == 2) {
gradeid = this.checkedRepItem1.GradeId;
}
}
}
let data = {
year: this.checkedRepItem1.Year,
term: this.checkedRepItem1.Term,
year2,
term2,
schoolId: this.schoolId,
gradeid,
classid,
sex: this.sexType,
departId,
recordId,
name1,
name2
}
this.$emit('compareParameters',data)
},
}
}
</script>
<style lang="scss">
.uni-popup{z-index:9999 !important;}
.contrast-box {
.head-box {
display: flex;
align-items: center;
justify-content: space-between;
width: 666rpx;
height: 76rpx;
margin-bottom: 24rpx;
padding: 0 20rpx;
background: #E7F1FF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #FFFFFF;
.desc {
display: flex;
align-items: center;
.icon {
width: 28rpx;
height: 28rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHfSURBVEiJ1Va9btswEP5OlBNr01JAMgpUeYNm7FDAeoP2Ddq1UzK5Roc6Q6AoS7auzps4QDt0i4fu1lYVWThFP7Z4HSIpspC4cCMmyLeQR+nu4/GOvAOeAwYn+dQ9zWf/o0vtBSdIvE0KBpkvmfg7AKyY3i5T85eckLzRZS/NICvZnrBdze8kdMN8AWAj4V1gVfgkxFcwhqX8EcAFGeISYPl7tLtXb7jl2dZkJTww7FoyzFelLRsgzwm4tmu0NbcBMz6tVtiPx9Z5kvR8VoXPqvDjUe+oUKI+yjRDPa+P1AkSjwyx2IZQAW/+jHZ+3vd9EGbvlFIyHlsX1dqDPPznhpSSTU+1EjpBMiRDzEwTM3vCdXy1eljC7u/eJpSpiyXN+nPLyiMAiMcUaSeUE5IS2Guvaz1SN1yeuWF+9iiETpAMAT4AcNDZxd+E+y6+NsKrLztzYpwD6rD5gGtLGgC4TnuH7WqhM4aeZS0XbpitPZc6s9RD19ViE54macDvWRV+M47Pq1oQY7/qgZwg8ZwgGb44zl+XcvfVggjfSIgpAJAQ05Lg0gmSD43f1qpFTRiPrQhAtDWputGpxgpp1p8DHAEcNavFg9vEq8+9H7e6621iZ3BP89ngJJ92alQX/gLMKt2XTOFMygAAAABJRU5ErkJggg==") no-repeat;
background-size: 100%;
}
.txt-item {
width: 444rpx;
padding-left: 14rpx;
line-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 24rpx;
color: #1677ff;
}
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 160rpx;
height: 48rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
font-size: 24rpx;
color: #000000;
&::after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: 6rpx;
border-top: 12rpx solid #333;
border-left: 12rpx solid #fff;
border-right: 12rpx solid #fff;
}
}
}
.search-content {
width: 100%;
background: #fff;
border-top-left-radius: 28rpx;
border-top-right-radius: 28rpx;
overflow: hidden;
.head-title {
width: 100%;
height: 96rpx;
line-height: 96rpx;
text-align: center;
font-size: 32rpx;
color: #333;
font-weight:550;
margin-top:10rpx;
position:relative;
}
.content {
padding: 0 0 0 30rpx;
max-height: 800rpx;
overflow: auto;
.title {
font-size: 28rpx;
color: #333333;
padding: 30rpx 0 20rpx;
}
.sel-box {
display: flex;
align-items: center;
justify-content: space-between;
width: 646rpx;
height: 76rpx;
padding: 0 20rpx;
margin-bottom: 10rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #EEEEEE;
font-size: 28rpx;
color: #303133;
&::after {
content: "";
display: block;
width: 32rpx;
height: 32rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAOVJREFUWEftldENwiAQhg8mqaM4ifoCYQp1iqY8OYqbWAeBCIlNSEV6HCR9uT6Sy31ff+AQsPMnduYDC3ACnAAnkE3AWnt2zj2NMXOPQTWO4yClPGmt7+t+PwLf4hcAzN77Y6tE0g+894d1v2wC0zRdg+mtVSKFCyEuSqnHZgJLQasEBh5ZxVtAlcDCNwViQa1EDRwlUCNRC0cLYCQo8CqBkgQVXi2Qk4hrYcjEuQH/rlppmJHegvRgAsBAhZMSyMwJ0p8vfUgJpBIh9nduwmHfkCYBLKT7GegB7rIFPUR4CzgBTuAD9XGZISgQdkoAAAAASUVORK5CYII=") no-repeat;
background-size: 100%;
}
}
.s-line {
/*position: relative;*/
padding-top: 40rpx;
border-bottom: 2rpx dashed rgba(25,137,250,0.5);
margin-bottom: 30rpx;
width: calc(100% - 30rpx);
text {
position: absolute;
bottom: -30rpx;
left: 50%;
background: #fff;
z-index: 2;
transform: translateX(-50%);
display: block;
padding: 0 20rpx;
font-size: 36rpx;
color: rgba(25,137,250,0.5);
}
}
.options {
display: flex;
flex-wrap: wrap;
.v-line {
border-bottom: 1px dotted #f1ececb8;
margin: 26rpx 0;
}
.item {
position: relative;
min-width: 170rpx;
margin-right: 30rpx;
height: 76rpx;
text-align: center;
line-height: 76rpx;
background: #F3F4F6;
margin-bottom: 30rpx;
padding: 0 20rpx;
border-radius: 12rpx;
font-size: 28rpx;
color: #000000;
&.disable {
color: #C6C6C6;
background: #F8F8F8;
}
&.on {
background: #EDF6FF;
color: #1677ff;
}
}
}
}
.time-content {
background: #fff;
z-index: 9;
display: flex;
padding: 20rpx 30rpx 40rpx;
.left,
.right{
min-height: 400rpx;
overflow: auto;
.time-item {
position: relative;
line-height: 80rpx;
height: 80rpx;
font-size: 28rpx;
color: #333;
border-bottom: 2rpx solid #eee;
&.on {
color: #1b88ff;
&::after {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
content: "";
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAZCAMAAACM5megAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEUbiP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8biP8AAAAx8hE2AAAAGHRSTlMAH0f2c0SVAfc7bv6JI/hS+UhR+1D0jxRK42VSAAAAAWJLR0QZ7G61iAAAAAd0SU1FB+YKFBEcF+FCm4sAAABsSURBVCjPzdHHDoAwDANQs1cLlJn//1KGEIKqrY+QY/QOiQ2QiRgA4iTlRCTjJC9+QsqPSMVJ3ShGdCuiwgToegu5zrWQ+6MX8j39QMaby41MILoLmWC6JzKkgGFHI+voQKxGTLMshACrdu83CdwKBKKZxqUAAAAASUVORK5CYII=") no-repeat;
background-size: 100%;
display: block;
width: 35rpx;
height: 25rpx;
}
}
&.disabled {
color: #ddd;
}
}
}
.left {
width: calc(45% - 20rpx);
padding-left: 10rpx;
}
.right {
width: calc(55% - 20rpx);
padding-left: 10rpx;
}
}
.btn-wrap {
display: flex;
justify-content: center;
padding-top: 10rpx;
padding-bottom: 30rpx;
.btn {
width: 688rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
background: #1677ff;
font-size: 32rpx;
color: #fff;
border-radius: 60rpx;
}
}
}
}
.s_close{position:absolute;top:30rpx;right:6%;width:30rpx;height:30rpx;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjkzQkY4QkFCMjY0MTFGMDlGOThGMzcyM0VCRTJGMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjkzQkY4QkJCMjY0MTFGMDlGOThGMzcyM0VCRTJGMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGOTNCRjhCOEIyNjQxMUYwOUY5OEYzNzIzRUJFMkYyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGOTNCRjhCOUIyNjQxMUYwOUY5OEYzNzIzRUJFMkYyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvssjGYAAAO/SURBVHjatJf7a5V1HMef5bN2tduObjp1hMlOTbCpaKTifpI0b1EKXgo0U4Lw/0j8ZSoohkpFKjLvUYrWREX8Qa0oQaw5O7Yzt45jbW7u4nZ8f+R14MvDOdtz9PSB13jOs+37/n6u3+/Ji0aj2zzPaxenxF9i2Mu9lYo66BG/+foxT3SLAXFUtORY9AUxWywTM0WvKDHhWlEkqsSgaBD/5kj0Rdb/VKzms0U34bMjs6jYIvLFd+JBDoTfYc1FiJr9IS6PiUQiteTgZVEhyghHC/l41vDOFRvEKtbuE1fEAXHehBOEOErIJxL2TnFH9GcpmifeFl8gWsJ7E90lfhRtJhzXQ5xqnuR4Pk4kRbN4lIXwfLFZvC9e5d1ZPD2DQ0kTHtLDfUJbgrcW+smiXHSJfwj/SJZPIW0U68QrTni/EqdZ66mZcOrZiumuvRNviUIxXkwl17dpuUw2S2wVK4ia2UWxQ5yjZb10whbWBK2U74S9nJANsrG+NKJzaJkPxGuO6H7xfVA0KJyyNhEjVNWiQEwRlfRgM5tIVe+btMzH4iVhqftV7BQnMnVGOmEPgTjP1YS9HPFOejH1O6velY6nl8Qe8YOb06D5I+TsBq1hLbaENnuXdHSQ7/lMpAieXhffiOPpwhtW2CNk9fSyDYNixMsI9wREk4jWZ8pp2FC7BdcO3bRZFUyh1xOIfU2f/hem2f2QQ+EavV5BXoucGR/nYGnIdqaGtQHyGLRhp8pD22ihTtkMsUYsZKLlBTafz6ZaRxkyoUNti74h1lNcZeSwiYKz0L/O7ycz9c6FOdVG83i6+Fx8SAWn+nQ7g7+HaBTSbjbtHoo/M6QllMc1TKPVDA+zX8QhcZLPCTa0lApfyEk2gOdd2Xo8jTG4gQXNbjLwjzvz2oTvkYIaUlOF5/c5z4fCCtsCm8RH5NBjOOxDNBHo81YmWQH1UIhwhN5Pe3MNCk+lUDaSsyS7tlPmIIMknf2NeITQF7NWKf/TFqx2PxDez2ib8by7JXaHvHleZaN2YVhLy9WhUciVZ8D1eAzh/YRCqnIK6VtxmHCOZkN43uWEeyztVsKGYqlh43MbXMpBnvK0idl7aITwZrKfKT5bezHjdTmbsd6/YJVvHn/JH1Q69969hLfVy96SVHQ7ua4h7BVgvd/lc0cqdnJ6BJ7nq4zlspFRauFewDXqPSo84n6TiHEFfV5R9/BoJPePcTCPm2ivz2Fv0+YncYwLXa6snxFbRE9Pp8jiPvfeDg7x2P/wFbWPVitAx3L8+xMBBgBa0QNtbOSplwAAAABJRU5ErkJggg==") center no-repeat;
background-size:30rpx;
}
</style>

View File

@@ -0,0 +1,213 @@
<template>
<view class="box">
<view class="test-head">
<view class="test-name">
<view class="name">
{{reportTitle}}
</view>
<view class="time">
测评时间{{testTime}}
</view>
</view>
<view class="fun-btn">
<view class="fbtn" @click="playIntroduce" v-if="isIntroduce">
<text class="icon-1"></text>
<text class="name">测评介绍</text>
</view>
<view class="fbtn" @click="playVideo" v-if="isVideo">
<text class="icon-2"></text>
<text class="name">报告解读</text>
</view>
</view>
<!-- 报告解读播放 -->
<uni-popup @change="popupChange" ref="pop_video" type="center">
<view class="video-content">
<video id="visitorVideo" :src="videoUrlVisitor" controls autoplay="true"></video>
</view>
</uni-popup>
<!-- 测评介绍 -->
<uni-popup @change="popupChange" ref="pop_introduce" type="center">
<view class="img-content">
<image :src="introduceUrl" mode="widthFix"></image>
<image v-if="introduceUrl2 !='' " :src="introduceUrl2" mode="widthFix"></image>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
export default {
props: {
// 标题
reportTitle: {
type: String,
default: "",
},
// 时间
testTime: {
type: String,
default: "",
},
//是否测评介绍
isIntroduce: {
type: Boolean,
default: false
},
//是否报告解读
isVideo: {
type: Boolean,
default: false
},
videoUrl: {
type: String,
default: "",
},
//测评介绍图地址
introduceUrl: {
type: String,
default: "",
},
//测评介绍图地址
introduceUrl2: {
type: String,
default: "",
},
value: {
type: Boolean,
default: true,
},
},
data() {
return {
showIntroduce: false,
showVideo: false,
videoUrlVisitor: "",
}
},
methods: {
popupChange(e) {
console.log('当前模式:' + e.type + ',状态:' + e.show)
if (!e.show) {
// 弹窗关闭时的处理逻辑
this.$emit("updateValue", true);
}
},
//视频介绍
playVideo() {
this.videoUrlVisitor = this.videoUrl;
this.$refs.pop_video.open('center');
this.$emit("updateValue", false);
//this.showVideo = true;
},
//报告介绍
playIntroduce() {
this.$refs.pop_introduce.open('center');
this.$emit("updateValue", false);
//this.showIntroduce = true;
},
// showContrastLayer(){
// this.$emit('showParentContrastLayer');
// }
}
}
</script>
<style lang="scss">
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
.test-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 30rpx;
margin-bottom: 25rpx;
.test-name {
.name {
font-size: 36rpx;
color: #000000;
font-weight: 600;
margin-bottom: 15rpx;
}
.time {
font-size: 24rpx;
color: #20B664;
}
flex:1;
}
.fun-btn {
display: flex;
align-items: center;
.fbtn {
display: flex;
flex-direction: column;
align-items: center;
margin-left: 40rpx;
.icon-1 {
display: block;
width: 72rpx;
height: 72rpx;
background: url("#{$image-oss-url}/test/btn-1.png") no-repeat;
background-size: 100%;
}
.icon-2 {
display: block;
width: 72rpx;
height: 72rpx;
background: url("#{$image-oss-url}/test/btn-2.png") no-repeat;
background-size: 100%;
}
.name {
font-size: 20rpx;
color: #999;
margin-top: 8rpx;
}
}
}
}
.video-content {
padding: 0;
width: 710rpx;
background: #000;
video {
width: 100%;
// height: 400rpx;
}
}
.img-content {
display: flex;
justify-content: center;
height: 1200rpx;
overflow: auto;
image {
width: 690rpx;
}
}
.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;
}
}
}
</style>

View File

@@ -0,0 +1,767 @@
<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 "@/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>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,147 @@
[
{
"Name": "阅读理解",
"Desc": "阅读各类书籍文章。书写摘要。参加读书会讨论分享。将所读转换为简报、图画或影音。学好国文、英文。",
"Point": "我能从文章中了解其想表达的讯息或意涵,或能产生自己的观点。"
},
{
"Name": "口语辨识",
"Desc": "练习组织笔记。观察别人发言、专心听讲。看无字幕影片写摘要。",
"Point": "我能听懂别人口语的讯息,并实时反应。"
},
{
"Name": "口语表达",
"Desc": "掌握上台表达机会,观察别人讲话,参加演讲、辩论等活动,录像录音纪录增进表达技巧。",
"Point": "我能用口语清晰流畅的表达思想和情感。"
},
{
"Name": "写作表达",
"Desc": "撰写文章并投稿。为课业成果多写心得反思。写手帐。参加作文或写作比赛。参加校刊社或写作社团。",
"Point": "我能写出文意通顺、逻辑清晰的文章。"
},
{
"Name": "外语能力",
"Desc": "参加英语话剧或演讲比赛。阅读英文小说或看网络新闻。多听唱外国歌曲。用英文与同学交谈。参加交换学生。",
"Point": "我的英文能力听说读写都很好。"
},
{
"Name": "计算能力",
"Desc": "学好数学、练习口算加减乘除、常常练习计算题。",
"Point": "我能快速的使用加减乘除运算出正确结果。"
},
{
"Name": "逻辑推理",
"Desc": "学好数理化。讨论一个主题的定义、辩论对立、如何解释。撰写分析报告。",
"Point": "我能依据讯息或事情发展的趋势,归纳推理出合理的答案。"
},
{
"Name": "数学推理",
"Desc": "学好数学与统计。尝试分析资料。",
"Point": "我能选择正确的数学方法或公式来解决问题。"
},
{
"Name": "空间定向",
"Desc": "学好空间几何。观察实物或画立体图。了解图形的移动、分解与组合。平面与立体的转换。绘制学校小区地图。",
"Point": "我擅于观察空间方位,想象物体在不同方位的旋转样貌。"
},
{
"Name": "机械推理",
"Desc": "学好物理。各种工程师都需要机械推理能力。浏览在线机械开放课程。修理脚踏车或小家电。参加铁道迷社团。",
"Point": "我能了解机械与电子设备的运作方式,且能组装、调整或修理。"
},
{
"Name": "科学能力",
"Desc": "参与科展。参加科学营队或社团。关注科技发展。阅览科学网站或书籍。",
"Point": "我能运用科学规则和方法来解决问题。"
},
{
"Name": "操作控制",
"Desc": "学会骑脚踏车、动手完成生活科技作品、遥控无人机、控制机器手臂、使用电子绘图板。",
"Point": "我的手臂稳定、敏捷,能控制机器或车辆到精确位置,且对信号快速反应。"
},
{
"Name": "近观细察",
"Desc": "学习从顺序观察法、分步观察法、角度观察法去观察生活用品、科学实验,学会用书写或绘图来记录观察。",
"Point": "能够近距离看到细节。"
},
{
"Name": "程序设计",
"Desc": "参加基础信息相关课程,学习程序语言。参加大学信息营队。参观信息展览。",
"Point": "我会撰写计算机程序来解决学习或工作上的需要。"
},
{
"Name": "信息运用",
"Desc": "熟悉计算机软件操作,如文字处理和电子表格、影音剪辑、图像处理软件。参加信息检索竞赛。善用网络找数据。",
"Point": "我很能学习与使用新的软件或APP来解决问题。"
},
{
"Name": "排序分类",
"Desc": "凡举科学实验、工程、会计财金、统计精算等专业,皆需要排序分类的能力。整理书籍讲义与考卷。",
"Point": "我能将数据或物品排列顺序,或将其分门别类。"
},
{
"Name": "自然观察",
"Desc": "体验室外攀岩活动、参加童军社或是野外踏青社团。饲养昆虫或植物并记录。探访动物园、牧场或海洋博物馆。",
"Point": "我乐于欣赏自然现象,能分辨动植物差异,并探讨现象原因。"
},
{
"Name": "养育照护",
"Desc": "参与呼吸急救课程。研究疾病传播的过程。观察与照顾小动物。学好生物课程。多关注营养保健信息。",
"Point": "我对需要照顾的人或小动物能提供妥善的照顾。"
},
{
"Name": "助人服务",
"Desc": "参加慈善社团或活动。阅览与心理社会相关书籍或网站。参加服务性质志工。到餐饮业或休闲园区实习。",
"Point": "我会主动服务他人,帮助他们解决问题。"
},
{
"Name": "说服推广",
"Desc": "参加辩论社或比赛。加入广播社练习推广。在社团练习组织、筹备、规划宣传等工作。练习撰写营销活动企划。",
"Point": "我善于说服他人采纳我的意见或理念。"
},
{
"Name": "合作协调",
"Desc": "担任班级或社团干部。参与分工合作的团体任务。担任活动队长。练习分析问题。参加暑期实习生或志工。",
"Point": "我能掌握细节、依规则有系统地安排事情或分工,并完成任务。"
},
{
"Name": "社会觉察",
"Desc": "走访社会服务机构或公益组织如赡养中心、NGO机构。分析社会环境对人的影响。对社会时事发表自身观点。",
"Point": "我能观察出生活周边的变化、发生事情及其原因。"
},
{
"Name": "教学培训",
"Desc": "协助同学解决学习困难,设计学习活动活动,担任课辅小老师,观察老师的教学方法。",
"Point": "我能观察出生活周边的变化、发生事情及其原因。"
},
{
"Name": "美感鉴赏",
"Desc": "常与同学讨论作品,练习表达自己的想法,培养赏析能力。观看艺术相关专业的影片,多逛逛博物馆与画廊。",
"Point": "我能运用色彩、质感、和结构,来品鉴与沟通东西的质量。"
},
{
"Name": "绘图设计",
"Desc": "提升素描能力,透过各种可素材或载体练习并完成素描、绘画、插画、摄影、影片、海报等。",
"Point": "我能运用素描色彩图样来表达我的风格意念。"
},
{
"Name": "创作力",
"Desc": "累积作品量,阅读创意大师的创作生涯,多逛逛博物馆与画廊,观看艺术相关专业的影片。",
"Point": "能提出不寻常或聪明想法,创造方法解决问题。"
},
{
"Name": "表演能力",
"Desc": "选修表演艺术课程。参加戏剧表演或社团。现场欣赏话剧演出。",
"Point": "我能在舞台或传播媒体上表演戏剧、歌唱或舞蹈。"
},
{
"Name": "音乐能力",
"Desc": "加入学校的乐团或合唱团。时常听不同曲风的音乐。参加音乐表演或竞赛。多练习乐器演奏。多欣赏音乐表演。",
"Point": "我对音乐具有音感、节奏、表演或创作的能力。"
},
{
"Name": "肢体协调",
"Desc": "培养运动的习惯。体验不同运动。参加运动或舞蹈社团。自主身体保养与维护。观看运动赛事。",
"Point": "我的身体强韧,有耐力,灵活,平衡感良好,协调性佳。"
}
]

View File

@@ -0,0 +1,855 @@
<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="false" :videoUrl="videoUrl" :introduceUrl="introduceUrl" :introduceUrl2="introduceUrl2"></testHead>
<view class="s-line"></view>
<view class="title">
<view class="name">能力强</view>
</view>
<view class="code-value">
<text class="scort" v-text="advantage!=''?advantage:'无'"></text>
</view>
<view class="title">
<view class="name">能力中</view>
</view>
<view class="code-value">
<text class="scort" v-text="mid!=''?mid:'无'"></text>
</view>
<view class="title">
<view class="name">待加强</view>
</view>
<view class="code-value">
<text class="scort" v-text="low!=''?low:'无'"></text>
</view>
<view class="chat-wrap blue-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
语文相关能力得分
</view>
<view class="row-item"><l-echart ref="charts1" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap purple-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
数学相关能力得分
</view>
<view class="row-item"><l-echart ref="charts2" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap orange-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
科技相关能力得分
</view>
<view class="row-item"><l-echart ref="charts3" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap green-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
资讯相关能力得分
</view>
<view class="row-item"><l-echart ref="charts4" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap blue-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
人际相关能力得分
</view>
<view class="row-item"><l-echart ref="charts5" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap purple-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
美感相关能力得分
</view>
<view class="row-item"><l-echart ref="charts6" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap orange-bg" style="margin-bottom:68rpx;">
<view class="chat-title">
自然相关能力得分
</view>
<view class="row-item"><l-echart ref="charts7" class="charts-box"></l-echart>
</view>
</view>
<view class="chat-wrap green-bg">
<view class="chat-title">
艺能相关能力得分
</view>
<view class="row-item"><l-echart ref="charts8" class="charts-box"></l-echart>
</view>
</view>
</view>
<view class="section-block" >
<view class="title">
<view class="name">提升途径</view>
</view>
<view class="desc-item-wrap">
<view class="desc-item" v-for="(item,index) in wayData" :key="index">
<view class="name-block">
<view class="name">{{item.Name}}</view>
<view class="desc">{{item.Point}}</view>
</view>
<view class="list">
<view class="row">
<text class="strong">提升途径</text>
<text class="txt">{{item.Desc}}</text>
</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 "@/apiCa/testManage.js"
import wayData from "./multipleAbilityData.json";
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 {
platform: uni.getDeviceInfo().platform,
barHeight: wx.getWindowInfo().statusBarHeight,
introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/multipleAbilityTestReport-1.png",
introduceUrl2: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/multipleAbilityTestReport-2.png",
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/%E5%A4%9A%E5%85%83%E6%99%BA%E8%83%BD%E6%B5%8B%E8%AF%84%E8%A7%A3%E8%AF%BB1.16%E4%BF%AE%E6%94%B92.mp4",
testDate: "",
id: "",
wayData,
advantage: '',
mid: '',
low: "",
chartData1: {
categories: ["外语能力", "写作表达", "口语表达", "口语辨识", "阅读理解"],
series: [{
name: "",
data: []
}]
},
chartData2: {
categories: ["数学推理", "逻辑推理", "计算能力"],
series: [{
name: "",
data: []
}]
},
chartData3: {
categories: ["近观细察", "操作控制", "科学能力", "机械推理", "空间定向"],
series: [{
name: "",
data: []
}]
},
chartData4: {
categories: ["排序分类", "信息运用", "程序设计"],
series: [{
name: "",
data: []
}]
},
chartData5: {
categories: ["教学培训", "社会觉察", "合作协调", "说服推广", "助人服务"],
series: [{
name: "",
data: []
}]
},
chartData6: {
categories: ["创作力", "绘图设计", "美感鉴赏"],
series: [{
name: "",
data: []
}]
},
chartData7: {
categories: ["养育照护", "自然观察"],
series: [{
name: "",
data: []
}]
},
chartData8: {
categories: ["肢体协调", "音乐能力", "表演能力"],
series: [{
name: "",
data: []
}]
},
opts: {
color: ["#1677ff"],
padding: [10, 0, 0, 0],
enableScroll: false,
xAxis: {
disableGrid: true,
axisLineColor: "#EEEEEE",
fontSize: 12,
},
legend: {
show: false,
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle: true,
gridColor: "#EEEEEE",
splitNumber: 4,
data: [{
max: 12,
min: 0,
axisLine: false,
title: "等级"
}]
},
extra: {
line: {
type: "straight",
width: 3,
activeType: "hollow"
}
}
}, //图表配置
opts2: {},
opts3: {},
opts4: {},
result: [],
data1: [], //初始数据1
data2: [],
data3: [],
data4: [],
data5: [],
data6: [],
data7: [],
data8: [],
option1: {},
option2: {},
option3: {},
option4: {},
option5: {},
option6: {},
option7: {},
option8: {},
showIntroduce: false, // 测评介绍
testType: "-27",
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: {
//对比参数
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) {
let data = res.Data;
this.testDate = data.TestDate;
this.currentYear = data.Year;
this.currentTerm = data.Term;
this.recordId = data.RecordId;
// this.userId = data.UserId;
this.labelName1 = data.TestDate;
this.advantage = data.DimLevelList[0].DimStr;
this.mid = data.DimLevelList[1].DimStr;
this.low = data.DimLevelList[2].DimStr;
let list = data.DimList;
this.result = list;
this.initChart();
} else {
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
async initChart() {
let data1 = [],
data2 = [],
data3 = [],
data4 = [],
data5 = [],
data6 = [],
data7 = [],
data8 = [];
this.result.forEach(item => {
switch (item.Name) {
case "阅读理解":
case "口语表达":
case "写作表达":
case "外语能力": {
data1.push(item);
break
}
case "计算能力":
case "逻辑推理":
case "数学推理": {
data2.push(item);
break
}
case "空间定向":
case "机械推理":
case "科学能力":
case "操作控制":
case "近观细察": {
data3.push(item);
break
}
case "程序设计":
case "信息运用":
case "排序分类": {
data4.push(item);
break
}
case "自省觉察":
case "助人服务":
case "说服推广":
case "合作协调":
case "社会觉察":
case "教学培训": {
data5.push(item);
break
}
case "美感鉴赏":
case "绘图设计":
case "创作力": {
data6.push(item);
break
}
case "自然观察":
case "养育照护": {
data7.push(item);
break
}
case "表演能力":
case "音乐能力":
case "肢体协调": {
data8.push(item);
break
}
}
})
this.data1 = data1;
this.data2 = data2;
this.data3 = data3;
this.data4 = data4;
this.data5 = data5;
if (data5.length == 5) {
data5.push({
Name: "自省觉察",
Score: 0,
})
}
this.data6 = data6;
this.data7 = data7;
this.data8 = data8;
let name = this.labelName1;
let legend = [name];
this.createdChart('charts1', '语文相关能力得分', legend, data1);
this.createdChart('charts2', '数学相关能力得分', legend, data2);
this.createdChart('charts3', '科技相关能力得分', legend, data3);
this.createdChart('charts4', '资讯相关能力得分', legend, data4);
this.createdChart('charts5', '人际相关能力得分', legend, data5);
this.createdChart('charts6', '美感相关能力得分', legend, data6);
this.createdChart('charts7', '自然相关能力得分', legend, data7);
this.createdChart('charts8', '艺能相关能力得分', legend, data8);
},
//更改对比图
getValue() {
api.getMultipleAbilityGroupResult(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 doChart(DATA) {
let name1 = this.labelName1;
let name2 = this.labelName2;
let legend = [name1, name2];
let data = [];
DATA.forEach((item, index) => {
switch (index) {
case 0: {
data = this.data1;
break;
}
case 1: {
data = this.data2;
break;
}
case 2: {
data = this.data3;
break;
}
case 3: {
data = this.data4;
break;
}
case 4: {
data = this.data5;
if (item.data.length == 5) {
item.data.push(0)
}
break;
}
case 5: {
data = this.data6;
break;
}
case 6: {
data = this.data7;
break;
}
case 7: {
data = this.data8;
break;
}
}
this.createdChart(`charts${index+1}`, item.name, legend, data, item.data);
})
},
//生成图表
async createdChart(EL, TITLE, LEGEND, DATA1, DATA2) {
let categories = [];
let seriesData1 = [];
let seriesData2 = DATA2;
DATA1.forEach(item => {
categories.push(item.Name);
seriesData1.push(parseInt(item.Score));
})
let seriesDataAll = [{
name: LEGEND[0],
type: 'line',
data: seriesData1
}];
if (seriesData2) {
seriesDataAll.push({
name: LEGEND[1],
type: 'line',
data: seriesData2
})
}
const option = {
title: {
text: "",
textStyle: {
fontSize: 14
},
top: 10,
left: 10
},
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: categories
},
yAxis: {
type: 'value'
},
series: seriesDataAll
// series: [
// {
// type: 'line',
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// type: 'line',
// data: [220, 182, 191, 234, 290, 330, 310]
// }
// ]
}
// chart 图表实例不能存在data里
if (EL == "charts1") {
this.option1 = option;
const chart = await this.$refs.charts1.init(echarts, "theme");
chart.clear();
chart.setOption(this.option1 )
} 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)
} else if (EL == "charts6") {
this.option6 = option;
const chart = await this.$refs.charts6.init(echarts, "theme");
chart.clear();
chart.setOption(this.option6)
} else if (EL == "charts7") {
this.option7 = option;
const chart = await this.$refs.charts7.init(echarts, "theme");
chart.clear();
chart.setOption( this.option7)
} else if (EL == "charts8") {
this.option8 = option;
const chart = await this.$refs.charts8.init(echarts, "theme");
chart.clear();
chart.setOption(this.option8)
}
},
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 {
width: 690rpx;
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 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;
}
}
.code-value {
position: relative;
display: flex;
align-items: flex-end;
margin-bottom: 20rpx;
padding-top: 10rpx;
padding-bottom: 20rpx;
.scort {
font-size: 36rpx;
color: #3095F9;
font-weight: 600;
}
}
.chat-wrap {
width: 622rpx;
height: 448rpx;
border-radius: 12rpx;
margin: 0 14rpx;
box-shadow: 0 0 1rpx 14rpx #BBDCFF;
.row-item {
display: flex;
align-items: center;
.charts-box {
width: 100%;
height: 190px;
}
}
.chat {
height: 370rpx;
}
&.blue-bg {
box-shadow: 0 0 1rpx 14rpx #BBDCFF;
margin-bottom: 40rpx;
}
&.purple-bg {
box-shadow: 0 0 1rpx 14rpx #C7C7FF;
margin-bottom: 40rpx;
}
&.orange-bg {
box-shadow: 0 0 1rpx 14rpx #FFD4A8;
margin-bottom: 40rpx;
}
&.green-bg {
box-shadow: 0 0 1rpx 14rpx #8FDAB1;
}
.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;
}
}
.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;
}
}
.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%;
}
}
.desc-item-wrap {
.desc-item {
margin-bottom: 40rpx;
.name-block {
width: 590rpx;
padding: 20rpx;
margin-bottom: 20rpx;
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;
}
.desc {
font-size: 28rpx;
color: #1677ff;
line-height: 42rpx;
}
}
.list {
position: relative;
line-height: 44rpx;
width: 630rpx;
.row {
.strong {
font-size: 28rpx;
color: #333;
}
.txt {
font-size: 28rpx;
color: #666666;
}
}
}
}
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,448 @@
<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="chat-wrap">
<view class="row-item">
<l-echart ref="chartRef" class="charts-box"></l-echart>
</view>
</view>
<view class="title">
<view class="name">高分价值观及说明</view>
</view>
<view class="desc-item-wrap" v-if="tableData.length > 0">
<view class="desc-item" v-show="item.Desc != undefined && item.Desc != ''" v-for="(item,index) in tableData" :key="index">
<view class="name-block">
<view class="name">{{item.Name}}
<view class="label">高分</view>
</view>
<view class="desc">{{item.Desc}}</view>
</view>
</view>
</view>
<view class="desc-item-wrap" v-else>
暂无高分价值观
</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 "@/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,
showVideo: false,
showIntroduce: 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/%E5%B7%A5%E4%BD%9C%E4%BB%B7%E5%80%BC%E8%A7%82%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/workValuesTestReport.png",
testDate: "",
workValuesNameList: [
'利他主义',
'美的追求',
'创造发明',
'智力激发',
'成就感',
'独立自主',
'声望地位',
'管理权力',
'经济报酬',
'安全稳定',
'工作环境',
'上司关系',
'同事关系',
'生活方式的选择',
'多样变化'
], //
tableData: [],
// 柱状图
barOption: {
title: {
text: ''
},
legend: {
show: true,
},
label: {
show: true,
position: 'right'
},
tooltip: {
formatter: function(params) {
let result = params.seriesName + '<br>' + params.name + ' ' + params.data +
'分' // 获取横轴对应的数据作为提示信息的标题
return result
}
},
xAxis: {
type: 'value',
max: 12,
},
yAxis: {
inverse: true,
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'
// }
]
},
result: [],
testType: "17",
userId: 0,
currentYear: 0,
currentTerm: 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: {
//对比参数
opCompareParameters(value){
this.labelName1 = value.name1;
this.labelName2 = value.name2;
this.params = value;
this.getValue()
},
//获取报告结果
getTestRecord(currentYear, currentTerm,recordId) {
uni.showLoading({
title: "加载中"
})
api.workValuesResult(currentYear, currentTerm,recordId).then(res => {
uni.hideLoading();
if (res.Result === 1) {
if (res.Data.TestResult != null) {
let data = res.Data;
this.testDate = data.TestDate;
let descList = data.Desc;
let scoreList = data.TestResult;
this.result = scoreList;
this.currentYear = data.Year;
this.currentTerm = data.Term;
this.recordId = data.RecordId;
this.userId = data.UserId;
this.labelName1 = data.TestDate;
this.workValuesNameList.forEach((item, index) => {
scoreList.forEach(ritem => {
if (index + 1 == Number(ritem.Title)) {
ritem.Name = item;
}
})
})
scoreList.forEach(item => {
item.Desc = "";
descList.forEach(ritem => {
if (Number(item.Title) == ritem.TitleId) {
item.Desc = ritem.Title;
}
})
})
console.log(scoreList)
this.tableData = scoreList;
this.initChart();
}
} else {
uni.showToast({
title: res.Message,
icon: "none"
})
}
})
},
//更改对比图
getValue() {
//群体维度对比
api.getWorkValuesTestGroupResult(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 initChart() {
let arr = [];
this.result.forEach(item => {
arr.push(item.Score)
})
this.barOption.series = {
name: this.labelName1,
data: arr,
type: "bar",
barWidth: 10
}
// chart 图表实例不能存在data里
const chart = await this.$refs.chartRef.init(echarts, "theme");
chart.clear();
chart.setOption(this.barOption)
},
//时间维度/群体维度对比
async doChart(DATA) {
let arr = [];
this.result.forEach(item => {
arr.push(item.Score)
})
this.barOption.series = [{
name: this.labelName1,
data: arr,
type: 'bar',
barWidth: 10
},
{
name: this.labelName2,
data: DATA,
type: 'bar',
barWidth: 10
},
];
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%;
}
.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: 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;
}
}
.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%;
}
}
.chat-wrap {
position: relative;
z-index: 1;
.row-item {
display: flex;
align-items: center;
.charts-box {
width: 100%;
height: 600px;
}
}
}
.desc-item-wrap {
.desc-item {
margin-bottom: 30rpx;
.name-block {
width: 590rpx;
padding: 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 {
width: 60rpx;
height: 36rpx;
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;
}
}
}
}
}
}
}
</style>
<style>
.lime-echart__canvas {
position: absolute;
top: 0; /* 根据需要调整 */
left: 0; /* 根据需要调整 */
z-index: 1 !important; /* 根据需要调整 */
}
</style>