hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 11:56:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:合并

Browse Source
This commit is contained in:
lixg
2022-12-21 16:18:58 +08:00
parent 40cf3a8bff d1fb89ac14
commit 3da28419ae
4 changed files with 1234 additions and 1373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/img/UploadImg.vue
View File

@@ -1,32 +1,24 @@
<template> <template>
<el-upload <el-upload :file-list="files" :action="FILE_UPLOAD" method="POST" :show-file-list="false" :on-change="handleChange"
:file-list="files" :limit="max" ref="imageRef" :on-exceed="exceed">
:action="FILE_UPLOAD" <template #trigger>
method="POST" <div>
:show-file-list="false" <slot></slot>
:on-change="handleChange" </div>
:limit="max" </template>
ref="imageRef" </el-upload>
:on-exceed="exceed"
>
<template #trigger>
<div>
<slot></slot>
</div>
</template>
</el-upload>
</template> </template>
<script setup> <script setup>
import {FILE_UPLOAD} from "@/api/api"; import { FILE_UPLOAD } from "@/api/api";
import {defineProps, ref, watch} from "vue"; import { defineProps, ref, watch } from "vue";
import {ElMessage} from "element-plus"; import { ElMessage } from "element-plus";
const props = defineProps({ const props = defineProps({
value: [], value: [],
max: { max: {
type: Number, type: Number,
default: 1 default: 1
} }
}) })
const emit = defineEmits() const emit = defineEmits()
@@ -35,46 +27,48 @@ const files = ref([])
const imageRef = ref() const imageRef = ref()
watch(props.value, () => { watch(props.value, () => {
props.value.length || (files.value = props.value) props.value.length || (files.value = props.value)
}) })
function exceed() { function exceed() {
ElMessage.error(`只能上传${props.max}个附件`); ElMessage.error(`只能上传${props.max}个附件`);
} }
function handleChange(e) { function handleChange(e) {
if (e.response && e.response.code === 200) { if (e.response && e.response.code === 200) {
e.url = e.response.data e.url = e.response.data
} }
const index = files.value.findIndex(f => f.uid === e.uid) const index = files.value.findIndex(f => f.uid === e.uid)
if (index === -1) { if (index === -1) {
files.value.unshift(e) files.value.unshift(e)
} else { } else {
files.value[index] = e files.value[index] = e
} }
emit('update:value', files.value) emit('update:value', files.value)
} }
function remove(i) { function remove(i) {
files.value.splice(i, 1) files.value.splice(i, 1)
console.log(imageRef)
imageRef.value.clearFiles();
} }
function reUpload(i) { function reUpload(i) {
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') { if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
imageRef.value.abort(files.value[i].raw) imageRef.value.abort(files.value[i].raw)
files.value[i].status = 'abort'; files.value[i].status = 'abort';
} else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') { } else if (files.value[i].status === 'fail' || files.value[i].status === 'abort') {
imageRef.value.handleStart(files.value[i].raw) imageRef.value.handleStart(files.value[i].raw)
imageRef.value.submit() imageRef.value.submit()
} }
} }
function abort(i) { function abort(i) {
imageRef.value.abort(files.value[i].raw) imageRef.value.abort(files.value[i].raw)
} }
defineExpose({reUpload, remove}) defineExpose({ reUpload, remove })
</script> </script>

1720
src/views/homework/HomeworkPage.vue
View File

File diff suppressed because it is too large Load Diff

244
src/views/project/ProjectDetails.vue
View File

