hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-09 19:06:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
eefaca7be3e91ab1ee3d5a1907b9156368ef3914
fe-student/src/views/roadmap/LearnPath.vue
wyx eefaca7be3 style:修改进度条显示问题
2022-12-21 17:44:53 +08:00

320 lines
8.8 KiB
Vue
Raw Blame History

<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>
<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>
</template>
<script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue";
import nostarted from "../../assets/image/nostarted.png";
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,
} from "@/api/api";
import { useImage } from "@/api/utils";
import { useRouter } from "vue-router";
import store from "@/store";
const detail = ref();
const userInfo = computed(() => store.state.userInfo);
const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
console.log("datadata", data);
const router = useRouter();
const returnclick = () => {
router.back();
};
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
const state = reactive({
showmapdetail: false,
});
const { showmapdetail } = toRefs(state);
const returnfun = () => {
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}`
)}`
);
}
function toUnTask() { }
</script>
<style lang="scss">
#app div:nth-child(1) {
// background: rgba(0, 0, 0, 0) !important;
}
.modal {}
.modal:after {
content: "";
}
.learnpath {
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;
}
.title .titleL {
display: flex;
align-items: center;
}
.title .titleL .text {
font-size: 18px;
font-weight: bold;
color: #333333;
line-height: 24px;
margin-right: 26px;
}
.title .titleL .info {
display: flex;
// align-items: center;
font-size: 14px;
font-weight: 400;
color: #387df7;
}
.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;
}
.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 th.el-table__cell {
background: rgba(249, 249, 249, 1);
color: rgba(51, 51, 51, 1);
font-size: 14px;
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;
}
.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;
}
.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;
}
.tasks {
width: 405px;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 28px;
cursor: pointer;
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink