|
|
|
|
@ -16,7 +16,7 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="top-section-con"> |
|
|
|
|
<div class="device-image"> |
|
|
|
|
<img v-if="details.image" :src="details.image" alt="" class="device-icon"> |
|
|
|
|
<img v-if="details.equImage" :src="baseUrl+details.equImage" alt="" class="device-icon"> |
|
|
|
|
<i v-else class="fas fa-server"></i> |
|
|
|
|
</div> |
|
|
|
|
<!-- 设备基本信息 --> |
|
|
|
|
@ -158,16 +158,17 @@ |
|
|
|
|
设备运行数据 |
|
|
|
|
</h2> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="daterange" |
|
|
|
|
type="daterange" |
|
|
|
|
v-model="DateValue" |
|
|
|
|
type="datetimerange" |
|
|
|
|
value-format="yyyy-MM-dd hh:mm:ss" |
|
|
|
|
range-separator="至" |
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
end-placeholder="结束日期"> |
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
@change="handleDateChange"> |
|
|
|
|
</el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="chart-container" id="performanceChart"></div> |
|
|
|
|
<div class="chart-container" id="trafficChart"></div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 右侧参数 --> |
|
|
|
|
@ -182,7 +183,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="metrics-grid"> |
|
|
|
|
<div class="bottom-item" v-if="tabIndex == 0"> |
|
|
|
|
<History/> |
|
|
|
|
<History :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -195,6 +196,7 @@ |
|
|
|
|
|
|
|
|
|
import { getInfo, historyQuery } from "@/api/inMonitoring/devicesState" |
|
|
|
|
import * as echarts from 'echarts' |
|
|
|
|
import dayjs from 'dayjs'; |
|
|
|
|
require('echarts/theme/macarons') // echarts theme |
|
|
|
|
import History from './history.vue' |
|
|
|
|
export default { |
|
|
|
|
@ -202,7 +204,7 @@ export default { |
|
|
|
|
components: { History }, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
dateRange: [], |
|
|
|
|
DateValue: [dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')], |
|
|
|
|
selectedTab: 1, |
|
|
|
|
tabs: [ |
|
|
|
|
{ name: '历史预警' }, |
|
|
|
|
@ -211,35 +213,35 @@ export default { |
|
|
|
|
{ name: '路由表信息' }, |
|
|
|
|
], |
|
|
|
|
tabIndex: 0, |
|
|
|
|
dsId:'', |
|
|
|
|
details: {}, |
|
|
|
|
historyQueryList: { |
|
|
|
|
minTime: '', |
|
|
|
|
maxTime: '', |
|
|
|
|
maxTime:dayjs().format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
minTime:dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
baseUrl: process.env.VUE_APP_BASE_API |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
let routeList = this.$route.params; |
|
|
|
|
this.initCharts(); |
|
|
|
|
this.getInfoFun(routeList.id) |
|
|
|
|
this.gethistoryQuery(routeList.id) |
|
|
|
|
let dsId = routeList.id; |
|
|
|
|
console.log("%c ⚓: mounted -> dsId ", "font-size:16px;background-color:#8f8576;color:white;", dsId) |
|
|
|
|
this.getInfoFun(dsId) |
|
|
|
|
this.gethistoryQuery(dsId) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
initCharts() { |
|
|
|
|
// 性能图表 |
|
|
|
|
let details = this.details; |
|
|
|
|
const performanceChart = echarts.init(document.getElementById('performanceChart')); |
|
|
|
|
performanceChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['CPU使用率', '内存使用率'], |
|
|
|
|
data: ['CPU使用率', '内存使用率', '健康度', '设备温度'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
@ -253,7 +255,7 @@ mounted() { |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], |
|
|
|
|
data: [...details.timeList], |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
@ -280,12 +282,20 @@ mounted() { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [ |
|
|
|
|
{ |
|
|
|
|
type: 'inside', // 内部滚轮控制 |
|
|
|
|
xAxisIndex: 0, |
|
|
|
|
start: 0, |
|
|
|
|
end: 50 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: 'CPU使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [45, 52, 38, 66, 58, 62, 48], |
|
|
|
|
data: [...details.cpuList], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
}, |
|
|
|
|
@ -311,7 +321,7 @@ mounted() { |
|
|
|
|
name: '内存使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [30, 45, 35, 50, 42, 38, 32], |
|
|
|
|
data: [...details.memoryList], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
}, |
|
|
|
|
@ -332,81 +342,26 @@ mounted() { |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 流量图表 |
|
|
|
|
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: '入站流量', |
|
|
|
|
name: '健康度', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [320, 332, 301, 334, 390, 330, 320], |
|
|
|
|
data: [...details.healthList], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '出站流量', |
|
|
|
|
name: '设备温度', |
|
|
|
|
type: 'bar', |
|
|
|
|
data: [220, 182, 191, 234, 290, 330, 310], |
|
|
|
|
data: [...details.temperatureList], |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#ed8936' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 响应窗口大小变化 |
|
|
|
|
window.addEventListener('resize', function() { |
|
|
|
|
performanceChart.resize(); |
|
|
|
|
@ -424,6 +379,7 @@ mounted() { |
|
|
|
|
}, |
|
|
|
|
/** 设备管理基本信息（获取设备指定时间段内的历史监控信息） */ |
|
|
|
|
gethistoryQuery(id) { |
|
|
|
|
console.log("%c 🖼️: gethistoryQuery -> id ", "font-size:16px;background-color:#c07203;color:white;", id) |
|
|
|
|
this.loading = true |
|
|
|
|
let queryForm = { |
|
|
|
|
id: id, |
|
|
|
|
@ -432,10 +388,15 @@ mounted() { |
|
|
|
|
historyQuery(queryForm).then(response => { |
|
|
|
|
this.details = response.data |
|
|
|
|
this.loading = false |
|
|
|
|
this.initCharts(); |
|
|
|
|
} |
|
|
|
|
) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
handleDateChange(date) { |
|
|
|
|
this.historyQueryList.minTime = date[0] |
|
|
|
|
this.historyQueryList.maxTime = date[1] |
|
|
|
|
this.gethistoryQuery(this.$route.params.id) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -585,11 +546,23 @@ mounted() { |
|
|
|
|
color: #4299e1; |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
.device-icon{ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.device-info { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction:column; |
|
|
|
|
gap: 15px; |
|
|
|
|
background: linear-gradient(135deg, #edf2f7, #e2e8f0); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
border: 1px solid rgba(226, 232, 240, 0.8); |
|
|
|
|
transition: all 0.3s ease; |
|
|
|
|
} |
|
|
|
|
.device-info:hover { |
|
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
|
border-color: rgba(66, 153, 225, 0.3); |
|
|
|
|
transform: translateY(-2px); |
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info-title { |
|
|
|
|
@ -597,24 +570,16 @@ mounted() { |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: 600; |
|
|
|
|
text-align: center; |
|
|
|
|
padding-top: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info-item { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
padding: 8px 12px; |
|
|
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
|
|
border-radius: 12px; |
|
|
|
|
border: 1px solid rgba(226, 232, 240, 0.8); |
|
|
|
|
transition: all 0.3s ease; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info-item:hover { |
|
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
|
border-color: rgba(66, 153, 225, 0.3); |
|
|
|
|
transform: translateY(-2px); |
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-label { |
|
|
|
|
font-size: 13px; |
|
|
|
|
|
Wangxin
9 months ago