jiangyy
3 years ago
22 changed files with 2140 additions and 1405 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,108 @@ |
|||||
|
<template> |
||||
|
<div v-if="iniLoaded"> |
||||
|
<base-page |
||||
|
:searchParams="searchParams" |
||||
|
:tableParams="tableParams" |
||||
|
:tableUrl="tableUrl" |
||||
|
:operateCol="false" |
||||
|
idName="icDangerousChemicalsId" |
||||
|
></base-page> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import basePage from "@/views/modules/cpts/base/index"; |
||||
|
import { getItemByIdInCascader, collapse } from "@/utils/cascader"; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
orgId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
orgIds: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
iniLoaded: false, |
||||
|
|
||||
|
searchParams: [ |
||||
|
{ |
||||
|
field: "选择范围", |
||||
|
keyName: "org", |
||||
|
type: "cascader", |
||||
|
value: "", |
||||
|
// optionUrl: "/gov/org/customeragency/agencygridtree", |
||||
|
optionUrl: "/gov/org/customeragency/my-subagency-list", |
||||
|
optionUrlParams: { |
||||
|
agencyId: this.$store.state.user.agencyId, |
||||
|
}, |
||||
|
optionList: [], |
||||
|
optionProps: { |
||||
|
multiple: false, |
||||
|
value: "agencyId", |
||||
|
label: "agencyName", |
||||
|
children: "subAgencyList", |
||||
|
checkStrictly: true, |
||||
|
}, |
||||
|
optionCook(obj) { |
||||
|
return [obj]; |
||||
|
}, |
||||
|
supKeys: ["orgId", "orgType"], |
||||
|
supValues: ["", ""], |
||||
|
handleChangeFn(vals, item) { |
||||
|
const { optionList } = item; |
||||
|
if (vals.length > 0) { |
||||
|
item["supValues"][0] = vals[vals.length - 1]; |
||||
|
item["supValues"][1] = getItemByIdInCascader( |
||||
|
optionList, |
||||
|
vals, |
||||
|
"agencyId", |
||||
|
"subAgencyList" |
||||
|
)[vals.length - 1]["level"]; |
||||
|
item["supValues"][1] = |
||||
|
item["supValues"][1] == "grid" ? "grid" : "agency"; |
||||
|
} else { |
||||
|
item["supValues"][0] = ""; |
||||
|
item["supValues"][1] = ""; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
|
||||
|
tableParams: [ |
||||
|
{ field: "序号", keyName: "", type: "no" }, |
||||
|
{ field: "所属组织", keyName: "orgName", type: "text", width: "220" }, |
||||
|
{ field: "人口总数", keyName: "userTotal", type: "text" }, |
||||
|
{ field: "常住人口数", keyName: "czUserTotal", type: "text" }, |
||||
|
{ field: "流动人口数", keyName: "ldUserTotal", type: "text" }, |
||||
|
{ field: "房屋总数", keyName: "houseTotal", type: "text" }, |
||||
|
{ field: "自住房屋数", keyName: "zzHouseTotal", type: "text" }, |
||||
|
{ field: "出租房屋数", keyName: "czHouseTotal", type: "text" }, |
||||
|
{ field: "闲置房屋数", keyName: "xzHouseTotal", type: "text" }, |
||||
|
], |
||||
|
tableUrl: "/gov/org/house/usingCommunityUserHouseStats", |
||||
|
}; |
||||
|
}, |
||||
|
components: { basePage }, |
||||
|
computed: {}, |
||||
|
watch: {}, |
||||
|
|
||||
|
async mounted() { |
||||
|
this.searchParams[0].value = this.orgIds; |
||||
|
this.searchParams[0].supValues[0] = this.orgId; |
||||
|
if (this.orgId) { |
||||
|
this.searchParams[0].supValues[1] = "agency"; |
||||
|
} |
||||
|
this.iniLoaded = true; |
||||
|
}, |
||||
|
|
||||
|
methods: {}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,364 @@ |
|||||
|
<template> |
||||
|
<el-card class="g-cnt"> |
||||
|
<div class="m-cards"> |
||||
|
<div |
||||
|
class="item" |
||||
|
:key="item.name" |
||||
|
@click="handleClickCard(item)" |
||||
|
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" |
||||
|
align="center" |
||||
|
> |
||||
|
<el-table-column label="序号" type="index" align="center" width="50" /> |
||||
|
<el-table-column |
||||
|
prop="orgName" |
||||
|
label="所属组织" |
||||
|
width="150" |
||||
|
align="center" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="usingCommunityNum" |
||||
|
label="开通平台社区数" |
||||
|
align="center" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<a style="cursor: pointer" @click="showDetail(scope.row.orgId)">{{ |
||||
|
scope.row.usingCommunityNum |
||||
|
}}</a> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="userTotal" |
||||
|
label="人口总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="czUserTotal" |
||||
|
label="常住人口总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="ldUserTotal" |
||||
|
label="流动人口总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="houseTotal" |
||||
|
label="房屋总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="zzHouseTotal" |
||||
|
label="自住房屋总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="czHouseTotal" |
||||
|
label="出租房屋总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
<el-table-column |
||||
|
prop="xzHouseTotal" |
||||
|
label="闲置房屋总数" |
||||
|
align="center" |
||||
|
></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 修改弹出框 --> |
||||
|
<el-dialog |
||||
|
v-if="displayedDetail" |
||||
|
:visible="true" |
||||
|
title="社区列表 " |
||||
|
width="1150px" |
||||
|
top="5vh" |
||||
|
@close="displayedDetail = false" |
||||
|
> |
||||
|
<shequtongji |
||||
|
ref="shequtongji" |
||||
|
:orgId="detailOrgId" |
||||
|
:orgIds="[orgId, detailOrgId]" |
||||
|
/> |
||||
|
</el-dialog> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import shequtongji from "./cpts/shequtongji"; |
||||
|
|
||||
|
export default { |
||||
|
name: "renFangTongJi", |
||||
|
components: { shequtongji }, |
||||
|
data() { |
||||
|
return { |
||||
|
displayedDetail: false, |
||||
|
tableData: [], |
||||
|
|
||||
|
orgId: "", |
||||
|
orgType: "", |
||||
|
|
||||
|
detailOrgId: "", |
||||
|
|
||||
|
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: { |
||||
|
handleClickCard(item) { |
||||
|
if (item.name == "开通平台社区数") { |
||||
|
this.showDetail(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async showDetail(orgId = "") { |
||||
|
this.displayedDetail = true; |
||||
|
this.detailOrgId = orgId; |
||||
|
}, |
||||
|
|
||||
|
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; |
||||
|
this.orgId = data.orgId; |
||||
|
this.orgType = data.orgType; |
||||
|
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.scss"; |
||||
|
@import "@/assets/scss/c/function.scss"; |
||||
|
|
||||
|
.m-cards { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.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); |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.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