|
|
|
|
@ -7,130 +7,141 @@ |
|
|
|
|
<div class="card-header"> |
|
|
|
|
<h2 class="card-title"> |
|
|
|
|
<i class="fas fa-network-wired"></i> |
|
|
|
|
设备概览 |
|
|
|
|
{{details.name}} |
|
|
|
|
</h2> |
|
|
|
|
<span class="status-badge status-online"> |
|
|
|
|
<i class="fas fa-circle"></i> 在线 |
|
|
|
|
<span class="status-badge " :class="details.status ? 'status-online' : 'status-danger'"> |
|
|
|
|
<i class="fas fa-circle"></i> |
|
|
|
|
{{ details.status ? '正常' : '停用' }} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="top-section-con"> |
|
|
|
|
<div class="device-image"> |
|
|
|
|
<i class="fas fa-server"></i> |
|
|
|
|
<img v-if="details.image" :src="details.image" alt="" class="device-icon"> |
|
|
|
|
<i v-else class="fas fa-server"></i> |
|
|
|
|
</div> |
|
|
|
|
<!-- 设备基本信息 --> |
|
|
|
|
<div class="device-info"> |
|
|
|
|
<div class="info-title">设备基本信息</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备级别 |
|
|
|
|
<i class="fas fa-heartbeat"></i> 设备编号 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">A级</span> |
|
|
|
|
<span class="info-value">{{details.id || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-map-marker-alt"></i> 安装位置 |
|
|
|
|
<i class="fas fa-layer-group"></i> 固件版本 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">数据中心-主柜</span> |
|
|
|
|
<span class="info-value">{{details.version || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-tag"></i> 品牌型号 |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备级别 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{details.deviceLevel || '暂无'}}级</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-map-marker-alt"></i> 安装位置 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">Cisco</span> |
|
|
|
|
<span class="info-value">{{details.location || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 运行状态 |
|
|
|
|
<i class="fas fa-tag"></i> 品牌型号 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">运行正常</span> |
|
|
|
|
<span class="info-value">{{details.manufacture || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 设备基本信息 --> |
|
|
|
|
<!-- 设备出厂信息 --> |
|
|
|
|
<div class="device-info"> |
|
|
|
|
<div class="info-title">设备基本信息</div> |
|
|
|
|
<div class="info-title">设备出厂信息</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备级别 |
|
|
|
|
<i class="fas fa-layer-group"></i> 生产厂商名称 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">A级</span> |
|
|
|
|
<span class="info-value">{{details.manufacture || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-map-marker-alt"></i> 安装位置 |
|
|
|
|
<i class="fas fa-map-marker-alt"></i> 供货商名称 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">数据中心-主柜</span> |
|
|
|
|
<span class="info-value">{{details.supplierName || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-tag"></i> 品牌型号 |
|
|
|
|
<i class="fas fa-tag"></i> 供货商联系人 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">Cisco</span> |
|
|
|
|
<span class="info-value">{{ '无字段'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 运行状态 |
|
|
|
|
<i class="fas fa-heartbeat"></i> 供货商联系电话 |
|
|
|
|
|
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">运行正常</span> |
|
|
|
|
<span class="info-value">{{ '无字段'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 质保时间 |
|
|
|
|
|
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{details.warranty || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 设备基本信息 --> |
|
|
|
|
<!-- 设备管理信息 --> |
|
|
|
|
<div class="device-info"> |
|
|
|
|
<div class="info-title">设备基本信息</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备级别 |
|
|
|
|
<i class="fas fa-layer-group"></i> 带外管理IP |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">A级</span> |
|
|
|
|
<span class="info-value">{{details.ip || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-map-marker-alt"></i> 安装位置 |
|
|
|
|
<i class="fas fa-layer-group"></i> 安装位置 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">数据中心-主柜</span> |
|
|
|
|
<span class="info-value">{{details.location || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-tag"></i> 品牌型号 |
|
|
|
|
<i class="fas fa-layer-group"></i> 安装日期 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">Cisco</span> |
|
|
|
|
<span class="info-value">{{parseTime(details.installDate) || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 运行状态 |
|
|
|
|
<i class="fas fa-layer-group"></i> 管理员 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">运行正常</span> |
|
|
|
|
<span class="info-value">{{details.inCharge || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- 设备基本信息 --> |
|
|
|
|
|
|
|
|
|
<!-- 设备状态信息 --> |
|
|
|
|
<div class="device-info"> |
|
|
|
|
<div class="info-title">设备基本信息</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备级别 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">A级</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-title">设备状态信息</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-map-marker-alt"></i> 安装位置 |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备持续运行时长 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">数据中心-主柜</span> |
|
|
|
|
<span class="info-value">{{'无字段'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-tag"></i> 品牌型号 |
|
|
|
|
<i class="fas fa-layer-group"></i> 待处理预警数 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">Cisco</span> |
|
|
|
|
<span class="info-value">{{details.unhandledAlertCount || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 运行状态 |
|
|
|
|
<i class="fas fa-layer-group"></i> 预警总数 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">运行正常</span> |
|
|
|
|
<span class="info-value">{{details.handledAlertCount || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -182,6 +193,7 @@ |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
import { getInfo, historyQuery } from "@/api/inMonitoring/devicesState" |
|
|
|
|
import * as echarts from 'echarts' |
|
|
|
|
require('echarts/theme/macarons') // echarts theme |
|
|
|
|
import History from './history.vue' |
|
|
|
|
@ -199,197 +211,230 @@ export default { |
|
|
|
|
{ name: '路由表信息' }, |
|
|
|
|
], |
|
|
|
|
tabIndex: 0, |
|
|
|
|
details: {}, |
|
|
|
|
historyQueryList: { |
|
|
|
|
minTime: '', |
|
|
|
|
maxTime: '', |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.initCharts(); |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
let routeList = this.$route.params; |
|
|
|
|
this.initCharts(); |
|
|
|
|
this.getInfoFun(routeList.id) |
|
|
|
|
this.gethistoryQuery(routeList.id) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
initCharts() { |
|
|
|
|
// 性能图表 |
|
|
|
|
const performanceChart = echarts.init(document.getElementById('performanceChart')); |
|
|
|
|
performanceChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['CPU使用率', '内存使用率'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096', |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(203, 213, 224, 0.6)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: 'CPU使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [45, 52, 38, 66, 58, 62, 48], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: 'rgba(237, 137, 54, 0.3)' |
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(237, 137, 54, 0.1)' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '内存使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [30, 45, 35, 50, 42, 38, 32], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: 'rgba(66, 153, 225, 0.3)' |
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(66, 153, 225, 0.1)' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 流量图表 |
|
|
|
|
const trafficChart = echarts.init(document.getElementById('trafficChart')); |
|
|
|
|
trafficChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'shadow' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['入站流量', '出站流量'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: 'MB/s', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(203, 213, 224, 0.6)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '入站流量', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [320, 332, 301, 334, 390, 330, 320], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '出站流量', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [220, 182, 191, 234, 290, 330, 310], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 响应窗口大小变化 |
|
|
|
|
window.addEventListener('resize', function() { |
|
|
|
|
performanceChart.resize(); |
|
|
|
|
trafficChart.resize(); |
|
|
|
|
}); |
|
|
|
|
initCharts() { |
|
|
|
|
// 性能图表 |
|
|
|
|
const performanceChart = echarts.init(document.getElementById('performanceChart')); |
|
|
|
|
performanceChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['CPU使用率', '内存使用率'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096', |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(203, 213, 224, 0.6)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: 'CPU使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [45, 52, 38, 66, 58, 62, 48], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: 'rgba(237, 137, 54, 0.3)' |
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(237, 137, 54, 0.1)' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '内存使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [30, 45, 35, 50, 42, 38, 32], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
type: 'linear', |
|
|
|
|
x: 0, |
|
|
|
|
y: 0, |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: 'rgba(66, 153, 225, 0.3)' |
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(66, 153, 225, 0.1)' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 流量图表 |
|
|
|
|
const trafficChart = echarts.init(document.getElementById('trafficChart')); |
|
|
|
|
trafficChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'shadow' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['入站流量', '出站流量'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
name: 'MB/s', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(203, 213, 224, 0.6)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '入站流量', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [320, 332, 301, 334, 390, 330, 320], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '出站流量', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [220, 182, 191, 234, 290, 330, 310], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 响应窗口大小变化 |
|
|
|
|
window.addEventListener('resize', function() { |
|
|
|
|
performanceChart.resize(); |
|
|
|
|
trafficChart.resize(); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
/** 查询设备列表 */ |
|
|
|
|
getInfoFun(id) { |
|
|
|
|
this.loading = true |
|
|
|
|
getInfo(id).then(response => { |
|
|
|
|
this.details = response.data |
|
|
|
|
this.loading = false |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
}, |
|
|
|
|
/** 设备管理基本信息（获取设备指定时间段内的历史监控信息） */ |
|
|
|
|
gethistoryQuery(id) { |
|
|
|
|
this.loading = true |
|
|
|
|
let queryForm = { |
|
|
|
|
id: id, |
|
|
|
|
...this.historyQueryList |
|
|
|
|
} |
|
|
|
|
historyQuery(queryForm).then(response => { |
|
|
|
|
this.details = response.data |
|
|
|
|
this.loading = false |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -542,8 +587,8 @@ export default { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.device-info { |
|
|
|
|
display: grid; |
|
|
|
|
grid-template-columns: 1fr; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction:column; |
|
|
|
|
gap: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -557,7 +602,7 @@ export default { |
|
|
|
|
.info-item { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
padding: 12px; |
|
|
|
|
padding: 8px 12px; |
|
|
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
border: 1px solid rgba(226, 232, 240, 0.8); |
|
|
|
|
|
Wangxin
9 months ago