mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-09 19:06:48 +08:00
342 lines
9.0 KiB
Vue
342 lines
9.0 KiB
Vue
<template>
|
|
<div class="learnpath">
|
|
<div class="content">
|
|
<div class="title">
|
|
<div class="titleL">
|
|
<div @click="returnfun" class="text">学习路径图</div>
|
|
<div class="info" style="margin-right: 14px">
|
|
<img
|
|
style="width: 20px; height: 18px; margin-right: 10px"
|
|
src="../../assets/image/pm.png"
|
|
/>
|
|
<div style="margin-top: 1px">产品经理</div>
|
|
</div>
|
|
<div class="info">
|
|
<img
|
|
style="width: 18px; height: 17px; margin-right: 11px"
|
|
src="../../assets/image/band.png"
|
|
/>
|
|
<div style="margin-top: 2px">Band8</div>
|
|
</div>
|
|
</div>
|
|
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
|
|
<el-popover width="475px" trigger="hover" popper-class="lppopover">
|
|
<div>
|
|
<div class="finish">
|
|
<img
|
|
src="../../assets/image/circle.png"
|
|
style="width: 20px; height: 20px"
|
|
/>
|
|
<div class="text">未完成</div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<div
|
|
v-for="(value, index) in unCompleteTaskList"
|
|
:key="index"
|
|
class="tasks"
|
|
:style="{
|
|
'border-bottom':
|
|
index === unCompleteTaskList.length - 1
|
|
? null
|
|
: '1px solid rgba(229, 228, 228, 1)',
|
|
}"
|
|
>
|
|
<div style="font-size: 14px; font-weight: 500; color: #677d86">
|
|
{{ value.name }}
|
|
</div>
|
|
<img
|
|
style="width: 20px; height: 20px"
|
|
src="../../assets/image/go.png"
|
|
@click="toUnTask(chapterId)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<template #reference>
|
|
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
|
|
<div class="titleR">进入未完成任务</div>
|
|
</template>
|
|
</el-popover>
|
|
</div>
|
|
<div
|
|
:style="{ display: showmapdetail ? 'flex' : 'none' }"
|
|
class="titleR"
|
|
@click="returnfun"
|
|
>
|
|
返回列表
|
|
</div>
|
|
</div>
|
|
<!-- 路径列表-->
|
|
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
|
|
<div style="min-width: 770px; width: 100%">
|
|
<el-table :data="data" style="width: 100%" @row-click="gofun">
|
|
<el-table-column
|
|
prop="img"
|
|
label="缩略图"
|
|
#default="scope"
|
|
align="center"
|
|
width="255"
|
|
>
|
|
<img
|
|
:src="scope.row.picUrl"
|
|
style="width: 230px; height: 155px"
|
|
/>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="name" label="路径名称"/>
|
|
<el-table-column
|
|
align="center"
|
|
prop="introduce"
|
|
label="路径介绍"
|
|
#default="scope"
|
|
>
|
|
<el-popover
|
|
placement="top-start"
|
|
title="路径介绍"
|
|
:width="350"
|
|
trigger="hover"
|
|
:content="scope.row.remark"
|
|
>
|
|
<template #reference>
|
|
<div>{{ scope.row.remark }}</div>
|
|
</template>
|
|
</el-popover>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
align="center"
|
|
prop="organizationName"
|
|
label="归属组织"
|
|
/>
|
|
<el-table-column
|
|
#default="scope"
|
|
align="center"
|
|
width="110"
|
|
prop="state"
|
|
label="状态"
|
|
>
|
|
<img
|
|
:src="
|
|
{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]
|
|
"
|
|
style="width: 99px; height: 99px"
|
|
/>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<!-- 路径列表-->
|
|
<!-- 路径详情图 -->
|
|
<div
|
|
:style="{ display: showmapdetail ? 'flex' : 'none' }"
|
|
class="mapdetail"
|
|
>
|
|
<div v-for="(item, i) in detail?.rows" :key="i">
|
|
<img :src="useImage(`222_0${i + 2}.png`)"/>
|
|
</div>
|
|
<!-- <div class="modal"-->
|
|
<!-- style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<!-- 路径详情图 -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import {reactive, toRefs, ref} from "vue";
|
|
import nostarted from "../../assets/image/nostarted.png";
|
|
import completed from "../../assets/image/completed.png";
|
|
import ongoing from "../../assets/image/ongoing.png";
|
|
import {request, usePage, useRequest} from "@/api/request";
|
|
import {
|
|
BASE_URL,
|
|
ROUTER_CHAPTER_LIST,
|
|
ROUTER_LIST,
|
|
ROUTER_UNCOMPLETE_LIST,
|
|
} from "@/api/api";
|
|
import {useImage} from "@/api/utils";
|
|
import {useRouter} from "vue-router";
|
|
|
|
const detail = ref();
|
|
const {data} = usePage(ROUTER_LIST, {});
|
|
|
|
const router = useRouter();
|
|
|
|
const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
|
|
const state = reactive({
|
|
showmapdetail: false,
|
|
});
|
|
const {showmapdetail} = toRefs(state);
|
|
|
|
const returnfun = () => {
|
|
state.showmapdetail = false;
|
|
};
|
|
|
|
async function gofun({routerId}) {
|
|
// console.log(routerId)
|
|
// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
|
|
// detail.value = data.data
|
|
// state.showmapdetail = true;
|
|
// router.push({path: "/pathdetails", query: {routerId}});
|
|
window.parent.location.href = `http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails¶ms=${encodeURIComponent(`routerId=${routerId}`)}`
|
|
}
|
|
|
|
function toUnTask() {
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.modal {
|
|
}
|
|
|
|
.modal:after {
|
|
content: "";
|
|
}
|
|
|
|
.learnpath {
|
|
width: 100%;
|
|
min-height: 800px;
|
|
//border-radius: 8px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
display: flex;
|
|
|
|
.content {
|
|
width: 100%;
|
|
// flex: 1;
|
|
margin-top: 43px;
|
|
// background-color: pink;
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-left: 53px;
|
|
margin-right: 54px;
|
|
}
|
|
|
|
.title .titleL {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.title .titleL .text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 24px;
|
|
margin-right: 26px;
|
|
}
|
|
|
|
.title .titleL .info {
|
|
display: flex;
|
|
// align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #387df7;
|
|
}
|
|
|
|
.title .titleR {
|
|
width: 157px;
|
|
height: 48px;
|
|
border: 2px solid #0060ff;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #0060ff;
|
|
}
|
|
|
|
.head {
|
|
// height: 50px;
|
|
background: #f9f9f9;
|
|
margin-top: 50px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
margin-left: 53px;
|
|
margin-right: 54px;
|
|
width: calc(100% - 107px);
|
|
// min-width: 770px;
|
|
overflow-x: scroll;
|
|
|
|
.el-table th.el-table__cell {
|
|
background: rgba(249, 249, 249, 1);
|
|
color: rgba(51, 51, 51, 1);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-table .cell {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.el-table__row {
|
|
height: 231px;
|
|
font-size: 14px;
|
|
color: rgba(102, 102, 102, 1);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.mapdetail {
|
|
width: calc(100% - 107px);
|
|
height: 577px;
|
|
background: rgba(242, 245, 247, 0.6);
|
|
margin-top: 26px;
|
|
border-radius: 8px;
|
|
margin-left: 53px;
|
|
margin-right: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lppopover {
|
|
.finish {
|
|
padding-left: 27px;
|
|
padding-right: 18px;
|
|
margin-top: 15px;
|
|
margin-bottom: 17px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.text {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.box {
|
|
width: 59px;
|
|
height: 10px;
|
|
background-color: rgba(36, 120, 255, 0.15);
|
|
position: absolute;
|
|
left: 50px;
|
|
top: 15px;
|
|
}
|
|
|
|
.tasks {
|
|
width: 405px;
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: 28px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
</style>
|