diff --git a/apiRc/service/skillDevelopment.js b/apiRc/service/skillDevelopment.js index 15216c5..a8d190d 100644 --- a/apiRc/service/skillDevelopment.js +++ b/apiRc/service/skillDevelopment.js @@ -7,9 +7,19 @@ import request from '@/utilsRc/request' // 获取技能信息 -export function getSkill(query) { +export function getCareerPath(query) { return request({ - url: '/jobSkillDet/getJobSkillWeight', + url: '/jobPath/getJobPathJobList', + method: 'get', + params: query, + baseUrlType: 'zytp' + }) +} + +// 获取技能信息 +export function getSkillResult(query) { + return request({ + url: '/jobDimScore/getJobDimScoreList', method: 'get', params: query, baseUrlType: 'zytp' diff --git a/pages/service/components/SkillDevelopment.vue b/pages/service/components/SkillDevelopment.vue index 002c2e8..968fe89 100644 --- a/pages/service/components/SkillDevelopment.vue +++ b/pages/service/components/SkillDevelopment.vue @@ -43,30 +43,47 @@ const store = useSkillDevelopmentStore(); - -
+
+
+ 职业路径 +
+
+ +
+ +
+ +
+
+
- 技能发展路径 + {{ store.currentCareerLabel }}技能
- -
- 基于您的当前职业和目标职业,以下是您需要重点发展的技能: -
-
暂无数据
-
-
- {{ skill.name }} -
- 技能分数: {{ skill.score }} - 权重: {{ skill.weight }} -
-
-
-
- {{ tag }} +
+
{{ item.label }}
+
+
+
{{ d.label }}
+
+
技能得分：{{ d.value }}
+
权重：{{ d.weight }}
+
@@ -98,6 +115,7 @@ const store = useSkillDevelopmentStore(); background-color: #FFFFFF; border-radius: 16rpx; padding: 28rpx; + margin-bottom: 20rpx; box-sizing: border-box; overflow: visible; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); @@ -135,6 +153,7 @@ const store = useSkillDevelopmentStore(); button::after { border: none; } + .section-title { font-size: 32rpx; color: #000000; @@ -148,115 +167,189 @@ button::after { } } +.career-paths { + display: grid; + grid-auto-flow: column; + gap: 20px; + padding-bottom: 10px; + + .career-path-item { + display: flex; + flex-direction: column; + align-items: center; + width: 80px; + padding: 5px; + font-weight: 700; + cursor: pointer; + + .career-index { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 48px; + height: 48px; + font-size: 20px; + color: #fff; + border-radius: 50%; + + .index { + position: relative; + z-index: 10; + } + + &:before, + &:after { + content: ''; + position: absolute; + } + + &:before { + inset: 0; + z-index: 1; + background: #6c64e7; + border: 3px solid #fff; + border-radius: 50%; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); + } + + &:after { + content: ''; + position: absolute; + top: 50%; + right: 50%; + z-index: 0; + width: 100px; + border-bottom: 4px solid #ccc; + } + } + + .career-label { + margin-top: 10px; + font-size: 16px; + text-align: center; + color: #6c64e7; + } + + &.career-active { + .career-index { + &:before { + background: #22c55e; + } + &:after { + border-color: #22c55e; + } + } + + .career-label { + color: #000; + } + + & + .career-path-item { + .career-index { + &:after { + border-color: #22c55e; + } + } + } + } + + &:first-child { + .career-index { + font-size: 16px; + + &:after { + display: none; + } + } + } + + &:last-child { + .career-index { + font-size: 16px; + } + } + } +} + + + + diff --git a/stores/useCareerRecommendationStore.js b/stores/useCareerRecommendationStore.js index a3779d6..f9b5ae6 100644 --- a/stores/useCareerRecommendationStore.js +++ b/stores/useCareerRecommendationStore.js @@ -81,7 +81,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation', professions.value = data.map((d) => { return { label: d.name, - value: `${ d.jobId }` + value: d.name }; }); } catch (e) { diff --git a/stores/useSkillDevelopmentStore.js b/stores/useSkillDevelopmentStore.js index d0064b3..ecc6c97 100644 --- a/stores/useSkillDevelopmentStore.js +++ b/stores/useSkillDevelopmentStore.js @@ -1,7 +1,7 @@ import { computed, ref, watch } from 'vue'; import { defineStore } from 'pinia'; import { getCurrentPosition, getPath } from '@/apiRc/service/careerPath'; -import { getSkill } from '@/apiRc/service/skillDevelopment'; +import { getCareerPath, getSkillResult } from '@/apiRc/service/skillDevelopment'; export const useSkillDevelopmentStore = defineStore('skill-development', () => { @@ -62,10 +62,21 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { const paths = ref([]); const pathsRef = computed(() => { return paths.value.filter((d) => { - return `${ d.startJobId }` === profession.value; + const [startJobId] = d.value.split('-'); + return startJobId === profession.value; }); }); + const careerPaths = ref([]); + const currentCareer = ref(null); + const currentCareerIndex = ref(0); + const currentCareerLabel = computed(() => { + if (!currentCareer.value) { + return ''; + } + return currentCareer.value.label; + }); + const result = ref([]); const fetchData = async () => { @@ -108,8 +119,8 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { paths.value = data.map((d) => { return { label: d.endJob, - value: d.endJob, - startJobId: d.startJobId + value: `${d.startJobId}-${d.endJobId}` + }; }); } catch (e) { @@ -117,21 +128,17 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { } }; - const fetchResult = async () => { + const fetchCareerPaths = async () => { if (!targetCareer.value) { return; } - const current = professionsRef.value.find((d) => d.value === profession.value); - const target = pathsRef.value.find((d) => d.value === targetCareer.value); - if (!current || !target) { - return; - } + const [startJobId, endJobId] = targetCareer.value.split('-'); const params = { - currentJobName: current.label, - targetJobName: target.label + startJobId, + endJobId }; try { - const { code, msg, data } = await getSkill(params); + const { code, msg, data } = await getCareerPath(params); if (code !== 0) { uni.showToast({ title: msg, @@ -139,20 +146,68 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { }); return; } - if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[ 0 ]) { - const excludes = data[ 0 ].currentSkillDetList.map((d) => d.skillId); - result.value = data[ 0 ].targetSkillDetList - .filter((d) => !excludes.includes(d.skillId)) - .map((d) => { - return { - type: d.skillType, - title: d.skillName, - name: d.skillName, - weight: d.skillWeight, - score: d.skillScore - }; - }); + if (!data) { + return; } + careerPaths.value = data.map((d, i) => { + let index = `${i}`; + let fontSize = 26; + if (i === 0) { + index = '起点'; + fontSize = 18; + } + if (i === data.length - 1) { + index = '终点'; + fontSize = 18; + } + return { + index, + label: d.name, + value: d.jobId, + fontSize + }; + }); + if (careerPaths.value[0]) { + void eventResult(0); + } + } catch (e) { + console.warn(e); + careerPaths.value = []; + } + }; + + const eventResult = async (index) => { + currentCareerIndex.value = index; + currentCareer.value = careerPaths.value[index] ?? null; + + const params = { + jobId: currentCareer.value?.value + }; + try { + const { code, msg, data } = await getSkillResult(params); + if (code !== 0) { + uni.showToast({ + title: msg, + icon: 'none' + }); + return; + } + if (!data) { + return; + } + result.value = data.map((d) => { + return { + label: d.secDimName, + value: d.secDimId, + children: d.skillDetList.map((d) => { + return { + label: d.skillName, + value: d.skillScore, + weight: d.skillWeight + }; + }) + }; + }); } catch (e) { console.warn(e); } @@ -180,7 +235,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { }); return; } - void fetchResult(); + void fetchCareerPaths(); }; const eventProfession = (e) => { @@ -190,6 +245,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { professionLabel.value = item.label; targetCareer.value = ''; targetCareerLabel.value = ''; + careerPaths.value = []; result.value = []; }; @@ -198,6 +254,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { const item = pathsRef.value[ e.detail.value ]; targetCareer.value = item.value; targetCareerLabel.value = item.label; + careerPaths.value = []; result.value = []; }; @@ -223,9 +280,14 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => { targetCareer, targetCareerLabel, pathsRef, + careerPaths, + currentCareer, + currentCareerLabel, + currentCareerIndex, result, eventProfession, eventTargetCareer, - eventSearch + eventSearch, + eventResult }; });