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

【web】 设备运行数据UI调整

Browse Source
dev
Wangxin 9 months ago
parent 506f6632a6
commit 4030b204a7
4 changed files with 607 additions and 166 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. 129
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/BarChart2.vue
  2. 25
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
  3. 597
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
  4. 22
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue

129
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/BarChart2.vue
Unescape View File

@ -1,129 +0,0 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
const animationDuration = 6000
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
var handred = 100
var point = 66
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: [{
text: 'CPU占用',
x: 'center',
y: '40%',
textStyle: {
fontSize: 10,
color: '#000',
}
},{
text: '{a|'+ point +'}{c|%}',
x: 'center',
y: '53%',
textStyle: {
rich:{
a: {
fontSize: 10,
color: '#000'
},
c: {
fontSize: 10,
color: '#000',
// padding: [5,0]
}
}
}
}],
series: [{
name: 'circle',
type: 'pie',
clockWise: true,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: point,
name: '占比',
itemStyle: {
normal: {
color: { // 颜色渐变
colorStops: [{
offset: 0,
color: '#0095e3' // 0% 处的颜色
}, {
offset: 1,
color: '#28E8FA' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
name: '剩余',
value: handred - point,
itemStyle: {
normal: {
color: '#cceaf9'
}
}
}]
}]
})
}
}
}
</script>

25
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
Unescape View File

