= 职业规划推荐

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'

pages/service/components/SkillDevelopment.vue

@@ -43,31 +43,49 @@ const store = useSkillDevelopmentStore();
             </button>
         </div>
     </div>
-
+    <div class="content-section career-section">
+        <div class="section-title">
+            <span class="title-text">职业路径</span>
+        </div>
+        <div class="">
+            <scroll-view scroll-x>
+                <div class="career-paths">
+                    <template v-for="(item, index) in store.careerPaths" :key="item.label">
+                    <div
+                        :class="{ 'career-active': store.currentCareer && store.currentCareer.value === item.value }"
+                        class="career-path-item"
+                        @click="store.eventResult(item)"
+                    >
+                        <div
+                            class="career-index"
+                            :class="[index === 0 ? 'font-size-18' : 'font-size-24']"
+                        >
+                            {{ index === 0 ? '起点' : index }}
+                        </div>
+                        <div class="career-label">{{ item.label }}</div>
+                    </div>
+                    </template>
+                </div>
+            </scroll-view>
+        </div>
+    </div>
     <div class="content-section">
         <div class="section-title">
             <uni-icons color="#000000" size="18" type="person-filled"></uni-icons>
-            <span class="title-text">技能发展路径</span>
+            <span class="title-text">{{ store.currentCareerLabel }}技能</span>
         </div>
-
-        <div class="intro-text">
-            基于您的当前职业和目标职业,以下是您需要重点发展的技能:
-        </div>
-
         <div class="skill-list">
             <div v-if="store.result.length === 0" class="empty-text">暂无数据</div>
-            <div v-for="(skill, index) in store.result" v-else :key="index" class="skill-item">
+            <div v-for="(item, index) in store.result" :key="index" class="font-weight-700 font-size-18 skill-card">
-                <div class="skill-header">
+                <div class="margin-bottom-10 skill-label">{{ item.label }}</div>
-                    <span class="skill-name">{{ skill.name }}</span>
+                <div class="d-flex flex-column gap-15 skill-detail">
-                    <div class="skill-info">
+                    <div v-for="d in item.children" :key="d.label" class="d-flex justify-content-between align-items-center padding-10 border-radius-3 skill-detail-item">
-                        <span class="skill-score">技能分数: {{ skill.score }}</span>
+                        <div class="skill-detail-item-label">{{ d.label }}</div>
-                        <span class="skill-weight">权重: {{ skill.weight }}</span>
+                        <div class="d-flex justify-content-between align-items-center width-320">
+                            <div>技能得分：{{ d.value }}</div>
+                            <div>权重：{{ d.weight }}</div>
                         </div>
                     </div>
-                <div v-if="skill.tags && skill.tags.length > 0" class="skill-tags">
-                    <div v-for="(tag, tagIndex) in skill.tags" :key="tagIndex" class="skill-tag">
-                        {{ tag }}
-                    </div>
                 </div>
             </div>
         </div>
@@ -190,73 +208,96 @@ button::after {
     position: relative;
 }
 
