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

党员画像

jly/task002
tianq 2 years ago
parent
c6221cf162
commit
48e5df2e9e
2 changed files with 259 additions and 314 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. 302
      src/views/modules/communityParty/dyhx/chart.vue
  2. 271
      src/views/modules/communityParty/dyhx/party.vue

302
src/views/modules/communityParty/dyhx/chart.vue
View File

@ -1,163 +1,163 @@
<template>
<div class="screenEchartsFrame"
ref="screenEchartsFrame"></div>
<div class="screenEchartsFrame" ref="screenEchartsFrame"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'screen-echarts-frame',
data () {
return {
myChart: ''
}
},
props: {
chartMethod: {
type: Function
}
},
mounted () {
this.initChart()
window.onresize = () => {
this.myChart.resize()
}
},
beforeDestroy () {
// 销毁echarts实例对象
if (this.myChart) this.myChart.dispose()
},
watch: {},
methods: {
initChart () {
this.$nextTick(() => {
const dom = this.$refs.screenEchartsFrame
this.myChart = echarts.init(dom)
// this.myChart.setOption(this.chartMethod())
this.$emit('myChartMethod', this.myChart)
})
},
// 配置option
setOption (option) {
this.myChart.setOption(option)
let than = this
this.myChart.on('click',function(param){
than.$emit('handelClickMyPei',param)
})
},
// 获取option
getOption () {
if (this.myChart) {
return this.myChart.getOption()
} else {
return null
}
},
//
resize () {
if (this.myChart) {
this.myChart.resize()
}
},
clear () {
if (this.myChart) {
this.myChart.clear()
}
},
showLoading () {
if (this.myChart) {
this.$nextTick(() => {
this.myChart.showLoading({
text: '',
color: '#29cdff',
textColor: '#29cdff',
maskColor: 'rgba(255, 255, 255, 0)',
zlevel: 0
})
})
}
},
hideLoading () {
if (this.myChart) {
this.myChart.hideLoading()
}
},
// 启动动画时使用
tooltipAnimate (chart, length) {
// 清除上一次动画
this.timeTicket && clearInterval(this.timeTicket)
const count = 0
// 启动动画
this._action(chart, count, length)
chart && // 移除动画
chart.on('mouseover', params => {
this._cleanAction(chart, params)
})
// 重写启动动画
chart &&
chart.on('mouseout', () => {
this._action(chart, count, length)
})
},
// tooltip动画action
_action (chart, count, length) {
this.timeTicket && clearInterval(this.timeTicket)
this.timeTicket = setInterval(() => {
if (!chart) {
clearInterval(this.timeTicket)
return
}
chart &&
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0
})
chart &&
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count % length
})
chart &&
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count % length
})
count++
}, 1000 * 3)
},
_cleanAction (chart, params) {
this.timeTicket && clearInterval(this.timeTicket)
if (!chart) {
clearInterval(this.timeTicket)
return
}
chart &&
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0
})
chart &&
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
})
chart &&
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex
})
}
}
}
name: 'screen-echarts-frame',
data() {
return {
myChart: ''
};
},
props: {
chartMethod: {
type: Function
}
},
mounted() {
this.initChart();
window.onresize = () => {
this.myChart.resize();
};
},
beforeDestroy() {
// 销毁echarts实例对象
if (this.myChart) this.myChart.dispose();
},
watch: {},
methods: {
initChart() {
this.$nextTick(() => {
const dom = this.$refs.screenEchartsFrame;
this.myChart = echarts.init(dom);
// this.myChart.setOption(this.chartMethod())
this.$emit('myChartMethod', this.myChart);
});
},
// 配置option
setOption(option) {
this.myChart.setOption(option);
let than = this;
this.myChart.off();
this.myChart.on('click', function(param) {
than.$emit('handelClickMyPei', param);
});
},
// 获取option
getOption() {
if (this.myChart) {
return this.myChart.getOption();
} else {
return null;
}
},
//
resize() {
if (this.myChart) {
this.myChart.resize();
}
},
clear() {
if (this.myChart) {
this.myChart.clear();
}
},
showLoading() {
if (this.myChart) {
this.$nextTick(() => {
this.myChart.showLoading({
text: '',
color: '#29cdff',
textColor: '#29cdff',
maskColor: 'rgba(255, 255, 255, 0)',
zlevel: 0
});
});
}
},
hideLoading() {
if (this.myChart) {
this.myChart.hideLoading();
}
},
// 启动动画时使用
tooltipAnimate(chart, length) {
// 清除上一次动画
this.timeTicket && clearInterval(this.timeTicket);
const count = 0;
// 启动动画
this._action(chart, count, length);
chart && // 移除动画
chart.on('mouseover', params => {
this._cleanAction(chart, params);
});
// 重写启动动画
chart &&
chart.on('mouseout', () => {
this._action(chart, count, length);
});
},
// tooltip动画action
_action(chart, count, length) {
this.timeTicket && clearInterval(this.timeTicket);
this.timeTicket = setInterval(() => {
if (!chart) {
clearInterval(this.timeTicket);
return;
}
chart &&
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
chart &&
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count % length
});
chart &&
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count % length
});
count++;
}, 1000 * 3);
},
_cleanAction(chart, params) {
this.timeTicket && clearInterval(this.timeTicket);
if (!chart) {
clearInterval(this.timeTicket);
return;
}
chart &&
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0
});
chart &&
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex
});
chart &&
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex
});
}
}
};
</script>
<style lang="scss" scoped>
.screenEchartsFrame {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
</style>

271
src/views/modules/communityParty/dyhx/party.vue
View File

@ -22,22 +22,22 @@
<div class="div_table">
<el-row :gutter="20">
<el-col :span="12">
<div class="div_table_title">党员年龄统计</div>
<div class="div_table_title">党员学历统计</div>
<div class="flex">
<div class="width1">
<div class="box">
<screen-echarts-frame
@handelClickMyPei="handelClickMyPei"
<screen-echarts-frame2
@handelClickMyPei="handelClickMyPei2"
:style="{ width: '100%', height: '100%' }"
@myChartMethod="pieInitOk"
ref="pieChart"
></screen-echarts-frame>
@myChartMethod="pieInitOk2"
ref="pieChart2"
></screen-echarts-frame2>
</div>
</div>
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -49,24 +49,22 @@
</div>
</div>
</div>
<div class="census_searchcensus2">
<!-- <div class="census_searchcensus2">
<div class="census_searchcensus_box"></div>
<el-button size="small" class="diy-button--output" @click="handleExport('age')">导出</el-button>
</div>
<el-table
<el-button size="small" class="diy-button--output" @click="handleExport('edu')">导出</el-button>
</div> <el-table
class="table"
:data="tableDataAge"
:data="tableData"
border
:height="maxTableHeight"
v-loading="tableLoadingAge"
v-loading="tableLoading"
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
style="width: 100%"
>
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
<el-table-column prop="name" header-align="center" align="center" label="姓名" :show-overflow-tooltip="true" min-width="120"></el-table-column>
<el-table-column prop="age" header-align="center" align="center" :show-overflow-tooltip="true" label="年龄" min-width="100"></el-table-column>
<el-table-column prop="education" header-align="center" align="center" :show-overflow-tooltip="true" label="学历" min-width="130"></el-table-column>
<el-table-column prop="mobile" header-align="center" align="center" :show-overflow-tooltip="true" label="手机号码" min-width="130"></el-table-column>
@ -75,35 +73,35 @@
<el-button type="text" class="div-table-button--detail" size="small" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-table>
<el-pagination
@size-change="pageSizeChangeHandleAge"
@current-change="pageCurrentChangeHandleAge"
:current-page.sync="agePageNo"
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew"
:current-page.sync="pageNo"
:page-sizes="[10, 20, 50, 100, 200]"
:page-size="agePageSize"
:page-size="pageSize"
layout="sizes, prev, pager, next, total,jumper"
:total="ageTotal"
></el-pagination>
:total="total"
></el-pagination>-->
</el-col>
<el-col :span="12">
<div class="div_table_title">党员学历统计</div>
<div class="div_table_title">党员年龄统计</div>
<div class="flex">
<div class="width1">
<div class="box">
<screen-echarts-frame2
@handelClickMyPei="handelClickMyPei2"
<screen-echarts-frame
@handelClickMyPei="handelClickMyPei"
:style="{ width: '100%', height: '100%' }"
@myChartMethod="pieInitOk2"
ref="pieChart2"
></screen-echarts-frame2>
@myChartMethod="pieInitOk"
ref="pieChart"
></screen-echarts-frame>
</div>
</div>
<div class="flex1">
<div class="box">
<div class="legend">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartData2Data" @click="handleClickItem(item)">
<div class="legend-row" :key="item.name" v-for="(item, index) in chartDataData" @click="handleClickItem(item)">
<div class="kuai" :style="{ backgroundColor: color[index] }"></div>
<div class="content">
<div class="name">{{ item.name }}</div>
@ -115,45 +113,46 @@
</div>
</div>
</div>
<div class="census_searchcensus2">
<div class="census_searchcensus_box"></div>
<el-button size="small" class="diy-button--output" @click="handleExport('edu')">导出</el-button>
</div>
<el-table
class="table"
:data="tableData"
border
:height="maxTableHeight"
v-loading="tableLoading"
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
style="width: 100%"
>
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
<el-table-column prop="name" header-align="center" align="center" label="姓名" :show-overflow-tooltip="true" min-width="120"></el-table-column>
<el-table-column prop="education" header-align="center" align="center" :show-overflow-tooltip="true" label="学历" min-width="130"></el-table-column>
<el-table-column prop="mobile" header-align="center" align="center" :show-overflow-tooltip="true" label="手机号码" min-width="130"></el-table-column>
<el-table-column label="操作" fixed="right" width="120" header-align="center" align="center" class="operate">
<template slot-scope="scope">
<el-button type="text" class="div-table-button--detail" size="small" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew"
:current-page.sync="pageNo"
:page-sizes="[10, 20, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total,jumper"
:total="total"
></el-pagination>
</el-col>
</el-row>
<div class="census_searchcensus2">
<div class="census_searchcensus_box"></div>
<el-button size="small" class="diy-button--output" @click="handleExport('age')">导出</el-button>
</div>
<el-table
class="table"
:data="tableDataAge"
border
:height="maxTableHeight"
v-loading="tableLoadingAge"
:header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
style="width: 100%"
>
<el-table-column label="序号" header-align="center" align="center" type="index" width="50"></el-table-column>
<el-table-column prop="name" header-align="center" align="center" label="姓名" :show-overflow-tooltip="true" min-width="120"></el-table-column>
<el-table-column prop="mobile" header-align="center" align="center" :show-overflow-tooltip="true" label="手机号码" min-width="130"></el-table-column>
<el-table-column prop="idCard" header-align="center" align="center" :show-overflow-tooltip="true" label="证件号" min-width="130"></el-table-column>
<el-table-column prop="age" header-align="center" align="center" :show-overflow-tooltip="true" label="年龄" min-width="100"></el-table-column>
<el-table-column prop="education" header-align="center" align="center" :show-overflow-tooltip="true" label="学历" min-width="130"></el-table-column>
<el-table-column label="操作" fixed="right" width="120" header-align="center" align="center" class="operate">
<template slot-scope="scope">
<el-button type="text" class="div-table-button--detail" size="small" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="pageSizeChangeHandleAge"
@current-change="pageCurrentChangeHandleAge"
:current-page.sync="pageNo"
:page-sizes="[10, 20, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total,jumper"
:total="total"
></el-pagination>
</div>
<!-- <crate-form v-if="memberDialog"
@ -226,7 +225,9 @@ export default {
pieData2: [],
orgId: '',
orgType: '',
code: '',
codeType: '',
pieDatatotal: 0,
pieDatatotal2: 0,
memberDialog: false,
@ -243,7 +244,7 @@ export default {
noInit: false,
noEduInit: false,
selectAgency: null,
ageTotalCount: 0,
totalCount: 0,
eduTotalCount: 0,
propTree: [],
value2: '',
@ -251,14 +252,12 @@ export default {
visibleLoading: true,
agencyId: '',
orgType: '',
ageCode: '',
eduCode: '',
pageNo: 1,
pageSize: 10,
agePageNo: 1,
agePageSize: 10,
total: 0,
ageTotal: 0,
partyOrgs: [],
@ -292,7 +291,7 @@ export default {
this.getAgeCount();
this.getEduCount();
this.getAgeList();
this.getEduList();
// this.getEduList();
},
async created() {
// this.getGridList('query');
@ -303,20 +302,21 @@ export default {
if (typeof this.formData[n] == 'object') this.formData[n] = [];
else this.formData[n] = '';
}
this.memberDialog = false;
this.pageNo = 1;
this.code = '';
this.codeType = '';
this.orgId = '';
this.handleSearch();
},
handleChangeAgency(val) {
let obj = this.$refs['myCascader'].getCheckedNodes()[0].data;
console.log('obj', obj);
if (obj) {
// this.orgType = obj.level === 'grid' ? 'grid' : 'agency';
// this.orgType = 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 {
@ -334,39 +334,14 @@ export default {
},
handleSearch(val) {
this.memberDialog = false;
this.eduCode = '';
this.ageCode = '';
this.code = '';
this.codeType = '';
this.getAgeCount();
this.getEduCount();
this.getAgeList();
this.getEduList();
// this.getEduList();
},
// async getGridList(type, agencyId) {
// const { user } = await this.$store.state;
// // addorupdate query
// await this.$http
// .get('/resi/partymember/icPartyOrg/getSearchTreelist', { params: { agencyId: agencyId || user.agencyId } })
// .then(({ data: res }) => {
// if (res.code !== 0) {
// return this.$message.error(res.msg);
// } else {
// this.optionsG = this.deepArrTOnull(res.data);
// }
// })
// .catch(() => {
// return this.$message.error('网络错误');
// });
// },
// pieInitOk(dom) {
// console.log('pie准备好了', dom);
// this.pieAgeChartS = dom;
// // this.pieInitState = true
// },
// pieInitOks(dom) {
// console.log('pies准备好了', dom);
// this.pieEduChartS = dom;
// // this.pieInitState = true
// },
// 获取饼状图
async initAgeCharts(chartData) {
@ -587,23 +562,24 @@ export default {
this.$refs.pieChart2.setOption(this.pieOption2);
},
handelClickMyPei(param) {
this.ageCode = param.data.code;
this.getAgeList()();
this.code = param.data.code;
this.codeType = 'age';
this.getAgeList();
},
handelClickMyPei2(param) {
console.log(param);
this.eduCode = param.data.code;
this.getEduList();
this.code = param.data.code;
this.codeType = 'education';
this.getAgeList();
},
handleClickItem(item) {
this.ageCode = item.code;
this.code = item.code;
this.codeType = 'age';
this.getAgeList();
},
handleClickItem2(item) {
this.eduCode = item.code;
this.getEduList();
this.code = item.code;
this.codeType = 'education';
this.getAgeList();
},
async getAgeCount() {
@ -718,49 +694,27 @@ export default {
this.tableLoadingAge = true;
this.visibleAgeLoading = true;
// const url = "/epmetuser/icresiuser/partymemberagelist";
const url = '/resi/partymember/icPartyMember/partymemberagelist';
const url = '/resi/partymember/icPartyMember/partymember-portrait-list';
let params = {
orgId: this.orgId,
orgType: this.orgType,
code: this.ageCode,
pageNo: this.agePageNo,
pageSize: this.agePageSize
code: this.code,
codeType: this.codeType,
pageNo: this.pageNo,
pageSize: this.pageSize
};
const { data, code, msg } = await requestPost(url, params);
this.tableLoadingAge = false;
if (code === 0) {
this.tableDataAge = data.list;
this.ageTotal = data.total;
this.total = data.total;
} else {
this.$message.error(msg);
}
// if (_code == 0 || _code) this.noInit = true
this.visibleAgeLoading = false;
},
async getEduList() {
this.tableLoading = true;
this.visibleLoading = true;
// const url = "/epmetuser/icresiuser/partymembereducationlist";
const url = '/resi/partymember/icPartyMember/partymembereducationlist';
let params = {
orgId: this.orgId,
orgType: this.orgType,
code: this.eduCode,
pageNo: this.pageNo,
pageSize: this.pageSize
};
const { data, code, msg } = await requestPost(url, params);
this.tableLoading = false;
if (code === 0) {
this.tableData = data.list;
this.total = data.total;
} else {
this.$message.error(msg);
}
this.visibleLoading = false;
},
async getOrgTreeList() {
function deleteChildren(arr) {
@ -832,39 +786,30 @@ export default {
}, 500);
},
pageSizeChangeHandleAge(val) {
this.agePageNo = 1;
this.agePageSize = val;
this.getAgeList(this.agencyId, this.orgType, this.ageCode);
},
pageCurrentChangeHandleAge(val) {
this.agePageNo = val;
this.getAgeList(this.agencyId, this.orgType, this.ageCode);
},
pageSizeChangeHandleNew(val) {
this.pageNo = 1;
this.pageSize = val;
this.getEduList(this.agencyId, this.orgType, this.eduCode);
this.getAgeList();
},
pageCurrentChangeHandleNew(val) {
pageCurrentChangeHandleAge(val) {
this.pageNo = val;
this.getEduList(this.agencyId, this.orgType, this.eduCode);
this.getAgeList();
},
async handleExport(type) {
const urls = {
age: '/epmetuser/icresiuser/partymemberagelist/export',
edu: '/epmetuser/icresiuser/partymembereducationlist/export'
};
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-');
const url = '/resi/partymember/icPartyMember/partymember-portrait-export';
let params = {
orgId: this.orgId,
orgType: this.orgType,
code: type == 'age' ? this.ageCode : this.eduCode
code: this.code,
codeType: this.codeType
// pageNo: this.pageNo,
// pageSize: this.pageSize
};
// .post('epmetuser/icresiuser/exportExcel', params)
await this.$http({
method: 'POST',
url: urls[type],
url: url,
responseType: 'blob',
data: params
})

Write Preview
Loading…
Cancel
Save