Merge remote-tracking branch 'origin/main'
This commit is contained in:
@jyuhsin
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
+9
-9
@@ -69,7 +69,7 @@ layout("/layouts/platform.html"){
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<el-col :span="4" style="position: relative">
|
||||
<!--<el-col :span="4" style="position: relative">
|
||||
<div class="top_title">校工会活动总人数</div>
|
||||
<div class="top_num">{{numData.schoolSignNum?numData.schoolSignNum:'0'}}</div>
|
||||
<div class="cut-off-line"></div>
|
||||
@@ -83,22 +83,22 @@ layout("/layouts/platform.html"){
|
||||
<div class="top_title">协会活动总人数</div>
|
||||
<div class="top_num">{{numData.clubSignNum?numData.clubSignNum:'0'}}</div>
|
||||
<div class="cut-off-line"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" style="position: relative">
|
||||
</el-col>-->
|
||||
<el-col :span="8" style="position: relative">
|
||||
<div class="top_title">校工会活动报销费用（元）
|
||||
</div>
|
||||
|
||||
<div class="top_num">{{numData.schoolActivityMoney?numData.schoolActivityMoney:'0'}}</div>
|
||||
<div class="cut-off-line"></div>
|
||||
</el-col>
|
||||
<el-col :span="4" style="position: relative">
|
||||
<el-col :span="8" style="position: relative">
|
||||
<div class="top_title">分工会活动报销费用（元）
|
||||
</div>
|
||||
|
||||
<div class="top_num">{{numData.unionActivityMoney?numData.unionActivityMoney:'0'}}</div>
|
||||
<div class="cut-off-line"></div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-col :span="8">
|
||||
<div class="top_title">社团活动报销费用（元）
|
||||
</div>
|
||||
<div class="top_num">{{numData.clubActivityMoney?numData.clubActivityMoney:'0'}}</div>
|
||||
@@ -106,7 +106,7 @@ layout("/layouts/platform.html"){
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
||||
<!-- <el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
||||
<div style="position: absolute;top: 25px;right: 40px;z-index: 200">
|
||||
<el-date-picker
|
||||
class="year"
|
||||
@@ -140,7 +140,7 @@ layout("/layouts/platform.html"){
|
||||
<div class="chartTitle">活动类型占比</div>
|
||||
<div id="activityTypePieChart" style="width: 100%;height: 330px;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>-->
|
||||
|
||||
<el-row style="padding: 30px 0;border-bottom: 10px solid rgb(240, 240, 240)">
|
||||
<div style="position: absolute;top: 25px;right: 40px;z-index: 2000">
|
||||
@@ -558,8 +558,8 @@ layout("/layouts/platform.html"){
|
||||
},
|
||||
async mounted() {
|
||||
await this.getActivityJfChart()
|
||||
await this.getActivityTypeChart()
|
||||
await this.getActivityTypePieNum()
|
||||
// await this.getActivityTypeChart()
|
||||
// await this.getActivityTypePieNum()
|
||||
await this.getActivityJfPieNum()
|
||||
await this.allUnionActivityAndJf()
|
||||
await this.allClubActivityAndJf()
|
||||
|
||||
@@ -0,0 +1,509 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<style>
|
||||
.el-collapse-item__arrow {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.top_block {
|
||||
width: 100%;
|
||||
padding: 30px 80px;
|
||||
}
|
||||
|
||||
.tr {
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tl {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.top_title {
|
||||
font-size: 14px;
|
||||
color: #808492;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.item-type {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.el-collapse, .el-collapse-item__header, .el-collapse-item__wrap {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-collapse-item__content {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: rgb(180, 180, 180);
|
||||
}
|
||||
|
||||
.chartTitle {
|
||||
font-size: 14px;
|
||||
color: #808492;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<div class="p10">
|
||||
<el-card shadow="never">
|
||||
<el-row style="border-bottom: 10px solid rgb(240,240,240);padding: 20px;">
|
||||
<template>
|
||||
|
||||
<span style="font-weight: bold">查找用户：</span>
|
||||
<el-select
|
||||
style="width: 300px"
|
||||
v-model="userid"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="请输入姓名或工号进行查询"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="search_user_loading" @change="userChange">
|
||||
<el-option
|
||||
v-for="item in userOptions"
|
||||
:key="item.id"
|
||||
:label="item.username+'（'+item.loginname+'）'"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
<div class="pull-right offscreen-right mt5">
|
||||
<div class="btn-group tool-button mt5">
|
||||
<span style="font-weight: bold">{{user.sex?user.sex:''}}{{user.unitName?' / '+user.unitName:''}} {{user.unionName?' / '+user.unionName:''}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="top_block" style="border-bottom: 10px solid rgb(240,240,240);" v-loading="top_block_loading">
|
||||
<el-row style="height: 40px">
|
||||
<el-col :offset="4" class="tr" :span="3">
|
||||
<span class="top_title">职工慰问申请数</span>
|
||||
</el-col>
|
||||
<el-col :span="3" class="tr">
|
||||
<span class="top_title">困难帮扶申请数</span>
|
||||
</el-col>
|
||||
<el-col :span="3" class="tr">
|
||||
<span class="top_title">子女入学登记数</span>
|
||||
</el-col>
|
||||
<el-col :span="3" class="tr">
|
||||
<span class="top_title">撰写提案数</span>
|
||||
</el-col>
|
||||
<el-col :span="3" class="tr">
|
||||
<span class="top_title">参与活动数</span>
|
||||
</el-col>
|
||||
<el-col :span="3" class="tr">
|
||||
<span class="top_title">经费报销次数</span>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 60px;line-height: 60px">
|
||||
<el-col class="tl" :span="4">
|
||||
<span class="top_title">今年</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs26"
|
||||
style="color: #409EFF;">{{numData.now_year.zgww?numData.now_year.zgww:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs26"
|
||||
style="color: #409EFF;">{{numData.now_year.knbf?numData.now_year.knbf:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs26"
|
||||
style="color: #409EFF;">{{numData.now_year.znrx?numData.now_year.znrx:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs26" style="color: #409EFF;">{{numData.now_year.ta?numData.now_year.ta:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs26" style="color: #409EFF;">{{numData.now_year.hd?numData.now_year.hd:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs26"
|
||||
style="color: #409EFF;">{{numData.now_year.jfbx?numData.now_year.jfbx:0}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: 40px;line-height: 40px">
|
||||
<el-col class="tl" :span="4">
|
||||
<span class="top_title">全部</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs18">{{numData.all.zgww?numData.all.zgww:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs18">{{numData.all.knbf?numData.all.knbf:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs18">{{numData.all.znrx?numData.all.znrx:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs18">{{numData.all.ta?numData.all.ta:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs18">{{numData.all.hd?numData.all.hd:0}}</span>
|
||||
</el-col>
|
||||
<el-col class="tr" :span="3">
|
||||
<span class="fs18">{{numData.all.jfbx?numData.all.jfbx:0}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row style="height: 500px;border-bottom: 10px solid rgb(240,240,240);padding: 20px 30px;padding-top: 10px;"
|
||||
v-loading="chart_one_loading">
|
||||
<div style="position: absolute;top: 25px;right: 40px;z-index: 999">
|
||||
<el-date-picker
|
||||
class="year"
|
||||
style="width: 120px;"
|
||||
size="mini"
|
||||
v-model="numYear.startYear"
|
||||
type="year" :clearable="false"
|
||||
value-format="yyyy"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
-
|
||||
<el-date-picker
|
||||
class="year"
|
||||
style="width: 120px;"
|
||||
size="mini"
|
||||
v-model="numYear.endYear"
|
||||
type="year" :clearable="false"
|
||||
value-format="yyyy"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="chartTitle">职工动态曲线</div>
|
||||
<div id="chart_one" style="width: 100%;height:85%;margin-top: 40px"></div>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix" style="position: relative">
|
||||
<span class="title">职工动态时间线</span>
|
||||
<el-select v-model="type" @change="timeLine" placeholder="请选择" style="float: right; padding: 0;">
|
||||
<el-option v-for="(v,k) in typeObj" :key="k" :label="v.name" :value="k"></el-option>
|
||||
</el-select>
|
||||
<div style="float: right; padding: 0;margin-right: 10px">
|
||||
<el-date-picker
|
||||
@change="timeLine"
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text item" v-loading="timeline_loading">
|
||||
<el-timeline v-if="list.length">
|
||||
<el-timeline-item v-for="item in list" :color="typeObj[item.type]['color']"
|
||||
:timestamp="item.time"
|
||||
placement="top">
|
||||
<el-card shadow="hover">
|
||||
<el-collapse>
|
||||
<el-collapse-item name="1">
|
||||
<template slot="title">
|
||||
<div :style="'color:'+ typeObj[item.type].color">
|
||||
<i :class="typeObj[item.type].icon"></i> {{typeObj[item.type].name}}
|
||||
</div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
|
||||
<el-row v-else class="none-data">
|
||||
<span class="none-data-title">暂无数据</span>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
data: () => {
|
||||
return {
|
||||
dateRange: [],
|
||||
type: 'all',
|
||||
chart_one_loading: false,
|
||||
top_block_loading: false,
|
||||
search_user_loading: false,
|
||||
timeline_loading: false,
|
||||
userid: '',
|
||||
yearnum: 10,
|
||||
typeObj: {
|
||||
all: {
|
||||
name: '全部',
|
||||
color: ''
|
||||
},
|
||||
zgww: {
|
||||
name: '职工慰问',
|
||||
color: '#5B8FF9',
|
||||
icon: 'fa fa-bed'
|
||||
},
|
||||
knbf: {
|
||||
name: '困难帮扶',
|
||||
color: '#5AD8A6',
|
||||
icon: 'fa fa-handshake-o'
|
||||
},
|
||||
znrx: {
|
||||
name: '子女入学',
|
||||
color: '#F6BD16',
|
||||
icon: 'fa fa-graduation-cap'
|
||||
},
|
||||
ta: {
|
||||
name: '撰写提案',
|
||||
color: "#E8684A",
|
||||
icon: 'fa fa-lightbulb-o'
|
||||
},
|
||||
xhd: {
|
||||
name: '校工会活动',
|
||||
color: "#6DC8EC",
|
||||
icon: 'el-icon-basketball'
|
||||
},
|
||||
fhhd: {
|
||||
name: '分工会活动',
|
||||
color: "#6DC8EC",
|
||||
icon: 'el-icon-basketball'
|
||||
},
|
||||
sthd: {
|
||||
name: '社团活动',
|
||||
color: "#6DC8EC",
|
||||
icon: 'el-icon-basketball'
|
||||
},
|
||||
yybx: {
|
||||
name: '经费报销',
|
||||
color: "#9270CA",
|
||||
icon: 'fa fa-money'
|
||||
},
|
||||
},
|
||||
numData: {
|
||||
now_year: {},
|
||||
all: {},
|
||||
},
|
||||
userOptions: [],
|
||||
user: {},
|
||||
list: [],
|
||||
desc: true,
|
||||
numYear: {
|
||||
startYear: new Date().getFullYear() - 9 + '',
|
||||
endYear: new Date().getFullYear() + '',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
timeLine() {
|
||||
this.timeline_loading = true
|
||||
$.post("/platform/careData/staff/timeLine", {
|
||||
userid: this.userid,
|
||||
type: this.type,
|
||||
desc: this.desc,
|
||||
startTime: this.dateRange && this.dateRange.length ? this.dateRange[0] : '',
|
||||
endTime: this.dateRange && this.dateRange.length ? this.dateRange[1] : '',
|
||||
}, (res) => {
|
||||
if (res.code == 0) {
|
||||
let {data} = res
|
||||
this.list = data
|
||||
}
|
||||
this.timeline_loading = false
|
||||
}, "json");
|
||||
},
|
||||
userChange(id) {
|
||||
this.queryAll()
|
||||
this.user = this.userOptions.find(v => v.id == id)
|
||||
},
|
||||
queryAll() {
|
||||
this.getNumByYear()
|
||||
this.getYearNumAndAllNum()
|
||||
this.timeLine()
|
||||
},
|
||||
remoteMethod(str) {
|
||||
this.search_user_loading = true
|
||||
$.get("/platform/careData/staff/queryUser", {
|
||||
key: str,
|
||||
}, (res) => {
|
||||
if (res.code == 0) {
|
||||
let {list} = res.data
|
||||
this.userOptions = list
|
||||
}
|
||||
this.search_user_loading = false
|
||||
}, "json");
|
||||
},
|
||||
getNumByYear() {
|
||||
this.chart_one_loading = true
|
||||
|
||||
let container = document.getElementById('chart_one');
|
||||
container.innerHTML = ''
|
||||
|
||||
const config = {
|
||||
"title": {
|
||||
"visible": true,
|
||||
"text": "职工动态曲线"
|
||||
},
|
||||
"description": {
|
||||
"visible": true,
|
||||
"text": "单位（条）"
|
||||
},
|
||||
"legend": {
|
||||
"position": "top-right",
|
||||
"flipPage": false
|
||||
},
|
||||
"point": {
|
||||
"visible": true
|
||||
},
|
||||
"smooth": true,
|
||||
"forceFit": false,
|
||||
"width": $('#chart_one').width(),
|
||||
"height": $('#chart_one').height(),
|
||||
"xField": "year",
|
||||
"yField": "value",
|
||||
"stackField": "type",
|
||||
|
||||
}
|
||||
let plot
|
||||
|
||||
if (this.userid) {
|
||||
$.post("/platform/careData/staff/getNumByYear", {
|
||||
userid: this.userid,
|
||||
yearnum: this.yearnum,
|
||||
startYear: this.numYear.startYear,
|
||||
endYear: this.numYear.endYear,
|
||||
}, (res) => {
|
||||
if (res.code == 0) {
|
||||
let {data} = res
|
||||
|
||||
plot = new G2Plot.Area(container, {
|
||||
data,
|
||||
...config,
|
||||
});
|
||||
|
||||
plot.render();
|
||||
|
||||
this.chart_one_loading = false
|
||||
}
|
||||
}, "json");
|
||||
} else {
|
||||
let data = []
|
||||
let year = new Date().getFullYear()
|
||||
for (let i = year - this.yearnum + 1; i <= year; i++) {
|
||||
for (let k in this.typeObj) {
|
||||
data.push({
|
||||
type: this.typeObj[k]['name'],
|
||||
value: 0,
|
||||
year: i
|
||||
})
|
||||
}
|
||||
}
|
||||
plot = new G2Plot.StackArea(container, {data, ...config,});
|
||||
plot.render();
|
||||
this.chart_one_loading = false
|
||||
}
|
||||
},
|
||||
getYearNumAndAllNum() {
|
||||
this.top_block_loading = true
|
||||
this.$axios.post('/platform/careData/staff/getYearNumAndAllNum',{userid: this.userid,}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.numData = res.data
|
||||
this.top_block_loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$axios.post('/platform/careData/staff/initUser').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.userOptions = [res.data]
|
||||
this.userid = this.userOptions[0].id
|
||||
this.userChange(this.userOptions[0].id)
|
||||
}
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,462 @@
|
||||
<!--#
|
||||
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">
|
||||
<el-row :gutter="60">
|
||||
<el-col :span="8" 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="8" 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="8" 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-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">
|
||||
<div class="chartTitle">会员性别占比</div>
|
||||
<div id="memberSexChart" style="width: 100%;height: 280px;"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px;position: relative">
|
||||
<div class="chartTitle">年度经费</div>
|
||||
<div id="activityBudgetColumn" style="width: 100%;height: 280px;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="padding: 30px 0;">
|
||||
<el-col :span="24" style="border-right: 1px solid rgb(230,230,230);padding: 0 20px;position: relative">
|
||||
<div class="chartTitle">困难帮扶申请趋势</div>
|
||||
<div id="difficultHelpNumLine" 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;z-index: 999">
|
||||
<el-date-picker
|
||||
class="year"
|
||||
style="width: 120px;"
|
||||
size="mini"
|
||||
v-model="allUnionYear"
|
||||
type="year" :clearable="false"
|
||||
value-format="yyyy" @change="allUnionActivityAndJf"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<el-col :span="24" style="padding: 0 20px"
|
||||
v-loading="all_union_loading">
|
||||
<div class="chartTitle" style="margin-bottom: 50px">{{allUnionYear}}年工会报销费用及活动情况
|
||||
<el-tooltip class="item" effect="dark" :content="'点击切换为' + unionTip " placement="top">
|
||||
<el-button type="text" icon="el-icon-sort" @click="doUnionSwitch"></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div id="allUnionChart" 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;z-index: 999">
|
||||
<el-date-picker
|
||||
class="year"
|
||||
style="width: 120px;"
|
||||
size="mini"
|
||||
v-model="allClubYear"
|
||||
type="year" :clearable="false"
|
||||
value-format="yyyy" @change="allClubActivityAndJf"
|
||||
placeholder="选择年">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<el-col :span="24" style="padding: 0 20px"
|
||||
v-loading="all_club_loading">
|
||||
<div class="chartTitle" style="margin-bottom: 50px">{{allClubYear}}年社团报销费用及活动情况
|
||||
<el-tooltip class="item" effect="dark" :content="'点击切换为' + clubTip " placement="top">
|
||||
<el-button type="text" icon="el-icon-sort" @click="doClubSwitch"></el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div id="allClubChart" style="width: 100%;height: 300px;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script nonce="${cspNonce!}">
|
||||
let memberSexChart, activityBudgetColumn, difficultHelpNumLine = null
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
numData: {},
|
||||
|
||||
|
||||
all_club_loading: false,
|
||||
clubTip:'协会活动数',
|
||||
allClubYear: moment().format('YYYY'),
|
||||
isClubJf:true,
|
||||
|
||||
all_union_loading: false,
|
||||
unionTip:'分工会活动数',
|
||||
allUnionYear: moment().format('YYYY'),
|
||||
isUnionJf:true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNumData() {
|
||||
this.$axios.post("/platform/caredata/union/getNumData").then(resp => {
|
||||
if (resp.code === 0) {
|
||||
this.numData = resp.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 会员性别统计图
|
||||
memberSexNum() {
|
||||
this.$axios.post("/platform/caredata/union/getHyNumBySex").then(resp => {
|
||||
if (resp.code === 0) {
|
||||
// 初始化饼图
|
||||
memberSexChart && memberSexChart.destroy()
|
||||
memberSexChart = new G2Plot.Pie("memberSexChart", {
|
||||
data: resp.data,
|
||||
angleField: "value",
|
||||
colorField: "name",
|
||||
radius: 0.8,
|
||||
label: {
|
||||
type: "性别",
|
||||
content: "{name}"
|
||||
}
|
||||
})
|
||||
memberSexChart.render()
|
||||
}
|
||||
})
|
||||
},
|
||||
//年度经费统计
|
||||
activityBudget() {
|
||||
this.$axios.post(loc() + "/getActivityBudget", this.pageForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
if (activityBudgetColumn) {
|
||||
activityBudgetColumn.changeData(res.data)
|
||||
return
|
||||
}
|
||||
activityBudgetColumn = new G2Plot.Column("activityBudgetColumn", {
|
||||
data: res.data,
|
||||
xField: "year",
|
||||
yField: "value",
|
||||
seriesField: "type",
|
||||
isGroup: true,
|
||||
columnStyle: {
|
||||
radius: [20, 20, 0, 0],
|
||||
},
|
||||
})
|
||||
activityBudgetColumn.render()
|
||||
}
|
||||
})
|
||||
},
|
||||
//困难帮扶申请趋势
|
||||
getDifficultHelpNum() {
|
||||
this.$axios.post(loc() + "/getDifficultHelpNum", this.pageForm).then((res) => {
|
||||
if (res.code === 0) {
|
||||
if (difficultHelpNumLine) {
|
||||
difficultHelpNumLine.changeData(res.data)
|
||||
return
|
||||
}
|
||||
difficultHelpNumLine = new G2Plot.Line("difficultHelpNumLine", {
|
||||
data: res.data,
|
||||
xField: 'year',
|
||||
yField: 'value',
|
||||
meta: {
|
||||
year: {
|
||||
alias: '年份',
|
||||
},
|
||||
value: {
|
||||
alias: '数量',
|
||||
}
|
||||
},
|
||||
point: {
|
||||
size: 5,
|
||||
shape: 'diamond',
|
||||
style: {
|
||||
fill: 'white',
|
||||
stroke: '#5B8FF9',
|
||||
lineWidth: 2,
|
||||
},
|
||||
},
|
||||
tooltip: {showMarkers: false},
|
||||
state: {
|
||||
active: {
|
||||
style: {
|
||||
shadowBlur: 4,
|
||||
stroke: '#000',
|
||||
fill: 'red',
|
||||
},
|
||||
},
|
||||
},
|
||||
interactions: [{type: 'marker-active'}],
|
||||
})
|
||||
difficultHelpNumLine.render()
|
||||
}
|
||||
})
|
||||
},
|
||||
//社团报销费用及活动情况
|
||||
async doClubSwitch(){
|
||||
this.isClubJf = !this.isClubJf
|
||||
this.clubTip = this.isClubJf ? '协会活动数' : '协会经费详情'
|
||||
await this.allClubActivityAndJf();
|
||||
},
|
||||
async allClubActivityAndJf(){
|
||||
this.all_club_loading = true
|
||||
const resp = await this.$axios.post("/platform/activityReimbursement/board/allClubActivityAndMoney",{
|
||||
year:this.allClubYear,
|
||||
isClubMoney:this.isClubJf
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
let {data} = resp
|
||||
document.getElementById("allClubChart").innerHTML = ''
|
||||
const config = {
|
||||
isStack: true,
|
||||
"legend": {
|
||||
"position": "top-right",
|
||||
"flipPage": false
|
||||
},
|
||||
autoFit: true,
|
||||
title: {
|
||||
visible: true,
|
||||
text: this.allClubYear + '年工会经费及活动详情',
|
||||
},
|
||||
description: {
|
||||
visible: true,
|
||||
text: '单位（元）',
|
||||
},
|
||||
xField: 'clubName',
|
||||
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: {
|
||||
clubName: {
|
||||
alias: '协会',
|
||||
},
|
||||
money: {
|
||||
alias: this.isClubJf?'金额':'活动数',
|
||||
}
|
||||
},
|
||||
connectedArea: {
|
||||
visible: true,
|
||||
triggerOn: false,
|
||||
},
|
||||
}
|
||||
const plot = new G2Plot.Column(document.getElementById("allClubChart"), {
|
||||
data,
|
||||
...config,
|
||||
});
|
||||
plot.render();
|
||||
}
|
||||
this.all_club_loading = false
|
||||
},
|
||||
//部门报销费用和活动情况
|
||||
async doUnionSwitch(){
|
||||
this.isUnionJf = !this.isUnionJf
|
||||
this.unionTip = this.isUnionJf ? '分工会活动数' : '分工会经费详情'
|
||||
await this.allUnionActivityAndJf();
|
||||
},
|
||||
async allUnionActivityAndJf() {
|
||||
this.all_union_loading = true
|
||||
const resp = await this.$axios.post("/platform/activityReimbursement/board/allUnionActivityAndMoney",{
|
||||
year:this.allUnionYear,
|
||||
isUnionMoney:this.isUnionJf
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
let {data} = resp
|
||||
document.getElementById("allUnionChart").innerHTML = ''
|
||||
const config = {
|
||||
isStack: true,
|
||||
"legend": {
|
||||
"position": "top-right",
|
||||
"flipPage": false
|
||||
},
|
||||
autoFit: true,
|
||||
title: {
|
||||
visible: true,
|
||||
text: this.allUnionYear + '年工会经费及活动详情',
|
||||
},
|
||||
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: this.isUnionJf?'金额':'活动数',
|
||||
}
|
||||
},
|
||||
connectedArea: {
|
||||
visible: true,
|
||||
triggerOn: false,
|
||||
},
|
||||
}
|
||||
const plot = new G2Plot.Column(document.getElementById("allUnionChart"), {
|
||||
data,
|
||||
...config,
|
||||
});
|
||||
plot.render();
|
||||
}
|
||||
this.all_union_loading = false
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getNumData()
|
||||
this.memberSexNum()
|
||||
this.activityBudget()
|
||||
this.getDifficultHelpNum()
|
||||
this.allClubActivityAndJf()
|
||||
this.allUnionActivityAndJf()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user