feat: 更新图表
parent
be95331f42
commit
0f0bc49b72
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { aiPreview, getBatchData } from '@/service/index/api'
|
||||
import { aiPreview } from '@/service/index/api'
|
||||
|
||||
import lEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
|
||||
import { renderEchart } from './echartRender'
|
||||
|
|
@ -98,6 +98,12 @@ const navigatorTo = () => {
|
|||
url: '/pages-sub/home/wishesList/index?typeName=智能填报&editType=add',
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (echart.value) {
|
||||
echart.value.dispose()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="flex flex-col h-screen relative custom-bg">
|
||||
<Navbar
|
||||
safeAreaInsetTop
|
||||
:bordered="false"
|
||||
leftArrow
|
||||
@clickLeft="handleBack"
|
||||
bg-color="transparent"
|
||||
>
|
||||
<template #title>
|
||||
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">性格测评报告</text>
|
||||
</template>
|
||||
</Navbar>
|
||||
|
||||
<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" />
|
||||
<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 />
|
||||
<!-- 底部AI智能顾问 -->
|
||||
<!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
|
||||
<image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
|
||||
<text class="text-[#117CFC] text-[26rpx]">智能AI顾问</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
|
||||
import LineReport from '../components/interestChart/LineReport.vue'
|
||||
|
||||
import { getAbilityDimension } from '@/service/index/api'
|
||||
|
||||
const pageType = ref(0)
|
||||
const pageId = ref(0)
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const studyRecord = ref({
|
||||
description: '',
|
||||
title: '',
|
||||
linChart: {},
|
||||
reportItem: { mainDomain: '', major: '', occupation: '' },
|
||||
hTag: '',
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
pageType.value = +options.type
|
||||
pageId.value = options.id
|
||||
|
||||
getAbilityDimension({ ScaleId: pageId.value }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
studyRecord.value = resp.result as {
|
||||
description: string
|
||||
title: string
|
||||
linChart: any
|
||||
reportItem: { mainDomain: string; major: string; occupation: string }
|
||||
hTag: string
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-bg {
|
||||
background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
|
||||
}
|
||||
:deep(.icon-class) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
width: calc(100% - 80rpx);
|
||||
height: 244rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
font-size: 24rpx;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.position-tag {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.avatar-item image {
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="flex flex-col h-screen relative custom-bg">
|
||||
<Navbar
|
||||
safeAreaInsetTop
|
||||
:bordered="false"
|
||||
leftArrow
|
||||
@clickLeft="handleBack"
|
||||
bg-color="transparent"
|
||||
>
|
||||
<template #title>
|
||||
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">性格测评报告</text>
|
||||
</template>
|
||||
</Navbar>
|
||||
|
||||
<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" />
|
||||
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的兴趣类型为</text>
|
||||
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
|
||||
</view>
|
||||
<!-- 雷达图占位 -->
|
||||
<CharacterChart :linChart="studyRecord.linChart" :description="studyRecord.description" />
|
||||
|
||||
<DependenciesChart
|
||||
:mainDomain="studyRecord.reportItem.mainDomain"
|
||||
:major="studyRecord.reportItem.major"
|
||||
:occupation="studyRecord.reportItem.occupation"
|
||||
/>
|
||||
|
||||
<!-- 底部AI智能顾问 -->
|
||||
<!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
|
||||
<image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
|
||||
<text class="text-[#117CFC] text-[26rpx]">智能AI顾问</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
|
||||
import CharacterChart from '../components/interestChart/CharacterChart.vue'
|
||||
import DependenciesChart from '../components/interestChart/DependenciesChart.vue'
|
||||
|
||||
import { getMBTIDimension } from '@/service/index/api'
|
||||
|
||||
const pageType = ref(0)
|
||||
const pageId = ref(0)
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const studyRecord = ref({
|
||||
description: '',
|
||||
title: '',
|
||||
linChart: {},
|
||||
reportItem: { mainDomain: '', major: '', occupation: '' },
|
||||
hTag: '',
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
pageType.value = +options.type
|
||||
pageId.value = options.id
|
||||
|
||||
getMBTIDimension({ ScaleId: pageId.value }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
studyRecord.value = resp.result as {
|
||||
description: string
|
||||
title: string
|
||||
linChart: any
|
||||
reportItem: { mainDomain: string; major: string; occupation: string }
|
||||
hTag: string
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-bg {
|
||||
background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
|
||||
}
|
||||
:deep(.icon-class) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
width: calc(100% - 80rpx);
|
||||
height: 244rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
font-size: 24rpx;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.position-tag {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.avatar-item image {
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="flex flex-col h-screen relative custom-bg">
|
||||
<Navbar
|
||||
safeAreaInsetTop
|
||||
:bordered="false"
|
||||
leftArrow
|
||||
@clickLeft="handleBack"
|
||||
bg-color="transparent"
|
||||
>
|
||||
<template #title>
|
||||
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">兴趣测评报告</text>
|
||||
</template>
|
||||
</Navbar>
|
||||
|
||||
<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" />
|
||||
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的兴趣类型为</text>
|
||||
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
|
||||
</view>
|
||||
<!-- 雷达图占位 -->
|
||||
<InterestRadar :picData="studyRecord.picCharts" />
|
||||
<!-- 类型说明 -->
|
||||
<TypeDetail :reportItems="studyRecord.reportItems" />
|
||||
|
||||
<!-- 适合职业 -->
|
||||
<IntroMajor :tag="studyRecord.hTag" />
|
||||
<!-- 兴趣分析与代表人物 -->
|
||||
<InterestingThings :tag="studyRecord.hTag" :description="studyRecord.description" />
|
||||
|
||||
<!-- 底部AI智能顾问 -->
|
||||
<!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
|
||||
<image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
|
||||
<text class="text-[#117CFC] text-[26rpx]">智能AI顾问</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
|
||||
import TypeDetail from '../components/TypeDetail.vue'
|
||||
import InterestRadar from '../components/interestChart/InterestRadar.vue'
|
||||
import IntroMajor from '../components/IntroMajor.vue'
|
||||
|
||||
import { getHollandDimensionInfo } from '@/service/index/api'
|
||||
import InterestingThings from '../components/InterestingThings.vue'
|
||||
|
||||
const pageType = ref(0)
|
||||
const pageId = ref(0)
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const studyRecord = ref({ description: '', title: '', picCharts: {}, reportItems: [], hTag: '' })
|
||||
|
||||
onLoad((options) => {
|
||||
pageType.value = +options.type
|
||||
pageId.value = options.id
|
||||
|
||||
getHollandDimensionInfo({ ScaleId: pageId.value.toString() }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
studyRecord.value = resp.result as {
|
||||
description: string
|
||||
title: string
|
||||
picCharts: any
|
||||
reportItems: any[]
|
||||
hTag: string
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-bg {
|
||||
background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
|
||||
}
|
||||
:deep(.icon-class) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
width: calc(100% - 80rpx);
|
||||
height: 244rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
font-size: 24rpx;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.position-tag {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.avatar-item image {
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" class="flex flex-col h-screen relative">
|
||||
<Navbar
|
||||
safeAreaInsetTop
|
||||
:bordered="false"
|
||||
leftArrow
|
||||
@clickLeft="handleBack"
|
||||
bg-color="transparent"
|
||||
>
|
||||
<template #title>
|
||||
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">{{ pageName }}</text>
|
||||
</template>
|
||||
</Navbar>
|
||||
<view class="h-full w-full custom-bg absolute top-0 left-0 -z-1"></view>
|
||||
|
||||
<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" />
|
||||
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的兴趣类型为</text>
|
||||
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 雷达图占位 -->
|
||||
|
||||
<InterestRadar :picData="studyRecord.picCharts" />
|
||||
|
||||
<!-- 类型说明 -->
|
||||
<TypeDetail :reportItems="studyRecord.reportItems" />
|
||||
|
||||
<!-- 适合的岗位领域 -->
|
||||
<DependenciesChart />
|
||||
|
||||
<!-- 适合职业 -->
|
||||
<view class="suitable-careers mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
|
||||
<view class="text-center mb-[30rpx]">
|
||||
<text class="text-[32rpx] font-bold relative inline-block pb-[10rpx]">
|
||||
适合职业
|
||||
<view
|
||||
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[80rpx] h-[6rpx] bg-[#117CFC] rounded-full"
|
||||
></view>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="career-details mb-[20rpx]">
|
||||
<text class="text-[28rpx] font-bold mb-[15rpx] block">I 适合职业</text>
|
||||
<text class="text-[26rpx] text-[#666] leading-[40rpx]">
|
||||
机械、电气、电子工程师、各类技术专家和技师、计算机软件、系统集成专业人员等；专职研究、金融工作者、财务顾问、经济学研究者等；银行、商贸、产品代理商（年历产品为主）等、警察、侦探、法官工作者、策展、导游等、飞行员、高级厨师等等。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="career-table">
|
||||
<view class="table-row flex border-b border-[#eee] py-[20rpx]">
|
||||
<text class="w-[100rpx] text-center font-bold">专业大类</text>
|
||||
<text class="flex-1 text-center font-bold">专业类</text>
|
||||
<text class="flex-1 text-center font-bold">专业名称</text>
|
||||
</view>
|
||||
|
||||
<view class="table-row flex border-b border-[#eee] py-[20rpx]">
|
||||
<text class="w-[100rpx] text-center">医学</text>
|
||||
<text class="flex-1 text-center">中医学</text>
|
||||
<text class="flex-1 text-center">中医学专业</text>
|
||||
</view>
|
||||
|
||||
<view class="table-row flex border-b border-[#eee] py-[20rpx]">
|
||||
<text class="w-[100rpx] text-center">医学</text>
|
||||
<text class="flex-1 text-center">中医学</text>
|
||||
<text class="flex-1 text-center">中医学专业</text>
|
||||
</view>
|
||||
|
||||
<view class="table-row flex border-b border-[#eee] py-[20rpx]">
|
||||
<text class="w-[100rpx] text-center">医学</text>
|
||||
<text class="flex-1 text-center">健康管理与促进</text>
|
||||
<text class="flex-1 text-center">心理健康</text>
|
||||
</view>
|
||||
|
||||
<view class="table-row flex border-b border-[#eee] py-[20rpx]">
|
||||
<text class="w-[100rpx] text-center">医学</text>
|
||||
<text class="flex-1 text-center">公共卫生与预防</text>
|
||||
<text class="flex-1 text-center">中医养生保健</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 兴趣分析与代表人物 -->
|
||||
<InterestingThings />
|
||||
|
||||
<!-- 底部AI智能顾问 -->
|
||||
<view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
|
||||
<image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
|
||||
<text class="text-[#117CFC] text-[26rpx]">智能AI顾问</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
|
||||
import TypeDetail from '../components/TypeDetail.vue'
|
||||
import InterestRadar from '../components/interestChart/InterestRadar.vue'
|
||||
|
||||
import { getHollandDimensionInfo } from '@/service/index/api'
|
||||
import InterestingThings from '../components/InterestingThings.vue'
|
||||
import DependenciesChart from '../components/interestChart/DependenciesChart.vue'
|
||||
|
||||
const pageType = ref(0)
|
||||
const pageId = ref(0)
|
||||
const pageName = computed(() => {
|
||||
// type=0 兴趣测评报告
|
||||
// =1 性格测评报告
|
||||
// =2 能力测评
|
||||
// =3 学生考试考虑
|
||||
// =4 学习风格
|
||||
// =5 学习技能
|
||||
// =6 SAS
|
||||
// =7 SDS
|
||||
// =8 SCL-90
|
||||
// =9 MHT
|
||||
/// =-1 价值观
|
||||
/// =-2 留学咨询
|
||||
let title = ''
|
||||
switch (pageType.value) {
|
||||
case 0:
|
||||
title = '兴趣测评报告'
|
||||
break
|
||||
case 1:
|
||||
title = '性格测评报告'
|
||||
break
|
||||
case 2:
|
||||
title = '能力测评'
|
||||
break
|
||||
case 3:
|
||||
title = '学生考试考虑'
|
||||
break
|
||||
case 4:
|
||||
title = '学习风格'
|
||||
break
|
||||
case 5:
|
||||
title = '学习技能'
|
||||
break
|
||||
case 6:
|
||||
title = 'SAS'
|
||||
break
|
||||
case 7:
|
||||
title = 'SDS'
|
||||
break
|
||||
case 8:
|
||||
title = 'SCL-90'
|
||||
break
|
||||
case 9:
|
||||
title = 'MHT'
|
||||
break
|
||||
case -1:
|
||||
title = '价值观'
|
||||
break
|
||||
case -2:
|
||||
title = '留学咨询'
|
||||
break
|
||||
default:
|
||||
title = '学术报告'
|
||||
break
|
||||
}
|
||||
return title
|
||||
})
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
const studyRecord = ref({ description: '', title: '', picCharts: {}, reportItems: [] })
|
||||
const getHollandDimension = () => {
|
||||
getHollandDimensionInfo({ ScaleId: pageId.value.toString() }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
studyRecord.value = resp.result as {
|
||||
description: string
|
||||
title: string
|
||||
picCharts: any
|
||||
reportItems: any[]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fetchUrl = (type: number) => {
|
||||
switch (type) {
|
||||
case 0:
|
||||
getHollandDimension()
|
||||
break
|
||||
|
||||
default:
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
pageType.value = +options.type
|
||||
pageId.value = options.id
|
||||
|
||||
fetchUrl(pageType.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.custom-bg {
|
||||
background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
|
||||
}
|
||||
:deep(.icon-class) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
width: calc(100% - 80rpx);
|
||||
height: 244rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
font-size: 24rpx;
|
||||
min-width: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.position-tag {
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.avatar-item image {
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,40 +1,70 @@
|
|||
<template>
|
||||
<view class="interest-analysis mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
|
||||
<view class="text-center mb-[30rpx]">
|
||||
<text class="text-[32rpx] font-bold relative inline-block pb-[10rpx]">
|
||||
兴趣分析与代表人物
|
||||
<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-[80rpx] h-[6rpx] bg-[#117CFC] rounded-full"
|
||||
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full h-[10rpx] bg-[#cce3fc] rounded-full title-bar"
|
||||
></view>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="text-[26rpx] text-[#666] leading-[40rpx] mb-[30rpx] block">
|
||||
你往往意识现实事物的价值，区分高低，做事诚实，较为谦逊，善表达，描写详尽，不偏激，不自作多情，善察言观色，重视自我生活中细节与感官享受，通过分析思考的方式生活，理解不顾情面，不暧昧含糊，创新力不高，高有情感无法用语言表达，真实客观，情绪波动大，较冲动，不愿从俗排挤，不存野心社会竞争中，不敏感，情绪平稳，善事工作者自然人。事件记忆能力好，为人好好，热情，开朗，善良，敢为人先，他人友好，理解他人生活，好奇心强，对事物有兴趣，通常对工具和机器感兴趣，聚焦，毅力旺盛，客观理性，好又好，好心肠，友善，表达感谢，美言赞扬，看心情，贴心咨询，有爱，臣俯首，温和，善良，耐心，贴心，和气待人。
|
||||
{{ description }}
|
||||
</text>
|
||||
|
||||
<view class="avatars-list flex justify-around">
|
||||
<view class="avatar-item flex flex-col items-center">
|
||||
<image src="" class="w-[120rpx] h-[120rpx] rounded-full" mode="aspectFill"></image>
|
||||
<text class="mt-[10rpx] text-[26rpx]">刘亦菲</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-item flex flex-col items-center">
|
||||
<image src="" class="w-[120rpx] h-[120rpx] rounded-full" mode="aspectFill"></image>
|
||||
<text class="mt-[10rpx] text-[26rpx]">谭咏麟</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-item flex flex-col items-center">
|
||||
<image src="" class="w-[120rpx] h-[120rpx] rounded-full" mode="aspectFill"></image>
|
||||
<text class="mt-[10rpx] text-[26rpx]">毕加索</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-item flex flex-col items-center">
|
||||
<image src="" class="w-[120rpx] h-[120rpx] rounded-full" mode="aspectFill"></image>
|
||||
<text class="mt-[10rpx] text-[26rpx]">李白</text>
|
||||
<view class="flex items-center gap-[10rpx] mb-[16rpx]">
|
||||
<view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
|
||||
<text class="text-[#1580FF] text-[32rpx]">代表人物</text>
|
||||
<text class="text-[#999] text-[24rpx]">以下代表人物仅作为参考</text>
|
||||
</view>
|
||||
<view class="avatars-list grid grid-cols-4 gap-x-[52rpx] gap-y-[18rpx]">
|
||||
<view
|
||||
class="avatar-item flex flex-col items-center"
|
||||
v-for="(person, index) in personList"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
:src="person.avatarUrl"
|
||||
class="w-[120rpx] h-[120rpx] rounded-full"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<text class="mt-[10rpx] text-[26rpx] text-[28rpx] font-normal text-center">
|
||||
{{ person.nickName }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import { getTagMapPerson } from '@/service/index/api'
|
||||
|
||||
const props = defineProps({
|
||||
tag: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const personList = ref([])
|
||||
|
||||
watch(
|
||||
() => props.tag,
|
||||
(newV) => {
|
||||
console.log(newV)
|
||||
|
||||
getTagMapPerson({ tag: newV }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
personList.value = resp.result as any[]
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<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>
|
||||
|
||||
<text class="text-[24rpx] text-[#999]">以下专业仅作为参考</text>
|
||||
|
||||
<view class="w-full">
|
||||
<view class="flex py-[15rpx] px-[36rpx] bg-[#F5FAFF]">
|
||||
<text class="w-[129rpx] text-center font-bold">专业大类</text>
|
||||
<text class="flex-1 text-center font-bold">专业类</text>
|
||||
<text class="flex-1 text-center font-bold">专业名称</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
:class="`flex py-[15rpx] px-[36rpx] ${index % 2 === 0 ? 'bg-[#fff]' : 'bg-[#F5FAFF]'}`"
|
||||
v-for="(major, index) in majorList"
|
||||
:key="index"
|
||||
>
|
||||
<text class="w-[129rpx] text-center">{{ major.tradeName }}</text>
|
||||
<text class="flex-1 text-center">{{ major.categoryName }}</text>
|
||||
<text class="flex-1 text-center">{{ major.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getTagMapPro } from '@/service/index/api'
|
||||
|
||||
const props = defineProps({
|
||||
tag: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const majorList = ref([])
|
||||
|
||||
watch(
|
||||
() => props.tag,
|
||||
(newV) => {
|
||||
console.log(newV)
|
||||
|
||||
getTagMapPro({ tag: newV }).then((resp) => {
|
||||
if (resp.code === 200) {
|
||||
majorList.value = resp.result as any[]
|
||||
}
|
||||
})
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/pages-evaluation-sub/styles/parallelogram.scss';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<view
|
||||
class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[630rpx] flex flex-col justify-center px-[24rpx] pt-[62rpx]"
|
||||
>
|
||||
<view class="w-full z-1 flex flex-col gap-[40rpx]">
|
||||
<view
|
||||
class="w-full flex items-center gap-[16rpx] text-[30rpx] text-[#A8A8A8]"
|
||||
v-for="(item, index) in characterData"
|
||||
:style="`--start-color:${colors[index].startColor};--end-color:${colors[index].endColor}`"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
:class="`w-110rpx ${item.leftData.value > item.rightData.value ? 'left-active' : ''}`"
|
||||
>
|
||||
{{ item.leftData.name }}
|
||||
</view>
|
||||
<view class="flex-1 h-[28rpx] bg-[#F1F2F4] rounded-[16rpx]">
|
||||
<view
|
||||
class="w-[60%] rounded-[16rpx] bar-color h-[28rpx]"
|
||||
:style="`transform:translateX(${(item.rightData.value / (item.rightData.value + item.leftData.value)) * 100}%);`"
|
||||
></view>
|
||||
</view>
|
||||
<view
|
||||
:class="`w-110rpx ${item.leftData.value > item.rightData.value ? '' : 'right-active'}`"
|
||||
>
|
||||
{{ item.rightData.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="px-[16rpx] py-[20rpx] flex flex-col bg-[#F5FAFF] mt-[32rpx]">
|
||||
<text class="text-[30rpx] text-[#000] mb-[10rpx]">性格介绍</text>
|
||||
<text class="text-[26rpx] text-[#333]">{{ description }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
linChart: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
name: [],
|
||||
value: [],
|
||||
}),
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const colors = [
|
||||
{ startColor: '#97FBCD', endColor: '#00BAAD' },
|
||||
{ startColor: '#FF5940', endColor: '#FAA896' },
|
||||
{ startColor: '#FFBF5E', endColor: '#F59300' },
|
||||
{ startColor: '#96E4FA', endColor: '#117CFC' },
|
||||
]
|
||||
const transformData = (names: string[], values: number[]) => {
|
||||
const result = []
|
||||
const pairMap = new Map()
|
||||
const pairData = { E: 'I', S: 'N', T: 'F', J: 'P' }
|
||||
|
||||
// 先建立名称和值的映射
|
||||
names.forEach((name, index) => {
|
||||
const match = name.match(/\((.*?)\)(\w+)/)
|
||||
if (match) {
|
||||
const letter = match[2]
|
||||
pairMap.set(letter, { name, value: values[index] })
|
||||
}
|
||||
})
|
||||
|
||||
// 根据 pairData 构建配对数据
|
||||
Object.entries(pairData).forEach(([left, right]) => {
|
||||
const leftData = pairMap.get(left)
|
||||
const rightData = pairMap.get(right)
|
||||
if (leftData && rightData) {
|
||||
result.push({
|
||||
leftData,
|
||||
rightData,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const characterData = ref([])
|
||||
watch(
|
||||
() => props.linChart,
|
||||
(newV) => {
|
||||
let data = transformData(newV.name, newV.value)
|
||||
characterData.value = data
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-class {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.bar-color {
|
||||
background: linear-gradient(90deg, var(--start-color) 0%, var(--end-color) 100%);
|
||||
}
|
||||
|
||||
.left-active {
|
||||
color: var(--start-color);
|
||||
}
|
||||
.right-active {
|
||||
color: var(--end-color);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,37 @@
|
|||
<template>
|
||||
<view class="suitable-positions mx-[30rpx] mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
|
||||
<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-[6rpx] bg-[#cce3fc] rounded-full title-bar"
|
||||
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>
|
||||
|
||||
<LEchart ref="echart" class="h-[415rpx] w-full"></LEchart>
|
||||
<view class="flex justify-center items-center">
|
||||
<view class="h-[146px] w-[265px] z-1">
|
||||
<LEchart ref="echart" :is-disable-scroll="true"></LEchart>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="flex items-center gap-[10rpx] mb-[10rpx]">
|
||||
<view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
|
||||
<text class="text-[#1580FF] text-[32rpx] font-bold">适合职业</text>
|
||||
<text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text>
|
||||
</view>
|
||||
<text class="text-[#666] text-[28rpx]">{{ major }}</text>
|
||||
|
||||
<view class="flex items-center gap-[10rpx] mb-[10rpx] mt-[20rpx]">
|
||||
<view class="w-[5rpx] h-[30rpx] bg-[#1580FF]"></view>
|
||||
<text class="text-[#1580FF] text-[32rpx] font-bold">适合专业</text>
|
||||
<text class="text-[#999] text-[24rpx]">以下数据仅作为参考</text>
|
||||
</view>
|
||||
<text class="text-[#666] text-[28rpx]">{{ occupation }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,111 +39,153 @@
|
|||
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
|
||||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||||
const echart = ref(null)
|
||||
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => ['社会型', '研究型', '企业型', '艺术型', '常规型', '现实型'],
|
||||
mainDomain: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
major: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
occupation: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
onMounted(() => {
|
||||
echart.value.init(echarts, (chart) => {
|
||||
let option = {
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
|
||||
// 定义固定的样式配置
|
||||
const styleConfig = [
|
||||
{ bg: '#FDF0F0', text: '#F58C8C', size: 45, x: 2, y: 38 },
|
||||
{ bg: '#ECF5FF', text: '#3B9DFF', size: 77, x: 52, y: 64 },
|
||||
{ bg: '#F6F4FD', text: '#7E5EFF', size: 63, x: 136, y: 48 },
|
||||
{ bg: '#FFF8E5', text: '#FFC832', size: 62, x: 116, y: 104 },
|
||||
{ bg: '#E6FBF0', text: '#37D480', size: 45, x: 0, y: 110 },
|
||||
{ bg: '#FDF0F0', text: '#F58C8C', size: 45, x: 166, y: 118 },
|
||||
]
|
||||
|
||||
const chartData = ref([])
|
||||
|
||||
// 根据文字长度选择合适的样式
|
||||
const selectStylesByLength = (items: string[]) => {
|
||||
const usedIndices = new Set<number>()
|
||||
const result: Array<{ style: any; text: string }> = []
|
||||
|
||||
// 优先处理大尺寸的元素
|
||||
const processItems = (items: string[], targetSize: number) => {
|
||||
items.forEach((item) => {
|
||||
// 查找匹配大小且未使用的样式
|
||||
const availableIndices = styleConfig
|
||||
.map((style, index) => ({ index, style }))
|
||||
.filter(({ style, index }) => style.size === targetSize && !usedIndices.has(index))
|
||||
|
||||
if (availableIndices.length > 0) {
|
||||
const { index, style } = availableIndices[0]
|
||||
usedIndices.add(index)
|
||||
result.push({ style, text: item })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 按不同尺寸进行分类
|
||||
const bigItems = items.filter((item) => item.length >= 4)
|
||||
const mediumItems = items.filter((item) => item.length === 3)
|
||||
const smallItems = items.filter((item) => item.length <= 2)
|
||||
|
||||
// 依次处理不同尺寸的元素
|
||||
processItems(bigItems, 77)
|
||||
processItems(mediumItems, 63)
|
||||
processItems(smallItems, 45)
|
||||
|
||||
// 处理剩余的未分配元素（使用任何可用样式）
|
||||
const remainingItems = items.filter((item) => !result.some((r) => r.text === item))
|
||||
|
||||
remainingItems.forEach((item) => {
|
||||
// 尝试找到任何未使用的样式
|
||||
for (let i = 0; i < styleConfig.length; i++) {
|
||||
if (!usedIndices.has(i)) {
|
||||
usedIndices.add(i)
|
||||
result.push({ style: styleConfig[i], text: item })
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.mainDomain,
|
||||
(newV) => {
|
||||
if (!newV) return
|
||||
|
||||
chartData.value = newV.split('、')
|
||||
echart.value.init(echarts, (chart) => {
|
||||
// 根据文字长度选择合适的样式
|
||||
const selectedStyles = selectStylesByLength(chartData.value)
|
||||
|
||||
// 生成图表数据
|
||||
const data = selectedStyles.map(({ style, text }) => {
|
||||
return {
|
||||
name: text,
|
||||
x: style.x,
|
||||
y: style.y,
|
||||
symbolSize: style.size,
|
||||
itemStyle: {
|
||||
color: style.bg,
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: style.text,
|
||||
fontSize: 14,
|
||||
formatter: (params: any) => {
|
||||
const text = params.name
|
||||
if (text.length >= 5) {
|
||||
const lines = []
|
||||
for (let i = 0; i < text.length; i += 3) {
|
||||
lines.push(text.slice(i, i + 3))
|
||||
}
|
||||
return lines.join('\n\n')
|
||||
}
|
||||
return text
|
||||
},
|
||||
rich: {
|
||||
lineHeight: 20,
|
||||
},
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
position: 'inside',
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [4, 10],
|
||||
edgeLabel: {
|
||||
fontSize: 20,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '节点1',
|
||||
x: 300,
|
||||
y: 300,
|
||||
},
|
||||
{
|
||||
name: '节点2',
|
||||
x: 800,
|
||||
y: 300,
|
||||
},
|
||||
{
|
||||
name: '节点3',
|
||||
x: 550,
|
||||
y: 100,
|
||||
},
|
||||
{
|
||||
name: '节点4',
|
||||
x: 550,
|
||||
y: 500,
|
||||
},
|
||||
],
|
||||
// links: [],
|
||||
links: [
|
||||
{
|
||||
source: 0,
|
||||
target: 1,
|
||||
symbolSize: [5, 20],
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
curveness: 0.2,
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '节点2',
|
||||
target: '节点1',
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
lineStyle: {
|
||||
curveness: 0.2,
|
||||
},
|
||||
},
|
||||
{
|
||||
source: '节点1',
|
||||
target: '节点3',
|
||||
},
|
||||
{
|
||||
source: '节点2',
|
||||
target: '节点3',
|
||||
},
|
||||
{
|
||||
source: '节点2',
|
||||
target: '节点4',
|
||||
},
|
||||
{
|
||||
source: '节点1',
|
||||
target: '节点4',
|
||||
},
|
||||
],
|
||||
lineStyle: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
curveness: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
})
|
||||
})
|
||||
let option = {
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
roam: true,
|
||||
data,
|
||||
links: [],
|
||||
lineStyle: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
curveness: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
})
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-bar {
|
||||
transform: translateX(-50%) skewX(-20deg);
|
||||
}
|
||||
@import '@/pages-evaluation-sub/styles/parallelogram.scss';
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<view
|
||||
class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center"
|
||||
>
|
||||
<LEchart ref="echart" class="h-[415rpx] w-full"></LEchart>
|
||||
<view class="h-[415rpx] w-full z-1">
|
||||
<LEchart ref="echart"></LEchart>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -91,6 +93,12 @@ watch(
|
|||
}
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (echart.value) {
|
||||
echart.value.dispose()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
<template>
|
||||
<view class="h-[368rpx] w-full z-1 bg-white">
|
||||
<LEchart ref="echart"></LEchart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
|
||||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||||
const echart = ref(null)
|
||||
|
||||
const props = defineProps({
|
||||
echartData: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
name: ['Y', 'R', 'D', 'Z', 'K', 'S', 'L', 'N'],
|
||||
value: [21, 27, 27, 24, 23, 28, 26, 16],
|
||||
},
|
||||
{
|
||||
name: [
|
||||
'言语语言智能',
|
||||
'逻辑数理智能',
|
||||
'视觉空间智能',
|
||||
'身体动觉智能',
|
||||
'音乐节奏智能',
|
||||
'人际交往智能',
|
||||
'自知自省智能',
|
||||
'自然观察智能',
|
||||
],
|
||||
value: [37.7, 39.13, 41.21, 40.3, 39.13, 31.2, 41.21, 40.69],
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
updateChart()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.echartData,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.length > 0) {
|
||||
updateChart()
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
const updateChart = () => {
|
||||
echart.value.init(echarts, (chart) => {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
left: 0,
|
||||
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: ['我的数据', '平均数据'],
|
||||
right: 10,
|
||||
top: 0,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: (props.echartData[1] as { name: string[] }).name.map((item) =>
|
||||
item.replace('智能', ''),
|
||||
),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E0E0E0',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
rotate: 45,
|
||||
formatter: function (value) {
|
||||
// 处理长文本
|
||||
if (value.length > 2) {
|
||||
return value.substring(0, 6) + '...'
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '分数',
|
||||
min: 0,
|
||||
max: 50,
|
||||
interval: 10,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#E0E0E0',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#E8E8E8',
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '我的数据',
|
||||
type: 'bar',
|
||||
barWidth: '20',
|
||||
itemStyle: {
|
||||
color: '#1580FF',
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
},
|
||||
data: (props.echartData[1] as { value: number[] }).value,
|
||||
},
|
||||
{
|
||||
name: '平均数据',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
color: '#F9AA5B',
|
||||
width: 2,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F9AA5B',
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff',
|
||||
},
|
||||
data: (props.echartData[0] as { value: number[] }).value,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
chart.setOption(option)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义图表样式可以在这里添加 */
|
||||
</style>
|
||||
|
|
@ -233,9 +233,15 @@ const getScoreSectionData = () => {
|
|||
|
||||
const echart = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
onLoad(() => {
|
||||
getScoreSectionData()
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (echart.value) {
|
||||
echart.value.dispose()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.title-bar {
|
||||
transform: translateX(-50%) skewX(-20deg);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -119,21 +119,32 @@ const handleCheckChange = (value: any[]) => {
|
|||
} else {
|
||||
disableBtn.value = false
|
||||
}
|
||||
let _type = questions.value[currentIndex.value].type
|
||||
let _name = questions.value[currentIndex.value].answer[0].tag
|
||||
if (answerMap.has(_type)) {
|
||||
let val = answerMap.get(_type)
|
||||
val.value += value.length
|
||||
answerMap.set(_type, val)
|
||||
} else {
|
||||
answerMap.set(_type, { name: _name, value: value.length })
|
||||
}
|
||||
|
||||
if (questionType.value === 0) {
|
||||
// 单选题就点完跳下一题
|
||||
handleNextQuestion()
|
||||
}
|
||||
}
|
||||
|
||||
const calcScore = () => {
|
||||
let _type = questions.value[currentIndex.value].type
|
||||
let _name = questions.value[currentIndex.value].answer[0].tag
|
||||
let _options = questions.value[currentIndex.value].answer.filter((answer) => {
|
||||
return checkedList.value.includes(answer.key)
|
||||
})
|
||||
|
||||
if (answerMap.has(_type)) {
|
||||
let val = answerMap.get(_type)
|
||||
val.value += _options.reduce((count, cur) => (count = count + Number(cur.value)), 0)
|
||||
answerMap.set(_type, val)
|
||||
} else {
|
||||
answerMap.set(_type, {
|
||||
name: _name,
|
||||
value: _options.reduce((count, cur) => (count = count + Number(cur.value)), 0),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 当前显示的卡片索引
|
||||
const currentIndex = ref(0)
|
||||
const questions = ref([])
|
||||
|
|
@ -177,6 +188,7 @@ onLoad((options) => {
|
|||
const handleNextQuestion = () => {
|
||||
if (disableBtn.value) return
|
||||
disableBtn.value = true
|
||||
calcScore()
|
||||
checkedList.value = []
|
||||
if (currentIndex.value === questions.value.length - 1) {
|
||||
handleSubmit()
|
||||
|
|
|
|||
|
|
@ -47,8 +47,17 @@ const toDetail = (item: any) => {
|
|||
// =9 MHT
|
||||
/// =-1 价值观
|
||||
/// =-2 留学咨询
|
||||
let url = ''
|
||||
|
||||
if (item.type === 0) {
|
||||
url = `/pages-evaluation-sub/evaluate/academicReport/InterestReport?id=${item.reportsId}&type=${item.type}`
|
||||
} else if (item.type === 1) {
|
||||
url = `/pages-evaluation-sub/evaluate/academicReport/CharacterReport?id=${item.reportsId}&type=${item.type}`
|
||||
} else if (item.type === 2) {
|
||||
url = `/pages-evaluation-sub/evaluate/academicReport/CapabilityReport?id=${item.reportsId}&type=${item.type}`
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages-evaluation-sub/evaluate/academicReport/index?id=${item.reportsId}&type=${item.type}`,
|
||||
url,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -348,7 +348,21 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "evaluate/academicReport/index",
|
||||
"path": "evaluate/academicReport/CapabilityReport",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "evaluate/academicReport/CharacterReport",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "evaluate/academicReport/InterestReport",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
|
|
|||
|
|
@ -413,3 +413,19 @@ export const deleteMyAppointment = (params: { id: number }) => {
|
|||
export const getHollandDimensionInfo = (params: { ScaleId: string }) => {
|
||||
return http.get('/api/busScale/GetHollandDimension', params)
|
||||
}
|
||||
|
||||
export const getTagMapPro = (params: { tag: string }) => {
|
||||
return http.get('/api/busScale/getTagMapPro', params)
|
||||
}
|
||||
|
||||
export const getTagMapPerson = (params: { tag: string }) => {
|
||||
return http.get('/api/busScale/getTagMapPerson', params)
|
||||
}
|
||||
|
||||
export const getMBTIDimension = (params: { ScaleId: number }) => {
|
||||
return http.get('/api/busScale/GetMBTIDimension', params)
|
||||
}
|
||||
|
||||
export const getAbilityDimension = (params: { ScaleId: number }) => {
|
||||
return http.get('/api/busscale/GetAbilityDimension', params)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,9 @@ interface NavigateToOptions {
|
|||
"/login-sub/index" |
|
||||
"/pages-evaluation-sub/aiAutoFill/index" |
|
||||
"/pages-evaluation-sub/rank/index" |
|
||||
"/pages-evaluation-sub/evaluate/academicReport/index" |
|
||||
"/pages-evaluation-sub/evaluate/academicReport/CapabilityReport" |
|
||||
"/pages-evaluation-sub/evaluate/academicReport/CharacterReport" |
|
||||
"/pages-evaluation-sub/evaluate/academicReport/InterestReport" |
|
||||
"/aiService-sub/index/index";
|
||||
}
|
||||
interface RedirectToOptions extends NavigateToOptions {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue