526 lines
19 KiB
HTML
526 lines
19 KiB
HTML
<!--#
|
||
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 v-if="hasChangeUserRole=='true'">
|
||
<div class="btn-group tool-button">
|
||
<span style="font-weight: bold">查找用户：</span>
|
||
</div>
|
||
<div class="btn-group tool-button">
|
||
<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>
|
||
</div>
|
||
</template>
|
||
<!-- <div class="btn-group tool-button">-->
|
||
<!-- <el-date-picker-->
|
||
<!-- @change="queryAll"-->
|
||
<!-- v-model="dateRange"-->
|
||
<!-- type="daterange"-->
|
||
<!-- value-format="yyyy-MM-dd"-->
|
||
<!-- range-separator="至"-->
|
||
<!-- start-placeholder="开始日期"-->
|
||
<!-- end-placeholder="结束日期">-->
|
||
<!-- </el-date-picker>-->
|
||
<!-- <!– <el-button type="primary" @click="" icon="el-icon-search"></el-button>–>-->
|
||
<!-- </div>-->
|
||
<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"
|
||
@change="if(numYear.endYear){getNumByYear();}"
|
||
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"
|
||
@change="if(numYear.startYear){getNumByYear();}"
|
||
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>
|
||
var vue = new Vue({
|
||
el: '#app',
|
||
data: () => {
|
||
return {
|
||
hasChangeUserRole: "${@shiro.hasRole('sysadmin')||@shiro.hasRole('A06')||@shiro.hasRole('H04')}",
|
||
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
|
||
$.post("/platform/caredata/staff/getYearNumAndAllNum", {
|
||
userid: this.userid,
|
||
}, (res) => {
|
||
if (res.code == 0) {
|
||
let {data} = res
|
||
this.numData = data
|
||
}
|
||
this.top_block_loading = false
|
||
}, "json");
|
||
},
|
||
},
|
||
created: function () {
|
||
$.get("/platform/caredata/staff/initUser", (res) => {
|
||
if (res.code == 0) {
|
||
this.userOptions = [res.data]
|
||
this.userid = this.userOptions[0].id
|
||
this.userChange(this.userOptions[0].id)
|
||
}
|
||
}, "json");
|
||
},
|
||
mounted: function () {
|
||
|
||
}
|
||
})
|
||
</script>
|
||
<!--#
|
||
}
|
||
#--> |