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

-- fix bug

Browse Source
This commit is contained in:
yuping
2023-02-17 03:44:54 +08:00
parent 7f68a59a44
commit 99aea96baf
3 changed files with 105 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/request.js
View File

@@ -30,7 +30,7 @@ export function usePage(_url, param, callback) {
state.total = r.data.total state.total = r.data.total
state.current = r.data.current state.current = r.data.current
state.loading = false state.loading = false
callback(r) callback && callback(r)
}) })
} }

10
src/components/PathDetailImage.vue
View File

@@ -12,7 +12,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import {computed, defineProps, ref, watch} from "vue"; import {computed, defineProps, ref} from "vue";
import back from '@/assets/image/pathdetails/pathDetailBack.png' import back from '@/assets/image/pathdetails/pathDetailBack.png'
import nameBack from '@/assets/image/pathdetails/pathDetailImg.png' import nameBack from '@/assets/image/pathdetails/pathDetailImg.png'
import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png' import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png'
@@ -29,7 +29,7 @@ const props = defineProps({
const router = useRouter(); const router = useRouter();
const visiable = ref(true) const visiable = ref(true)
const imageAttrs = { const imageAttrs = {
'路径图背景-1671015331292.png': { '路径图背景': {
width: 1437, width: 1437,
height: 594, height: 594,
positions: [ positions: [
@@ -45,7 +45,7 @@ const imageAttrs = {
const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {}) const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img.includes(e))] || {})
const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.chapterId === props.detail.currentStageId)) const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId))
function show() { function show() {
visiable.value = true visiable.value = true
@@ -58,11 +58,11 @@ function toDetail(i) {
(import.meta.env.MODE === "development" || import.meta.env.MODE === "test") (import.meta.env.MODE === "development" || import.meta.env.MODE === "test")
? router.push({ ? router.push({
path: "/pathdetails", path: "/pathdetails",
query: {routerId: props.detail.routerId, routerName: props.detail.routerName}, query: {routerId: props.detail.id, routerName: props.detail.name},
}) })
: window.open( : window.open(
`${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent( `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
`routerId=${props.detail.routerId}&routerName=${props.detail.routerName}` `routerId=${props.detail.id}&routerName=${props.detail.name}`
)}` )}`
,'_top'); ,'_top');
} }

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

