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