xjs
/
volunteer-4
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 性格测评报告页面编写和代码对接

master
xjs 2025-03-27 11:08:32 +08:00
parent 0f0bc49b72
commit 0fa672628e
8 changed files with 107 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages-evaluation-sub/evaluate/academicReport/CapabilityReport.vue
View File

@ -22,15 +22,17 @@
<view class="flex-1 overflow-auto pb-[30rpx] relative">
<!-- 顶部卡片 -->
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
<image src="/static/images/evaluate/bg.png" class="header-bg" />
<view
class="flex flex-col pt-[32rpx] mx-[24rpx] bg-[#fff] px-[30rpx] pt-[30rpx] border-class"
>
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">你的弱势能力为</text>
<text class="text-[#117CFC] text-[36rpx] z-2">
{{ studyRecord.title.replace('你的弱势能力：', '') }}
</text>
</view>
<!-- 雷达图占位 -->
<LineReport />
<LineReport :echart-data="studyRecord.linChart" :description="studyRecord.description" />
<AbilityDimension :report-items="studyRecord.reportItems" />
<!-- 底部AI智能顾问 -->
<!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
<image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
@ -42,6 +44,7 @@
<script setup lang="ts">
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
import LineReport from '../components/interestChart/LineReport.vue'
import AbilityDimension from '../components/AbilityDimension.vue'
import { getAbilityDimension } from '@/service/index/api'
@ -55,8 +58,8 @@ const handleBack = () => {
const studyRecord = ref({
description: '',
title: '',
linChart: {},
reportItem: { mainDomain: '', major: '', occupation: '' },
linChart: [],
reportItems: [],
hTag: '',
})
@ -69,8 +72,8 @@ onLoad((options) => {
studyRecord.value = resp.result as {
description: string
title: string
linChart: any
reportItem: { mainDomain: string; major: string; occupation: string }
linChart: any[]
reportItems: any[]
hTag: string
}
}
@ -117,4 +120,10 @@ onLoad((options) => {
border: 4rpx solid #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}
.border-class {
border-radius: 20rpx 20rpx 0 0;
padding-bottom: 42rpx;
margin-bottom: -14rpx;
}
</style>

25
src/pages-evaluation-sub/evaluate/components/AbilityDimension.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<view class="mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
<TitleBar title="能力纬度详细介绍" />
<view class="flex flex-col gap-[40rpx]">
<view v-for="(item, index) in reportItems" :key="index">
<view class="text-[32rpx] text-[#000]">{{ item.title }}</view>
<view class="text-[26rpx] text-[#666] mt-[6rpx]">{{ item.resolving }}</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import TitleBar from './TitleBar.vue'
defineProps({
reportItems: {
type: Array<any>,
default: () => [],
},
})
</script>
<style lang="scss" scoped></style>

12
src/pages-evaluation-sub/evaluate/components/InterestingThings.vue
View File

@ -1,15 +1,6 @@
<template>
<view class="interest-analysis mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
<view class="text-center mb-[24rpx]">
<view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<text class="text-[#1880FC] text-[36rpx] font-bold">兴趣分析与代表人物</text>
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<view
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
></view>
</view>
</view>
<TitleBar title="兴趣分析与代表人物" />
<text class="text-[26rpx] text-[#666] leading-[40rpx] mb-[30rpx] block">
{{ description }}
@ -41,6 +32,7 @@
<script lang="ts" setup>
import { getTagMapPerson } from '@/service/index/api'
import TitleBar from './TitleBar.vue'
const props = defineProps({
tag: {

15
src/pages-evaluation-sub/evaluate/components/IntroMajor.vue
View File

@ -1,16 +1,6 @@
<template>
<view class="suitable-careers mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
<view class="text-center mb-[24rpx]">
<view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<text class="text-[#1880FC] text-[36rpx] font-bold">推荐专业</text>
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<view
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
></view>
</view>
</view>
<view class="mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
<TitleBar title="推荐专业" />
<text class="text-[24rpx] text-[#999]">以下专业仅作为参考</text>
<view class="w-full">
@ -35,6 +25,7 @@
<script lang="ts" setup>
import { getTagMapPro } from '@/service/index/api'
import TitleBar from './TitleBar.vue'
const props = defineProps({
tag: {

25
src/pages-evaluation-sub/evaluate/components/TitleBar.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<view class="text-center mb-[24rpx]">
<view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<text class="text-[#1880FC] text-[36rpx] font-bold">{{ title }}</text>
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<view
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
></view>
</view>
</view>
</template>
<script lang="ts" setup>
defineProps({
title: {
type: String,
default: '',
},
})
</script>
<style lang="scss" scoped>
@import '@/pages-evaluation-sub/styles/parallelogram.scss';
</style>

16
src/pages-evaluation-sub/evaluate/components/interestChart/DependenciesChart.vue
View File

@ -2,16 +2,7 @@
<view
class="suitable-positions mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx] flex flex-col"
>
<view class="text-center mb-[24rpx]">
<view class="text-[32rpx] font-bold relative inline-flex pb-[10rpx] items-center">
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<text class="text-[#1880FC] text-[36rpx] font-bold">适合的岗位领域</text>
<view class="i-carbon-flash-filled h-[23rpx] w-[17rpx] text-[#1880FC]"></view>
<view
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
></view>
</view>
</view>
<TitleBar title="适合的岗位领域" />
<view class="flex justify-center items-center">
<view class="h-[146px] w-[265px] z-1">
@ -37,6 +28,7 @@
<script lang="ts" setup>
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
import TitleBar from '../TitleBar.vue'
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
const echart = ref(null)
@ -186,6 +178,4 @@ watch(
)
</script>
<style lang="scss" scoped>
@import '@/pages-evaluation-sub/styles/parallelogram.scss';
</style>
<style lang="scss" scoped></style>

4
src/pages-evaluation-sub/evaluate/components/interestChart/InterestRadar.vue
View File

@ -1,7 +1,5 @@
<template>
<view
class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center"
>
<view class="mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center">
<view class="h-[415rpx] w-full z-1">
<LEchart ref="echart"></LEchart>
</view>

58
src/pages-evaluation-sub/evaluate/components/interestChart/LineReport.vue
View File

@ -1,6 +1,12 @@
<template>
<view class="h-[368rpx] w-full z-1 bg-white">
<LEchart ref="echart"></LEchart>
<view class="bg-white mx-[24rpx] rounded-[20rpx] pb-[20rpx]">
<view class="px-[24rpx] h-[368rpx] z-1">
<LEchart ref="echart" :customStyle="`z-index:1;`"></LEchart>
</view>
<view class="bg-[#F5FAFF] px-[16rpx] pt-[20rpx] mx-[34rpx] pb-[26rpx]">
<view class="text-[#000] text-[30rpx] mb-[10rpx]">能力评测建议</view>
<view class="text-[26rpx] text-[#333]">{{ description }}</view>
</view>
</view>
</template>
@ -14,24 +20,19 @@ const props = defineProps({
type: Array,
default: () => [
{
name: ['Y', 'R', 'D', 'Z', 'K', 'S', 'L', 'N'],
value: [21, 27, 27, 24, 23, 28, 26, 16],
name: [],
value: [],
},
{
name: [
'言语语言智能',
'逻辑数理智能',
'视觉空间智能',
'身体动觉智能',
'音乐节奏智能',
'人际交往智能',
'自知自省智能',
'自然观察智能',
],
value: [37.7, 39.13, 41.21, 40.3, 39.13, 31.2, 41.21, 40.69],
name: [],
value: [],
},
],
},
description: {
type: String,
default: '',
},
})
onMounted(() => {
@ -59,19 +60,26 @@ const updateChart = () => {
},
grid: {
top: 40,
left: 0,
left: 10,
right: 20,
bottom: 0,
containLabel: true,
},
legend: {
data: ['我的数据', '平均数据'],
right: 10,
right: 'auto',
left: 'center',
top: 0,
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
},
},
xAxis: [
{
type: 'category',
data: (props.echartData[1] as { name: string[] }).name.map((item) =>
data: (props.echartData[1] as { name: string[] })?.name.map((item) =>
item.replace('智能', ''),
),
axisLine: {
@ -86,8 +94,8 @@ const updateChart = () => {
rotate: 45,
formatter: function (value) {
// 处理长文本
if (value.length > 2) {
return value.substring(0, 6) + '...'
if (value.length > 4) {
return value.replace('智能', '')
}
return value
},
@ -133,7 +141,7 @@ const updateChart = () => {
color: '#1580FF',
borderRadius: [4, 4, 0, 0],
},
data: (props.echartData[1] as { value: number[] }).value,
data: (props.echartData[1] as { value: number[] })?.value,
},
{
name: '平均数据',
@ -150,7 +158,7 @@ const updateChart = () => {
borderWidth: 2,
borderColor: '#fff',
},
data: (props.echartData[0] as { value: number[] }).value,
data: (props.echartData[0] as { value: number[] })?.value,
},
],
}
@ -160,6 +168,4 @@ const updateChart = () => {
}
</script>
<style scoped>
/* 自定义图表样式可以在这里添加 */
</style>
<style scoped></style>