937 lines
27 KiB
HTML
937 lines
27 KiB
HTML
<!--#
|
|
layout("/layouts/v4/baseLayout.html"){
|
|
#-->
|
|
|
|
<style>
|
|
/* 主容器 */
|
|
.oa-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* 主要内容区域 */
|
|
.oa-main-content {
|
|
margin: 0 auto;
|
|
padding-bottom: 20px;
|
|
background: url(/assets/platform/img/v4/home-bg.png);
|
|
background-size: cover;
|
|
}
|
|
|
|
/* 背景图和搜索统计区域容器 */
|
|
.oa-hero-section {
|
|
position: relative;
|
|
height: 350px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-background-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.oa-background-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 搜索和统计区域 */
|
|
.oa-search-stats-section {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: grid;
|
|
grid-template-columns: 1fr 500px;
|
|
gap: 40px;
|
|
align-items: center;
|
|
width: 1500px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 搜索区域 */
|
|
.oa-search-section {
|
|
text-align: left;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
}
|
|
|
|
.oa-search-container {
|
|
display: flex;
|
|
max-width: 600px;
|
|
background: white;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.oa-search-input {
|
|
flex: 1;
|
|
padding: 15px 25px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 16px;
|
|
background: transparent;
|
|
}
|
|
|
|
.oa-search-btn {
|
|
background: #ff6b35;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.oa-search-btn:hover {
|
|
background: #e55a2b;
|
|
}
|
|
|
|
/* 数字提醒区域 */
|
|
.oa-stats-section {
|
|
background: rgba(0, 109, 185, 0.7);
|
|
padding: 20px 25px;
|
|
}
|
|
|
|
.oa-stats-title {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0 0 15px 0;
|
|
text-align: left;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.oa-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.oa-stat-card {
|
|
background: #ffffff;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #4a90e2, #357abd);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-stat-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.oa-stat-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.oa-stat-icon {
|
|
font-size: 28px;
|
|
color: #4a90e2;
|
|
flex-shrink: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.oa-stat-card:hover .oa-stat-icon {
|
|
transform: scale(1.1);
|
|
color: #357abd;
|
|
}
|
|
|
|
.oa-stat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
.oa-stat-number {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
line-height: 1;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.oa-stat-card:hover .oa-stat-number {
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.oa-stat-label {
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 活动中心 */
|
|
.oa-box-1-section {
|
|
display: grid;
|
|
grid-template-columns: 400px 1fr;
|
|
gap: 30px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
width: 1500px;
|
|
margin: 20px auto 0;
|
|
}
|
|
|
|
/* 左侧用户信息 */
|
|
.oa-user-panel {
|
|
background: rgba(0, 109, 185, 0.9);
|
|
color: white;
|
|
padding: 25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-height: 410px;
|
|
}
|
|
|
|
.oa-user-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 0;
|
|
}
|
|
|
|
.oa-user-panel > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.oa-user-avatar {
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
margin-bottom: 15px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.oa-user-avatar:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.oa-user-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.oa-user-info {
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.oa-user-info .info-item {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.6;
|
|
width: 100%;
|
|
}
|
|
|
|
.oa-user-panel .info-label {
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
min-width: 50px;
|
|
max-width: 60px;
|
|
text-align: left;
|
|
}
|
|
|
|
.oa-user-panel .info-value {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oa-user-homepage-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.oa-user-homepage-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 右侧活动列表 */
|
|
.oa-activity-content {
|
|
padding: 20px;
|
|
background: #ffffff;
|
|
max-height: 410px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0; /* 允许flex子项收缩 */
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
}
|
|
|
|
.oa-activity-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 15px;
|
|
flex-shrink: 0; /* 防止头部被压缩 */
|
|
}
|
|
|
|
.oa-activity-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.oa-activity-tab {
|
|
padding: 10px 0;
|
|
font-size: 20px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
position: relative;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.oa-activity-tab:hover {
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.oa-activity-tab.active {
|
|
color: #4a90e2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.oa-activity-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #4a90e2;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
|
|
/* 活动轮播样式 */
|
|
.oa-activity-carousel {
|
|
flex: 1;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.oa-activity-carousel .el-carousel,.oa-activity-carousel .el-carousel .el-carousel__container {
|
|
height: 100%;
|
|
}
|
|
|
|
.oa-activity-carousel .el-carousel__item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.oa-activity-card {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-activity-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.oa-activity-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-activity-card:hover .oa-activity-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 图片上的文字叠加层 */
|
|
.oa-activity-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
padding: 40px 20px 20px;
|
|
color: white;
|
|
}
|
|
|
|
.oa-activity-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: white;
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.oa-activity-meta {
|
|
font-size: 14px;
|
|
color: white;
|
|
margin-bottom: 15px;
|
|
line-height: 1.5;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* 无活动时的提示区域 */
|
|
.oa-no-activity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
color: #6c757d;
|
|
text-align: center;
|
|
}
|
|
|
|
.oa-no-activity-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
color: #dee2e6;
|
|
}
|
|
|
|
.oa-no-activity-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: #495057;
|
|
}
|
|
|
|
.oa-no-activity-desc {
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* box2 - 系统通知公告 */
|
|
.oa-box-2-section {
|
|
width: 1500px;
|
|
margin: 30px auto 0;
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-notice-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
color: #000;
|
|
}
|
|
|
|
.oa-notice-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.oa-notice-header-content::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.oa-notice-header-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.oa-notice-header-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.oa-notice-header-more {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-header-more-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: #666;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.oa-header-more-btn:hover {
|
|
background: #f5f5f5;
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.oa-header-more-btn i {
|
|
font-size: 12px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-header-more-btn:hover i {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
|
|
.oa-notice-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
.oa-notice-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.oa-notice-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 15px 20px;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #e8e8e8;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-notice-item:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.oa-notice-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.oa-notice-item-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #666;
|
|
margin-right: 12px;
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-notice-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oa-notice-item-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-notice-item-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-notice-item-date {
|
|
margin-left: 15px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="oa-container" id="v4-home-app">
|
|
<!-- 顶部导航 -->
|
|
|
|
<!-- 主要内容 -->
|
|
<div class="oa-main-content">
|
|
<!-- 背景图和搜索统计区域容器 -->
|
|
<div class="oa-hero-section">
|
|
<!-- 背景图 -->
|
|
<div class="oa-background-image">
|
|
<img
|
|
src="https://i.cpu.edu.cn/mnews/_upload/article/images/ed/dc/eff0e4b84ee6b2d7e770ed1de071/0f515087-45e3-4dbf-acf4-e7096d6cbdc0.jpg"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
|
|
<!-- 搜索和统计区域 -->
|
|
<div class="oa-search-stats-section">
|
|
<!-- 搜索区域 -->
|
|
<div class="oa-search-section">
|
|
<!-- <h1 class="oa-search-title">精业济群</h1>-->
|
|
<div class="oa-search-container">
|
|
<input type="text" class="oa-search-input" placeholder="请输入您要查询的关键字"
|
|
v-model="searchQuery" />
|
|
<button class="oa-search-btn" @click="performSearch">搜索</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数字提醒 -->
|
|
<div class="oa-stats-section">
|
|
<h3 class="oa-stats-title">提醒</h3>
|
|
<div class="oa-stats-grid">
|
|
<div class="oa-stat-card" @click="handleStatClick('todo')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-clock-o"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.todo }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">待办</div>
|
|
</div>
|
|
<div class="oa-stat-card" @click="handleStatClick('done')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-check-circle"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.done }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">已办</div>
|
|
</div>
|
|
<div class="oa-stat-card" @click="handleStatClick('notification')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-bell"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.notifications }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">消息</div>
|
|
</div>
|
|
<div class="oa-stat-card" @click="handleStatClick('started')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-file-text"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.started }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">申请</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- box1 -->
|
|
<div class="oa-box-1-section">
|
|
<!-- 左侧用户信息 -->
|
|
<div class="oa-user-panel">
|
|
<div class="oa-user-avatar">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<div class="oa-user-name">${@auth.getPrincipalProperty('username')}</div>
|
|
<div class="oa-user-info">
|
|
<div class="info-item">
|
|
<span class="info-label">工号：</span>
|
|
<span class="info-value">${@auth.getPrincipalProperty('loginname')}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">性别：</span>
|
|
<span class="info-value">${@auth.getPrincipalProperty('sex')}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">单位：</span>
|
|
<span class="info-value">
|
|
<!--#if(!isEmpty(@auth.getPrincipalProperty('unit'))){#-->
|
|
${@auth.getPrincipalProperty('unit').getName()}
|
|
<!--#}#-->
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">工会：</span>
|
|
<span class="info-value">
|
|
<!--#if(!isEmpty(@auth.getPrincipalProperty('union'))){#-->
|
|
${@auth.getPrincipalProperty('union').getName()}
|
|
<!--#}#-->
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<a href="/platform/v4/personCenter" class="oa-user-homepage-btn" target="_blank">
|
|
<i class="fa fa-home"></i>
|
|
个人主页
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 右侧活动列表 -->
|
|
<div class="oa-activity-content">
|
|
<div class="oa-activity-header">
|
|
<div class="oa-activity-tabs">
|
|
<div class="oa-activity-tab" :class="{active: activeTab === 'recent'}"
|
|
@click="setActiveTab('recent')">最新活动
|
|
</div>
|
|
<div class="oa-activity-tab" :class="{active: activeTab === 'history'}"
|
|
@click="setActiveTab('history')">历史活动
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oa-activity-carousel">
|
|
<div v-if="currentActivityList.length === 0" class="oa-no-activity">
|
|
<div class="oa-no-activity-icon">
|
|
<i class="fa fa-calendar-o"></i>
|
|
</div>
|
|
<div class="oa-no-activity-title">暂无活动信息</div>
|
|
<div class="oa-no-activity-desc">{{ activeTab === 'recent' ? '当前没有最新活动' : '当前没有历史活动'
|
|
}}
|
|
</div>
|
|
</div>
|
|
<el-carousel v-else :autoplay="true" arrow="always" indicator-position="none">
|
|
<el-carousel-item v-for="activity in currentActivityList" :key="activity.id">
|
|
<div class="oa-activity-card">
|
|
<div class="oa-activity-image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=800&auto=format&fit=crop"
|
|
:alt="activity.name" />
|
|
<div class="oa-activity-overlay">
|
|
<div class="oa-activity-title">{{ activity.name }}</div>
|
|
<div class="oa-activity-meta">{{ activity.startDate }} ~ {{ activity.endDate
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- box2 - 系统通知公告 -->
|
|
<div class="oa-box-2-section">
|
|
<div class="oa-notice-header">
|
|
<div class="oa-notice-header-content">
|
|
<div class="oa-notice-header-icon">
|
|
<i class="fa fa-bullhorn"></i>
|
|
</div>
|
|
<h2 class="oa-notice-header-title">系统通知公告</h2>
|
|
</div>
|
|
<div class="oa-notice-header-more">
|
|
<button class="oa-header-more-btn">
|
|
更多
|
|
<i class="fa fa-angle-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="oa-notice-content">
|
|
<div class="oa-notice-list">
|
|
<div v-for="notice in noticeList" :key="notice.id" class="oa-notice-item" @click="viewNotice(notice)">
|
|
<div class="oa-notice-item-icon">
|
|
<i class="fa fa-bullhorn"></i>
|
|
</div>
|
|
<div class="oa-notice-item-content">
|
|
<div class="oa-notice-item-title">{{ notice.title }}</div>
|
|
<div class="oa-notice-item-desc">{{ notice.content }}</div>
|
|
</div>
|
|
<div class="oa-notice-item-date">{{ notice.publishDate }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const vue = new Vue({
|
|
el: "#v4-home-app",
|
|
data() {
|
|
return {
|
|
searchQuery: "",
|
|
activeTab: "recent",
|
|
noticeTab: "system",
|
|
currentIndex: 0,
|
|
stats: {
|
|
todo: 3,
|
|
done: 0,
|
|
notifications: 7,
|
|
started: 9
|
|
},
|
|
activityList: [],
|
|
noticeList: [
|
|
{
|
|
id: 1,
|
|
type: 'system',
|
|
title: '系统维护通知',
|
|
content: '系统将于本周六晚上22:00-24:00进行例行维护，期间可能影响正常使用，请提前做好相关准备。',
|
|
publishDate: '2024-01-15',
|
|
isRead: false
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 'announcement',
|
|
title: '新功能上线公告',
|
|
content: '移动端应用已正式上线，支持手机端办公审批，欢迎大家下载使用。',
|
|
publishDate: '2024-01-14',
|
|
isRead: true
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 'urgent',
|
|
title: '紧急安全提醒',
|
|
content: '近期发现钓鱼邮件攻击，请勿点击可疑链接，如有疑问请联系IT部门。',
|
|
publishDate: '2024-01-13',
|
|
isRead: false
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
recentActivities() {
|
|
const now = new Date()
|
|
return this.activityList
|
|
.filter(activity => new Date(activity.endDate) >= now)
|
|
.sort((a, b) => new Date(b.startDate) - new Date(a.startDate))
|
|
},
|
|
historyActivities() {
|
|
const now = new Date()
|
|
return this.activityList
|
|
.filter(activity => new Date(activity.endDate) < now)
|
|
.sort((a, b) => new Date(b.startDate) - new Date(a.startDate))
|
|
},
|
|
currentActivityList() {
|
|
return this.activeTab === "recent" ? this.recentActivities : this.historyActivities
|
|
}
|
|
},
|
|
mounted() {
|
|
// 初始化数据
|
|
this.getActivity()
|
|
this.getStatistics()
|
|
},
|
|
methods: {
|
|
performSearch() {
|
|
if (this.searchQuery.trim()) {
|
|
console.log("搜索:", this.searchQuery)
|
|
// 实现搜索逻辑
|
|
}
|
|
},
|
|
setActiveTab(tab) {
|
|
this.activeTab = tab
|
|
this.currentIndex = 0 // 切换标签时重置索引
|
|
},
|
|
getActivity() {
|
|
$.get("/platform/home/listHomeActivity").then((res) => {
|
|
if (res.code === 0) {
|
|
this.activityList = res.data
|
|
}
|
|
})
|
|
},
|
|
viewNotice(notice) {
|
|
console.log('查看通知:', notice.title)
|
|
// 标记为已读
|
|
notice.isRead = true
|
|
// 这里可以添加查看详情的逻辑
|
|
},
|
|
|
|
handleStatClick(val){
|
|
if(['todo', 'done', 'application']){
|
|
window.open('/flow/todoCenter?status=' + val)
|
|
}
|
|
},
|
|
async getStatistics() {
|
|
try {
|
|
const res = await $.post("/flow/todoCenter/statistics")
|
|
if (res.code === 0) {
|
|
const { todoCount, doneCount, startedCount } = res.data
|
|
this.stats.todo = todoCount
|
|
this.stats.done = doneCount
|
|
this.stats.started = startedCount
|
|
}
|
|
} catch (error) {
|
|
this.$message.error("获取统计数据失败")
|
|
console.error("获取统计数据失败:", error)
|
|
}
|
|
},
|
|
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#}#-->
|
|
|