mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-11 20:06:49 +08:00
-- fix bug
This commit is contained in:
yuping
@@ -6,104 +6,102 @@
|
||||
<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"
|
||||
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"
|
||||
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>-->
|
||||
<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>
|
||||
<div class="titleR">进入未完成任务</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div
|
||||
:style="{ display: showmapdetail ? 'flex' : 'none' }"
|
||||
class="titleR"
|
||||
@click="returnfun"
|
||||
:style="{ display: showmapdetail ? 'flex' : 'none' }"
|
||||
class="titleR"
|
||||
@click="returnfun"
|
||||
>
|
||||
返回列表
|
||||
</div>
|
||||
</div>
|
||||
<!-- 路径列表-->
|
||||
<div
|
||||
class="routerList"
|
||||
v-if="isLoading"
|
||||
style="display: flex; color: #909399"
|
||||
class="routerList"
|
||||
v-if="isLoading"
|
||||
style="display: flex; color: #909399"
|
||||
></div>
|
||||
<div
|
||||
v-else
|
||||
:style="{ display: !showmapdetail ? 'flex' : 'none' }"
|
||||
class="head"
|
||||
v-else
|
||||
:style="{ display: !showmapdetail ? 'flex' : 'none' }"
|
||||
class="head"
|
||||
>
|
||||
{{ loading.close() }}
|
||||
<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
|
||||
prop="img"
|
||||
label="缩略图"
|
||||
#default="scope"
|
||||
align="center"
|
||||
width="255"
|
||||
prop="img"
|
||||
label="缩略图"
|
||||
#default="scope"
|
||||
align="center"
|
||||
width="255"
|
||||
>
|
||||
<img
|
||||
:src="scope.row.picUrl"
|
||||
style="width: 230px; height: 155px"
|
||||
: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="name" label="路径名称"/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="introduce"
|
||||
label="路径介绍"
|
||||
#default="scope"
|
||||
align="center"
|
||||
prop="introduce"
|
||||
label="路径介绍"
|
||||
#default="scope"
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom-start"
|
||||
:width="400"
|
||||
title="路径介绍"
|
||||
trigger="hover"
|
||||
:content="scope.row.remark"
|
||||
placement="bottom-start"
|
||||
:width="400"
|
||||
title="路径介绍"
|
||||
trigger="hover"
|
||||
:content="scope.row.remark"
|
||||
>
|
||||
<template #reference>
|
||||
<div>{{ scope.row.remark }}</div>
|
||||
@@ -112,104 +110,88 @@
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="organizationName"
|
||||
label="归属组织"
|
||||
align="center"
|
||||
prop="organizationName"
|
||||
label="归属组织"
|
||||
/>
|
||||
<el-table-column
|
||||
#default="scope"
|
||||
align="center"
|
||||
:width="150"
|
||||
prop="state"
|
||||
label="状态"
|
||||
#default="scope"
|
||||
align="center"
|
||||
:width="150"
|
||||
prop="state"
|
||||
label="状态"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
scope.row.taskStatus === 1
|
||||
? ongoing
|
||||
: scope.row.taskStatus === 2
|
||||
? completed
|
||||
: scope.row.taskStatus === 0
|
||||
? ongoing
|
||||
: null
|
||||
"
|
||||
style="width: 99px; height: 99px"
|
||||
:src="{1:ongoing,2:completed,0:ongoing}[scope.row.taskStatus] || nostarted"
|
||||
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"
|
||||
:style="{ display: showmapdetail ? 'flex' : 'none' }"
|
||||
class="mapdetail"
|
||||
>
|
||||
<PathDetailImage
|
||||
img="https://u-pre.boe.com/upload/路径图背景-1671015331292.png"
|
||||
:detail="detail"
|
||||
:img="detail?.picUrl"
|
||||
:detail="detail"
|
||||
></PathDetailImage>
|
||||
</div>
|
||||
<!-- 路径详情图 -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
// import nostarted from "../../assets/image/nostarted.png";
|
||||
// import completed from "../../assets/image/completed.png";
|
||||
// import ongoing from "../../assets/image/ongoing.png";
|
||||
import { usePage } from "@/api/request";
|
||||
import { ROUTER_LIST } from "@/api/api";
|
||||
import { useRouter } from "vue-router";
|
||||
import {computed, ref, watch} from "vue";
|
||||
import nostarted from "../../assets/image/nostarted.png";
|
||||
import completed from "@/assets/image/completed.png";
|
||||
import ongoing from "@/assets/image/ongoing.png";
|
||||
import {usePage} from "@/api/request";
|
||||
import {ROUTER_LIST} from "@/api/api";
|
||||
import {useRouter} from "vue-router";
|
||||
import store from "@/store";
|
||||
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 showmapdetail = ref(false);
|
||||
const currentStageId = ref();
|
||||
const userInfo = computed(() => store.state.userInfo);
|
||||
const loading = ref(false);
|
||||
const isLoading = ref(true);
|
||||
loading.value = ElLoading.service({
|
||||
lock: true,
|
||||
text: "Loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
|
||||
const dates = ref([])
|
||||
|
||||
const { data } = usePage(ROUTER_LIST, { pageSize: 60 }, (e) => {
|
||||
console.log("我请求成功了吗", e);
|
||||
let cdata = []
|
||||
for(let i=0;i<e.data.length;i++){
|
||||
cdata.push(e.data[i].routerInfo)
|
||||
}
|
||||
dates.value = cdata;
|
||||
isLoading.value = false;
|
||||
});
|
||||
const {data, loading: isLoading} = usePage(ROUTER_LIST, {pageSize: 60});
|
||||
|
||||
watch(data, () => {
|
||||
loading.value.close()
|
||||
})
|
||||
|
||||
const router = useRouter();
|
||||
const returnclick = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
|
||||
const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
|
||||
|
||||
const returnfun = () => {
|
||||
showmapdetail.value = false;
|
||||
};
|
||||
|
||||
const completed = ref("../../assets/image/completed.png");
|
||||
const ongoing = ref("../../assets/image/ongoing.png");
|
||||
|
||||
async function gofun(e) {
|
||||
detail.value = e;
|
||||
showmapdetail.value = true;
|
||||
}
|
||||
|
||||
function toUnTask() {}
|
||||
function toUnTask() {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#app div:nth-child(1) {
|
||||
|
||||
Reference in New Issue
Block a user