<template>
|
<div class="Stat-box">
|
<v-header
|
title="党员数据统计"
|
:bar="bar"
|
search
|
@on-search="onSearch"
|
></v-header>
|
<div class="but-box">
|
<el-button @click="memberExport" type="primary">导出</el-button>
|
</div>
|
<div class="tab-box">
|
<div :class="{'card-m':index===1}" class="box-card" v-for="(item,index) in list" :key="item.id">
|
<div class="card-head">
|
<!---->
|
<img class="card-head-image" :src="item.photoPath||'/static/image/dh.jpg'" alt="">
|
<div class="head-r-box">
|
<div class="head-li">
|
<span> {{item.name}}</span>
|
<div class="tag">{{item.type===1?'预备党员':'正式党员'}}</div>
|
<div v-if="item.isRole===1" class="tag">党委</div>
|
</div>
|
<!---->
|
<div class="head-li">
|
<span>{{item.sex==1?'男':'女'}}</span>  
|
<span>{{item.age||0}}岁</span>  
|
<span>党龄：{{item.partyAge||0}}年</span>
|
</div>
|
</div>
|
</div>
|
<!---->
|
<div class="item">职能：{{item.function||''}}</div>
|
<div class="item">特长：{{item.specialtyName||''}}</div>
|
<div class="item">联系电话：{{item.phone||''}}</div>
|
<div class="item">身份证号：{{item.idCard||''}}</div>
|
<div class="item">双报到单位：{{item.checkUnitName||''}}</div>
|
<div class="item">总参与活动：{{item.activityCount||0}}次，{{item.activityDuration||0}}小时</div>
|
<div class="item">参与党员活动：{{item.partyActivityCount||0}}次，{{item.partyActivityDuration||0}}小时，积分{{item.partyActivityIntegral||0}}</div>
|
<div class="item">参与志愿者活动：{{item.volunteerActivityCount||0}}次，{{item.volunteerActivityDuration||0}}小时，积分{{item.volunteerActivityIntegral||0}}</div>
|
<div class="item">完成微心愿{{item.wishCount||0}}个,完成随手拍{{item.easyCount||0}}个</div>
|
</div>
|
</div>
|
<!---->
|
<v-tool-page
|
:sizesB="true"
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
<!---->
|
<Chart></Chart>
|
</div>
|
</template>
|
<script>
|
import Chart from './com/Chart'
|
export default {
|
props: [],
|
components: {Chart},
|
data() {
|
return {
|
bar: [
|
{title: "关键字", name: "keyWord", plac: '请输入姓名、身份证、联系电话、报到单位、党组织等关键词进行查找',width:'500px !important'},
|
{
|
title: "年度",
|
name: "month",
|
type: "select",
|
list: [
|
{label:'全部',value:null},
|
{label:'本年',value:2022},
|
{label:'2021',value:2021},
|
{label:'2020',value:2020},
|
],
|
}
|
],
|
list:[],
|
search:{},
|
paged: {page: 0, total: 0, r: 0, limit: 3},
|
}
|
},
|
created() {
|
},
|
mounted() {
|
|
},
|
methods: {
|
memberExport(){
|
let v = demo.copy(
|
Object.assign(this.search,{
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.post('communitypartybuilding/dataStatistics/member/export',v,res=>{
|
location.href = res
|
})
|
},
|
init(){
|
let v = demo.copy(
|
Object.assign(this.search,{
|
pageNum: this.paged.page,
|
pageSize: this.paged.limit,
|
})
|
);
|
this.$api.post('communitypartybuilding/dataStatistics/member/page',v,res=>{
|
this.list = res.records||[]
|
this.paged.total = res.total
|
})
|
},
|
// 搜索
|
onSearch(val) {
|
let v = demo.copy(val);
|
this.search = v;
|
this.paged.page = 1;
|
this.init();
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
},
|
watch: {},
|
computed: {}
|
}
|
|
</script>
|
<style scoped lang="less">
|
.Stat-box{
|
overflow: scroll;
|
.but-box{
|
padding: 10px 0;
|
}
|
.tab-box{
|
width: 1100px;
|
display: flex;
|
padding-left: 10px;
|
|
.box-card {
|
width: 340px;
|
background: white;
|
border-radius: 6px;
|
padding: 10px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
.card-head{
|
width: 100%;
|
display: flex;
|
|
.card-head-image{
|
width: 50px;
|
height: 50px;
|
border-radius: 100%;
|
}
|
.head-r-box{
|
padding-left: 20px;
|
flex: 1;
|
.head-li{
|
padding-bottom: 10px;
|
display: flex;
|
align-items: center;
|
.tag{
|
border-radius: 6px;
|
padding:4px 10px;
|
margin:0 6px;
|
border: 1px solid #a6a6a6;
|
}
|
}
|
}
|
}
|
.item{
|
padding-top: 10px;
|
}
|
}
|
.card-m{
|
margin: 0 20px;
|
}
|
}
|
}
|
</style>
|
