dai
3 years ago
19 changed files with 1653 additions and 1131 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,308 @@ |
|||
<template> |
|||
<el-card class="g-cnt"> |
|||
<div class="m-cards"> |
|||
<div class="item" :key="item.name" v-for="item in list"> |
|||
<div class="item-left"> |
|||
<div class="num">{{ item.num }}</div> |
|||
<div class="name">{{ item.name }}</div> |
|||
</div> |
|||
<div class="item-right"> |
|||
<div class="hint"> |
|||
<div class="hint-title">较上月</div> |
|||
<b v-if="item.variation >= 0">+ {{ item.variationAbs }}</b> |
|||
<b v-else>- {{ item.variationAbs }}</b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="m-tb"> |
|||
<h3>下级平台使用进度汇总</h3> |
|||
<el-table |
|||
:data="tableData" |
|||
border |
|||
style="width: 100%" |
|||
class="tb" |
|||
:height="maxTableHeight" |
|||
> |
|||
<el-table-column label="序号" type="index" align="center" width="50" /> |
|||
<el-table-column prop="orgName" label="所属组织"> </el-table-column> |
|||
<el-table-column prop="usingCommunityNum" label="开通平台社区数"> |
|||
</el-table-column> |
|||
<el-table-column prop="userTotal" label="人口总数"></el-table-column> |
|||
<el-table-column |
|||
prop="czUserTotal" |
|||
label="常住人口总数" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="ldUserTotal" |
|||
label="流动人口总数" |
|||
></el-table-column> |
|||
<el-table-column prop="houseTotal" label="房屋总数"></el-table-column> |
|||
<el-table-column |
|||
prop="zzHouseTotal" |
|||
label="自住房屋总数" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="czHouseTotal" |
|||
label="出租房屋总数" |
|||
></el-table-column> |
|||
<el-table-column |
|||
prop="xzHouseTotal" |
|||
label="闲置房屋总数" |
|||
></el-table-column> |
|||
</el-table> |
|||
</div> |
|||
|
|||
<!-- 修改弹出框 --> |
|||
<el-dialog |
|||
:visible.sync="displayedDetail" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
title="开放社区数" |
|||
width="850px" |
|||
top="5vh" |
|||
@closed="displayedDetail = false" |
|||
> |
|||
</el-dialog> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import { requestPost } from "@/js/dai/request"; |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import { mapGetters } from "vuex"; |
|||
|
|||
export default { |
|||
name: "renFangTongJi", |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
displayedDetail: false, |
|||
tableData: [], |
|||
|
|||
orgId: "", |
|||
orgType: "", |
|||
|
|||
list: [ |
|||
{ |
|||
name: "开通平台社区数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "人口总数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "常住人口数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "流动人口数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "房屋总数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "自住房屋数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "出租房屋数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
|
|||
{ |
|||
name: "闲置房屋数", |
|||
num: "--", |
|||
variation: 0, |
|||
variationAbs: "0", |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
return this.clientHeight - 420; |
|||
}, |
|||
...mapGetters(["clientHeight"]), |
|||
}, |
|||
watch: { |
|||
orgId() { |
|||
this.getTableData(); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.getCommunityData(); |
|||
this.getResiData(); |
|||
this.getHouseData(); |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
async getCommunityData() { |
|||
const url = "/gov/org/agency/usingCommunityStats"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
const { list } = this; |
|||
let item1 = list.find((item) => item.name == "开通平台社区数"); |
|||
item1.num = data.usingCommunityNum; |
|||
item1.variation = parseInt(data.usingCommunityNumJSY); |
|||
item1.variationAbs = Math.abs(item1.variation); |
|||
} |
|||
}, |
|||
|
|||
async getResiData() { |
|||
const url = "/epmetuser/icresiuser/userchart"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
const { list } = this; |
|||
let item1 = list.find((item) => item.name == "人口总数"); |
|||
item1.num = data.userTotal; |
|||
item1.variation = parseInt(data.userTotalJSY); |
|||
item1.variationAbs = Math.abs(item1.variation); |
|||
let item2 = list.find((item) => item.name == "常住人口数"); |
|||
item2.num = data.czUserTotal; |
|||
item2.variation = parseInt(data.czUserTotalJSY); |
|||
item2.variationAbs = Math.abs(item2.variation); |
|||
let item3 = list.find((item) => item.name == "流动人口数"); |
|||
item3.num = data.ldUserTotal; |
|||
item3.variation = parseInt(data.ldUserTotalJSY); |
|||
item3.variationAbs = Math.abs(item3.variation); |
|||
} |
|||
}, |
|||
|
|||
async getHouseData() { |
|||
const url = "/gov/org/house/housechart"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
const { list } = this; |
|||
let item1 = list.find((item) => item.name == "房屋总数"); |
|||
item1.num = data.houseTotal; |
|||
item1.variation = parseInt(data.houseTotalJSY); |
|||
item1.variationAbs = Math.abs(item1.variation); |
|||
let item2 = list.find((item) => item.name == "自住房屋数"); |
|||
item2.num = data.zzHouseTotal; |
|||
item2.variation = parseInt(data.zzHouseTotalJSY); |
|||
item2.variationAbs = Math.abs(item2.variation); |
|||
let item3 = list.find((item) => item.name == "出租房屋数"); |
|||
item3.num = data.czHouseTotal; |
|||
item3.variation = parseInt(data.czHouseTotalJSY); |
|||
item3.variationAbs = Math.abs(item3.variation); |
|||
let item4 = list.find((item) => item.name == "闲置房屋数"); |
|||
item4.num = data.xzHouseTotal; |
|||
item4.variation = parseInt(data.xzHouseTotalJSY); |
|||
item4.variationAbs = Math.abs(item4.variation); |
|||
} |
|||
}, |
|||
|
|||
async getTableData() { |
|||
const url = "/gov/org/house/subuserhouselist"; |
|||
|
|||
const { data, code, msg } = await requestPost(url, { |
|||
orgId: this.orgId, |
|||
orgType: this.orgType, |
|||
}); |
|||
|
|||
if (code === 0) { |
|||
this.tableData = data |
|||
? data.map((item) => { |
|||
return item; |
|||
}) |
|||
: []; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/c/config"; |
|||
@import "@/assets/scss/c/function"; |
|||
|
|||
.m-cards { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
// align-items: center; |
|||
|
|||
.item { |
|||
display: flex; |
|||
width: 24%; |
|||
margin-top: 15px; |
|||
margin-right: 1%; |
|||
box-sizing: border-box; |
|||
color: #ffffff; |
|||
padding: 12px; |
|||
border-radius: 4px; |
|||
background-image: linear-gradient(to left, #43c8c4, #2aa5c6); |
|||
|
|||
.item-right { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.item-left { |
|||
text-align: center; |
|||
} |
|||
|
|||
.num { |
|||
font-size: 28px; |
|||
font-weight: bold; |
|||
line-height: 40px; |
|||
} |
|||
.name { |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
} |
|||
|
|||
.hint { |
|||
margin-top: 10px; |
|||
line-height: 20px; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
.hint-title { |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.m-tb { |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue