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.
156 lines
5.4 KiB
156 lines
5.4 KiB
<template>
|
|
<div class="m-subbox m-jdhx">
|
|
<div class="m-jdhx-top">
|
|
<div class="m-jdhx-card">
|
|
<div class="m-jdhx-card-title">
|
|
<div class="m-jdhx-card-title-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/jumin-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-card-title-txt">主要居民类型</div>
|
|
</div>
|
|
<div class="m-jdhx-card-content">
|
|
<div class="m-jdhx-card-content-item" v-for="(item,index) in categoryList" :key="index">
|
|
<div class="m-jdhx-card-content-item-lable">{{item.categoryName}}</div>
|
|
<div class="m-jdhx-card-content-item-value">{{item.categoryRatio?item.categoryRatio:'0%'}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-jdhx-card m-jdhx-f m-jdhx-h">
|
|
<div class="m-jdhx-card-title">
|
|
<div class="m-jdhx-card-title-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/fangwu-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-card-title-txt">房屋性质/用途</div>
|
|
</div>
|
|
<div class="m-jdhx-card-content">
|
|
<div class="m-jdhx-card-content-item" v-for="(item,index) in houseList" :key="index">
|
|
<div class="m-jdhx-card-content-item-lable">{{item.name}}</div>
|
|
<div class="m-jdhx-card-content-item-value">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-jdhx-center">
|
|
<div class="m-jdhx-center-line"></div>
|
|
<div class="m-jdhx-center-content">
|
|
<div class="m-jdhx-center-content-item">
|
|
<div class="m-jdhx-center-content-item-jumin">
|
|
<div class="m-jdhx-center-content-item-jumin-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/renkou-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-center-content-item-jumin-txt">人口</div>
|
|
</div>
|
|
<div class="m-jdhx-center-content-item-fangwu">
|
|
<div class="m-jdhx-center-content-item-fangwu-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/fangwu2-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-center-content-item-fangwu-txt">房屋</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 79px" class="m-jdhx-center-content-item">
|
|
<div class="m-jdhx-center-content-item-manyi">
|
|
<div class="m-jdhx-center-content-item-manyi-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/manyidu-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-center-content-item-manyi-txt">满意度</div>
|
|
</div>
|
|
<div class="m-jdhx-center-content-item-fengxian">
|
|
<div class="m-jdhx-center-content-item-fengxian-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/fengxianry-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-center-content-item-fengxian-txt">风险人员</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-jdhx-center-line"></div>
|
|
</div>
|
|
<div class="m-jdhx-top">
|
|
<div class="m-jdhx-card">
|
|
<div class="m-jdhx-card-title">
|
|
<div class="m-jdhx-card-title-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/manyi-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-card-title-txt">主要不满意事项</div>
|
|
</div>
|
|
<div class="m-jdhx-card-content">
|
|
<div class="m-jdhx-card-content-item" v-for="(item,index) in notSatisfactionList" :key="index">
|
|
<div class="m-jdhx-card-content-item-lable">{{item.name}}</div>
|
|
<div class="m-jdhx-card-content-item-value">{{item.ratio?item.ratio:'0%'}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-jdhx-card m-jdhx-f">
|
|
<div class="m-jdhx-card-title">
|
|
<div class="m-jdhx-card-title-icon">
|
|
<img
|
|
src="@/assets/images/shuju/overview/fengxian-icon.png"
|
|
/>
|
|
</div>
|
|
<div class="m-jdhx-card-title-txt">风险人员</div>
|
|
</div>
|
|
<div class="m-jdhx-card-content">
|
|
<div class="m-jdhx-card-content-item" v-for="(item,index) in riskList" :key="index">
|
|
<div class="m-jdhx-card-content-item-lable">{{item.riskName}}</div>
|
|
<div class="m-jdhx-card-content-item-value">{{item.riskNum}}人</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "jdtphx",
|
|
data() {
|
|
return {
|
|
org: this.$store.state.chooseArea.chooseName,
|
|
categoryList: [],
|
|
houseList: [],
|
|
notSatisfactionList: [],
|
|
riskList: [],
|
|
}
|
|
},
|
|
watch: {
|
|
"$store.state.chooseArea.chooseName"(val) {
|
|
if(val.orgId) {
|
|
this.getData(this.$store.state.chooseArea.chooseName)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.org.orgId) {
|
|
this.getData(this.org)
|
|
}
|
|
},
|
|
methods: {
|
|
getData({orgId, level}) {
|
|
this.$http.get('/actual/base/streetOverview/overviewPortrait?orgId=' + orgId + '&level=' + level).then(({data: {data}}) => {
|
|
this.categoryList = data.categoryList
|
|
this.houseList = data.houseList
|
|
this.notSatisfactionList = data.notSatisfactionList
|
|
this.riskList = data.riskList
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/dataBoard/overview/index.scss"
|
|
scoped
|
|
></style>
|
|
|