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.
489 lines
12 KiB
489 lines
12 KiB
<template>
|
|
<div class="modal" v-show="dangyuanCommittee">
|
|
<section>
|
|
<div class="dialog_header">
|
|
<div class="close-icon" @click="closeDialog">
|
|
<img src="@/assets/images/common/dialog-colse.png" alt="" />
|
|
</div>
|
|
<div class="title-container">
|
|
<div class="title">{{ dialogTitle }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="dialog_body">
|
|
<div class="content">
|
|
<div class="main">
|
|
<div class="wrap">
|
|
<div class="content">
|
|
<div class="content-top">
|
|
<div class="content-title">
|
|
<div>
|
|
<img
|
|
:src="require('@/assets/images/icon/dyfxDian.png')"
|
|
/>
|
|
</div>
|
|
<div class="title-txt">党员年龄分析</div>
|
|
</div>
|
|
<div
|
|
id="chartBar"
|
|
style="
|
|
width: 485px;
|
|
height: 200px;
|
|
/* transform: translate(-50px, -50px); */
|
|
"
|
|
></div>
|
|
</div>
|
|
<div class="content-bottom">
|
|
<div class="content-title">
|
|
<div>
|
|
<img
|
|
:src="require('@/assets/images/icon/dyfxDian.png')"
|
|
/>
|
|
</div>
|
|
<div class="title-txt">各新村党员统计</div>
|
|
</div>
|
|
<div class="content-bottom-list">
|
|
<div
|
|
class="content-bottom-list-row"
|
|
v-for="item in dataList"
|
|
:key="item.orgName"
|
|
>
|
|
<div class="content-bottom-list-row-item">
|
|
{{ item.orgName }}
|
|
</div>
|
|
<div class="content-bottom-list-row-item">
|
|
<div
|
|
class="content-bottom-list-row-item-jd"
|
|
:style="`width:${getWidth(dataList, item.count)}%`"
|
|
></div>
|
|
<div class="content-bottom-list-row-item-jd1"></div>
|
|
</div>
|
|
<div class="content-bottom-list-row-item">
|
|
{{ item.count }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
import {
|
|
selectYearPartyMemberCensus,
|
|
selectOrgPartyMemberCensus
|
|
} from '@/api/hsyf'
|
|
export default {
|
|
name: '',
|
|
data () {
|
|
return {
|
|
dialogTitle: '党员分析',
|
|
dataList: [
|
|
{
|
|
orgName: '上泊新村',
|
|
count: 314,
|
|
id: '1697533359860244481'
|
|
},
|
|
{
|
|
orgName: '滨河村',
|
|
count: 344,
|
|
id: '1704030137514287105'
|
|
},
|
|
{
|
|
orgName: '湍湾新村',
|
|
count: 295,
|
|
id: '1704036500462198786'
|
|
},
|
|
{
|
|
orgName: '七级村',
|
|
count: 338,
|
|
id: '1704313950756757506'
|
|
},
|
|
{
|
|
orgName: '沽河村',
|
|
count: 346,
|
|
id: '1704324481563582466'
|
|
},
|
|
{
|
|
orgName: '太祉庄村',
|
|
count: 310,
|
|
id: '1704327114084933633'
|
|
},
|
|
{
|
|
orgName: '河流新村',
|
|
count: 268,
|
|
id: '1704331366425518081'
|
|
},
|
|
{
|
|
orgName: '大坝新村',
|
|
count: 321,
|
|
id: '1704396342955696130'
|
|
},
|
|
{
|
|
orgName: '双塔村',
|
|
count: 469,
|
|
id: '1704331366425518081'
|
|
},
|
|
{
|
|
orgName: '移风村',
|
|
count: 446,
|
|
id: '1704331366425518081'
|
|
}
|
|
],
|
|
barData: [138, 387, 516, 650, 635, 656],
|
|
loading: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['dangyuanCommittee'])
|
|
},
|
|
components: {},
|
|
mounted () {
|
|
this.$nextTick(() => {
|
|
this.getData()
|
|
})
|
|
},
|
|
created () {},
|
|
methods: {
|
|
...mapActions({
|
|
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 () {
|
|
const myChart = this.$echarts.init(document.getElementById('chartBar'))
|
|
var option = {
|
|
tooltip: {},
|
|
width: 420,
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [
|
|
// "20岁以下",
|
|
'18-30岁',
|
|
'31-40岁',
|
|
'41-50岁',
|
|
'51-60岁',
|
|
'61-70岁',
|
|
'70岁以上'
|
|
],
|
|
axisorgName: {
|
|
textStyle: {
|
|
color: '#F59969' // 将x轴文字颜色设为红色
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#F59969'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#F59969'
|
|
}
|
|
},
|
|
splitNumber: 3,
|
|
splitLine: {
|
|
show: true,
|
|
type: 'dashed',
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#F59969'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '人数',
|
|
type: 'bar',
|
|
data: this.barData,
|
|
barWidth: 20,
|
|
orgName: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: '#F59969' // 设置文字颜色为红色
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(254, 181, 52, 1)' // 起点颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(254, 181, 52, .1)' // 终点颜色
|
|
}
|
|
]),
|
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
borderRadius: 4
|
|
}
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
// color: function (params) {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(223, 206, 157, 1)' // 起点颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(223, 206, 157, .1)' // 终点颜色
|
|
}
|
|
]),
|
|
shadowColor: 'rgba(0, 0, 0, 0)',
|
|
borderRadius: 4
|
|
}
|
|
} // 高亮时的样式
|
|
}
|
|
]
|
|
}
|
|
|
|
myChart.setOption(option)
|
|
},
|
|
getWidth (arr, val) {
|
|
let num = 0
|
|
arr.forEach((item) => {
|
|
if (item.count > num) {
|
|
num = item.count
|
|
}
|
|
})
|
|
if (num === 0) {
|
|
return 0
|
|
}
|
|
return (val / num) * 100 - 5
|
|
},
|
|
closeDialog () {
|
|
this.showGlobalDialog('')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 150;
|
|
|
|
section {
|
|
@include flex(column);
|
|
background: url("~@/assets/images/common/dialog-bg-red.png") no-repeat !important;
|
|
background-size: 100% 100% !important;
|
|
width: 585px;
|
|
height: 748px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
.dialog_header {
|
|
position: relative;
|
|
margin-bottom: 0px;
|
|
|
|
.close-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.title-container {
|
|
align-items: center;
|
|
background: url("~@/assets/images/common/dialog-header-red.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60px;
|
|
font-size: 26px;
|
|
|
|
.title {
|
|
font-family: zaozigongfang;
|
|
letter-spacing: 2px;
|
|
line-height: 50px;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 52px;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog_body {
|
|
position: relative;
|
|
|
|
> .content {
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
padding: 0px 24px 0 27px;
|
|
|
|
.main {
|
|
height: 688px;
|
|
overflow-y: hidden;
|
|
box-sizing: border-box;
|
|
overflow-y: scroll;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
border-radius: 10px;
|
|
background: rgba(251, 233, 197, 1);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: rgba(234, 201, 135, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrap {
|
|
.content {
|
|
padding: 0 17px;
|
|
&-top {
|
|
width: 480px;
|
|
.content-title {
|
|
padding-top: 18px;
|
|
margin-bottom: -24px;
|
|
width: 314px;
|
|
display: flex;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
.title-txt {
|
|
padding-left: 8px;
|
|
height: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
&-bottom {
|
|
.content-title {
|
|
margin-top: -6px;
|
|
width: 314px;
|
|
display: flex;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
.title-txt {
|
|
padding-left: 8px;
|
|
height: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
&-list {
|
|
padding-top: 18px;
|
|
&-row {
|
|
display: flex;
|
|
&-item {
|
|
display: flex;
|
|
&-jd {
|
|
margin-top: 18px;
|
|
height: 6px;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
rgba(255, 153, 81, 0.1) 0%,
|
|
rgba(255, 153, 81, 0.9) 80px,
|
|
rgba(255, 153, 81, 1) 100px,
|
|
rgba(255, 197, 35, 1) 200px,
|
|
rgba(255, 197, 35, 1) 400px
|
|
);
|
|
}
|
|
&-jd1 {
|
|
width: 4px;
|
|
height: 14px;
|
|
margin-top: 14px;
|
|
// background: #fff;
|
|
transform: rotate(45deg);
|
|
margin-left: -2px;
|
|
background-image: radial-gradient(
|
|
circle at center,
|
|
rgba(255, 255, 255, 1),
|
|
rgba(255, 255, 255, 0.1)
|
|
);
|
|
scale: 0.9;
|
|
}
|
|
}
|
|
&-item:nth-child(1) {
|
|
width: 123px;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #fbe9c5;
|
|
line-height: 42px;
|
|
}
|
|
&-item:nth-child(2) {
|
|
height: 24px;
|
|
width: calc(100% - 163px);
|
|
}
|
|
&-item:nth-child(3) {
|
|
width: 40px;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
line-height: 42px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#chartBar {
|
|
scale: 1.05;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|