|
@ -45,20 +45,20 @@ |
|
|
<div |
|
|
<div |
|
|
class="content-bottom-list-row" |
|
|
class="content-bottom-list-row" |
|
|
v-for="item in dataList" |
|
|
v-for="item in dataList" |
|
|
:key="item.label" |
|
|
:key="item.orgName" |
|
|
> |
|
|
> |
|
|
<div class="content-bottom-list-row-item"> |
|
|
<div class="content-bottom-list-row-item"> |
|
|
{{ item.label }} |
|
|
{{ item.orgName }} |
|
|
</div> |
|
|
</div> |
|
|
<div class="content-bottom-list-row-item"> |
|
|
<div class="content-bottom-list-row-item"> |
|
|
<div |
|
|
<div |
|
|
class="content-bottom-list-row-item-jd" |
|
|
class="content-bottom-list-row-item-jd" |
|
|
:style="`width:${getWidth(dataList, item.zrcNum)}%`" |
|
|
:style="`width:${getWidth(dataList, item.count)}%`" |
|
|
></div> |
|
|
></div> |
|
|
<div class="content-bottom-list-row-item-jd1"></div> |
|
|
<div class="content-bottom-list-row-item-jd1"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="content-bottom-list-row-item"> |
|
|
<div class="content-bottom-list-row-item"> |
|
|
{{ item.zrcNum }} |
|
|
{{ item.count }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -74,6 +74,10 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { mapGetters, mapActions } from 'vuex' |
|
|
import { mapGetters, mapActions } from 'vuex' |
|
|
|
|
|
import { |
|
|
|
|
|
selectYearPartyMemberCensus, |
|
|
|
|
|
selectOrgPartyMemberCensus |
|
|
|
|
|
} from '@/api/hsyf' |
|
|
export default { |
|
|
export default { |
|
|
name: '', |
|
|
name: '', |
|
|
data () { |
|
|
data () { |
|
@ -81,76 +85,57 @@ export default { |
|
|
dialogTitle: '党员分析', |
|
|
dialogTitle: '党员分析', |
|
|
dataList: [ |
|
|
dataList: [ |
|
|
{ |
|
|
{ |
|
|
label: '上泊新村', |
|
|
orgName: '上泊新村', |
|
|
zrcNum: 314, |
|
|
count: 314, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1697533359860244481' |
|
|
id: '1697533359860244481' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '滨河村', |
|
|
orgName: '滨河村', |
|
|
zrcNum: 344, |
|
|
count: 344, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704030137514287105' |
|
|
id: '1704030137514287105' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '湍湾新村', |
|
|
orgName: '湍湾新村', |
|
|
zrcNum: 295, |
|
|
count: 295, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704036500462198786' |
|
|
id: '1704036500462198786' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '七级村', |
|
|
orgName: '七级村', |
|
|
zrcNum: 338, |
|
|
count: 338, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704313950756757506' |
|
|
id: '1704313950756757506' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '沽河村', |
|
|
orgName: '沽河村', |
|
|
zrcNum: 346, |
|
|
count: 346, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704324481563582466' |
|
|
id: '1704324481563582466' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '太祉庄村', |
|
|
orgName: '太祉庄村', |
|
|
zrcNum: 310, |
|
|
count: 310, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704327114084933633' |
|
|
id: '1704327114084933633' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '河流新村', |
|
|
orgName: '河流新村', |
|
|
zrcNum: 268, |
|
|
count: 268, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704331366425518081' |
|
|
id: '1704331366425518081' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '大坝新村', |
|
|
orgName: '大坝新村', |
|
|
zrcNum: 321, |
|
|
count: 321, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704396342955696130' |
|
|
id: '1704396342955696130' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '双塔村', |
|
|
orgName: '双塔村', |
|
|
zrcNum: 469, |
|
|
count: 469, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704331366425518081' |
|
|
id: '1704331366425518081' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
label: '移风村', |
|
|
orgName: '移风村', |
|
|
zrcNum: 446, |
|
|
count: 446, |
|
|
wanggeNum: 26, |
|
|
|
|
|
dangyuanNum: 26, |
|
|
|
|
|
id: '1704331366425518081' |
|
|
id: '1704331366425518081' |
|
|
} |
|
|
} |
|
|
], |
|
|
], |
|
|
|
|
|
barData: [138, 387, 516, 650, 635, 656], |
|
|
loading: false |
|
|
loading: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
@ -160,7 +145,7 @@ export default { |
|
|
components: {}, |
|
|
components: {}, |
|
|
mounted () { |
|
|
mounted () { |
|
|
this.$nextTick(() => { |
|
|
this.$nextTick(() => { |
|
|
this.initChartBar() |
|
|
this.getData() |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
created () {}, |
|
|
created () {}, |
|
@ -168,10 +153,28 @@ export default { |
|
|
...mapActions({ |
|
|
...mapActions({ |
|
|
showGlobalDialog: 'showGlobalDialog' |
|
|
showGlobalDialog: 'showGlobalDialog' |
|
|
}), |
|
|
}), |
|
|
|
|
|
async getData () { |
|
|
|
|
|
await selectYearPartyMemberCensus().then((res) => { |
|
|
|
|
|
console.log('res111:', res) |
|
|
|
|
|
// [138, 387, 516, 650, 635, 656] |
|
|
|
|
|
const data = res.data |
|
|
|
|
|
this.barData = [ |
|
|
|
|
|
data.sanshiyixia, |
|
|
|
|
|
data.sishi, |
|
|
|
|
|
data.wushi, |
|
|
|
|
|
data.liushi, |
|
|
|
|
|
data.qishi, |
|
|
|
|
|
data.qishiyishang |
|
|
|
|
|
] |
|
|
|
|
|
}) |
|
|
|
|
|
await selectOrgPartyMemberCensus().then((res) => { |
|
|
|
|
|
this.dataList = res.data; |
|
|
|
|
|
console.log('res222:', res) |
|
|
|
|
|
}) |
|
|
|
|
|
await this.initChartBar() |
|
|
|
|
|
}, |
|
|
initChartBar () { |
|
|
initChartBar () { |
|
|
const myChart = this.$echarts.init(document.getElementById('chartBar')) |
|
|
const myChart = this.$echarts.init(document.getElementById('chartBar')) |
|
|
var data = [138, 387, 516, 650, 635, 656] |
|
|
|
|
|
|
|
|
|
|
|
var option = { |
|
|
var option = { |
|
|
tooltip: {}, |
|
|
tooltip: {}, |
|
|
width: 420, |
|
|
width: 420, |
|
@ -179,14 +182,14 @@ export default { |
|
|
type: 'category', |
|
|
type: 'category', |
|
|
data: [ |
|
|
data: [ |
|
|
// "20岁以下", |
|
|
// "20岁以下", |
|
|
'20-30岁', |
|
|
'18-30岁', |
|
|
'30-40岁', |
|
|
'30-40岁', |
|
|
'40-50岁', |
|
|
'40-50岁', |
|
|
'50-60岁', |
|
|
'50-60岁', |
|
|
'60-70岁', |
|
|
'60-70岁', |
|
|
'70岁以上' |
|
|
'70岁以上' |
|
|
], |
|
|
], |
|
|
axisLabel: { |
|
|
axisorgName: { |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
color: '#F59969' // 将x轴文字颜色设为红色 |
|
|
color: '#F59969' // 将x轴文字颜色设为红色 |
|
|
} |
|
|
} |
|
@ -219,9 +222,9 @@ export default { |
|
|
{ |
|
|
{ |
|
|
name: '人数', |
|
|
name: '人数', |
|
|
type: 'bar', |
|
|
type: 'bar', |
|
|
data: data, |
|
|
data: this.barData, |
|
|
barWidth: 20, |
|
|
barWidth: 20, |
|
|
label: { |
|
|
orgName: { |
|
|
show: true, |
|
|
show: true, |
|
|
position: 'top', |
|
|
position: 'top', |
|
|
textStyle: { |
|
|
textStyle: { |
|
@ -270,10 +273,13 @@ export default { |
|
|
getWidth (arr, val) { |
|
|
getWidth (arr, val) { |
|
|
let num = 0 |
|
|
let num = 0 |
|
|
arr.forEach((item) => { |
|
|
arr.forEach((item) => { |
|
|
if (item.zrcNum > num) { |
|
|
if (item.count > num) { |
|
|
num = item.zrcNum |
|
|
num = item.count |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
|
|
|
if (num === 0) { |
|
|
|
|
|
return 0 |
|
|
|
|
|
} |
|
|
return (val / num) * 100 - 5 |
|
|
return (val / num) * 100 - 5 |
|
|
}, |
|
|
}, |
|
|
closeDialog () { |
|
|
closeDialog () { |
|
@ -454,7 +460,7 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
&-item:nth-child(1) { |
|
|
&-item:nth-child(1) { |
|
|
width: 73px; |
|
|
width: 123px; |
|
|
font-weight: 500; |
|
|
font-weight: 500; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #fbe9c5; |
|
|
color: #fbe9c5; |
|
@ -462,7 +468,7 @@ export default { |
|
|
} |
|
|
} |
|
|
&-item:nth-child(2) { |
|
|
&-item:nth-child(2) { |
|
|
height: 24px; |
|
|
height: 24px; |
|
|
width: calc(100% - 113px); |
|
|
width: calc(100% - 163px); |
|
|
} |
|
|
} |
|
|
&-item:nth-child(3) { |
|
|
&-item:nth-child(3) { |
|
|
width: 40px; |
|
|
width: 40px; |
|
|