You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
2.6 KiB
117 lines
2.6 KiB
<template>
|
|
<div>
|
|
<div ref="lxHeader">
|
|
<lx-header icon="md-apps" text="填报总览" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
|
<slot>
|
|
<el-date-picker
|
|
v-model="select.year"
|
|
@change="changeYear"
|
|
type="year"
|
|
placeholder="选择总览年份">
|
|
</el-date-picker>
|
|
</slot>
|
|
</lx-header>
|
|
</div>
|
|
<div class="content">
|
|
<div class="box1">
|
|
<div>{{viewlist.count_category_type?viewlist.count_category_type:0}}</div>
|
|
<div>清单类型</div>
|
|
</div>
|
|
<div class="box2">
|
|
<div>{{viewlist.count_category?viewlist.count_category:0}}</div>
|
|
<div>填报清单项</div>
|
|
</div>
|
|
<div class="box3">
|
|
<div>{{viewlist.count_person?viewlist.count_person:0}}</div>
|
|
<div>“一把手”和领导班子</div>
|
|
</div>
|
|
<div class="box4">
|
|
<div>{{viewlist.count_record?viewlist.count_record:0}}</div>
|
|
<div>条填报记录</div>
|
|
</div>
|
|
<div class="box5">
|
|
<div>{{viewlist.count_record_missed?viewlist.count_record_missed:0}}</div>
|
|
<div>超期未报</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {overview} from "@/api/fill/index"
|
|
export default{
|
|
data(){
|
|
return{
|
|
select:{
|
|
year:this.$moment().format('YYYY')
|
|
},
|
|
viewlist:{}
|
|
}
|
|
},
|
|
created(){
|
|
this.getOverview()
|
|
},
|
|
methods:{
|
|
changeYear(e){},
|
|
getOverview(){
|
|
overview({
|
|
year:this.select.year
|
|
}).then(res=>{
|
|
this.viewlist = res
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
position: absolute;
|
|
width: 95%;
|
|
top: 50%;
|
|
}
|
|
.content>div{
|
|
/* border:1px solid #333; */
|
|
width:18%;
|
|
padding:60px 0;
|
|
/* background-color: #fff; */
|
|
font-size: 16px;
|
|
color:#fff;
|
|
/* flex: 1; */
|
|
position: relative;
|
|
margin-bottom: 2.375rem;
|
|
box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
opacity: 0.8;
|
|
padding: 1.25rem 0;
|
|
}
|
|
.content>div>div:first-child{
|
|
font-size: 45px;
|
|
}
|
|
.content .box1{
|
|
background: linear-gradient(134deg, #D1AC7B, #DFC69C);
|
|
|
|
}
|
|
.content .box2{
|
|
background: linear-gradient(134deg, #9193BC, #B7B9D4);
|
|
|
|
}
|
|
.content .box3{
|
|
background: linear-gradient(-55deg, #F6A868, #F4C59E);
|
|
|
|
}
|
|
.content .box4{
|
|
background: linear-gradient(-55deg, #64A48E, #9ECABB);
|
|
|
|
}
|
|
.content .box5{
|
|
background: linear-gradient(134deg, #40c9c6, #34bfa3);
|
|
|
|
}
|
|
|
|
</style>
|