1
This commit is contained in:
张成
488
admin/src/views/account/resume_info_detail.vue
Normal file
488
admin/src/views/account/resume_info_detail.vue
Normal file
@@ -0,0 +1,488 @@
|
||||
<template>
|
||||
<FloatPanel
|
||||
ref="floatPanel"
|
||||
title="简历详情"
|
||||
position="right"
|
||||
:show-back="true"
|
||||
back-text="返回"
|
||||
@back="handleBack"
|
||||
>
|
||||
<template #header-right>
|
||||
<Button type="primary" @click="handleAnalyzeAI" :loading="analyzing">AI 分析</Button>
|
||||
</template>
|
||||
|
||||
<div class="resume-detail-content" v-if="resumeData">
|
||||
<Spin fix v-if="loading">
|
||||
<Icon type="ios-loading" size="18" class="spin-icon-load"></Icon>
|
||||
<div>加载中...</div>
|
||||
</Spin>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<Card title="基本信息" style="margin-bottom: 16px;">
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">姓名：</span>
|
||||
<span class="value">{{ resumeData.fullName || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">性别：</span>
|
||||
<span class="value">{{ resumeData.gender || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">年龄：</span>
|
||||
<span class="value">{{ resumeData.age || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">电话：</span>
|
||||
<span class="value">{{ resumeData.phone || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">邮箱：</span>
|
||||
<span class="value">{{ resumeData.email || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">所在地：</span>
|
||||
<span class="value">{{ resumeData.location || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">工作年限：</span>
|
||||
<span class="value">{{ resumeData.workYears || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">当前职位：</span>
|
||||
<span class="value">{{ resumeData.currentPosition || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">当前公司：</span>
|
||||
<span class="value">{{ resumeData.currentCompany || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<!-- 教育背景 -->
|
||||
<Card title="教育背景" style="margin-bottom: 16px;">
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">学历：</span>
|
||||
<span class="value">{{ resumeData.education || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">专业：</span>
|
||||
<span class="value">{{ resumeData.major || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">毕业院校：</span>
|
||||
<span class="value">{{ resumeData.school || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">毕业年份：</span>
|
||||
<span class="value">{{ resumeData.graduationYear || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<!-- 期望信息 -->
|
||||
<Card title="期望信息" style="margin-bottom: 16px;">
|
||||
<Row :gutter="16">
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">期望职位：</span>
|
||||
<span class="value">{{ resumeData.expectedPosition || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">期望薪资：</span>
|
||||
<span class="value">{{ resumeData.expectedSalary || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">期望地点：</span>
|
||||
<span class="value">{{ resumeData.expectedLocation || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="12">
|
||||
<div class="info-item">
|
||||
<span class="label">期望行业：</span>
|
||||
<span class="value">{{ resumeData.expectedIndustry || '-' }}</span>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<!-- 技能标签 -->
|
||||
<Card title="技能标签" style="margin-bottom: 16px;">
|
||||
<div v-if="skillTags && skillTags.length > 0">
|
||||
<Tag v-for="(skill, index) in skillTags" :key="index" color="blue" style="margin: 4px;">{{ skill }}</Tag>
|
||||
</div>
|
||||
<div v-else class="no-data">暂无技能标签</div>
|
||||
</Card>
|
||||
|
||||
<!-- 技能描述 -->
|
||||
<Card title="技能描述" style="margin-bottom: 16px;" v-if="resumeData.skillDescription">
|
||||
<div class="text-content">{{ resumeData.skillDescription }}</div>
|
||||
</Card>
|
||||
|
||||
<!-- 工作经历 -->
|
||||
<Card title="工作经历" style="margin-bottom: 16px;" v-if="workExperience && workExperience.length > 0">
|
||||
<Timeline>
|
||||
<TimelineItem v-for="(work, index) in workExperience" :key="index">
|
||||
<p class="work-title">
|
||||
<strong>{{ work.position }}</strong>
|
||||
<span class="work-company"> - {{ work.company }}</span>
|
||||
</p>
|
||||
<p class="work-time" v-if="work.startDate || work.endDate">
|
||||
{{ work.startDate }} - {{ work.endDate || '至今' }}
|
||||
</p>
|
||||
<p class="work-content" v-if="work.content">{{ work.content }}</p>
|
||||
</TimelineItem>
|
||||
</Timeline>
|
||||
</Card>
|
||||
|
||||
<!-- 项目经验 -->
|
||||
<Card title="项目经验" style="margin-bottom: 16px;" v-if="projectExperience && projectExperience.length > 0">
|
||||
<div v-for="(project, index) in projectExperience" :key="index" class="project-item" style="margin-bottom: 20px;">
|
||||
<p class="project-title">
|
||||
<strong>{{ project.name }}</strong>
|
||||
<span class="project-role" v-if="project.role"> - {{ project.role }}</span>
|
||||
</p>
|
||||
<p class="project-time" v-if="project.startDate || project.endDate">
|
||||
{{ project.startDate }} - {{ project.endDate || '至今' }}
|
||||
</p>
|
||||
<p class="project-desc" v-if="project.description">{{ project.description }}</p>
|
||||
<p class="project-performance" v-if="project.performance">
|
||||
<strong>项目成果：</strong>{{ project.performance }}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- 简历内容 -->
|
||||
<Card title="简历完整内容" style="margin-bottom: 16px;" v-if="resumeData.resumeContent">
|
||||
<div class="text-content" style="white-space: pre-wrap;">{{ resumeData.resumeContent }}</div>
|
||||
</Card>
|
||||
|
||||
<!-- AI 分析结果 -->
|
||||
<Card title="AI 分析结果" style="margin-bottom: 16px;">
|
||||
<Row :gutter="16">
|
||||
<Col span="24">
|
||||
<div class="info-item">
|
||||
<span class="label">竞争力评分：</span>
|
||||
<span class="value" :style="{ color: getCompetitivenessColor(resumeData.aiCompetitiveness), fontSize: '18px', fontWeight: 'bold' }">
|
||||
{{ resumeData.aiCompetitiveness || 0 }} 分
|
||||
</span>
|
||||
<Progress
|
||||
:percent="resumeData.aiCompetitiveness || 0"
|
||||
:stroke-color="getCompetitivenessColor(resumeData.aiCompetitiveness)"
|
||||
style="margin-top: 8px; width: 300px;"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="24" v-if="resumeData.aiStrengths">
|
||||
<div class="info-item ai-section">
|
||||
<div class="ai-section-header">
|
||||
<Icon type="ios-thumbs-up" color="#19be6b" size="18" />
|
||||
<span class="label">优势分析</span>
|
||||
</div>
|
||||
<div class="text-content ai-content">{{ resumeData.aiStrengths }}</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="24" v-if="resumeData.aiWeaknesses">
|
||||
<div class="info-item ai-section">
|
||||
<div class="ai-section-header">
|
||||
<Icon type="ios-warning" color="#ff9900" size="18" />
|
||||
<span class="label">劣势分析</span>
|
||||
</div>
|
||||
<div class="text-content ai-content">{{ resumeData.aiWeaknesses }}</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="24" v-if="resumeData.aiCareerSuggestion">
|
||||
<div class="info-item ai-section">
|
||||
<div class="ai-section-header">
|
||||
<Icon type="ios-bulb" color="#2d8cf0" size="18" />
|
||||
<span class="label">职业建议</span>
|
||||
</div>
|
||||
<div class="text-content ai-content">{{ resumeData.aiCareerSuggestion }}</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="24" v-if="aiSkillTags && aiSkillTags.length > 0">
|
||||
<div class="info-item">
|
||||
<span class="label">AI 提取的技能标签：</span>
|
||||
<div style="margin-top: 8px;">
|
||||
<Tag v-for="(skill, index) in aiSkillTags" :key="index" color="green" style="margin: 4px;">{{ skill }}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span="24" v-if="!resumeData.aiCompetitiveness && !resumeData.aiStrengths">
|
||||
<div class="no-data">
|
||||
<Icon type="ios-information-circle" size="24" color="#c5c8ce" />
|
||||
<p>暂无 AI 分析结果，请点击上方"AI 分析"按钮进行分析</p>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<!-- 原始数据（可展开） -->
|
||||
<Card title="原始数据" style="margin-bottom: 16px;">
|
||||
<Collapse>
|
||||
<Panel name="originalData">
|
||||
查看原始 JSON 数据
|
||||
<template slot="content">
|
||||
<pre class="json-preview">{{ JSON.stringify(originalDataObj, null, 2) }}</pre>
|
||||
</template>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Card>
|
||||
</div>
|
||||
</FloatPanel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import resumeInfoServer from '@/api/profile/resume_info_server.js'
|
||||
|
||||
export default {
|
||||
name: 'ResumeInfoDetail',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
analyzing: false,
|
||||
resumeData: null,
|
||||
skillTags: [],
|
||||
workExperience: [],
|
||||
projectExperience: [],
|
||||
aiSkillTags: [],
|
||||
originalDataObj: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async show(resumeId) {
|
||||
this.$refs.floatPanel.show()
|
||||
await this.loadResumeData(resumeId)
|
||||
},
|
||||
async loadResumeData(resumeId) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await resumeInfoServer.getById(resumeId)
|
||||
this.resumeData = res.data || {}
|
||||
|
||||
// 解析 JSON 字段
|
||||
this.skillTags = this.parseJsonField(this.resumeData.skills) || []
|
||||
this.workExperience = this.parseJsonField(this.resumeData.workExperience) || []
|
||||
this.projectExperience = this.parseJsonField(this.resumeData.projectExperience) || []
|
||||
this.aiSkillTags = this.parseJsonField(this.resumeData.aiSkillTags) || []
|
||||
|
||||
// 解析原始数据
|
||||
this.originalDataObj = this.parseJsonField(this.resumeData.originalData) || {}
|
||||
} catch (error) {
|
||||
console.error('加载简历详情失败:', error)
|
||||
this.$Message.error('加载简历详情失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
parseJsonField(field) {
|
||||
if (!field) return null
|
||||
if (typeof field === 'string') {
|
||||
try {
|
||||
return JSON.parse(field)
|
||||
} catch (e) {
|
||||
return field
|
||||
}
|
||||
}
|
||||
return field
|
||||
},
|
||||
async handleAnalyzeAI() {
|
||||
if (!this.resumeData || !this.resumeData.resumeId) {
|
||||
this.$Message.warning('简历ID不存在')
|
||||
return
|
||||
}
|
||||
|
||||
this.analyzing = true
|
||||
try {
|
||||
await resumeInfoServer.analyzeWithAI(this.resumeData.resumeId)
|
||||
this.$Message.success('AI 分析完成')
|
||||
// 重新加载数据
|
||||
await this.loadResumeData(this.resumeData.resumeId)
|
||||
} catch (error) {
|
||||
console.error('AI 分析失败:', error)
|
||||
this.$Message.error('AI 分析失败: ' + (error.message || '请稍后重试'))
|
||||
} finally {
|
||||
this.analyzing = false
|
||||
}
|
||||
},
|
||||
handleBack() {
|
||||
this.$refs.floatPanel.hide()
|
||||
this.$emit('on-close')
|
||||
},
|
||||
getCompetitivenessColor(score) {
|
||||
if (!score) return '#666'
|
||||
if (score >= 80) return '#19be6b'
|
||||
if (score >= 60) return '#2d8cf0'
|
||||
return '#ed4014'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.resume-detail-content {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
font-weight: 600;
|
||||
color: #515a6e;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
color: #515a6e;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.work-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.work-company {
|
||||
color: #808695;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.work-time {
|
||||
color: #808695;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.work-content {
|
||||
color: #515a6e;
|
||||
line-height: 1.6;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.project-item {
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
|
||||
.project-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.project-role {
|
||||
color: #808695;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.project-time {
|
||||
color: #808695;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
color: #515a6e;
|
||||
line-height: 1.6;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.project-performance {
|
||||
color: #19be6b;
|
||||
line-height: 1.6;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: #c5c8ce;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.no-data p {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* AI 分析区域样式 */
|
||||
.ai-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #2d8cf0;
|
||||
}
|
||||
|
||||
.ai-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ai-section-header .label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #17233d;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ai-content {
|
||||
padding-left: 26px;
|
||||
line-height: 1.8;
|
||||
color: #515a6e;
|
||||
}
|
||||
|
||||
.json-preview {
|
||||
background: #f8f8f9;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user