mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-10 03:16:47 +08:00
342 lines
8.7 KiB
Vue
342 lines
8.7 KiB
Vue
<!--
|
||
* @Author: lixg lixg@dongwu-inc.com
|
||
* @Date: 2022-12-18 15:56:03
|
||
* @LastEditors: lixg lixg@dongwu-inc.com
|
||
* @LastEditTime: 2022-12-19 16:11:13
|
||
* @FilePath: /fe-stu/src/views/project/ProjectList.vue
|
||
* @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">
|
||
<el-option
|
||
v-for="item in projectClassify"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
<el-select v-model="value" class="m-2" placeholder="Select">
|
||
<el-option
|
||
v-for="item in studyProgress"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
: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>
|
||
|
||
<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"
|
||
>
|
||
<div class="demo-pagination-block">
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
:small="small"
|
||
layout="prev, pager, next, jumper"
|
||
:total="projectTotal"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</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,
|
||
} from "@/api/api";
|
||
|
||
import { useRouter } from "vue-router";
|
||
import store from "@/store";
|
||
import { toDate } from "../../api/method";
|
||
const projectClassify = [];
|
||
const studyProgress = [];
|
||
const projectList = ref([]); //项目列表
|
||
const pageSize = ref(60); //每页条数
|
||
const currentPage = ref(1); //当前页数
|
||
const projectTotal = ref(""); //项目总数
|
||
const projectname = ref(""); //项目名称
|
||
const searchTime = ref(""); //选择时间
|
||
const beginTime = ref(""); //结束时间
|
||
const endTime = ref(""); //开始时间
|
||
|
||
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);
|
||
});
|
||
};
|
||
getProject();
|
||
|
||
//获取项目列表--------end------------------------------------
|
||
//搜索--------------start-----------------------------------------
|
||
|
||
//搜索
|
||
const searchClick = () => {
|
||
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();
|
||
};
|
||
//重置
|
||
const resetClick = () => {
|
||
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¶ms=${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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|