00e8cebfe3
- 修复mockData.js语法错误，恢复项目正常运行 - 优化求职策略详情页拖拽功能，修复重复bug和保存逻辑 - 更新岗位级别名称：初级→普通岗，中级→技术骨干岗，高级→储备干部岗 - 更新个人档案学习时长：我的273小时(100%)，班级平均231小时 - 面试模拟页面添加视频锁定界面和背景图片 - 简历面试页面更新模板数据，添加更多岗位简历模板 - React版本降级至18.3.1解决兼容性问题
253 lines
12 KiB
JavaScript
253 lines
12 KiB
JavaScript
import { useState, useRef, useEffect } from "react";
|
||
import ScoreChart from "../ScoreChart";
|
||
import RadarChart from "../RadarChart";
|
||
import "./index.css";
|
||
|
||
export default ({ selectedItem = "求职面试初体验" }) => {
|
||
// 根据选中项目获取对应的视频URL
|
||
const getVideoUrl = () => {
|
||
switch(selectedItem) {
|
||
case "求职面试初体验":
|
||
return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJSOKoqAm.mov";
|
||
case "未来的自己":
|
||
return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJT02CMM5.mp4";
|
||
case "第一次线下面试模拟":
|
||
return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJSOKoqAm.mov"; // 使用相同视频作为示例
|
||
case "第二次线下面试模拟":
|
||
return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJT02CMM5.mp4"; // 使用相同视频作为示例
|
||
case "第三次线下面试模拟":
|
||
return "https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/teach_sys/interview_offline_vedio/recuUpJSOKoqAm.mov"; // 使用相同视频作为示例
|
||
default:
|
||
return "";
|
||
}
|
||
};
|
||
|
||
// 判断是否是锁定的面试模拟项目
|
||
const isLockedItem = () => {
|
||
return selectedItem === "第一次线下面试模拟" ||
|
||
selectedItem === "第二次线下面试模拟" ||
|
||
selectedItem === "第三次线下面试模拟";
|
||
};
|
||
|
||
// 根据选中项目获取评价数据
|
||
const getEvaluationData = () => {
|
||
if (selectedItem === "未来的自己") {
|
||
return {
|
||
totalScore: 92,
|
||
professionalScore: 39.5,
|
||
performanceScore: 55.0,
|
||
radarData: [10, 9, 10, 9],
|
||
title: "优秀表现评价",
|
||
content: `在专业能力方面，候选人对相关专业知识掌握扎实，能够深入且准确地回答与项目经验相关的复杂问题。在描述具体项目时，不仅能清晰说明自己的职责和成果，还能主动分析项目中的技术难点和解决方案，体现出优秀的实践操作能力和技术思维。对行业前沿动态有深入了解，能够结合实际工作提出创新性见解。
|
||
|
||
沟通表达上，候选人语言表达流畅自然，逻辑思维清晰有条理，能够积极主动地与面试官互动。在面对开放性问题时展现出良好的思维发散能力，回答层次分明，重点突出，表现出强烈的学习意愿和职业发展规划意识。整体表现超出预期，具备优秀的职场素养。`
|
||
};
|
||
} else if (selectedItem === "第一次线下面试模拟") {
|
||
return {
|
||
totalScore: 72,
|
||
professionalScore: 28.0,
|
||
performanceScore: 44.0,
|
||
radarData: [7, 6, 7, 7],
|
||
radarData2: [6, 6, 5, 6],
|
||
title: "初次模拟评价",
|
||
content: `在专业能力方面，候选人对基础知识有一定了解，但在深入问题上表现不够自信。回答问题时思路基本清晰，但缺乏具体案例支撑。对行业动态的了解较为表面，需要加强专业知识的深度学习。在描述项目经验时，表达略显生疏，未能充分展现个人价值。
|
||
|
||
沟通表达上，候选人表现出一定的紧张情绪，语速较快，有时会出现词不达意的情况。逻辑性有待加强，回答问题时容易偏离主题。肢体语言不够自然，眼神交流不足。建议多进行面试练习，提升表达的流畅度和自信心。整体来看，还有较大的提升空间。`
|
||
};
|
||
} else if (selectedItem === "第二次线下面试模拟") {
|
||
return {
|
||
totalScore: 81,
|
||
professionalScore: 32.5,
|
||
performanceScore: 48.5,
|
||
radarData: [8, 7, 8, 8],
|
||
radarData2: [7, 7, 6, 7],
|
||
title: "进步明显评价",
|
||
content: `在专业能力方面，候选人相比第一次有明显进步，对专业知识的理解更加深入。能够结合实际案例阐述观点，展现出一定的实践经验。对于技术问题的回答更有条理，能够抓住问题的关键点。行业认知有所提升，能够说出一些前沿趋势。
|
||
|
||
沟通表达上，紧张情绪明显缓解，语速适中，表达更加清晰。逻辑结构有所改善，能够按照"总-分-总"的结构组织答案。肢体语言更加自然，与面试官的互动增多。自信心有所提升，敢于表达自己的观点。但在一些压力问题上仍需加强应对能力。`
|
||
};
|
||
} else if (selectedItem === "第三次线下面试模拟") {
|
||
return {
|
||
totalScore: 89,
|
||
professionalScore: 36.5,
|
||
performanceScore: 52.5,
|
||
radarData: [9, 8, 9, 9],
|
||
radarData2: [8, 8, 7, 8],
|
||
title: "接近优秀评价",
|
||
content: `在专业能力方面，候选人展现出扎实的专业功底，能够深入浅出地解释复杂概念。项目经验描述详实，能够清楚说明技术难点和解决方案。对行业发展有独到见解，能够将理论与实践很好地结合。专业深度和广度都达到了较高水平。
|
||
|
||
沟通表达上，表现自然从容，完全没有紧张感。语言组织能力强，逻辑清晰，重点突出。能够根据面试官的反应及时调整表达方式，展现出良好的沟通技巧。肢体语言得体，眼神交流充分，整体气场稳定。已经基本具备了通过正式面试的能力，继续保持即可。`
|
||
};
|
||
} else {
|
||
return {
|
||
totalScore: 85,
|
||
professionalScore: 34.0,
|
||
performanceScore: 51.0,
|
||
radarData: [9, 8, 9, 9],
|
||
title: "基础面试评价",
|
||
content: `在专业能力方面，候选人对 [岗位相关专业知识] 有基本掌握，能够清晰回答与过往项目经验相关的问题，例如在描述 [具体项目] 时，能准确说明自己承担的职责和达成的成果，体现出一定的实践操作能力。但在深入探讨 [某一专业难点] 时，表述略显浅显，对行业前沿动态的了解不够全面，专业深度有提升空间。
|
||
|
||
沟通表达上，候选人语言流畅，逻辑较为清晰，能够主动回应面试官的问题，展现出良好的沟通意愿。不过在面对一些开放性问题时，思维发散性稍弱，回答的层次感不够突出，有时会出现表述重复的情况。`
|
||
};
|
||
}
|
||
};
|
||
|
||
// 判断是否应该显示评价内容
|
||
const shouldShowEvaluation = () => {
|
||
return selectedItem === "求职面试初体验" ||
|
||
selectedItem === "未来的自己" ||
|
||
selectedItem === "第一次线下面试模拟" ||
|
||
selectedItem === "第二次线下面试模拟" ||
|
||
selectedItem === "第三次线下面试模拟";
|
||
};
|
||
|
||
return (
|
||
<div className="interview-rating-wrapper">
|
||
{/* 视频播放器区域 */}
|
||
<div className="interview-rating-video-section">
|
||
<div className="interview-rating-header">
|
||
<span className="interview-rating-header-title">
|
||
钢铁是怎样炼成的
|
||
</span>
|
||
</div>
|
||
<div className="interview-rating-video">
|
||
{isLockedItem() ? (
|
||
<div className="locked-video-container" style={{
|
||
position: 'relative',
|
||
width: '100%',
|
||
height: '100%',
|
||
overflow: 'hidden'
|
||
}}>
|
||
{/* 背景图片 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
backgroundImage: `url(${
|
||
selectedItem === "第一次线下面试模拟"
|
||
? "/src/assets/images/InterviewSimulationPage/第一次线下面试模拟.jpg"
|
||
: selectedItem === "第二次线下面试模拟"
|
||
? "/src/assets/images/InterviewSimulationPage/第二次线下面试模拟.jpg"
|
||
: "/src/assets/images/InterviewSimulationPage/第三次线下面试模拟.jpg"
|
||
})`,
|
||
backgroundSize: 'cover',
|
||
backgroundPosition: 'center',
|
||
filter: 'blur(20px)',
|
||
transform: 'scale(1.1)'
|
||
}} />
|
||
|
||
{/* 半透明遮罩 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||
}} />
|
||
|
||
{/* 锁图标和文字 */}
|
||
<div style={{
|
||
position: 'absolute',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
gap: '16px'
|
||
}}>
|
||
<img
|
||
src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/teach_sys_icon/recuVOrz2GnJdK.png"
|
||
alt="lock"
|
||
style={{ width: '280px', height: '280px' }}
|
||
/>
|
||
<span style={{
|
||
color: '#fff',
|
||
fontSize: '16px',
|
||
fontWeight: '500',
|
||
textAlign: 'center',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
||
padding: '8px 16px',
|
||
borderRadius: '4px'
|
||
}}>
|
||
DEMO演示，非学员无查看权限
|
||
</span>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<video src={getVideoUrl()} controls></video>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 评价内容区域 - 仅在特定项目时显示 */}
|
||
{shouldShowEvaluation() && (
|
||
<>
|
||
{/* 面试评分区域 */}
|
||
<div className="interview-evaluation-charts-wrapper">
|
||
<div className="interview-rating-header">
|
||
<span className="interview-rating-header-title">面试评分</span>
|
||
</div>
|
||
<div className="charts-content">
|
||
<div className="charts-content-top">
|
||
<ScoreChart className="score-chart" value={getEvaluationData().totalScore} />
|
||
<div className="score-info">
|
||
<div className="score-info-item item1">
|
||
<span className="score-info-item-title">
|
||
专业能力评分(40)
|
||
</span>
|
||
<span className="score-info-item-value">{getEvaluationData().professionalScore}</span>
|
||
</div>
|
||
<div className="score-info-item item2">
|
||
<span className="score-info-item-title">
|
||
现场表现评分(60)
|
||
</span>
|
||
<span className="score-info-item-value">{getEvaluationData().performanceScore}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="charts-content-bottom">
|
||
<RadarChart
|
||
className="radar-chart"
|
||
data={getEvaluationData().radarData}
|
||
indicator={[
|
||
{ name: "核心知识掌握与精准应用", max: 10 },
|
||
{ name: "问题分析方案设计与成果表达", max: 10 },
|
||
{ name: "产业认知与行业趋势洞察", max: 10 },
|
||
{ name: "企业工作流理解与实践", max: 10 },
|
||
]}
|
||
/>
|
||
<RadarChart
|
||
className="radar-chart"
|
||
data={getEvaluationData().radarData2 || [7, 8, 6, 7]}
|
||
indicator={[
|
||
{ name: "沟通表达与逻辑思维", max: 10 },
|
||
{ name: "团队协作与责任意识", max: 10 },
|
||
{ name: "学习能力与适应能力", max: 10 },
|
||
{ name: "职业素养与发展潜力", max: 10 },
|
||
]}
|
||
lineClolr="#FFE4D9"
|
||
areaColor="#FFD4C1"
|
||
areaBorderColor="#FFB89A"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 基础面试评价区域 */}
|
||
<div className="interview-evaluation-text-wrapper">
|
||
<div className="interview-rating-header">
|
||
<span className="interview-rating-header-title">{getEvaluationData().title}</span>
|
||
</div>
|
||
<div className="interview-rating-text">
|
||
{getEvaluationData().content}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}; |