443 lines
16 KiB
Vue
443 lines
16 KiB
Vue
<template>
|
||
<view class="interest-report-wrap">
|
||
<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 "@/packageCa/apiCa/testManage.js";
|
||
import theme from '@/uni_modules/lime-echart/static/walden.json';
|
||
const echarts = require('../utilCa/echarts.min.js');
|
||
// // 注册主题
|
||
// 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> |