mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 10:56:44 +08:00
391 lines
10 KiB
Vue
391 lines
10 KiB
Vue
<template>
|
|
<div class="growth" v-loading="loading" id="scrollContainer">
|
|
<div class="growth-left">
|
|
<div class="navbar">
|
|
<div style="display: flex; flex: 1">
|
|
<div class="nav-title">我的专业力必修</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="growth-item" v-for="item of list" :id="item.id">
|
|
<div class="growth-nav">
|
|
<div class="growth-name">{{ item.growthName }}</div>
|
|
<div class="f-a-c">
|
|
<div
|
|
class="growth-state"
|
|
:style="{
|
|
color:
|
|
item.learningState === 0
|
|
? '#999999'
|
|
: item.learningState === 1
|
|
? '#6ba158'
|
|
: '#F2903D',
|
|
}"
|
|
>
|
|
{{
|
|
item.learningState === 0
|
|
? "未开始"
|
|
: item.learningState === 1
|
|
? "已完成"
|
|
: "进行中"
|
|
}}
|
|
</div>
|
|
<div class="growth-btn" @click="jumpRouter(item)">去学习</div>
|
|
</div>
|
|
</div>
|
|
<template v-if="item.description">
|
|
<div class="tip-title">说明</div>
|
|
<div class="tip-content">
|
|
{{ item.description || "暂无说明" }}
|
|
</div>
|
|
</template>
|
|
|
|
<div class="progress-title">学习进度</div>
|
|
|
|
<div class="progress-content">
|
|
<div class="f-j-b" style="margin-bottom: 10px">
|
|
<div class="f-a-c">
|
|
<div style="font-size: 16px; color: #333333">必修进度</div>
|
|
<div style="font-size: 18px; color: #999999; margin-left: 12px">
|
|
{{ item.requiredTaskCompletedNum }}/{{ item.requiredTaskNum }}
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 18px; color: #0077ec">
|
|
{{ requiredTaskCompletionRate(item) }}%
|
|
</div>
|
|
</div>
|
|
<el-progress
|
|
:stroke-width="6"
|
|
:show-text="false"
|
|
:percentage="requiredTaskCompletionRate(item)"
|
|
color="#0077EC"
|
|
></el-progress>
|
|
</div>
|
|
<template v-if="item.electiveTaskNum !== 0">
|
|
<div class="progress-content">
|
|
<div class="f-j-b" style="margin-bottom: 10px">
|
|
<div class="f-a-c">
|
|
<div style="font-size: 16px; color: #333333">选修进度</div>
|
|
<div style="font-size: 18px; color: #999999; margin-left: 12px">
|
|
{{ item.electiveTaskCompletedNum }}/{{ item.electiveTaskNum }}
|
|
</div>
|
|
<el-tooltip
|
|
class="item"
|
|
effect="light"
|
|
:content="`还需完成${item.electivePoorNum}个选修任务`"
|
|
placement="top-start"
|
|
>
|
|
<i class="el-icon-question"></i>
|
|
</el-tooltip>
|
|
</div>
|
|
<div style="font-size: 18px; color: #0077ec">
|
|
{{ electiveTaskCompletionRate(item) }}%
|
|
</div>
|
|
</div>
|
|
<el-progress
|
|
:stroke-width="6"
|
|
:show-text="false"
|
|
color="#0077EC"
|
|
:percentage="electiveTaskCompletionRate(item)"
|
|
></el-progress>
|
|
</div>
|
|
</template>
|
|
<div class="progress-content">
|
|
<div class="f-j-b" style="margin-bottom: 10px">
|
|
<div class="f-a-c">
|
|
<div style="font-size: 16px; color: #333333">总进度</div>
|
|
<div style="font-size: 18px; color: #999999; margin-left: 12px">
|
|
{{ item.totalTaskCompletedNum }}/{{ item.totalTaskNum }}
|
|
</div>
|
|
</div>
|
|
<div style="font-size: 18px; color: #0077ec">
|
|
{{ totalTaskCompletionRate(item) }}%
|
|
</div>
|
|
</div>
|
|
<el-progress
|
|
:stroke-width="6"
|
|
:show-text="false"
|
|
color="#0077EC"
|
|
:percentage="totalTaskCompletionRate(item)"
|
|
></el-progress>
|
|
</div>
|
|
<div class="growth-bg-icon">
|
|
<img src="@/assets/images/growth/growth-bg-icon.png" />
|
|
</div>
|
|
</div>
|
|
<template v-if="!list.length">
|
|
<div class="empty">
|
|
<el-empty :image-size="200"></el-empty>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<!-- <template v-if="!list || list.length < 2">
|
|
<div class="growth-right">
|
|
<div class="title">专业力必修</div>
|
|
<div
|
|
:key="item.id"
|
|
class="item-growth"
|
|
:class="activeItem.id == item.id ? 'active' : ''"
|
|
v-for="item of list"
|
|
>
|
|
<div class="icon"></div>
|
|
<div @click="handlerAnchor(item)">
|
|
{{ item.growthName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { listData, getTotalGrowthTaskDetail } from "@/api/growth/growthpath";
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
loading: false,
|
|
totalData: {},
|
|
activeItem: {},
|
|
};
|
|
},
|
|
computed: {
|
|
// 完成进度
|
|
totalTaskCompletionRate() {
|
|
return (item) => {
|
|
if (item.totalTaskCompletedNum && item.totalTaskNum) {
|
|
let num = item.totalTaskCompletedNum / item.totalTaskNum;
|
|
num = num * 100;
|
|
num = num.toFixed(0);
|
|
return Number(num);
|
|
} else {
|
|
return 0;
|
|
}
|
|
};
|
|
},
|
|
// 选修进度
|
|
electiveTaskCompletionRate() {
|
|
return (item) => {
|
|
if (item.electiveTaskCompletedNum && item.electiveTaskNum) {
|
|
let num = item.electiveTaskCompletedNum / item.electiveTaskNum;
|
|
num = num * 100;
|
|
num = num.toFixed(0);
|
|
return Number(num);
|
|
} else if (item.electiveTaskNum == 0) {
|
|
return 100;
|
|
} else {
|
|
return 0;
|
|
}
|
|
};
|
|
},
|
|
// 必修进度
|
|
requiredTaskCompletionRate() {
|
|
return (item) => {
|
|
if (item.requiredTaskCompletedNum && item.requiredTaskNum) {
|
|
let num = item.requiredTaskCompletedNum / item.requiredTaskNum;
|
|
num = num * 100;
|
|
num = num.toFixed(0);
|
|
return Number(num);
|
|
} else {
|
|
return 0;
|
|
}
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
select(item) {},
|
|
jumpRouter(item) {
|
|
let studentPath = process.env.VUE_APP_STUDENT_PATH;
|
|
let params = encodeURIComponent("routerId=" + item.id);
|
|
this.$router.push(
|
|
"/forward?to=" + studentPath + "/growthList¶ms=" + params
|
|
);
|
|
},
|
|
|
|
handlerAnchor(item, index) {
|
|
this.activeItem = item;
|
|
let dom = document.getElementById(`${item.id}`);
|
|
dom.classList.add("handler-add-padding");
|
|
dom.scrollIntoView({ behavior: "smooth" });
|
|
},
|
|
},
|
|
created() {
|
|
this.loading = true;
|
|
listData().then((res) => {
|
|
this.activeItem = res.data[0];
|
|
this.list = res.data;
|
|
this.loading = false;
|
|
});
|
|
getTotalGrowthTaskDetail().then((res) => {
|
|
this.totalData = res.data;
|
|
});
|
|
// 处理滚动事件的代码
|
|
let that = this;
|
|
window.addEventListener("scroll", function () {
|
|
let dom = document.getElementById(`${that.activeItem.id}`);
|
|
if (dom) {
|
|
dom.classList.remove("handler-add-padding");
|
|
}
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.f-a-c {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.f-j-b {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.f-j-c {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.growth {
|
|
.empty {
|
|
height: 600px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
}
|
|
.el-icon-question {
|
|
color: #387df7;
|
|
font-size: 16px;
|
|
margin-left: 5px;
|
|
}
|
|
.handler-add-padding {
|
|
padding: 100px 38px 66px 40px !important;
|
|
margin-top: -80px;
|
|
}
|
|
display: flex;
|
|
.growth-left {
|
|
margin-right: 10px;
|
|
|
|
flex: 1;
|
|
.growth-item {
|
|
background: #ffffff;
|
|
padding: 30px 38px 66px 40px;
|
|
margin-bottom: 35px;
|
|
position: relative;
|
|
.growth-bg-icon {
|
|
position: absolute;
|
|
right: 92px;
|
|
bottom: 0;
|
|
}
|
|
.progress-title {
|
|
// font-weight: 700;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
margin: 28px 0 20px 0;
|
|
}
|
|
.progress-content {
|
|
margin-bottom: 28px;
|
|
}
|
|
.tip-title {
|
|
// font-weight: 700;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
margin: 30px 0 10px 0;
|
|
}
|
|
.tip-content {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
line-height: 30px;
|
|
}
|
|
.growth-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 28px;
|
|
border-bottom: 2px solid #f5f5f5;
|
|
}
|
|
.growth-name {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: #0071ed;
|
|
}
|
|
.growth-state {
|
|
font-size: 15px;
|
|
margin-right: 18px;
|
|
}
|
|
.growth-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 120px;
|
|
height: 36px;
|
|
background: #f2903d;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 90px;
|
|
padding-left: 40px;
|
|
margin-bottom: 10px;
|
|
color: #ffffff;
|
|
background-image: url(../../assets/images/growth/growth-bg.png);
|
|
background-size: 100% 100%;
|
|
.nav-title {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
margin-right: 10%;
|
|
}
|
|
.nav-total {
|
|
// margin-left: 15%;
|
|
width: 20%;
|
|
}
|
|
.total-num {
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
.growth-right {
|
|
width: 30%;
|
|
max-width: 464px;
|
|
margin-bottom: 35px;
|
|
background-color: #ffffff;
|
|
padding: 35px 20px 20px 30px;
|
|
.title {
|
|
font-size: 18px;
|
|
color: #000000;
|
|
font-weight: 700;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.item-growth {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
padding: 10px 20px 10px 8px;
|
|
cursor: pointer;
|
|
}
|
|
.icon {
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #4c5564;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
.active {
|
|
background: #e3edfe;
|
|
color: #000;
|
|
.icon {
|
|
background: #0077ec;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|