1055 lines
42 KiB
HTML
1055 lines
42 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.top_block {
|
|
width: 100%;
|
|
padding: 20px 80px;
|
|
border-bottom: 10px solid rgb(240, 240, 240);
|
|
}
|
|
|
|
.tr {
|
|
text-align: right;
|
|
}
|
|
|
|
.tl {
|
|
text-align: left;
|
|
}
|
|
|
|
.top_title {
|
|
font-size: 14px;
|
|
color: #808492;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.fs18 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.fs26 {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.fs20 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
}
|
|
|
|
.none-data {
|
|
min-height: 300px;
|
|
background: url("/none.png") no-repeat center center;
|
|
background-size: 360px 260px;
|
|
}
|
|
|
|
.none-data-title {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
bottom: 20%;
|
|
left: 0;
|
|
color: rgb(160, 160, 160);
|
|
}
|
|
|
|
.item-title {
|
|
color: rgb(160, 160, 160);
|
|
}
|
|
|
|
.item-content {
|
|
color: rgb(100, 100, 100);
|
|
}
|
|
|
|
.mb20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.top_num {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.cut-off-line {
|
|
width: 1px;
|
|
height: 70%;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background-color: rgb(230, 230, 230);
|
|
}
|
|
|
|
.year input {
|
|
text-align: center;
|
|
}
|
|
|
|
.chartTitle {
|
|
font-size: 14px;
|
|
color: #808492;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
<div class="p10">
|
|
<el-card shadow="never">
|
|
<div class="top_block" v-loading="top_block_loading">
|
|
<el-row gutter="60">
|
|
<el-col :span="4" style="position: relative">
|
|
<div class="top_title">会员数</div>
|
|
<div class="top_num">{{numData.hy_num?numData.hy_num:'0'}}</div>
|
|
<div class="cut-off-line"></div>
|
|
</el-col>
|
|
<el-col :span="4" style="position: relative">
|
|
<div class="top_title">分工会数</div>
|
|
<div class="top_num">{{numData.fgh_num?numData.fgh_num:'0'}}</div>
|
|
<div class="cut-off-line"></div>
|
|
</el-col>
|
|
<el-col :span="4" style="position: relative">
|
|
<div class="top_title">社团数</div>
|
|
<div class="top_num">{{numData.st_num?numData.st_num:'0'}}</div>
|
|
<div class="cut-off-line"></div>
|
|
</el-col>
|
|
<el-col :span="4" style="position: relative">
|
|
<div class="top_title">校工会活动数
|
|
<el-popover
|
|
placement="top-start"
|
|
title=""
|
|
width="200"
|
|
trigger="hover"
|
|
content="正在进行的活动数量">
|
|
<i style="color: #409EFF" slot="reference" class="el-icon-question"></i>
|
|
</el-popover>
|
|
</div>
|
|
|
|
<div class="top_num">{{numData.xhd_num?numData.xhd_num:'0'}}</div>
|
|
<div class="cut-off-line"></div>
|
|
</el-col>
|
|
<el-col :span="4" style="position: relative">
|
|
<div class="top_title">分工会活动数
|
|
<el-popover
|
|
placement="top-start"
|
|
title=""
|
|
width="200"
|
|
trigger="hover"
|
|
content="正在进行的活动数量">
|
|
<i style="color: #409EFF" slot="reference" class="el-icon-question"></i>
|
|
</el-popover>
|
|
</div>
|
|
|
|
<div class="top_num">{{numData.fhhd_num?numData.fhhd_num:'0'}}</div>
|
|
<div class="cut-off-line"></div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="top_title">社团活动数
|
|
<el-popover
|
|
placement="top-start"
|
|
title=""
|
|
width="200"
|
|
trigger="hover"
|
|
content="正在进行的活动数量">
|
|
<i style="color: #409EFF" slot="reference" class="el-icon-question"></i>
|
|
</el-popover>
|
|
</div>
|
|
|
|
<div class="top_num">{{numData.sthd_num?numData.sthd_num:'0'}}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-row style="padding: 30px 0;">
|
|
<el-col :span="12" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px;position: relative"
|
|
v-loading="hysex_loading">
|
|
<div class="chartTitle">会员性别占比</div>
|
|
<div id="hySexChart" style="width: 100%;height: 280px;"></div>
|
|
</el-col>
|
|
<el-col :span="12" style="padding: 0 20px;position: relative"
|
|
v-loading="hdtype_loading">
|
|
<div class="chartTitle">活动类型占比</div>
|
|
<div id="hyTypeChart" style="width: 100%;height: 280px;"></div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
|
<div style="position: absolute;top: 25px;right: 40px">
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="hyhdjfyear.startYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="if(hyhdjfyear.endYear){drawHyYearNum();drawHdJfNum();}"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
-
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="hyhdjfyear.endYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="if(hyhdjfyear.startYear){drawHyYearNum();drawHdJfNum();}"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
<el-col :span="12" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px"
|
|
v-loading="hyyearnum_loading">
|
|
<div class="chartTitle" style="margin-bottom: 50px">会员增长趋势</div>
|
|
<div id="hyYearNumChart" style="width: 100%;height: 300px; "></div>
|
|
</el-col>
|
|
<el-col :span="12" style="padding: 0 20px"
|
|
v-loading="hdjf_loading">
|
|
<div class="chartTitle">年度活动经费</div>
|
|
<div id="hdJfChart" style="width: 100%;height: 330px;"></div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row style="padding: 30px 0;">
|
|
<div style="position: absolute;top: 25px;right: 40px">
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="zgfwknbfyear.startYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="if(zgfwknbfyear.endYear){drawZgwwNum();drawZgwwMoney();drawKnbfNum();drawKnbfMoney()}"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
-
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="zgfwknbfyear.endYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="if(zgfwknbfyear.startYear){drawZgwwNum();drawZgwwMoney();drawKnbfNum();drawKnbfMoney()}"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
|
|
<el-col :span="12" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px"
|
|
v-loading="zgwwnum_loading">
|
|
<div class="chartTitle" style="margin-bottom: 50px">职工慰问申请趋势</div>
|
|
<div id="zgwwNumChart" style="width: 100%;height: 300px;"></div>
|
|
</el-col>
|
|
<el-col :span="12" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px"
|
|
v-loading="zgwwmoney_loading">
|
|
<div class="chartTitle" style="margin-bottom: 50px">职工慰问金额</div>
|
|
<div id="zgwwmoneyChart" style="width: 100%;height: 300px;"></div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
|
<el-col :span="24" style="padding: 0 20px"
|
|
v-loading="knbfnum_loading">
|
|
<div class="chartTitle" style="margin-bottom: 50px">困难帮扶申请趋势</div>
|
|
<div id="knbfNumChart" style="width: 100%;height: 300px;"></div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
|
<div style="position: absolute;top: 25px;right: 40px">
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="rxnumyear.startYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="if(hyhdjfyear.endYear){drawRxbmNum();}"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
-
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="rxnumyear.endYear"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy"
|
|
@change="if(hyhdjfyear.startYear){drawRxbmNum();}"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
<!-- <el-col :span="24" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px"-->
|
|
<!-- v-loading="rxnum_loading">-->
|
|
<!-- <div class="chartTitle" style="margin-bottom: 50px">教职工子女入学登记申请趋势</div>-->
|
|
<!-- <div id="rxnumChart" style="width: 100%;height: 300px;"></div>-->
|
|
<!-- </el-col>-->
|
|
</el-row>
|
|
|
|
<!-- <el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">-->
|
|
<!-- <div style="position: absolute;top: 25px;right: 40px">-->
|
|
<!-- <el-date-picker-->
|
|
<!-- class="year"-->
|
|
<!-- style="width: 120px;"-->
|
|
<!-- size="mini"-->
|
|
<!-- v-model="rxYear"-->
|
|
<!-- type="year" :clearable="false"-->
|
|
<!-- value-format="yyyy" @change="drawRxPie1Num();drawRxPie2Num();drawRxPie3Num()"-->
|
|
<!-- placeholder="选择年">-->
|
|
<!-- </el-date-picker>-->
|
|
<!-- </div>-->
|
|
<!-- <el-col :span="8" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px"-->
|
|
<!-- v-loading="rxPie1Loading">-->
|
|
<!-- <div class="chartTitle">{{rxYear}}年幼儿园申请班级占比</div>-->
|
|
<!-- <div id="rxPieChart1" style="width: 100%;height: 330px;"></div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px"-->
|
|
<!-- v-loading="rxPie2Loading">-->
|
|
<!-- <div class="chartTitle">{{rxYear}}年小学申请学校占比</div>-->
|
|
<!-- <div id="rxPieChart2" style="width: 100%;height: 330px;"></div>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8" style="padding: 0 20px"-->
|
|
<!-- v-loading="rxPie3Loading">-->
|
|
<!-- <div class="chartTitle">{{rxYear}}年初中申请学校占比</div>-->
|
|
<!-- <div id="rxPieChart3" style="width: 100%;height: 330px;"></div>-->
|
|
<!-- </el-col>-->
|
|
|
|
<!-- </el-row>-->
|
|
|
|
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)"
|
|
v-if="hasAllRole == 'true'">
|
|
<div style="position: absolute;top: 25px;right: 40px">
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="ghys_year"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy" @change="drawGhys"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
<el-col :span="24" style="padding: 0 20px"
|
|
v-loading="ghys_loading">
|
|
<div class="chartTitle" style="margin-bottom: 50px">{{ghys_year}}年工会经费使用情况</div>
|
|
<div id="ghysChart" style="width: 100%;height: 300px;"></div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
|
<div style="position: absolute;top: 25px;right: 40px">
|
|
<el-date-picker
|
|
class="year"
|
|
style="width: 120px;"
|
|
size="mini"
|
|
v-model="stys_year"
|
|
type="year" :clearable="false"
|
|
value-format="yyyy" @change="drawStys"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
<el-col :span="24" style="padding: 0 20px"
|
|
v-loading="stghys_loading">
|
|
<div class="chartTitle" style="margin-bottom: 50px">{{stys_year}}年工会经费使用情况</div>
|
|
<div id="stysChart" style="width: 100%;height: 300px;"></div>
|
|
</el-col>
|
|
|
|
<el-row v-if="stNone" class="none-data">
|
|
<span class="none-data-title">暂无社团</span>
|
|
</el-row>
|
|
</el-row>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: () => {
|
|
return {
|
|
hasAllRole: "${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')}",
|
|
top_block_loading: false,
|
|
hysex_loading: false,
|
|
hyyearnum_loading: false,
|
|
hdtype_loading: false,
|
|
hdjf_loading: false,
|
|
zgfwnum_loading: false,
|
|
zgfwmoney_loading: false,
|
|
ghys_loading: false,
|
|
stghys_loading: false,
|
|
zgwwnum_loading: false,
|
|
knbfnum_loading: false,
|
|
dbhznum_loading: false,
|
|
zgwwmoney_loading: false,
|
|
knbfmoney_loading: false,
|
|
dbhzmoney_loading: false,
|
|
rxnum_loading: false,
|
|
rxPie1Loading: false,
|
|
rxPie2Loading: false,
|
|
rxPie3Loading: false,
|
|
rxYear: new Date().getFullYear() + '',
|
|
stNone: false,
|
|
numData: {},
|
|
ghys_year: new Date().getFullYear() + '',
|
|
stys_year: new Date().getFullYear() + '',
|
|
dbhzyear: {
|
|
startYear: '2003',
|
|
endYear: new Date().getFullYear() + '',
|
|
},
|
|
zgfwknbfyear: {
|
|
startYear: new Date().getFullYear() - 4 + '',
|
|
endYear: new Date().getFullYear() + '',
|
|
},
|
|
hyhdjfyear: {
|
|
startYear: new Date().getFullYear() - 4 + '',
|
|
endYear: new Date().getFullYear() + '',
|
|
},
|
|
rxnumyear: {
|
|
startYear: new Date().getFullYear() - 4 + '',
|
|
endYear: new Date().getFullYear() + 4 + '',
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
drawHyNum() {
|
|
this.hysex_loading = true
|
|
$.get("/platform/caredata/union/getHyNumBySex", (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
const config = {
|
|
"legend": {
|
|
"flipPage": false
|
|
},
|
|
"label": {
|
|
"type": "spider",
|
|
"offset": 50
|
|
},
|
|
"width": $('#hySexChart').width(),
|
|
"height": $('#hySexChart').height(),
|
|
"forceFit": false,
|
|
"radius": 1,
|
|
"colorField": "name",
|
|
"angleField": "value",
|
|
"color": [
|
|
"#409EFF",
|
|
"#F56C6C"
|
|
],
|
|
meta: {
|
|
name: {
|
|
alias: '性别',
|
|
},
|
|
value: {
|
|
alias: '人数',
|
|
}
|
|
},
|
|
}
|
|
try {
|
|
const plot = new G2Plot.Pie("hySexChart", {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
this.hysex_loading = false
|
|
}, "json");
|
|
},
|
|
getNumData() {
|
|
this.top_block_loading = true
|
|
$.get("/platform/caredata/union/getNumData", (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
this.numData = data
|
|
}
|
|
this.top_block_loading = false
|
|
}, "json");
|
|
},
|
|
drawHyYearNum() {
|
|
this.hyyearnum_loading = true
|
|
$.get("/platform/caredata/union/getYearHyNum", this.hyhdjfyear, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
document.getElementById("hyYearNumChart").innerHTML = ''
|
|
const config = {
|
|
"legend": {
|
|
"position": "right-top",
|
|
"flipPage": false
|
|
},
|
|
"point": {
|
|
"visible": true
|
|
},
|
|
meta: {
|
|
year: {
|
|
alias: '年份',
|
|
},
|
|
num: {
|
|
alias: '人数',
|
|
}
|
|
},
|
|
"smooth": true,
|
|
"forceFit": true,
|
|
"xField": "year",
|
|
"yField": "num",
|
|
"color": [
|
|
"#5B8FF9"
|
|
],
|
|
animation: {
|
|
appear: {
|
|
animation: 'clipingWithData',
|
|
},
|
|
},
|
|
}
|
|
const plot = new G2Plot.Line("hyYearNumChart", {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
}
|
|
this.hyyearnum_loading = false
|
|
}, "json");
|
|
},
|
|
drawHdTypeNum() {
|
|
this.hdtype_loading = true
|
|
$.get("/platform/caredata/union/getHdTypeNum", (res) => {
|
|
if (res.code == 0) {
|
|
let {data} = res
|
|
|
|
const config = {
|
|
"legend": {
|
|
"flipPage": false
|
|
},
|
|
"label": {
|
|
"type": "spider",
|
|
"offset": 50
|
|
},
|
|
"width": $('#hyTypeChart').width(),
|
|
"height": $('#hyTypeChart').height(),
|
|
"forceFit": false,
|
|
"radius": 1,
|
|
"colorField": "type",
|
|
"angleField": "num",
|
|
meta: {
|
|
type: {
|
|
alias: '类别',
|
|
},
|
|
num: {
|
|
alias: '数量',
|
|
}
|
|
},
|
|
}
|
|
const plot = new G2Plot.Pie(document.getElementById("hyTypeChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.hdtype_loading = false
|
|
}, "json");
|
|
},
|
|
drawHdJfNum() {
|
|
this.hdjf_loading = true
|
|
$.get("/platform/caredata/union/getYearHdJF", this.hyhdjfyear, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("hdJfChart").innerHTML = ''
|
|
|
|
const config = {
|
|
isGroup: true,
|
|
"legend": {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
"autoFit": false,
|
|
"width": $('#hdJfChart').width(),
|
|
"height": $('#hdJfChart').height(),
|
|
"xField": "year",
|
|
"yField": "num",
|
|
"seriesField": "type",
|
|
}
|
|
|
|
const plot = new G2Plot.Column(document.getElementById("hdJfChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.hdjf_loading = false
|
|
}, "json");
|
|
},
|
|
drawGhys() {
|
|
this.ghys_loading = true
|
|
$.get("/platform/caredata/union/getGhys", {year: this.ghys_year}, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("ghysChart").innerHTML = ''
|
|
|
|
const config = {
|
|
isStack: true,
|
|
"legend": {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
autoFit: true,
|
|
title: {
|
|
visible: true,
|
|
text: this.ghys_year + '年工会经费使用情况',
|
|
},
|
|
description: {
|
|
visible: true,
|
|
text: '单位（元）',
|
|
},
|
|
xField: 'unionname',
|
|
yField: 'money',
|
|
stackField: 'type',
|
|
color: ["#5B8FF9", "#5AD8A6"],
|
|
"xAxis": {
|
|
label: {
|
|
formatter: (v) => {
|
|
if (data.length > 30 && v.length > 3) {
|
|
return v.substr(0, 2) + '...'
|
|
} else if (data.length > 20 && v.length > 4) {
|
|
return v.substr(0, 3) + '...'
|
|
} else if (data.length > 10 && v.length > 6) {
|
|
return v.substr(0, 5) + '...'
|
|
}
|
|
return v
|
|
}
|
|
}
|
|
},
|
|
"yAxis": {},
|
|
meta: {
|
|
unionname: {
|
|
alias: '工会',
|
|
},
|
|
money: {
|
|
alias: '金额',
|
|
}
|
|
},
|
|
connectedArea: {
|
|
visible: true,
|
|
triggerOn: false,
|
|
},
|
|
}
|
|
|
|
const plot = new G2Plot.Column(document.getElementById("ghysChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.ghys_loading = false
|
|
}, "json");
|
|
},
|
|
drawStys() {
|
|
this.stys_loading = true
|
|
$.get("/platform/caredata/union/getStys", {year: this.stys_year}, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("stysChart").innerHTML = ''
|
|
|
|
if (!data.length) {
|
|
this.stNone = true
|
|
}
|
|
|
|
const config = {
|
|
isStack: true,
|
|
"legend": {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
forceFit: true,
|
|
title: {
|
|
visible: true,
|
|
text: this.stys_year + '年社团经费使用情况',
|
|
},
|
|
description: {
|
|
visible: true,
|
|
text: '单位（元）',
|
|
},
|
|
xField: 'name',
|
|
yField: 'money',
|
|
stackField: 'type',
|
|
color: ["#5B8FF9", "#5AD8A6"],
|
|
"xAxis": {
|
|
label: {
|
|
formatter: (v) => {
|
|
if (data.length > 30 && v.length > 3) {
|
|
return v.substr(0, 2) + '...'
|
|
} else if (data.length > 20 && v.length > 4) {
|
|
return v.substr(0, 3) + '...'
|
|
} else if (data.length > 10 && v.length > 6) {
|
|
return v.substr(0, 5) + '...'
|
|
}
|
|
return v
|
|
}
|
|
}
|
|
},
|
|
"yAxis": {},
|
|
meta: {
|
|
name: {
|
|
alias: '社团',
|
|
},
|
|
money: {
|
|
alias: '金额',
|
|
}
|
|
},
|
|
connectedArea: {
|
|
visible: true,
|
|
triggerOn: false,
|
|
},
|
|
}
|
|
|
|
const plot = new G2Plot.Column(document.getElementById("stysChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
|
|
}
|
|
this.stys_loading = false
|
|
}, "json");
|
|
},
|
|
|
|
drawZgwwNum() {
|
|
this.zgwwnum_loading = true
|
|
$.get("/platform/caredata/union/getZgwwNumByYear", this.zgfwknbfyear, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("zgwwNumChart").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
"smooth": true,
|
|
"forceFit": true,
|
|
"xField": "year",
|
|
"yField": "value",
|
|
"color": [
|
|
"#5B8FF9",
|
|
],
|
|
|
|
meta: {
|
|
year: {
|
|
alias: '年份',
|
|
},
|
|
value: {
|
|
alias: '数量',
|
|
}
|
|
},
|
|
animation: {
|
|
appear: {
|
|
animation: 'clipingWithData',
|
|
},
|
|
},
|
|
"point": {
|
|
"visible": true
|
|
},
|
|
}
|
|
|
|
const plot = new G2Plot.Line("zgwwNumChart", {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.zgwwnum_loading = false
|
|
}, "json");
|
|
},
|
|
drawKnbfNum() {
|
|
this.knbfnum_loading = true
|
|
$.get("/platform/caredata/union/getKnbfNumByYear", this.zgfwknbfyear, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("knbfNumChart").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
"smooth": true,
|
|
"forceFit": true,
|
|
"xField": "year",
|
|
"yField": "value",
|
|
"color": [
|
|
"#5B8FF9",
|
|
],
|
|
meta: {
|
|
year: {
|
|
alias: '年份',
|
|
},
|
|
value: {
|
|
alias: '数量',
|
|
}
|
|
},
|
|
animation: {
|
|
appear: {
|
|
animation: 'clipingWithData',
|
|
},
|
|
},
|
|
"point": {
|
|
"visible": true
|
|
},
|
|
}
|
|
|
|
const plot = new G2Plot.Line(document.getElementById("knbfNumChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.knbfnum_loading = false
|
|
}, "json");
|
|
},
|
|
drawZgwwMoney() {
|
|
this.zgwwmoney_loading = true
|
|
$.get("/platform/caredata/union/getZgwwMoneyByYear", this.zgfwknbfyear, (res) => {
|
|
if (res.code == 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("zgwwmoneyChart").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"flipPage": false
|
|
},
|
|
"label": {
|
|
"visible": true
|
|
},
|
|
"forceFit": true,
|
|
"xField": "year",
|
|
"yField": "num",
|
|
"columnSize": null,
|
|
"color": [
|
|
"#5B8FF9"
|
|
],
|
|
meta: {
|
|
year: {
|
|
alias: '年份',
|
|
},
|
|
num: {
|
|
alias: '金额',
|
|
}
|
|
},
|
|
}
|
|
|
|
const plot = new G2Plot.Column(document.getElementById("zgwwmoneyChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.zgwwmoney_loading = false
|
|
}, "json");
|
|
},
|
|
|
|
drawRxbmNum() {
|
|
this.rxnum_loading = true
|
|
$.get("/platform/caredata/union/getRxbmCountByYear", this.rxnumyear, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("rxnumChart").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"position": "top-right",
|
|
"flipPage": false
|
|
},
|
|
"smooth": true,
|
|
"forceFit": true,
|
|
"xField": "year",
|
|
"yField": "num",
|
|
seriesField: 'type',
|
|
meta: {
|
|
year: {
|
|
alias: '年份',
|
|
},
|
|
num: {
|
|
alias: '次数',
|
|
}
|
|
},
|
|
animation: {
|
|
appear: {
|
|
animation: 'clipingWithData',
|
|
},
|
|
},
|
|
"point": {
|
|
"visible": true
|
|
},
|
|
}
|
|
|
|
const plot = new G2Plot.Line(document.getElementById("rxnumChart"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.rxnum_loading = false
|
|
}, "json");
|
|
},
|
|
drawRxPie1Num() {
|
|
this.rxPie1Loading = true
|
|
$.get("/platform/caredata/union/getRxnumYey", {year: this.rxYear}, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("rxPieChart1").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"visible": true,
|
|
"flipPage": false,
|
|
},
|
|
"label": {
|
|
"type": "spider",
|
|
},
|
|
"autoFit": true,
|
|
"radius": .7,
|
|
"colorField": "type",
|
|
"angleField": "num",
|
|
meta: {
|
|
type: {
|
|
alias: '班级',
|
|
},
|
|
num: {
|
|
alias: '数量',
|
|
}
|
|
},
|
|
}
|
|
const plot = new G2Plot.Pie(document.getElementById("rxPieChart1"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.rxPie1Loading = false
|
|
}, "json");
|
|
},
|
|
drawRxPie2Num() {
|
|
this.rxPie2Loading = true
|
|
$.get("/platform/caredata/union/getRxnumXx", {year: this.rxYear}, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("rxPieChart2").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"visible": true,
|
|
"flipPage": false,
|
|
},
|
|
"label": {
|
|
"type": "spider",
|
|
},
|
|
"autoFit": true,
|
|
"radius": .7,
|
|
"colorField": "type",
|
|
"angleField": "num",
|
|
meta: {
|
|
type: {
|
|
alias: '学校',
|
|
},
|
|
num: {
|
|
alias: '数量',
|
|
}
|
|
},
|
|
}
|
|
const plot = new G2Plot.Pie(document.getElementById("rxPieChart2"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.rxPie2Loading = false
|
|
}, "json");
|
|
},
|
|
drawRxPie3Num() {
|
|
this.rxPie3Loading = true
|
|
$.get("/platform/caredata/union/getRxnumCz", {year: this.rxYear}, (res) => {
|
|
if (res.code === 0) {
|
|
let {data} = res
|
|
|
|
document.getElementById("rxPieChart3").innerHTML = ''
|
|
|
|
const config = {
|
|
"legend": {
|
|
"visible": true,
|
|
"flipPage": false,
|
|
},
|
|
"autoFit": true,
|
|
"label": {
|
|
"type": "spider",
|
|
},
|
|
"radius": .7,
|
|
"colorField": "type",
|
|
"angleField": "num",
|
|
meta: {
|
|
type: {
|
|
alias: '学校',
|
|
},
|
|
num: {
|
|
alias: '数量',
|
|
}
|
|
},
|
|
}
|
|
const plot = new G2Plot.Pie(document.getElementById("rxPieChart3"), {
|
|
data,
|
|
...config,
|
|
});
|
|
plot.render();
|
|
|
|
}
|
|
this.rxPie3Loading = false
|
|
}, "json");
|
|
},
|
|
},
|
|
created: function () {
|
|
this.getNumData()
|
|
},
|
|
mounted: function () {
|
|
this.drawHyNum()
|
|
this.drawHyYearNum()
|
|
this.drawHdTypeNum()
|
|
this.drawHdJfNum()
|
|
if (this.hasAllRole === 'true') {
|
|
this.drawGhys()
|
|
}
|
|
this.drawStys()
|
|
this.drawZgwwNum()
|
|
this.drawKnbfNum()
|
|
this.drawZgwwMoney()
|
|
this.drawRxbmNum()
|
|
this.drawRxPie1Num()
|
|
this.drawRxPie2Num()
|
|
this.drawRxPie3Num()
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|