Merge branch 'main' of http://124.243.245.42:3000/sdz/ks-app-employment-service
This commit is contained in:
francis_fh
@@ -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'
|
||||
|
||||
@@ -43,30 +43,47 @@ const store = useSkillDevelopmentStore();
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div v-if="store.careerPaths.length" 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(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 class="skill-header">
|
||||
<span class="skill-name">{{ skill.name }}</span>
|
||||
<div class="skill-info">
|
||||
<span class="skill-score">技能分数: {{ skill.score }}</span>
|
||||
<span class="skill-weight">权重: {{ skill.weight }}</span>
|
||||
</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 v-for="(item, index) in store.result" :key="index" class="skill-card">
|
||||
<div class="skill-label">{{ item.label }}</div>
|
||||
<div class="skill-detail">
|
||||
<div v-for="d in item.children" :key="d.label" class="skill-detail-item">
|
||||
<div class="skill-detail-item-label">{{ d.label }}</div>
|
||||
<div class="skill-detail-item-value">
|
||||
<div class="value-item">技能得分：{{ d.value }}</div>
|
||||
<div class="value-item">权重：{{ d.weight }}</div>
|
||||
</div>
|
||||
</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 {
|
||||
font-size: 24rpx;
|
||||
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;
|
||||
.skill-card {
|
||||
margin-bottom: 14px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
|
||||
.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;
|
||||
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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user