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.
364 lines
8.8 KiB
364 lines
8.8 KiB
<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>
|
|
|