<template>
|
<div class="chart-box-x" v-if="statisType">
|
<v-header title="党组织数据统计"></v-header>
|
<div class="chart-body">
|
<!---->
|
<!-- <div class="tree" v-if="false">-->
|
<!-- <el-cascader-->
|
<!-- :options="OrgAllList"-->
|
<!-- :props="props"-->
|
<!-- :show-all-levels="false"-->
|
<!-- clearable>-->
|
<!-- <template slot-scope="{ node, data }">-->
|
<!-- <span>{{ data.name }}</span>-->
|
<!-- <span v-if="data.type">-->
|
<!-- <el-tag>{{typeList[data.type]}}</el-tag>-->
|
<!-- </span>-->
|
<!-- </template>-->
|
<!-- </el-cascader>-->
|
<!-- </div>-->
|
<!---->
|
<div class="chart-r">
|
<div class="tree">
|
<el-cascader
|
:options="OrgAllList"
|
:props="props"
|
:show-all-levels="false"
|
@change="cascaderChange"
|
clearable
|
>
|
<template slot-scope="{ node, data }">
|
<span>{{ data.name }}</span>
|
<span v-if="data.type">
|
<el-tag>{{ typeList[data.type] }}</el-tag>
|
</span>
|
</template>
|
</el-cascader>
|
</div>
|
<div class="chart-t-box">
|
<div class="chart-t-l">
|
<div class="chart-f">
|
<div class="item">党员人数：{{ detail.partyMemberNum || 0 }}</div>
|
</div>
|
<div class="chart-f">
|
<div class="item">
|
正式党员：{{ detail.formalPartyMemberNum || 0 }} 占比：{{
|
detail.formalPartyMemberNumPercent || 0
|
}}%
|
</div>
|
<div class="item">
|
预备党员：{{ detail.preparePartyMemberNum || 0 }} 占比：{{
|
detail.preparePartyMemberNumPercent || 0
|
}}%
|
</div>
|
</div>
|
<div id="chart1" class="chart1" v-if="changType">
|
<chart1 :detail="detail"></chart1>
|
</div>
|
</div>
|
<!---->
|
<div class="chart-t-r">
|
<div class="chart-f">
|
<!-- <div class="item">党委人数：{{ detail.partyMemberNum || 0 }}</div> -->
|
<!-- <div class="item">党委人数：{{ detail.partyMemberNum || 0 }}</div> -->
|
</div>
|
<!---->
|
<div class="list-box">
|
<div
|
class="list"
|
v-for="item in detail.partyMemberList || []"
|
:key="item.id"
|
>
|
<img
|
class="img"
|
:src="item.photoPath || '/static/image/dh.jpg'"
|
alt=""
|
/>
|
<div class="text">姓名：{{ item.name }}</div>
|
<div class="text">职位:{{ item.position || "暂无" }}</div>
|
</div>
|
<div
|
v-if="
|
detail.partyMemberList === null ||
|
detail.partyMemberList === []
|
"
|
class="list-d"
|
>
|
暂无数据
|
</div>
|
</div>
|
<!---->
|
<v-tool-page
|
:sizesB="true"
|
:item="paged1"
|
@on-page="onPage"
|
></v-tool-page>
|
</div>
|
</div>
|
<!---->
|
<div style="margin: 20px 0">
|
<el-radio-group @change="change" v-model="year" size="medium">
|
<el-radio-button label="2022">本年</el-radio-button>
|
<el-radio-button label="2021">2021年</el-radio-button>
|
<el-radio-button label="2020">2020年</el-radio-button>
|
</el-radio-group>
|
</div>
|
<!---->
|
<div class="chart-b-box" v-if="changType">
|
<div class="chart2">
|
<div class="chart-f">
|
<div class="item">
|
参与活动{{ detail.participateActivityNum || 0 }}次，{{
|
detail.participateActivityDuration || 0
|
}}小时
|
</div>
|
</div>
|
<chart2 :detail="detail"></chart2>
|
<chart3 :detail="detail"></chart3>
|
</div>
|
<!---->
|
<div class="charts-box mr-l-40">
|
<div class="chart-f">
|
<div class="item">完成微心愿{{ detail.wishNum || 0 }}个</div>
|
</div>
|
<charts1 :detail="detail"></charts1>
|
<div class="chart-f">
|
<div class="item">完成随手拍{{ detail.easyNum || 0 }}个</div>
|
</div>
|
<charts2 :detail="detail"></charts2>
|
</div>
|
</div>
|
|
<!---->
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import chart1 from "./chart1";
|
import chart2 from "./chart2";
|
import chart3 from "./chart3";
|
import charts1 from "./charts1";
|
import charts2 from "./charts2";
|
export default {
|
props: [],
|
inject: ["reload"],
|
components: { chart1, chart2, chart3, charts1, charts2 },
|
data() {
|
return {
|
props: {
|
label: "name",
|
value: "id",
|
children: "childList",
|
checkStrictly: true,
|
},
|
selectOrg: {
|
orgsid: [],
|
},
|
typeList: {
|
1: "基层党委",
|
2: "二级基层党委",
|
3: "党总支",
|
4: "党支部",
|
5: "党小组",
|
},
|
OrgAllList: [],
|
paged1: { page: 1, total: 0, r: 0, limit: 4 },
|
year: "2022",
|
search: {},
|
detail: {},
|
orgId: "",
|
statisType: false,
|
changType: false,
|
};
|
},
|
created() {
|
this.getPbOrgAllList();
|
this.dataStatisticsOrg();
|
},
|
mounted() {},
|
methods: {
|
change() {
|
this.changType = false;
|
this.dataStatisticsOrg();
|
},
|
cascaderChange(e) {
|
// let orgId = ''
|
if (e.length !== 0) {
|
this.orgId = e[e.length - 1];
|
}
|
this.dataStatisticsOrg();
|
},
|
dataStatisticsOrg() {
|
//获取统计数据
|
let v = demo.copy(
|
Object.assign({
|
pageNum: this.paged1.page,
|
pageSize: this.paged1.limit,
|
orgId: this.orgId,
|
year: this.year,
|
})
|
);
|
this.$api.post("communitypartybuilding/dataStatistics/org", v, (res) => {
|
this.detail = res;
|
this.paged1.total = res.partyMemberNum;
|
this.statisType = true;
|
this.changType = true;
|
});
|
},
|
getPbOrgAllList() {
|
this.$api.post("communitypartybuilding/getPbOrgAllList", {}, (res) => {
|
this.recursion(res);
|
this.OrgAllList = res;
|
});
|
},
|
recursion(list) {
|
//递归 删除无用空children
|
list.map((item) => {
|
if (item.childList && item.childList.length !== 0) {
|
this.recursion(item.childList);
|
} else {
|
delete item.childList;
|
}
|
});
|
},
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged1.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged1.page = v.page;
|
this.paged1.limit = v.limit;
|
// this.init();
|
this.dataStatisticsOrg();
|
},
|
},
|
watch: {},
|
computed: {},
|
};
|
</script>
|
<style scoped lang="less">
|
.chart-box-x {
|
width: 100%;
|
|
.chart-body {
|
width: 100%;
|
display: flex;
|
|
.tree {
|
width: 250px;
|
}
|
.chart-r {
|
flex: 1;
|
.chart-f {
|
display: flex;
|
padding-top: 10px;
|
}
|
.item {
|
padding-left: 10px;
|
display: flex;
|
}
|
.chart-t-box {
|
width: 100%;
|
display: flex;
|
.chart-t-l {
|
.chart1 {
|
/*width: 300px;*/
|
height: 200px;
|
}
|
}
|
.chart-t-r {
|
padding-left: 10px;
|
.list-box {
|
width: 490px;
|
display: flex;
|
padding-bottom: 20px;
|
.list-d {
|
width: 100%;
|
height: 140px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.list {
|
width: 100px;
|
margin: 0 10px;
|
padding-top: 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.img {
|
width: 75px;
|
height: 75px;
|
border-radius: 100%;
|
}
|
.text {
|
padding-top: 8px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
.chart2 {
|
width: 250px;
|
height: 200px;
|
}
|
.chart-b-box {
|
width: 100%;
|
display: flex;
|
.charts-box {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
