-
-
-
-
-
-
-
{{ device.name }}
-
{{ device.value || 'N/A' }}
+
@@ -262,8 +242,10 @@ export default {
showWarningHistory: false,
selectedDevice: {},
selectedRoom: {},
- historyStartDate: '',
- historyEndDate: '',
+ dateRange: [],
+ maxTime: '',
+ minTime: '',
+ historyData: null,
warningLevelFilter: 'all',
warningStats: {
annual: 156,
@@ -285,107 +267,7 @@ export default {
floorDeviceDistribution: [
{ floor: "1层", count: 6 },
],
- floors: [
- {
- level: 1,
- name: '一层 - 数据中心',
- totalDevices: 32,
- onlineDevices: 30,
- warningDevices: 2,
- rooms: [
- { id: 101, name: '服务器机房A', position: { left: 5, top: 10, width: 25, height: 35 } },
- { id: 102, name: '服务器机房B', position: { left: 35, top: 10, width: 25, height: 35 } },
- { id: 103, name: '存储机房', position: { left: 65, top: 10, width: 30, height: 35 } },
- { id: 104, name: '网络设备间', position: { left: 5, top: 50, width: 25, height: 25 } },
- { id: 105, name: 'UPS电源室', position: { left: 35, top: 50, width: 25, height: 25 } },
- { id: 106, name: '空调机房', position: { left: 65, top: 50, width: 30, height: 25 } },
- { id: 107, name: '走廊', position: { left: 0, top: 80, width: 100, height: 15 } }
- ],
- devices: [
- { id: 101, name: '核心服务器1', status: 'normal', room: '服务器机房A', position: { x: 15, y: 20 }, type: '服务器' },
- { id: 102, name: '核心服务器2', status: 'normal', room: '服务器机房A', position: { x: 15, y: 30 }, type: '服务器' },
- { id: 103, name: '存储阵列A', status: 'warning', room: '存储机房', position: { x: 75, y: 20 }, type: '存储设备' },
- { id: 104, name: '网络交换机', status: 'normal', room: '网络设备间', position: { x: 15, y: 60 }, type: '网络设备' },
- { id: 105, name: '安全审计系统', status: 'error', room: '服务器机房B', position: { x: 45, y: 20 }, type: '安全设备' },
- { id: 106, name: 'UPS电源A', status: 'normal', room: 'UPS电源室', position: { x: 45, y: 60 }, type: '电源设备' },
- { id: 107, name: '备份服务器', status: 'normal', room: '服务器机房B', position: { x: 45, y: 30 }, type: '服务器' },
- { id: 108, name: '数据库集群', status: 'normal', room: '存储机房', position: { x: 75, y: 30 }, type: '服务器' }
- ]
- },
- {
- level: 2,
- name: '二层 - 网络中心',
- totalDevices: 28,
- onlineDevices: 26,
- warningDevices: 2,
- rooms: [
- { id: 201, name: '核心交换机房', position: { left: 10, top: 10, width: 35, height: 40 } },
- { id: 202, name: '防火墙区域', position: { left: 50, top: 10, width: 40, height: 40 } },
- { id: 203, name: '监控区域', position: { left: 10, top: 55, width: 35, height: 30 } },
- { id: 204, name: '设备维护室', position: { left: 50, top: 55, width: 40, height: 30 } },
- { id: 205, name: '走廊', position: { left: 0, top: 90, width: 100, height: 5 } }
- ],
- devices: [
- { id: 201, name: '路由器主', status: 'normal', room: '核心交换机房', position: { x: 25, y: 25 }, type: '网络设备' },
- { id: 202, name: '防火墙1', status: 'normal', room: '防火墙区域', position: { x: 65, y: 25 }, type: '安全设备' },
- { id: 203, name: '负载均衡器', status: 'warning', room: '核心交换机房', position: { x: 25, y: 35 }, type: '网络设备' },
- { id: 204, name: 'VPN网关', status: 'normal', room: '防火墙区域', position: { x: 65, y: 35 }, type: '安全设备' },
- { id: 205, name: 'IDS系统', status: 'warning', room: '监控区域', position: { x: 25, y: 70 }, type: '安全设备' },
- { id: 206, name: '网络监控', status: 'normal', room: '监控区域', position: { x: 25, y: 60 }, type: '监控设备' },
- { id: 207, name: '交换机A', status: 'normal', room: '设备维护室', position: { x: 65, y: 70 }, type: '网络设备' },
- { id: 208, name: '交换机B', status: 'normal', room: '设备维护室', position: { x: 75, y: 70 }, type: '网络设备' }
- ]
- },
- {
- level: 3,
- name: '三层 - 监控中心',
- totalDevices: 24,
- onlineDevices: 22,
- warningDevices: 2,
- rooms: [
- { id: 301, name: '大屏监控区', position: { left: 5, top: 5, width: 60, height: 45 } },
- { id: 302, name: '操作台区域', position: { left: 70, top: 5, width: 25, height: 45 } },
- { id: 303, name: '存储区', position: { left: 5, top: 55, width: 40, height: 35 } },
- { id: 304, name: '设备间', position: { left: 50, top: 55, width: 45, height: 35 } },
- { id: 305, name: '走廊', position: { left: 0, top: 95, width: 100, height: 5 } }
- ],
- devices: [
- { id: 301, name: '监控服务器', status: 'normal', room: '大屏监控区', position: { x: 30, y: 25 }, type: '服务器' },
- { id: 302, name: '录像设备', status: 'error', room: '存储区', position: { x: 20, y: 70 }, type: '存储设备' },
- { id: 303, name: '分析服务器', status: 'normal', room: '大屏监控区', position: { x: 45, y: 25 }, type: '服务器' },
- { id: 304, name: '报警主机', status: 'normal', room: '操作台区域', position: { x: 80, y: 25 }, type: '安全设备' },
- { id: 305, name: '门禁控制器', status: 'normal', room: '设备间', position: { x: 65, y: 70 }, type: '安防设备' },
- { id: 306, name: '环境监测', status: 'warning', room: '设备间', position: { x: 75, y: 70 }, type: '监控设备' },
- { id: 307, name: '摄像头控制', status: 'normal', room: '操作台区域', position: { x: 80, y: 35 }, type: '安防设备' },
- { id: 308, name: '报警系统', status: 'normal', room: '设备间', position: { x: 65, y: 80 }, type: '安全设备' }
- ]
- },
- {
- level: 4,
- name: '四层 - 办公区域',
- totalDevices: 20,
- onlineDevices: 18,
- warningDevices: 2,
- rooms: [
- { id: 401, name: '办公区A', position: { left: 5, top: 10, width: 40, height: 35 } },
- { id: 402, name: '办公区B', position: { left: 50, top: 10, width: 45, height: 35 } },
- { id: 403, name: '会议室', position: { left: 5, top: 50, width: 40, height: 35 } },
- { id: 404, name: '打印区', position: { left: 50, top: 50, width: 20, height: 35 } },
- { id: 405, name: '茶水间', position: { left: 75, top: 50, width: 20, height: 35 } },
- { id: 406, name: '走廊', position: { left: 0, top: 90, width: 100, height: 5 } }
- ],
- devices: [
- { id: 401, name: '办公服务器', status: 'normal', room: '办公区A', position: { x: 25, y: 25 }, type: '服务器' },
- { id: 402, name: '打印机', status: 'warning', room: '打印区', position: { x: 60, y: 65 }, type: '办公设备' },
- { id: 403, name: '网络终端', status: 'normal', room: '办公区B', position: { x: 70, y: 25 }, type: '网络设备' },
- { id: 404, name: '视频会议', status: 'normal', room: '会议室', position: { x: 25, y: 65 }, type: '会议设备' },
- { id: 405, name: '电话系统', status: 'warning', room: '办公区A', position: { x: 25, y: 35 }, type: '通信设备' },
- { id: 406, name: '考勤系统', status: 'normal', room: '办公区B', position: { x: 70, y: 35 }, type: '安防设备' },
- { id: 407, name: '门禁系统', status: 'normal', room: '走廊', position: { x: 50, y: 92 }, type: '安防设备' },
- { id: 408, name: '投影设备', status: 'normal', room: '会议室', position: { x: 25, y: 55 }, type: '会议设备' }
- ]
- }
- ],
+ floors: [],
dataFlows: [],
barChart: null,
pieChart: null,
@@ -437,19 +319,39 @@ export default {
this.updateTimeDisplay();
setInterval(this.updateTimeDisplay, 1000);
- // 初始化日期
- const today = new Date();
- this.historyEndDate = today.toISOString().split('T')[0];
- const oneWeekAgo = new Date(today);
- oneWeekAgo.setDate(today.getDate() - 7);
- this.historyStartDate = oneWeekAgo.toISOString().split('T')[0];
+ // 初始化日期范围
+ // const today = new Date();
+ // const oneWeekAgo = new Date(today);
+ // oneWeekAgo.setDate(today.getDate() - 7);
+
+ // // 格式化日期为YYYY-MM-DD HH:mm:ss格式
+ // const formatDate = (date) => {
+ // const year = date.getFullYear();
+ // const month = String(date.getMonth() + 1).padStart(2, '0');
+ // const day = String(date.getDate()).padStart(2, '0');
+ // const hours = String(date.getHours()).padStart(2, '0');
+ // const minutes = String(date.getMinutes()).padStart(2, '0');
+ // const seconds = String(date.getSeconds()).padStart(2, '0');
+ // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+ // };
+
+ // this.dateRange = [
+ // formatDate(oneWeekAgo),
+ // formatDate(today)
+ // ];
+ // console.log("%c 🤸♀️: mounted -> this.dateRange ", "font-size:16px;background-color:#1a9bd6;color:white;", this.dateRange)
+ // // 初始化maxTime和minTime
+ // this.minTime = this.dateRange[0];
+ // this.maxTime = this.dateRange[1];
this.generateDataFlows();
// 使用nextTick确保DOM已完全渲染
this.$nextTick(() => {
- this.initPieChart();
- });
+ this.initPieChart();
+ // 初始化历史图表
+ // this.initHistoryChart();
+ });
// 监听窗口大小变化
window.addEventListener('resize', this.handleResize);
@@ -465,14 +367,11 @@ export default {
this.loadAlertTimes();
// 加载楼层设备分布
this.loadFloorDeviceDistribution();
-
- // 定期更新设备状态数据（每分钟更新一次）
+
+ // 定期更新设备状态数据（每分钟更新一次）
setInterval(() => {
this.refreshDeviceStatus();
}, 60000);
-
- // 模拟WebSocket连接
- this.simulateWebSocket();
},
beforeDestroy() {
// 移除事件监听
@@ -482,7 +381,32 @@ export default {
}
},
methods: {
- formatDuration(input) {
+ // 处理日期范围变化，将结束时间设置为23:59:59
+ handleDateRangeChange(range) {
+ if (range && range.length === 2) {
+ // 保留开始时间不变，将结束时间设置为当天23:59:59
+ const endDate = new Date(range[1]);
+ endDate.setHours(23, 59, 59, 999);
+
+ // 格式化为yyyy-MM-dd HH:mm:ss
+ const endDateTime = endDate.getFullYear() + '-' +
+ String(endDate.getMonth() + 1).padStart(2, '0') + '-' +
+ String(endDate.getDate()).padStart(2, '0') + ' ' +
+ '23:59:59';
+
+ // 更新dateRange
+ this.dateRange = [range[0], endDateTime];
+
+ // 更新minTime和maxTime
+ this.minTime = this.dateRange[0];
+ this.maxTime = this.dateRange[1];
+ }
+ },
+
+ formatDuration(input) {
+ if (!input) {
+ return "无数据";
+ }
const regex = /(\d+)\s*days,\s*(\d+):/;
const match = input.match(regex);
return match
@@ -692,18 +616,52 @@ export default {
this.pieChart.setOption(option);
},
+ // 加载历史数据
+ loadHistoryData() {
+ if (!this.dateRange || this.dateRange.length !== 2) {
+ this.$message.warning('请选择日期范围');
+ return;
+ }
+ // 将组件获取的时间赋值给maxTime、minTime
+ this.minTime = this.dateRange[0];
+ this.maxTime = this.dateRange[1];
+
+ const params = {
+ id: this.selectedDevice.id,
+ minTime: this.minTime,
+ maxTime: this.maxTime,
+ pageNum: 1,
+ pageSize: 1000
+ };
+
+ historyQuery(params).then(response => {
+ if (response.code === 200 && response.data) {
+ this.historyData = response.data;
+ this.initHistoryChart();
+ }
+ }).catch(error => {
+ console.error('获取历史数据失败:', error);
+ this.$message.error('获取历史数据失败');
+ });
+ },
+
initHistoryChart() {
if (!this.$refs.historyChart) return;
this.historyChart = echarts.init(this.$refs.historyChart);
+ // 使用接口返回的数据或默认数据
+ const timeList = this.historyData?.timeList || ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24'];
+ const cpuList = this.historyData?.cpuList || [45, 52, 48, 60, 55, 58, 62];
+ const memoryList = this.historyData?.memoryList || [62, 58, 65, 70, 68, 72, 75];
+
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis'
},
legend: {
- data: ['CPU使用率', '内存使用率', '网络流量'],
+ data: ['CPU使用率', '内存使用率'],
textStyle: {
color: '#a0aec0'
}
@@ -717,14 +675,21 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24'],
+ data: timeList,
axisLine: {
lineStyle: {
color: '#4dabff'
}
},
axisLabel: {
- color: '#a0aec0'
+ color: '#a0aec0',
+ // 格式化时间戳为更友好的显示格式
+ formatter: function(value) {
+ if (typeof value === 'string' && value.includes(' ')) {
+ return value.split(' ')[1].substring(0, 5); // 只显示时分
+ }
+ return value;
+ }
}
},
yAxis: {
@@ -749,7 +714,7 @@ export default {
name: 'CPU使用率',
type: 'line',
smooth: true,
- data: [45, 52, 48, 60, 55, 58, 62],
+ data: cpuList,
itemStyle: {
color: '#4dabff'
},
@@ -772,7 +737,7 @@ export default {
name: '内存使用率',
type: 'line',
smooth: true,
- data: [62, 58, 65, 70, 68, 72, 75],
+ data: memoryList,
itemStyle: {
color: '#62f7ff'
},
@@ -790,29 +755,6 @@ export default {
}]
}
}
- },
- {
- name: '网络流量',
- type: 'line',
- smooth: true,
- data: [78, 82, 75, 90, 85, 88, 95],
- itemStyle: {
- color: '#ffa726'
- },
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: 'rgba(255, 167, 38, 0.3)'
- }, {
- offset: 1, color: 'rgba(255, 167, 38, 0.1)'
- }]
- }
- }
}
]
};
@@ -886,7 +828,7 @@ export default {
};
historyQuery({ id: device.id, ...historyQueryList }).then(response => {
- this.historyQueryData = response.data;
+ this.historyData = response.data;
this.$nextTick(() => {
this.initHistoryChart();
});
@@ -910,19 +852,12 @@ export default {
getRoomDevices() {
const currentFloor = this.getCurrentFloor();
- return currentFloor.devices.filter(device => device.room === this.selectedRoom.name);
},
controlDevice(action) {
alert(`执行设备控制: ${action} - ${this.selectedDevice.name}`);
// 这里可以添加实际的设备控制逻辑
- },
-
- loadHistoryData() {
- alert(`加载历史数据: ${this.historyStartDate} 至 ${this.historyEndDate}`);
- // 这里可以添加实际的历史数据加载逻辑
- },
-
+ },
filterByWarningLevel(level) {
if (this.warningLevelFilter === level) {
this.warningLevelFilter = 'all';
@@ -1005,25 +940,6 @@ export default {
default: return '未知';
}
},
-
- simulateWebSocket() {
- // 模拟WebSocket实时数据推送
- setInterval(() => {
- // 随机更新一个设备状态
- const floorIndex = Math.floor(Math.random() * this.floors.length);
- const deviceIndex = Math.floor(Math.random() * this.floors[floorIndex].devices.length);
-
- const device = this.floors[floorIndex].devices[deviceIndex];
- const oldStatus = device.status;
-
- if (Math.random() > 0.7) {
- device.status = Math.random() > 0.5 ? 'warning' : 'error';
- } else if (oldStatus !== 'normal' && Math.random() > 0.8) {
- device.status = 'normal';
- }
-
- }, 3000);
- },
// 楼层设备展示相关方法
switchFloor(floorLevel) {
@@ -1041,10 +957,7 @@ export default {
getCurrentFloor() {
return this.floors.find(floor => floor.level === this.currentFloor) || this.floors[0];
},
-
- getCurrentFloorDevices() {
- return this.getCurrentFloor().devices;
- }
+
}
}