@@ -6,104 +6,102 @@
<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" style="width: 20px; height: 18px; margin-right: 10px"
src="../../assets/image/pm.png" 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 <img
style="width: 18px; height: 17px; margin-right: 11px" style="width: 18px; height: 17px; margin-right: 11px"
src="../../assets/image/band.png" 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 #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情--> <div class="titleR">进入未完成任务</div>
<!-- <div class="titleR">进入未完成任务</div>--> </template>
<!-- </template>--> </el-popover>
<!-- </el-popover>-->
</div> </div>
<div <div
:style="{ display: showmapdetail ? 'flex' : 'none' }" :style="{ display: showmapdetail ? 'flex' : 'none' }"
class="titleR" class="titleR"
@click="returnfun" @click="returnfun"
> >
返回列表 返回列表
</div> </div>
</div> </div>
<!-- 路径列表--> <!-- 路径列表-->
<div <div
class="routerList" class="routerList"
v-if="isLoading" v-if="isLoading"
style="display: flex; color: #909399" style="display: flex; color: #909399"
></div> ></div>
<div <div
v-else v-else
:style="{ display: !showmapdetail ? 'flex' : 'none' }" :style="{ display: !showmapdetail ? 'flex' : 'none' }"
class="head" class="head"
> >
{{ loading.close() }}
<div style="min-width: 770px; width: 100%"> <div style="min-width: 770px; width: 100%">
<el-table :data="dates" style="width: 100%" @row-click="gofun"> <el-table :data="data" style="width: 100%" @row-click="gofun">
<el-table-column <el-table-column
prop="img" prop="img"
label="缩略图" label="缩略图"
#default="scope" #default="scope"
align="center" align="center"
width="255" width="255"
> >
<img <img
:src="scope.row.picUrl" :src="scope.row.picUrl"
style="width: 230px; height: 155px" 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 <el-table-column
align="center" align="center"
prop="introduce" prop="introduce"
label="路径介绍" label="路径介绍"
#default="scope" #default="scope"
> >
<el-popover <el-popover
placement="bottom-start" placement="bottom-start"
:width="400" :width="400"
title="路径介绍" title="路径介绍"
trigger="hover" trigger="hover"
:content="scope.row.remark" :content="scope.row.remark"
> >
<template #reference> <template #reference>
<div>{{ scope.row.remark }}</div> <div>{{ scope.row.remark }}</div>
@@ -112,104 +110,88 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
align="center" align="center"
prop="organizationName" prop="organizationName"
label="归属组织" label="归属组织"
/> />
<el-table-column <el-table-column
#default="scope" #default="scope"
align="center" align="center"
:width="150" :width="150"
prop="state" prop="state"
label="状态" label="状态"
> >
<img <img
:src=" :src="{1:ongoing,2:completed,0:ongoing}[scope.row.taskStatus] || nostarted"
scope.row.taskStatus === 1 style="width: 99px; height: 99px"
? ongoing
: scope.row.taskStatus === 2
? completed
: scope.row.taskStatus === 0
? ongoing
: null
"
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]"-->
<!-- 路径列表-->
<!-- 路径详情图 --> <!-- 路径详情图 -->
<div <div
:style="{ display: showmapdetail ? 'flex' : 'none' }" :style="{ display: showmapdetail ? 'flex' : 'none' }"
class="mapdetail" class="mapdetail"
> >
<PathDetailImage <PathDetailImage
img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png" :img="detail?.picUrl"
:detail="detail" :detail="detail"
></PathDetailImage> ></PathDetailImage>
</div> </div>
<!-- 路径详情图 -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, ref } from "vue"; import {computed, ref, watch} 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 { usePage } from "@/api/request"; import {usePage} from "@/api/request";
import { ROUTER_LIST } from "@/api/api"; import {ROUTER_LIST} from "@/api/api";
import { useRouter } from "vue-router"; import {useRouter} from "vue-router";
import store from "@/store"; import store from "@/store";
import PathDetailImage from "@/components/PathDetailImage.vue"; import PathDetailImage from "@/components/PathDetailImage.vue";
import { ElLoading } from "element-plus"; import {ElLoading} from "element-plus";
import {useRequest} from "@/api/request";
import {ROUTER_UNCOMPLETE_LIST} from "@/api/api";
const detail = ref(); const detail = ref();
const showmapdetail = ref(false); const showmapdetail = ref(false);
const currentStageId = ref(); const currentStageId = ref();
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const loading = ref(false); const loading = ref(false);
const isLoading = ref(true);
loading.value = ElLoading.service({ loading.value = ElLoading.service({
lock: true, lock: true,
text: "Loading", text: "Loading",
background: "rgba(0, 0, 0, 0.7)", background: "rgba(0, 0, 0, 0.7)",
}); });
const dates = ref([])
const { data } = usePage(ROUTER_LIST, { pageSize: 60 }, (e) => { const {data, loading: isLoading} = usePage(ROUTER_LIST, {pageSize: 60});
console.log("我请求成功了吗", e);
let cdata = [] watch(data, () => {
for(let i=0;i<e.data.length;i++){ loading.value.close()
cdata.push(e.data[i].routerInfo) })
}
dates.value = cdata;
isLoading.value = false;
});
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 returnfun = () => { const returnfun = () => {
showmapdetail.value = false; showmapdetail.value = false;
}; };
const completed = ref("../../assets/image/completed.png");
const ongoing = ref("../../assets/image/ongoing.png");
async function gofun(e) { async function gofun(e) {
detail.value = e; detail.value = e;
showmapdetail.value = true; showmapdetail.value = true;
} }
function toUnTask() {} function toUnTask() {
}
</script> </script>
<style lang="scss"> <style lang="scss">
#app div:nth-child(1) { #app div:nth-child(1) {