295 lines
7.8 KiB
Vue
295 lines
7.8 KiB
Vue
<template>
|
||
<view class="skill-development">
|
||
<view class="content-section">
|
||
<view class="section-title">
|
||
<uni-icons type="person-filled" size="18" color="#000000"></uni-icons>
|
||
<text class="title-text">技能发展路径</text>
|
||
</view>
|
||
|
||
<view class="intro-text">
|
||
基于您的当前职业和目标职业,以下是您需要重点发展的技能:
|
||
</view>
|
||
|
||
<view class="skill-list">
|
||
<view
|
||
class="skill-item"
|
||
v-for="(skill, index) in skillList"
|
||
:key="index"
|
||
@click="handleSkillItemClick(skill)"
|
||
>
|
||
<view class="skill-header">
|
||
<text class="skill-name">{{ skill.name }}</text>
|
||
<text class="skill-weight">权重: {{ skill.weight }}</text>
|
||
</view>
|
||
<view class="skill-tags">
|
||
<view
|
||
class="skill-tag"
|
||
v-for="(tag, tagIndex) in skill.tags"
|
||
:key="tagIndex"
|
||
>
|
||
{{ tag }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 技能权重弹出层 -->
|
||
<SkillWeightPopup
|
||
ref="skillWeightPopup"
|
||
:skill-name="selectedSkillName"
|
||
:weight="selectedSkillWeight"
|
||
:current-level="selectedSkillLevel"
|
||
@close="handlePopupClose"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import SkillWeightPopup from './SkillWeightPopup.vue';
|
||
import { getSkillNum, getSkillsHeatAnalysisList } from '@/apiRc/jobSkill.js';
|
||
|
||
// 技能列表（后续从接口获取）
|
||
const skillList = ref([
|
||
{
|
||
name: '项目管理(PMP)',
|
||
weight: '0.98',
|
||
tags: ['核心技能', '管理能力'],
|
||
currentLevel: 3
|
||
},
|
||
{
|
||
name: '团队领导力',
|
||
weight: '0.90',
|
||
tags: ['核心技能', '软技能'],
|
||
currentLevel: 2
|
||
},
|
||
{
|
||
name: '云安全架构',
|
||
weight: '0.85',
|
||
tags: ['技术技能', '网络安全'],
|
||
currentLevel: 4
|
||
},
|
||
{
|
||
name: '财务预算规划',
|
||
weight: '0.60',
|
||
tags: ['软技能', '管理能力'],
|
||
currentLevel: 1
|
||
}
|
||
]);
|
||
|
||
// 技能数量
|
||
const skillCount = ref(0);
|
||
const isLoadingSkillCount = ref(false);
|
||
|
||
// 技能热度分析列表
|
||
const heatAnalysisList = ref([]);
|
||
const isLoadingHeatAnalysis = ref(false);
|
||
|
||
// 弹出层引用
|
||
const skillWeightPopup = ref(null);
|
||
|
||
// 选中的技能信息
|
||
const selectedSkillName = ref('');
|
||
const selectedSkillWeight = ref('');
|
||
const selectedSkillLevel = ref(0);
|
||
|
||
// 获取技能数量
|
||
async function fetchSkillNum(skillType = null) {
|
||
isLoadingSkillCount.value = true;
|
||
try {
|
||
const response = await getSkillNum({
|
||
skillType: skillType
|
||
});
|
||
skillCount.value = response?.data ?? 0;
|
||
} catch (error) {
|
||
console.error('获取技能数量失败:', error);
|
||
skillCount.value = 0;
|
||
} finally {
|
||
isLoadingSkillCount.value = false;
|
||
}
|
||
}
|
||
|
||
// 获取技能热度分析列表
|
||
async function fetchSkillsHeatAnalysis(startDate, endDate) {
|
||
isLoadingHeatAnalysis.value = true;
|
||
try {
|
||
const params = {};
|
||
if (startDate) {
|
||
params.startDate = startDate;
|
||
}
|
||
if (endDate) {
|
||
params.endDate = endDate;
|
||
}
|
||
const response = await getSkillsHeatAnalysisList(params);
|
||
heatAnalysisList.value = Array.isArray(response?.data) ? response.data : [];
|
||
} catch (error) {
|
||
console.error('获取技能热度分析失败:', error);
|
||
heatAnalysisList.value = [];
|
||
} finally {
|
||
isLoadingHeatAnalysis.value = false;
|
||
}
|
||
}
|
||
|
||
// 获取技能发展数据（从接口获取）
|
||
async function getSkillDevelopmentData() {
|
||
// TODO: 调用接口获取技能发展数据
|
||
// const response = await getSkillDevelopment();
|
||
// if (response && response.code === 200) {
|
||
// skillList.value = response.data || [];
|
||
// }
|
||
}
|
||
|
||
// 处理技能项点击
|
||
function handleSkillItemClick(skill) {
|
||
selectedSkillName.value = skill.name || '';
|
||
selectedSkillWeight.value = skill.weight || '0';
|
||
selectedSkillLevel.value = skill.currentLevel || 0;
|
||
skillWeightPopup.value?.open();
|
||
}
|
||
|
||
// 处理弹出层关闭
|
||
function handlePopupClose() {
|
||
// 可以在这里处理关闭后的逻辑
|
||
}
|
||
|
||
onMounted(() => {
|
||
getSkillDevelopmentData();
|
||
// 获取技能数量（不传skillType获取全部）
|
||
fetchSkillNum();
|
||
|
||
// 获取技能热度分析（默认查询最近7天）
|
||
const endDate = new Date();
|
||
const startDate = new Date();
|
||
startDate.setDate(startDate.getDate() - 7);
|
||
const formatDate = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
};
|
||
fetchSkillsHeatAnalysis(formatDate(startDate), formatDate(endDate));
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.skill-development {
|
||
padding: 10rpx 0 20rpx;
|
||
background-color: #EBF4FF;
|
||
min-height:95%;
|
||
}
|
||
|
||
.content-section {
|
||
background-color: #EBF4FF;
|
||
padding: 28rpx;
|
||
box-sizing: border-box;
|
||
overflow: visible;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 24rpx;
|
||
margin-top: -20rpx;
|
||
}
|
||
|
||
.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;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
overflow: visible;
|
||
position: relative;
|
||
}
|
||
|
||
.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-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;
|
||
flex-shrink: 0;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.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>
|