649 lines
24 KiB
HTML
649 lines
24 KiB
HTML
<!--#
|
||
layout("/layouts/platform.html"){
|
||
#-->
|
||
<style>
|
||
#app {
|
||
background-color: rgb(245, 245, 245);
|
||
padding: 20px;
|
||
}
|
||
|
||
.el-col {
|
||
position: relative;
|
||
}
|
||
|
||
.header-welcome {
|
||
height: auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.header-item {
|
||
line-height: 20px;
|
||
background-color: white;
|
||
border-radius: 7px;
|
||
padding: 10px 15px 0;
|
||
position: relative;
|
||
transition: all 500ms;
|
||
cursor: pointer;
|
||
margin-top: 25px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
|
||
}
|
||
|
||
.header-item-title {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.header-item-num {
|
||
height: 60px;
|
||
line-height: 70px;
|
||
font-size: 28px;
|
||
color: #409EFF
|
||
}
|
||
|
||
.header-item-label {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 14px;
|
||
color: rgb(180, 180, 180);
|
||
width: 100%;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.header-item:hover {
|
||
box-shadow: 0 0 20px rgb(220, 220, 220);
|
||
}
|
||
|
||
.header-item-icon {
|
||
position: absolute;
|
||
height: 60px;
|
||
width: 60px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
right: 10px;
|
||
top: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.header-item-icon .fa {
|
||
font-size: 46px;
|
||
color: #409EFF;
|
||
}
|
||
|
||
.v-header .el-col {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.v-item {
|
||
border-radius: 7px;
|
||
background-color: white;
|
||
min-height: 100%;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.v-item-title {
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
font-size: 14px;
|
||
color: rgb(120, 120, 120);
|
||
}
|
||
|
||
.v-item-col {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 140px;
|
||
}
|
||
|
||
.v-item-handle {
|
||
width: 120px;
|
||
height: 120px;
|
||
background-color: rgb(248, 248, 248);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
transition: all 500ms;
|
||
color: #0779e4;
|
||
cursor: pointer;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.v-item-handle .fa {
|
||
font-size: 66px;
|
||
color: #0779e4;
|
||
transition: all 500ms;
|
||
}
|
||
|
||
.v-item-handle-label {
|
||
font-size: 14px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.v-item-handle:hover {
|
||
background-color: #0779e4;
|
||
color: white !important;
|
||
}
|
||
|
||
.v-item-handle:hover .fa {
|
||
color: white !important;
|
||
}
|
||
|
||
.v-item-handle span {
|
||
transition: all 500ms;
|
||
}
|
||
|
||
.v-item-handle:hover span {
|
||
color: white !important;
|
||
}
|
||
|
||
.el-carousel__button {
|
||
background-color: #c8c8cc !important;
|
||
opacity: .24;
|
||
}
|
||
|
||
.user-info-label {
|
||
font-size: 14px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
color: rgb(120, 120, 120);
|
||
}
|
||
|
||
.user-info-val {
|
||
font-size: 14px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
color: #409EFF;
|
||
}
|
||
|
||
|
||
.el-calendar-table .current {
|
||
height: 5px !important;
|
||
}
|
||
|
||
#calendar .el-calendar-table .el-calendar-day {
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
height: calc(((1080px - 100vh) / 1080) * 40 + 45px);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.el-calendar__body {
|
||
padding: 0;
|
||
}
|
||
|
||
.el-calendar__header {
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: none;
|
||
-webkit-box-pack: justify;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
padding: 12px 20px;
|
||
border-bottom: 1px solid #EBEEF5;
|
||
}
|
||
|
||
#bgrl .el-calendar-table .current {
|
||
height: 120px !important;
|
||
}
|
||
|
||
.none {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column
|
||
}
|
||
|
||
.none .none_title {
|
||
margin-top: -40px;
|
||
font-size: 14px;
|
||
color: rgb(160, 160, 160);
|
||
}
|
||
|
||
.avatar {
|
||
position: absolute;
|
||
right: 9.55vw;
|
||
top: 70px;
|
||
width: 6vw;
|
||
height: 6vw;
|
||
}
|
||
|
||
</style>
|
||
<div id="app" v-cloak>
|
||
|
||
|
||
<transition name="el-zoom-in-center">
|
||
<div v-show="v=='index'" style="width: 100%;">
|
||
|
||
<!-- <el-row :gutter="15" class="v-header">-->
|
||
<!-- <el-col :span="24">-->
|
||
<!-- <div class="header-welcome">-->
|
||
<!-- <img src="/nuaa_logo.gif" width="100%" height="100%">-->
|
||
<!-- </div>-->
|
||
<!-- </el-col>-->
|
||
<!-- </el-row>-->
|
||
|
||
<el-row :gutter="15" type="flex" style=" align-items: stretch; ">
|
||
<el-col :span="16">
|
||
<div class="v-item">
|
||
<!--1${obj.csrf_token!}-->
|
||
<div class="v-item-title">快速入口</div>
|
||
<el-carousel v-if="handleItems.length" :autoplay="false" :height="handleHeight">
|
||
<el-carousel-item v-for="index in Math.ceil(handleItems.length/12)" :key="index">
|
||
<el-row style="padding: 0" id="handle">
|
||
<el-col v-for="v in handleItems.slice((index-1)*12,index*12)" :sm="{span:8}"
|
||
:md="{span:8}"
|
||
:lg="{span:6}"
|
||
:xl="{span:4}"
|
||
class="v-item-col">
|
||
<div class="v-item-handle" @click="location.href=v.href">
|
||
<img :src="CREATE_PREVIEW_URL(v.iconClass)" style="width: 80px; height: 70px"/>
|
||
<span class="v-item-handle-label"
|
||
:style="'color: '+v.color"
|
||
>{{ v.name }}</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div class="none" v-else>
|
||
<img class="none_img" src="/none.png">
|
||
<div class="none_title">暂无快速入口</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="9">
|
||
<div class="v-item" id="calendar">
|
||
<div class="v-item-title">日历</div>
|
||
<el-calendar>
|
||
<template slot="dateCell" slot-scope="{date, data}">
|
||
<p :class="data.isSelected ? 'is-selected' : ''" @click="v = 'calendar'">
|
||
{{ data.day.split('-').slice(1)[1] }}
|
||
<br/>
|
||
<span style="display: flex;justify-content: center">
|
||
<i v-for="item in noticeData"
|
||
v-if="data.day.toString()==moment(item.startTime).format('YYYY-MM-DD')"
|
||
style="color: #20A0FF;margin-right: 5px"
|
||
class="fa fa-dot-circle-o"></i>
|
||
</span>
|
||
</p>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="15" type="flex" style=" align-items: stretch;margin-top: 15px ">
|
||
<el-col :span="16">
|
||
<div class="v-item">
|
||
<div class="v-item-title">待办事项</div>
|
||
|
||
<el-carousel v-if="needItems.length" :autoplay="false" :height="needHeight">
|
||
<el-carousel-item v-for="index in Math.ceil(needItems.length/12)" :key="index">
|
||
<el-row style="padding:0 10px" id="need">
|
||
<el-col style="padding: 0 12px"
|
||
v-for="item in needItems.slice((index-1)*12,index*12)"
|
||
:xs="{span:12}" :sm="{span:12}" :md="{span:12}" :lg="{span:6}"
|
||
:xl="{span:6}">
|
||
<div class="header-item" @click="location.href=item.url">
|
||
<div class="header-item-title">{{item.title}}</div>
|
||
<div class="header-item-num">{{item.number}}</div>
|
||
<div class="header-item-label">{{item.label}}</div>
|
||
<div class="header-item-icon">
|
||
<i :class="item.iconClass" aria-hidden="true"></i>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
|
||
<div class="none" v-else>
|
||
<img class="none_img" src="/none.png">
|
||
<div class="none_title">暂无待办事项</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<div class="v-item" style="padding-bottom: 15px;">
|
||
<div class="v-item-title">个人信息</div>
|
||
|
||
<div style="height: 40px;line-height: 40px;font-weight: bolder;color: #409EFF;font-size: 16px;margin-top: 40px">
|
||
<span>${@shiro.getPrincipalProperty('username')}（${@shiro.getPrincipalProperty('sex')}）</span>
|
||
</div>
|
||
|
||
<div style="height: 40px;line-height: 30px;color: rgb(180,180,180)">
|
||
<span>
|
||
<!--#if(@shiro.getPrincipalProperty('unit')!=null){#-->
|
||
${@shiro.getPrincipalProperty('unit').getName()}
|
||
<!--#}else{#-->
|
||
暂无单位信息
|
||
<!--#}#-->
|
||
</span>
|
||
</div>
|
||
|
||
<el-image
|
||
class="avatar"
|
||
:src="avatar"
|
||
fit="cover">
|
||
<div slot="error" class="image-slot" style="width: 100%;height: 100%">
|
||
<div class="el-image__error">暂无照片</div>
|
||
</div>
|
||
</el-image>
|
||
|
||
<!-- <el-avatar shape="circle " :size="100" fit="cover" :src="avatar"></el-avatar>-->
|
||
|
||
<el-row style="margin-top: 60px">
|
||
<el-col :span="12">
|
||
<span class="user-info-label">工  号：</span>
|
||
<span class="user-info-val">${@shiro.getPrincipalProperty('loginname')}</span>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<span class="user-info-label">工  会：</span>
|
||
<span class="user-info-val"
|
||
style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
|
||
<!--#if(@shiro.getPrincipalProperty('union')!=null){#-->
|
||
${@shiro.getPrincipalProperty('union').getUnionname()}
|
||
<!--#}#-->
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<span class="user-info-label">联系电话：</span>
|
||
<span class="user-info-val">${@shiro.getPrincipalProperty('mobile')}</span>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<span class="user-info-label">职  务：</span>
|
||
<span class="user-info-val">
|
||
<span class="user-info-val">${@shiro.getPrincipalProperty('position')}</span>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<span class="user-info-label">在职状态：</span>
|
||
<span class="user-info-val">${@shiro.getPrincipalProperty('userState')}</span>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<span class="user-info-label">民  族：</span>
|
||
<span class="user-info-val">
|
||
<span class="user-info-val">${@shiro.getPrincipalProperty('nation')}</span>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<span class="user-info-label">用户身份：</span>
|
||
<span class="user-info-val" style="color: #f56c6c">
|
||
<!--#
|
||
for(role in @shiro.getPrincipalProperty('roles')){
|
||
#-->
|
||
${@role.getName()}
|
||
<!--#
|
||
}
|
||
#-->
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
<el-row :gutter="15" style="margin-top: 15px" style=" align-items: stretch; ">
|
||
|
||
</el-row>
|
||
</div>
|
||
</transition>
|
||
|
||
<transition name="el-zoom-in-center">
|
||
<div v-show="v=='calendar'" class="transition-item transition-item2">
|
||
<el-card class="box-card v-box guava-card" shadow="never">
|
||
<div slot="header" class="clearfix">
|
||
<el-button icon="el-icon-back" type="text" @click="v='index'" style="font-size: 16px">返回
|
||
</el-button>
|
||
</div>
|
||
<div id="bgrl">
|
||
<el-calendar>
|
||
<template slot="dateCell" slot-scope="{date, data}">
|
||
<p :class="data.isSelected ? 'is-selected' : ''">
|
||
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
|
||
</p>
|
||
<div v-for="item in noticeData">
|
||
<div v-if="data.day.toString()==moment(item.startTime).format('YYYY-MM-DD')">
|
||
<el-link v-if="item.type===1" style="font-size: 8px" type="primary" target="_blank"
|
||
href="/platform/activity/apply">
|
||
{{item.name}}
|
||
</el-link>
|
||
<el-link v-if="item.type===2" style="font-size: 8px" type="primary" target="_blank"
|
||
href="/platform/jsz/hdMange">
|
||
{{item.name}}
|
||
</el-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</transition>
|
||
|
||
</div>
|
||
<script>
|
||
const vue = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
noticeData: [],
|
||
noticeKey: new Date().getTime(),
|
||
avatar: "/avatar_boy.svg",
|
||
colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#00a2ae', '#7265e6', '#ffbf00', '#00a854'],
|
||
handleItems: [],
|
||
needItems: [],
|
||
handleHeight: '350px',
|
||
needHeight: '420px',
|
||
v: "index",
|
||
day: "",
|
||
}
|
||
},
|
||
methods: {
|
||
setSize() {
|
||
this.$nextTick(() => {
|
||
this.handleHeight = $('#handle').height() + 50 + 'px';
|
||
this.needHeight = $('#need').height() + 50 + 'px';
|
||
})
|
||
},
|
||
async getUserRole() {
|
||
const resp = await $.get(loc() + "/getUserRole")
|
||
},
|
||
/**
|
||
* 获取日历信息
|
||
*/
|
||
async getCalendarNotice() {
|
||
const activityData = await this.getActivityData()
|
||
const fitnessData = await this.getFitnessData()
|
||
this.noticeData = activityData.concat(fitnessData)
|
||
},
|
||
/**
|
||
* 获取校级活动报名信息
|
||
*/
|
||
async getActivityData() {
|
||
const {data} = await $.get(base + "/platform/activity/calendar/getData")
|
||
if (data && data.length > 0) {
|
||
data.forEach(v => {
|
||
v.type = 1
|
||
})
|
||
}
|
||
return data
|
||
},
|
||
/**
|
||
* 获取健身走活动报名信息
|
||
*/
|
||
async getFitnessData() {
|
||
const {data} = await $.get("/platform/jsz/hdMange/getFitnessData")
|
||
if (data && data.length > 0) {
|
||
data.forEach(v => {
|
||
v.startTime = v.start_time
|
||
v.type = 2
|
||
})
|
||
}
|
||
return data
|
||
},
|
||
/**
|
||
* 提案待办
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getTaAgenda() {
|
||
const {data, code} = await $.get("/platform/proposal/agent/getAgenda")
|
||
if (code === 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
/**困难帮扶待办
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getDifficultAgenda() {
|
||
const {data, code} = await $.get("/platform/difficult/agent/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
/**慰问待办
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getCondolenceAgenda() {
|
||
const {data, code} = await $.get("/platform/condolence/agent/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
/**活动报销
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getActivitybxAgenda() {
|
||
const {data, code} = await $.get("/platform/activitybx/agent/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
/**疗休养
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getLxyAgenda() {
|
||
const {data, code} = await $.get("/platform/lxy/agent/getAgenda")
|
||
if (code == 0) {
|
||
console.log(data)
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
/**
|
||
* 会员待办
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getMemberAgenda() {
|
||
const {data, code} = await $.get("/platform/member/agenda/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
async getSyrAgenda() {
|
||
const {data, code} = await $.get("/platform/syr/dbxx/getSyrDbxx")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 入学登记待办
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getRxdjAgenda() {
|
||
const {data, code} = await $.get("/platform/rxdj/agent/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
async getOfferAdviceAgenda() {
|
||
const {data, code} = await $.get("/platform/offerAdvice/agenda/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
async getHonorAgenda() {
|
||
const {data, code} = await $.get("/platform/honor/agent/getAgenda")
|
||
if (code == 0) {
|
||
this.needItems = this.needItems.concat(data.filter(v => v.number > 0))
|
||
this.setSize()
|
||
}
|
||
},
|
||
/**
|
||
* 快速入口
|
||
* @returns {Promise<void>}
|
||
*/
|
||
async getQuickentry() {
|
||
const {data, code} = await $.get("/platform/quickEntry/getQuickentry")
|
||
if (code == 0) {
|
||
this.handleItems = data;
|
||
this.setSize()
|
||
}
|
||
}
|
||
},
|
||
beforeMount() {
|
||
window.addEventListener('resize', () => {
|
||
this.setSize()
|
||
}, false);
|
||
},
|
||
mounted() {
|
||
this.setSize()
|
||
const FILE_DOMAIN = "${AppFileDomain!}"
|
||
const userAvatar = "${@shiro.getPrincipalProperty('avatar')}"
|
||
const sex = "${@shiro.getPrincipalProperty('sex')}"
|
||
if (userAvatar) {
|
||
this.avatar = FILE_DOMAIN + "${@shiro.getPrincipalProperty('avatar')}"
|
||
} else {
|
||
this.avatar = sex === '女' ? '/avatar_girl.svg' : '/avatar_boy.svg'
|
||
}
|
||
},
|
||
async created() {
|
||
await this.getUserRole()
|
||
await this.getLxyAgenda();
|
||
await this.getQuickentry();
|
||
await this.getCalendarNotice()
|
||
await this.getActivitybxAgenda();
|
||
await this.getDifficultAgenda();
|
||
await this.getCondolenceAgenda();
|
||
await this.getTaAgenda();
|
||
await this.getRxdjAgenda();
|
||
await this.getMemberAgenda();
|
||
await this.getSyrAgenda();
|
||
await this.getOfferAdviceAgenda()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!--# } #-->
|