119 lines
6.0 KiB
JavaScript
119 lines
6.0 KiB
JavaScript
const switchDots = document.querySelectorAll('.switch-dot');
|
||
const father = document.querySelector('.progress-group');
|
||
const progress_btn = document.querySelector('.progress-btn');
|
||
let i = 0;
|
||
let progress = null;
|
||
let change = null;
|
||
let submit = null;
|
||
var flag = 1;
|
||
|
||
const projectList = [
|
||
{
|
||
name: "校园智能化办公协作平台",
|
||
direction: "基于SpringBoot+Vue3的全栈办公协作系统，覆盖考勤、审批、文档管理、项目协作等校园场景，适配多终端访问。",
|
||
effect: "1. 实现校园办公流程数字化，提升行政效率50%以上；<br>2. 支持自定义流程配置，适配不同部门的办公需求；<br>3. 集成数据统计模块，为校园管理提供决策依据。",
|
||
leader: "李四",
|
||
members: "1. 张三（实施） 2. 王五（测试）<br>3. 赵六（前端） 4. 孙七（后端）",
|
||
progress: 70
|
||
},
|
||
|
||
{
|
||
name: "AI影视人才匹配平台",
|
||
direction: "基于机器学习的影视行业人才推荐系统，整合简历、作品、项目经验等数据，实现精准人才-岗位匹配。",
|
||
effect: "1. 降低影视行业招聘成本30%；<br>2. 提升人才匹配准确率至85%以上；<br>3. 支持企业人才库管理与候选人追踪。",
|
||
leader: "赵六",
|
||
members: "1. 孙七（算法） 2. 张三（前端）<br>3. 李四（后端） 4. 王五（测试）",
|
||
progress: 40
|
||
},
|
||
|
||
{
|
||
name: "UE5",
|
||
direction: "基于机器学习的影视行业人才推荐系统，整合简历、作品、项目经验等数据，实现精准人才-岗位匹配。",
|
||
effect: "1. 降低影视行业招聘成本30%；<br>2. 提升人才匹配准确率至85%以上；<br>3. 支持企业人才库管理与候选人追踪。",
|
||
leader: "123",
|
||
members: "1. 孙七（算法） 2. 张三（前端）<br>3. 李四（后端） 4. 王五（测试）",
|
||
progress: 60
|
||
}
|
||
];
|
||
|
||
|
||
|
||
|
||
|
||
switchDots.forEach((dot, index) => {
|
||
dot.addEventListener('click', () => {
|
||
switchDots.forEach(d => d.classList.remove('active'));
|
||
dot.classList.add('active');
|
||
console.log(index+" "+projectList[index].name);
|
||
// 替换项目内容
|
||
const project = projectList[index];
|
||
i = index;
|
||
console.log(i);
|
||
|
||
// console.log(project);
|
||
// console.log(project.name);
|
||
|
||
// const l = document.querySelector('.research-left .research-item .p');
|
||
// console.log(l);
|
||
|
||
document.querySelector('.research-left .research-item:nth-child(1) span').textContent = project.name;
|
||
document.querySelector('.research-left .research-item:nth-child(2) p').innerHTML = project.direction;
|
||
document.querySelector('.research-left .research-item:nth-child(3) p').innerHTML = project.effect;
|
||
document.querySelector('.research-right .research-item:nth-child(1) span').textContent = project.leader;
|
||
document.querySelector('.research-right .research-item:nth-child(2) p').innerHTML = project.members;
|
||
document.querySelector('.progress-label span:nth-child(2)').textContent = project.progress + '%';
|
||
document.querySelector('.progress-fill').style.width = project.progress + '%';
|
||
// change = document.querySelector('.progress-fill').style.width;
|
||
// console.log("change"+change);
|
||
|
||
// console.log("我是：：："+project.progress);
|
||
|
||
|
||
});
|
||
});
|
||
progress_btn.addEventListener('click', function() {
|
||
console.log("第一层flag"+flag);
|
||
if(flag==1){
|
||
progress = document.createElement('input');
|
||
submit = document.createElement('input');
|
||
father.appendChild(progress);
|
||
father.appendChild(submit);
|
||
// 进度
|
||
progress.type = 'text';
|
||
progress.placeholder = "请输入0-100的数字";
|
||
|
||
// 提交按钮
|
||
submit.type = 'button';
|
||
submit.value = '修改';
|
||
flag = 0;
|
||
}
|
||
|
||
switchDots.forEach((dot, index) => {
|
||
dot.addEventListener('click', () => {
|
||
if(progress!=null && submit!=null && flag==0){
|
||
console.log("第二层flag"+flag);
|
||
father.removeChild(progress);
|
||
father.removeChild(submit);
|
||
flag=1;
|
||
}
|
||
});
|
||
});
|
||
|
||
submit.addEventListener('click',function(){
|
||
// console.log(progress.value);
|
||
|
||
// document.querySelector('.progress-label span:nth-child(2)').textContent = projectList[i].progress + '%';
|
||
// document.querySelector('.progress-fill').style.width = projectList[i].progress + '%';
|
||
if(progress.value>100 || progress.value<0){
|
||
alert("输入不正确，请重新输入！！！");
|
||
}else{
|
||
projectList[i].progress = progress.value;
|
||
document.querySelector('.progress-label span:nth-child(2)').textContent = projectList[i].progress + '%';
|
||
document.querySelector('.progress-fill').style.width = projectList[i].progress + '%';
|
||
}
|
||
// console.log("i:"+i);
|
||
// console.log("projectList[i]:"+projectList[i].progress);
|
||
|
||
})
|
||
|
||
}); |