..
This commit is contained in:
那些花儿
@@ -0,0 +1,248 @@
|
||||
const user = {
|
||||
template: /*language=HTML*/ `
|
||||
<div class="user-wrapper">
|
||||
<div class="user-container">
|
||||
<div class="user-info-section">
|
||||
<div class="user-details">
|
||||
<div class="user-name">${@auth.getPrincipalProperty('username')}</div>
|
||||
<div class="user-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">工号：</span>
|
||||
<span class="meta-value">${@auth.getPrincipalProperty('loginname')}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">单位：</span>
|
||||
<span class="meta-value">
|
||||
<!--#if(!isEmpty(@auth.getPrincipalProperty('unit'))){#-->
|
||||
${@auth.getPrincipalProperty('unit').getName()}
|
||||
<!--#}#-->
|
||||
</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">分工会：</span>
|
||||
<span class="meta-value">
|
||||
<!--#if(!isEmpty(@auth.getPrincipalProperty('union'))){#-->
|
||||
${@auth.getPrincipalProperty('union').getName()}
|
||||
<!--#}#-->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item pending" @click="handleStatClick('todo')">
|
||||
<div class="stat-icon">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">待办</div>
|
||||
<div class="stat-number">{{ stats.todoCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item completed" @click="handleStatClick('done')">
|
||||
<div class="stat-icon">
|
||||
<i class="fa fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">已办</div>
|
||||
<div class="stat-number">{{ stats.doneCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item messages" @click="handleStatClick('notification')">
|
||||
<div class="stat-icon">
|
||||
<i class="fa fa-bell"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">消息</div>
|
||||
<div class="stat-number">{{ stats.notifications }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-item reminders" @click="handleStatClick('started')">
|
||||
<div class="stat-icon">
|
||||
<i class="fa fa-file-text"></i>
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">发起</div>
|
||||
<div class="stat-number">{{ stats.startedCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
stats: {
|
||||
todoCount: 0,
|
||||
doneCount: 0,
|
||||
notifications: 0,
|
||||
startedCount: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleStatClick(type) {
|
||||
debugger
|
||||
if (['todo', 'done', 'application'].includes(type)) {
|
||||
window.open('/flow/todoCenter?status=' + type)
|
||||
}
|
||||
},
|
||||
loadStats() {
|
||||
this.$axios.post("/flow/todoCenter/statistics").then(res => {
|
||||
if (res.code === 0) {
|
||||
this.stats = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadStats();
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.user-wrapper {
|
||||
width: 100%;
|
||||
background-image: url(https://www.ncu.edu.cn/images/bbg1.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.user-container {
|
||||
width: 80%;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-info-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
width: 390px;
|
||||
background-image: url(https://cdgh.ncu.edu.cn/images/index_bg2.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: #666;
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 右侧统计区域 */
|
||||
.stats-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYEAAAB4CAYAAAAUs05BAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANrSURBVHgB7dzNapNZAMfh0zbNYGgosYql4wiCFEEZXLiYG3DrdryPuQbvpXMB7t24m4UOCiKuEtCKsaVNiTRaXhshLvyoSd/Yzf95oORA827PLycn5yxsdZ/crKql+6WG1uLy0d3Lm29Pes+jfm+1N9w/VwD4qXtXbmyf9P/Hu29Wng/6K6WOqnq6WACI1ZgM1pqt0Z31qztlBoMPh0sPXr+8OMsztzsbe9fanfcFgG9sdZ+tz/L+6+0LB7c6lw5meWZ7OGg+7HfPj8dWAgDBRAAgmAgABBMBgGAiABBMBACCiQBAsIV5nBiehXMCAD826zmBWpwYBsi2UFXV5vHrP6WGycnhae4QAuD0JncGneak8He8sBIACCYCAMEa//b+bx5vDJ/dRgQAtY2/EprDVdJ9KwGAYLWukgbgbI03g+tuCLtKGoDPRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEKwxGbwbDZtb3WfrpYbW4vLR3cubbwsAv8Tj3Tcrzwf9lTInVgIAwRp///Hn6Ph1u9Qw+HC49OD1y4sFgDNxvX3h4Fbn0kGpZ8dKACCYCAAEW9jqPrlZVUv3yymtNVujv9Y29qb9Ouh2Z2PvWrvzvgDwjWl+oLM/OlwefBw1fm+1682lVfXUSgAg2JefiI4/0d9Zv7oz7YPbw0HzYb97fjxuL/92dO/KjRM3lx/1e6u94f65AsBPnTSnTubfWeftr58fj60EAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgc71Kehr/7b5aHf8VAGqZx7xtJQAQ7BOP4saDQA2PwQAAAABJRU5ErkJggg==) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stat-icon i {
|
||||
font-size: 32px;
|
||||
color: var(--color-primary-3);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
`
|
||||
}
|
||||
Reference in New Issue
Block a user