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