聊天平台初接入
This commit is contained in:
何德超
parent
c5c7aeaa61
commit
b3a33196ec
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="notification-center">
|
||||
<!-- 聊天信息图标 -->
|
||||
<!-- 1. 触发按钮 -->
|
||||
<div class="notification-trigger">
|
||||
<a-button type="text" class="notification-btn" title="聊天信息">
|
||||
<a-button type="text" class="notification-btn" title="聊天信息" @click="openChat">
|
||||
<template #icon>
|
||||
<IconNotification />
|
||||
</template>
|
||||
|
|
@ -10,684 +10,68 @@
|
|||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 消息中心弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="modalVisible"
|
||||
title="消息中心"
|
||||
width="800px"
|
||||
:footer="false"
|
||||
:mask-closable="true"
|
||||
:closable="true"
|
||||
:destroy-on-close="false"
|
||||
:z-index="1000"
|
||||
class="notification-modal"
|
||||
>
|
||||
<!-- 消息中心头部 -->
|
||||
<div class="notification-header">
|
||||
<div class="header-left">
|
||||
<h3>消息中心</h3>
|
||||
<span class="notification-count">{{ unreadCount }} 条未读</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<a-button type="text" size="small" @click="markAllAsRead">
|
||||
全部已读
|
||||
</a-button>
|
||||
<a-button type="text" size="small" @click="clearRead">
|
||||
清空已读
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息类型标签 -->
|
||||
<div class="notification-tabs">
|
||||
<a-tabs v-model:active-key="activeTab" size="small">
|
||||
<a-tab-pane key="all" title="全部">
|
||||
<template #title>
|
||||
<span>全部 ({{ totalCount }})</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="pending" title="待审批">
|
||||
<template #title>
|
||||
<span>待审批 ({{ pendingCount }})</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="equipment" title="设备">
|
||||
<template #title>
|
||||
<span>设备 ({{ equipmentCount }})</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="urgent" title="紧急">
|
||||
<template #title>
|
||||
<span>紧急 ({{ urgentCount }})</span>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div class="notification-list">
|
||||
<div v-if="filteredNotifications.length === 0" class="empty-state">
|
||||
<IconInfo style="font-size: 48px; color: #d9d9d9; margin-bottom: 16px;" />
|
||||
<p>暂无消息</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="notification in filteredNotifications"
|
||||
:key="notification.id"
|
||||
class="notification-item"
|
||||
:class="{
|
||||
'unread': !notification.read,
|
||||
'urgent': notification.priority === 'URGENT',
|
||||
'high': notification.priority === 'HIGH'
|
||||
}"
|
||||
@click="handleNotificationClick(notification)"
|
||||
>
|
||||
<!-- 消息图标 -->
|
||||
<div class="notification-icon">
|
||||
<component :is="getNotificationIcon(notification.type)" />
|
||||
</div>
|
||||
|
||||
<!-- 消息内容 -->
|
||||
<div class="notification-content">
|
||||
<div class="notification-title">
|
||||
{{ notification.title }}
|
||||
<a-tag
|
||||
v-if="notification.actionRequired"
|
||||
size="small"
|
||||
color="red"
|
||||
>
|
||||
需操作
|
||||
</a-tag>
|
||||
<a-tag
|
||||
v-if="notification.reminderType"
|
||||
size="small"
|
||||
color="blue"
|
||||
>
|
||||
{{ getReminderTypeText(notification.reminderType) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="notification-message">{{ notification.content }}</div>
|
||||
<div class="notification-meta">
|
||||
<span class="notification-time">{{ formatTime(notification.createTime) }}</span>
|
||||
<span class="notification-category">{{ notification.category }}</span>
|
||||
<span v-if="notification.source" class="notification-source">{{ notification.source }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息操作 -->
|
||||
<div class="notification-actions">
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.stop="toggleReminder(notification)"
|
||||
:title="notification.reminderTime ? '取消提醒' : '设置提醒'"
|
||||
>
|
||||
<IconClockCircle v-if="!notification.reminderTime" />
|
||||
<IconClose v-else />
|
||||
</a-button>
|
||||
<a-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click.stop="removeNotification(notification.id)"
|
||||
title="删除消息"
|
||||
>
|
||||
<IconDelete />
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息底部 -->
|
||||
<div class="notification-footer">
|
||||
<a-button type="text" size="small" @click="viewAllNotifications">
|
||||
查看全部消息
|
||||
</a-button>
|
||||
<a-button type="text" size="small" @click="exportNotifications">
|
||||
导出消息
|
||||
</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 提醒设置弹窗 -->
|
||||
<a-modal
|
||||
v-model:visible="reminderModalVisible"
|
||||
title="设置消息提醒"
|
||||
width="400px"
|
||||
@ok="saveReminder"
|
||||
@cancel="cancelReminder"
|
||||
>
|
||||
<a-form :model="reminderForm" layout="vertical">
|
||||
<a-form-item label="提醒类型">
|
||||
<a-radio-group v-model="reminderForm.type">
|
||||
<a-radio value="IMMEDIATE">立即提醒</a-radio>
|
||||
<a-radio value="DELAYED">延迟提醒</a-radio>
|
||||
<a-radio value="RECURRING">重复提醒</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="reminderForm.type === 'DELAYED'" label="提醒时间">
|
||||
<a-date-picker
|
||||
v-model="reminderForm.time"
|
||||
show-time
|
||||
placeholder="选择提醒时间"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="reminderForm.type === 'RECURRING'" label="重复间隔">
|
||||
<a-input-number
|
||||
v-model="reminderForm.interval"
|
||||
:min="1"
|
||||
:max="1440"
|
||||
placeholder="间隔分钟"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 2. 聊天平台弹窗 -->
|
||||
<a-modal v-model:visible="chatVisible" title="聊天平台(注册验证码666666)" width=80% :footer="false" :mask-closable="true"
|
||||
:destroy-on-close="false" @close="chatVisible = false">
|
||||
<!-- 3. 嵌入 React 聊天平台 -->
|
||||
<iframe ref="chatFrame" src="http://pms.dtyx.net:11001/" frameborder="0"
|
||||
style="width: 100%; height: 600px; border: none;" allow="camera; microphone"></iframe>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
IconNotification,
|
||||
IconInfo,
|
||||
IconClockCircle,
|
||||
IconClose,
|
||||
IconDelete,
|
||||
IconCheckCircle,
|
||||
IconClockCircle as IconPending,
|
||||
IconApps,
|
||||
IconExclamationCircle,
|
||||
IconExclamationCircle as IconWarning,
|
||||
IconSettings
|
||||
} from '@arco-design/web-vue/es/icon'
|
||||
import message from '@arco-design/web-vue/es/message'
|
||||
import notificationService from '@/services/notificationService'
|
||||
import websocketService from '@/services/websocketService'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { IconNotification } from '@arco-design/web-vue/es/icon'
|
||||
|
||||
defineOptions({ name: 'NotificationCenter' })
|
||||
const chatVisible = ref(false)
|
||||
const chatFrame = ref<HTMLIFrameElement>()
|
||||
const url = ref(import.meta.env.VITE_API_BASE_URL + ":11001")
|
||||
/* 打开聊天窗口 */
|
||||
function openChat() {
|
||||
chatVisible.value = true
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 响应式数据
|
||||
const modalVisible = ref(false)
|
||||
const activeTab = ref('all')
|
||||
const reminderModalVisible = ref(false)
|
||||
const currentNotification = ref<any>(null)
|
||||
|
||||
// 提醒表单
|
||||
const reminderForm = ref({
|
||||
type: 'IMMEDIATE' as 'IMMEDIATE' | 'DELAYED' | 'RECURRING',
|
||||
time: null as Date | null,
|
||||
interval: 30
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const notifications = computed(() => notificationService.getAllNotifications())
|
||||
const unreadCount = computed(() => {
|
||||
const count = notificationService.unreadCount.value
|
||||
// 确保返回有效的数字，避免NaN
|
||||
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
|
||||
return count
|
||||
}
|
||||
return 0
|
||||
})
|
||||
const totalCount = computed(() => notifications.value.length)
|
||||
const pendingCount = computed(() => {
|
||||
const count = notificationService.pendingCount.value
|
||||
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
|
||||
return count
|
||||
}
|
||||
return 0
|
||||
})
|
||||
const equipmentCount = computed(() => {
|
||||
const borrowCount = notificationService.equipmentBorrowCount.value || 0
|
||||
const returnCount = notificationService.equipmentReturnCount.value || 0
|
||||
const maintenanceCount = notificationService.equipmentMaintenanceCount.value || 0
|
||||
const alertCount = notificationService.equipmentAlertCount.value || 0
|
||||
|
||||
return borrowCount + returnCount + maintenanceCount + alertCount
|
||||
})
|
||||
const urgentCount = computed(() => {
|
||||
const count = notificationService.urgentCount.value
|
||||
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
|
||||
return count
|
||||
}
|
||||
return 0
|
||||
})
|
||||
const hasUrgentNotifications = computed(() => urgentCount.value > 0)
|
||||
|
||||
// 过滤后的消息列表
|
||||
const filteredNotifications = computed(() => {
|
||||
let filtered = notifications.value
|
||||
|
||||
switch (activeTab.value) {
|
||||
case 'pending':
|
||||
filtered = filtered.filter(n => n.type === 'PENDING')
|
||||
break
|
||||
case 'equipment':
|
||||
filtered = filtered.filter(n =>
|
||||
['EQUIPMENT_BORROW', 'EQUIPMENT_RETURN', 'EQUIPMENT_MAINTENANCE', 'EQUIPMENT_ALERT'].includes(n.type)
|
||||
)
|
||||
break
|
||||
case 'urgent':
|
||||
filtered = filtered.filter(n => n.priority === 'URGENT' || n.priority === 'HIGH')
|
||||
break
|
||||
}
|
||||
|
||||
// 按优先级和时间排序
|
||||
return filtered.sort((a, b) => {
|
||||
const priorityOrder = { 'URGENT': 4, 'HIGH': 3, 'NORMAL': 2, 'LOW': 1 }
|
||||
const aPriority = priorityOrder[a.priority || 'NORMAL'] || 2
|
||||
const bPriority = priorityOrder[b.priority || 'NORMAL'] || 2
|
||||
|
||||
if (aPriority !== bPriority) {
|
||||
return bPriority - aPriority
|
||||
}
|
||||
|
||||
return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
|
||||
}).slice(0, 20) // 只显示前20条
|
||||
})
|
||||
|
||||
// 方法
|
||||
const toggleDropdown = () => {
|
||||
console.log('打开消息中心弹窗')
|
||||
modalVisible.value = true
|
||||
// 如果 React 平台需要登录信息，可在 iframe 加载完成后 postMessage
|
||||
// nextTick(() => {
|
||||
// // 确保 iframe 已挂载
|
||||
// if (chatFrame.value) {
|
||||
// chatFrame.value.onload = () => {
|
||||
// // 把当前登录用户信息发给 React
|
||||
// chatFrame.value?.contentWindow?.postMessage(
|
||||
// {
|
||||
// type: 'INIT_IM',
|
||||
// payload: {
|
||||
// userID: 'your-user-id', // 换成真实 ID
|
||||
// token: 'your-token', // 换成真实 token
|
||||
// },
|
||||
// },
|
||||
// '*' // 生产环境可改成 React 平台的 origin
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
const markAllAsRead = () => {
|
||||
notificationService.markAllAsRead()
|
||||
message.success('已标记所有消息为已读')
|
||||
}
|
||||
|
||||
const clearRead = () => {
|
||||
notificationService.clearRead()
|
||||
message.success('已清空已读消息')
|
||||
}
|
||||
|
||||
const handleNotificationClick = (notification: any) => {
|
||||
console.log('点击消息:', notification)
|
||||
|
||||
// 标记为已读
|
||||
notificationService.markAsRead(notification.id)
|
||||
|
||||
// 构建跳转路径
|
||||
let targetUrl = notification.targetUrl
|
||||
|
||||
// 如果没有targetUrl，根据消息类型和业务信息构建
|
||||
if (!targetUrl) {
|
||||
targetUrl = buildTargetUrl(notification)
|
||||
}
|
||||
|
||||
console.log('构建的目标URL:', targetUrl)
|
||||
|
||||
// 如果有目标URL，跳转过去
|
||||
if (targetUrl) {
|
||||
try {
|
||||
router.push(targetUrl)
|
||||
modalVisible.value = false
|
||||
message.success('正在跳转到相关页面...')
|
||||
} catch (error) {
|
||||
console.error('路由跳转失败:', error)
|
||||
message.error('页面跳转失败，请手动导航')
|
||||
}
|
||||
} else {
|
||||
console.warn('无法构建跳转路径，消息数据:', notification)
|
||||
message.warning('该消息暂无相关操作页面')
|
||||
}
|
||||
}
|
||||
|
||||
// 根据消息类型构建跳转路径
|
||||
const buildTargetUrl = (notification: any): string | null => {
|
||||
const { type, relatedId, metadata, category } = notification
|
||||
|
||||
console.log('构建跳转路径，消息类型:', type, '相关ID:', relatedId, '元数据:', metadata)
|
||||
|
||||
switch (type) {
|
||||
case 'PROCUREMENT':
|
||||
case 'PENDING':
|
||||
// 设备采购申请 - 跳转到审批台
|
||||
return '/asset-management/device-management/approval'
|
||||
|
||||
case 'APPROVAL':
|
||||
// 审批相关 - 跳转到审批台
|
||||
return '/asset-management/device-management/approval'
|
||||
|
||||
case 'EQUIPMENT_BORROW':
|
||||
// 设备借用 - 跳转到设备中心
|
||||
return '/asset-management/device-management/device-center'
|
||||
|
||||
case 'EQUIPMENT_RETURN':
|
||||
// 设备归还 - 跳转到设备中心
|
||||
return '/asset-management/device-management/device-center'
|
||||
|
||||
case 'EQUIPMENT_MAINTENANCE':
|
||||
// 设备维护 - 跳转到设备中心
|
||||
return '/asset-management/device-management/device-center'
|
||||
|
||||
case 'EQUIPMENT_ALERT':
|
||||
// 设备告警 - 跳转到设备中心
|
||||
return '/asset-management/device-management/device-center'
|
||||
|
||||
case 'WORKFLOW':
|
||||
// 工作流 - 根据具体类型跳转
|
||||
if (metadata?.workflowType === 'PROJECT') {
|
||||
return '/project-management/project-template/project-aproval'
|
||||
}
|
||||
return '/asset-management/device-management/approval'
|
||||
|
||||
case 'SYSTEM':
|
||||
// 系统消息 - 通常不需要跳转
|
||||
return null
|
||||
|
||||
default:
|
||||
// 默认跳转到审批台
|
||||
return '/asset-management/device-management/approval'
|
||||
}
|
||||
}
|
||||
|
||||
const getNotificationIcon = (type: string) => {
|
||||
const iconMap: Record<string, any> = {
|
||||
'APPROVAL': IconCheckCircle,
|
||||
'PENDING': IconPending,
|
||||
'PROCUREMENT': IconApps,
|
||||
'EQUIPMENT_BORROW': IconApps,
|
||||
'EQUIPMENT_RETURN': IconApps,
|
||||
'EQUIPMENT_MAINTENANCE': IconSettings,
|
||||
'EQUIPMENT_ALERT': IconWarning,
|
||||
'WORKFLOW': IconSettings,
|
||||
'SYSTEM': IconExclamationCircle
|
||||
}
|
||||
return iconMap[type] || IconNotification
|
||||
}
|
||||
|
||||
const getReminderTypeText = (type: string) => {
|
||||
const typeMap: Record<string, string> = {
|
||||
'IMMEDIATE': '立即',
|
||||
'DELAYED': '延迟',
|
||||
'RECURRING': '重复'
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
const formatTime = (time: string) => {
|
||||
const date = new Date(time)
|
||||
const now = new Date()
|
||||
const diff = now.getTime() - date.getTime()
|
||||
|
||||
if (diff < 60000) return '刚刚'
|
||||
if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
|
||||
if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
|
||||
if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
|
||||
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
const toggleReminder = (notification: any) => {
|
||||
if (notification.reminderTime) {
|
||||
// 取消提醒
|
||||
notificationService.cancelNotificationReminder(notification.id)
|
||||
message.success('已取消提醒')
|
||||
} else {
|
||||
// 设置提醒
|
||||
currentNotification.value = notification
|
||||
reminderModalVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const saveReminder = () => {
|
||||
if (currentNotification.value) {
|
||||
const reminderTime = reminderForm.value.type === 'DELAYED' && reminderForm.value.time
|
||||
? reminderForm.value.time.toISOString()
|
||||
: new Date().toISOString()
|
||||
|
||||
notificationService.setNotificationReminder(
|
||||
currentNotification.value.id,
|
||||
reminderTime,
|
||||
reminderForm.value.type as any,
|
||||
reminderForm.value.type === 'RECURRING' ? reminderForm.value.interval : undefined
|
||||
)
|
||||
|
||||
message.success('提醒设置成功')
|
||||
reminderModalVisible.value = false
|
||||
resetReminderForm()
|
||||
}
|
||||
}
|
||||
|
||||
const cancelReminder = () => {
|
||||
reminderModalVisible.value = false
|
||||
resetReminderForm()
|
||||
}
|
||||
|
||||
const resetReminderForm = () => {
|
||||
reminderForm.value = {
|
||||
type: 'IMMEDIATE',
|
||||
time: null,
|
||||
interval: 30
|
||||
}
|
||||
currentNotification.value = null
|
||||
}
|
||||
|
||||
const removeNotification = (id: string) => {
|
||||
notificationService.removeNotification(id)
|
||||
message.success('消息已删除')
|
||||
}
|
||||
|
||||
const viewAllNotifications = () => {
|
||||
router.push('/notifications')
|
||||
modalVisible.value = false
|
||||
}
|
||||
|
||||
const exportNotifications = () => {
|
||||
notificationService.exportNotifications()
|
||||
message.success('消息导出成功')
|
||||
}
|
||||
|
||||
// 监听WebSocket事件
|
||||
const setupWebSocketListeners = () => {
|
||||
console.log('设置WebSocket监听器')
|
||||
|
||||
// 监听新消息
|
||||
websocketService.on('message', (message) => {
|
||||
console.log('收到WebSocket消息:', message)
|
||||
|
||||
// 如果消息包含通知信息，添加到通知服务
|
||||
if (message.data && message.data.notification) {
|
||||
console.log('处理通知消息:', message.data.notification)
|
||||
notificationService.addNotification({
|
||||
type: message.data.notification.type || 'SYSTEM',
|
||||
title: message.data.notification.title || '新通知',
|
||||
content: message.data.notification.content || '',
|
||||
priority: message.data.notification.priority || 'NORMAL',
|
||||
category: message.data.notification.category || '系统',
|
||||
targetUrl: message.data.notification.targetUrl,
|
||||
metadata: message.data.notification.metadata,
|
||||
source: message.data.notification.source || 'WEBSOCKET'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 监听审批状态变更
|
||||
websocketService.on('approvalStatusChanged', (data) => {
|
||||
console.log('审批状态变更:', data)
|
||||
|
||||
// 添加审批状态变更通知
|
||||
if (data.type === 'SUBMITTED') {
|
||||
notificationService.addNotification({
|
||||
type: 'PENDING',
|
||||
title: '新的审批申请',
|
||||
content: `收到来自 ${data.applicantName || '申请人'} 的${data.businessType || '设备'}申请：${data.equipmentName || '未知设备'}`,
|
||||
targetUrl: '/asset-management/device-management/approval',
|
||||
priority: 'HIGH',
|
||||
category: '审批申请',
|
||||
actionRequired: true,
|
||||
source: 'APPROVAL_SYSTEM',
|
||||
metadata: {
|
||||
approvalId: data.approvalId,
|
||||
equipmentName: data.equipmentName,
|
||||
applicantName: data.applicantName,
|
||||
businessType: data.businessType,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 监听设备状态变更
|
||||
websocketService.on('equipmentStatusChanged', (data) => {
|
||||
console.log('设备状态变更:', data)
|
||||
|
||||
// 添加设备状态变更通知
|
||||
notificationService.addNotification({
|
||||
type: 'EQUIPMENT_ALERT',
|
||||
title: '设备状态更新',
|
||||
content: `设备"${data.equipmentName || '未知设备'}"状态已更新为：${data.newStatus}`,
|
||||
targetUrl: '/asset-management/device-management/device-center',
|
||||
priority: 'NORMAL',
|
||||
category: '设备状态',
|
||||
source: 'EQUIPMENT_SYSTEM',
|
||||
metadata: {
|
||||
equipmentId: data.equipmentId,
|
||||
equipmentName: data.equipmentName,
|
||||
oldStatus: data.oldStatus,
|
||||
newStatus: data.newStatus,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 监听采购状态变更
|
||||
websocketService.on('procurementStatusChanged', (data) => {
|
||||
console.log('采购状态变更:', data)
|
||||
|
||||
if (data.type === 'SUBMITTED') {
|
||||
notificationService.addNotification({
|
||||
type: 'PROCUREMENT',
|
||||
title: '新的采购申请',
|
||||
content: `收到来自 ${data.applicantName || '申请人'} 的设备采购申请：${data.equipmentName || '未知设备'}`,
|
||||
targetUrl: '/asset-management/device-management/approval',
|
||||
priority: 'HIGH',
|
||||
category: '设备采购',
|
||||
actionRequired: true,
|
||||
source: 'PROCUREMENT_SYSTEM',
|
||||
metadata: {
|
||||
procurementId: data.procurementId,
|
||||
equipmentName: data.equipmentName,
|
||||
applicantName: data.applicantName,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 监听新审批申请
|
||||
websocketService.on('newApprovalRequest', (data) => {
|
||||
console.log('新审批申请:', data)
|
||||
|
||||
notificationService.addNotification({
|
||||
type: 'PENDING',
|
||||
title: '新的审批申请',
|
||||
content: `收到来自 ${data.applicantName || '申请人'} 的${data.businessType || '设备'}申请：${data.equipmentName || '未知设备'}`,
|
||||
targetUrl: '/asset-management/device-management/approval',
|
||||
priority: 'HIGH',
|
||||
category: '审批申请',
|
||||
actionRequired: true,
|
||||
source: 'APPROVAL_SYSTEM',
|
||||
metadata: {
|
||||
approvalId: data.approvalId,
|
||||
equipmentName: data.equipmentName,
|
||||
applicantName: data.applicantName,
|
||||
businessType: data.businessType,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 监听WebSocket连接状态
|
||||
websocketService.on('connected', () => {
|
||||
console.log('WebSocket已连接')
|
||||
})
|
||||
|
||||
websocketService.on('disconnected', (data) => {
|
||||
console.log('WebSocket已断开:', data)
|
||||
})
|
||||
|
||||
websocketService.on('error', (error) => {
|
||||
console.error('WebSocket错误:', error)
|
||||
})
|
||||
}
|
||||
|
||||
// 清理WebSocket监听器
|
||||
const cleanupWebSocketListeners = () => {
|
||||
console.log('清理WebSocket监听器')
|
||||
|
||||
// 移除所有事件监听器
|
||||
websocketService.off('message', () => {})
|
||||
websocketService.off('approvalStatusChanged', () => {})
|
||||
websocketService.off('equipmentStatusChanged', () => {})
|
||||
websocketService.off('procurementStatusChanged', () => {})
|
||||
websocketService.off('newApprovalRequest', () => {})
|
||||
websocketService.off('connected', () => {})
|
||||
websocketService.off('disconnected', () => {})
|
||||
websocketService.off('error', () => {})
|
||||
}
|
||||
|
||||
// 定期检查提醒
|
||||
let reminderCheckInterval: NodeJS.Timeout | null = null
|
||||
|
||||
const startReminderCheck = () => {
|
||||
reminderCheckInterval = setInterval(() => {
|
||||
const reminderNotifications = notificationService.getReminderNotifications()
|
||||
if (reminderNotifications.length > 0) {
|
||||
// 显示提醒通知
|
||||
reminderNotifications.forEach(notification => {
|
||||
message.info(`${notification.title}: ${notification.content}`)
|
||||
notificationService.markReminderProcessed(notification.id)
|
||||
})
|
||||
}
|
||||
}, 60000) // 每分钟检查一次
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
setupWebSocketListeners()
|
||||
startReminderCheck()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanupWebSocketListeners()
|
||||
if (reminderCheckInterval) {
|
||||
clearInterval(reminderCheckInterval)
|
||||
}
|
||||
})
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
toggleDropdown
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.notification-center {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
|
||||
|
||||
.notification-trigger {
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.notification-btn {
|
||||
color: var(--color-text-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
|
||||
.notification-text {
|
||||
font-size: 14px;
|
||||
margin-left: 4px;
|
||||
|
|
@ -701,11 +85,11 @@ defineExpose({
|
|||
:deep(.arco-modal) {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
|
||||
:deep(.arco-modal-mask) {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
|
||||
:deep(.arco-modal-wrapper) {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
|
@ -718,7 +102,7 @@ defineExpose({
|
|||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 16px;
|
||||
|
||||
|
||||
.header-left {
|
||||
h3 {
|
||||
margin: 0 0 4px 0;
|
||||
|
|
@ -726,13 +110,13 @@ defineExpose({
|
|||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
|
||||
.notification-count {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
|
@ -741,7 +125,7 @@ defineExpose({
|
|||
|
||||
.notification-tabs {
|
||||
margin-bottom: 16px;
|
||||
|
||||
|
||||
:deep(.arco-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -750,13 +134,13 @@ defineExpose({
|
|||
.notification-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
|
||||
.notification-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -766,44 +150,44 @@ defineExpose({
|
|||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-2);
|
||||
border-color: var(--color-primary-light-3);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
&.unread {
|
||||
background-color: var(--color-primary-light-1);
|
||||
border-color: var(--color-primary-light-3);
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-light-2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.urgent {
|
||||
border-left: 4px solid var(--color-danger);
|
||||
background-color: var(--color-danger-light-1);
|
||||
}
|
||||
|
||||
|
||||
&.high {
|
||||
border-left: 4px solid var(--color-warning);
|
||||
background-color: var(--color-warning-light-1);
|
||||
}
|
||||
|
||||
|
||||
.notification-icon {
|
||||
margin-right: 16px;
|
||||
margin-top: 2px;
|
||||
color: var(--color-text-2);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
.notification-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
|
||||
.notification-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
|
|
@ -813,34 +197,34 @@ defineExpose({
|
|||
color: var(--color-text-1);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
.notification-message {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-2);
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
.notification-meta {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
|
||||
|
||||
.notification-time {
|
||||
color: var(--color-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.notification-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
|
||||
&:hover .notification-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue