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

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