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.
100 lines
2.3 KiB
100 lines
2.3 KiB
2 years ago
|
<template>
|
||
|
|
<div class="m-subbox m-sqrfph">
|
||
|
|
<div class="rank">
|
||
|
|
<div class="tit">{{ self.orgName }}</div>
|
||
|
|
<div class="num">第<span>{{ self.rank }}</span>名</div>
|
||
|
|
</div>
|
||
|
|
<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 in pmList" :key="item.rank">
|
||
|
|
<div :class="item.rank < 4 ? `td tdbg${item.rank}` : 'td'">
|
||
|
|
{{ item.rank }}
|
||
|
|
</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: "RankingGridData",
|
||
|
|
props: {
|
||
|
|
date: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
org: this.$store.state.chooseArea.chooseName,
|
||
|
|
pmList: [],
|
||
|
|
self: {}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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/residentHouseUpdateGroupByGrid?month=' + this.date + '&level=' + this.$store.state.chooseArea.chooseName.level + '&orgId=' + this.$store.state.chooseArea.chooseName.orgId).then(({data: {data}}) => {
|
||
|
|
if (data) {
|
||
|
|
data = data.map((item, index) => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
rank: index - 0 + 1
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.pmList = data.filter(item => !item.self)
|
||
|
|
this.self = data.filter(item => item.self)[0]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped/>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.rank {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
padding: 0 15px 20px;
|
||
|
|
|
||
|
|
.num {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #A3B9DA;
|
||
|
|
margin-top: 20px;
|
||
|
|
|
||
|
|
span {
|
||
|
|
font-size: 36px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: italic;
|
||
|
|
color: #FFB73C;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|