150 lines
3.0 KiB
Vue
150 lines
3.0 KiB
Vue
<template>
|
|
<div class="app-container home">
|
|
<div class="header">
|
|
<div class="iconTitle"></div>
|
|
<div class="headerMain">我的待办</div>
|
|
</div>
|
|
<div class="homeMain">
|
|
<div
|
|
class="cardList"
|
|
v-for="(item, index) in pendingTasks"
|
|
:key="index"
|
|
@click="pushPage(item.caseFlowId)"
|
|
>
|
|
<div class="badge">{{ item.caseCount }}</div>
|
|
<div class="cardMain">
|
|
<img class="iconImg" :src="iconHead + item.fileName" alt="" />
|
|
</div>
|
|
<div class="cardMain1">
|
|
<div class="imgTitle">{{ item.caseStatusName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { todoCount } from "@/api/system/homepage.js";
|
|
export default {
|
|
name: "Index",
|
|
data() {
|
|
return {
|
|
// 版本号
|
|
version: "3.8.6",
|
|
pendingTasks: [], //案件代办状态
|
|
iconHead: process.env.VUE_APP_BASE_API
|
|
};
|
|
},
|
|
watch: {
|
|
$route(val) {
|
|
if (val) {
|
|
this.gettodoCount();
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.gettodoCount();
|
|
},
|
|
methods: {
|
|
goTarget(href) {
|
|
window.open(href, "_blank");
|
|
},
|
|
// 查询代办状态
|
|
gettodoCount() {
|
|
todoCount({}).then((res) => {
|
|
this.pendingTasks = res.data.toDoCountList;
|
|
console.log(res.data.toDoCountList, "this.pendingTasks");
|
|
});
|
|
},
|
|
// 点击待办按钮跳转
|
|
pushPage(status) {
|
|
this.$router.push({
|
|
path: "/caseManagement/caseManagement/caseList",
|
|
query: { caseFlowId: status + "" },
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.home {
|
|
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 13px;
|
|
color: #676a6c;
|
|
overflow-x: hidden;
|
|
background-color: #f1f1f1;
|
|
height: 100vh;
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.iconTitle {
|
|
width: 5px;
|
|
height: 25px;
|
|
background-color: #0f5c9b;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.headerMain {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
.homeMain {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.cardList {
|
|
width: 13%;
|
|
height: 200px;
|
|
border-radius: 30px;
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
margin-right: 38px;
|
|
margin-bottom: 30px;
|
|
cursor: pointer;
|
|
|
|
.badge {
|
|
width: 50px;
|
|
height: 30px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: red;
|
|
border-radius: 10px 30px 10px 30px;
|
|
background-color: #1296DB;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.cardMain {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 40px;
|
|
.iconImg {
|
|
width: 100px;
|
|
height: 110px;
|
|
}
|
|
}
|
|
.cardMain1 {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.imgTitle {
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|