Merge branch 'main' of http://124.243.245.42:3000/sdz/ks-app-employment-service

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,30 +43,47 @@ const store = useSkillDevelopmentStore();
             </button>
         </div>
     </div>
-
+    <div v-if="store.careerPaths.length" class="content-section career-section">
-    <div class="content-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(index)"
+                    >
+                        <div
+                            class="career-index"
+                        >
+                            <span class="index">{{ item.index }}</span>
+                        </div>
+                        <div class="career-label">{{ item.label }}</div>
+                    </div>
+                    </template>
+                </div>
+            </scroll-view>
+        </div>
+    </div>
+    <div v-if="store.careerPaths.length" 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="skill-card">
-                <div class="skill-header">
+                <div class="skill-label">{{ item.label }}</div>
-                    <span class="skill-name">{{ skill.name }}</span>
+                <div class="skill-detail">
-                    <div class="skill-info">
+                    <div v-for="d in item.children" :key="d.label" class="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="skill-detail-item-value">
-                    </div>
+                            <div class="value-item">技能得分：{{ d.value }}</div>
-                </div>
+                            <div class="value-item">权重：{{ d.weight }}</div>
-                <div v-if="skill.tags && skill.tags.length > 0" class="skill-tags">
+                        </div>
-                    <div v-for="(tag, tagIndex) in skill.tags" :key="tagIndex" class="skill-tag">
-                        {{ tag }}
                     </div>
                 </div>
             </div>
@@ -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;
+            }
+        }
+    }
+}
+
+</style>
+
+<style lang="scss" scoped>
 .title-text {
     font-size: 32rpx;
     font-weight: 600;
     color: #167CF1;
 }
 
-.intro-text {
+.skill-card {
-    font-size: 24rpx;
+    margin-bottom: 14px;
-    line-height: 34rpx;
-    color: rgba(154, 154, 154, 1);
-    text-align: left;
-    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-    font-weight: 600;
-    margin-bottom: 90rpx;
-    width: 672rpx;
-}
-
-.skill-list {
-    display: flex;
-    flex-direction: column;
-    gap: 20rpx;
-}
-
-.skill-item {
-    width: 100%;
-    max-width: 796rpx;
-    min-height: 162rpx;
-    line-height: 40rpx;
-    border-radius: 20rpx;
-    background-color: rgba(239, 239, 239, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 28rpx;
-    text-align: center;
-    padding: 24rpx;
     box-sizing: border-box;
-    display: flex;
+    font-weight: 700;
-    flex-direction: column;
+
-    justify-content: center;
+    .skill-list {
-    overflow: visible;
+        display: flex;
-    position: relative;
+        flex-direction: column;
+        gap: 20rpx;
+    }
+
+    .skill-item {
+        width: 100%;
+        max-width: 796rpx;
+        min-height: 162rpx;
+        line-height: 40rpx;
+        border-radius: 20rpx;
+        background-color: rgba(239, 239, 239, 1);
+        color: rgba(16, 16, 16, 1);
+        font-size: 28rpx;
+        text-align: center;
+        padding: 24rpx;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        overflow: visible;
+        position: relative;
+    }
+
+    .skill-label {
+        margin-bottom: 10px;
+        font-size: 16px;
+        color: #94a3b8;
+    }
+
+    .skill-detail {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .skill-detail-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px;
+            border-radius: 3px;
+            background: #c1d2ea;
+        }
+
+        .skill-detail-item-label {
+            width: 55%;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            word-break: break-all;
+            color: #334155;
+        }
+
+        .skill-detail-item-value {
+            width: 45%;
+            padding-left: 6px;
+            color: #4f46e5;
+            box-sizing: border-box;
+
+            .value-item {
+                text-wrap: nowrap;
+            }
+        }
+    }
 }
 
-.skill-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16rpx;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.skill-name {
-    font-size: 32rpx;
-    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 {
-    display: flex;
-    align-items: center;
-    gap: 12rpx;
-    flex-shrink: 0;
-    margin-left: 16rpx;
-}
-
-.skill-score {
-    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-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/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) {

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,
+                    value: `${d.startJobId}-${d.endJobId}`
-                    startJobId: d.startJobId
+
                 };
             });
         } 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 [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 +146,68 @@ 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))
-                    .map((d) => {
-                        return {
-                            type: d.skillType,
-                            title: d.skillName,
-                            name: d.skillName,
-                            weight: d.skillWeight,
-                            score: d.skillScore
-                        };
-                    });
             }
+            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
     };
 });