c-zhouhf1/zhgh_ncu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页

Browse Source
This commit is contained in:
Paidax
2025-11-06 15:39:44 +08:00
parent 6efa654957
commit 43ae68fed7
1 changed files with 196 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/views/layouts/v4/home/stats.js
+196
View File
@@ -0,0 +1,196 @@
const stats = {
template: /*language=HTML*/ `
<div class="stats-section">
<div class="stats-grid">
<!-- 待办 -->
<div
class="stat-item pending"
@click="handleStatClick('todo')"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<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')"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<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')"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<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')"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
>
<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>
`,
data() {
return {
stats: {
todoCount: 0,
doneCount: 0,
notifications: 0,
startedCount: 0
}
}
},
methods: {
handleStatClick(type) {
if (['todo', 'done', 'started'].includes(type)) {
window.open('/flow/todoCenter?status=' + type)
} else if (type === 'notification') {
window.open('/platform/v4/msg')
}
},
onMouseEnter(event) {
event.target.style.transform = 'translateY(-2px)';
event.target.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
},
onMouseLeave(event) {
event.target.style.transform = 'none';
event.target.style.boxShadow = '0 2px 6px rgba(0,0,0,0.08)';
},
loadStats() {
this.$axios.post("/flow/todoCenter/statistics").then(res => {
if (res.code === 0) {
this.stats = res.data;
}
})
}
},
mounted() {
this.loadStats();
},
style: /*language=CSS*/ `
/* 右侧统计区域 */
.stats-section {
position: absolute;
bottom: 24px;
right: 24px;
/*background: white;*/
color: #333;
padding: 20px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
z-index: 10;
width: 680px;
/*border: 1px solid #e8e8e8;*/
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stat-item {
background: #f8f9fa;
color: #495057;
padding: 14px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.stat-icon {
font-size: 20px;
width: 36px;
height: 36px;
background: #e6f7ff;
color: #1890ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.stat-item.pending .stat-icon,
.stat-item.completed .stat-icon,
.stat-item.messages .stat-icon,
.stat-item.reminders .stat-icon {
background: #e6f7ff;
color: #1890ff;
}
.stat-item.completed .stat-icon {
color: #52c41a;
}
.stat-item.messages .stat-icon {
color: #faad14;
}
.stat-item.reminders .stat-icon {
color: #13c2c2;
}
.stat-content {
display: flex;
flex-direction: column;
}
.stat-label {
font-size: 15px;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat-number {
font-size: 18px;
font-weight: bold;
margin-top: 2px;
}
`
};