style:修改项目列表加载

This commit is contained in:
wyx
2023-01-12 18:05:54 +08:00
parent 83f4c53ad8
commit d1b54fc5f8

View File

@@ -40,43 +40,50 @@
</button>
<button class="searchBtn" @click="resetClick">重置</button>
</div>
<div class="projectList" v-if="!projectList.length" style="display:flex;color:#909399;">
<img class="img2" style="margin-left:359px;margin-top:100px;width:148px;height:220px;"
src="../../assets/image/notask.png" />
<div class="projectList" v-if="isLoading==true" style="display:flex;color:#909399;">
</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 v-else>
{{ loading.close() }}
<div class="projectList" v-if="!projectList.length" style="display:flex;color:#909399;">
<img class="img2" style="margin-left:359px;margin-top:100px;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="progressNum">
{{
(i.finishTaskNum && i.totalTaskNum) ? parseInt(i.finishTaskNum / i.totalTaskNum * 100) : 0
}}%
<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" v-if="i.lastStudyTime">最新一次学习时间{{ i.lastStudyTime }}</div>
</div>
<div class="studyNew" v-if="i.lastStudyTime">最新一次学习时间{{ 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 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>
<!-- <div
@@ -120,6 +127,7 @@ import { useRouter } from "vue-router";
import store from "@/store";
import { toDate } from "../../api/method";
import { ElMessage } from "element-plus";
import { ElLoading } from 'element-plus';
const projectClassify = [];
const studyProgress = [];
@@ -134,8 +142,17 @@ const endTime = ref(""); //开始时间
const dialogVisible = ref(false)
const userInfo = computed(() => store.state.userInfo);
const isLoading = ref(false);
const loading = ref(false);
//获取项目列表--------start------------------------------------
const getProject = () => {
isLoading.value = true;
loading.value = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
})
request(PROJECT_LIST, {
beginTime: beginTime.value,
endTime: endTime.value,
@@ -149,10 +166,13 @@ const getProject = () => {
projectList.value = res.data.rows;
projectTotal.value = Number(res.data.total);
console.log("projectTotal.value", projectTotal.value);
isLoading.value = false;
}
})
.catch((err) => {
console.log("获取失败", err);
projectList.value = [];
isLoading.value = false;
});
};
getProject();