152 lines
3.6 KiB
Vue
152 lines
3.6 KiB
Vue
<template>
|
||
<section>
|
||
<ai-detail class="Statistics">
|
||
<template slot="title">
|
||
<ai-title title="投票实况" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||
</template>
|
||
<template slot="content">
|
||
<ai-title title="本届任职" isShowBottomBorder></ai-title>
|
||
<div class="basicinfo-box">
|
||
<div><span>已投人数：</span><span>{{ data.alreadyCount || 0 }}</span></div>
|
||
<div><span>未投人数：</span><span>{{ data.notYetCount || 0 }}</span></div>
|
||
<div><span>日期：</span><span>{{ data.dateTime || '' }}</span></div>
|
||
</div>
|
||
|
||
<ai-title title="候选人选票统计" isShowBottomBorder></ai-title>
|
||
|
||
<div class="echarts-box">
|
||
<div id="echarts-bar"></div>
|
||
<!-- <ai-empty class="empty"></ai-empty> -->
|
||
</div>
|
||
</template>
|
||
</ai-detail>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
name: "Statistics",
|
||
props: {
|
||
instance: Function,
|
||
dict: Object,
|
||
params: Object,
|
||
},
|
||
data() {
|
||
return {
|
||
data: {},
|
||
myChart: null,
|
||
}
|
||
},
|
||
created() {
|
||
this.getStatistics()
|
||
},
|
||
mounted() {
|
||
this.getStaBar()
|
||
},
|
||
methods: {
|
||
cancel (isRefresh) {
|
||
this.$emit('change', {
|
||
type: 'electionList',
|
||
isRefresh: !!isRefresh
|
||
})
|
||
},
|
||
getStatistics() {
|
||
this.instance.post(`/app/appgeneralelectioninfo/statistics?id=${this.params.id}`).then(res=> {
|
||
if(res?.data) {
|
||
this.data = res.data
|
||
this.statistics = res.data.statistics
|
||
let xData = res.data.statistics.map(e=> e.candidate_user_name)
|
||
let yData1 = res.data.statistics.map(e=> e.c1)
|
||
let yData2 = res.data.statistics.map(e=> e.c2)
|
||
let yData3 = res.data.statistics.map(e=> e.c3)
|
||
this.getStaBar(xData,yData1,yData2,yData3)
|
||
}
|
||
})
|
||
},
|
||
getStaBar(xData,yData1,yData2,yData3) {
|
||
let chartDom = document.getElementById('echarts-bar')
|
||
this.myChart = echarts.init(chartDom);
|
||
this.myChart.setOption({
|
||
dataZoom: [
|
||
{
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
},
|
||
],
|
||
legend: {
|
||
data: ['支持', '反对', '弃票']
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xData,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
alignTicks: true,
|
||
},
|
||
series: [ // 支持、反对、弃票
|
||
{
|
||
name: '支持',
|
||
data: yData1,
|
||
type: 'bar',
|
||
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
barWidth: 22,
|
||
barGap: '20%',
|
||
},
|
||
{
|
||
name: '反对',
|
||
data: yData2,
|
||
type: 'bar',
|
||
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
barWidth: 22,
|
||
barGap: '20%',
|
||
},
|
||
{
|
||
name: '弃票',
|
||
data: yData3,
|
||
type: 'bar',
|
||
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
barWidth: 22,
|
||
barGap: '20%',
|
||
}
|
||
]
|
||
})
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.Statistics {
|
||
.basicinfo-box {
|
||
display: flex;
|
||
margin: 20px 0;
|
||
div {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.echarts-box {
|
||
// width: 100%;
|
||
|
||
#echarts-bar {
|
||
width: 1200px;
|
||
height: 400px;
|
||
}
|
||
}
|
||
}
|
||
</style> |