0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

【web】 首页UI调整完成

Browse Source
dev
Wangxin 8 months ago
parent 68ca7e555c
commit 5124226565
1 changed files with 127 additions and 214 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 341
      ALOps_sys_fe/alops-ui/src/views/index.vue

341
ALOps_sys_fe/alops-ui/src/views/index.vue
Unescape View File

@ -102,14 +102,14 @@
<el-scrollbar class="warning-scrollbar"> <el-scrollbar class="warning-scrollbar">
<div v-for="warning in filteredWarnings" <div v-for="warning in filteredWarnings"
:key="warning.id" :key="warning.id"
class="warning-item" class="warning-item" >
@click="showDeviceDetail(warning)">
<div class="warning-header"> <div class="warning-header">
<span :class="['warning-type', `level-${warning.displayLevel}`]">{{ warning.name }}</span> <span :class="['warning-type', `level-${warning.displayLevel}`]">{{ warning.name }}</span>
</div> </div>
<div class="warning-time">预警时间: {{ warning.time }}</div> <div class="warning-time">预警时间: {{ warning.time }}</div>
<div class="warning-position">设备位置: {{ warning.location }}</div> <div class="warning-position">设备位置: {{ warning.location }}</div>
<div class="warning-detail">预警信息: {{ warning.ruleName }}</div> <div class="warning-detail">预警规则: {{ warning.ruleName }}</div>
<div class="warning-detail">预警详情: {{ warning.message }}</div>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
@ -188,47 +188,27 @@
<span class="detail-label">最后维护:</span> <span class="detail-label">最后维护:</span>
<span class="detail-value">{{ selectedDevice.lastMaintenance || '2024-09-15' }}</span> <span class="detail-value">{{ selectedDevice.lastMaintenance || '2024-09-15' }}</span>
</div> --> </div> -->
<div class="control-buttons">
<button class="control-btn btn-restart" @click="controlDevice('restart')">重启设备</button>
<button class="control-btn btn-shutdown" @click="controlDevice('shutdown')">关机</button>
<button class="control-btn btn-reset" @click="controlDevice('reset')">重置配置</button>
</div>
</div> </div>
</div> </div>
<div class="detail-section"> <div class="detail-section">
<h3>历史数据 <div class="detail-section-tit">
<h3>历史数据</h3>
<div class="search-controls"> <div class="search-controls">
<input type="date" class="date-input" v-model="historyStartDate"> <el-date-picker
<span>至</span> v-model="dateRange"
<input type="date" class="date-input" v-model="historyEndDate"> type="daterange"
<button class="panel-btn" @click="loadHistoryData">查询</button> range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
@change="handleDateRangeChange"
class="date-picker"
/>
<el-button type="primary" @click="loadHistoryData">查询</el-button>
</div> </div>
</h3>
<div class="history-chart" ref="historyChart"></div>
</div>
</div>
</div>
</div>
<!-- 房间设备列表模态框 -->
<div class="modal-overlay" v-if="showRoomModal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">房间设备 - {{ selectedRoom.name }}</h2>
<button class="modal-close" @click="closeRoomModal">&times;</button>
</div>
<div class="modal-body">
<div class="device-list">
<div v-for="device in getRoomDevices()"
:key="device.id"
class="device-item"
@click="showDeviceDetail(device)">
<div :class="['device-status', `status-${device.status}`]"></div>
<div class="device-name">{{ device.name }}</div>
<div class="device-value">{{ device.value || 'N/A' }}</div>
</div> </div>
<div class="history-chart" ref="historyChart"></div>
</div> </div>
</div> </div>
</div> </div>
@ -262,8 +242,10 @@ export default {
showWarningHistory: false, showWarningHistory: false,
selectedDevice: {}, selectedDevice: {},
selectedRoom: {}, selectedRoom: {},
historyStartDate: '', dateRange: [],
historyEndDate: '', maxTime: '',
minTime: '',
historyData: null,
warningLevelFilter: 'all', warningLevelFilter: 'all',
warningStats: { warningStats: {
annual: 156, annual: 156,
@ -285,107 +267,7 @@ export default {
floorDeviceDistribution: [ floorDeviceDistribution: [
{ floor: "1层", count: 6 }, { floor: "1层", count: 6 },
], ],
floors: [ 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: '会议设备' }
]
}
],
dataFlows: [], dataFlows: [],
barChart: null, barChart: null,
pieChart: null, pieChart: null,
@ -437,19 +319,39 @@ export default {
this.updateTimeDisplay(); this.updateTimeDisplay();
setInterval(this.updateTimeDisplay, 1000); setInterval(this.updateTimeDisplay, 1000);
// 初始化日期 // 初始化日期范围
const today = new Date(); // const today = new Date();
this.historyEndDate = today.toISOString().split('T')[0]; // const oneWeekAgo = new Date(today);
const oneWeekAgo = new Date(today); // oneWeekAgo.setDate(today.getDate() - 7);
oneWeekAgo.setDate(today.getDate() - 7);
this.historyStartDate = oneWeekAgo.toISOString().split('T')[0]; // // 格式化日期为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(); this.generateDataFlows();
// 使用nextTick确保DOM已完全渲染 // 使用nextTick确保DOM已完全渲染
this.$nextTick(() => { this.$nextTick(() => {
this.initPieChart(); this.initPieChart();
}); // 初始化历史图表
// this.initHistoryChart();
});
// 监听窗口大小变化 // 监听窗口大小变化
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
@ -465,14 +367,11 @@ export default {
this.loadAlertTimes(); this.loadAlertTimes();
// 加载楼层设备分布 // 加载楼层设备分布
this.loadFloorDeviceDistribution(); this.loadFloorDeviceDistribution();
// 定期更新设备状态数据（每分钟更新一次） // 定期更新设备状态数据（每分钟更新一次）
setInterval(() => { setInterval(() => {
this.refreshDeviceStatus(); this.refreshDeviceStatus();
}, 60000); }, 60000);
// 模拟WebSocket连接
this.simulateWebSocket();
}, },
beforeDestroy() { beforeDestroy() {
// 移除事件监听 // 移除事件监听
@ -482,7 +381,32 @@ export default {
} }
}, },
methods: { 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 regex = /(\d+)\s*days,\s*(\d+):/;
const match = input.match(regex); const match = input.match(regex);
return match return match
@ -692,18 +616,52 @@ export default {
this.pieChart.setOption(option); 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() { initHistoryChart() {
if (!this.$refs.historyChart) return; if (!this.$refs.historyChart) return;
this.historyChart = echarts.init(this.$refs.historyChart); 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 = { const option = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['CPU使用率', '内存使用率', '网络流量'], data: ['CPU使用率', '内存使用率'],
textStyle: { textStyle: {
color: '#a0aec0' color: '#a0aec0'
} }
@ -717,14 +675,21 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['10-18', '10-19', '10-20', '10-21', '10-22', '10-23', '10-24'], data: timeList,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#4dabff' color: '#4dabff'
} }
}, },
axisLabel: { axisLabel: {
color: '#a0aec0' color: '#a0aec0',
// 格式化时间戳为更友好的显示格式
formatter: function(value) {
if (typeof value === 'string' && value.includes(' ')) {
return value.split(' ')[1].substring(0, 5); // 只显示时分
}
return value;
}
} }
}, },
yAxis: { yAxis: {
@ -749,7 +714,7 @@ export default {
name: 'CPU使用率', name: 'CPU使用率',
type: 'line', type: 'line',
smooth: true, smooth: true,
data: [45, 52, 48, 60, 55, 58, 62], data: cpuList,
itemStyle: { itemStyle: {
color: '#4dabff' color: '#4dabff'
}, },
@ -772,7 +737,7 @@ export default {
name: '内存使用率', name: '内存使用率',
type: 'line', type: 'line',
smooth: true, smooth: true,
data: [62, 58, 65, 70, 68, 72, 75], data: memoryList,
itemStyle: { itemStyle: {
color: '#62f7ff' 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 => { historyQuery({ id: device.id, ...historyQueryList }).then(response => {
this.historyQueryData = response.data; this.historyData = response.data;
this.$nextTick(() => { this.$nextTick(() => {
this.initHistoryChart(); this.initHistoryChart();
}); });
@ -910,19 +852,12 @@ export default {
getRoomDevices() { getRoomDevices() {
const currentFloor = this.getCurrentFloor(); const currentFloor = this.getCurrentFloor();
return currentFloor.devices.filter(device => device.room === this.selectedRoom.name);
}, },
controlDevice(action) { controlDevice(action) {
alert(`执行设备控制: ${action} - ${this.selectedDevice.name}`); alert(`执行设备控制: ${action} - ${this.selectedDevice.name}`);
// 这里可以添加实际的设备控制逻辑 // 这里可以添加实际的设备控制逻辑
}, },
loadHistoryData() {
alert(`加载历史数据: ${this.historyStartDate} 至 ${this.historyEndDate}`);
// 这里可以添加实际的历史数据加载逻辑
},
filterByWarningLevel(level) { filterByWarningLevel(level) {
if (this.warningLevelFilter === level) { if (this.warningLevelFilter === level) {
this.warningLevelFilter = 'all'; this.warningLevelFilter = 'all';
@ -1005,25 +940,6 @@ export default {
default: return '未知'; 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) { switchFloor(floorLevel) {
@ -1041,10 +957,7 @@ export default {
getCurrentFloor() { getCurrentFloor() {
return this.floors.find(floor => floor.level === this.currentFloor) || this.floors[0]; return this.floors.find(floor => floor.level === this.currentFloor) || this.floors[0];
}, },
getCurrentFloorDevices() {
return this.getCurrentFloor().devices;
}
} }
} }

Write Preview
Loading…
Cancel
Save