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 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="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="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,14 +39,127 @@
|
|||
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(() => {
|
||||
|
||||
// 定义固定的样式配置
|
||||
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',
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
let option = {
|
||||
tooltip: {},
|
||||
animationDurationUpdate: 1500,
|
||||
|
|
@ -35,79 +168,9 @@ onMounted(() => {
|
|||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
symbolSize: 50,
|
||||
roam: true,
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
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',
|
||||
},
|
||||
],
|
||||
data,
|
||||
links: [],
|
||||
lineStyle: {
|
||||
opacity: 0.9,
|
||||
width: 2,
|
||||
|
|
@ -119,11 +182,10 @@ onMounted(() => {
|
|||
|
||||
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);
|
||||
}
|
||||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<view class="lime-echart" :style="[customStyle]" v-if="canvasId" ref="limeEchart" :aria-label="ariaLabel">
|
||||
<view
|
||||
class="lime-echart"
|
||||
:style="[customStyle]"
|
||||
v-if="canvasId"
|
||||
ref="limeEchart"
|
||||
:aria-label="ariaLabel"
|
||||
>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<canvas
|
||||
class="lime-echart__canvas"
|
||||
|
|
@ -25,16 +31,21 @@
|
|||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<view class="lime-echart__mask"
|
||||
<view
|
||||
class="lime-echart__mask"
|
||||
v-if="isPC"
|
||||
@mousedown="touchStart"
|
||||
@mousemove="touchMove"
|
||||
@mouseup="touchEnd"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd">
|
||||
</view>
|
||||
<canvas v-if="isOffscreenCanvas" :style="offscreenStyle" :canvas-id="offscreenCanvasId"></canvas>
|
||||
@touchend="touchEnd"
|
||||
></view>
|
||||
<canvas
|
||||
v-if="isOffscreenCanvas"
|
||||
:style="offscreenStyle"
|
||||
:canvas-id="offscreenCanvasId"
|
||||
></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view
|
||||
|
|
@ -54,12 +65,20 @@
|
|||
<script>
|
||||
// @ts-nocheck
|
||||
// #ifndef APP-NVUE
|
||||
import {Canvas, setCanvasCreator, dispatch} from './canvas';
|
||||
import {wrapTouch, convertTouchesToArray, devicePixelRatio ,sleep, canIUseCanvas2d, getRect, getDeviceInfo} from './utils';
|
||||
import { Canvas, setCanvasCreator, dispatch } from './canvas'
|
||||
import {
|
||||
wrapTouch,
|
||||
convertTouchesToArray,
|
||||
devicePixelRatio,
|
||||
sleep,
|
||||
canIUseCanvas2d,
|
||||
getRect,
|
||||
getDeviceInfo,
|
||||
} from './utils'
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
import { base64ToPath, sleep } from './utils';
|
||||
import {Echarts} from './nvue'
|
||||
import { base64ToPath, sleep } from './utils'
|
||||
import { Echarts } from './nvue'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
|
|
@ -84,7 +103,7 @@ export default {
|
|||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
type: {
|
||||
type: String,
|
||||
default: '2d'
|
||||
default: '2d',
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
|
|
@ -95,14 +114,14 @@ export default {
|
|||
isDisableScroll: Boolean,
|
||||
isClickable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
enableHover: Boolean,
|
||||
beforeDelay: {
|
||||
type: Number,
|
||||
default: 30
|
||||
default: 30,
|
||||
},
|
||||
landscape: Boolean
|
||||
landscape: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -128,16 +147,18 @@ export default {
|
|||
isOffscreenCanvas: false,
|
||||
offscreenWidth: 0,
|
||||
offscreenHeight: 0,
|
||||
};
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rootStyle() {
|
||||
if(this.landscape) {
|
||||
if (this.landscape) {
|
||||
return `transform: translate(-50%,-50%) rotate(90deg); top:50%; left:50%;`
|
||||
} else {
|
||||
return ``
|
||||
}
|
||||
},
|
||||
canvasId() {
|
||||
return `lime-echart${this._ && this._.uid || this._uid}`
|
||||
return `lime-echart${(this._ && this._.uid) || this._uid}`
|
||||
},
|
||||
offscreenCanvasId() {
|
||||
return `${this.canvasId}_offscreen`
|
||||
|
|
@ -146,15 +167,18 @@ export default {
|
|||
return `width:${this.offscreenWidth}px;height: ${this.offscreenHeight}px; position: fixed; left: 99999px; background: red`
|
||||
},
|
||||
canvasStyle() {
|
||||
return this.rootStyle + (this.width && this.height ? ('width:' + this.width + 'px;height:' + this.height + 'px') : '')
|
||||
}
|
||||
return (
|
||||
this.rootStyle +
|
||||
(this.width && this.height ? 'width:' + this.width + 'px;height:' + this.height + 'px' : '')
|
||||
)
|
||||
},
|
||||
},
|
||||
// #ifndef VUE3
|
||||
beforeDestroy() {
|
||||
this.clear()
|
||||
this.dispose()
|
||||
// #ifdef H5
|
||||
if(this.isPC) {
|
||||
if (this.isPC) {
|
||||
document.removeEventListener('mousewheel', this.mousewheel)
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -165,7 +189,7 @@ export default {
|
|||
this.clear()
|
||||
this.dispose()
|
||||
// #ifdef H5
|
||||
if(this.isPC) {
|
||||
if (this.isPC) {
|
||||
document.removeEventListener('mousewheel', this.mousewheel)
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -173,13 +197,13 @@ export default {
|
|||
// #endif
|
||||
created() {
|
||||
// #ifdef H5
|
||||
if(!('ontouchstart' in window)) {
|
||||
if (!('ontouchstart' in window)) {
|
||||
this.isPC = true
|
||||
document.addEventListener('mousewheel', this.mousewheel)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||
const { platform } = getDeviceInfo();
|
||||
const { platform } = getDeviceInfo()
|
||||
this.isPC = /windows/i.test(platform)
|
||||
// #endif
|
||||
this.use2dCanvas = this.type === '2d' && canIUseCanvas2d()
|
||||
|
|
@ -192,7 +216,7 @@ export default {
|
|||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
onMessage(e) {
|
||||
const detail = e?.detail?.data[0] || null;
|
||||
const detail = e?.detail?.data[0] || null
|
||||
const data = detail?.data
|
||||
const key = detail?.event
|
||||
const options = data?.options
|
||||
|
|
@ -201,25 +225,27 @@ export default {
|
|||
if (key == 'log' && data) {
|
||||
console.log(data)
|
||||
}
|
||||
if(event) {
|
||||
this.chart.dispatchAction(event.replace(/"/g,''), options)
|
||||
if (event) {
|
||||
this.chart.dispatchAction(event.replace(/"/g, ''), options)
|
||||
}
|
||||
if(file) {
|
||||
if (file) {
|
||||
thie.file = file
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
setChart(callback) {
|
||||
if(!this.chart) {
|
||||
if (!this.chart) {
|
||||
console.warn(`组件还未初始化，请先使用 init`)
|
||||
return
|
||||
}
|
||||
if(typeof callback === 'function' && this.chart) {
|
||||
callback(this.chart);
|
||||
if (typeof callback === 'function' && this.chart) {
|
||||
callback(this.chart)
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
if(typeof callback === 'function') {
|
||||
this.$refs.webview.evalJs(`setChart(${JSON.stringify(callback.toString())}, ${JSON.stringify(this.chart.options)})`);
|
||||
if (typeof callback === 'function') {
|
||||
this.$refs.webview.evalJs(
|
||||
`setChart(${JSON.stringify(callback.toString())}, ${JSON.stringify(this.chart.options)})`,
|
||||
)
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
|
@ -228,73 +254,77 @@ export default {
|
|||
console.warn(`组件还未初始化，请先使用 init`)
|
||||
return
|
||||
}
|
||||
this.chart.setOption(...arguments);
|
||||
this.chart.setOption(...arguments)
|
||||
},
|
||||
showLoading() {
|
||||
if(this.chart) {
|
||||
if (this.chart) {
|
||||
this.chart.showLoading(...arguments)
|
||||
}
|
||||
},
|
||||
hideLoading() {
|
||||
if(this.chart) {
|
||||
if (this.chart) {
|
||||
this.chart.hideLoading()
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
if(this.chart && !this.chart.isDisposed()) {
|
||||
if (this.chart && !this.chart.isDisposed()) {
|
||||
this.chart.clear()
|
||||
}
|
||||
},
|
||||
dispose() {
|
||||
if(this.chart && !this.chart.isDisposed()) {
|
||||
if (this.chart && !this.chart.isDisposed()) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
},
|
||||
resize(size) {
|
||||
if(size && size.width && size.height) {
|
||||
if (size && size.width && size.height) {
|
||||
this.height = size.height
|
||||
this.width = size.width
|
||||
if(this.chart) {this.chart.resize(size)}
|
||||
if (this.chart) {
|
||||
this.chart.resize(size)
|
||||
}
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
getRect('.lime-echart', this).then(res =>{
|
||||
getRect('.lime-echart', this).then((res) => {
|
||||
if (res) {
|
||||
let { width, height } = res;
|
||||
this.width = width = width || 300;
|
||||
this.height = height = height || 300;
|
||||
this.chart.resize({width, height})
|
||||
let { width, height } = res
|
||||
this.width = width = width || 300
|
||||
this.height = height = height || 300
|
||||
this.chart.resize({ width, height })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
canvasToTempFilePath(args = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
const { use2dCanvas, canvasId } = this;
|
||||
const { use2dCanvas, canvasId } = this
|
||||
return new Promise((resolve, reject) => {
|
||||
const copyArgs = Object.assign({
|
||||
const copyArgs = Object.assign(
|
||||
{
|
||||
canvasId,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
}, args);
|
||||
fail: reject,
|
||||
},
|
||||
args,
|
||||
)
|
||||
if (use2dCanvas) {
|
||||
delete copyArgs.canvasId;
|
||||
copyArgs.canvas = this.canvasNode;
|
||||
delete copyArgs.canvasId
|
||||
copyArgs.canvas = this.canvasNode
|
||||
}
|
||||
uni.canvasToTempFilePath(copyArgs, this);
|
||||
});
|
||||
uni.canvasToTempFilePath(copyArgs, this)
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.file = ''
|
||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`)
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$watch('file', async (file) => {
|
||||
if(file) {
|
||||
if (file) {
|
||||
const tempFilePath = await base64ToPath(file)
|
||||
resolve(args.success({tempFilePath}))
|
||||
resolve(args.success({ tempFilePath }))
|
||||
} else {
|
||||
reject(args.fail({error: ``}))
|
||||
reject(args.fail({ error: `` }))
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -302,27 +332,29 @@ export default {
|
|||
},
|
||||
async init(echarts, ...args) {
|
||||
// #ifndef APP-NVUE
|
||||
if(args && args.length == 0 && !echarts) {
|
||||
if (args && args.length == 0 && !echarts) {
|
||||
console.error('缺少参数：init(echarts, theme?:string, opts?: object, callback?: function)')
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
let theme=null,opts={},callback;
|
||||
Array.from(arguments).forEach(item => {
|
||||
if(typeof item === 'function') {
|
||||
let theme = null,
|
||||
opts = {},
|
||||
callback
|
||||
Array.from(arguments).forEach((item) => {
|
||||
if (typeof item === 'function') {
|
||||
callback = item
|
||||
}
|
||||
if(['string'].includes(typeof item)) {
|
||||
if (['string'].includes(typeof item)) {
|
||||
theme = item
|
||||
}
|
||||
if(typeof item === 'object') {
|
||||
if (typeof item === 'object') {
|
||||
opts = item
|
||||
}
|
||||
})
|
||||
if(this.beforeDelay) {
|
||||
if (this.beforeDelay) {
|
||||
await sleep(this.beforeDelay)
|
||||
}
|
||||
let config = await this.getContext();
|
||||
let config = await this.getContext()
|
||||
// #ifndef APP-NVUE
|
||||
setCanvasCreator(echarts, config)
|
||||
try {
|
||||
|
|
@ -330,8 +362,8 @@ export default {
|
|||
|
||||
callback?.(this.chart)
|
||||
return this.chart
|
||||
} catch(e) {
|
||||
console.error("【lime-echarts】:", e)
|
||||
} catch (e) {
|
||||
console.error('【lime-echarts】:', e)
|
||||
return null
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -344,32 +376,32 @@ export default {
|
|||
},
|
||||
getContext() {
|
||||
// #ifdef APP-NVUE
|
||||
if(this.finished) {
|
||||
if (this.finished) {
|
||||
return Promise.resolve(this.finished)
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
return new Promise((resolve) => {
|
||||
this.$watch('finished', (val) => {
|
||||
if(val) {
|
||||
if (val) {
|
||||
resolve(this.finished)
|
||||
}
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
return getRect(`#${this.canvasId}`, this, this.use2dCanvas).then(res => {
|
||||
if(res) {
|
||||
return getRect(`#${this.canvasId}`, this, this.use2dCanvas).then((res) => {
|
||||
if (res) {
|
||||
let dpr = devicePixelRatio
|
||||
let {width, height, node} = res
|
||||
let canvas;
|
||||
this.width = width = width || 300;
|
||||
this.height = height = height || 300;
|
||||
if(node) {
|
||||
const ctx = node.getContext('2d');
|
||||
canvas = new Canvas(ctx, this, true, node);
|
||||
let { width, height, node } = res
|
||||
let canvas
|
||||
this.width = width = width || 300
|
||||
this.height = height = height || 300
|
||||
if (node) {
|
||||
const ctx = node.getContext('2d')
|
||||
canvas = new Canvas(ctx, this, true, node)
|
||||
this.canvasNode = node
|
||||
} else {
|
||||
// #ifdef MP-TOUTIAO
|
||||
dpr = !this.isPC ? devicePixelRatio : 1// 1.25
|
||||
dpr = !this.isPC ? devicePixelRatio : 1 // 1.25
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
dpr = this.isPC ? devicePixelRatio : 1
|
||||
|
|
@ -381,13 +413,13 @@ export default {
|
|||
dpr = 1
|
||||
// #endif
|
||||
this.rect = res
|
||||
this.nodeWidth = width * dpr;
|
||||
this.nodeHeight = height * dpr;
|
||||
const ctx = uni.createCanvasContext(this.canvasId, this);
|
||||
canvas = new Canvas(ctx, this, false);
|
||||
this.nodeWidth = width * dpr
|
||||
this.nodeHeight = height * dpr
|
||||
const ctx = uni.createCanvasContext(this.canvasId, this)
|
||||
canvas = new Canvas(ctx, this, false)
|
||||
}
|
||||
|
||||
return { canvas, width, height, devicePixelRatio: dpr, node };
|
||||
return { canvas, width, height, devicePixelRatio: dpr, node }
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
|
|
@ -397,39 +429,42 @@ export default {
|
|||
// #ifndef APP-NVUE
|
||||
getRelative(e, touches) {
|
||||
let { clientX, clientY } = e
|
||||
if(!(clientX && clientY) && touches && touches[0]) {
|
||||
if (!(clientX && clientY) && touches && touches[0]) {
|
||||
clientX = touches[0].clientX
|
||||
clientY = touches[0].clientY
|
||||
}
|
||||
return {x: clientX - this.rect.left, y: clientY - this.rect.top, wheelDelta: e.wheelDelta || 0}
|
||||
return {
|
||||
x: clientX - this.rect.left,
|
||||
y: clientY - this.rect.top,
|
||||
wheelDelta: e.wheelDelta || 0,
|
||||
}
|
||||
},
|
||||
getTouch(e, touches) {
|
||||
const {x} = touches && touches[0] || {}
|
||||
const touch = x ? touches[0] : this.getRelative(e, touches);
|
||||
if(this.landscape) {
|
||||
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||
const { x } = (touches && touches[0]) || {}
|
||||
const touch = x ? touches[0] : this.getRelative(e, touches)
|
||||
if (this.landscape) {
|
||||
;[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||
}
|
||||
return touch;
|
||||
return touch
|
||||
},
|
||||
touchStart(e) {
|
||||
this.isDown = true
|
||||
const next = () => {
|
||||
const touches = convertTouchesToArray(e.touches)
|
||||
if(this.chart) {
|
||||
if (this.chart) {
|
||||
const touch = this.getTouch(e, touches)
|
||||
this.startX = touch.x
|
||||
this.startY = touch.y
|
||||
this.startT = new Date()
|
||||
const handler = this.chart.getZr().handler;
|
||||
const handler = this.chart.getZr().handler
|
||||
dispatch.call(handler, 'mousedown', touch)
|
||||
dispatch.call(handler, 'mousemove', touch)
|
||||
handler.processGesture(wrapTouch(e), 'start');
|
||||
clearTimeout(this.endTimer);
|
||||
handler.processGesture(wrapTouch(e), 'start')
|
||||
clearTimeout(this.endTimer)
|
||||
}
|
||||
|
||||
}
|
||||
if(this.isPC) {
|
||||
getRect(`#${this.canvasId}`, {context: this}).then(res => {
|
||||
if (this.isPC) {
|
||||
getRect(`#${this.canvasId}`, { context: this }).then((res) => {
|
||||
this.rect = res
|
||||
next()
|
||||
})
|
||||
|
|
@ -438,48 +473,49 @@ export default {
|
|||
next()
|
||||
},
|
||||
touchMove(e) {
|
||||
if(this.isPC && this.enableHover && !this.isDown) {this.isDown = true}
|
||||
if (this.isPC && this.enableHover && !this.isDown) {
|
||||
this.isDown = true
|
||||
}
|
||||
const touches = convertTouchesToArray(e.touches)
|
||||
if (this.chart && this.isDown) {
|
||||
const handler = this.chart.getZr().handler;
|
||||
const handler = this.chart.getZr().handler
|
||||
dispatch.call(handler, 'mousemove', this.getTouch(e, touches))
|
||||
handler.processGesture(wrapTouch(e), 'change');
|
||||
handler.processGesture(wrapTouch(e), 'change')
|
||||
}
|
||||
|
||||
},
|
||||
touchEnd(e) {
|
||||
this.isDown = false
|
||||
if (this.chart) {
|
||||
const touches = convertTouchesToArray(e.changedTouches)
|
||||
const {x} = touches && touches[0] || {}
|
||||
const touch = (x ? touches[0] : this.getRelative(e, touches)) || {};
|
||||
if(this.landscape) {
|
||||
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||
const { x } = (touches && touches[0]) || {}
|
||||
const touch = (x ? touches[0] : this.getRelative(e, touches)) || {}
|
||||
if (this.landscape) {
|
||||
;[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||
}
|
||||
const handler = this.chart.getZr().handler;
|
||||
const isClick = Math.abs(touch.x - this.startX) < 10 && new Date() - this.startT < 200;
|
||||
const handler = this.chart.getZr().handler
|
||||
const isClick = Math.abs(touch.x - this.startX) < 10 && new Date() - this.startT < 200
|
||||
dispatch.call(handler, 'mouseup', touch)
|
||||
handler.processGesture(wrapTouch(e), 'end');
|
||||
if(isClick) {
|
||||
handler.processGesture(wrapTouch(e), 'end')
|
||||
if (isClick) {
|
||||
dispatch.call(handler, 'click', touch)
|
||||
} else {
|
||||
this.endTimer = setTimeout(() => {
|
||||
dispatch.call(handler, 'mousemove', {x: 999999999,y: 999999999});
|
||||
dispatch.call(handler, 'mouseup', {x: 999999999,y: 999999999});
|
||||
},50)
|
||||
dispatch.call(handler, 'mousemove', { x: 999999999, y: 999999999 })
|
||||
dispatch.call(handler, 'mouseup', { x: 999999999, y: 999999999 })
|
||||
}, 50)
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
mousewheel(e){
|
||||
if(this.chart) {
|
||||
mousewheel(e) {
|
||||
if (this.chart) {
|
||||
dispatch.call(this.chart.getZr().handler, 'mousewheel', this.getTouch(e))
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.lime-echart {
|
||||
|
|
|
|||
|
|
@ -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