diff --git a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquVlanController.java b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquVlanController.java index 7ef7429e..456686be 100644 --- a/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquVlanController.java +++ b/ALOps_sys_backend/alops-admin/src/main/java/com/alops/web/controller/equManagement/EquVlanController.java @@ -10,6 +10,7 @@ import com.alops.common.core.page.TableDataInfo; import com.alops.common.enums.BusinessType; import com.alops.common.utils.poi.ExcelUtil; import com.alops.system.domain.EquVlan; +import com.alops.system.domain.dto.EquVlanNetworkUpdateDto; import com.alops.system.service.IEquVlanService; import io.swagger.annotations.ApiOperation; import org.springframework.security.access.prepost.PreAuthorize; @@ -61,6 +62,22 @@ public class EquVlanController extends BaseController return getDataTable(list); } + /** + * 修改 VLAN 网络信息（仅限 IP 与子网掩码，根据 vlanId） + */ + @PreAuthorize("@ss.hasPermi('device:vlan:update')") + @PutMapping("/updateNetworkByVlanId") + @ApiOperation("修改 VLAN 网络信息（仅限 IP 与子网掩码，根据 vlanId）") + public AjaxResult updateVlanNetworkByVlanId(@RequestBody EquVlanNetworkUpdateDto dto) + { + int rows = equVlanService.updateVlanNetworkByVlanId(dto); + return toAjax(rows); + } + + + + + /** * 导出【请填写功能名称】列表 */ diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquInterface.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquInterface.java index 85619033..d727d0df 100644 --- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquInterface.java +++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/EquInterface.java @@ -29,8 +29,6 @@ public class EquInterface private String equId; /** 采集时间 */ - @JsonFormat(pattern = "yyyy-MM-dd") - @Excel(name = "采集时间", width = 30, dateFormat = "yyyy-MM-dd") private Date gatherTime; /** 端口运行与否(UP/DOWN(true/false)) */ diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/EquVlanNetworkUpdateDto.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/EquVlanNetworkUpdateDto.java new file mode 100644 index 00000000..7816ae5a --- /dev/null +++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/EquVlanNetworkUpdateDto.java @@ -0,0 +1,42 @@ +package com.alops.system.domain.dto; + +import io.swagger.annotations.ApiModel; +import io.swagger.annotations.ApiModelProperty; + +@ApiModel("VLAN网络修改DTO，仅用于修改IP和子网掩码") +public class EquVlanNetworkUpdateDto { + + @ApiModelProperty(value = "唯一VLAN ID", required = true, example = "VLAN") + private String id; + + @ApiModelProperty(value = "IPv4地址", example = "") + private String ipAddress; + + @ApiModelProperty(value = "子网掩码", example = "") + private String subnetMask; + + public String getid() { + return id; + } + + public void setid(String id) { + this.id = id; + } + + public String getIpAddress() { + return ipAddress; + } + + public void setIpAddress(String ipAddress) { + this.ipAddress = ipAddress; + } + + public String getSubnetMask() { + return subnetMask; + } + + public void setSubnetMask(String subnetMask) { + this.subnetMask = subnetMask; + } + +} diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java index 4cf5d6f9..7d26afd3 100644 --- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java +++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/domain/dto/MonitorLastDto.java @@ -1,5 +1,7 @@ package com.alops.system.domain.dto; +import com.alops.common.annotation.Excel; +import com.fasterxml.jackson.annotation.JsonFormat; import lombok.Data; import java.sql.Blob; @@ -25,6 +27,9 @@ public class MonitorLastDto { private String deviceLevel; private String ip; private String location; + /** 安装日期 */ + @JsonFormat(pattern = "yyyy-MM-dd") + @Excel(name = "安装日期", width = 30, dateFormat = "yyyy-MM-dd") private Date installDate; private String inCharge; private String status; diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/mapper/EquVlanMapper.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/mapper/EquVlanMapper.java index f5f6ca59..57bf9d63 100644 --- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/mapper/EquVlanMapper.java +++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/mapper/EquVlanMapper.java @@ -1,6 +1,7 @@ package com.alops.system.mapper; import com.alops.system.domain.EquVlan; +import com.alops.system.domain.dto.EquVlanNetworkUpdateDto; import org.apache.ibatis.annotations.Mapper; import java.util.List; @@ -33,6 +34,12 @@ public interface EquVlanMapper */ public List selectEquVlanList(EquVlan equVlan); public List selectEquVlanListByEquId(String equId); + /** + * 修改 VLAN 网络信息（仅限 IP 与子网掩码，根据 vlanId） + */ + int updateVlanNetworkByVlanId(EquVlanNetworkUpdateDto dto); + + /** * 新增【请填写功能名称】 * diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/IEquVlanService.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/IEquVlanService.java index 3828c7b0..5c504a75 100644 --- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/IEquVlanService.java +++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/IEquVlanService.java @@ -1,6 +1,7 @@ package com.alops.system.service; import com.alops.system.domain.EquVlan; +import com.alops.system.domain.dto.EquVlanNetworkUpdateDto; import java.util.List; @@ -28,6 +29,15 @@ public interface IEquVlanService */ public List selectEquVlanList(EquVlan equVlan); public List selectEquVlanListByEquId(String equId); + + /** + * 修改 VLAN 网络信息（仅限 IP 与子网掩码，根据 vlanId） + * + * @param dto VLAN更新信息 + * @return 影响行数 + */ + int updateVlanNetworkByVlanId(EquVlanNetworkUpdateDto dto); + /** * 新增【请填写功能名称】 * diff --git a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/impl/EquVlanServiceImpl.java b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/impl/EquVlanServiceImpl.java index 92e1f1fb..2d637267 100644 --- a/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/impl/EquVlanServiceImpl.java +++ b/ALOps_sys_backend/alops-system/src/main/java/com/alops/system/service/impl/EquVlanServiceImpl.java @@ -4,6 +4,7 @@ import java.util.List; import com.alops.common.utils.DateUtils; import com.alops.system.domain.EquVlan; +import com.alops.system.domain.dto.EquVlanNetworkUpdateDto; import com.alops.system.mapper.EquVlanMapper; import com.alops.system.service.IEquVlanService; @@ -58,6 +59,18 @@ public class EquVlanServiceImpl implements IEquVlanService return equVlanMapper.selectEquVlanListByEquId(equId); } + /** + * 修改vlan信息接口 + * **/ + @Override + public int updateVlanNetworkByVlanId(EquVlanNetworkUpdateDto dto) + { + return equVlanMapper.updateVlanNetworkByVlanId(dto); + } + + + + /** * 新增【请填写功能名称】 * diff --git a/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquInterfaceMapper.xml b/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquInterfaceMapper.xml index 97c0918e..050c9063 100644 --- a/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquInterfaceMapper.xml +++ b/ALOps_sys_backend/alops-system/src/main/resources/mapper/system/EquInterfaceMapper.xml @@ -42,7 +42,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" - select i.id, g.equ_id, i.gather_time, running, rate, commuicate_mode, out_flow, in_flow, in_bandwidth, loss_rate, error_rate, equ_gather_id, interface_id, out_bandwidth from equ_interface i LEFT JOIN equ_gather g ON i.equ_gather_id = g.id + select i.id, g.equ_id, g.gather_time, running, rate, commuicate_mode, out_flow, in_flow, in_bandwidth, loss_rate, error_rate, equ_gather_id, interface_id, out_bandwidth from equ_interface i LEFT JOIN equ_gather g ON i.equ_gather_id = g.id + + UPDATE equ_vlan + SET + ip_address = #{ipAddress}, + subnet_mask = #{subnetMask} + WHERE id = #{id} + + + + insert into equ_vlan diff --git a/ALOps_sys_fe/alops-ui/src/App.vue b/ALOps_sys_fe/alops-ui/src/App.vue index 12df51dc..c2b7d681 100644 --- a/ALOps_sys_fe/alops-ui/src/App.vue +++ b/ALOps_sys_fe/alops-ui/src/App.vue @@ -14,6 +14,14 @@ export default { } \ No newline at end of file diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue index 569759eb..3a374f1d 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue @@ -50,7 +50,7 @@ 品牌型号 - {{details.manufacture || '暂无'}} + {{details.brand || '暂无'}} diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue index 7629b350..09459e74 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue @@ -25,17 +25,17 @@ - 删除 - + + --> + @@ -71,6 +71,7 @@ diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue index 1d66dfa7..1b5c83db 100644 --- a/ALOps_sys_fe/alops-ui/src/views/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/index.vue @@ -3,7 +3,7 @@
-

唐山市设备监控中心大屏 - 智能管理版

+

设备监控中心大屏 - 智能管理版

{{ currentTime }}
@@ -13,18 +13,19 @@
设备状态监控 -
-
刷新
-
-
+
-
+
{{ device.equManuName || device.name || '未知设备' }}
-
{{ device.cpuUtilization || 0 }}%
+
+ + {{ device.health == 1?'健康':device.health == 2?'良好':device.health == 3?'一般':device.health == 4?'需维护':'未知' }} + +
@@ -46,7 +47,7 @@
-
+
设备信息统计
@@ -97,7 +98,7 @@
-
+
近期预警信息 @@ -105,14 +106,14 @@
+ class="warning-item" >
{{ warning.name }}
预警时间: {{ warning.time }}
设备位置: {{ warning.location }}
-
预警信息: {{ warning.ruleName }}
+
预警规则: {{ warning.ruleName }}
+
预警详情: {{ warning.message }}
@@ -121,7 +122,7 @@
-
唐山市监控系统 v4.0 - 智能管理版
+
监控系统 v4.0 - 智能管理版
最后更新: {{ updateTime }}
监控设备总数: {{ totalDevices }} 台 | 在线: {{ onlineDevices }} 台
@@ -191,47 +192,27 @@ 最后维护: {{ selectedDevice.lastMaintenance || '2024-09-15' }}
--> - -
- - - -
-

历史数据 +
+

历史数据

- - 至 - - + + 查询
-

-
-
-
-
- - - -
-
-
-

房间设备 - {{ selectedRoom.name }}

- -
-
-
-
-
-
{{ device.name }}
-
{{ device.value || 'N/A' }}
+
@@ -265,8 +246,10 @@ export default { showWarningHistory: false, selectedDevice: {}, selectedRoom: {}, - historyStartDate: '', - historyEndDate: '', + dateRange: [], + maxTime: '', + minTime: '', + historyData: null, warningLevelFilter: 'all', warningStats: { annual: 156, @@ -288,107 +271,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, @@ -440,19 +323,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); @@ -468,14 +371,11 @@ export default { this.loadAlertTimes(); // 加载楼层设备分布 this.loadFloorDeviceDistribution(); - - // 定期更新设备状态数据（每分钟更新一次） + + // 定期更新设备状态数据（每分钟更新一次） setInterval(() => { this.refreshDeviceStatus(); }, 60000); - - // 模拟WebSocket连接 - this.simulateWebSocket(); }, beforeDestroy() { // 移除事件监听 @@ -485,7 +385,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 @@ -695,18 +620,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' } @@ -720,14 +679,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: { @@ -752,7 +718,7 @@ export default { name: 'CPU使用率', type: 'line', smooth: true, - data: [45, 52, 48, 60, 55, 58, 62], + data: cpuList, itemStyle: { color: '#4dabff' }, @@ -775,7 +741,7 @@ export default { name: '内存使用率', type: 'line', smooth: true, - data: [62, 58, 65, 70, 68, 72, 75], + data: memoryList, itemStyle: { color: '#62f7ff' }, @@ -793,29 +759,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)' - }] - } - } } ] }; @@ -889,7 +832,7 @@ export default { }; historyQuery({ id: device.id, ...historyQueryList }).then(response => { - this.historyQueryData = response.data; + this.historyData = response.data; this.$nextTick(() => { this.initHistoryChart(); }); @@ -913,19 +856,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'; @@ -1008,25 +944,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) { @@ -1044,10 +961,7 @@ export default { getCurrentFloor() { return this.floors.find(floor => floor.level === this.currentFloor) || this.floors[0]; }, - - getCurrentFloorDevices() { - return this.getCurrentFloor().devices; - } + } } @@ -1061,30 +975,38 @@ export default { font-family: "Microsoft YaHei", sans-serif; } + html, body { + height: 100%; + margin: 0; + padding: 0; + overflow: auto; + } + .index-box { background-color: #0a1633; color: #e6e6e6; - overflow: hidden; - padding: 1.5vh 1.5vw; + overflow: auto; + padding: 16px; + min-height: 100%; + position: relative; + box-sizing: border-box; } .dashboard { - width: 100vw; - height: 100vh; - padding: 1.5vh 1.5vw; + width: 100%; + min-height: 100%; + padding: 16px; display: flex; flex-direction: column; position: relative; - overflow: hidden; min-width: 1200px; min-height: 700px; background-color: #0a1633; color: #e6e6e6; - overflow: hidden; } .header { - height: 10vh; + height: 10%; min-height: 70px; max-height: 100px; background: linear-gradient(90deg, rgba(10, 26, 58, 0.8), rgba(13, 36, 82, 0.8), rgba(10, 26, 58, 0.8)); @@ -1135,34 +1057,37 @@ export default { .main-content { flex: 1; display: flex; - gap: 1.5vh; + gap: 16px; min-height: 0; + height: 100%; + align-items: stretch; } - .left-panel, .right-panel { - width: 35%; - min-width: 280px; + .left-panel, .right-panel, .center-panel { display: flex; flex-direction: column; - gap: 1.5vh; - min-height: 0; + gap: 16px; + min-height: 100%; + max-height: 100vh; + box-sizing: border-box; + flex-shrink: 0; + } + + .left-panel, .right-panel { + width: 30%; } .center-panel { flex: 1; - display: flex; - flex-direction: column; - gap: 1.5vh; - min-height: 0; - min-width: 500px; + } .panel { background: rgba(16, 31, 63, 0.7); - border-radius: 1vh; + border-radius: 8px; border: 1px solid #1a3a7a; box-shadow: 0 0 10px rgba(26, 58, 122, 0.3); - padding: 1.5vh; + padding: 16px; position: relative; overflow: hidden; display: flex; @@ -1188,7 +1113,7 @@ export default { margin-bottom: 1.5vh; display: flex; align-items: center; - justify-content: space-between; + justify-content: left; flex-shrink: 0; } @@ -1228,11 +1153,13 @@ export default { display: flex; flex-direction: column; gap: 15px; + height: 100%; } .warning-row { display: flex; gap: 15px; + height: 100%; } .time-item { @@ -1327,6 +1254,7 @@ export default { align-items: center; transition: all 0.3s; cursor: pointer; + justify-content: center; } .stat-item:hover { @@ -1367,7 +1295,7 @@ export default { } .device-list { - height: 30vh; + height: 30%; min-height: 200px; overflow-y: auto; flex-shrink: 0; @@ -1406,7 +1334,9 @@ export default { .warning-scrollbar { height: 100%; min-height: 100px; - flex-shrink: 0; + max-height: 100vh; + /* flex-shrink: 0; */ + /* height: cale(100vh - 200px); */ } .warning-scrollbar .el-scrollbar__wrap { @@ -1468,7 +1398,28 @@ export default { margin-bottom: 5px; line-height: 1.5; } - + .status-0 { + background: #9E9E9E; + box-shadow: 0 0 5px #9E9E9E; + } + .status-1 { + background: #4CAF50; + box-shadow: 0 0 5px #4CAF50; + } + .status-2 { + background: #FF9800; + box-shadow: 0 0 5px #FF9800; + } + .status-4 { + background: #F44336; + box-shadow: 0 0 5px #F44336; + } + .status-3 { + background: #FFEB3B; + box-shadow: 0 0 5px #FFEB3B; + } + + .status-normal { background: #4CAF50; box-shadow: 0 0 5px #4CAF50; @@ -1500,13 +1451,29 @@ export default { font-weight: bold; font-size: clamp(0.8rem, 1vw, 1rem); } + .health-1{ + color: #4CAF50; + } + .health-2{ + color: #FF9800; + } + .health-4{ + color: #F44336; + } + .health-3{ + color: #FFEB3B; + } + .health-0{ + color: #9E9E9E; + } + /* 楼宇容器样式 */ .building-container { flex: 1; position: relative; display: flex; - min-height: 40vh; + min-height: 40%; } .floor-plans-container { @@ -1764,13 +1731,13 @@ export default { } .chart-container { - height: 30vh; + height: 30%; min-height: 200px; flex-shrink: 0; } .footer { - height: 5vh; + height: 5%; min-height: 30px; max-height: 50px; display: flex; @@ -1778,7 +1745,7 @@ export default { align-items: center; color: #a0aec0; font-size: clamp(0.7rem, 0.9vw, 0.9rem); - margin-top: 1vh; + margin-top: 8px; flex-shrink: 0; } @@ -1975,83 +1942,4 @@ export default { color: #e6e6e6; } - /* 响应式设计 - 中等屏幕 */ - @media screen and (max-width: 1400px) { - .left-panel, .right-panel { - width: 28%; - } - - .center-panel { - width: 44%; - } - } - - /* 响应式设计 - 小屏幕 */ - @media screen and (max-width: 1200px) { - .dashboard { - min-width: 1000px; - } - - .left-panel, .right-panel { - min-width: 250px; - } - - .center-panel { - min-width: 450px; - } - } - - /* 响应式设计 - 超小屏幕 */ - @media screen and (max-width: 1000px) { - .dashboard { - min-width: 800px; - padding: 1vh 1vw; - } - - .main-content { - flex-direction: column; - gap: 1vh; - } - - .left-panel, .right-panel, .center-panel { - width: 100%; - min-width: auto; - } - - .left-panel, .right-panel { - flex-direction: row; - } - - .panel { - flex: 1; - } - } - - /* 响应式设计 - 移动端 */ - @media screen and (max-width: 768px) { - .dashboard { - min-width: auto; - min-height: auto; - padding: 0.5vh 0.5vw; - } - - .header { - height: 8vh; - padding: 0 1vw; - margin-bottom: 1vh; - } - - .main-content { - gap: 1vh; - } - - .left-panel, .right-panel { - flex-direction: column; - } - - .footer { - height: 4vh; - font-size: 0.7rem; - } - } \ No newline at end of file