mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-06 09:26:46 +08:00
提交
This commit is contained in:
Pengxiansen
@@ -4,6 +4,8 @@
|
||||
style="width: 100%; height: 290px"
|
||||
src="@/assets/image/growth/bg.png"
|
||||
/>
|
||||
|
||||
|
||||
<div class="nav">
|
||||
<div class="tabs">
|
||||
<div
|
||||
@@ -80,7 +82,7 @@
|
||||
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div class="growth-list-content" v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="40">
|
||||
<el-col
|
||||
style="margin-bottom: 21px"
|
||||
:span="6"
|
||||
@@ -271,9 +273,6 @@ const { commit, dispatch, state } = useStore();
|
||||
const userInfo = computed(() => state.userInfo);
|
||||
|
||||
const errorData = computed(() => state.projectError);
|
||||
const lastLearned = computed(() =>
|
||||
stageProcessList.value.find((item) => item.lastStudy)
|
||||
);
|
||||
|
||||
const getAssetsFile = (url) => {
|
||||
return new URL(`../../assets/image/growth/type${url}.png`, import.meta.url)
|
||||
@@ -284,7 +283,7 @@ const templateClick = () => {
|
||||
router.push({
|
||||
path: "/growthRoadmap",
|
||||
query: {
|
||||
routerId: routerId,
|
||||
routerId: selectGrowth.value.id,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -4,164 +4,138 @@
|
||||
style="width: 100%; height: 290px"
|
||||
src="@/assets/image/growth/bg.png"
|
||||
/>
|
||||
<div class="nav" :style="{ transform: 'scale(' + transformSize + ')' }">
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">我的必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">我的选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
<div
|
||||
:style="{ transform: 'scale(' + transformSize + ')' }"
|
||||
style="transform-origin: top left"
|
||||
>
|
||||
<div class="nav">
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">我的必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">我的选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="display: flex">
|
||||
<el-select
|
||||
style="width: 230px"
|
||||
:teleported="false"
|
||||
v-model="queryParams.completionStatus"
|
||||
placeholder="搜索学习状态"
|
||||
>
|
||||
<el-option label="全部" value="3"> </el-option>
|
||||
<el-option label="未开始" value="0"> </el-option>
|
||||
<el-option label="已完成" value="1"> </el-option>
|
||||
<el-option label="进行中" value="2"> </el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
style="margin-left: 9px; width: 230px"
|
||||
v-model="queryParams.taskName"
|
||||
placeholder="搜索名称"
|
||||
clearable
|
||||
/>
|
||||
<el-button
|
||||
icon="Search"
|
||||
style="margin-left: 20px"
|
||||
type="primary"
|
||||
@click="getList"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="Refresh" style="margin-left: 20px" @click="refresh"
|
||||
>清除</el-button
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="growth-path-container"
|
||||
:style="{ transform: 'scale(' + transformSize + ')' }"
|
||||
>
|
||||
<div class="growth-name-type">
|
||||
<el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
|
||||
<div class="growth-name">
|
||||
<div>{{ selectGrowth?.growthName }}</div>
|
||||
<div style="margin-left: 20px; cursor: pointer">
|
||||
<el-icon color="#000" size="16"><CaretBottom /></el-icon>
|
||||
<div class="growth-path-container">
|
||||
<div class="growth-name-type">
|
||||
<el-dropdown :teleported="false" trigger="click" ref="dropdownRef">
|
||||
<div class="growth-name">
|
||||
<div>{{ selectGrowth?.growthName }}</div>
|
||||
<div style="margin-left: 20px; cursor: pointer">
|
||||
<el-icon color="#000" size="16"><CaretBottom /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
:disabled="selectGrowth.id == item.id"
|
||||
v-for="item of growthList"
|
||||
>
|
||||
<div @click="select(item)">{{ item.growthName }}</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="growth-type">
|
||||
<div class="type-item-list" @click="templateClick">列表</div>
|
||||
<div class="type-item-path">路径</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div class="path-container">
|
||||
<div
|
||||
:class="
|
||||
(item.position + 1) % 2 || item.position + 1 == 15
|
||||
? 'path-item-bottom'
|
||||
: 'path-item-top'
|
||||
"
|
||||
@click="toFinish(item)"
|
||||
:style="point[item.position]"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
>
|
||||
<template
|
||||
v-if="(item.position + 1) % 2 || item.position + 1 == 15"
|
||||
>
|
||||
<div class="item-link">
|
||||
<div class="circle"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="triangle"></div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
</div>
|
||||
<div class="f-a-c" style="margin-top: 9px">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="f-a-c">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-link">
|
||||
<div class="line"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
:disabled="selectGrowth.id == item.id"
|
||||
v-for="item of growthList"
|
||||
>
|
||||
<div @click="select(item)">{{ item.growthName }}</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div class="growth-type">
|
||||
<div class="type-item-list" @click="templateClick">列表</div>
|
||||
<div class="type-item-path">路径</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div class="path-container">
|
||||
<div
|
||||
:class="
|
||||
(item.position + 1) % 2 || item.position + 1 == 15
|
||||
? 'path-item-bottom'
|
||||
: 'path-item-top'
|
||||
"
|
||||
@click="toFinish(item)"
|
||||
:style="point[item.position]"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
>
|
||||
<template v-if="(item.position + 1) % 2 || item.position + 1 == 15">
|
||||
<div class="item-link">
|
||||
<div class="circle"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="triangle"></div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
</div>
|
||||
<div class="f-a-c" style="margin-top: 9px">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="f-a-c">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-link">
|
||||
<div class="line"></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 弹框提示信息 -->
|
||||
<el-dialog
|
||||
title=""
|
||||
@@ -361,7 +335,6 @@ const point = [
|
||||
top: "267px",
|
||||
right: "1551px",
|
||||
},
|
||||
|
||||
{
|
||||
top: "650px",
|
||||
right: "1660px",
|
||||
@@ -372,9 +345,7 @@ const { commit, dispatch, state } = useStore();
|
||||
const userInfo = computed(() => state.userInfo);
|
||||
|
||||
const errorData = computed(() => state.projectError);
|
||||
const lastLearned = computed(() =>
|
||||
stageProcessList.value.find((item) => item.lastStudy)
|
||||
);
|
||||
|
||||
|
||||
const stateData = computed(() => {
|
||||
return (item) => {
|
||||
@@ -423,7 +394,7 @@ const templateClick = () => {
|
||||
router.push({
|
||||
path: "/growthList",
|
||||
query: {
|
||||
routerId: routerId,
|
||||
routerId: selectGrowth.value.id,
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -445,12 +416,6 @@ const tabClick = (type, status) => {
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
|
||||
// 清除
|
||||
const refresh = () => {
|
||||
queryParams.taskName = "";
|
||||
queryParams.completionStatus = "";
|
||||
getList();
|
||||
};
|
||||
// 是否加载数据中
|
||||
const loading = ref(false);
|
||||
const getList = () => {
|
||||
@@ -464,7 +429,7 @@ const getList = () => {
|
||||
}
|
||||
loading.value = true;
|
||||
growthRequest(PROFESSIONAL_STUDENT_TASKLIST, params).then((res) => {
|
||||
let newData = res.data.slice(0, 15);
|
||||
let newData = res.data.slice(0, 15).reverse()
|
||||
// 默认第一个在第一点位
|
||||
let num = 15 / newData.length;
|
||||
stageProcessList.value = newData.map((item, index) => {
|
||||
@@ -793,7 +758,7 @@ function toOffcoursePlanPage(id) {
|
||||
height: 80px;
|
||||
background: #ffffff;
|
||||
padding: 0 80px 0 62px;
|
||||
transform-origin: top left;
|
||||
width: 1920px;
|
||||
}
|
||||
.growth-name-type {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user