@@ -12,122 +12,116 @@
<div class="detailinfo"> <div class="detailinfo">
<div class="detailL"> <div class="detailL">
<div v-for="(i, k) in data.stageProcessList" :key="k"> <div v-for="(i, k) in data.stageProcessList" :key="k">
<div v-if="i.stageId !== '0'"> <div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
<div class="title"> <div v-else class="title">
<div class="titleL">{{ i.stageName }}</div> <div class="titleL">{{ i.stageName }}</div>
<div class="titleR" :style="{ display: 'flex' }"> <div class="titleR" :style="{ display: 'flex' }">
<img src="../../assets/image/pathdetails/circle.png" /> <img src="../../assets/image/pathdetails/circle.png" />
<div class="titleRT">进行中</div> <div class="titleRT">进行中</div>
</div>
<div
class="titleR"
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
>
<img src="../../assets/image/pathdetails/circle2.png" />
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
未开始
</div>
</div>
</div> </div>
<div <div
class="course" class="titleR"
v-for="(value, index) in i.taskProcessList.filter( :style="{ display: i.status === 2 ? 'flex' : 'none' }"
(e) => !whiteTypes(e.type)
)"
:key="index"
> >
<div style="width: 70%"> <img src="../../assets/image/pathdetails/circle2.png" />
<div class="coursename">{{ value.name }}</div> <div class="titleRT" style="color: rgba(102, 102, 102, 1)">
<div class="coursetag"> 未开始
<div </div>
class="tag1" </div>
style="margin-right: 11px; margin-top: 16px" </div>
> <div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
必修 <div
</div> v-else
<div class="course"
class="tag3" v-for="(value, index) in i.taskProcessList.filter(
style="margin-right: 11px; margin-top: 16px" (e) => !whiteTypes(e.type)
> )"
{{ types.typeName[value.type] || "" }} :key="index"
</div> >
<div style="width: 70%">
<!-- <div--> <div class="coursename">{{ value.name }}</div>
<!-- v-for="(item, key) in value.flag"--> <div class="coursetag">
<!-- :key="key"--> <div class="tag1" style="margin-right: 11px; margin-top: 16px">
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"--> 必修
<!-- style="margin-right: 11px; margin-top: 16px"-->
<!-- >-->
<!-- {{ item.name }}-->
<!-- </div>-->
</div> </div>
<div <div class="tag3" style="margin-right: 11px; margin-top: 16px">
class="progressBox" {{ types.typeName[value.type] || "" }}
:style="{ display: value.status === 1 ? 'block' : 'none' }" </div>
> <!-- <div-->
<div>当前进度</div> <!-- v-for="(item, key) in value.flag"-->
<div class="progress"> <!-- :key="key"-->
<div style="width: 291px"> <!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
<el-progress <!-- style="margin-right: 11px; margin-top: 16px"-->
:percentage="value.currentRatio" <!-- >-->
:show-text="false" <!-- {{ item.name }}-->
:stroke-width="8" <!-- </div>-->
:color=" </div>
{ <div
0: 'rgba(238, 112, 108, 1)', class="progressBox"
1: 'rgba(255, 151, 38, 1)', :style="{ display: value.status === 1 ? 'block' : 'none' }"
2: 'rgba(39, 122, 255, 1)', >
3: 'rgba(59, 94, 251, 1)', <div>当前进度</div>
4: 'rgba(57, 219, 183, 1)', <div class="progress">
5: 'rgba(57, 219, 183, 1)', <div style="width: 291px">
}[parseInt(value.currentRatio / 20)] <el-progress
" :percentage="value.currentRatio"
/> :show-text="false"
</div> :stroke-width="8"
<div :color="
style=" {
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
color: {
0: 'rgba(238, 112, 108, 1)', 0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)', 1: 'rgba(255, 151, 38, 1)',
2: 'rgba(39, 122, 255, 1)', 2: 'rgba(39, 122, 255, 1)',
3: 'rgba(59, 94, 251, 1)', 3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)', 4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)', 5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)], }[parseInt(value.currentRatio / 20)]
}" "
> />
{{ value.currentRatio }}% </div>
</div> <div
style="
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
2: 'rgba(39, 122, 255, 1)',
3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)],
}"
>
{{ value.currentRatio }}%
</div> </div>
</div> </div>
</div> </div>
<div class="goclass" @click="toFinish(value, i.name, i.stageId)">
{{
value.status === 1
? "已完成"
: types.path[value.type]
? types.toName[value.type]
: "未开放"
}}
</div>
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
<!-- <div-->
<!-- class="goclass"-->
<!-- :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课-->
<!-- </div>-->
<!-- <img-->
<!-- style="width: 76px; height: 76px; margin-right: 61px"-->
<!-- :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
<!-- src="../../assets/image/pathdetails/notstarted.png"-->
<!-- />-->
<!-- </div>-->
</div> </div>
<div class="goclass" @click="toFinish(value, i.name, i.stageId)">
{{
value.status === 1
? "已完成"
: types.path[value.type]
? types.toName[value.type]
: "未开放"
}}
</div>
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
<!-- <div-->
<!-- class="goclass"-->
<!-- :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课-->
<!-- </div>-->
<!-- <img-->
<!-- style="width: 76px; height: 76px; margin-right: 61px"-->
<!-- :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
<!-- src="../../assets/image/pathdetails/notstarted.png"-->
<!-- />-->
<!-- </div>-->
</div> </div>
</div> </div>
<!-- <div class="tag1">必修</div> <!-- <div class="tag1">必修</div>
@@ -216,7 +210,6 @@
<div class="ratetext">上次学到：启航班-领导寄语</div> <div class="ratetext">上次学到：启航班-领导寄语</div>
<div class="ratebtn">继续学习</div> <div class="ratebtn">继续学习</div>
</div>--> </div>-->
<div style="margin-top: 16px"> <div style="margin-top: 16px">
<div class="progressBox"> <div class="progressBox">
<div>总进度</div> <div>总进度</div>
@@ -308,7 +301,6 @@
<!-- 详细信息 --> <!-- 详细信息 -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, reactive, ref } from "vue"; import { computed, reactive, ref } from "vue";
import word from "@/assets/image/file/word.png"; import word from "@/assets/image/file/word.png";
@@ -330,7 +322,6 @@ import {
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import store from "@/store"; import store from "@/store";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
const { const {
query: { courseId, projectId }, query: { courseId, projectId },
} = useRoute(); } = useRoute();
@@ -343,14 +334,11 @@ const { data } = useRequest(PROJECT_PROCESS, {
}); });
console.log("datadata", data); console.log("datadata", data);
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const activeName = ref("first"); const activeName = ref("first");
const handleClick = (tab, event) => { const handleClick = (tab, event) => {
console.log(tab, event); console.log(tab, event);
}; };
const path = { 1: "path" }; const path = { 1: "path" };
const types = ref({ const types = ref({
typeName: { typeName: {
1: "在线", 1: "在线",
@@ -406,7 +394,6 @@ const types = ref({
13: "/projectdetails", 13: "/projectdetails",
}, },
}); });
function toFinish(d, sName, chapterId) { function toFinish(d, sName, chapterId) {
console.log("dddddd", d); console.log("dddddd", d);
if (!types.value.path[d.type]) { if (!types.value.path[d.type]) {
@@ -446,7 +433,6 @@ function whiteTypes(type) {
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-"); return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"> <style lang="scss">
.pathdetails { .pathdetails {
@@ -456,19 +442,16 @@ function whiteTypes(type) {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
.pdname { .pdname {
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
color: #ffffff; color: #ffffff;
margin-top: 17px; margin-top: 17px;
} }
.detailinfo { .detailinfo {
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
.detailL { .detailL {
flex: 1; flex: 1;
margin-right: 20px; margin-right: 20px;
@@ -477,7 +460,6 @@ function whiteTypes(type) {
padding-left: 45px; padding-left: 45px;
padding-right: 45px; padding-right: 45px;
padding-top: 23px; padding-top: 23px;
.title { .title {
height: 50px; height: 50px;
display: flex; display: flex;
@@ -486,19 +468,16 @@ function whiteTypes(type) {
background-color: rgba(249, 249, 249, 1); background-color: rgba(249, 249, 249, 1);
margin-top: 27px; margin-top: 27px;
margin-bottom: 19px; margin-bottom: 19px;
.titleL { .titleL {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
margin-left: 27px; margin-left: 27px;
} }
.titleR { .titleR {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.titleR .titleRT { .titleR .titleRT {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
@@ -507,7 +486,6 @@ function whiteTypes(type) {
margin-left: 2px; margin-left: 2px;
} }
} }
.course { .course {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -515,7 +493,6 @@ function whiteTypes(type) {
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 32px; margin-bottom: 32px;
margin-left: 26px; margin-left: 26px;
.coursename { .coursename {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@@ -525,28 +502,23 @@ function whiteTypes(type) {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.coursetag { .coursetag {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.progressBox { .progressBox {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #677d86; color: #677d86;
margin-top: 24px; margin-top: 24px;
.progress { .progress {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.progress .el-progress-bar__outer { .progress .el-progress-bar__outer {
background-color: rgba(232, 241, 254, 1); background-color: rgba(232, 241, 254, 1);
} }
} }
.goclass { .goclass {
width: 126px; width: 126px;
height: 46px; height: 46px;
@@ -564,26 +536,21 @@ function whiteTypes(type) {
} }
} }
} }
.detailR { .detailR {
width: 434px; width: 434px;
.detailRT { .detailRT {
min-height: 298px; min-height: 298px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
.el-tabs__item { .el-tabs__item {
height: 56px; height: 56px;
padding: 10px 33px 0px 27px; padding: 10px 33px 0px 27px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
background-color: rgba(56, 125, 247, 0.2); background-color: rgba(56, 125, 247, 0.2);
} }
.notice { .notice {
padding: 15px 43px 30px 47px; padding: 15px 43px 30px 47px;
font-size: 14px; font-size: 14px;
@@ -591,7 +558,6 @@ function whiteTypes(type) {
color: #333330; color: #333330;
line-height: 24px; line-height: 24px;
} }
.sharedocname { .sharedocname {
width: 259px; width: 259px;
font-size: 14px; font-size: 14px;
@@ -600,7 +566,6 @@ function whiteTypes(type) {
margin-left: 20px; margin-left: 20px;
line-height: 24px; line-height: 24px;
} }
.download { .download {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -611,13 +576,11 @@ function whiteTypes(type) {
color: #2478ff; color: #2478ff;
} }
} }
.detailRB { .detailRB {
min-height: 459px; min-height: 459px;
background: #ffffff; background: #ffffff;
border-radius: 8px; border-radius: 8px;
margin-top: 17px; margin-top: 17px;
.info .title { .info .title {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -625,14 +588,12 @@ function whiteTypes(type) {
position: relative; position: relative;
margin-left: 48px; margin-left: 48px;
} }
.info .title .text { .info .title .text {
margin-left: 8px; margin-left: 8px;
font-size: 16px; font-size: 16px;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
font-weight: 800; font-weight: 800;
} }
.info .title .box { .info .title .box {
width: 75px; width: 75px;
height: 10px; height: 10px;
@@ -641,7 +602,6 @@ function whiteTypes(type) {
left: 23px; left: 23px;
top: 53px; top: 53px;
} }
.info .teacheritem { .info .teacheritem {
margin-left: 48px; margin-left: 48px;
margin-right: 48px; margin-right: 48px;
@@ -649,13 +609,11 @@ function whiteTypes(type) {
display: flex; display: flex;
// align-items: center; // align-items: center;
} }
.info .teacheritem .peopleimg { .info .teacheritem .peopleimg {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 30px; border-radius: 30px;
} }
.info .teacheritem .teacherName { .info .teacheritem .teacherName {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
@@ -664,7 +622,6 @@ function whiteTypes(type) {
align-items: center; align-items: center;
width: 260px; width: 260px;
} }
.info .teacheritem .teacherName .teacherMedal { .info .teacheritem .teacherName .teacherMedal {
width: 17px; width: 17px;
height: 19px; height: 19px;
@@ -672,7 +629,6 @@ function whiteTypes(type) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.info .teacheritem .introduce { .info .teacheritem .introduce {
width: 260px; width: 260px;
font-size: 14px; font-size: 14px;
@@ -681,7 +637,6 @@ function whiteTypes(type) {
margin-top: 14px; margin-top: 14px;
line-height: 24px; line-height: 24px;
} }
.info .rate { .info .rate {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -690,7 +645,6 @@ function whiteTypes(type) {
margin-left: 48px; margin-left: 48px;
margin-right: 26px; margin-right: 26px;
} }
.info .rate .ratetext { .info .rate .ratetext {
width: 259px; width: 259px;
font-size: 14px; font-size: 14px;
@@ -698,7 +652,6 @@ function whiteTypes(type) {
color: #677d86; color: #677d86;
line-height: 24px; line-height: 24px;
} }
.info .rate .ratebtn { .info .rate .ratebtn {
width: 86px; width: 86px;
height: 36px; height: 36px;
@@ -713,19 +666,16 @@ function whiteTypes(type) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.info .progressBox { .info .progressBox {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #677d86; color: #677d86;
margin-top: 16px; margin-top: 16px;
margin-left: 44px; margin-left: 44px;
.progress { .progress {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.progress .el-progress-bar__outer { .progress .el-progress-bar__outer {
background-color: rgba(232, 241, 254, 1); background-color: rgba(232, 241, 254, 1);
} }
@@ -734,4 +684,4 @@ function whiteTypes(type) {
} }
} }
} }
</style> </style>

557
src/views/roadmap/LearnPath.vue
View File

@@ -1,151 +1,106 @@
<template> <template>
<div class="learnpath"> <div class="learnpath">
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<div class="titleL"> <div class="titleL">
<div @click="returnfun" class="text">学习路径图</div> <div @click="returnfun" class="text">学习路径图</div>
<div class="info" style="margin-right: 14px" v-if="userInfo.jobName"> <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
<img <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
style="width: 20px; height: 18px; margin-right: 10px" <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
src="../../assets/image/pm.png" </div>
/> <div class="info" v-if="userInfo.bandDesc">
<div style="margin-top: 1px">{{ userInfo.jobName }}</div> <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
</div> <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
<div class="info" v-if="userInfo.bandDesc"> </div>
<img </div>
style="width: 18px; height: 17px; margin-right: 11px" <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
src="../../assets/image/band.png" <!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
/> <!-- <div>-->
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div> <!-- <div class="finish">-->
</div> <!-- <img-->
</div> <!-- src="../../assets/image/circle.png"-->
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }"> <!-- style="width: 20px; height: 20px"-->
<!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">--> <!-- />-->
<!-- <div>--> <!-- <div class="text">未完成</div>-->
<!-- <div class="finish">--> <!-- <div class="box"></div>-->
<!-- <img--> <!-- </div>-->
<!-- src="../../assets/image/circle.png"--> <!-- <div-->
<!-- style="width: 20px; height: 20px"--> <!-- v-for="(value, index) in unCompleteTaskList"-->
<!-- />--> <!-- :key="index"-->
<!-- <div class="text">未完成</div>--> <!-- class="tasks"-->
<!-- <div class="box"></div>--> <!-- :style="{-->
<!-- </div>--> <!-- 'border-bottom':-->
<!-- <div--> <!-- index === unCompleteTaskList.length - 1-->
<!-- v-for="(value, index) in unCompleteTaskList"--> <!-- ? null-->
<!-- :key="index"--> <!-- : '1px solid rgba(229, 228, 228, 1)',-->
<!-- class="tasks"--> <!-- }"-->
<!-- :style="{--> <!-- >-->
<!-- 'border-bottom':--> <!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
<!-- index === unCompleteTaskList.length - 1--> <!-- {{ value.name }}-->
<!-- ? null--> <!-- </div>-->
<!-- : '1px solid rgba(229, 228, 228, 1)',--> <!-- <img-->
<!-- }"--> <!-- style="width: 20px; height: 20px"-->
<!-- >--> <!-- src="../../assets/image/go.png"-->
<!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">--> <!-- @click="toUnTask(chapterId)"-->
<!-- {{ value.name }}--> <!-- />-->
<!-- </div>--> <!-- </div>-->
<!-- <img--> <!-- </div>-->
<!-- style="width: 20px; height: 20px"--> <!-- <template #reference>-->
<!-- src="../../assets/image/go.png"--> <!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
<!-- @click="toUnTask(chapterId)"--> <!-- <div class="titleR">进入未完成任务</div>-->
<!-- />--> <!-- </template>-->
<!-- </div>--> <!-- </el-popover>-->
<!-- </div>--> </div>
<!-- <template #reference>--> <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情--> 返回列表
<!-- <div class="titleR">进入未完成任务</div>--> </div>
<!-- </template>--> </div>
<!-- </el-popover>--> <!-- 路径列表-->
</div> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
<div <div style="min-width: 770px; width: 100%">
:style="{ display: showmapdetail ? 'flex' : 'none' }" <el-table :data="data" style="width: 100%" @row-click="gofun">
class="titleR" <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
@click="returnfun" <img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
> </el-table-column>
返回列表 <el-table-column align="center" prop="name" label="路径名称" />
</div> <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
</div> <el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
<!-- 路径列表--> <template #reference>
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head"> <div>{{ scope.row.remark }}</div>
<div style="min-width: 770px; width: 100%"> </template>
<el-table :data="data" style="width: 100%" @row-click="gofun"> </el-popover>
<el-table-column </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="路径介绍"
trigger="hover"
:content="scope.row.remark"
>
<template #reference>
<div>{{ scope.row.remark }}</div>
</template>
</el-popover>
</el-table-column>
<el-table-column <el-table-column align="center" prop="organizationName" label="归属组织" />
align="center" <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
prop="organizationName" <img :src="
label="归属组织" scope.row.status === 0
/> ? ongoing
<el-table-column : scope.row.status === 1
#default="scope" ? completed
align="center" : scope.row.status === -1
:width="150" ? nostarted
prop="state" : null
label="状态" " style="width: 99px; height: 99px" />
> </el-table-column>
<img </el-table>
:src=" </div>
scope.row.status === 0 </div>
? ongoing
: scope.row.status === 1
? completed
: scope.row.status === -1
? nostarted
: null
"
style="width: 99px; height: 99px"
/>
</el-table-column>
</el-table>
</div>
</div>
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"--> <!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
<!-- 路径列表--> <!-- 路径列表-->
<!-- 路径详情图 --> <!-- 路径详情图 -->
<div <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
:style="{ display: showmapdetail ? 'flex' : 'none' }" <div v-for="(item, i) in detail?.rows" :key="i">
class="mapdetail" <img :src="useImage(`222_0${i + 2}.png`)" />
> </div>
<div v-for="(item, i) in detail?.rows" :key="i"> <!-- <div class="modal"-->
<img :src="useImage(`222_0${i + 2}.png`)" /> <!-- 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 class="modal"--> </div>
<!-- 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>
<!-- 路径详情图 -->
</div>
</div>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue"; import { reactive, toRefs, ref, onMounted, computed } from "vue";
@@ -154,9 +109,9 @@ import completed from "../../assets/image/completed.png";
import ongoing from "../../assets/image/ongoing.png"; import ongoing from "../../assets/image/ongoing.png";
import { boeRequest, request, usePage, useRequest } from "@/api/request"; import { boeRequest, request, usePage, useRequest } from "@/api/request";
import { import {
ROUTER_CHAPTER_LIST, ROUTER_CHAPTER_LIST,
ROUTER_LIST, ROUTER_LIST,
ROUTER_UNCOMPLETE_LIST, ROUTER_UNCOMPLETE_LIST,
} from "@/api/api"; } from "@/api/api";
import { useImage } from "@/api/utils"; import { useImage } from "@/api/utils";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
@@ -168,193 +123,197 @@ const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
console.log("datadata", data); console.log("datadata", data);
const router = useRouter(); const router = useRouter();
const returnclick = () => { const returnclick = () => {
router.back(); router.back();
}; };
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {}); // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
const state = reactive({ const state = reactive({
showmapdetail: false, showmapdetail: false,
}); });
const { showmapdetail } = toRefs(state); const { showmapdetail } = toRefs(state);
const returnfun = () => { const returnfun = () => {
state.showmapdetail = false; state.showmapdetail = false;
}; };
async function gofun({ routerId, name: routerName }) { async function gofun({ routerId, name: routerName }) {
// console.log(routerId) // console.log(routerId)
// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}}) // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
// detail.value = data.data // detail.value = data.data
// state.showmapdetail = true; // state.showmapdetail = true;
// router.push({path: "/pathdetails", query: {routerId}}); // router.push({path: "/pathdetails", query: {routerId}});
import.meta.env.MODE === "development" import.meta.env.MODE === "development"
? router.push({ ? router.push({
path: "/pathdetails", path: "/pathdetails",
query: { routerId, routerName }, query: { routerId, routerName },
}) })
: window.open( : window.open(
`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent( `http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
`routerId=${routerId}&routerName=${routerName}` `routerId=${routerId}&routerName=${routerName}`
)}` )}`
); );
} }
function toUnTask() {} function toUnTask() { }
</script> </script>
<style lang="scss"> <style lang="scss">
.modal { #app div:nth-child(1) {
background: rgba(0, 0, 0, 0) !important;
} }
.modal {}
.modal:after { .modal:after {
content: ""; content: "";
} }
.learnpath { .learnpath {
width: 100%; width: 100%;
min-height: 800px; min-height: 800px;
//border-radius: 8px; //border-radius: 8px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
display: flex; display: flex;
.content { .content {
width: 100%; width: 100%;
// flex: 1; // flex: 1;
margin-top: 43px; margin-top: 43px;
// background-color: pink;
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
.title .titleL { // background-color: pink;
display: flex; .title {
align-items: center; display: flex;
} justify-content: space-between;
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
.title .titleL .text { .title .titleL {
font-size: 18px; display: flex;
font-weight: bold; align-items: center;
color: #333333; }
line-height: 24px;
margin-right: 26px;
}
.title .titleL .info { .title .titleL .text {
display: flex; font-size: 18px;
// align-items: center; font-weight: bold;
font-size: 14px; color: #333333;
font-weight: 400; line-height: 24px;
color: #387df7; margin-right: 26px;
} }
.title .titleR { .title .titleL .info {
width: 157px; display: flex;
height: 48px; // align-items: center;
border: 2px solid #0060ff; font-size: 14px;
border-radius: 8px; font-weight: 400;
display: flex; color: #387df7;
align-items: center; }
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #0060ff;
}
.head { .title .titleR {
// height: 50px; width: 157px;
background: #f9f9f9; height: 48px;
margin-top: 50px; border: 2px solid #0060ff;
display: flex; border-radius: 8px;
justify-content: space-between; display: flex;
align-items: center; align-items: center;
font-size: 14px; justify-content: center;
font-weight: 500; cursor: pointer;
color: #333333; font-size: 16px;
margin-left: 53px; font-weight: bold;
margin-right: 54px; color: #0060ff;
width: calc(100% - 107px); }
// min-width: 770px;
overflow-x: auto;
.el-table th.el-table__cell { .head {
background: rgba(249, 249, 249, 1); // height: 50px;
color: rgba(51, 51, 51, 1); background: #f9f9f9;
font-size: 14px; margin-top: 50px;
font-weight: 500; 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: auto;
.el-table .cell { .el-table th.el-table__cell {
overflow: hidden; background: rgba(249, 249, 249, 1);
text-overflow: ellipsis; color: rgba(51, 51, 51, 1);
width: 100%; font-size: 14px;
display: -webkit-box; font-weight: 500;
-webkit-box-orient: vertical; }
-webkit-line-clamp: 3;
word-break: break-all;
}
.el-table__row { .el-table .cell {
height: 231px; overflow: hidden;
font-size: 14px; text-overflow: ellipsis;
color: rgba(102, 102, 102, 1); width: 100%;
font-weight: 500; display: -webkit-box;
} -webkit-box-orient: vertical;
} -webkit-line-clamp: 3;
word-break: break-all;
}
.mapdetail { .el-table__row {
width: calc(100% - 107px); height: 231px;
height: 577px; font-size: 14px;
background: rgba(242, 245, 247, 0.6); color: rgba(102, 102, 102, 1);
margin-top: 26px; font-weight: 500;
border-radius: 8px; }
margin-left: 53px; }
margin-right: 54px;
display: flex; .mapdetail {
align-items: center; width: calc(100% - 107px);
justify-content: center; 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 { .lppopover {
.finish { .finish {
padding-left: 27px; padding-left: 27px;
padding-right: 18px; padding-right: 18px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 17px; margin-bottom: 17px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
margin-left: 8px; margin-left: 8px;
} }
.box { .box {
width: 59px; width: 59px;
height: 10px; height: 10px;
background-color: rgba(36, 120, 255, 0.15); background-color: rgba(36, 120, 255, 0.15);
position: absolute; position: absolute;
left: 50px; left: 50px;
top: 15px; top: 15px;
} }
.tasks { .tasks {
width: 405px; width: 405px;
height: 52px; height: 52px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-left: 28px; margin-left: 28px;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>