-.skill-header {
+.career-paths {
-    display: flex;
+    grid-auto-flow: column;
-    justify-content: space-between;
+
-    align-items: center;
+    .career-index {
-    margin-bottom: 16rpx;
+        background: #6c64e7;
-    width: 100%;
+        border: 3px solid #fff;
-    box-sizing: border-box;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+    }
+
+    .career-label {
+        color: #6c64e7;
+    }
+
+    .career-active {
+        .career-index {
+            background: #22c55e;
+        }
+
+        .career-label {
+            color: #000;
+        }
+    }
 }
 
-.skill-name {
+.skill-label {
-    font-size: 32rpx;
+    color: #94a3b8;
-    line-height: 46rpx;
-    color: rgb(16, 16, 16);
-    text-align: left;
-    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-    font-weight: 600;
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
 }
 
-.skill-info {
+.skill-detail-item {
-    display: flex;
+    background: #c1d2ea;
-    align-items: center;
-    gap: 12rpx;
-    flex-shrink: 0;
-    margin-left: 16rpx;
 }
 
-.skill-score {
+.skill-detail-item-label {
-    font-size: 24rpx;
+    color: #334155;
-    line-height: 34rpx;
+
-    border-radius: 10rpx;
+    & + div {
-    background-color: rgba(49, 100, 239, 0.1);
+        color: #4f46e5;
-    color: rgba(44, 101, 247, 1);
+    }
-    text-align: center;
+}
-    padding: 6rpx 12rpx;
+
-    white-space: nowrap;
+</style>
+
+<style lang="scss" scoped>
+
+.career-paths {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 40px;
+    width: fit-content;
+    padding-bottom: 10px;
+
+    .career-path-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 5px;
+        font-weight: 700;
+        cursor: pointer;
+    }
+
+    .career-index {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 64px;
+        height: 64px;
+        background: #6c64e7;
+        border: 3px solid #fff;
+        font-size: 18px;
+        color: #fff;
+        border-radius: 50%;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+
+    }
+
+    .career-label {
+        margin-top: 10px;
+        text-wrap: nowrap;
+        color: #6c64e7;
+    }
+
+    .career-active {
+        .career-index {
+            background: #22c55e;
+        }
+
+        .career-label {
+            color: #000;
+        }
+    }
 }
 
-.skill-weight {
-    font-size: 24rpx;
-    line-height: 34rpx;
-    border-radius: 10rpx;
-    background-color: rgba(49, 100, 239, 0.1);
-    color: rgba(44, 101, 247, 1);
-    text-align: center;
-    padding: 6rpx 12rpx;
-    white-space: nowrap;
-}
-
-.skill-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12rpx;
-}
-
-.skill-tag {
-    background-color: rgba(49, 100, 239, 0.1);
-    color: rgba(44, 101, 247, 1);
-    padding: 6rpx 12rpx;
-    border-radius: 8rpx;
-    font-size: 24rpx;
-    line-height: 34rpx;
-    text-align: center;
-    white-space: nowrap;
-}
 </style>

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', () => {
@@ -66,6 +66,15 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         });
     });
 
+    const careerPaths = ref([]);
+    const currentCareer = ref(null);
+    const currentCareerLabel = computed(() => {
+        if (!currentCareer.value) {
+            return '';
+        }
+        return currentCareer.value.label;
+    });
+
     const result = ref([]);
 
     const fetchData = async () => {
@@ -117,21 +126,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 [startJobId, endJobId] = targetCareer.value.split('-');
-        const target = pathsRef.value.find((d) => d.value === targetCareer.value);
-        if (!current || !target) {
-            return;
-        }
         const params = {
-            currentJobName: current.label,
+            startJobId,
-            targetJobName: target.label
+            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 +144,54 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
                 });
                 return;
             }
-            if (typeof data !== 'undefined' && Array.isArray(data) && data.length > 0 && data[ 0 ]) {
+            if (!data) {
-                const excludes = data[ 0 ].currentSkillDetList.map((d) => d.skillId);
+                return;
-                result.value = data[ 0 ].targetSkillDetList
+            }
-                    .filter((d) => !excludes.includes(d.skillId))
+            careerPaths.value = data.map((d) => {
-                    .map((d) => {
                 return {
-                            type: d.skillType,
+                    label: d.name,
-                            title: d.skillName,
+                    value: d.jobId
-                            name: d.skillName,
-                            weight: d.skillWeight,
-                            score: d.skillScore
                 };
             });
+            if (careerPaths.value[0]) {
+                void eventResult(careerPaths.value[0]);
             }
+        } catch (e) {
+            console.warn(e);
+            careerPaths.value = [];
+        }
+    };
+
+    const eventResult = async (path) => {
+        currentCareer.value = path;
+        const params = {
+            jobId: path.value
+        };
+        try {
+            const { code, msg, data } = await $AxiosHttp.useAxiosRequest(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 +219,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
             });
             return;
         }
-        void fetchResult();
+        void fetchCareerPaths();
     };
 
     const eventProfession = (e) => {
@@ -190,6 +229,7 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         professionLabel.value = item.label;
         targetCareer.value = '';
         targetCareerLabel.value = '';
+        careerPaths.value = [];
         result.value = [];
     };
 
@@ -198,6 +238,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 +264,13 @@ export const useSkillDevelopmentStore = defineStore('skill-development', () => {
         targetCareer,
         targetCareerLabel,
         pathsRef,
+        careerPaths,
+        currentCareer,
+        currentCareerLabel,
         result,
         eventProfession,
         eventTargetCareer,
-        eventSearch
+        eventSearch,
+        eventResult
     };
 });