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.
1100 lines
30 KiB
1100 lines
30 KiB
4 years ago
|
<template>
|
||
|
|
<div class="warning-box">
|
||
|
|
<cpt-card>
|
||
|
|
<div class="card-title">
|
||
|
|
<img class="title-icon"
|
||
|
|
src="@/assets/img/shuju/title-tip.png" />
|
||
|
|
<div class="title-label">
|
||
|
|
人房概览统计
|
||
|
|
<el-cascader v-model="selectAgency"
|
||
|
|
:options="propTree"
|
||
|
|
:props="{ checkStrictly: true }"
|
||
|
|
:show-all-levels="false"
|
||
|
|
:getCheckedNodes="getCheckedNodes"
|
||
|
|
clearable
|
||
|
|
@change="handleCascader">
|
||
|
|
</el-cascader>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-echart">
|
||
|
|
<div class="card-left">
|
||
|
|
<div class="card-left-title">党员年龄统计</div>
|
||
|
|
<div class="card-flex">
|
||
|
|
<div class="echart-wr">
|
||
|
|
<!-- <div class="echart-cicle"></div> -->
|
||
|
|
<screen-echarts-frame class="echart-org"
|
||
|
|
@myChartMethod="pieInitOk"
|
||
|
|
ref="ageChart"></screen-echarts-frame>
|
||
|
|
<!-- <div id="echartOrg" class="echart-org"></div> -->
|
||
|
|
</div>
|
||
|
|
<div class="echarts-tips echarts-tips-wd50">
|
||
|
|
<div class="tips-lists">
|
||
|
|
<div v-for="(item, index) in ageItem"
|
||
|
|
:key="index"
|
||
|
|
class="tips-items">
|
||
|
|
<div class="tips-items-title"
|
||
|
|
:class="'tips-items-title' + item.code">
|
||
|
|
{{ item.name }}
|
||
|
|
</div>
|
||
|
|
<div class="tips-items-num">
|
||
|
|
<div class="tips-item-count">{{item.value}}</div>
|
||
|
|
<div class="tips-item-has">{{ item.radio }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="ecahrts-button">
|
||
|
|
<el-button type="warning"
|
||
|
|
size="small"
|
||
|
|
@click="handleExport('age')">导出</el-button>
|
||
|
|
</div>
|
||
|
|
<div class="warning-box-bottom">
|
||
|
|
<screen-table :headerList="headerList"
|
||
|
|
:tableData="ageList"
|
||
|
|
:headerStyle="headerStyle"
|
||
|
|
:tableContentStyle="headerStyle"
|
||
|
|
:visibleLoading="visibleAgeLoading"
|
||
|
|
:operate="false"
|
||
|
|
@row="handleClickRow"></screen-table>
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination :current-page="agePageNo"
|
||
|
|
:page-size="agePageSize"
|
||
|
|
background
|
||
|
|
layout="prev, pager, next"
|
||
|
|
@size-change="pageSizeChangeHandleAge"
|
||
|
|
@current-change="pageCurrentChangeHandleAge"
|
||
|
|
:total="ageTotal">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-left">
|
||
|
|
<div class="card-left-title">党员学历统计</div>
|
||
|
|
<div class="card-flex">
|
||
|
|
<div class="echart-wr echart-wr100">
|
||
|
|
<!-- <div class="echart-cicle echart-cicle0"></div> -->
|
||
|
|
<!-- <div id="echartType" class="echart-org"></div> -->
|
||
|
|
<screen-echarts-frame class="echart-org"
|
||
|
|
@myChartMethod="pieInitOks"
|
||
|
|
ref="eduChart"></screen-echarts-frame>
|
||
|
|
</div>
|
||
|
|
<div v-if="false"
|
||
|
|
class="echarts-tips">
|
||
|
|
<div class="tips-list">
|
||
|
|
<div v-for="item in eduItem"
|
||
|
|
:key="item.value"
|
||
|
|
class="tips-item">
|
||
|
|
<div class="tips-item-icon"
|
||
|
|
:style="'background:' + item.color"></div>
|
||
|
|
<div class="tips-item-text">{{item.name}}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ecahrts-button">
|
||
|
|
<el-button type="warning"
|
||
|
|
size="small"
|
||
|
|
@click="handleExport('edu')">导出</el-button>
|
||
|
|
</div>
|
||
|
|
<div class="warning-box-bottom">
|
||
|
|
<screen-table :headerList="headerEduList"
|
||
|
|
:tableData="eduList"
|
||
|
|
:headerStyle="headerStyle"
|
||
|
|
:tableContentStyle="headerStyle"
|
||
|
|
:visibleLoading="visibleLoading"
|
||
|
|
:operate="false"
|
||
|
|
@row="handleClickRow"></screen-table>
|
||
|
|
<div class="pagination">
|
||
|
|
<el-pagination :current-page="pageNo"
|
||
|
|
:page-size="pageSize"
|
||
|
|
background
|
||
|
|
layout="prev, pager, next"
|
||
|
|
@size-change="pageSizeChangeHandleNew"
|
||
|
|
@current-change="pageCurrentChangeHandleNew"
|
||
|
|
:total="total">
|
||
|
|
</el-pagination>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</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 { pieOption } from './options'
|
||
|
|
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
export default {
|
||
|
|
name: "warning-box",
|
||
|
|
components: {
|
||
|
|
cptCard,
|
||
|
|
screenTable,
|
||
|
|
screenEchartsFrame
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
headerList: [
|
||
|
|
{ title: "序号", coulmn: 'index' },
|
||
|
|
{ title: "姓名", coulmn: 'name' },
|
||
|
|
{ title: "年龄", coulmn: 'age' },
|
||
|
|
{ title: "手机号码", coulmn: 'mobile' }
|
||
|
|
],
|
||
|
|
headerStyle: [
|
||
|
|
{
|
||
|
|
width: '50px'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'min-width': '100px'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'min-width': '100px'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
'min-width': '160px'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
headerEduList: [
|
||
|
|
{ title: "序号", coulmn: 'index' },
|
||
|
|
{ title: "姓名", coulmn: 'name' },
|
||
|
|
{ title: "学历", coulmn: 'education' },
|
||
|
|
{ title: "手机号码", coulmn: 'mobile' }
|
||
|
|
],
|
||
|
|
tableData: [
|
||
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
||
|
|
],
|
||
|
|
noInit: false,
|
||
|
|
noEduInit: false,
|
||
|
|
selectAgency: null,
|
||
|
|
ageTotalCount: 0,
|
||
|
|
eduTotalCount: 0,
|
||
|
|
propTree: [],
|
||
|
|
value2: '',
|
||
|
|
visibleAgeLoading: true,
|
||
|
|
visibleLoading: true,
|
||
|
|
agencyId: '',
|
||
|
|
orgType: '',
|
||
|
|
ageCode: '',
|
||
|
|
eduCode: '',
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
agePageNo: 1,
|
||
|
|
agePageSize: 10,
|
||
|
|
total: 0,
|
||
|
|
ageTotal: 0,
|
||
|
|
eduItem: [
|
||
|
|
{
|
||
|
|
name: '小学',
|
||
|
|
value: 0,
|
||
|
|
color: 'rgba(27, 81, 255, 1)'
|
||
|
|
}, {
|
||
|
|
name: '初中',
|
||
|
|
value: 1,
|
||
|
|
color: 'rgba(0, 229, 237, 1)'
|
||
|
|
}, {
|
||
|
|
name: '高中',
|
||
|
|
value: 2,
|
||
|
|
color: 'rgba(120, 0, 255, 1)'
|
||
|
|
}, {
|
||
|
|
name: '中专',
|
||
|
|
value: 3,
|
||
|
|
color: 'rgba(255, 120, 0, 1)'
|
||
|
|
}, {
|
||
|
|
name: '大专',
|
||
|
|
value: 4,
|
||
|
|
color: 'rgba(255, 186, 0, 1)'
|
||
|
|
}, {
|
||
|
|
name: '本科',
|
||
|
|
value: 5,
|
||
|
|
color: 'rgba(22, 215, 131, 1)'
|
||
|
|
}, {
|
||
|
|
name: '硕士',
|
||
|
|
value: 6,
|
||
|
|
color: 'rgba(42, 0, 255, 1)'
|
||
|
|
}, {
|
||
|
|
name: '博士',
|
||
|
|
value: 7,
|
||
|
|
color: 'rgba(198, 0, 255, 1)'
|
||
|
|
}, {
|
||
|
|
name: '其他',
|
||
|
|
value: 8,
|
||
|
|
color: 'rgba(255, 42, 0, 1)'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
ageItem: [
|
||
|
|
{
|
||
|
|
name: '50岁以下',
|
||
|
|
value: 1,
|
||
|
|
color: 'rgba(27, 81, 255, 1)'
|
||
|
|
}, {
|
||
|
|
name: '50-59岁',
|
||
|
|
value: 2,
|
||
|
|
color: 'rgba(0, 229, 237, 1)'
|
||
|
|
}, {
|
||
|
|
name: '60-69岁',
|
||
|
|
value: 3,
|
||
|
|
color: 'rgba(120, 0, 255, 1)'
|
||
|
|
}, {
|
||
|
|
name: '70-79岁',
|
||
|
|
value: 4,
|
||
|
|
color: 'rgba(255, 120, 0, 1)'
|
||
|
|
}, {
|
||
|
|
name: '80岁以上',
|
||
|
|
value: 5,
|
||
|
|
color: 'rgba(255, 186, 0, 1)'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
ageList: [],
|
||
|
|
eduList: [],
|
||
|
|
pieAgeChartS: null,
|
||
|
|
pieEduChartSs: null,
|
||
|
|
pieAgeOptions: null,
|
||
|
|
pieEduOptions: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async mounted () {
|
||
|
|
await nextTick(100);
|
||
|
|
await this.getAgencyList()
|
||
|
|
this.getAgeCount(this.$store.state.user.agencyId, 'agency')
|
||
|
|
this.getEduCount(this.$store.state.user.agencyId, 'agency')
|
||
|
|
// this.initAgeCharts()
|
||
|
|
// this.initEduCharts()
|
||
|
|
this.getAgeList(this.$store.state.user.agencyId, 'agency')
|
||
|
|
this.getEduList(this.$store.state.user.agencyId, 'agency')
|
||
|
|
// this.initChartType()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
pieInitOk (dom) {
|
||
|
|
console.log('pie准备好了', dom)
|
||
|
|
this.pieAgeChartS = dom
|
||
|
|
// this.pieInitState = true
|
||
|
|
|
||
|
|
},
|
||
|
|
pieInitOks (dom) {
|
||
|
|
console.log('pies准备好了', dom)
|
||
|
|
this.pieEduChartS = dom
|
||
|
|
// this.pieInitState = true
|
||
|
|
|
||
|
|
},
|
||
|
|
initAgeCharts () {
|
||
|
|
// const eId = document.getElementById('echartOrg')
|
||
|
|
// let _charts = echarts.init(eId)
|
||
|
|
let option = {
|
||
|
|
|
||
|
|
}
|
||
|
|
this.pieAgeOptions = pieOption(this.pieAgeChartS)
|
||
|
|
this.clickAgePie(0)
|
||
|
|
let fun = params => {
|
||
|
|
this.clickAgePie(params.dataIndex)
|
||
|
|
}
|
||
|
|
this.$refs.ageChart.handleClick(fun)
|
||
|
|
// option && this.$refs.pieChart.setOption(option);
|
||
|
|
|
||
|
|
},
|
||
|
|
initEduCharts () {
|
||
|
|
// const eId = document.getElementById('echartOrg')
|
||
|
|
// let _charts = echarts.init(eId)
|
||
|
|
let option = {
|
||
|
|
|
||
|
|
}
|
||
|
|
let legend = {
|
||
|
|
show: true,
|
||
|
|
orient: 'vertical',
|
||
|
|
top: '20%',
|
||
|
|
right: 0,
|
||
|
|
textStyle: {
|
||
|
|
width: 90,
|
||
|
|
color: '#fff',
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
width: 90
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
formatter: name => {
|
||
|
|
for (let a = 0; a < this.eduItem.length; a++) {
|
||
|
|
// this.data 这个数据中有名称和次数
|
||
|
|
if (this.eduItem[a].name === name) {
|
||
|
|
//两个名称进行对比，取出对应的次数
|
||
|
|
let params1 = name + "\n"; //然后return你需要的legend格式即可
|
||
|
|
console.log(params1);
|
||
|
|
let tmp = params1.split("\n");
|
||
|
|
let res = "" + params1;
|
||
|
|
for (let i in tmp) {
|
||
|
|
res = res.replace(tmp[i], "");
|
||
|
|
}
|
||
|
|
return res + params1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.pieEduOptions = pieOption(this.pieEduChartS)
|
||
|
|
this.pieEduOptions.legend = { ...legend }
|
||
|
|
// this.pieEduOptions.series[1].width = 400
|
||
|
|
this.clickEduPie(0)
|
||
|
|
let fun = params => {
|
||
|
|
this.clickEduPie(params.dataIndex)
|
||
|
|
}
|
||
|
|
this.$refs.eduChart.handleClick(fun)
|
||
|
|
// this.noInit = true
|
||
|
|
// option && this.$refs.pieChart.setOption(option);
|
||
|
|
|
||
|
|
},
|
||
|
|
initChartType () {
|
||
|
|
const eId = document.getElementById('echartType')
|
||
|
|
let _charts = echarts.init(eId)
|
||
|
|
|
||
|
|
let option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: true,
|
||
|
|
orient: 'vertical',
|
||
|
|
top: '20%',
|
||
|
|
right: 0,
|
||
|
|
textStyle: {
|
||
|
|
width: 90,
|
||
|
|
color: '#fff',
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
width: 90
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
formatter: name => {
|
||
|
|
for (let a = 0; a < this.eduItem.length; a++) {
|
||
|
|
// this.data 这个数据中有名称和次数
|
||
|
|
if (this.eduItem[a].name === name) {
|
||
|
|
//两个名称进行对比，取出对应的次数
|
||
|
|
let params1 = name + "\n"; //然后return你需要的legend格式即可
|
||
|
|
console.log(params1);
|
||
|
|
let tmp = params1.split("\n");
|
||
|
|
let res = "" + params1;
|
||
|
|
for (let i in tmp) {
|
||
|
|
res = res.replace(tmp[i], "");
|
||
|
|
}
|
||
|
|
return res + params1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: '12000', //图形标题，配置在中间对应效果图的80%
|
||
|
|
subtext: '总数',
|
||
|
|
left: 196,
|
||
|
|
top: "center",
|
||
|
|
textAlign: 'center',
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 28,
|
||
|
|
align: "center"
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 16,
|
||
|
|
color: '#fff',
|
||
|
|
align: 'center'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
// name: 'Access From',
|
||
|
|
type: 'pie',
|
||
|
|
// center: ['50%', '50%'],
|
||
|
|
radius: ['40%', '60%'],
|
||
|
|
avoidLabelOverlap: true,
|
||
|
|
// top: top + '%',
|
||
|
|
// height: '80%',
|
||
|
|
// left: 0,
|
||
|
|
width: 400,
|
||
|
|
label: {
|
||
|
|
position: 'outside',
|
||
|
|
alignTo: 'edge',
|
||
|
|
formatter: '{a|{c}}\n{r|}\n{name|{b}}',
|
||
|
|
minMargin: 5,
|
||
|
|
edgeDistance: 20,
|
||
|
|
lineHeight: 15,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 15,
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
padding: [0, 6, 0, 6]
|
||
|
|
},
|
||
|
|
a: {
|
||
|
|
fontSize: 15,
|
||
|
|
color: '#fff',
|
||
|
|
padding: [0, 6, 0, 6]
|
||
|
|
},
|
||
|
|
r: {
|
||
|
|
backgroundColor: 'auto',
|
||
|
|
borderRadius: 6,
|
||
|
|
width: 6,
|
||
|
|
height: 6,
|
||
|
|
// padding: [3, 3, 0, -12]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
fontSize: '14',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: true,
|
||
|
|
length: 20,
|
||
|
|
length2: 0,
|
||
|
|
maxSurfaceAngle: 80
|
||
|
|
},
|
||
|
|
labelLayout: function (params) {
|
||
|
|
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
|
||
|
|
const points = params.labelLinePoints;
|
||
|
|
// Update the end point.
|
||
|
|
points[2][0] = isLeft
|
||
|
|
? params.labelRect.x
|
||
|
|
: params.labelRect.x + params.labelRect.width;
|
||
|
|
return {
|
||
|
|
labelLinePoints: points
|
||
|
|
};
|
||
|
|
},
|
||
|
|
data: this.eduItem
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
option && _charts.setOption(option);
|
||
|
|
|
||
|
|
},
|
||
|
|
clickAgePie (seriesIndex) {
|
||
|
|
let _code = ''
|
||
|
|
let isClick = false
|
||
|
|
console.log('seriesIndex---', seriesIndex)
|
||
|
|
this.ageItem.forEach((element, index) => {
|
||
|
|
if (index === seriesIndex) {
|
||
|
|
_code = element.code
|
||
|
|
|
||
|
|
if (!this.noInit) isClick = false
|
||
|
|
else {
|
||
|
|
element.isClick = !element.isClick
|
||
|
|
isClick = element.isClick
|
||
|
|
}
|
||
|
|
|
||
|
|
element.label = {
|
||
|
|
show: true,
|
||
|
|
|
||
|
|
};
|
||
|
|
element.labelLine = {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 1,
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
console.log('zlcm', element)
|
||
|
|
} else {
|
||
|
|
element.isClick = false
|
||
|
|
element.label = {
|
||
|
|
show: false,
|
||
|
|
|
||
|
|
};
|
||
|
|
element.labelLine = {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0,
|
||
|
|
color: 'rgba(255,255,255,0)'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.ageCode = isClick && _code || ''
|
||
|
|
this.pieAgeOptions.title.text = this.ageTotalCount
|
||
|
|
this.pieAgeOptions.series[1].data = this.ageItem
|
||
|
|
// this.$refs.pieChart.hideLoading()
|
||
|
|
this.$refs.ageChart.setOption(this.pieAgeOptions)
|
||
|
|
if (this.noInit) {
|
||
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
||
|
|
const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
|
||
|
|
console.log('zlcm---isClick', isClick)
|
||
|
|
this.agePageNo = 1
|
||
|
|
this.getAgeList(_arr[0], orgType, isClick && _code || '')
|
||
|
|
}
|
||
|
|
this.noInit = true
|
||
|
|
|
||
|
|
},
|
||
|
|
clickEduPie (seriesIndex) {
|
||
|
|
let _code = ''
|
||
|
|
let isClick = false
|
||
|
|
this.eduItem.forEach((element, index) => {
|
||
|
|
if (index === seriesIndex) {
|
||
|
|
_code = element.code
|
||
|
|
|
||
|
|
if (!this.noEduInit) isClick = false
|
||
|
|
else {
|
||
|
|
element.isClick = !element.isClick
|
||
|
|
isClick = element.isClick
|
||
|
|
}
|
||
|
|
|
||
|
|
element.label = {
|
||
|
|
show: true,
|
||
|
|
|
||
|
|
};
|
||
|
|
element.labelLine = {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 1,
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
console.log('zlcm')
|
||
|
|
} else {
|
||
|
|
element.isClick = false
|
||
|
|
element.label = {
|
||
|
|
show: false,
|
||
|
|
|
||
|
|
};
|
||
|
|
element.labelLine = {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0,
|
||
|
|
color: 'rgba(255,255,255,0)'
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.eduCode = isClick && _code || ''
|
||
|
|
this.pieEduOptions.title.text = this.eduTotalCount
|
||
|
|
this.pieEduOptions.series[1].data = this.eduItem
|
||
|
|
// this.$refs.pieChart.hideLoading()
|
||
|
|
this.$refs.eduChart.setOption(this.pieEduOptions)
|
||
|
|
if (this.noEduInit) {
|
||
|
|
const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
|
||
|
|
const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
|
||
|
|
this.pageNo = 1
|
||
|
|
this.getEduList(_arr[0], orgType, isClick && _code || '')
|
||
|
|
}
|
||
|
|
this.noEduInit = true
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
async getAgeCount (orgId, orgType) {
|
||
|
|
const url = "/epmetuser/icresiuser/partymemberagestatistics";
|
||
|
|
let params = {
|
||
|
|
orgId,
|
||
|
|
orgType
|
||
|
|
};
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
if (code === 0) {
|
||
|
|
const colorList = [
|
||
|
|
{
|
||
|
|
name: '50岁以下',
|
||
|
|
value: 1,
|
||
|
|
color: '#FAC126'
|
||
|
|
}, {
|
||
|
|
name: '50-59岁',
|
||
|
|
value: 2,
|
||
|
|
color: '#3DDA83'
|
||
|
|
}, {
|
||
|
|
name: '60-69岁',
|
||
|
|
value: 3,
|
||
|
|
color: '#A800FF'
|
||
|
|
}, {
|
||
|
|
name: '70-79岁',
|
||
|
|
value: 4,
|
||
|
|
color: '#2865FA'
|
||
|
|
}, {
|
||
|
|
name: '80岁以上',
|
||
|
|
value: 5,
|
||
|
|
color: '#00DAD2'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
this.ageItem = data.map((item, index) => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
name: item.label,
|
||
|
|
isClick: false,
|
||
|
|
itemStyle: {
|
||
|
|
color: colorList[index].color
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.ageTotalCount = 0
|
||
|
|
data.forEach(item => {
|
||
|
|
this.ageTotalCount += Number(item.value)
|
||
|
|
})
|
||
|
|
this.initAgeCharts()
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getEduCount (orgId, orgType) {
|
||
|
|
const url = "/epmetuser/icresiuser/partymembereducationstatistics";
|
||
|
|
let params = {
|
||
|
|
orgId,
|
||
|
|
orgType
|
||
|
|
};
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
if (code === 0) {
|
||
|
|
this.eduItem = data.map(item => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
name: item.label,
|
||
|
|
isClick: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.eduTotalCount = 0
|
||
|
|
data.forEach(item => {
|
||
|
|
this.eduTotalCount += Number(item.value)
|
||
|
|
})
|
||
|
|
this.initEduCharts()
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getAgeList (orgId, orgType, _code) {
|
||
|
|
|
||
|
|
this.visibleAgeLoading = true
|
||
|
|
const url = "/epmetuser/icresiuser/partymemberagelist";
|
||
|
|
let params = {
|
||
|
|
orgId,
|
||
|
|
orgType,
|
||
|
|
code: _code || '',
|
||
|
|
pageNo: this.agePageNo,
|
||
|
|
pageSize: this.agePageSize
|
||
|
|
};
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
if (code === 0) {
|
||
|
|
this.ageList = data.list.map((item, index) => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
index: index + 1
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.ageTotal = data.total
|
||
|
|
} else {
|
||
|
|
this.$message.error(msg)
|
||
|
|
}
|
||
|
|
// if (_code == 0 || _code) this.noInit = true
|
||
|
|
this.visibleAgeLoading = false
|
||
|
|
},
|
||
|
|
async getEduList (orgId, orgType, _code) {
|
||
|
|
this.visibleLoading = true
|
||
|
|
const url = "/epmetuser/icresiuser/partymembereducationlist";
|
||
|
|
let params = {
|
||
|
|
orgId,
|
||
|
|
orgType,
|
||
|
|
code: _code || '',
|
||
|
|
pageNo: this.pageNo,
|
||
|
|
pageSize: this.pageSize
|
||
|
|
};
|
||
|
|
const { data, code, msg } = await requestPost(url, params);
|
||
|
|
if (code === 0) {
|
||
|
|
this.eduList = data.list.map((item, index) => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
index: index + 1
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.total = data.total
|
||
|
|
} else {
|
||
|
|
this.$message.error(msg)
|
||
|
|
}
|
||
|
|
this.visibleLoading = false
|
||
|
|
},
|
||
|
|
async getAgencyList (node, resolve) {
|
||
|
|
// const url = "/gov/org/customeragency/staffinagencylist";
|
||
|
|
const url = '/gov/org/customeragency/agencygridtree'
|
||
|
|
// let params = {
|
||
|
|
// agencyId: this.$store.state.user.agencyId,
|
||
|
|
// };
|
||
|
|
const { data, code, msg } = await requestPost(url);
|
||
|
|
if (code === 0) {
|
||
|
|
console.log('data-org----o', data)
|
||
|
|
this.selectAgency = [`${data.agencyId}-${data.level}`]
|
||
|
|
this.orgType = data.level
|
||
|
|
this.agencyId = data.agencyId
|
||
|
|
let arr = []
|
||
|
|
arr.push(data)
|
||
|
|
this.propTree = arr && this.getTreeData(arr)
|
||
|
|
|
||
|
|
} else {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getTreeData (data) {
|
||
|
|
if (!Array.isArray(data)) return []
|
||
|
|
let arr = data.map(item => {
|
||
|
|
let _item = {}
|
||
|
|
if (item.subAgencyList) {
|
||
|
|
if (item.subAgencyList.length === 0) {
|
||
|
|
_item = {
|
||
|
|
label: item.agencyName,
|
||
|
|
value: item.agencyId + '-' + item.level,
|
||
|
|
level: item.level,
|
||
|
|
children: undefined
|
||
|
|
}
|
||
|
|
} else _item = {
|
||
|
|
label: item.agencyName,
|
||
|
|
value: item.agencyId + '-' + item.level,
|
||
|
|
level: item.level,
|
||
|
|
children: this.getTreeData(item.subAgencyList)
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
_item = {
|
||
|
|
label: item.agencyName,
|
||
|
|
value: item.agencyId + '-' + item.level,
|
||
|
|
level: item.level,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _item
|
||
|
|
})
|
||
|
|
return arr
|
||
|
|
},
|
||
|
|
handleClickRow (val) {
|
||
|
|
console.log('click-row----', val)
|
||
|
|
this.$router.push({
|
||
|
|
path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleCascader (val) {
|
||
|
|
console.log('val-vvv', val)
|
||
|
|
const _arr = val[val.length - 1].split('-')
|
||
|
|
const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
|
||
|
|
this.agencyId = _arr[0]
|
||
|
|
this.orgType = orgType
|
||
|
|
this.noInit = false
|
||
|
|
this.noEduInit = false
|
||
|
|
this.getAgeCount(_arr[0], orgType)
|
||
|
|
this.getEduCount(_arr[0], orgType)
|
||
|
|
this.getAgeList(_arr[0], orgType)
|
||
|
|
this.getEduList(_arr[0], orgType)
|
||
|
|
},
|
||
|
|
getCheckedNodes (val) {
|
||
|
|
console.log('val-nnn', val)
|
||
|
|
},
|
||
|
|
lazyLoad (node, resolve) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.getAgeList(node, resolve)
|
||
|
|
}, 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)
|
||
|
|
},
|
||
|
|
pageCurrentChangeHandleNew (val) {
|
||
|
|
this.pageNo = val;
|
||
|
|
this.getEduList(this.agencyId, this.orgType, this.eduCode)
|
||
|
|
},
|
||
|
|
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 orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
|
||
|
|
let params = {
|
||
|
|
orgId: _arr[0],
|
||
|
|
orgType: orgType,
|
||
|
|
code: type == 'age' ? this.ageCode : this.eduCode,
|
||
|
|
}
|
||
|
|
// .post('epmetuser/icresiuser/exportExcel', params)
|
||
|
|
await this.$http({
|
||
|
|
method: 'POST',
|
||
|
|
url: urls[type],
|
||
|
|
responseType: 'blob',
|
||
|
|
data: params
|
||
|
|
})
|
||
|
|
.then(res => {
|
||
|
|
console.log('resllll', res)
|
||
|
|
let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
|
||
|
|
console.log('filename', fileName)
|
||
|
|
let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
|
||
|
|
var url = window.URL.createObjectURL(blob)
|
||
|
|
var aLink = document.createElement('a')
|
||
|
|
aLink.style.display = 'none'
|
||
|
|
aLink.href = url
|
||
|
|
aLink.setAttribute('download', fileName)
|
||
|
|
document.body.appendChild(aLink)
|
||
|
|
aLink.click()
|
||
|
|
document.body.removeChild(aLink) //下载完成移除元素
|
||
|
|
window.URL.revokeObjectURL(url) //释放掉blob对象
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log('获取导出失败', err)
|
||
|
|
return this.$message.error('网络错误')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style
|
||
|
|
lang="scss"
|
||
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
||
|
|
scoped
|
||
|
|
></style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.card-title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
.title-icon {
|
||
|
|
display: block;
|
||
|
|
width: 46px;
|
||
|
|
height: 34px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-right: 6px;
|
||
|
|
}
|
||
|
|
::v-deep .el-dropdown {
|
||
|
|
font-size: 18px;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 800;
|
||
|
|
}
|
||
|
|
.title-time {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-left: 30px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #fff;
|
||
|
|
.title-time-label {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
::v-deep .el-date-editor--month {
|
||
|
|
width: 100px;
|
||
|
|
.el-input__inner {
|
||
|
|
width: 100px;
|
||
|
|
height: 24px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 24px;
|
||
|
|
text-align: center;
|
||
|
|
background: #06186d;
|
||
|
|
border: 1px solid #1a64cc;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
.el-input__prefix {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.el-input__suffix {
|
||
|
|
right: 0;
|
||
|
|
.el-input__icon {
|
||
|
|
line-height: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.title-label {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 800;
|
||
|
|
::v-deep .el-input {
|
||
|
|
width: 180px;
|
||
|
|
.el-input__inner {
|
||
|
|
font-size: 18px;
|
||
|
|
// font-weight: 800;
|
||
|
|
color: #fff;
|
||
|
|
background: #06186d;
|
||
|
|
border: 1px solid #1a64cc;
|
||
|
|
}
|
||
|
|
.el-icon-arrow-down::before {
|
||
|
|
content: "\e790";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card-echart {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 40px;
|
||
|
|
height: 100%;
|
||
|
|
.card-left {
|
||
|
|
position: relative;
|
||
|
|
flex: 1;
|
||
|
|
// display: flex;
|
||
|
|
height: 100%;
|
||
|
|
.card-flex {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.card-left-title {
|
||
|
|
position: relative;
|
||
|
|
padding-left: 40px;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.card-left-title::after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 20px;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-top: -6px;
|
||
|
|
background: #2865fa;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.echart-wr {
|
||
|
|
position: relative;
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 50%;
|
||
|
|
height: 320px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.echart-org {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.echart-cicle {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
width: 240px;
|
||
|
|
height: 240px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-top: -120px;
|
||
|
|
margin-left: -120px;
|
||
|
|
border: 1px dashed rgba(0, 96, 240, 1);
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.echart-cicle0 {
|
||
|
|
left: 80px;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.echart-wr100 {
|
||
|
|
width: 70%;
|
||
|
|
}
|
||
|
|
.echarts-tips {
|
||
|
|
width: 40%;
|
||
|
|
// flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.echarts-tips-wd50 {
|
||
|
|
width: 320px;
|
||
|
|
}
|
||
|
|
.tips-list,
|
||
|
|
.tips-item,
|
||
|
|
.tips-lists,
|
||
|
|
.tips-items-num {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.tips-list {
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
// justify-content: center;
|
||
|
|
.tips-item {
|
||
|
|
// flex: 1;
|
||
|
|
width: 50%;
|
||
|
|
margin-top: 20px;
|
||
|
|
// margin-right: 40px;
|
||
|
|
cursor: pointer;
|
||
|
|
.tips-item-icon {
|
||
|
|
width: 20px;
|
||
|
|
height: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-right: 8px;
|
||
|
|
background: #1b51ff;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
.tips-item-text {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #d2e7ff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tips-lists {
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 30px 0 0 30px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.tips-items {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
margin-right: 40px;
|
||
|
|
// width: 50%;
|
||
|
|
cursor: pointer;
|
||
|
|
.tips-items-title {
|
||
|
|
position: relative;
|
||
|
|
width: 100px;
|
||
|
|
height: 26px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-left: 6px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #eff0f1;
|
||
|
|
background: url("../../../../../assets/img/shuju/measure/huang@2x.png")
|
||
|
|
no-repeat left bottom;
|
||
|
|
&1 {
|
||
|
|
background: url("../../../../../assets/img/shuju/measure/lv@2x.png")
|
||
|
|
no-repeat left bottom;
|
||
|
|
}
|
||
|
|
&2 {
|
||
|
|
background: url("../../../../../assets/img/shuju/measure/zi@2x.png")
|
||
|
|
no-repeat left bottom;
|
||
|
|
}
|
||
|
|
&3 {
|
||
|
|
background: url("../../../../../assets/img/shuju/measure/lan@2x.png")
|
||
|
|
no-repeat left bottom;
|
||
|
|
}
|
||
|
|
&4 {
|
||
|
|
background: url("../../../../../assets/img/shuju/measure/lanlv@2x.png")
|
||
|
|
no-repeat left bottom;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tips-items-num {
|
||
|
|
justify-content: space-between;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-top: 10px;
|
||
|
|
// padding-right: 30px;
|
||
|
|
font-size: 20px;
|
||
|
|
.tips-item-has {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.warning-box-bottom {
|
||
|
|
height: calc(100% - 500px);
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0 30px;
|
||
|
|
// overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.ecahrts-button {
|
||
|
|
width: 100%;
|
||
|
|
padding-right: 30px;
|
||
|
|
text-align: right;
|
||
|
|
::v-deep .el-button--warning {
|
||
|
|
background: linear-gradient(90deg, #0863ea, #3b9ffc);
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|