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

fix

Browse Source
This commit is contained in:
wuyx
2022-12-23 08:58:50 +08:00
parent b03a363c77
commit f387d3691b
1 changed files with 254 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

521
src/views/project/ProjectManage.vue
View File

@@ -7,11 +7,11 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
<template> <template>
<div class="projectManage"> <div class="projectManage">
<div class="content"> <div class="content">
<div class="title">我的项目</div> <div class="title">我的项目</div>
<div class="search"> <div class="search">
<!-- <el-select v-model="value" class="m-2" placeholder="Select"> <!-- <el-select v-model="value" class="m-2" placeholder="Select">
<el-option <el-option
v-for="item in projectClassify" v-for="item in projectClassify"
:key="item.value" :key="item.value"
@@ -27,88 +27,61 @@
:value="item.value" :value="item.value"
/> />
</el-select> --> </el-select> -->
<div style="width: 200px; margin-right: 20px"> <div style="width: 200px; margin-right: 20px">
<el-input v-model="projectname" placeholder="请输入项目名称" /> <el-input v-model="projectname" placeholder="请输入项目名称" />
</div> </div>
<div style="width: 420px"> <div style="width: 420px">
<el-date-picker <el-date-picker v-model="searchTime" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
v-model="searchTime" @change="selectTime" />
type="datetimerange" </div>
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="selectTime"
/>
</div>
<button <button class="searchBtn" @click="searchClick" style="margin-left: 20px">
class="searchBtn" 搜索
@click="searchClick" </button>
style="margin-left: 20px" <button class="searchBtn" @click="resetClick">重置</button>
> </div>
搜索 <div class="projectList" v-if="projectList.length == 0" style="display:flex;color:#909399;">
</button> <img class="img2" style="margin-left: 675px;margin-top: 165px;width:148px;height:220px;"
<button class="searchBtn" @click="resetClick">重置</button> src="../../assets/image/notask.png" />
</div> </div>
<div class="projectList" v-if="projectList.length==0" style="display:flex;color:#909399;"> <div v-else class="projectList" v-for="(i, k) in projectList" :key="k">
<img <div style="display: flex">
class="img2" <img style="width: 253px; height: 144px; border-radius: 4px" :src="i.picUrl" />
style="margin-left: 675px;margin-top: 165px;width:148px;height:220px;" <div style="margin-left: 29px">
src="../../assets/image/notask.png" <div class="projectName" :title="i.name">
/> {{ i.name }}
</div> </div>
<div v-else class="projectList" v-for="(i, k) in projectList" :key="k"> <div class="progress">
<div style="display: flex"> <div class="progressNow">当前进度：</div>
<img <div style="width: 115px">
style="width: 253px; height: 144px; border-radius: 4px" <el-progress :percentage="parseInt(i.finishTaskNum / i.totalTaskNum) * 100" :show-text="false"
:src="i.picUrl" :stroke-width="8" color="rgba(255, 160, 80, 1)" />
/> </div>
<div style="margin-left: 29px"> <div class="progressNum">
<div class="projectName" :title="i.name"> {{
{{ i.name }} i.finishTaskNum && i.totalTaskNum
</div> ? parseInt(i.finishTaskNum / i.totalTaskNum) * 100
<div class="progress"> : 0
<div class="progressNow">当前进度：</div> }}%
<div style="width: 115px"> </div>
<el-progress </div>
:percentage="parseInt(i.finishTaskNum / i.totalTaskNum) * 100" <div class="studyNew">最新一次学习时间：{{ i.lastStudyTime }}</div>
:show-text="false" </div>
:stroke-width="8" </div>
color="rgba(255, 160, 80, 1)" <div class="tobestarted" v-if="i.status == 2" @click="goProjectDetails(i)">
/> 待开始
</div> </div>
<div class="progressNum"> <div class="gostudy" v-if="i.status == 0" @click="goProjectDetails(i)">
{{ 去学习
i.finishTaskNum && i.totalTaskNum </div>
? parseInt(i.finishTaskNum / i.totalTaskNum) * 100 <div class="finish" v-if="i.status == 1" @click="goProjectDetails(i)">
: 0 已完成
}}% </div>
</div> <div class="tobestarted" v-if="i.status == 3" @click="goProjectDetails(i)">
</div> 已结束
<div class="studyNew">最新一次学习时间：{{ i.lastStudyTime }}</div> </div>
</div> </div>
</div> <!-- <div
<div
class="tobestarted"
v-if="i.status == 2"
@click="goProjectDetails(i)"
>
待开始
</div>
<div class="gostudy" v-if="i.status == 0" @click="goProjectDetails(i)">
去学习
</div>
<div class="finish" v-if="i.status == 1" @click="goProjectDetails(i)">
已完成
</div>
<div
class="tobestarted"
v-if="i.status == 3"
@click="goProjectDetails(i)"
>
已结束
</div>
</div>
<!-- <div
style="display: flex; justify-content: center; margin-top: 30px" style="display: flex; justify-content: center; margin-top: 30px"
v-if="projectTotal > 10" v-if="projectTotal > 10"
> >
@@ -123,17 +96,17 @@
/> />
</div> </div>
</div> --> </div> -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue"; import { reactive, toRefs, ref, onMounted, computed } from "vue";
import { boeRequest, request, usePage, useRequest } from "@/api/request"; import { boeRequest, request, usePage, useRequest } from "@/api/request";
import { import {
ROUTER_CHAPTER_LIST, ROUTER_CHAPTER_LIST,
PROJECT_LIST, PROJECT_LIST,
ROUTER_UNCOMPLETE_LIST, ROUTER_UNCOMPLETE_LIST,
} from "@/api/api"; } from "@/api/api";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
@@ -154,24 +127,24 @@ const userInfo = computed(() => store.state.userInfo);
//获取项目列表--------start------------------------------------ //获取项目列表--------start------------------------------------
const getProject = () => { const getProject = () => {
request(PROJECT_LIST, { request(PROJECT_LIST, {
beginTime: beginTime.value, beginTime: beginTime.value,
endTime: endTime.value, endTime: endTime.value,
key: projectname.value, key: projectname.value,
pageNo: currentPage.value, pageNo: currentPage.value,
pageSize: pageSize.value, pageSize: pageSize.value,
}) })
.then((res) => { .then((res) => {
console.log("获取成功", res); console.log("获取成功", res);
if (res.code === 200) { if (res.code === 200) {
projectList.value = res.data.rows; projectList.value = res.data.rows;
projectTotal.value = Number(res.data.total); projectTotal.value = Number(res.data.total);
console.log("projectTotal.value", projectTotal.value); console.log("projectTotal.value", projectTotal.value);
} }
}) })
.catch((err) => { .catch((err) => {
console.log("获取失败", err); console.log("获取失败", err);
}); });
}; };
getProject(); getProject();
@@ -180,175 +153,189 @@ getProject();
//搜索 //搜索
const searchClick = () => { const searchClick = () => {
console.log("点击搜索", projectname.value, searchTime.value); console.log("点击搜索", projectname.value, searchTime.value);
if (searchTime.value) { if (searchTime.value) {
beginTime.value = toDate( beginTime.value = toDate(
new Date(searchTime.value[0]).getTime() / 1000, new Date(searchTime.value[0]).getTime() / 1000,
"Y-M-D h:m:s" "Y-M-D h:m:s"
); );
endTime.value = toDate( endTime.value = toDate(
new Date(searchTime.value[1]).getTime() / 1000, new Date(searchTime.value[1]).getTime() / 1000,
"Y-M-D h:m:s" "Y-M-D h:m:s"
); );
} }
console.log("beginTime", beginTime.value, endTime.value); console.log("beginTime", beginTime.value, endTime.value);
getProject(); getProject();
}; };
//重置 //重置
const resetClick = () => { const resetClick = () => {
searchTime.value = ""; searchTime.value = "";
projectname.value = ""; projectname.value = "";
currentPage.value = 1; currentPage.value = 1;
beginTime.value = ""; beginTime.value = "";
endTime.value = ""; endTime.value = "";
getProject(); getProject();
console.log("点击重置"); console.log("点击重置");
}; };
//搜索--------------end----------------------------------------- //搜索--------------end-----------------------------------------
const router = useRouter(); const router = useRouter();
const goProjectDetails = (value) => { const goProjectDetails = (value) => {
import.meta.env.MODE === "development" import.meta.env.MODE === "development"
? router.push({ ? router.push({
path: "/projectdetails", path: "/projectdetails",
query: { projectId: value.projectId }, query: { projectId: value.projectId },
}) })
: window.open( : window.open(
`${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/projectdetails&params=${encodeURIComponent( `${import.meta.env.VITE_BOE_PATH_DETAIL_URL}/projectdetails&params=${encodeURIComponent(
`projectId=${routerId}` `projectId=${value.projectId}`
)}` )}`
); );
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.projectManage { .projectManage {
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;
// background-color: #ccc;
.content { // background-color: #ccc;
width: 100%; .content {
// flex: 1; width: 100%;
margin-top: 50px; // flex: 1;
margin-left: 81px; margin-top: 50px;
.title { margin-left: 81px;
font-size: 18px;
font-weight: 600; .title {
color: #333333; font-size: 18px;
line-height: 25px; font-weight: 600;
} color: #333333;
.search { line-height: 25px;
margin-top: 31px; }
display: flex;
align-items: center; .search {
.searchBtn { margin-top: 31px;
width: 100px; display: flex;
height: 35px; align-items: center;
border-radius: 8px;
display: flex; .searchBtn {
justify-content: center; width: 100px;
align-items: center; height: 35px;
background: #387df7; border-radius: 8px;
border: 1px solid #387df7; display: flex;
color: #ffffff; justify-content: center;
cursor: pointer; align-items: center;
margin-left: 10px; background: #387df7;
} border: 1px solid #387df7;
} color: #ffffff;
.projectList { cursor: pointer;
margin-top: 40px; margin-left: 10px;
display: flex; }
justify-content: space-between; }
align-items: center;
overflow-x: auto; .projectList {
.projectName { margin-top: 40px;
width: 270px; display: flex;
margin-top: 12px; justify-content: space-between;
font-size: 18px; align-items: center;
font-weight: 600; overflow-x: auto;
color: #333333;
line-height: 25px; .projectName {
margin-bottom: 40px; width: 270px;
overflow: hidden; margin-top: 12px;
text-overflow: ellipsis; font-size: 18px;
white-space: nowrap; font-weight: 600;
} color: #333333;
.progress { line-height: 25px;
display: flex; margin-bottom: 40px;
align-items: center; overflow: hidden;
.el-progress-bar__outer { text-overflow: ellipsis;
background-color: rgba(255, 160, 80, 0.19); white-space: nowrap;
} }
.progressNow {
font-size: 14px; .progress {
font-weight: 400; display: flex;
color: #333333; align-items: center;
line-height: 20px;
margin-right: 20px; .el-progress-bar__outer {
} background-color: rgba(255, 160, 80, 0.19);
.progressNum { }
font-size: 12px;
font-weight: 400; .progressNow {
color: #999999; font-size: 14px;
line-height: 17px; font-weight: 400;
margin-left: 26px; color: #333333;
} line-height: 20px;
} margin-right: 20px;
.studyNew { }
margin-top: 16px;
font-size: 14px; .progressNum {
font-weight: 400; font-size: 12px;
color: #999999; font-weight: 400;
line-height: 20px; color: #999999;
} line-height: 17px;
.tobestarted { margin-left: 26px;
width: 140px; }
height: 40px; }
border-radius: 4px;
border: 1px solid #387df7; .studyNew {
display: flex; margin-top: 16px;
align-items: center; font-size: 14px;
justify-content: center; font-weight: 400;
font-size: 16px; color: #999999;
font-weight: 400; line-height: 20px;
color: #387df7; }
line-height: 22px;
cursor: pointer; .tobestarted {
margin-right: 120px; width: 140px;
} height: 40px;
.gostudy { border-radius: 4px;
width: 140px; border: 1px solid #387df7;
height: 40px; display: flex;
background: #387df7; align-items: center;
box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34); justify-content: center;
border-radius: 4px; font-size: 16px;
display: flex; font-weight: 400;
align-items: center; color: #387df7;
justify-content: center; line-height: 22px;
font-size: 16px; cursor: pointer;
font-weight: 400; margin-right: 120px;
color: #ffffff; }
line-height: 22px;
margin-right: 120px; .gostudy {
cursor: pointer; width: 140px;
} height: 40px;
.finish { background: #387df7;
width: 140px; box-shadow: 1px 2px 15px 1px rgba(56, 125, 247, 0.34);
height: 40px; border-radius: 4px;
background: rgba(56, 125, 247, 0.6); display: flex;
border-radius: 4px; align-items: center;
display: flex; justify-content: center;
align-items: center; font-size: 16px;
justify-content: center; font-weight: 400;
font-size: 16px; color: #ffffff;
font-weight: 400; line-height: 22px;
color: #ffffff; margin-right: 120px;
line-height: 22px; cursor: pointer;
cursor: pointer; }
}
} .finish {
} width: 140px;
height: 40px;
background: rgba(56, 125, 247, 0.6);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 22px;
cursor: pointer;
}
}
}
} }
</style> </style>