From b3c5172929bcf312e1f3c3f5ac49f4ab59e7140e Mon Sep 17 00:00:00 2001 From: Wangxin Date: Mon, 6 Oct 2025 14:23:07 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ALOps_sys_fe/alops-ui/public/index.html | 1 + .../alops-ui/src/api/QandA/knowledge.js | 2 +- .../views/device/deviceManufacturer/index.vue | 5 +- .../alops-ui/src/views/index copy.vue | 308 +++++++ ALOps_sys_fe/alops-ui/src/views/index.vue | 759 ++++++++++++------ 5 files changed, 807 insertions(+), 268 deletions(-) create mode 100644 ALOps_sys_fe/alops-ui/src/views/index copy.vue diff --git a/ALOps_sys_fe/alops-ui/public/index.html b/ALOps_sys_fe/alops-ui/public/index.html index 925455ca..ec69afcf 100644 --- a/ALOps_sys_fe/alops-ui/public/index.html +++ b/ALOps_sys_fe/alops-ui/public/index.html @@ -6,6 +6,7 @@ + <%= webpackConfig.name %> diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue index 64031b5a..d35b56a4 100644 --- a/ALOps_sys_fe/alops-ui/src/views/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/index.vue @@ -1,94 +1,127 @@ @@ -100,25 +133,6 @@ import PieChart from './dashboard/PieChart' import BarChart from './dashboard/BarChart' import digital from './dashboard/digital' -const lineChartData = { - newVisitis: { - expectedData: [100, 120, 161, 134, 105, 160, 165], - actualData: [120, 82, 91, 154, 162, 140, 145] - }, - messages: { - expectedData: [200, 192, 120, 144, 160, 130, 140], - actualData: [180, 160, 151, 106, 145, 150, 130] - }, - purchases: { - expectedData: [80, 100, 121, 104, 105, 90, 100], - actualData: [120, 90, 100, 138, 142, 130, 130] - }, - shoppings: { - expectedData: [130, 140, 141, 142, 145, 150, 160], - actualData: [120, 82, 91, 154, 162, 140, 130] - } -} - export default { name: 'Index', components: { @@ -131,178 +145,395 @@ export default { }, data() { return { - lineChartData: lineChartData.newVisitis, - scrollConfig:{ - header: ['设备名称', '设备位置', 'CPU使用率','内存使用率','温度', '健康度', '设备运行时长','采集时间'], - data: [ - ['行1列1', '行1列2', '行1列3', '行1列4', '行1列5', '行1列6','行1列7', '行1列8'], - ['行2列1', '行2列2', '行2列3', '行2列4', '行2列5', '行2列6','行2列7', '行2列8'], - ['行3列1', '行3列2', '行3列3', '行3列4', '行3列5', '行3列6','行3列7', '行3列8'], - ['行4列1', '行4列2', '行4列3', '行4列4', '行4列5', '行4列6','行4列7', '行4列8'], - ['行5列1', '行5列2', '行5列3', '行5列4', '行5列5', '行5列6','行5列7', '行5列8'], - ['行6列1', '行6列2', '行6列3', '行6列4', '行6列5', '行6列6','行6列7', '行6列8'], - ['行7列1', '行7列2', '行7列3', '行7列4', '行7列5', '行7列6','行7列7', '行7列8'], - ['行8列1', '行8列2', '行8列3', '行8列4', '行8列5', '行8列6','行8列7', '行8列8'], - ['行9列1', '行9列2', '行9列3', '行9列4', '行9列5', '行9列6','行9列7', '行9列8'], - ['行10列1', '行10列2', '行10列3', '行10列4', '行10列5', '行10列6','行10列7', '行10列8'] - ], - headerBGC:'#f8f8f9', - headerHeight:60, - oddRowBGC:'#f5f7fa', - evenRowBGC:'#fff', - }, + totalAlerts: 111, + activeAlerts: 42, + resolvedAlerts: 69, + lastUpdate: new Date().toLocaleString(), + 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: [ - { - time: '2021-10-16 14:54:11', - deviceName: 'PLC远程监控系统', - deviceLocation: '污水处理监控系统', - level: 1, - message: '2#电机运行状态等于1', - status: '触发值: 1' - }, - { - time: '2021-10-16 14:54:04', - deviceName: 'PLC远程监控系统', - deviceLocation: '污水处理监控系统', - level: 0, - message: '2#电机运行状态报警恢复', - status: '触发值: 0' - }, - { - time: '2021-10-16 14:54:11', - deviceName: 'PLC远程监控系统', - deviceLocation: '污水处理监控系统', - level: 1, - message: '2#电机运行状态等于1', - status: '触发值: 1' - }, - { - time: '2021-10-16 14:54:04', - deviceName: 'PLC远程监控系统', - deviceLocation: '污水处理监控系统', - level: 0, - message: '2#电机运行状态报警恢复', - status: '触发值: 0' - }, - // 可以继续添加更多预警信息 + { + id: 1, + deviceName: 'PLC远程监控系统', + time: '2021-10-16 14:54:11', + location: '污水处理监控系统', + message: '2#电机运行状态等于1', + level: 1, + status: 'warning', + icon: 'fas fa-exclamation-circle' + }, + { + id: 2, + deviceName: 'PLC远程监控系统', + time: '2021-10-16 14:54:04', + location: '污水处理监控系统', + message: '2#电机运行状态报警恢复', + level: 0, + status: 'normal', + icon: 'fas fa-check-circle' + } + ], + tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'], + deviceStatus: [ + { + id: 1, + name: 'PLC控制系统', + location: '主控室A区', + cpuUsage: 45, + memoryUsage: 62, + temperature: 42, + health: 85, + uptime: '125天8小时', + collectionTime: '2021-10-16 15:20:00' + }, + { + id: 2, + name: '数据采集器', + location: '污水处理区', + cpuUsage: 78, + memoryUsage: 85, + temperature: 58, + health: 65, + uptime: '89天12小时', + collectionTime: '2021-10-16 15:22:00' + }, + { + id: 3, + name: '监控服务器', + location: '数据中心', + cpuUsage: 32, + memoryUsage: 45, + temperature: 38, + health: 92, + uptime: '210天3小时', + collectionTime: '2021-10-16 15:25:00' + }, + { + id: 4, + name: '网络交换机', + location: '通信机房', + cpuUsage: 15, + memoryUsage: 28, + temperature: 35, + health: 95, + uptime: '156天7小时', + collectionTime: '2021-10-16 15:18:00' + } ] } }, methods: { - handleSetLineChartData(type) { - this.lineChartData = lineChartData[type] + getCpuStatus(usage) { + if (usage < 50) return 'status-indicator status-good'; + if (usage < 80) return 'status-indicator status-warning'; + return 'status-indicator status-critical'; }, - getLevelColor(level) { - const levelColors = { - 0: 'green', - 1: 'orange', - 2: 'red' - }; - return levelColors[level] || 'black'; // 默认颜色 + 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'; } } }