hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-14 05:16:47 +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

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

@@ -100,6 +100,20 @@
</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> </div>
</template> </template>
<script setup> <script setup>
@@ -120,7 +134,6 @@ 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();
@@ -143,25 +156,28 @@ async function gofun({ routerId, name: routerName }) {
// 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() { }
</script>
<style lang="scss">
#app div:nth-child(1) {
background: rgba(0, 0, 0, 0) !important;
} }
.modal {} function toUnTask() {
}
</script>
<style lang="scss">
//#app div:nth-child(1) {
// background: rgba(0, 0, 0, 0) !important;
//}
.modal {
}
.modal:after { .modal:after {
content: ""; content: "";

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

@@ -11,26 +11,20 @@
<!-- 详细信息 --> <!-- 详细信息 -->
<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"
@@ -116,7 +110,7 @@
: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
@@ -231,7 +225,7 @@
<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="
@@ -242,7 +236,7 @@
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>
@@ -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,7 +264,7 @@
<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="
@@ -281,7 +275,7 @@
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>
@@ -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>
@@ -319,20 +313,12 @@
<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 zip from "@/assets/image/file/zip.png";
import md from "@/assets/image/file/md.png";
import medal1 from "@/assets/image/medal/medal1.png";
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 {boeRequest, useRequest, request} from "@/api/request";
import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api"; import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
import {useRoute, useRouter} from "vue-router"; import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import { useUserInfo } from "@/api/utils";
import store from "@/store"; import store from "@/store";
const { const {
@@ -343,9 +329,8 @@ 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) => {
@@ -409,23 +394,21 @@ const types = ref({
}, },
}); });
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);
@@ -438,7 +421,7 @@ function toFinish(d, sName, chapterId) {
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") {