elink-star
/
epmet-oper-gov
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

人房统计磐石

feature/welfareImport
jiangyy 3 years ago
parent
8309d0d100
commit
1b19495cf3
3 changed files with 785 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/assets/scss/modules/visual/people.scss
  2. 750
      src/views/modules/visual/basicinfo/houseStatic/houseStaticPanshi.vue
  3. 43
      src/views/modules/visual/basicinfo/people.vue

4
src/assets/scss/modules/visual/people.scss
View File

@ -375,6 +375,10 @@
height: 78px;
width: 128px;
}
.rel-bg-panshi {
height: 68px;
width: 128px;
}
.rel-text {
@include toe;

750
src/views/modules/visual/basicinfo/houseStatic/houseStaticPanshi.vue
View File

@ -0,0 +1,750 @@
<template>
<div class="warning-box">
<!-- 组织路由 -->
<div class="div_top">
<div class="router_line"></div>
<div class="div_router">
<span class="router_parents"
v-for="(item,index) in runAgencyArray"
@click="handleClickAgency(index)"
:key="index">{{item.orgName}}<span class="arrow">></span></span>
<span class="router_child">{{orgName}}</span>
</div>
</div>
<cpt-card v-if="!showHouseList&&!showPeopleList"
:min-full-screen="true">
<div class="card-title">
<img class="title-icon"
src="@/assets/img/shuju/title-tip.png" />
<div class="title-label">
人房概览数据统计
</div>
</div>
<div class="card-left-title">本级人房概览数据统计</div>
<div class="card-echart">
<div class="card-left">
<div v-if="!dataLoading"
class="div-chart">
<screen-echarts-frame class="echart-wr"
@myChartMethod="housePieInitOk"
ref="housePieChart"></screen-echarts-frame>
<div class="div-tip">
<div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
v-for="(item,index) in legendArray"
:key="index">
<div class="item_name">{{item.name}}</div>
<img :src="item.url" />
</div>
</div>
</div>
<div v-if="!dataLoading"
class="pie-table">
<div class="pie-table-total"
@click="handleClickHouse('')">
<div class="pie-table-total-count">{{houseData.houseTotal}}</div>
<div class="pie-table-title">房屋总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total "
@click="handleClickHouse('0')">
<div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
<div class="pie-table-title">自住房屋数</div>
</div>
<div class="pie-table-total "
@click="handleClickHouse('1')">
<div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
<div class="pie-table-title">出租房屋数</div>
</div>
<div class="pie-table-total "
@click="handleClickHouse('2')">
<div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
<div class="pie-table-title">闲置房屋数</div>
</div>
<div class="pie-table-total "
@click="handleClickHouse('3')">
<div class="pie-table-total-count wsc">{{houseData.wscHouseTotal}}</div>
<div class="pie-table-title">未出售房屋数</div>
</div>
</div>
<div class="loading-status"
v-if="dataLoading">
<screen-loading>加载中</screen-loading>
</div>
</div>
<div class="card-left">
<div v-if="!dataLoading"
class="div-chart">
<screen-echarts-frame class="echart-wr"
@myChartMethod="userPieInitOk"
ref="userPieChart"></screen-echarts-frame>
<div class="div-tip2">
<div class="cz-tip">
<div class="cz-tip-dot"></div>
<span>常住人口数</span>
</div>
<div class="ld-tip">
<div class="ld-tip-dot"></div>
<span>流动人口数</span>
</div>
</div>
</div>
<div v-if="!dataLoading"
class="pie-table">
<div class="pie-table-total"
@click="handleClickPeople('all')">
<div class="pie-table-total-count">{{userData.userTotal}}</div>
<div class="pie-table-title">居民总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total "
@click="handleClickPeople('cz')">
<div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
<div class="pie-table-title">常住人口数</div>
</div>
<div class="pie-table-total "
@click="handleClickPeople('ld')">
<div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
<div class="pie-table-title">流动人口数</div>
</div>
</div>
<div class="loading-status"
v-if="dataLoading">
<screen-loading>加载中</screen-loading>
</div>
</div>
</div>
<div v-if="orgType!=='village'">
<div class="card-left-title">下级人房概览数据统计</div>
<div v-if="subList.length>0"
class="card-table">
<div v-for="(item,index) in subList"
:key="index"
:class="['table_item',index%2 === 0?'item_dark':'']">
<div class="item_name"
@click="handleToSubAgency(item)">
<img src="@/assets/img/shuju/logo1.png" />
<span>{{item.orgName}}</span>
</div>
<div class="item_data">
<div class="item_left">
<div class="pie-table-total">
<div class="pie-table-total-count"
@click="handleClickHouse('',item)">{{item.houseTotal}}</div>
<div class="pie-table-title">房屋总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite"
@click="handleClickHouse('0',item)">{{item.zzHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.zzHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">自住房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite"
@click="handleClickHouse('1',item)">{{item.czHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.czHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">出租房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite"
@click="handleClickHouse('2',item)">{{item.xzHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.xzHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">闲置房屋数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite"
@click="handleClickHouse('3',item)">{{item.wscHouseTotal}}</div>
<div class="pie-table-title table-table-title">{{item.wscHouseRatio+'%'}}</div>
<div class="pie-table-title table-table-title">未出售房屋数</div>
</div>
</div>
<div class="item_right">
<div class="pie-table-total">
<div class="pie-table-total-count"
@click="handleClickPeople('all',item)">{{item.userTotal}}</div>
<div class="pie-table-title">居民总数</div>
</div>
<div class="pie-table-line"></div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite"
@click="handleClickPeople('cz',item)">{{item.czUserTotal}}</div>
<div class="pie-table-title table-table-title">{{item.czUserRatio+'%'}}</div>
<div class="pie-table-title table-table-title">常住人口数</div>
</div>
<div class="pie-table-total ">
<div class="pie-table-total-count colorwhite"
@click="handleClickPeople('ld',item)">{{item.ldUserTotal}}</div>
<div class="pie-table-title table-table-title">{{item.ldUserRatio+'%'}}</div>
<div class="pie-table-title table-table-title">流动人口数</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="subList.length===0"
class="no-data">
<img src="@/assets/img/modules/visual/noData.png"
class="no-data-img" />
</div>
</div>
</cpt-card>
<house-list v-if="showHouseList "
:orgId="selOrgId"
:orgType="selOrgType"
:rentType="rentType"
@close="showHouseList = false">
</house-list>
<people-list v-if="showPeopleList "
:orgId="selOrgId"
:orgType="selOrgType"
:type="type"
@close="showPeopleList = false">
</people-list>
</div>
</template>
<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import screenEchartsFrame from "../../components/screen-echarts-frame";
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import { housePieOption } from './options'
import { userPieOption } from './userOptions'
import houseList from './houseList'
import peopleList from './peopleList'
import * as echarts from 'echarts';
export default {
name: "warning-box",
components: {
cptCard,
screenTable,
screenEchartsFrame,
ScreenLoading,
houseList,
peopleList
},
data () {
return {
dataLoading: true,
orgId: '',
orgType: '',
orgName: this.$store.state.user.agencyName,
// orgShowName: this.$store.state.user.agencyName,//面包屑显示当前组织名称
housePieChartS: null,
housePieChart: '',
housePieOption: {},
housePieInitState: false,
houseData: {
orgId: '',//组织、网格、小区Id
orgType: '',//组织、网格、小区类型 agency grid village
houseTotal: 198000,//房屋总数
zzHouseTotal: 2000,//房屋自住总数
zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的）
czHouseTotal: 30,//房屋出租总数
czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的）
xzHouseTotal: 200,//房屋闲置总数
xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的）
wscHouseTotal: 100,//房屋未售出总数
wscHouseRatio: '20%',//房屋未售出总数占比
},
houseColorArray: ['#3dda83', '#e43c26', '#fac126', '#fc8452'],
housePieData: [],
legendArray: [
{
name: '自住房屋数',
url: require('../../../../../assets/img/shuju/measure/lv@2x.png')
},
{
name: '出租房屋数',
url: require('../../../../../assets/img/shuju/measure/hong@2x.png')
},
{
name: '闲置房屋数',
url: require('../../../../../assets/img/shuju/measure/huang@2x.png')
},
{
name: '未出售房屋数',
url: require('../../../../../assets/img/shuju/measure/cheng.png')
}
],
userPieChartS: null,
userPieChart: '',
userPieOption: {},
userPieInitState: false,
userData: {
orgId: '',//组织、网格、小区Id
orgType: '',//组织、网格、小区类型 agency grid village
userTotal: 198000,//居民总数
czUserTotal: 2000,//常住居民总数
czUserRatio: '90%',//常住居民总数占比
ldUserTotal: 30,//流动居民总数
ldUserRatio: '5%',//流动居民总数占比
},
userColorArray: ['#3dda83', '#e43c26'],
userPieData: [],
subList: [],
//下钻层级记录
runNum: 0,
runAgencyArray: [],
selUserId: '',
center: [],
zoom: null,
parentPolygon: [],
rentType: '',//点击房屋数类型
type: '',//点击人员数类型
showPeopleList: false,
showHouseList: false,
selOrgId: '',
selOrgType: '',
};
},
async mounted () {
await this.getApiData()
},
methods: {
async getApiData () {
this.dataLoading = true
this.housePieInitState = false
this.userPieInitState = false
await this.getHousechart()
await this.getUserchart()
await this.getSubuserhouselist()
this.dataLoading = false
await nextTick(500)
this.getHousePie()
this.getUserPie()
},
//点击房屋数
handleClickHouse (rentType, item) {
if (item) {
this.selOrgId = item.orgId
this.selOrgType = item.orgType
} else {
this.selOrgId = this.houseData.orgId
this.selOrgType = this.houseData.orgType
}
this.toSubAgency('house')
this.rentType = rentType
this.showHouseList = true
},
//点击人员数
handleClickPeople (type, item) {
if (item) {
this.selOrgId = item.orgId
this.selOrgType = item.orgType
} else {
this.selOrgId = this.houseData.orgId
this.selOrgType = this.houseData.orgType
}
this.toSubAgency('people')
this.type = type
this.showPeopleList = true
},
housePieInitOk (dom) {
console.log('pie准备好了', dom)
this.housePieChartS = dom
// this.housePieInitState = true
},
userPieInitOk (dom) {
console.log('pie准备好了', dom)
this.userPieChartS = dom
// this.userPieInitState = true
},
async getHousechart (node, resolve) {
if (this.$refs.housePieChart) {
this.$refs.housePieChart.showLoading()
}
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
const url = '/gov/org/house/housechart'
let params = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.houseData = data
if (this.$refs.housePieChart) {
this.$refs.housePieChart.hideLoading()
}
} else {
this.houseData = {}
this.$message.error(msg);
}
this.housePieInitState = true
},
getHousePie () {
if (this.housePieInitState) {
this.assignHousePieChart()
} else {
setTimeout(() => {
this.getHousePie()
}, 500)
}
},
assignHousePieChart () {
if (this.houseData) {
this.$refs.housePieChart.setNoData(false)
this.$refs.housePieChart.clear()
this.housePieData = []
const _that = this
// 获取pieChart配置
this.housePieOption = housePieOption(this.housePieChartS)
// let maxValue = this.housePieData[0].total
// let maxIndex = 0
let obj1 = {
name: '自住房屋数',
value: this.houseData.zzHouseRatio,
selected: true
}
let obj2 = {
name: '出租房屋数',
value: this.houseData.czHouseRatio
}
let obj3 = {
name: '闲置房屋数',
value: this.houseData.xzHouseRatio
}
let obj4 = {
name: '未出售房屋数',
value: this.houseData.wscHouseRatio
}
this.housePieData.push(obj1)
this.housePieData.push(obj2)
this.housePieData.push(obj3)
this.housePieData.push(obj4)
this.housePieOption.title.text = this.houseData.houseTotal
this.housePieOption.series[1].itemStyle = {
color: function (params) {
return _that.houseColorArray[params.dataIndex]
}
}
let fun = function (params) {
_that.clickHousePie(params.dataIndex)
}
this.$refs.housePieChart.handleClick(fun)
this.clickHousePie(0)
} else {
this.$refs.housePieChart.setNoData(true)
}
},
async getUserchart (node, resolve) {
if (this.$refs.userPieChart) {
this.$refs.userPieChart.showLoading()
}
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
const url = '/epmetuser/icresiuser/userchart'
let params = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.userData = data
if (this.$refs.userPieChart) {
this.$refs.userPieChart.hideLoading()
}
} else {
this.userData = {}
this.$message.error(msg);
}
this.userPieInitState = true
},
getUserPie () {
if (this.userPieInitState) {
this.assignUserPieChart()
} else {
setTimeout(() => {
this.getUserPie()
}, 500)
}
},
assignUserPieChart () {
if (this.userData) {
this.$refs.userPieChart.setNoData(false)
this.$refs.userPieChart.clear()
this.userPieData = []
const _that = this
// 获取pieChart配置
this.userPieOption = userPieOption(this.userPieChartS)
// let maxValue = this.userPieData[0].total
// let maxIndex = 0
let obj1 = {
name: '常住人口数',
value: this.userData.czUserRatio,
selected: true
}
let obj2 = {
name: '流动人口数',
value: this.userData.ldUserRatio
}
this.userPieData.push(obj1)
this.userPieData.push(obj2)
this.userPieOption.title.text = this.userData.userTotal
this.userPieOption.series[1].itemStyle = {
color: function (params) {
return _that.userColorArray[params.dataIndex]
}
}
let fun = function (params) {
_that.clickUserPie(params.dataIndex)
}
this.$refs.userPieChart.handleClick(fun)
this.clickUserPie(0)
} else {
this.$refs.userPieChart.setNoData(true)
}
},
async getSubuserhouselist (node, resolve) {
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
const url = '/gov/org/house/subuserhouselist'
let params = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.subList = data
} else {
}
},
async clickHousePie (seriesIndex) {
this.housePieData.forEach((element, index) => {
if (index === seriesIndex) {
element.label = {
show: true,
};
element.labelLine = {
show: true,
lineStyle: {
opacity: 1,
}
};
console.log('zhilma')
} else {
element.label = {
show: false,
};
element.labelLine = {
show: false,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
}
};
}
});
this.housePieOption.series[1].data = this.housePieData
// this.$refs.housePieChart.hideLoading()
this.$refs.housePieChart.setOption(this.housePieOption)
},
async clickUserPie (seriesIndex) {
this.userPieData.forEach((element, index) => {
if (index === seriesIndex) {
element.label = {
show: true,
};
element.labelLine = {
show: true,
lineStyle: {
opacity: 1,
}
};
console.log('zhilma')
} else {
element.label = {
show: false,
};
element.labelLine = {
show: false,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
}
};
}
});
this.userPieOption.series[1].data = this.userPieData
// this.$refs.userPieChart.hideLoading()
this.$refs.userPieChart.setOption(this.userPieOption)
// this.getTable()
},
async handleToSubAgency (item) {
if (!this.dataLoading) {
this.toSubAgency('subAgency', item)
await this.getApiData()
}
},
//下钻到下一级
async toSubAgency (type, item) {
this.runNum++
let obj = {
orgId: this.orgId,
orgType: this.orgType,
orgName: this.orgName,
type: type
}
this.runAgencyArray.push(obj)
if (type === 'subAgency') {
this.orgId = item.orgId
this.orgType = item.orgType
this.orgName = item.orgName
} else if (type === 'house') {
this.orgName = '房屋列表'
} else if (type === 'people') {
this.orgName = '人员列表'
}
},
//返回所选组织
handleClickAgency (index) {
const cutNum = this.runAgencyArray.length - index//要减去的长度
this.runNum = this.runNum - cutNum
let orgData = this.runAgencyArray[index]
console.log('----------------', orgData)
for (let i = 0; i < cutNum; i++) {
this.runAgencyArray.pop()
}
this.orgId = orgData.orgId
this.orgType = orgData.orgType
this.orgName = orgData.orgName
this.showHouseList = false
this.showPeopleList = false
// if (orgData.type === 'house') {
// this.showHouseList = false
// }
// if (orgData.type === 'people') {
// this.showPeopleList = false
// }
this.getApiData()
},
},
};
</script>
<style
lang="scss"
src="@/assets/scss/modules/visual/warning.scss"
scoped
></style>
<style
lang="scss"
src="@/assets/scss/modules/visual/basicInfoMain.scss"
scoped
></style>
<style
lang="scss"
src="@/assets/scss/modules/visual/houseStatic.scss"
scoped
></style>

43
src/views/modules/visual/basicinfo/people.vue
View File

@ -148,7 +148,7 @@
<div class="rel z-zuo-2"
@click="toUserInfo(houseInfo.userList[0].userId)"
v-if="houseInfo.userList[0]">
<img class="rel-bg"
<img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo2.png" />
@ -160,7 +160,8 @@
<div class="rel-name">
{{ houseInfo.userList[0].userName }}
</div>
<div class="rel-name">
<div v-if="!isPanshi"
class="rel-name">
{{ houseInfo.userList[0].renHuCondition }}
</div>
</div>
@ -169,7 +170,7 @@
<div class="rel z-you-2"
@click="toUserInfo(houseInfo.userList[1].userId)"
v-if="houseInfo.userList[1]">
<img class="rel-bg"
<img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you2.png" />
@ -181,7 +182,8 @@
<div class="rel-name">
{{ houseInfo.userList[1].userName }}
</div>
<div class="rel-name">
<div v-if="!isPanshi"
class="rel-name">
{{ houseInfo.userList[1].renHuCondition }}
</div>
</div>
@ -190,7 +192,7 @@
<div class="rel z-zuo-1"
@click="toUserInfo(houseInfo.userList[2].userId)"
v-if="houseInfo.userList[2]">
<img class="rel-bg"
<img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo1.png" />
@ -202,7 +204,8 @@
<div class="rel-name">
{{ houseInfo.userList[2].userName }}
</div>
<div class="rel-name">
<div v-if="!isPanshi"
class="rel-name">
{{ houseInfo.userList[2].renHuCondition }}
</div>
</div>
@ -211,7 +214,7 @@
<div class="rel z-you-1"
@click="toUserInfo(houseInfo.userList[3].userId)"
v-if="houseInfo.userList[3]">
<img class="rel-bg"
<img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you1.png" />
@ -223,7 +226,8 @@
<span class="rel-name">{{
houseInfo.userList[3].userName
}}</span>
<div class="rel-name">
<div v-if="!isPanshi"
class="rel-name">
{{ houseInfo.userList[3].renHuCondition }}
</div>
</div>
@ -232,7 +236,7 @@
<div class="rel z-zuo-3"
@click="toUserInfo(houseInfo.userList[4].userId)"
v-if="houseInfo.userList[4]">
<img class="rel-bg"
<img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo3.png" />
@ -244,7 +248,8 @@
<div class="rel-name">
{{ houseInfo.userList[4].userName }}
</div>
<div class="rel-name">
<div v-if="!isPanshi"
class="rel-name">
{{ houseInfo.userList[4].renHuCondition }}
</div>
</div>
@ -253,7 +258,7 @@
<div class="rel z-you-3"
@click="toUserInfo(houseInfo.userList[5].userId)"
v-if="houseInfo.userList[5]">
<img class="rel-bg"
<img :class="['rel-bg',{'rel-bg-panshi':isPanshi}]"
src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
<img class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you3.png" />
@ -265,7 +270,8 @@
<div class="rel-name">
{{ houseInfo.userList[5].userName }}
</div>
<div class="rel-name">
<div v-if="!isPanshi"
class="rel-name">
{{ houseInfo.userList[5].renHuCondition }}
</div>
</div>
@ -590,6 +596,10 @@ export default {
showedInfo: false,
currentIndex: 0,
},
isPanshi: false,
customerId: '',
};
},
@ -628,6 +638,15 @@ export default {
},
async mounted () {
//磐石街道：1580460084738760705
this.customerId = localStorage.getItem("customerId");
this.isPanshi = false
if (this.customerId === '1580460084738760705') {
this.isPanshi = true
}
this.userId = this.uid;
console.log(this.$router);
this.getApiData();

Write Preview
Loading…
Cancel
Save