first commit
This commit is contained in:
@@ -0,0 +1,276 @@
|
||||
<!--#
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user