0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

【web】 修改设备详情

Browse Source
dev
Wangxin 8 months ago
parent 7aa876bb63
commit 9a1ec73a6a
1 changed files with 126 additions and 245 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 369
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue

369
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
Unescape View File

@ -26,7 +26,7 @@
<span class="info-label"> <span class="info-label">
<i class="fas fa-heartbeat"></i> 设备编号 <i class="fas fa-heartbeat"></i> 设备编号
</span> </span>
<span class="info-value">{{details.id || '暂无'}}</span> <span class="info-value">{{details.equNumber || '暂无'}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label"> <span class="info-label">
@ -62,7 +62,7 @@
<span class="info-label"> <span class="info-label">
<i class="fas fa-layer-group"></i> 生产厂商名称 <i class="fas fa-layer-group"></i> 生产厂商名称
</span> </span>
<span class="info-value">{{details.manufacture || '暂无'}}</span> <span class="info-value">{{details.equManuName || '暂无'}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label"> <span class="info-label">
@ -74,14 +74,14 @@
<span class="info-label"> <span class="info-label">
<i class="fas fa-tag"></i> 供货商联系人 <i class="fas fa-tag"></i> 供货商联系人
</span> </span>
<span class="info-value">{{ '无字段'}}</span> <span class="info-value">{{ details.contactBy || '暂无'}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label"> <span class="info-label">
<i class="fas fa-heartbeat"></i> 供货商联系电话 <i class="fas fa-heartbeat"></i> 供货商联系电话
</span> </span>
<span class="info-value">{{ '无字段'}}</span> <span class="info-value">{{ details.contactWay || '暂无'}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label"> <span class="info-label">
@ -129,7 +129,7 @@
<span class="info-label"> <span class="info-label">
<i class="fas fa-layer-group"></i> 设备持续运行时长 <i class="fas fa-layer-group"></i> 设备持续运行时长
</span> </span>
<span class="info-value">{{'无字段'}}</span> <span class="info-value">{{formatDuration(details.contWorkPeriod) || '暂无'}}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="info-label"> <span class="info-label">
@ -169,36 +169,27 @@
</el-date-picker> </el-date-picker>
</div> </div>
<el-row :gutter="20" class="chart-row"> <el-row :gutter="20" class="chart-row">
<el-col :span="12"> <el-col :span="24">
<el-col :span="12"> <el-col :span="24">
<div class="chart-container" id="performanceChart4"></div> <div class="chart-container" id="combinedPerformanceChart"></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> </el-col>
</el-col> </el-col>
<el-col :span="24">
<el-col :span="12"> <el-col :span="12">
<el-col :span="12"> <div ref="usedmemory" style="height: 150px" />
<div ref="usedmemory" style="height: 200px" />
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div ref="usedmemory2" style="height: 200px" /> <div ref="usedmemory2" style="height: 150px" />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div ref="usedmemory3" style="height: 200px" /> <div ref="usedmemory3" style="height: 120px" />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div ref="usedmemory4" style="height: 200px" /> <div ref="usedmemory4" style="height: 120px" />
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div ref="usedmemory5" style="height: 200px" /> <div ref="usedmemory5" style="height: 120px" />
</el-col> </el-col>
</el-col> </el-col>
</el-row> </el-row>
@ -215,19 +206,19 @@
</div> </div>
<div class="metrics-grid"> <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"/> <History :dsId="dsId"/>
</div> </div>
<div class="bottom-item" v-if="tabIndex == 1"> <div class="bottom-item scroll-height-500" v-if="tabIndex == 1">
<Interface :dsId="dsId"/> <Interface :dsId="dsId"/>
</div> </div>
<div class="bottom-item" v-if="tabIndex == 2"> <div class="bottom-item scroll-height-500" v-if="tabIndex == 2">
<Vlan :dsId="dsId"/> <Vlan :dsId="dsId"/>
</div> </div>
<div class="bottom-item" v-if="tabIndex == 3"> <div class="bottom-item scroll-height-500" v-if="tabIndex == 3">
<Routing :dsId="dsId"/> <Routing :dsId="dsId"/>
</div> </div>
<div class="bottom-item" v-if="tabIndex == 4"> <div class="bottom-item scroll-height-500" v-if="tabIndex == 4">
<Veneer :dsId="dsId"/> <Veneer :dsId="dsId"/>
</div> </div>
</div> </div>
@ -263,7 +254,7 @@ export default {
{ name: '接口信息' }, { name: '接口信息' },
{ name: 'VLAN信息' }, { name: 'VLAN信息' },
{ name: '路由表信息' }, { name: '路由表信息' },
{ name: 'venner信息' }, // { name: 'venner信息' },
], ],
tabIndex: 0, tabIndex: 0,
dsId:null, dsId:null,
@ -289,13 +280,15 @@ mounted() {
}, 1000) }, 1000)
}, },
methods: { 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() { initCharts() {
// 性能图表 // 性能图表
let details = this.historyQueryData; let details = this.historyQueryData;
const performanceChart = echarts.init(document.getElementById('performanceChart')); const combinedPerformanceChart = echarts.init(document.getElementById('combinedPerformanceChart'));
const performanceChart2 = echarts.init(document.getElementById('performanceChart2'));
const performanceChart3 = echarts.init(document.getElementById('performanceChart3'));
const performanceChart4 = echarts.init(document.getElementById('performanceChart4'));
const usedmemory = echarts.init(this.$refs.usedmemory, "macarons") const usedmemory = echarts.init(this.$refs.usedmemory, "macarons")
const usedmemory2 = echarts.init(this.$refs.usedmemory2, "macarons") const usedmemory2 = echarts.init(this.$refs.usedmemory2, "macarons")
const usedmemory3 = echarts.init(this.$refs.usedmemory3, "macarons") const usedmemory3 = echarts.init(this.$refs.usedmemory3, "macarons")
@ -596,12 +589,55 @@ mounted() {
} }
] ]
}) })
performanceChart.setOption({ combinedPerformanceChart.setOption({
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
formatter: function(params) {
// 检查params数组是否为空
if (!params || params.length === 0) {
return '';
}
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;
}
}, },
legend: { legend: {
data: ['设备温度'], data: ['设备温度', 'CPU使用率', '内存使用率', '健康度'],
textStyle: { textStyle: {
color: '#718096' color: '#718096'
} }
@ -615,7 +651,7 @@ mounted() {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [...details.temperatureList], data: [...details.timeList],
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#cbd5e0' color: '#cbd5e0'
@ -634,7 +670,7 @@ mounted() {
}, },
axisLabel: { axisLabel: {
color: '#718096', color: '#718096',
formatter: '{value}%' formatter: '{value}'
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -676,74 +712,17 @@ mounted() {
}] }]
} }
} }
}
]
});
performanceChart4.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: '健康度', name: 'CPU使用率',
type: 'line', type: 'line',
smooth: true, smooth: true,
data: [...details.healthList], data: [...details.cpuList],
lineStyle: { lineStyle: {
color: '#4299e1' color: '#f56565'
}, },
itemStyle: { itemStyle: {
color: '#4299e1' color: '#f56565'
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -753,80 +732,23 @@ mounted() {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ 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)'
}] }]
} }
} }
}
]
});
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', // 内部滚轮控制 name: '内存使用率',
xAxisIndex: 0,
start: 0,
end: 50
}
],
series: [
{
name: 'CPU使用率',
type: 'line', type: 'line',
smooth: true, smooth: true,
data: [...details.cpuList], data: [...details.memoryList],
lineStyle: { lineStyle: {
color: '#4299e1' color: '#48bb78'
}, },
itemStyle: { itemStyle: {
color: '#4299e1' color: '#48bb78'
}, },
areaStyle: { areaStyle: {
color: { color: {
@ -836,104 +758,57 @@ mounted() {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [{ 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)'
}] }]
} }
} }
}
]
});
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', // 内部滚轮控制 name: '健康度',
xAxisIndex: 0, type: 'bar',
start: 0, // 将健康度值映射为对应的百分比：1->100, 2->75, 3->50, 4->25
end: 50 // 使用对象格式存储数据，同时包含映射值和原始值
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'; // 默认灰色
}
} }
],
series: [
{
name: '内存使用率',
type: 'line',
smooth: true,
data: [...details.memoryList],
lineStyle: {
color: '#4299e1'
}, },
barWidth: '40%',
emphasis: {
itemStyle: { itemStyle: {
color: '#4299e1' shadowBlur: 10,
}, shadowOffsetX: 0,
areaStyle: { shadowColor: 'rgba(0, 0, 0, 0.5)'
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)'
}]
} }
} }
} }
] ]
}); });
// 响应窗口大小变化 // 响应窗口大小变化
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
performanceChart.resize(); combinedPerformanceChart.resize();
performanceChart2.resize();
performanceChart3.resize();
performanceChart4.resize();
usedmemory.resize(); usedmemory.resize();
usedmemory2.resize(); usedmemory2.resize();
// trafficChart.resize(); // trafficChart.resize();
@ -971,7 +846,13 @@ mounted() {
} }
} }
</script> </script>
<style scoped> <style scoped>
.scroll-height-500 {
height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
.body { .body {
background: linear-gradient(135deg, #f8fafc, #e2e8f0); background: linear-gradient(135deg, #f8fafc, #e2e8f0);

Write Preview
Loading…
Cancel
Save