@ -43,6 +43,7 @@
<div class="info-item">
<span class="info-label">
<i class="fas fa-heartbeat"></i> 带外IP
<i class="fas fa-heartbeat"></i> 带内IP
</span>
<span class="info-value">{{cardData.ip || '暂无'}}</span>
</div>
@ -55,23 +56,21 @@
<div class="metric-value cpu-usage">{{cardData.cpuUtilization||0}}%</div>
<div class="metric-label">CPU占用</div>
<div class="progress-bar">
<div class="progress-fill" :style="{width: cardData.cpuUtilization||0+'%'}"></div>
<div class="progress-fill" :style="{ width: `${cardData.cpuUtilization || 0}%` }"></div>
</div>
</div>
<div class="metric-card">
<div class="metric-value cpu-usage">{{cardData.health||0}}%</div>
<div class="metric-value cpu-usage">{{getPercentage(cardData.health)||0}}%</div>
<div class="metric-label">健康度</div>
<div class="progress-bar">
<div class="progress-fill" :style="{width: cardData.health||0+'%'}"></div>
<div class="progress-fill" :style="{width: getPercentage(cardData.health)||0+'%'}"></div>
</div>
</div>
<div class="metric-card">
<div class="metric-value alert-pending">{{cardData.unhandledAlertCount||0}}</div>
<div class="metric-label">待处理预警数</div>
</div>
<div class="metric-card">
<div class="metric-value alert-total">{{cardData.handledAlertCount||0}}</div>
<div class="metric-label">预警总数</div>
@ -87,11 +86,8 @@
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import BarChart from './BarChart1.vue'
import BarChart2 from './BarChart2.vue'
export default {
name: "cardItem",
components: { BarChart, BarChart2 },
props: {
cardData: {
type: Object,
@ -224,6 +220,19 @@ export default {
const userId = row.id
this.$router.push("/inMonitoring/devicesState-detail/detail/" + userId)
},
getPercentage(value) {
const percentageMap = {
1: 100,
2: 75,
3: 50,
4: 25,
0: 0,
};
return percentageMap[value] || 0; // 如果 value 不存在，返回 0
},
}

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

@ -168,9 +168,40 @@
@change="handleDateChange">
</el-date-picker>
</div>
<el-empty description="暂无预警" v-if="!this.historyQueryData.timeList.length"></el-empty>
<div class="chart-container" id="performanceChart"></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>
</el-col>
<el-col :span="12">
<el-col :span="12">
<div ref="usedmemory" style="height: 200px" />
</el-col>
<el-col :span="12">
<div ref="usedmemory2" style="height: 200px" />
</el-col>
<el-col :span="8">
<div ref="usedmemory3" style="height: 200px" />
</el-col>
<el-col :span="8">
<div ref="usedmemory4" style="height: 200px" />
</el-col>
<el-col :span="8">
<div ref="usedmemory5" style="height: 200px" />
</el-col>
</el-col>
</el-row>
</div>
<!-- 右侧参数 -->
@ -213,9 +244,11 @@ import History from './history.vue'
import Interface from './interface.vue'
import Vlan from './vlan.vue'
import Routing from './routing.vue'
import LineChart from './LineChart.vue'
export default {
name: "cardItem",
components: { History, Interface, Vlan, Routing },
components: { History, Interface, Vlan, Routing, LineChart },
data() {
return {
DateValue: [dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')],
@ -245,19 +278,324 @@ mounted() {
let routeList = this.$route.params;
this.dsId = routeList.id;
this.getInfoFun(this.dsId)
this.gethistoryQuery(this.dsId)
setTimeout(() => {
this.gethistoryQuery(this.dsId)
}, 1000)
},
methods: {
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 usedmemory = echarts.init(this.$refs.usedmemory, "macarons")
const usedmemory2 = echarts.init(this.$refs.usedmemory2, "macarons")
const usedmemory3 = echarts.init(this.$refs.usedmemory3, "macarons")
const usedmemory4 = echarts.init(this.$refs.usedmemory4, "macarons")
const usedmemory5 = echarts.init(this.$refs.usedmemory5, "macarons")
const chartData = { min: 0, max: 100, value: 70 };
usedmemory.setOption({
series: [
{
type: 'gauge',
center: ['50%', '60%'],
radius: '90%',
min: chartData.min,
max: chartData.max,
startAngle: 220,
endAngle: -40,
splitNumber: 8,
axisLine: {
lineStyle: {
color: [
[0.25, '#7afeaf'],
[0.5, '#58d9f9'],
[0.75, '#fbdd5e'],
[1, '#f03b44'],
],
width: 10,
},
},
splitLine: {
// 分隔线
show: true,
length: 15,
distance: 10,
lineStyle: {
width: 2,
color: 'auto',
},
},
axisTick: {
// 刻度线样式（及短线样式）
show: true,
lineStyle: {
width: 2,
color: 'auto',
},
length: 10,
distance: 10,
},
axisLabel: false,
detail: {
fontSize: '16',
formatter: '{value}℃',
color: 'auto',
offsetCenter: ['0', '0%'],
},
pointer: {
icon: 'triangle',
show: true,
offsetCenter: [0, '-70%'],
itemStyle: {
color: 'auto',
},
length: '10%',
width: '3%',
},
data: [
{
value: this.details.temperature,
name: '温度',
title: {
show: true,
color: '#606266',
offsetCenter: [0, '70%'],
fontSize: 18,
}
},
],
}
]
})
usedmemory2.setOption({
series: [
{
type: 'gauge',
center: ['50%', '60%'],
radius: '90%',
min: chartData.min,
max: chartData.max,
startAngle: 220,
endAngle: -40,
splitNumber: 8,
axisLine: {
lineStyle: {
color: [
[0.25, '#f03b44'],
[0.5, '#fbdd5e'],
[0.75, '#58d9f9'],
[1, '#7afeaf'],
],
width: 10,
},
},
splitLine: {
// 分隔线
show: true,
length: 15,
distance: 10,
lineStyle: {
width: 2,
color: 'auto',
},
},
axisTick: {
// 刻度线样式（及短线样式）
show: true,
lineStyle: {
width: 2,
color: 'auto',
},
length: 10,
distance: 10,
},
axisLabel: false,
detail: {
fontSize: '16',
formatter: '{value}',
color: 'auto',
offsetCenter: ['0', '0%'],
},
pointer: {
icon: 'triangle',
show: true,
offsetCenter: [0, '-70%'],
itemStyle: {
color: 'auto',
},
length: '10%',
width: '3%',
},
data: [
{
value: this.details.health == 1 ? '100' : this.details.health == 2 ? '75': this.details.health == 3 ? '50': this.details.health == 4 ? '25' : '0',
name: '健康度',
title: {
show: true,
color: '#606266',
offsetCenter: [0, '70%'],
fontSize: 18,
}
},
],
}
]
})
usedmemory3.setOption({
title: [
{
text: 'CPU占用',
left: '45%',
top: '55%',
textAlign: 'center',
textStyle: {
fontSize: '14',
fontWeight: '400',
color: '#6AA0E4',
textAlign: 'center',
textShadowColor: '#000',
},
},
],
series: {
type: 'pie',
radius: ['90%', "100%"],
hoverAnimation: false,
data: [
{
value: this.details.cpuUtilization,
label: {
normal: {
color: '#6AA0E4',
fontSize: 22,
fontWeight: 'bold',
formatter: function(params) {
return params.value + '%';
},
position: 'center',
show: true,
}
},
itemStyle: {
normal: {
color: '#6AA0E4'
}
}
},{
value: 100-this.details.cpuUtilization,
name: '',
labelLine: {
show: false
},
itemStyle: {
normal: {
color: '#D8D8D8'
},
emphasis:{
color:'#D8D8D8'
}
}
}]
}
})
usedmemory4.setOption({
title: [
{
text: '内存使用率',
left: '45%',
top: '55%',
textAlign: 'center',
textStyle: {
fontSize: '14',
fontWeight: '400',
color: '#6AA0E4',
textAlign: 'center',
textShadowColor: '#000',
},
},
],
series: {
type: 'pie',
radius: ['90%', "100%"],
hoverAnimation: false,
data: [
{
value: this.details.memoryUtilization,
label: {
normal: {
color: '#6AA0E4',
fontSize: 22,
fontWeight: 'bold',
formatter: function(params) {
return params.value + '%';
},
position: 'center',
show: true,
}
},
itemStyle: {
normal: {
color: '#6AA0E4'
}
}
},{
value: 100-this.details.memoryUtilization,
name: '',
labelLine: {
show: false
},
itemStyle: {
normal: {
color: '#D8D8D8'
},
emphasis:{
color:'#D8D8D8'
}
}
}]
}
})
usedmemory5.setOption({
series: [
{
type: 'pie',
radius: [0, '100%'],
center: ['50%', '50%'],
label: {
position: 'inside',
formatter: '{b}\n{c}',
color: '#30465D'
},
labelLine: {
length: 5,
length2: 5
},
data: [{
name: '输入',
value: this.details.volIn
},
{
name: '输出',
value: this.details.volOut
}
]
}
]
})
performanceChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['CPU使用率', '内存使用率', '健康度', '设备温度'],
data: ['设备温度'],
textStyle: {
color: '#718096'
}
@ -271,7 +609,7 @@ mounted() {
xAxis: {
type: 'category',
boundaryGap: false,
data: [...details.timeList],
data: [...details.temperatureList],
axisLine: {
lineStyle: {
color: '#cbd5e0'
@ -308,15 +646,15 @@ mounted() {
],
series: [
{
name: 'CPU使用率',
name: '设备温度',
type: 'line',
smooth: true,
data: [...details.cpuList],
data: [...details.temperatureList],
lineStyle: {
color: '#ed8936'
color: '#4299e1'
},
itemStyle: {
color: '#ed8936'
color: '#4299e1'
},
areaStyle: {
color: {
@ -326,18 +664,75 @@ mounted() {
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(237, 137, 54, 0.3)'
offset: 0, color: 'rgba(66, 153, 225, 0.3)'
}, {
offset: 1, color: 'rgba(237, 137, 54, 0.1)'
offset: 1, color: 'rgba(66, 153, 225, 0.1)'
}]
}
}
}
]
});
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: [
{
name: '内存使用率',
type: 'inside', // 内部滚轮控制
xAxisIndex: 0,
start: 0,
end: 50
}
],
series: [
{
name: '健康度',
type: 'line',
smooth: true,
data: [...details.memoryList],
data: [...details.healthList],
lineStyle: {
color: '#4299e1'
},
@ -358,22 +753,171 @@ 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: [
{
name: '健康度',
type: 'bar',
data: [...details.healthList],
type: 'inside', // 内部滚轮控制
xAxisIndex: 0,
start: 0,
end: 50
}
],
series: [
{
name: 'CPU使用率',
type: 'line',
smooth: true,
data: [...details.cpuList],
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)'
}]
}
}
}
]
});
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: [
{
name: '设备温度',
type: 'bar',
data: [...details.temperatureList],
type: 'inside', // 内部滚轮控制
xAxisIndex: 0,
start: 0,
end: 50
}
],
series: [
{
name: '内存使用率',
type: 'line',
smooth: true,
data: [...details.memoryList],
lineStyle: {
color: '#4299e1'
},
itemStyle: {
color: '#ed8936'
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)'
}]
}
}
}
]
@ -381,6 +925,11 @@ mounted() {
// 响应窗口大小变化
window.addEventListener('resize', function() {
performanceChart.resize();
performanceChart2.resize();
performanceChart3.resize();
performanceChart4.resize();
usedmemory.resize();
usedmemory2.resize();
// trafficChart.resize();
});
},
@ -619,7 +1168,7 @@ mounted() {
.chart-container {
width: 100%;
height: 300px;
height: 200px;
margin-top: 10px;
}

22
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue
Unescape View File

@ -8,11 +8,22 @@
width="60"
type="index"
></el-table-column>
<el-table-column label="预警时间" align="center" key="id" prop="id"/>
<el-table-column label="预警等级" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="预警信息" align="center" key="description" prop="description" :show-overflow-tooltip="true" />
<el-table-column label="预警状态" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" />
<el-table-column label="处理人" align="center" key="handler" prop="handler" :show-overflow-tooltip="true" />
<el-table-column label="预警时间" align="center" key="occurTime" prop="occurTime"/>
<el-table-column label="预警等级" align="center" key="level" prop="level" :show-overflow-tooltip="true" />
<el-table-column label="预警信息" align="center" key="message" prop="message" :show-overflow-tooltip="true" />
<el-table-column label="预警状态" align="center" key="status" prop="status" :show-overflow-tooltip="true">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 'HANDLED'" type="success">已处理</el-tag>
<el-tag v-else type="danger">未处理</el-tag>
</template>
</el-table-column>
<el-table-column label="处理人" align="center" key="handler" prop="handler" :show-overflow-tooltip="true" >
<template slot-scope="scope">
<span >{{ scope.row.handler || '--' }}</span>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
@ -22,6 +33,7 @@
<script>
import { alertmessage } from "@/api/inMonitoring/devicesState"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import { template } from "lodash";
import "splitpanes/dist/splitpanes.css"
export default {

Write Preview
Loading…
Cancel
Save