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

居民画像

dev
tianq 3 years ago
parent
77f6d42de1
commit
003612e793
2 changed files with 238 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/views/modules/census/census-houseList.vue
  2. 368
      src/views/modules/census/census-residentList.vue

5
src/views/modules/census/census-houseList.vue
View File

@ -681,10 +681,7 @@ export default {
handleChangeAgency(val) { handleChangeAgency(val) {
// let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; // let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
let tmp = this.formData.orgId; let tmp = this.formData.orgId;
console.log('!tmp', !tmp);
console.log("typeof tmp != 'undefined'", typeof tmp != 'undefined');
console.log('tmp != 0', tmp != 0);
console.log('tmp != null', tmp != null);
if (tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) { if (tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) {
this.orgId = this.formData.orgId; this.orgId = this.formData.orgId;

368
src/views/modules/census/census-residentList.vue
View File

@ -4,11 +4,10 @@
<div class="div_search"> <div class="div_search">
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'"> <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'80px'">
<div> <div>
<el-form-item label="所属组织" prop="gridId"> <el-form-item label="所属组织" prop="orgId">
<el-cascader <el-cascader
class="customer_cascader" class="customer_cascader"
ref="myCascader" ref="myCascader"
filterable
clearable clearable
v-model="formData.orgId" v-model="formData.orgId"
:options="orgOptions" :options="orgOptions"
@ -17,29 +16,7 @@
@change="handleChangeAgency" @change="handleChangeAgency"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="上报时间" prop="startTime">
<el-date-picker
v-model="formData.startDate"
:picker-options="startPickerOptions"
class="item_width_2"
size="small"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
value="yyyy-MM-dd"
placeholder="开始时间"
></el-date-picker>
<span class="data-tag">至</span>
<el-date-picker
v-model="formData.endDate"
:picker-options="endPickerOptions"
class="item_width_2 data-tag"
size="small"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
value="yyyy-MM-dd"
placeholder="结束时间"
></el-date-picker>
</el-form-item>
<el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button> <el-button class="btnSearch" size="small" @click="handleSearch">查询</el-button>
</div> </div>
</el-form> </el-form>
@ -47,10 +24,10 @@
<div class="div_table"> <div class="div_table">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<div class="div_table_title">房屋用途统计</div> <div class="div_table_title">居民年龄统计</div>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> <div :style="'height:220px;margin-top:20px'">
<screen-echarts-frame <screen-echarts-frame
@handelClickMyPei="handelClickMyPei" @handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -60,7 +37,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> <div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'">
<div class="legend"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData.data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
@ -76,10 +53,10 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="div_table_title">房屋状态统计</div> <div class="div_table_title">居民学历统计</div>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<div :style="'height:' + TableHeight + 'px;margin-top:20px'"> <div :style="'height:220px;margin-top:20px'">
<screen-echarts-frame2 <screen-echarts-frame2
@handelClickMyPei="handelClickMyPei2" @handelClickMyPei="handelClickMyPei2"
:style="{ width: '100%', height: '100%' }" :style="{ width: '100%', height: '100%' }"
@ -89,13 +66,10 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div :style="'height:' + TableHeight + 'px;margin-top:20px;display:flex;align-items: center;'"> <div :style="'height:220px;margin-top:20px;display:flex;align-items: center;'">
<div class="legend2"> <div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)"> <div class="legend-row" :key="item.name" v-for="(item, index) in chartData2.data" @click="handleClickItem(item)">
<div class="kuai" v-if="item.name == '自住'"><img src="../../../assets/img/census/自住.png" /></div> <div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="kuai" v-if="item.name == '出租'"><img src="../../../assets/img/census/出租.png" /></div>
<div class="kuai" v-if="item.name == '闲置'"><img src="../../../assets/img/census/闲置.png" /></div>
<div class="kuai" v-if="item.name == '未售出'"><img src="../../../assets/img/census/未售出.png" /></div>
<div class="content"> <div class="content">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="num">{{ item.value }}</div> <div class="num">{{ item.value }}</div>
@ -123,13 +97,12 @@
:height="maxTableHeight" :height="maxTableHeight"
> >
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
<el-table-column prop="streetName" label="镇街" align="center" :show-overflow-tooltip="true" /> <el-table-column prop="streetName" label="姓名" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="districtName" label="区县" align="center" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="districtName" label="手机号" align="center" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="agencyName" align="center" label="社区" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="证件号" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="agencyName" align="center" label="网格" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="性别" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="agencyName" align="center" label="房屋名称" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="年龄" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="agencyName" align="center" label="房屋用途" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="agencyName" align="center" label="学历" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="agencyName" align="center" label="房屋状态" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="count" align="center" width="110" label="操作" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
@ -181,7 +154,9 @@ export default {
user: {}, user: {},
gridList: [], //所属网格list--场所区域 gridList: [], //所属网格list--场所区域
tableData: [], tableData: [],
formData: {}, formData: {
orgId: ''
},
pageNo: 1, pageNo: 1,
pageSize: window.localStorage.getItem('pageSize') || 20, pageSize: window.localStorage.getItem('pageSize') || 20,
total: 1, total: 1,
@ -202,6 +177,7 @@ export default {
value: 'agencyId', value: 'agencyId',
label: 'agencyName', label: 'agencyName',
children: 'subAgencyList', children: 'subAgencyList',
emitPath: false,
checkStrictly: true checkStrictly: true
}, },
TableHeight: '', TableHeight: '',
@ -212,7 +188,11 @@ export default {
color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'], color: ['#3C94FE', '#A17AFA', '#A19FFF', '#22C1C3', '#6FC364', '#F0D915', '#FEB349', '#FE6252', '#F44230', '#5DC7F0'],
chartData: [], chartData: [],
chartData2: [], chartData2: [],
pieData: [] pieData: [],
pieData2: [],
orgId: '',
orgType: '',
code: ''
}; };
}, },
computed: { computed: {
@ -234,27 +214,25 @@ export default {
console.log(this.$store.state); console.log(this.$store.state);
this.user = this.$store.state.user; this.user = this.$store.state.user;
this.agencyId = this.user.agencyId; this.agencyId = this.user.agencyId;
this.orgId = this.agencyId;
this.getOrgTreeList(); this.getOrgTreeList();
this.getTableData(); // this.getTableData();
this.getPie(); this.getsubData();
this.getPie2(); this.getsubData2();
}, },
methods: { methods: {
handleSearch(val) {
console.log(this.formData);
this.pageNo = 1;
this.getTableData();
},
async getTableData() { async getTableData() {
this.tableLoading = true; this.tableLoading = true;
// const url = '/gov/org/staffLoginLog/community-count'; // const url = '/gov/org/staffLoginLog/community-count';
const url = 'http://yapi.elinkservice.cn/mock/356/gov/org/staffLoginLog/community-count'; const url = '/epmetuser/icresiuser/portrayal-list';
const { pageSize, pageNo, formData } = this; const { pageSize, pageNo, formData } = this;
const { data, code, msg } = await requestPost(url, { const { data, code, msg } = await requestPost(url, {
pageSize, pageSize,
pageNo, pageNo,
...formData orgId: this.orgId,
orgType: this.orgType,
code: this.code
}); });
this.tableLoading = false; this.tableLoading = false;
@ -280,20 +258,32 @@ export default {
}, },
async getsubData() { async getsubData() {
this.$refs.pieChart.showLoading(); this.$refs.pieChart.showLoading();
let url = '/gov/org/staffLoginLog/sub-count'; let url = '/epmetuser/icresiuser/age-distribute';
let param = { let param = {
orgId: this.formData.orgId, orgId: this.orgId,
level: this.formData.level, orgType: this.orgType
startDate: this.formData.startDate,
endDate: this.formData.endDate
}; };
const { data, code, msg } = await requestPost(url, param); const { data, code, msg } = await requestPost(url, param);
this.$refs.pieChart.hideLoading(); this.$refs.pieChart.hideLoading();
if (code === 0) { if (code === 0) {
this.pieData = data.list; this.pieData = data;
console.log('this.pieData ', this.pieData);
this.getPie(); this.getPie();
} else {
this.$message.error(msg);
}
},
async getsubData2() {
this.$refs.pieChart2.showLoading();
let url = '/epmetuser/icresiuser/education-distribute';
let param = {
orgId: this.orgId,
orgType: this.orgType
};
const { data, code, msg } = await requestPost(url, param);
this.$refs.pieChart2.hideLoading();
if (code === 0) {
this.pieData2 = data;
console.log('this.pieData2', this.pieData2);
this.getPie2(); this.getPie2();
} else { } else {
this.$message.error(msg); this.$message.error(msg);
@ -303,9 +293,7 @@ export default {
this.pieInitState = true; this.pieInitState = true;
}, },
pieInitOk2() { pieInitOk2() {
console.log('2333erwewrwe33333', this.pieInitState2);
this.pieInitState2 = true; this.pieInitState2 = true;
console.log('2333erwewrwe333335476754765', this.pieInitState2);
}, },
getPie() { getPie() {
if (this.pieInitState) { if (this.pieInitState) {
@ -318,7 +306,6 @@ export default {
}, },
getPie2() { getPie2() {
if (this.pieInitState2) { if (this.pieInitState2) {
console.log('233333333');
this.setPieData2(); this.setPieData2();
} else { } else {
setTimeout(() => { setTimeout(() => {
@ -327,45 +314,66 @@ export default {
} }
}, },
setPieData() { setPieData() {
// let data = [...this.pieData]; let data = [...this.pieData];
// console.log('data', data); let type = {
let chartData = { 0: '50岁以下',
name: ['反骨', '反骨2', '反骨3', '反骨4'], 1: '50-59岁',
data: [{ value: 62, name: '反骨' }, { value: 44, name: '反骨2' }, { value: 123, name: '反骨3' }, { value: 232, name: '反骨4' }] 2: '60-69岁',
3: '70-79岁',
4: '80岁以上'
}; };
this.chartData = chartData; this.chartData.name = data.map(item => type[item.code]);
// chartData.name = data.map(item => item.agencyName); this.chartData.data = data.map(item => {
// chartData.data = data.map(item => { return {
// return { value: item.count, id: item.agencyId, level: item.agencyLevel, name: item.agencyName }; value: item.totalResi,
// }); name: type[item.code],
console.log('chartData', chartData); code: item.code,
this.iniPieChart(chartData); radio: item.totalResi == 0 ? '0' : ((item.totalResi / 100) * 100).toFixed(2)
};
});
console.log('chartData', this.chartData);
this.iniPieChart(this.chartData);
}, },
setPieData2() { setPieData2() {
console.log('dddddddddddd'); let data = [...this.pieData2.list];
// let data = [...this.pieData]; let type = {
// console.log('data', data); 1: '本科',
let chartData = { 0: '硕士',
name: ['自住', '出租', '闲置', '未售出'], 2: '博士',
data: [{ value: 62, name: '自住' }, { value: 243, name: '出租' }, { value: 243, name: '闲置' }, { value: 243, name: '未售出' }] 3: '博士后'
}; };
this.chartData2 = chartData; this.chartData2.name = data.map(item => type[item.code]);
// chartData.name = data.map(item => item.agencyName); this.chartData2.data = data.map(item => {
// chartData.data = data.map(item => { return {
// return { value: item.count, id: item.agencyId, level: item.agencyLevel, name: item.agencyName }; value: item.totalResi,
// }); name: type[item.code],
console.log('chartData', chartData); code: item.code,
this.iniPieChart2(chartData); radio: item.totalResi == 0 ? '0' : ((item.totalResi / this.pieData2.total) * 100).toFixed(2)
};
});
console.log('chartData', this.chartData2);
this.iniPieChart2(this.chartData2);
}, },
// 获取饼状图 // 获取饼状图
async iniPieChart(chartData) { async iniPieChart(chartData) {
this.$refs.pieChart.clear(); this.$refs.pieChart.clear();
// 获取pieChart配置 // 获取pieChart配置
this.pieOption = { this.pieOption = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%',
backgroundColor: 'rgb(134,134,134)',
borderColor: 'rgb(134,134,134)',
textStyle: {
color: '#fff'
}
},
color: this.color, color: this.color,
title: { title: {
text: '12345', text: this.pieData.total,
subtext: '房屋总数(分)', subtext: '总数',
x: 'center', x: 'center',
y: 'center', y: 'center',
textStyle: { textStyle: {
@ -382,7 +390,21 @@ export default {
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['60%', '85%'], radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
tooltip: {
show: true
},
data: chartData.data
},
{
type: 'pie',
radius: ['60%', '65%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -407,19 +429,32 @@ export default {
} }
} }
}, },
{ {
type: 'pie', type: 'pie',
radius: ['65%', '80%'], radius: ['80%', '85%'],
avoidLabelOverlap: false, center: ['50%', '50%'],
selectedMode: false,
hoverAnimation: false,
data: [{ value: 1, name: '' }],
itemStyle: {
color: '#f7f7f7'
},
label: { label: {
show: false, show: false
position: 'center' },
labelLine: {
show: false
}, },
tooltip: { tooltip: {
show: true show: false
}, },
data: chartData.data animation: false,
cursor: 'auto',
emphasis: {
itemStyle: {
color: '#f7f7f7'
}
}
} }
] ]
}; };
@ -430,10 +465,19 @@ export default {
// 获取pieChart配置 // 获取pieChart配置
this.pieOption2 = { this.pieOption2 = {
tooltip: {
trigger: 'item',
formatter: '{b}<br/>总数 : {c}<br/> 占比 : {d}%',
backgroundColor: 'rgb(134,134,134)',
borderColor: 'rgb(134,134,134)',
textStyle: {
color: '#fff'
}
},
color: this.color, color: this.color,
title: { title: {
text: '12345', text: this.pieData.total,
subtext: '房屋总数(分)', subtext: '总数',
x: 'center', x: 'center',
y: 'center', y: 'center',
textStyle: { textStyle: {
@ -459,12 +503,39 @@ export default {
tooltip: { tooltip: {
show: true show: true
}, },
z: 9999,
data: chartData.data data: chartData.data
}, },
{ {
type: 'pie', type: 'pie',
radius: ['60%', '85%'], radius: ['60%', '65%'],
center: ['50%', '50%'],
selectedMode: false,
hoverAnimation: false,
data: [{ value: 1, name: '' }],
itemStyle: {
color: '#f7f7f7'
},
label: {
show: false
},
labelLine: {
show: false
},
tooltip: {
show: false
},
animation: false,
cursor: 'auto',
emphasis: {
itemStyle: {
color: '#f7f7f7'
}
}
},
{
type: 'pie',
radius: ['80%', '85%'],
center: ['50%', '50%'], center: ['50%', '50%'],
selectedMode: false, selectedMode: false,
hoverAnimation: false, hoverAnimation: false,
@ -502,39 +573,51 @@ export default {
this.orgType = 'community'; this.orgType = 'community';
} }
this.orgId = param.data.id; this.code = param.data.code;
this.orgName = param.data.name; this.getTableData();
this.pageNo = 1; // this.orgName = param.data.name;
this.showNext(); // this.pageNo = 1;
this.dialogVisible = true; // this.showNext();
// this.dialogVisible = true;
} }
}, },
handelClickMyPei2(param) { handelClickMyPei2(param) {
if (param.data.level != 'community') { // if (param.data.level != 'community') {
if (param.data.level == 'district') { // if (param.data.level == 'district') {
this.orgType = 'street'; // this.orgType = 'street';
} // }
if (param.data.level == 'street') { // if (param.data.level == 'street') {
this.orgType = 'community'; // this.orgType = 'community';
} // }
this.orgId = param.data.id; // this.orgId = param.data.id;
this.orgName = param.data.name; // this.orgName = param.data.name;
this.pageNo = 1; // this.pageNo = 1;
this.showNext(); // this.showNext();
this.dialogVisible = true; // this.dialogVisible = true;
} // }
this.code = param.data.code;
this.getTableData();
}, },
async handleExport() { async handleExport() {
const url = '/gov/project/icEvent/export'; const url = '/epmetuser/icresiuser/portrayal-listexport';
const { pageSize, pageNo, formData } = this; const { pageSize, pageNo, formData } = this;
let tmp = this.formData.orgId;
if (!(tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null)) {
this.formData.orgId = '';
this.orgType = '';
this.code="";
}
axios({ axios({
url: window.SITE_CONFIG['apiURL'] + url, url: window.SITE_CONFIG['apiURL'] + url,
method: 'post', method: 'post',
data: { data: {
pageSize, pageSize,
pageNo, pageNo,
...formData orgId: this.orgId,
orgType: this.orgType,
code:this.code
}, },
responseType: 'blob' responseType: 'blob'
}) })
@ -560,26 +643,47 @@ export default {
getOrgTreeList() { getOrgTreeList() {
const { user } = this.$store.state; const { user } = this.$store.state;
this.$http this.$http
.post('gov/org/customeragency/staffinagencylist', {}) .post('/gov/org/customeragency/agencygridtree', {})
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg);
} else { } else {
console.log('获取组织树成功', res.data); console.log('获取组织树成功', res.data);
let { agencyList, subAgencyList } = res.data; // let { agencyList, subAgencyList } = res.data;
const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }]; // const _arr = [{ ...agencyList, subAgencyList: [...subAgencyList] }];
this.orgOptions = this.deepTree(_arr); // this.orgOptions = this.deepTree(_arr);
this.orgOptions = [];
this.orgOptions.push(res.data);
} }
}) })
.catch(() => { .catch(() => {
return this.$message.error('网络错误'); return this.$message.error('网络错误');
}); });
}, },
handleSearch(val) {
this.pageNo = 1;
this.code = '';
this.getTableData();
this.getsubData();
this.getsubData2();
},
handleChangeAgency(val) { handleChangeAgency(val) {
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data; let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
console.log(obj); if (obj) {
this.formData.orgId = obj.agencyId; this.orgType = obj.level === 'grid' ? 'grid' : 'agency';
this.formData.level = obj.level; } else {
this.orgType = '';
}
let tmp = this.formData.orgId;
if (tmp && typeof tmp != 'undefined' && tmp != 0 && tmp != null) {
this.orgId = this.formData.orgId;
} else {
this.orgId = '';
}
console.log('this.orgId', this.orgId);
}, },
deepTree(arr) { deepTree(arr) {
if (Array.isArray(arr)) { if (Array.isArray(arr)) {

Write Preview
Loading…
Cancel
Save