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.
650 lines
18 KiB
650 lines
18 KiB
<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>
|
|
<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">
|
|
<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 ">
|
|
<div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
|
|
<div class="pie-table-title">自住房屋数</div>
|
|
</div>
|
|
<div class="pie-table-total ">
|
|
<div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
|
|
<div class="pie-table-title">出租房屋数</div>
|
|
</div>
|
|
<div class="pie-table-total ">
|
|
<div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</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">
|
|
<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 ">
|
|
<div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
|
|
<div class="pie-table-title">常住人口数</div>
|
|
</div>
|
|
<div class="pie-table-total ">
|
|
<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">{{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">{{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">{{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">{{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>
|
|
<div class="item_right">
|
|
<div class="pie-table-total">
|
|
<div class="pie-table-total-count">{{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">{{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">{{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>
|
|
</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 * as echarts from 'echarts';
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
screenEchartsFrame,
|
|
ScreenLoading
|
|
},
|
|
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%',//房屋闲置总数占比（保留两位小数，带百分号的）
|
|
},
|
|
houseColorArray: ['#3dda83', '#e43c26', '#fac126'],
|
|
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')
|
|
}
|
|
],
|
|
|
|
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: [],
|
|
|
|
};
|
|
},
|
|
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()
|
|
|
|
|
|
|
|
},
|
|
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
|
|
}
|
|
|
|
this.housePieData.push(obj1)
|
|
this.housePieData.push(obj2)
|
|
this.housePieData.push(obj3)
|
|
|
|
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(item)
|
|
|
|
await this.getApiData()
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
//下钻到下一级
|
|
async toSubAgency (item) {
|
|
|
|
this.runNum++
|
|
let obj = {
|
|
orgId: this.orgId,
|
|
orgType: this.orgType,
|
|
orgName: this.orgName,
|
|
}
|
|
|
|
|
|
this.runAgencyArray.push(obj)
|
|
|
|
this.orgId = item.orgId
|
|
this.orgType = item.orgType
|
|
this.orgName = item.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.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>
|
|
|
|
|