epmet pc工作端
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

<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>