<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<!-- 左侧日历 -->
|
<el-col :span="12">
|
<el-card class="calendar-card">
|
<div class="calendar-header">
|
<span>日历</span>
|
<div class="calendar-controls">
|
<el-date-picker v-model="selectedMonth" type="month" :format="'yyyy年MM月'" placeholder="选择月份"
|
@change="handleMonthChange" />
|
</div>
|
</div>
|
<el-calendar v-model="currentDate" />
|
</el-card>
|
</el-col>
|
|
<!-- 右侧预警通知 -->
|
<el-col :span="12">
|
<el-card class="notification-card">
|
<div class="notification-header">预警通知</div>
|
<div class="notification-list">
|
<div v-for="(notification, index) in alwaysMessages" :key="index" class="notification-item"
|
@click="handleNotificationClick(notification)">
|
<div class="notification-item-header">
|
<div class="notification-dot"></div>
|
<span class="notification-time">{{ notification.createTime }}</span>
|
</div>
|
<div class="notification-content">
|
<div class="notification-text">{{ notification.noticeTitle }}</div>
|
<div v-if="notification.createBy" class="notification-submitter">提交人：{{ notification.createBy }}</div>
|
</div>
|
</div>
|
<div v-for="(notification, index) in noticeMessage" :key="index" class="notification-item"
|
@click="handleNotificationClick(notification)">
|
<div class="notification-item-header">
|
<div class="notification-dot"></div>
|
<span class="notification-time">{{ notification.createTime }}</span>
|
</div>
|
<div class="notification-content">
|
<div class="notification-text">{{ notification.noticeTitle }}</div>
|
<div v-if="notification.createBy" class="notification-submitter">提交人：{{ notification.createBy }}</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { getMessage } from "@/api/menu";
|
export default {
|
name: "Index",
|
data() {
|
return {
|
// 版本号
|
version: "3.8.9",
|
currentDate: new Date(),
|
selectedMonth: new Date(),
|
alwaysMessages: [],
|
noticeMessage: []
|
};
|
},
|
watch: {
|
currentDate(newDate) {
|
this.selectedMonth = new Date(newDate);
|
}
|
},
|
created() {
|
getMessage().then(res => {
|
this.alwaysMessages = res.data.alwaysMessages
|
this.noticeMessage = res.data.noticeMessage
|
console.log(res);
|
});
|
},
|
methods: {
|
goTarget(href) {
|
window.open(href, "_blank");
|
},
|
handleMonthChange(date) {
|
if (date) {
|
this.currentDate = new Date(date);
|
}
|
},
|
// 处理通知点击
|
handleNotificationClick(notification) {
|
// 根据id类型进行不同的路由跳转
|
const id = notification.noticeId;
|
switch (id) {
|
case 1:
|
// 自主购房安置申请批次表
|
this.$router.push('/applicationBatchList/list');
|
break;
|
case 2:
|
// 自主购房安置申请批次表
|
this.$router.push('/applicationBatchList/list');
|
break;
|
case 3:
|
// 付款明细
|
this.$router.push('/payment-details/list');
|
break;
|
default:
|
if (id > 4) {
|
// 付款明细
|
this.$router.push('/payment-details/list');
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
padding: 20px;
|
|
.calendar-card,
|
.notification-card {
|
min-height: 600px;
|
}
|
|
.calendar-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
color: #24465c;
|
|
.calendar-controls {
|
:deep(.el-input__wrapper) {
|
width: 160px;
|
}
|
}
|
}
|
|
.notification-header {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
color: #24465c;
|
}
|
|
.notification-list {
|
.notification-item {
|
padding: 12px 16px;
|
border-bottom: 1px solid #ebeef5;
|
cursor: pointer;
|
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.notification-item-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 4px;
|
|
.notification-dot {
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background-color: #f56c6c;
|
}
|
|
.notification-time {
|
color: #909399;
|
font-size: 12px;
|
}
|
}
|
|
.notification-content {
|
padding-left: 16px;
|
|
.notification-text {
|
color: #333;
|
margin: 4px 0;
|
font-size: 14px;
|
}
|
|
.notification-submitter {
|
font-size: 12px;
|
color: #999;
|
}
|
}
|
}
|
|
&.unread {
|
.notification-dot {
|
display: block;
|
}
|
}
|
|
&.read {
|
.notification-dot {
|
display: none;
|
}
|
}
|
}
|
}
|
</style>
|
