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

-- 路径图详情修改

Browse Source
This commit is contained in:
yuping
2022-12-22 12:45:39 +08:00
parent 24641add71
commit 393f7ddcdd
2 changed files with 366 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,79 +1,79 @@
<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 style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" /> <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png"/>
<div style="margin-top: 1px">{{ userInfo.jobName }}</div> <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
</div> </div>
<div class="info" v-if="userInfo.bandDesc"> <div class="info" v-if="userInfo.bandDesc">
<img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" /> <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png"/>
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div> <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
</div> </div>
</div> </div>
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }"> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
<!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">--> <!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
<!-- <div>--> <!-- <div>-->
<!-- <div class="finish">--> <!-- <div class="finish">-->
<!-- <img--> <!-- <img-->
<!-- src="../../assets/image/circle.png"--> <!-- src="../../assets/image/circle.png"-->
<!-- style="width: 20px; height: 20px"--> <!-- style="width: 20px; height: 20px"-->
<!-- />--> <!-- />-->
<!-- <div class="text">未完成</div>--> <!-- <div class="text">未完成</div>-->
<!-- <div class="box"></div>--> <!-- <div class="box"></div>-->
<!-- </div>--> <!-- </div>-->
<!-- <div--> <!-- <div-->
<!-- v-for="(value, index) in unCompleteTaskList"--> <!-- v-for="(value, index) in unCompleteTaskList"-->
<!-- :key="index"--> <!-- :key="index"-->
<!-- class="tasks"--> <!-- class="tasks"-->
<!-- :style="{--> <!-- :style="{-->
<!-- 'border-bottom':--> <!-- 'border-bottom':-->
<!-- index === unCompleteTaskList.length - 1--> <!-- index === unCompleteTaskList.length - 1-->
<!-- ? null--> <!-- ? null-->
<!-- : '1px solid rgba(229, 228, 228, 1)',--> <!-- : '1px solid rgba(229, 228, 228, 1)',-->
<!-- }"--> <!-- }"-->
<!-- >--> <!-- >-->
<!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">--> <!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
<!-- {{ value.name }}--> <!-- {{ value.name }}-->
<!-- </div>--> <!-- </div>-->
<!-- <img--> <!-- <img-->
<!-- style="width: 20px; height: 20px"--> <!-- style="width: 20px; height: 20px"-->
<!-- src="../../assets/image/go.png"--> <!-- src="../../assets/image/go.png"-->
<!-- @click="toUnTask(chapterId)"--> <!-- @click="toUnTask(chapterId)"-->
<!-- />--> <!-- />-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- <template #reference>--> <!-- <template #reference>-->
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情--> <!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
<!-- <div class="titleR">进入未完成任务</div>--> <!-- <div class="titleR">进入未完成任务</div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-popover>--> <!-- </el-popover>-->
</div> </div>
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun"> <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
返回列表 返回列表
</div> </div>
</div> </div>
<!-- 路径列表--> <!-- 路径列表-->
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head"> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
<div style="min-width: 770px; width: 100%"> <div style="min-width: 770px; width: 100%">
<el-table :data="data" style="width: 100%" @row-click="gofun"> <el-table :data="data" style="width: 100%" @row-click="gofun">
<el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255"> <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
<img :src="scope.row.picUrl" style="width: 230px; height: 155px" /> <img :src="scope.row.picUrl" style="width: 230px; height: 155px"/>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="name" label="路径名称" /> <el-table-column align="center" prop="name" label="路径名称"/>
<el-table-column align="center" prop="introduce" label="路径介绍" #default="scope"> <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
<el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark"> <el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
<template #reference> <template #reference>
<div>{{ scope.row.remark }}</div> <div>{{ scope.row.remark }}</div>
</template> </template>
</el-popover> </el-popover>
</el-table-column> </el-table-column>
<el-table-column align="center" prop="organizationName" label="归属组织" /> <el-table-column align="center" prop="organizationName" label="归属组织"/>
<el-table-column #default="scope" align="center" :width="150" prop="state" label="状态"> <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
<img :src=" <img :src="
scope.row.status === 0 scope.row.status === 0
? ongoing ? ongoing
: scope.row.status === 1 : scope.row.status === 1
@@ -81,239 +81,255 @@
: scope.row.status === -1 : scope.row.status === -1
? nostarted ? nostarted
: null : null
" style="width: 99px; height: 99px" /> " style="width: 99px; height: 99px"/>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"--> <!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
<!-- 路径列表--> <!-- 路径列表-->
<!-- 路径详情图 --> <!-- 路径详情图 -->
<div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail"> <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
<div v-for="(item, i) in detail?.rows" :key="i"> <div v-for="(item, i) in detail?.rows" :key="i">
<img :src="useImage(`222_0${i + 2}.png`)" /> <img :src="useImage(`222_0${i + 2}.png`)"/>
</div> </div>
<!-- <div class="modal"--> <!-- <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;">--> <!-- 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>
</div> <!-- <svg width="100%" height="600" xmlns="http://www.w3.org/2000/svg" style="padding:40px">-->
<!-- <defs>-->
<!-- <marker id="arrow" markerHeight="13" markerWidth="13">-->
<!-- <path d="M2,2 L2,10 L10,6 L2,2" stroke="none" fill="#409eff"></path>-->
<!-- </marker>-->
<!-- </defs>-->
<!-- <path d="M105 570 C1000 600 -60 505 890 270" stroke-width="3" stroke="#409eff" fill="none" stroke-linecap="round" stroke-dasharray=".1 5" marker-mid="url(#arrow)" marker-start="url(#arrow)" marker-end="url(#arrow)"></path>-->
<!-- <text x="50" y="550">初级产品经理</text>-->
<!-- <circle cx="90" cy="570" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
<!-- <text x="450" y="400">中级产品经理</text>-->
<!-- <circle cx="490" cy="420" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
<!-- <text x="850" y="250">高级产品经理</text>-->
<!-- <circle cx="890" cy="270" r="10" fill="#fff" stroke-width="5" stroke="#22a000"></circle>-->
<!-- </svg>-->
</div>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue"; import {reactive, toRefs, ref, onMounted, computed} from "vue";
import nostarted from "../../assets/image/nostarted.png"; import nostarted from "../../assets/image/nostarted.png";
import completed from "../../assets/image/completed.png"; 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";
import store from "@/store"; import store from "@/store";
const detail = ref(); const detail = ref();
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const { data } = usePage(ROUTER_LIST, { pageSize: 60 }); const {data} = usePage(ROUTER_LIST, {pageSize: 60});
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">
#app div:nth-child(1) { //#app div:nth-child(1) {
background: rgba(0, 0, 0, 0) !important; // background: rgba(0, 0, 0, 0) !important;
//}
.modal {
} }
.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; // background-color: pink;
.title { .title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-left: 53px; margin-left: 53px;
margin-right: 54px; margin-right: 54px;
} }
.title .titleL { .title .titleL {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.title .titleL .text { .title .titleL .text {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 24px; line-height: 24px;
margin-right: 26px; margin-right: 26px;
} }
.title .titleL .info { .title .titleL .info {
display: flex; display: flex;
// align-items: center; // align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #387df7; color: #387df7;
} }
.title .titleR { .title .titleR {
width: 157px; width: 157px;
height: 48px; height: 48px;
border: 2px solid #0060ff; border: 2px solid #0060ff;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #0060ff; color: #0060ff;
} }
.head { .head {
// height: 50px; // height: 50px;
background: #f9f9f9; background: #f9f9f9;
margin-top: 50px; margin-top: 50px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
margin-left: 53px; margin-left: 53px;
margin-right: 54px; margin-right: 54px;
width: calc(100% - 107px); width: calc(100% - 107px);
// min-width: 770px; // min-width: 770px;
overflow-x: auto; overflow-x: auto;
.el-table th.el-table__cell { .el-table th.el-table__cell {
background: rgba(249, 249, 249, 1); background: rgba(249, 249, 249, 1);
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.el-table .cell { .el-table .cell {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
word-break: break-all; word-break: break-all;
} }
.el-table__row { .el-table__row {
height: 231px; height: 231px;
font-size: 14px; font-size: 14px;
color: rgba(102, 102, 102, 1); color: rgba(102, 102, 102, 1);
font-weight: 500; font-weight: 500;
} }
} }
.mapdetail { .mapdetail {
width: calc(100% - 107px); width: calc(100% - 107px);
height: 577px; height: 577px;
background: rgba(242, 245, 247, 0.6); background: rgba(242, 245, 247, 0.6);
margin-top: 26px; margin-top: 26px;
border-radius: 8px; border-radius: 8px;
margin-left: 53px; margin-left: 53px;
margin-right: 54px; margin-right: 54px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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>

201
src/views/roadmap/PathDetails.vue
View File

@@ -11,44 +11,38 @@
<!-- 详细信息 --> <!-- 详细信息 -->
<div class="detailinfo"> <div class="detailinfo">
<div class="detailL"> <div class="detailL">
<div v-for="(i, k) in data.chapterProcessList" :key="k"> <div>
<div class="title"> <div class="title">
<div class="titleL">{{ i.chapterName }}</div> <div class="titleL">{{ data.currentStageName }}</div>
<div class="titleR" :style="{ display: 'flex' }"> <div class="titleR" :style="{ display: 'flex' }">
<img src="../../assets/image/pathdetails/circle.png" /> <img
<div class="titleRT">进行中</div> :src="data.currentChapterCnt?circle:circle2"/>
</div> <div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
<div {{ data.currentChapterCnt ? '进行中' : '未开始' }}
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>
<div <div
class="course" class="course"
v-for="(value, index) in i.taskProcessList.filter( v-for="(value, index) in data.taskBoList?.filter(
(e) => !whiteTypes(e.type) (e) => !whiteTypes(e.type)
)" )"
:key="index" :key="index"
> >
<div style="width: 70%"> <div style="width: 70%">
<div class="coursename" :title="value.name">{{ value.name }}</div> <div class="coursename" :title="value.name">{{ value.name }}</div>
<div class="coursetag"> <div class="coursetag">
<div <div
class="tag1" class="tag1"
style="margin-right: 11px; margin-top: 16px" style="margin-right: 11px; margin-top: 16px"
v-if="value.flag" v-if="value.flag"
> >
必修 必修
</div> </div>
<div <div
class="tag2" class="tag2"
style="margin-right: 11px; margin-top: 16px" style="margin-right: 11px; margin-top: 16px"
v-if="!value.flag" v-if="!value.flag"
> >
选修 选修
</div> </div>
@@ -66,17 +60,17 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
<div <div
class="progressBox" class="progressBox"
:style="{ display: value.type === 1 ? 'block' : 'none' }" :style="{ display: value.type === 1 ? 'block' : 'none' }"
> >
<div>当前进度</div> <div>当前进度</div>
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress
:percentage="value.currentRatio" :percentage="value.currentRatio"
:show-text="false" :show-text="false"
:stroke-width="8" :stroke-width="8"
:color=" :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)',
@@ -89,13 +83,13 @@
/> />
</div> </div>
<div <div
style=" style="
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #277aff; color: #277aff;
margin-left: 10px; margin-left: 10px;
" "
:style="{ :style="{
color: { 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)',
@@ -112,18 +106,18 @@
</div> </div>
</div> </div>
<div <div
class="goclass" class="goclass"
:style="{ :style="{
background: `${types.path[value.type] ? '#2478ff' : '#999'}`, background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}" }"
@click="toFinish(value, i.chapterName, i.chapterId)" @click="toFinish(value)"
> >
{{ {{
value.status === 1 value.status === 1
? "已完成" ? "已完成"
: types.path[value.type] : types.path[value.type]
? types.toName[value.type] ? types.toName[value.type]
: "未开放" : "未开放"
}} }}
</div> </div>
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">--> <!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
@@ -186,18 +180,18 @@
<div class="info"> <div class="info">
<div class="title"> <div class="title">
<img <img
style="width: 21px; height: 20px" style="width: 21px; height: 20px"
src="../../assets/image/pathdetails/info.png" src="../../assets/image/pathdetails/info.png"
/> />
<div class="text" style="margin-left: 7px">个人信息</div> <div class="text" style="margin-left: 7px">个人信息</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<!-- todo #路径详情 个人信息缺少img和介绍--> <!-- todo #路径详情 个人信息缺少img和介绍-->
<div <div
class="teacheritem" class="teacheritem"
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
> >
<img class="peopleimg" :src="`/upload${userInfo.avatar}`" /> <img class="peopleimg" :src="`/upload${userInfo.avatar}`"/>
<div style="margin-left: 17px"> <div style="margin-left: 17px">
<div class="teacherName"> <div class="teacherName">
<div style="margin-right: 5px"> <div style="margin-right: 5px">
@@ -214,8 +208,8 @@
<div class="info" style="padding-top: 20px"> <div class="info" style="padding-top: 20px">
<div class="title"> <div class="title">
<img <img
style="width: 18px; height: 17px" style="width: 18px; height: 17px"
src="../../assets/image/pathdetails/study.png" src="../../assets/image/pathdetails/study.png"
/> />
<div class="text" style="margin-left: 9px">学习进度</div> <div class="text" style="margin-left: 9px">学习进度</div>
<div class="box"></div> <div class="box"></div>
@@ -231,10 +225,10 @@
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress
:percentage="parseInt(data.totalProgress * 100)" :percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
:show-text="false" :show-text="false"
:stroke-width="8" :stroke-width="8"
:color=" :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)',
@@ -242,13 +236,13 @@
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(data.totalProgress) * 100) / 20] }[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20]
" "
/> />
</div> </div>
<div <div
style="font-size: 14px; font-weight: 500; margin-left: 10px" style="font-size: 14px; font-weight: 500; margin-left: 10px"
:style="{ :style="{
color: { 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)',
@@ -256,10 +250,10 @@
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((data.totalProgress * 100) / 20)], }[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)],
}" }"
> >
{{ parseInt(data.totalProgress * 100) }}% {{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
</div> </div>
</div> </div>
</div> </div>
@@ -270,10 +264,10 @@
<div class="progress"> <div class="progress">
<div style="width: 291px"> <div style="width: 291px">
<el-progress <el-progress
:percentage="parseInt(data.compulsoryProgress * 100)" :percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
:show-text="false" :show-text="false"
:stroke-width="8" :stroke-width="8"
:color=" :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)',
@@ -281,18 +275,18 @@
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((data.compulsoryProgress * 100) / 20)] }[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)]
" "
/> />
</div> </div>
<div <div
style=" style="
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #277aff; color: #277aff;
margin-left: 10px; margin-left: 10px;
" "
:style="{ :style="{
color: { 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)',
@@ -300,10 +294,10 @@
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((data.compulsoryProgress * 100) / 20)], }[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)],
}" }"
> >
{{ parseInt(data.compulsoryProgress * 100) }}% {{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
</div> </div>
</div> </div>
</div> </div>
@@ -318,40 +312,31 @@
</template> </template>
<script setup> <script setup>
import { computed, reactive, ref, watch } from "vue"; import {computed, reactive, ref, watch} from "vue";
import word from "@/assets/image/file/word.png"; import circle from '../../assets/image/pathdetails/circle.png';
import ppt from "@/assets/image/file/ppt.png"; import circle2 from '../../assets/image/pathdetails/circle2.png';
import pdf from "@/assets/image/file/pdf.png"; import {boeRequest, useRequest, request} from "@/api/request";
import zip from "@/assets/image/file/zip.png"; import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
import md from "@/assets/image/file/md.png"; import {useRoute, useRouter} from "vue-router";
import medal1 from "@/assets/image/medal/medal1.png"; import {ElMessage} from "element-plus";
import medal2 from "@/assets/image/medal/medal2.png";
import medal3 from "@/assets/image/medal/medal3.png";
import img from "@/assets/image/uploadimg.png";
import { boeRequest, useRequest, request } from "@/api/request";
import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useUserInfo } from "@/api/utils";
import store from "@/store"; import store from "@/store";
const { const {
query: { routerId, routerName }, query: {routerId, routerName},
} = useRoute(); } = useRoute();
const router = useRouter(); const router = useRouter();
const returnclick = () => { const returnclick = () => {
router.back(); router.back();
}; };
const { data } = useRequest(ROUTER_PROCESS, { routerId }); const {data} = useRequest(ROUTER_PROCESS, {routerId});
console.log("data", data);
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
console.log("userInfo", 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: {
@@ -391,56 +376,54 @@ const types = ref({
4: "/homeworkpage", 4: "/homeworkpage",
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试 5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
6: "/livebroadcast", 6: "/livebroadcast",
7: ({ courseId }) => 7: ({courseId}) =>
request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) => request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) =>
window.open(linkAddress) window.open(linkAddress)
), //外联 ), //外联
8: "/discusspage", 8: "/discusspage",
9: "/moreactive", 9: "/moreactive",
10: ({ evaType, targetId }) => 10: ({evaType, targetId}) =>
window.open( window.open(
(evaType == 0 (evaType == 0
? import.meta.env.VITE_BOE_TEST_DETAIL_URL ? import.meta.env.VITE_BOE_TEST_DETAIL_URL
: import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId : import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
), //测评 ), //测评
11: "/surveydetail", 11: "/surveydetail",
12: "/ballotpage", 12: "/ballotpage",
13: "/projectdetails", 13: "/projectdetails",
}, },
}); });
function toFinish(d, sName, chapterId) { function toFinish(d) {
if (!types.value.path[d.type]) { if (!types.value.path[d.type]) {
ElMessage.error("暂时未开放"); ElMessage.error("暂时未开放");
return; return;
} }
if (d.type == 3 || d.type == 7) { if (d.type === 3 || d.type === 7) {
request(STUDY_RECORD, { request(STUDY_RECORD, {
studentId: data.value.userInfoBo.userId, studentId: data.value.userInfoBo.userId,
targetId: data.value.routerId, targetId: data.value.routerId,
logo: 1, logo: 1,
stageOrChapterId: chapterId, stageOrChapterId: data.value.currentStageId,
taskId: d.routerTaskId, taskId: d.routerTaskId,
}); });
} }
if (typeof types.value.path[d.type] === "string") { if (typeof types.value.path[d.type] === "string") {
console.log("dddddd", d);
types.value.path[d.type] && types.value.path[d.type] &&
types.value.path[d.type].startsWith("http") && types.value.path[d.type].startsWith("http") &&
window.open(types.value.path[d.type] + d.targetId); window.open(types.value.path[d.type] + d.targetId);
types.value.path[d.type] && types.value.path[d.type] &&
types.value.path[d.type].startsWith("/") && types.value.path[d.type].startsWith("/") &&
router.push({ router.push({
path: types.value.path[d.type], path: types.value.path[d.type],
query: { query: {
id: d.routerTaskId, id: d.routerTaskId,
type: 1, type: 1,
courseId: d.courseId, courseId: d.courseId,
pName: data.value.name, pName: data.value.name,
sName, sName:data.currentStageName,
}, },
}); });
} else if (typeof types.value.path[d.type] === "function") { } else if (typeof types.value.path[d.type] === "function") {
console.log("ddddddd", d); console.log("ddddddd", d);
types.value.path[d.type](d); types.value.path[d.type](d);