277 lines
10 KiB
HTML
277 lines
10 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.sickCountCard {
|
|
cursor: pointer;
|
|
transition: all linear 0.5s;
|
|
line-height: 2;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
min-width: 220px;
|
|
margin: 5px;
|
|
background-color: #0e78c5;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.sickCountCard .info-label {
|
|
font-size: 20px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sickCountCard .info-label::before {
|
|
content: '';
|
|
border-left: 3px solid #FFFFFF;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sickCountCard .info-num {
|
|
font-size: 35px;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<div style="min-width: 500px">
|
|
<el-row :gutter="20" ref="sickCountDom" style="flex-wrap: wrap;" type="flex">
|
|
<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
|
|
<div class="sickCountCard">
|
|
<div class="info-label">总补助次数</div>
|
|
<div class="info-num">{{sickCount.servedCount}}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
|
|
<div class="sickCountCard">
|
|
<div class="info-label">总补助教师人数</div>
|
|
<div class="info-num">{{sickCount.servedUserCount}}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
|
|
<div class="sickCountCard">
|
|
<div class="info-label">总补助金额</div>
|
|
<div class="info-num">{{sickCount.subsidyMoneySum}}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
|
|
<div class="sickCountCard">
|
|
<div class="info-label">当年补助金额</div>
|
|
<div class="info-num">{{sickCount.currentYearSubsidyMoneySum}}</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" :style="{height:chartRowHeight,position:'relative'}" class="mt20" id="chart-row">
|
|
<el-col :lg="12" :xs="24">
|
|
<el-card class="mb10" shadow="never">
|
|
<vi-title title="年度补助人数趋势"></vi-title>
|
|
<div :style="{height: chartHeight}" id="yearUser"></div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :lg="12" :xs="24">
|
|
<el-card class="mb10" shadow="never">
|
|
<vi-title title="年度补助金额趋势"></vi-title>
|
|
<div :style="{height: chartHeight}" id="yearSubsidyMoney"></div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</guava>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
let yearUserChart, yearSubsidyMoneyChart = null
|
|
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
return {
|
|
sickCount: {},
|
|
yearData: [],
|
|
chartRowHeight: null,
|
|
chartHeight: null
|
|
}
|
|
},
|
|
methods: {
|
|
async getSickCount() {
|
|
const resp = await $.get(loc() + '/getSickCountData')
|
|
this.sickCount = resp.data
|
|
},
|
|
async getYearCount() {
|
|
const resp = await $.get(loc() + '/getYearCountData')
|
|
this.yearData = resp.data
|
|
this.$nextTick(async () => {
|
|
await this.calcChartRowHeightHeight()
|
|
console.log('----')
|
|
this.renderYearUser()
|
|
this.renderYearSubsidyMoney()
|
|
})
|
|
},
|
|
renderYearUser() {
|
|
console.log('开始渲染')
|
|
const chartDom = document.getElementById('yearUser')
|
|
yearUserChart = echarts.init(chartDom)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
name: '年度',
|
|
type: 'category',
|
|
data: this.yearData.map(v => v.year)
|
|
},
|
|
yAxis: {
|
|
name: '补助人数（人）',
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: this.yearData.map(v => v.userCount),
|
|
type: 'bar',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
formatter: '{c}' + '人',
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
fontWeight: 'bolder',
|
|
fontSize: '15'
|
|
},
|
|
width: 30,
|
|
overflow: 'break'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
startValue: new Date().getFullYear() - 5,
|
|
endValue: new Date().getFullYear(),
|
|
textStyle: {
|
|
color: "#ccd7d7"
|
|
}
|
|
},
|
|
],
|
|
}
|
|
yearUserChart.setOption(option)
|
|
},
|
|
renderYearSubsidyMoney() {
|
|
const chartDom = document.getElementById('yearSubsidyMoney')
|
|
yearSubsidyMoneyChart = echarts.init(chartDom)
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
name: '年度',
|
|
type: 'category',
|
|
data: this.yearData.map(v => v.year)
|
|
},
|
|
yAxis: {
|
|
name: '补助金额（元）',
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: this.yearData.map(v => v.subsidyMoneySum),
|
|
type: 'bar',
|
|
barWidth: 30,
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
formatter: '{c}' + '元',
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
fontWeight: 'bolder',
|
|
fontSize: '15'
|
|
},
|
|
width: 80,
|
|
overflow: 'break'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
startValue: new Date().getFullYear() - 5,
|
|
endValue: new Date().getFullYear(),
|
|
textStyle: {
|
|
color: "#ccd7d7"
|
|
}
|
|
},
|
|
],
|
|
}
|
|
yearSubsidyMoneyChart.setOption(option)
|
|
},
|
|
calcChartRowHeightHeight() {
|
|
return new Promise(resolve => {
|
|
this.$nextTick(() => {
|
|
const top = document.getElementById('chart-row').getBoundingClientRect().top
|
|
this.chartRowHeight = (window.innerHeight - top - 10) + 'px'
|
|
this.chartHeight = (window.innerHeight - top - 10 - 20 - 20 - 50) + 'px'
|
|
console.log('高度获取完毕')
|
|
resolve()
|
|
})
|
|
})
|
|
},
|
|
onResize() {
|
|
window.onresize = async () => {
|
|
if (window.innerWidth < 1200) {
|
|
this.chartRowHeight = '720px'
|
|
this.chartHeight = '630px'
|
|
} else {
|
|
await this.calcChartRowHeightHeight()
|
|
}
|
|
yearUserChart.resize()
|
|
yearSubsidyMoneyChart.resize()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getSickCount()
|
|
this.getYearCount()
|
|
this.onResize()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|