first commit
This commit is contained in:
@@ -0,0 +1,526 @@
|
||||
<!--#
|
||||
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>
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user