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>
<el-upload
:file-list="files"
:action="FILE_UPLOAD"
method="POST"
:show-file-list="false"
:on-change="handleChange"
:limit="max"
ref="imageRef"
:on-exceed="exceed"
>
<template #trigger>
<div>
<slot></slot>
</div>
</template>
</el-upload>
<el-upload :file-list="files" :action="FILE_UPLOAD" method="POST" :show-file-list="false" :on-change="handleChange"
:limit="max" ref="imageRef" :on-exceed="exceed">
<template #trigger>
<div>
<slot></slot>
</div>
</template>
</el-upload>
</template>
<script setup>
import {FILE_UPLOAD} from "@/api/api";
import {defineProps, ref, watch} from "vue";
import {ElMessage} from "element-plus";
import { FILE_UPLOAD } from "@/api/api";
import { defineProps, ref, watch } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
value: [],
max: {
type: Number,
default: 1
}
value: [],
max: {
type: Number,
default: 1
}
})
const emit = defineEmits()
@@ -35,46 +27,48 @@ const files = ref([])
const imageRef = ref()
watch(props.value, () => {
props.value.length || (files.value = props.value)
props.value.length || (files.value = props.value)
})
function exceed() {
ElMessage.error(`只能上传${props.max}个附件`);
ElMessage.error(`只能上传${props.max}个附件`);
}
function handleChange(e) {
if (e.response && e.response.code === 200) {
e.url = e.response.data
}
if (e.response && e.response.code === 200) {
e.url = e.response.data
}
const index = files.value.findIndex(f => f.uid === e.uid)
if (index === -1) {
files.value.unshift(e)
} else {
files.value[index] = e
}
emit('update:value', files.value)
const index = files.value.findIndex(f => f.uid === e.uid)
if (index === -1) {
files.value.unshift(e)
} else {
files.value[index] = e
}
emit('update:value', files.value)
}
function remove(i) {
files.value.splice(i, 1)
files.value.splice(i, 1)
console.log(imageRef)
imageRef.value.clearFiles();
}
function reUpload(i) {
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
imageRef.value.abort(files.value[i].raw)
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.submit()
}
if (files.value[i].status === 'ready' || files.value[i].status === 'uploading') {
imageRef.value.abort(files.value[i].raw)
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.submit()
}
}
function abort(i) {
imageRef.value.abort(files.value[i].raw)
imageRef.value.abort(files.value[i].raw)
}
defineExpose({reUpload, remove})
defineExpose({ reUpload, remove })
</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="detailL">
<div v-for="(i, k) in data.stageProcessList" :key="k">
<div v-if="i.stageId !== '0'">
<div class="title">
<div class="titleL">{{ i.stageName }}</div>
<div class="titleR" :style="{ display: 'flex' }">
<img src="../../assets/image/pathdetails/circle.png" />
<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 v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
<div v-else class="title">
<div class="titleL">{{ i.stageName }}</div>
<div class="titleR" :style="{ display: 'flex' }">
<img src="../../assets/image/pathdetails/circle.png" />
<div class="titleRT">进行中</div>
</div>
<div
class="course"
v-for="(value, index) in i.taskProcessList.filter(
(e) => !whiteTypes(e.type)
)"
:key="index"
class="titleR"
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
>
<div style="width: 70%">
<div class="coursename">{{ value.name }}</div>
<div class="coursetag">
<div
class="tag1"
style="margin-right: 11px; margin-top: 16px"
>
必修
</div>
<div
class="tag3"
style="margin-right: 11px; margin-top: 16px"
>
{{ types.typeName[value.type] || "" }}
</div>
<!-- <div-->
<!-- v-for="(item, key) in value.flag"-->
<!-- :key="key"-->
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
<!-- style="margin-right: 11px; margin-top: 16px"-->
<!-- >-->
<!-- {{ item.name }}-->
<!-- </div>-->
<img src="../../assets/image/pathdetails/circle2.png" />
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
未开始
</div>
</div>
</div>
<div v-if="i.stageId == '0' && i.taskProcessList.length == 0"></div>
<div
v-else
class="course"
v-for="(value, index) in i.taskProcessList.filter(
(e) => !whiteTypes(e.type)
)"
:key="index"
>
<div style="width: 70%">
<div class="coursename">{{ value.name }}</div>
<div class="coursetag">
<div class="tag1" style="margin-right: 11px; margin-top: 16px">
必修
</div>
<div
class="progressBox"
:style="{ display: value.status === 1 ? 'block' : 'none' }"
>
<div>当前进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="value.currentRatio"
:show-text="false"
:stroke-width="8"
: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)]
"
/>
</div>
<div
style="
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
color: {
<div class="tag3" style="margin-right: 11px; margin-top: 16px">
{{ types.typeName[value.type] || "" }}
</div>
<!-- <div-->
<!-- v-for="(item, key) in value.flag"-->
<!-- :key="key"-->
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
<!-- style="margin-right: 11px; margin-top: 16px"-->
<!-- >-->
<!-- {{ item.name }}-->
<!-- </div>-->
</div>
<div
class="progressBox"
:style="{ display: value.status === 1 ? 'block' : 'none' }"
>
<div>当前进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="value.currentRatio"
:show-text="false"
:stroke-width="8"
: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>
}[parseInt(value.currentRatio / 20)]
"
/>
</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 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 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="tag1">必修</div>
@@ -216,7 +210,6 @@
<div class="ratetext">上次学到：启航班-领导寄语</div>
<div class="ratebtn">继续学习</div>
</div>-->
<div style="margin-top: 16px">
<div class="progressBox">
<div>总进度</div>
@@ -308,7 +301,6 @@
<!-- 详细信息 -->
</div>
</template>
<script setup>
import { computed, reactive, ref } from "vue";
import word from "@/assets/image/file/word.png";
@@ -330,7 +322,6 @@ import {
import { useRoute, useRouter } from "vue-router";
import store from "@/store";
import { ElMessage } from "element-plus";
const {
query: { courseId, projectId },
} = useRoute();
@@ -343,14 +334,11 @@ const { data } = useRequest(PROJECT_PROCESS, {
});
console.log("datadata", data);
const userInfo = computed(() => store.state.userInfo);
const activeName = ref("first");
const handleClick = (tab, event) => {
console.log(tab, event);
};
const path = { 1: "path" };
const types = ref({
typeName: {
1: "在线",
@@ -406,7 +394,6 @@ const types = ref({
13: "/projectdetails",
},
});
function toFinish(d, sName, chapterId) {
console.log("dddddd", d);
if (!types.value.path[d.type]) {
@@ -446,7 +433,6 @@ function whiteTypes(type) {
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.pathdetails {
@@ -456,19 +442,16 @@ function whiteTypes(type) {
font-size: 14px;
line-height: 24px;
}
.pdname {
font-size: 20px;
font-weight: 800;
color: #ffffff;
margin-top: 17px;
}
.detailinfo {
width: 100%;
margin-top: 24px;
display: flex;
.detailL {
flex: 1;
margin-right: 20px;
@@ -477,7 +460,6 @@ function whiteTypes(type) {
padding-left: 45px;
padding-right: 45px;
padding-top: 23px;
.title {
height: 50px;
display: flex;
@@ -486,19 +468,16 @@ function whiteTypes(type) {
background-color: rgba(249, 249, 249, 1);
margin-top: 27px;
margin-bottom: 19px;
.titleL {
font-size: 16px;
font-weight: 800;
color: #333333;
margin-left: 27px;
}
.titleR {
display: flex;
align-items: center;
}
.titleR .titleRT {
font-size: 16px;
font-weight: 800;
@@ -507,7 +486,6 @@ function whiteTypes(type) {
margin-left: 2px;
}
}
.course {
display: flex;
align-items: center;
@@ -515,7 +493,6 @@ function whiteTypes(type) {
flex-wrap: wrap;
margin-bottom: 32px;
margin-left: 26px;
.coursename {
font-size: 14px;
font-weight: 500;
@@ -525,28 +502,23 @@ function whiteTypes(type) {
text-overflow: ellipsis;
white-space: nowrap;
}
.coursetag {
display: flex;
flex-wrap: wrap;
}
.progressBox {
font-size: 14px;
font-weight: 500;
color: #677d86;
margin-top: 24px;
.progress {
display: flex;
align-items: center;
}
.progress .el-progress-bar__outer {
background-color: rgba(232, 241, 254, 1);
}
}
.goclass {
width: 126px;
height: 46px;
@@ -564,26 +536,21 @@ function whiteTypes(type) {
}
}
}
.detailR {
width: 434px;
.detailRT {
min-height: 298px;
background: #ffffff;
border-radius: 8px;
.el-tabs__item {
height: 56px;
padding: 10px 33px 0px 27px;
font-size: 14px;
font-weight: 500;
}
.el-tabs__nav-wrap::after {
background-color: rgba(56, 125, 247, 0.2);
}
.notice {
padding: 15px 43px 30px 47px;
font-size: 14px;
@@ -591,7 +558,6 @@ function whiteTypes(type) {
color: #333330;
line-height: 24px;
}
.sharedocname {
width: 259px;
font-size: 14px;
@@ -600,7 +566,6 @@ function whiteTypes(type) {
margin-left: 20px;
line-height: 24px;
}
.download {
display: flex;
align-items: center;
@@ -611,13 +576,11 @@ function whiteTypes(type) {
color: #2478ff;
}
}
.detailRB {
min-height: 459px;
background: #ffffff;
border-radius: 8px;
margin-top: 17px;
.info .title {
display: flex;
align-items: center;
@@ -625,14 +588,12 @@ function whiteTypes(type) {
position: relative;
margin-left: 48px;
}
.info .title .text {
margin-left: 8px;
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 800;
}
.info .title .box {
width: 75px;
height: 10px;
@@ -641,7 +602,6 @@ function whiteTypes(type) {
left: 23px;
top: 53px;
}
.info .teacheritem {
margin-left: 48px;
margin-right: 48px;
@@ -649,13 +609,11 @@ function whiteTypes(type) {
display: flex;
// align-items: center;
}
.info .teacheritem .peopleimg {
width: 60px;
height: 60px;
border-radius: 30px;
}
.info .teacheritem .teacherName {
font-size: 14px;
font-weight: bold;
@@ -664,7 +622,6 @@ function whiteTypes(type) {
align-items: center;
width: 260px;
}
.info .teacheritem .teacherName .teacherMedal {
width: 17px;
height: 19px;
@@ -672,7 +629,6 @@ function whiteTypes(type) {
display: flex;
align-items: center;
}
.info .teacheritem .introduce {
width: 260px;
font-size: 14px;
@@ -681,7 +637,6 @@ function whiteTypes(type) {
margin-top: 14px;
line-height: 24px;
}
.info .rate {
display: flex;
align-items: center;
@@ -690,7 +645,6 @@ function whiteTypes(type) {
margin-left: 48px;
margin-right: 26px;
}
.info .rate .ratetext {
width: 259px;
font-size: 14px;
@@ -698,7 +652,6 @@ function whiteTypes(type) {
color: #677d86;
line-height: 24px;
}
.info .rate .ratebtn {
width: 86px;
height: 36px;
@@ -713,19 +666,16 @@ function whiteTypes(type) {
align-items: center;
justify-content: center;
}
.info .progressBox {
font-size: 14px;
font-weight: 500;
color: #677d86;
margin-top: 16px;
margin-left: 44px;
.progress {
display: flex;
align-items: center;
}
.progress .el-progress-bar__outer {
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>
<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" v-if="userInfo.jobName">
<img
style="width: 20px; height: 18px; margin-right: 10px"
src="../../assets/image/pm.png"
/>
<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
</div>
<div class="info" v-if="userInfo.bandDesc">
<img
style="width: 18px; height: 17px; margin-right: 11px"
src="../../assets/image/band.png"
/>
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</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="路径介绍"
trigger="hover"
:content="scope.row.remark"
>
<template #reference>
<div>{{ scope.row.remark }}</div>
</template>
</el-popover>
</el-table-column>
<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" v-if="userInfo.jobName">
<img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
<div style="margin-top: 1px">{{ userInfo.jobName }}</div>
</div>
<div class="info" v-if="userInfo.bandDesc">
<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</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="路径介绍" 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="150"
prop="state"
label="状态"
>
<img
:src="
scope.row.status === 0
? ongoing
: scope.row.status === 1
? completed
: scope.row.status === -1
? nostarted
: null
"
style="width: 99px; height: 99px"
/>
</el-table-column>
</el-table>
</div>
</div>
<el-table-column align="center" prop="organizationName" label="归属组织" />
<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
<img :src="
scope.row.status === 0
? 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]"-->
<!-- 路径列表-->
<!-- 路径详情图 -->
<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>
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
<!-- 路径列表-->
<!-- 路径详情图 -->
<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, onMounted, computed } from "vue";
@@ -154,9 +109,9 @@ import completed from "../../assets/image/completed.png";
import ongoing from "../../assets/image/ongoing.png";
import { boeRequest, request, usePage, useRequest } from "@/api/request";
import {
ROUTER_CHAPTER_LIST,
ROUTER_LIST,
ROUTER_UNCOMPLETE_LIST,
ROUTER_CHAPTER_LIST,
ROUTER_LIST,
ROUTER_UNCOMPLETE_LIST,
} from "@/api/api";
import { useImage } from "@/api/utils";
import { useRouter } from "vue-router";
@@ -168,193 +123,197 @@ const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
console.log("datadata", data);
const router = useRouter();
const returnclick = () => {
router.back();
router.back();
};
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
const state = reactive({
showmapdetail: false,
showmapdetail: false,
});
const { showmapdetail } = toRefs(state);
const returnfun = () => {
state.showmapdetail = false;
state.showmapdetail = false;
};
async function gofun({ routerId, name: routerName }) {
// 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}});
import.meta.env.MODE === "development"
? router.push({
path: "/pathdetails",
query: { routerId, routerName },
})
: window.open(
`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
`routerId=${routerId}&routerName=${routerName}`
)}`
);
// 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}});
import.meta.env.MODE === "development"
? router.push({
path: "/pathdetails",
query: { routerId, routerName },
})
: window.open(
`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
`routerId=${routerId}&routerName=${routerName}`
)}`
);
}
function toUnTask() {}
function toUnTask() { }
</script>
<style lang="scss">
.modal {
#app div:nth-child(1) {
background: rgba(0, 0, 0, 0) !important;
}
.modal {}
.modal:after {
content: "";
content: "";
}
.learnpath {
width: 100%;
min-height: 800px;
//border-radius: 8px;
background-color: rgba(255, 255, 255, 1);
display: flex;
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;
}
.content {
width: 100%;
// flex: 1;
margin-top: 43px;
.title .titleL {
display: flex;
align-items: center;
}
// background-color: pink;
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
.title .titleL .text {
font-size: 18px;
font-weight: bold;
color: #333333;
line-height: 24px;
margin-right: 26px;
}
.title .titleL {
display: flex;
align-items: center;
}
.title .titleL .info {
display: flex;
// align-items: center;
font-size: 14px;
font-weight: 400;
color: #387df7;
}
.title .titleL .text {
font-size: 18px;
font-weight: bold;
color: #333333;
line-height: 24px;
margin-right: 26px;
}
.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;
}
.title .titleL .info {
display: flex;
// align-items: center;
font-size: 14px;
font-weight: 400;
color: #387df7;
}
.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: auto;
.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;
}
.el-table th.el-table__cell {
background: rgba(249, 249, 249, 1);
color: rgba(51, 51, 51, 1);
font-size: 14px;
font-weight: 500;
}
.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: auto;
.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 th.el-table__cell {
background: rgba(249, 249, 249, 1);
color: rgba(51, 51, 51, 1);
font-size: 14px;
font-weight: 500;
}
.el-table__row {
height: 231px;
font-size: 14px;
color: rgba(102, 102, 102, 1);
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;
}
.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;
}
}
.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;
}
.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;
}
.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;
}
.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;
}
.tasks {
width: 405px;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 28px;
cursor: pointer;
}
}
</style>