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.
199 lines
4.5 KiB
199 lines
4.5 KiB
<template>
|
|
<div>
|
|
<div class="number-list">
|
|
<div class="number-item">
|
|
<div class="img">
|
|
<img src="@/assets/images/manyidu/hf_ts.png" alt="">
|
|
</div>
|
|
<div>
|
|
<div class="txt">
|
|
12345热线 <br>
|
|
投诉人数
|
|
</div>
|
|
<div class="num"><span>{{event12345Num?event12345Num:0}}</span> 人</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="number-item">
|
|
<div class="img">
|
|
<img src="@/assets/images/manyidu/hf_bmy.png" alt="">
|
|
</div>
|
|
<div>
|
|
<div class="txt">
|
|
省满意度调查 <br>
|
|
不满意人数
|
|
</div>
|
|
<div class="num"><span>{{provinceSatisfactionNum?provinceSatisfactionNum:0}}</span> 人</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="number-item">
|
|
<div class="img">
|
|
<img src="@/assets/images/manyidu/hf_zpbmy.png" alt="">
|
|
</div>
|
|
<div>
|
|
<div class="txt">
|
|
社区满意度自评 <br>
|
|
不满意人数
|
|
</div>
|
|
<div class="num"><span>{{selfInspectNum?selfInspectNum:0}}</span> 人</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="number-list2">
|
|
<div class="number-item">
|
|
<div class="txt">
|
|
本月回访 <br>
|
|
次数
|
|
</div>
|
|
<div class="num"><span class="grey">{{followMonthNum?followMonthNum:0}}</span> 人</div>
|
|
</div>
|
|
<div class="number-item">
|
|
<div class="txt">
|
|
本月回访消除 <br>
|
|
风险人员数
|
|
</div>
|
|
<div class="num"><span class="green">{{followMonthNotRiskyNum?followMonthNotRiskyNum:0}}</span> 人</div>
|
|
</div>
|
|
<div class="number-item">
|
|
<div class="txt">
|
|
累计回访 <br>
|
|
次数
|
|
</div>
|
|
<div class="num"><span class="purple">{{followSumNum?followSumNum:0}}</span> 人</div>
|
|
</div>
|
|
<div class="number-item">
|
|
<div class="txt">
|
|
累计回访消除 <br>
|
|
风险人员数
|
|
</div>
|
|
<div class="num"><span class="blue">{{followNotRiskyNum?followNotRiskyNum:0}}</span> 人</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "RiskStatistics",
|
|
data() {
|
|
return {
|
|
event12345Num: 0,
|
|
followMonthNotRiskyNum: 0,
|
|
followMonthNum: 0,
|
|
followNotRiskyNum: 0,
|
|
followSumNum: 0,
|
|
provinceSatisfactionNum: 0,
|
|
selfInspectNum: 0,
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
"$store.state.chooseArea.chooseName"(val) {
|
|
if (val.orgId) {
|
|
this.getData();
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$store.state.chooseArea.chooseName.orgId) {
|
|
this.getData();
|
|
}
|
|
},
|
|
methods: {
|
|
getData() {
|
|
let params = {
|
|
level: this.$store.state.chooseArea.chooseName.level,
|
|
orgId: this.$store.state.chooseArea.chooseName.orgId
|
|
}
|
|
this.$http.get('/governance/satisfactionOverview/satisfactionFollowGroup?'+this.$paramsFormat(params)).then(({data:{data}}) => {
|
|
this.event12345Num = data.event12345Num;
|
|
this.followMonthNotRiskyNum = data.followMonthNotRiskyNum;
|
|
this.followMonthNum = data.followMonthNum;
|
|
this.followNotRiskyNum = data.followNotRiskyNum;
|
|
this.followSumNum = data.followSumNum;
|
|
this.provinceSatisfactionNum = data.provinceSatisfactionNum;
|
|
this.selfInspectNum = data.selfInspectNum;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.number-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 40px 0;
|
|
padding: 0 15px 0 8px;
|
|
|
|
.number-item {
|
|
display: flex;
|
|
|
|
.image {
|
|
width: 98px;
|
|
height: 70px;
|
|
}
|
|
|
|
.txt {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 24px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.num {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #A3B9DA;
|
|
|
|
span {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
color: #3AB7FF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.number-list2 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30px 39px;
|
|
.number-item {
|
|
.txt {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #A3B9DA;
|
|
line-height: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.num {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #A3B9DA;
|
|
|
|
span {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.grey {
|
|
color: #78C4F3;
|
|
}
|
|
.green {
|
|
color: #08EBAE;
|
|
}
|
|
.purple {
|
|
color: #A761FD;
|
|
}
|
|
.blue {
|
|
color: #356EFF;
|
|
}
|
|
</style>
|