214 lines
6.3 KiB
JavaScript
214 lines
6.3 KiB
JavaScript
const stats = {
|
|
template: /*language=HTML*/ `
|
|
<div class="stats-section">
|
|
<div class="stats-family">
|
|
<img src="/assets/platform/img/home/family.png"/>
|
|
</div>
|
|
<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 {
|
|
/*background: white;*/
|
|
color: #333;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
z-index: 10;
|
|
width: 80%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: -130px auto 0;
|
|
/*border: 1px solid #e8e8e8;*/
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
width: 32%;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.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);
|
|
width: 100%;
|
|
height: 90px;
|
|
}
|
|
|
|
|
|
.stat-icon {
|
|
font-size: 30px;
|
|
width: 50px;
|
|
height: 50px;
|
|
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;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.stats-family {
|
|
width: 68%;
|
|
}
|
|
|
|
.stats-family img {
|
|
height: 190px !important;
|
|
border-radius: 30px;
|
|
}
|
|
`
|
|
};
|