314 lines
9.3 KiB
HTML
314 lines
9.3 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;
|
||
}
|
||
|
||
.el-date-editor .el-range-separator {
|
||
width: 15% !important;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
</style>
|
||
|
||
<div id="app" v-cloak>
|
||
<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="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>
|
||
|
||
<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="el-icon-medal"></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>
|
||
|
||
|
||
</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: ''
|
||
},
|
||
grxj: {
|
||
name: '工会工作先进工作者',
|
||
color: '#5B8FF9'
|
||
},
|
||
grjj: {
|
||
name: '工会工作积极分子',
|
||
color: '#5AD8A6'
|
||
},
|
||
jdhxj: {
|
||
name: '教代会工作先进单位',
|
||
color: '#6DC8EC'
|
||
},
|
||
gzxj: {
|
||
name: '工会工作先进单位',
|
||
color: "#E8684A"
|
||
}
|
||
},
|
||
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("/platfotm/ry/ryyear/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.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");
|
||
},
|
||
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>
|
||
<!--#
|
||
}
|
||
#--> |