战立标
2 years ago
5 changed files with 292 additions and 12 deletions
@ -0,0 +1,166 @@ |
|||
<template> |
|||
<div class="follow-up"> |
|||
<div class="content"> |
|||
<div class="left"> |
|||
<div class="total"> |
|||
<div class="tit">回访总数</div> |
|||
<div class="num"><span>{{ sumNum ? sumNum : 0 }}</span>个</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="tit">电话回访</div> |
|||
<div class="num"><span>{{ mobileNum ? mobileNum : 0 }}</span>个</div> |
|||
</div> |
|||
<div class="left-item"> |
|||
<div class="tit">上门回访</div> |
|||
<div class="num"><span>{{ visitNum ? visitNum : 0 }}</span>个</div> |
|||
</div> |
|||
</div> |
|||
<div class="xc"> |
|||
<div class="tit">回访消除 <br/> 风险人数</div> |
|||
<div class="num blue">{{ notRiskyNum ? notRiskyNum : 0 }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "FollowUp", |
|||
props: { |
|||
date: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
org: this.$store.state.chooseArea.chooseName, |
|||
typeList: [{ |
|||
label: '12345事件', |
|||
value: '12345' |
|||
}, { |
|||
label: '事件回访', |
|||
value: 'follow' |
|||
}], |
|||
type: 'follow', |
|||
sumNum: 0, |
|||
mobileNum: 0, |
|||
visitNum: 0, |
|||
notRiskyNum: 0, |
|||
} |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.getData() |
|||
} |
|||
}, |
|||
date() { |
|||
this.getData() |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.org.orgId) { |
|||
this.getData() |
|||
} |
|||
}, |
|||
methods: { |
|||
getData() { |
|||
this.$http.get('/actual/base/streetOverview/eventAndFollowGroup?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId + '&queryType=' + this.type).then(({data: {data}}) => { |
|||
this.sumNum = data.sumNum |
|||
this.mobileNum = data.mobileNum |
|||
this.visitNum = data.visitNum |
|||
this.notRiskyNum = data.notRiskyNum |
|||
}) |
|||
}, |
|||
typeChange(val) { |
|||
console.log(val,'val') |
|||
this.type = val |
|||
this.getData() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.follow-up { |
|||
padding: 10px 16px; |
|||
} |
|||
.content { |
|||
background: linear-gradient(90deg, rgba(1, 94, 234, 0.1) 0%, rgba(16, 50, 103, 0) 50%, rgba(1, 94, 234, 0.1) 100%); |
|||
padding: 40px 19px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.left { |
|||
border-right: 1px solid #96B1CE; |
|||
padding-right: 35px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.total { |
|||
.tit { |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: #A3B9DA; |
|||
|
|||
span { |
|||
font-size: 36px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #08EBAE; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.left-item { |
|||
margin-left: 24px; |
|||
.tit { |
|||
font-size: 14px; |
|||
font-weight: 400; |
|||
color: #A3B9DA; |
|||
line-height: 24px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
color: #A3B9DA; |
|||
span { |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #78C4F3; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.xc { |
|||
.tit { |
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 24px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 32px; |
|||
font-weight: bold; |
|||
font-style: italic; |
|||
color: #FFB73C; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<div class="m-subbox m-sqrfph"> |
|||
<div class="table"> |
|||
<div class="tr"> |
|||
<div class="th">排名</div> |
|||
<div class="th">社区</div> |
|||
<div class="th">房屋更新数</div> |
|||
<div class="th">人口更新数</div> |
|||
<div class="th">人房更新总数</div> |
|||
</div> |
|||
<div class="tr" v-for="(item,index) in pmList" :key="index"> |
|||
<div :class="index - 0 + 1 < 4 ? `td tdbg${index-0+1}` : 'td'"> |
|||
{{ index - 0 + 1 }} |
|||
</div> |
|||
<div class="td">{{ item.orgName }}</div> |
|||
<div class="td">{{ item.houseNum }}</div> |
|||
<div class="td">{{ item.residentNum }}</div> |
|||
<div class="td">{{ item.sumNum }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "GridUpdateRanking", |
|||
props: { |
|||
date: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
org: this.$store.state.chooseArea.chooseName, |
|||
pmList: [], |
|||
}; |
|||
}, |
|||
watch: { |
|||
"$store.state.chooseArea.chooseName"(val) { |
|||
if (val.orgId) { |
|||
this.getList() |
|||
} |
|||
}, |
|||
date() { |
|||
this.getList() |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.org.orgId) { |
|||
this.getList() |
|||
} |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
this.$http.get('/actual/base/streetOverview/residentHouseUpdateGroup?level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => { |
|||
this.pmList = data |
|||
}) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped/> |
|||
<style lang="scss" scoped> |
|||
.m-sqrfph { |
|||
padding-top: 0 !important; |
|||
height: 160px !important; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue