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>
<button class="searchBtn" @click="resetClick">重置</button> <button class="searchBtn" @click="resetClick">重置</button>
</div> </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;" <div class="projectList" v-if="isLoading==true" style="display:flex;color:#909399;">
src="../../assets/image/notask.png" />
</div> </div>
<div v-else class="projectList" v-for="(i, k) in projectList" :key="k"> <div v-else>
<div style="display: flex"> {{ loading.close() }}
<img style="width: 253px; height: 144px; border-radius: 4px" :src="i.picUrl" /> <div class="projectList" v-if="!projectList.length" style="display:flex;color:#909399;">
<div style="margin-left: 29px"> <img class="img2" style="margin-left:359px;margin-top:100px;width:148px;height:220px;"
<div class="projectName" :title="i.name"> src="../../assets/image/notask.png" />
{{ 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 style="width: 253px; height: 144px; border-radius: 4px" :src="i.picUrl" />
<div style="width: 115px"> <div style="margin-left: 29px">
<el-progress :percentage="parseInt(i.finishTaskNum / i.totalTaskNum * 100)" :show-text="false" <div class="projectName" :title="i.name">
:stroke-width="8" color="rgba(255, 160, 80, 1)" /> {{ i.name }}
</div> </div>
<div class="progressNum"> <div class="progress">
{{ <div class="progressNow">当前进度</div>
(i.finishTaskNum && i.totalTaskNum) ? parseInt(i.finishTaskNum / i.totalTaskNum * 100) : 0 <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>
<div class="studyNew" v-if="i.lastStudyTime">最新一次学习时间{{ i.lastStudyTime }}</div>
</div> </div>
<div class="studyNew" v-if="i.lastStudyTime">最新一次学习时间{{ i.lastStudyTime }}</div>
</div> </div>
</div> <div class="tobestarted" v-if="i.status == 2" @click="goProjectDetails(i)">
<div class="tobestarted" v-if="i.status == 2" @click="goProjectDetails(i)"> 待开始
待开始 </div>
</div> <div class="gostudy" v-if="i.status == 0" @click="goProjectDetails(i)">
<div class="gostudy" v-if="i.status == 0" @click="goProjectDetails(i)"> 去学习
去学习 </div>
</div> <div class="finish" v-if="i.status == 1" @click="goProjectDetails(i)">
<div class="finish" v-if="i.status == 1" @click="goProjectDetails(i)"> 已完成
已完成 </div>
</div> <div class="tobestarted" v-if="i.status == 3" @click="goProjectDetails(i)">
<div class="tobestarted" v-if="i.status == 3" @click="goProjectDetails(i)"> 已结束
已结束 </div>
</div> </div>
</div> </div>
<!-- <div <!-- <div
@@ -120,6 +127,7 @@ import { useRouter } from "vue-router";
import store from "@/store"; import store from "@/store";
import { toDate } from "../../api/method"; import { toDate } from "../../api/method";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { ElLoading } from 'element-plus';
const projectClassify = []; const projectClassify = [];
const studyProgress = []; const studyProgress = [];
@@ -134,8 +142,17 @@ const endTime = ref(""); //开始时间
const dialogVisible = ref(false) const dialogVisible = ref(false)
const userInfo = computed(() => store.state.userInfo); const userInfo = computed(() => store.state.userInfo);
const isLoading = ref(false);
const loading = ref(false);
//获取项目列表--------start------------------------------------ //获取项目列表--------start------------------------------------
const getProject = () => { const getProject = () => {
isLoading.value = true;
loading.value = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)'
})
request(PROJECT_LIST, { request(PROJECT_LIST, {
beginTime: beginTime.value, beginTime: beginTime.value,
endTime: endTime.value, endTime: endTime.value,
@@ -149,10 +166,13 @@ const getProject = () => {
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);
isLoading.value = false;
} }
}) })
.catch((err) => { .catch((err) => {
console.log("获取失败", err); console.log("获取失败", err);
projectList.value = [];
isLoading.value = false;
}); });
}; };
getProject(); getProject();