|
|
|
|
@ -26,7 +26,7 @@ |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 设备编号 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{details.id || '暂无'}}</span> |
|
|
|
|
<span class="info-value">{{details.equNumber || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
@ -62,7 +62,7 @@ |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-layer-group"></i> 生产厂商名称 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{details.manufacture || '暂无'}}</span> |
|
|
|
|
<span class="info-value">{{details.equManuName || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
@ -74,14 +74,14 @@ |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-tag"></i> 供货商联系人 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{ '无字段'}}</span> |
|
|
|
|
<span class="info-value">{{ details.contactBy || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-heartbeat"></i> 供货商联系电话 |
|
|
|
|
|
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{ '无字段'}}</span> |
|
|
|
|
<span class="info-value">{{ details.contactWay || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
@ -129,7 +129,7 @@ |
|
|
|
|
<span class="info-label"> |
|
|
|
|
<i class="fas fa-layer-group"></i> 设备持续运行时长 |
|
|
|
|
</span> |
|
|
|
|
<span class="info-value">{{'无字段'}}</span> |
|
|
|
|
<span class="info-value">{{formatDuration(details.contWorkPeriod) || '暂无'}}</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<span class="info-label"> |
|
|
|
|
@ -169,36 +169,27 @@ |
|
|
|
|
</el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
<el-row :gutter="20" class="chart-row"> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div class="chart-container" id="performanceChart4"></div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div class="chart-container" id="performanceChart3"></div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div class="chart-container" id="performanceChart2"></div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div class="chart-container" id="performanceChart"></div> |
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<div class="chart-container" id="combinedPerformanceChart"></div> |
|
|
|
|
</el-col> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<el-col :span="24"> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div ref="usedmemory" style="height: 200px" /> |
|
|
|
|
<div ref="usedmemory" style="height: 150px" /> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="12"> |
|
|
|
|
<div ref="usedmemory2" style="height: 200px" /> |
|
|
|
|
<div ref="usedmemory2" style="height: 150px" /> |
|
|
|
|
</el-col> |
|
|
|
|
|
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div ref="usedmemory3" style="height: 200px" /> |
|
|
|
|
<div ref="usedmemory3" style="height: 120px" /> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div ref="usedmemory4" style="height: 200px" /> |
|
|
|
|
<div ref="usedmemory4" style="height: 120px" /> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="8"> |
|
|
|
|
<div ref="usedmemory5" style="height: 200px" /> |
|
|
|
|
<div ref="usedmemory5" style="height: 120px" /> |
|
|
|
|
</el-col> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
@ -215,19 +206,19 @@ |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="metrics-grid"> |
|
|
|
|
<div class="bottom-item" v-if="tabIndex == 0"> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 0"> |
|
|
|
|
<History :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item" v-if="tabIndex == 1"> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 1"> |
|
|
|
|
<Interface :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item" v-if="tabIndex == 2"> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 2"> |
|
|
|
|
<Vlan :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item" v-if="tabIndex == 3"> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 3"> |
|
|
|
|
<Routing :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom-item" v-if="tabIndex == 4"> |
|
|
|
|
<div class="bottom-item scroll-height-500" v-if="tabIndex == 4"> |
|
|
|
|
<Veneer :dsId="dsId"/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -263,7 +254,7 @@ export default { |
|
|
|
|
{ name: '接口信息' }, |
|
|
|
|
{ name: 'VLAN信息' }, |
|
|
|
|
{ name: '路由表信息' }, |
|
|
|
|
{ name: 'venner信息' }, |
|
|
|
|
// { name: 'venner信息' }, |
|
|
|
|
], |
|
|
|
|
tabIndex: 0, |
|
|
|
|
dsId:null, |
|
|
|
|
@ -289,13 +280,15 @@ mounted() { |
|
|
|
|
}, 1000) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
formatDuration(input) {// 类型安全校验 |
|
|
|
|
if (typeof input !== 'string') return "0天0小时"; |
|
|
|
|
const match = input.match(/(\d+)\s*days?,\s*(\d+):/i); |
|
|
|
|
return match ? `${match[1]}天${match[2]}小时` : "0天0小时"; |
|
|
|
|
}, |
|
|
|
|
initCharts() { |
|
|
|
|
// 性能图表 |
|
|
|
|
let details = this.historyQueryData; |
|
|
|
|
const performanceChart = echarts.init(document.getElementById('performanceChart')); |
|
|
|
|
const performanceChart2 = echarts.init(document.getElementById('performanceChart2')); |
|
|
|
|
const performanceChart3 = echarts.init(document.getElementById('performanceChart3')); |
|
|
|
|
const performanceChart4 = echarts.init(document.getElementById('performanceChart4')); |
|
|
|
|
const combinedPerformanceChart = echarts.init(document.getElementById('combinedPerformanceChart')); |
|
|
|
|
const usedmemory = echarts.init(this.$refs.usedmemory, "macarons") |
|
|
|
|
const usedmemory2 = echarts.init(this.$refs.usedmemory2, "macarons") |
|
|
|
|
const usedmemory3 = echarts.init(this.$refs.usedmemory3, "macarons") |
|
|
|
|
@ -596,95 +589,55 @@ mounted() { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}) |
|
|
|
|
performanceChart.setOption({ |
|
|
|
|
combinedPerformanceChart.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['设备温度'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: [...details.temperatureList], |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
type: 'value', |
|
|
|
|
axisLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#cbd5e0' |
|
|
|
|
trigger: 'axis', |
|
|
|
|
formatter: function(params) { |
|
|
|
|
// 检查params数组是否为空 |
|
|
|
|
if (!params || params.length === 0) { |
|
|
|
|
return ''; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096', |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
color: 'rgba(203, 213, 224, 0.6)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [ |
|
|
|
|
{ |
|
|
|
|
type: 'inside', // 内部滚轮控制 |
|
|
|
|
xAxisIndex: 0, |
|
|
|
|
start: 0, |
|
|
|
|
end: 50 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '设备温度', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [...details.temperatureList], |
|
|
|
|
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)' |
|
|
|
|
}] |
|
|
|
|
|
|
|
|
|
let result = params[0].axisValue + '<br/>'; |
|
|
|
|
params.forEach(function(item) { |
|
|
|
|
let value = item.value; |
|
|
|
|
let unit = ''; |
|
|
|
|
|
|
|
|
|
// 处理不同数据的显示格式 |
|
|
|
|
if (item.seriesName === '设备温度') { |
|
|
|
|
unit = '℃'; |
|
|
|
|
} else if (item.seriesName === '健康度') { |
|
|
|
|
// 获取原始健康度值 - 修复访问方式 |
|
|
|
|
// 通过映射关系反向计算原始值 |
|
|
|
|
let originalValue; |
|
|
|
|
switch(value) { |
|
|
|
|
case 100: originalValue = 1; break; |
|
|
|
|
case 75: originalValue = 2; break; |
|
|
|
|
case 50: originalValue = 3; break; |
|
|
|
|
case 25: originalValue = 4; break; |
|
|
|
|
default: originalValue = 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let statusText = ''; |
|
|
|
|
switch(originalValue) { |
|
|
|
|
case 1: statusText = '健康'; break; |
|
|
|
|
case 2: statusText = '良好'; break; |
|
|
|
|
case 3: statusText = '一般'; break; |
|
|
|
|
case 4: statusText = '需维护'; break; |
|
|
|
|
default: statusText = '未知'; |
|
|
|
|
} |
|
|
|
|
result += item.marker + item.seriesName + ': ' + value + '% (' + statusText + ')<br/>'; |
|
|
|
|
return; |
|
|
|
|
} else { |
|
|
|
|
unit = '%'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
result += item.marker + item.seriesName + ': ' + value + unit + '<br/>'; |
|
|
|
|
}); |
|
|
|
|
return result; |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
performanceChart4.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['健康度'], |
|
|
|
|
data: ['设备温度', 'CPU使用率', '内存使用率', '健康度'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
@ -717,7 +670,7 @@ mounted() { |
|
|
|
|
}, |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#718096', |
|
|
|
|
formatter: '{value}%' |
|
|
|
|
formatter: '{value}' |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
lineStyle: { |
|
|
|
|
@ -735,10 +688,10 @@ mounted() { |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '健康度', |
|
|
|
|
name: '设备温度', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [...details.healthList], |
|
|
|
|
data: [...details.temperatureList], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
}, |
|
|
|
|
@ -759,74 +712,17 @@ mounted() { |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
performanceChart3.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: [...details.timeList], |
|
|
|
|
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)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [ |
|
|
|
|
{ |
|
|
|
|
type: 'inside', // 内部滚轮控制 |
|
|
|
|
xAxisIndex: 0, |
|
|
|
|
start: 0, |
|
|
|
|
end: 50 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: 'CPU使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [...details.cpuList], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
color: '#f56565' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
color: '#f56565' |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
@ -836,80 +732,23 @@ mounted() { |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: 'rgba(66, 153, 225, 0.3)' |
|
|
|
|
offset: 0, color: 'rgba(245, 101, 101, 0.3)' |
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(66, 153, 225, 0.1)' |
|
|
|
|
offset: 1, color: 'rgba(245, 101, 101, 0.1)' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
performanceChart2.setOption({ |
|
|
|
|
tooltip: { |
|
|
|
|
trigger: 'axis' |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
data: ['内存使用率'], |
|
|
|
|
textStyle: { |
|
|
|
|
color: '#718096' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
left: '3%', |
|
|
|
|
right: '4%', |
|
|
|
|
bottom: '3%', |
|
|
|
|
containLabel: true |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
boundaryGap: false, |
|
|
|
|
data: [...details.timeList], |
|
|
|
|
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)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
dataZoom: [ |
|
|
|
|
{ |
|
|
|
|
type: 'inside', // 内部滚轮控制 |
|
|
|
|
xAxisIndex: 0, |
|
|
|
|
start: 0, |
|
|
|
|
end: 50 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '内存使用率', |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
data: [...details.memoryList], |
|
|
|
|
lineStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
color: '#48bb78' |
|
|
|
|
}, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#4299e1' |
|
|
|
|
color: '#48bb78' |
|
|
|
|
}, |
|
|
|
|
areaStyle: { |
|
|
|
|
color: { |
|
|
|
|
@ -919,21 +758,57 @@ mounted() { |
|
|
|
|
x2: 0, |
|
|
|
|
y2: 1, |
|
|
|
|
colorStops: [{ |
|
|
|
|
offset: 0, color: 'rgba(66, 153, 225, 0.3)' |
|
|
|
|
offset: 0, color: 'rgba(72, 187, 120, 0.3)' |
|
|
|
|
}, { |
|
|
|
|
offset: 1, color: 'rgba(66, 153, 225, 0.1)' |
|
|
|
|
offset: 1, color: 'rgba(72, 187, 120, 0.1)' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '健康度', |
|
|
|
|
type: 'bar', |
|
|
|
|
// 将健康度值映射为对应的百分比：1->100, 2->75, 3->50, 4->25 |
|
|
|
|
// 使用对象格式存储数据，同时包含映射值和原始值 |
|
|
|
|
data: details.healthList.map(value => { |
|
|
|
|
const valueMap = {1: 100, 2: 75, 3: 50, 4: 25}; |
|
|
|
|
// 使用value属性表示显示的值，原始值可以通过自定义字段存储 |
|
|
|
|
return { |
|
|
|
|
value: valueMap[value] || 0, |
|
|
|
|
originalValue: value |
|
|
|
|
}; |
|
|
|
|
}), |
|
|
|
|
itemStyle: { |
|
|
|
|
color: function(params) { |
|
|
|
|
// 获取原始健康度值进行颜色映射 |
|
|
|
|
const originalValue = params.data && params.data.originalValue !== undefined ? |
|
|
|
|
params.data.originalValue : params.value; |
|
|
|
|
// 使用switch语句替代对象查找，确保每个case都有break |
|
|
|
|
switch(originalValue) { |
|
|
|
|
case 1: return '#48bb78'; // 健康 - 绿色 |
|
|
|
|
case 2: return '#4299e1'; // 良好 - 蓝色 |
|
|
|
|
case 3: return '#ed8936'; // 一般 - 橙色 |
|
|
|
|
case 4: return '#f56565'; // 需维护 - 红色 |
|
|
|
|
default: return '#a0aec0'; // 默认灰色 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
barWidth: '40%', |
|
|
|
|
emphasis: { |
|
|
|
|
itemStyle: { |
|
|
|
|
shadowBlur: 10, |
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 响应窗口大小变化 |
|
|
|
|
window.addEventListener('resize', function() { |
|
|
|
|
performanceChart.resize(); |
|
|
|
|
performanceChart2.resize(); |
|
|
|
|
performanceChart3.resize(); |
|
|
|
|
performanceChart4.resize(); |
|
|
|
|
combinedPerformanceChart.resize(); |
|
|
|
|
usedmemory.resize(); |
|
|
|
|
usedmemory2.resize(); |
|
|
|
|
// trafficChart.resize(); |
|
|
|
|
@ -971,7 +846,13 @@ mounted() { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.scroll-height-500 { |
|
|
|
|
height: 500px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.body { |
|
|
|
|
background: linear-gradient(135deg, #f8fafc, #e2e8f0); |
|
|
|
|
|
Wangxin
8 months ago