Merge branch 'dev' of https://gitea.wangzhiwen.top/0214/ALOps_sys1 into dev
xiaohuo
8 months ago
commit
a26e383f74
@ -0,0 +1,292 @@ |
||||
import { Message, Notification } from 'element-ui' |
||||
import { getToken } from '@/utils/auth' |
||||
|
||||
class WebSocketClient { |
||||
constructor() { |
||||
this.ws = null |
||||
this.url = '' |
||||
this.userId = '' |
||||
this.reconnectAttempts = 0 |
||||
this.maxReconnectAttempts = 5 |
||||
this.reconnectInterval = 3000 |
||||
this.connected = false |
||||
// token传递方式: 'url'（默认，URL参数）, 'header'（请求头）, 'message'（首次消息）
|
||||
this.tokenMode = 'url' |
||||
} |
||||
|
||||
// 设置token传递方式
|
||||
setTokenMode(mode) { |
||||
const validModes = ['url', 'header', 'message'] |
||||
if (validModes.includes(mode)) { |
||||
this.tokenMode = mode |
||||
console.log(`WebSocket token传递方式已设置为: ${mode}`) |
||||
|
||||
// 特别说明header模式的限制
|
||||
if (mode === 'header') { |
||||
console.warn('注意: header模式使用WebSocket子协议传递token，受浏览器API限制，实际token将通过Sec-WebSocket-Protocol头传递') |
||||
console.warn('后端需要从Sec-WebSocket-Protocol请求头中提取token信息') |
||||
} |
||||
return true |
||||
} |
||||
console.error('无效的token传递方式，可选值: url, header, message') |
||||
return false |
||||
} |
||||
|
||||
// 初始化WebSocket连接
|
||||
init(userId) { |
||||
// 重置重连计数
|
||||
this.reconnectAttempts = 0 |
||||
|
||||
// 检查必要参数
|
||||
if (!userId) { |
||||
console.error('WebSocket初始化失败: 用户ID不能为空') |
||||
return false |
||||
} |
||||
|
||||
// 获取token并检查登录状态
|
||||
const token = getToken() |
||||
if (!token) { |
||||
console.warn('WebSocket初始化失败: 未获取到token，请先登录') |
||||
return false |
||||
} |
||||
|
||||
this.userId = userId |
||||
// 确保baseURL不包含多余的引号或反引号
|
||||
let baseURL = process.env.VUE_APP_BASE_API |
||||
if (!baseURL) { |
||||
console.error('WebSocket初始化失败: 未配置VUE_APP_BASE_API环境变量') |
||||
return false |
||||
} |
||||
|
||||
// 清理baseURL格式
|
||||
baseURL = baseURL.replace(/[`'"\s]/g, '') |
||||
console.log('清理后的baseURL:', baseURL) |
||||
|
||||
// 构建WebSocket URL，将http替换为ws，https替换为wss
|
||||
let wsProtocol = baseURL.includes('https') ? 'wss' : 'ws' |
||||
let wsBaseURL = baseURL.replace(/^https?:\/\//, '') |
||||
|
||||
// 根据token传递方式构建URL
|
||||
if (this.tokenMode === 'url') { |
||||
// 在token前面加上'token-'前缀
|
||||
this.url = `${wsProtocol}://${wsBaseURL}/ws/onlineMessage?token=token-${token}` |
||||
} else { |
||||
// header或message模式下，URL不包含token
|
||||
this.url = `${wsProtocol}://${wsBaseURL}/ws/onlineMessage` |
||||
} |
||||
|
||||
// 输出环境变量和配置信息以调试
|
||||
console.log('WebSocket配置:', { |
||||
baseURL, |
||||
userId, |
||||
wsProtocol, |
||||
wsBaseURL, |
||||
hasToken: !!token, |
||||
tokenMode: this.tokenMode |
||||
}) |
||||
console.log('尝试连接WebSocket URL:', this.url) |
||||
|
||||
// 初始化连接
|
||||
this.connect() |
||||
return true |
||||
} |
||||
|
||||
// 手动重新初始化连接（用于登录后重新连接）
|
||||
reinitialize() { |
||||
if (this.userId && getToken()) { |
||||
console.log('尝试重新初始化WebSocket连接...') |
||||
return this.init(this.userId) |
||||
} |
||||
console.warn('无法重新初始化WebSocket连接: 用户ID或token缺失') |
||||
return false |
||||
} |
||||
|
||||
// 建立连接
|
||||
connect() { |
||||
// 检查URL是否已初始化
|
||||
if (!this.url) { |
||||
console.error('WebSocket连接失败: URL未初始化') |
||||
return |
||||
} |
||||
|
||||
// 确保之前的连接已关闭
|
||||
if (this.ws) { |
||||
try { |
||||
this.ws.close() |
||||
} catch (e) { |
||||
console.warn('关闭旧WebSocket连接时出错:', e) |
||||
} |
||||
this.ws = null |
||||
} |
||||
|
||||
try { |
||||
console.log(`正在建立WebSocket连接${this.tokenMode} (尝试 ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`) |
||||
|
||||
// 根据token模式创建WebSocket连接
|
||||
if (this.tokenMode === 'header') { |
||||
// header模式: 使用WebSocket子协议传递token
|
||||
// 注意：JavaScript WebSocket API要求子协议名必须是有效的字符串，不能包含特殊字符
|
||||
// 后端应从Sec-WebSocket-Protocol请求头中获取token信息
|
||||
const token = getToken() |
||||
if (token) { |
||||
// 在token前面加上'token-'前缀
|
||||
// 使用简洁的子协议名称，让后端从请求头中解析完整token
|
||||
this.ws = new WebSocket(this.url, ['auth-token']) |
||||
console.log('WebSocket连接将通过Sec-WebSocket-Protocol头传递token') |
||||
} else { |
||||
console.error('无法获取token，使用普通连接') |
||||
this.ws = new WebSocket(this.url) |
||||
} |
||||
} else { |
||||
// url或message模式: 直接创建连接
|
||||
this.ws = new WebSocket(this.url) |
||||
} |
||||
|
||||
// 设置事件监听
|
||||
this.ws.onopen = this.onOpen.bind(this) |
||||
this.ws.onmessage = this.onMessage.bind(this) |
||||
this.ws.onerror = this.onError.bind(this) |
||||
this.ws.onclose = this.onClose.bind(this) |
||||
} catch (error) { |
||||
console.error('WebSocket连接异常:', error) |
||||
// 直接触发重连
|
||||
setTimeout(() => this.reconnect(), this.reconnectInterval) |
||||
} |
||||
} |
||||
|
||||
// 连接打开回调
|
||||
onOpen(event) { |
||||
console.log('WebSocket连接已建立') |
||||
this.connected = true |
||||
this.reconnectAttempts = 0 |
||||
|
||||
// message模式: 连接成功后发送token
|
||||
if (this.tokenMode === 'message') { |
||||
const token = getToken() |
||||
if (token) { |
||||
const authMessage = { |
||||
type: 'auth', |
||||
token: `token-${token}`, // 在token前面加上'token-'前缀
|
||||
userId: this.userId |
||||
} |
||||
this.send(authMessage) |
||||
console.log('已发送认证消息:', authMessage) |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 接收消息回调
|
||||
onMessage(event) { |
||||
try { |
||||
const message = JSON.parse(event.data) |
||||
this.handleMessage(message) |
||||
} catch (error) { |
||||
console.error('解析消息失败:', error) |
||||
} |
||||
} |
||||
|
||||
// 处理接收到的消息
|
||||
handleMessage(message) { |
||||
console.log('收到站内信:', message) |
||||
|
||||
// 使用Element UI的Notification组件显示消息
|
||||
Notification({ |
||||
title: message.title || '系统通知', |
||||
message: message.content, |
||||
type: 'info', |
||||
duration: 1000000, // 10秒后自动关闭
|
||||
showClose: true, |
||||
onClick: () => { |
||||
// 可以在这里添加点击通知后的处理逻辑
|
||||
console.log('用户点击了通知:', message.messageId) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// 错误处理回调
|
||||
onError(error) { |
||||
console.error('WebSocket错误:', error) |
||||
// 添加更详细的错误信息
|
||||
if (this.ws) { |
||||
console.error('WebSocket状态:', this.ws.readyState) |
||||
console.error('WebSocket URL:', this.ws.url) |
||||
} |
||||
// 可能的原因分析
|
||||
console.error('可能的连接失败原因：') |
||||
console.error('1. 服务器WebSocket服务未运行或路径错误') |
||||
console.error('2. 网络问题或防火墙阻止') |
||||
console.error('3. CORS配置问题') |
||||
console.error('4. token无效或过期') |
||||
} |
||||
|
||||
// 连接关闭回调
|
||||
onClose(event) { |
||||
console.log('WebSocket连接已关闭', event) |
||||
// 输出关闭原因和代码
|
||||
console.log('关闭代码:', event.code) |
||||
console.log('关闭原因:', event.reason) |
||||
console.log('是否正常关闭:', event.wasClean) |
||||
|
||||
this.connected = false |
||||
this.reconnect() |
||||
} |
||||
|
||||
// 重连逻辑
|
||||
reconnect() { |
||||
// 检查token是否仍然有效
|
||||
const token = getToken() |
||||
if (!token) { |
||||
console.warn('WebSocket重连取消: token已失效或不存在') |
||||
return |
||||
} |
||||
|
||||
if (this.reconnectAttempts < this.maxReconnectAttempts) { |
||||
this.reconnectAttempts++ |
||||
// 指数退避策略 - 每次重连间隔增加
|
||||
const currentInterval = this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts - 1) |
||||
console.log(`WebSocket将在 ${Math.round(currentInterval/1000)} 秒后进行第${this.reconnectAttempts}次重连...`) |
||||
|
||||
setTimeout(() => { |
||||
// 根据不同token模式更新认证信息
|
||||
if (this.tokenMode === 'url' && this.url) { |
||||
// URL模式: 更新URL中的token参数
|
||||
// 在token前面加上'token-'前缀
|
||||
this.url = this.url.replace(/token=[^&]*/, `token=token-${token}`) |
||||
} else if (this.tokenMode === 'header') { |
||||
// Header模式: 重连时会自动从getToken()获取最新token
|
||||
console.log('Header模式下重连，将使用最新token') |
||||
} else if (this.tokenMode === 'message') { |
||||
// Message模式: 重连成功后会自动发送认证消息
|
||||
console.log('Message模式下重连，将在连接建立后发送认证消息') |
||||
} |
||||
this.connect() |
||||
}, currentInterval) |
||||
} else { |
||||
console.error('WebSocket重连失败，已达到最大重试次数') |
||||
// 不显示错误消息，避免干扰用户体验
|
||||
// Message.error('消息服务连接失败，请刷新页面重试')
|
||||
} |
||||
} |
||||
|
||||
// 发送消息
|
||||
send(data) { |
||||
if (this.connected && this.ws.readyState === WebSocket.OPEN) { |
||||
this.ws.send(JSON.stringify(data)) |
||||
} else { |
||||
console.error('WebSocket连接未建立') |
||||
} |
||||
} |
||||
|
||||
// 关闭连接
|
||||
close() { |
||||
if (this.ws) { |
||||
this.ws.close() |
||||
this.ws = null |
||||
} |
||||
this.connected = false |
||||
} |
||||
} |
||||
|
||||
// 导出单例实例
|
||||
const websocketClient = new WebSocketClient() |
||||
export default websocketClient |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,571 @@ |
||||
<template> |
||||
<div class="body"> |
||||
<div class="container"> |
||||
<!-- 管理员专属欢迎信息 --> |
||||
<div class="admin-welcome"> |
||||
<h1>管理员控制台</h1> |
||||
<p>欢迎回来，管理员！您可以在这里查看所有系统信息和管理用户。</p> |
||||
</div> |
||||
<!-- 上层：三个模块并排 --> |
||||
<div class="top-section"> |
||||
<!-- 预警信息统计 --> |
||||
<div class="panel"> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"><i class="fas fa-exclamation-triangle"></i> 预警信息统计</h2> |
||||
</div> |
||||
<div class="stats-container"> |
||||
<div class="stat-card" :class="alertMessageData.yearCount == 0?'normal':''"> |
||||
<div class="stat-label">年预警总数</div> |
||||
<div class="stat-value">{{ alertMessageData.yearCount }}</div> |
||||
</div> |
||||
<div class="stat-card" :class="alertMessageData.monthCount == 0?'normal':''"> |
||||
<div class="stat-label">月预警总数</div> |
||||
<div class="stat-value">{{ alertMessageData.monthCount }}</div> |
||||
</div> |
||||
<!-- 等级预警 --> |
||||
<div class="stat-card" :class="i.count == 0?'normal':i.count>10?'warning':''" v-for="i in alertMessageData.levelCount" :key="i.id"> |
||||
<div class="stat-label">{{ `等级${i.level}预警` }}</div> |
||||
<div class="stat-value">{{ i.count }}</div> |
||||
</div> |
||||
<!-- 设备预警 --> |
||||
<div class="stat-card" :class="i.count == 0?'normal':i.count>10?'warning':''" v-for="i in alertMessageData.typeCount" :key="i.id"> |
||||
<div class="stat-label">{{ `${i.name}预警` }}</div> |
||||
<div class="stat-value">{{ i.count }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 检测设备信息 --> |
||||
<div class="panel"> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"><i class="fas fa-microchip"></i> 检测设备信息</h2> |
||||
</div> |
||||
<ul class="device-list"> |
||||
<PieChart height="250px" :chartData="byEquTypeData"/> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 设备预警信息 --> |
||||
<div class="panel"> |
||||
<div class="card"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"><i class="fas fa-bell"></i> 设备预警信息</h2> |
||||
</div> |
||||
<el-empty description="暂无预警" v-if="alerts.length == 0"></el-empty> |
||||
<ul class="device-list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="isLoading || noMore" infinite-scroll-distance="50" infinite-scroll-delay="300"> |
||||
<li class="device-item" v-for="alert in alerts" :key="alert.id" :class="alert.status === 'UNHANDLED' ? 'warning' : 'normal'" > |
||||
<div class="device-icon"> |
||||
<i :class="alert.status === 'UNHANDLED' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i> |
||||
</div> |
||||
<div class="device-info"> |
||||
<div class="device-name">{{ alert.name }}</div> |
||||
<div class="device-details"> |
||||
<div>预警时间: {{ parseTime(alert.occurTime) }}</div> |
||||
<div>设备位置: {{ alert.location }}</div> |
||||
<div>预警信息: {{ alert.message }}</div> |
||||
</div> |
||||
</div> |
||||
<span :class="alert.status === 'UNHANDLED' ? 'alert-badge' : 'normal-badge'"> |
||||
{{ '等级'+alert.level }} |
||||
</span> |
||||
</li> |
||||
<p v-if="isLoading">加载中...</p> |
||||
<p v-if="noMore">没有更多了</p> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 下层：设备状态监控独立一行 --> |
||||
<div class="bottom-section"> |
||||
<div class="card full-width"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title"><i class="fas fa-desktop"></i> 设备状态监控</h2> |
||||
<div class="last-update">最后更新: {{ lastUpdate }}</div> |
||||
</div> |
||||
<div class="table-container"> |
||||
|
||||
<el-empty description="暂无预警" v-if="tableHeaders.length == 0"></el-empty> |
||||
<table v-else> |
||||
<thead> |
||||
<tr> |
||||
<th v-for="header in tableHeaders" :key="header">{{ header }}</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr v-for="device in deviceStatus" :key="device.id"> |
||||
<td>{{ device.name }}</td> |
||||
<td>{{ device.location }}</td> |
||||
<td> |
||||
<span :class="getCpuStatus(device.cpuUtilization || 0)"></span> |
||||
{{ device.cpuUtilization || 0 }}% |
||||
</td> |
||||
<td> |
||||
<span :class="getMemoryStatus(device.memoryUtilization || 0)"></span> |
||||
{{ device.memoryUtilization || 0 }}% |
||||
</td> |
||||
<td>{{ device.temperature || 0 }}°C</td> |
||||
<td> |
||||
<el-tag :hit="false" :type="device.health == '1'?'success':device.health == '2'?'':device.health == '3'?'danger':device.health == '4'?'warning':'info'"> {{ device.health == '1'?'健康':device.health == '2'?'良好':device.health == '3'?'一般':device.health == '4'?'需维护':'未获取' }} </el-tag> |
||||
</td> |
||||
<td>{{ formatDuration(device.contWorkPeriod) }}</td> |
||||
<td>{{ parseTime(device.gatherTime) || '--' }}</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import PanelGroup from './dashboard/PanelGroup' |
||||
import LineChart from './dashboard/LineChart' |
||||
import RaddarChart from './dashboard/RaddarChart' |
||||
import PieChart from './dashboard/PieChart' |
||||
import BarChart from './dashboard/BarChart' |
||||
import digital from './dashboard/digital' |
||||
import { statistic, byEquType, listMonitor, alertMessageTimes } from "@/api/index/index" |
||||
import { getToken } from "@/utils/auth" |
||||
import Treeselect from "@riophae/vue-treeselect" |
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css" |
||||
import { Splitpanes, Pane } from "splitpanes" |
||||
import "splitpanes/dist/splitpanes.css" |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
components: { |
||||
PanelGroup, |
||||
LineChart, |
||||
RaddarChart, |
||||
PieChart, |
||||
BarChart, |
||||
digital |
||||
}, |
||||
data() { |
||||
return { |
||||
totalAlerts: 111, |
||||
activeAlerts: 42, |
||||
resolvedAlerts: 69, |
||||
lastUpdate: new Date().toLocaleString(), |
||||
|
||||
isLoading: false, // 加载状态 |
||||
noMore: false, // 是否无更多数据 |
||||
page: 1, // 当前页码 |
||||
devices: [ |
||||
{ id: 1, name: 'Forecasts', description: '预测分析系统', status: 'normal', icon: 'fas fa-chart-line' }, |
||||
{ id: 2, name: 'Gold', description: '核心处理单元', status: 'warning', icon: 'fas fa-server' }, |
||||
{ id: 3, name: 'Industries', description: '工业控制系统', status: 'normal', icon: 'fas fa-industry' } |
||||
], |
||||
// 设备预警信息 |
||||
alerts: [], |
||||
// 统计预警信息次数 |
||||
alertMessageData: [], |
||||
|
||||
byEquTypeData: [], |
||||
|
||||
tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'], |
||||
deviceStatus: [] |
||||
} |
||||
}, |
||||
methods: { |
||||
formatDuration(input) {// 类型安全校验 |
||||
if (typeof input !== 'string') return "0天0小时"; |
||||
|
||||
const match = input.match(/(\d+)\s*days?,\s*(\d+):/i); |
||||
return match ? `${match[1]}天${match[2]}小时` : "0天0小时"; |
||||
}, |
||||
|
||||
getCpuStatus(usage) { |
||||
if (usage < 50) return 'status-indicator status-good'; |
||||
if (usage < 80) return 'status-indicator status-warning'; |
||||
return 'status-indicator status-critical'; |
||||
}, |
||||
getMemoryStatus(usage) { |
||||
if (usage < 60) return 'status-indicator status-good'; |
||||
if (usage < 85) return 'status-indicator status-warning'; |
||||
return 'status-indicator status-critical'; |
||||
}, |
||||
getHealthStatus(health) { |
||||
if (health >= 80) return 'health-good'; |
||||
if (health >= 60) return 'health-warning'; |
||||
return 'health-critical'; |
||||
}, |
||||
getbyEquType() { |
||||
this.loading = true |
||||
byEquType().then(response => { |
||||
this.loading = false |
||||
this.byEquTypeData = response.data |
||||
} |
||||
) |
||||
}, |
||||
getlistMonitor() { |
||||
this.loading = true |
||||
listMonitor({pageSize: 100}).then(response => { |
||||
this.loading = false |
||||
this.deviceStatus = response.rows |
||||
} |
||||
) |
||||
}, |
||||
getalertMessageTimes() { |
||||
this.loading = true |
||||
alertMessageTimes().then(response => { |
||||
this.alertMessageData = response.data |
||||
this.loading = false |
||||
} |
||||
) |
||||
}, |
||||
async loadMore() { |
||||
if (this.isLoading || this.noMore) return; |
||||
this.isLoading = true; |
||||
try { |
||||
const res = await statistic({page:this.page,status:'UNHANDLED'}); // 模拟API请求 |
||||
if (res.rows.length < 10) { // 假设每页10条 |
||||
this.noMore = true; |
||||
} else { |
||||
this.alerts = [...this.alerts, ...res.rows]; |
||||
this.page++; |
||||
} |
||||
} catch (error) { |
||||
console.error('加载失败:', error); |
||||
} finally { |
||||
this.isLoading = false; |
||||
} |
||||
} |
||||
}, |
||||
created() { |
||||
this.getbyEquType() |
||||
this.getlistMonitor() |
||||
this.getalertMessageTimes() |
||||
|
||||
|
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.admin-welcome { |
||||
background-color: #f5f7fa; |
||||
border-radius: 8px; |
||||
padding: 20px; |
||||
margin-bottom: 20px; |
||||
border-left: 4px solid #409eff; |
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.admin-welcome h1 { |
||||
color: #409eff; |
||||
margin-bottom: 10px; |
||||
font-size: 24px; |
||||
} |
||||
|
||||
.admin-welcome p { |
||||
color: #606266; |
||||
margin: 0; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.body { |
||||
background-color: #f5f7fa; |
||||
color: #333; |
||||
line-height: 1.6; |
||||
padding: 20px; |
||||
} |
||||
|
||||
.header { |
||||
text-align: center; |
||||
margin-bottom: 30px; |
||||
} |
||||
|
||||
.header h1 { |
||||
color: #2c3e50; |
||||
margin-bottom: 10px; |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.header p { |
||||
color: #7f8c8d; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.top-section { |
||||
display: flex; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.bottom-section { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.panel { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.card { |
||||
background: white; |
||||
border-radius: 12px; |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
||||
padding: 20px; |
||||
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||||
height: 100%; |
||||
} |
||||
|
||||
.card:hover { |
||||
transform: translateY(-5px); |
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); |
||||
} |
||||
|
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 15px; |
||||
padding-bottom: 10px; |
||||
border-bottom: 1px solid #eaeaea; |
||||
} |
||||
|
||||
.card-title { |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
color: #2c3e50; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8px; |
||||
} |
||||
|
||||
.card-title i { |
||||
color: #3498db; |
||||
} |
||||
|
||||
.stats-container { |
||||
display: grid; |
||||
justify-content: space-between; |
||||
grid-template-columns: repeat(3, 1fr); |
||||
gap: 15px; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
height: 255px; |
||||
} |
||||
|
||||
.stat-card { |
||||
flex: 1; |
||||
background: linear-gradient(135deg, #3498db, #2c3e50); |
||||
color: white; |
||||
border-radius: 10px; |
||||
padding: 12px; |
||||
text-align: center; |
||||
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3); |
||||
} |
||||
|
||||
.stat-card.warning { |
||||
background: linear-gradient(135deg, #e74c3c, #c0392b); |
||||
box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3); |
||||
} |
||||
|
||||
.stat-card.normal { |
||||
background: linear-gradient(135deg, #2ecc71, #27ae60); |
||||
box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3); |
||||
} |
||||
|
||||
.stat-value { |
||||
font-size: 32px; |
||||
font-weight: 700; |
||||
margin: 10px 0; |
||||
} |
||||
|
||||
.stat-label { |
||||
font-size: 14px; |
||||
opacity: 0.9; |
||||
} |
||||
|
||||
.device-list { |
||||
list-style: none; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
max-height: 255px; |
||||
padding-left: 0; |
||||
} |
||||
|
||||
.device-item { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 12px 15px; |
||||
margin-bottom: 10px; |
||||
background: #f8f9fa; |
||||
border-radius: 8px; |
||||
border-left: 4px solid #3498db; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.device-item:hover { |
||||
background: #edf2f7; |
||||
transform: translateX(5px); |
||||
} |
||||
|
||||
.device-item.warning { |
||||
border-left-color: #e74c3c; |
||||
} |
||||
|
||||
.device-item.normal { |
||||
border-left-color: #2ecc71; |
||||
} |
||||
|
||||
.device-icon { |
||||
width: 40px; |
||||
height: 40px; |
||||
background: #3498db; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-right: 15px; |
||||
color: white; |
||||
} |
||||
|
||||
.device-item.warning .device-icon { |
||||
background: #e74c3c; |
||||
} |
||||
|
||||
.device-item.normal .device-icon { |
||||
background: #2ecc71; |
||||
} |
||||
|
||||
.device-info { |
||||
flex: 1; |
||||
} |
||||
|
||||
.device-name { |
||||
font-weight: 600; |
||||
margin-bottom: 5px; |
||||
} |
||||
|
||||
.device-details { |
||||
font-size: 13px; |
||||
color: #666; |
||||
} |
||||
|
||||
.alert-badge { |
||||
background: #e74c3c; |
||||
color: white; |
||||
padding: 3px 8px; |
||||
border-radius: 12px; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.normal-badge { |
||||
background: #2ecc71; |
||||
color: white; |
||||
padding: 3px 8px; |
||||
border-radius: 12px; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.table-container { |
||||
overflow-x: auto; |
||||
border-radius: 10px; |
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
||||
} |
||||
|
||||
table { |
||||
width: 100%; |
||||
border-collapse: collapse; |
||||
background: white; |
||||
} |
||||
|
||||
th { |
||||
background: #2c3e50; |
||||
color: white; |
||||
padding: 15px 12px; |
||||
text-align: left; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
td { |
||||
padding: 12px; |
||||
border-bottom: 1px solid #eaeaea; |
||||
} |
||||
|
||||
tr:hover { |
||||
background-color: #f5f7fa; |
||||
} |
||||
|
||||
.status-indicator { |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.status-good { |
||||
background-color: #2ecc71; |
||||
} |
||||
|
||||
.status-warning { |
||||
background-color: #f39c12; |
||||
} |
||||
|
||||
.status-critical { |
||||
background-color: #e74c3c; |
||||
} |
||||
|
||||
.health-bar { |
||||
height: 6px; |
||||
background: #ecf0f1; |
||||
border-radius: 3px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.health-fill { |
||||
height: 100%; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.health-good { |
||||
background: #2ecc71; |
||||
width: 85%; |
||||
} |
||||
|
||||
.health-warning { |
||||
background: #f39c12; |
||||
width: 65%; |
||||
} |
||||
|
||||
.health-critical { |
||||
background: #e74c3c; |
||||
width: 40%; |
||||
} |
||||
|
||||
.full-width { |
||||
width: 100%; |
||||
} |
||||
|
||||
@media (max-width: 1024px) { |
||||
.top-section { |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.stats-container { |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,197 @@ |
||||
<template> |
||||
<div class="notification-test-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="card-header"> |
||||
<span>站内信功能测试</span> |
||||
</div> |
||||
</template> |
||||
|
||||
<div class="test-content"> |
||||
<el-alert |
||||
title="WebSocket连接状态" |
||||
:type="connectionStatus === 'connected' ? 'success' : 'warning'" |
||||
:closable="false" |
||||
show-icon |
||||
> |
||||
<template #description> |
||||
当前状态: {{ connectionStatusText }} |
||||
</template> |
||||
</el-alert> |
||||
|
||||
<div class="test-actions"> |
||||
<el-button type="primary" @click="testNotification">发送测试通知</el-button> |
||||
<el-button @click="reconnectWebSocket">重新连接WebSocket</el-button> |
||||
<el-button type="danger" @click="disconnectWebSocket">断开WebSocket连接</el-button> |
||||
</div> |
||||
|
||||
<div class="message-log"> |
||||
<h3>消息日志</h3> |
||||
<el-scrollbar height="300px" class="log-scrollbar"> |
||||
<div v-for="(log, index) in messageLogs" :key="index" class="log-item"> |
||||
<span class="log-time">{{ formatTime(log.time) }}</span> |
||||
<span class="log-content">{{ log.content }}</span> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import websocketClient from '@/utils/websocket.js' |
||||
import { Notification } from 'element-ui' |
||||
import { mapState } from 'vuex' |
||||
|
||||
export default { |
||||
name: 'NotificationTest', |
||||
data() { |
||||
return { |
||||
connectionStatus: 'disconnected', |
||||
connectionStatusText: '未连接', |
||||
messageLogs: [] |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapState({ |
||||
userId: state => state.user.id |
||||
}) |
||||
}, |
||||
mounted() { |
||||
this.checkConnectionStatus() |
||||
this.logMessage('页面已加载，WebSocket状态检查完成') |
||||
}, |
||||
methods: { |
||||
// 检查WebSocket连接状态 |
||||
checkConnectionStatus() { |
||||
if (websocketClient.connected) { |
||||
this.connectionStatus = 'connected' |
||||
this.connectionStatusText = '已连接' |
||||
} else { |
||||
this.connectionStatus = 'disconnected' |
||||
this.connectionStatusText = '未连接' |
||||
} |
||||
}, |
||||
|
||||
// 发送测试通知 |
||||
testNotification() { |
||||
// 模拟接收到的WebSocket消息格式 |
||||
const mockMessage = { |
||||
messageId: Date.now(), |
||||
title: '测试通知', |
||||
content: '这是一条测试通知，用于验证站内信功能是否正常工作。', |
||||
timestamp: new Date().toISOString() |
||||
} |
||||
|
||||
// 使用Notification组件显示消息 |
||||
Notification({ |
||||
title: mockMessage.title, |
||||
message: mockMessage.content, |
||||
type: 'info', |
||||
duration: 10000, // 10秒后自动关闭 |
||||
showClose: true, |
||||
onClick: () => { |
||||
this.logMessage(`用户点击了通知: ${mockMessage.messageId}`) |
||||
} |
||||
}) |
||||
|
||||
this.logMessage(`已发送测试通知: ${mockMessage.title}`) |
||||
}, |
||||
|
||||
// 重新连接WebSocket |
||||
reconnectWebSocket() { |
||||
if (this.userId) { |
||||
websocketClient.init(this.userId) |
||||
this.checkConnectionStatus() |
||||
this.logMessage('正在重新连接WebSocket...') |
||||
} else { |
||||
this.logMessage('无法重新连接：未获取到用户ID') |
||||
this.$message.error('未获取到用户ID，请先登录') |
||||
} |
||||
}, |
||||
|
||||
// 断开WebSocket连接 |
||||
disconnectWebSocket() { |
||||
websocketClient.close() |
||||
this.checkConnectionStatus() |
||||
this.logMessage('WebSocket已断开连接') |
||||
}, |
||||
|
||||
// 记录消息日志 |
||||
logMessage(content) { |
||||
this.messageLogs.push({ |
||||
time: new Date(), |
||||
content: content |
||||
}) |
||||
// 保持日志最新的100条 |
||||
if (this.messageLogs.length > 100) { |
||||
this.messageLogs.shift() |
||||
} |
||||
// 滚动到底部 |
||||
this.$nextTick(() => { |
||||
const scrollbar = this.$el.querySelector('.log-scrollbar .el-scrollbar__wrap') |
||||
if (scrollbar) { |
||||
scrollbar.scrollTop = scrollbar.scrollHeight |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
// 格式化时间 |
||||
formatTime(date) { |
||||
const d = new Date(date) |
||||
const hh = d.getHours().toString().padStart(2, '0') |
||||
const mm = d.getMinutes().toString().padStart(2, '0') |
||||
const ss = d.getSeconds().toString().padStart(2, '0') |
||||
return `${hh}:${mm}:${ss}` |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.notification-test-container { |
||||
padding: 20px; |
||||
} |
||||
|
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.test-content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
} |
||||
|
||||
.test-actions { |
||||
display: flex; |
||||
gap: 10px; |
||||
} |
||||
|
||||
.message-log h3 { |
||||
margin-bottom: 10px; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.log-item { |
||||
display: flex; |
||||
padding: 5px 0; |
||||
border-bottom: 1px solid #f0f0f0; |
||||
} |
||||
|
||||
.log-time { |
||||
color: #909399; |
||||
margin-right: 10px; |
||||
font-size: 12px; |
||||
min-width: 80px; |
||||
} |
||||
|
||||
.log-content { |
||||
flex: 1; |
||||
font-size: 14px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue