OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 看板拓扑点击改变资源显示

Browse Source
This commit is contained in:
TsMask
2024-01-25 16:32:15 +08:00
parent a85579f730
commit 31651f8786
4 changed files with 221 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
src/views/dashboard/overview/components/NeResources/index.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { graphNodeClickID, graphNodeState } from '../../hooks/useTopology';
import useI18n from '@/hooks/useI18n';
import { GaugeSeriesOption } from 'echarts/types/dist/echarts';
import { watch } from 'vue';
const { t } = useI18n();
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
@@ -27,8 +28,8 @@ const optionData: EChartsOption = {
{
name: '系统内存',
type: 'gauge',
center: ['30%', '25%'],
radius: '40%',
center: ['15%', '45%'],
radius: '65%',
startAngle: 90,
endAngle: -270,
min: 1,
@@ -38,7 +39,7 @@ const optionData: EChartsOption = {
},
progress: {
show: true,
width: 10,
width: 20,
overlap: true,
roundCap: true,
clip: false,
@@ -48,7 +49,7 @@ const optionData: EChartsOption = {
},
axisLine: {
lineStyle: {
width: 10,
width: 20,
},
},
axisTick: {
@@ -65,8 +66,8 @@ const optionData: EChartsOption = {
},
title: {
show: true,
offsetCenter: [0, -5],
fontSize: 10,
offsetCenter: [0, '-10%'],
fontSize: 15,
color: '#fafafa',
},
detail: {
@@ -74,8 +75,8 @@ const optionData: EChartsOption = {
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, 10],
fontSize: 10,
offsetCenter: [0, '30%'],
fontSize: 15,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
@@ -83,15 +84,15 @@ const optionData: EChartsOption = {
data: [
{
name: '系统内存',
value: 20,
value: 1,
},
],
},
{
name: '系统CPU',
type: 'gauge',
center: ['70%', '25%'],
radius: '40%',
center: ['50%', '45%'],
radius: '65%',
startAngle: 90,
endAngle: -270,
min: 1,
@@ -101,7 +102,7 @@ const optionData: EChartsOption = {
},
progress: {
show: true,
width: 10,
width: 20,
overlap: true,
roundCap: true,
clip: false,
@@ -111,7 +112,7 @@ const optionData: EChartsOption = {
},
axisLine: {
lineStyle: {
width: 10,
width: 20,
},
},
axisTick: {
@@ -128,8 +129,8 @@ const optionData: EChartsOption = {
},
title: {
show: true,
offsetCenter: [0, -5],
fontSize: 10,
offsetCenter: [0, '-10%'],
fontSize: 15,
color: '#fafafa',
},
detail: {
@@ -137,8 +138,8 @@ const optionData: EChartsOption = {
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, 10],
fontSize: 10,
offsetCenter: [0, '30%'],
fontSize: 15,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
@@ -153,8 +154,8 @@ const optionData: EChartsOption = {
{
name: '网元内存',
type: 'gauge',
center: ['30%', '75%'],
radius: '40%',
center: ['85%', '45%'],
radius: '65%',
startAngle: 90,
endAngle: -270,
min: 1,
@@ -164,7 +165,7 @@ const optionData: EChartsOption = {
},
progress: {
show: true,
width: 10,
width: 20,
overlap: true,
roundCap: true,
clip: false,
@@ -174,7 +175,7 @@ const optionData: EChartsOption = {
},
axisLine: {
lineStyle: {
width: 10,
width: 20,
},
},
axisTick: {
@@ -191,8 +192,8 @@ const optionData: EChartsOption = {
},
title: {
show: true,
offsetCenter: [0, -5],
fontSize: 10,
offsetCenter: [0, '-10%'],
fontSize: 15,
color: '#fafafa',
},
detail: {
@@ -200,71 +201,8 @@ const optionData: EChartsOption = {
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, 10],
fontSize: 10,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
},
data: [
{
name: '系统内存',
value: 20,
},
],
},
{
name: '网元CPU',
type: 'gauge',
center: ['70%', '75%'],
radius: '40%',
startAngle: 90,
endAngle: -270,
min: 1,
max: 100,
itemStyle: {
color: '#1890ff',
},
progress: {
show: true,
width: 10,
overlap: true,
roundCap: true,
clip: false,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 10,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: true,
offsetCenter: [0, -5],
fontSize: 10,
color: '#fafafa',
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, 10],
fontSize: 10,
offsetCenter: [0, '30%'],
fontSize: 15,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
@@ -285,71 +223,151 @@ function handleRanderChart(
option: EChartsOption
) {
if (!container) return;
const { clientHeight, clientWidth } = container;
neResourcesChart.value = echarts.init(container, 'light', {
width: clientWidth,
height: clientHeight - 36,
});
neResourcesChart.value = echarts.init(container, 'light');
option && neResourcesChart.value.setOption(option);
// 创建 ResizeObserver 实例
var observer = new ResizeObserver(function (entries) {
neResourcesChart.value.resize();
});
// 监听元素大小变化
observer.observe(container);
}
onMounted(() => {
setInterval(function () {
const random = +(Math.random() * 90).toFixed(2);
const random2 = +(Math.random() * 90).toFixed(2);
const random3 = +(Math.random() * 90).toFixed(2);
const random4 = +(Math.random() * 90).toFixed(2);
function fnChangeData(data: any[], itemID: string) {
let info = data.find((item: any) => item.id === itemID);
if (!info.neState.online) {
info = data.find((item: any) => item.id === 'OMC');
graphNodeClickID.value = 'OMC';
}
let sysMemUsage = 0;
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (info.neState.cpu) {
nfCpuUsage = +(info.neState.cpu.nfCpuUsage / 100).toFixed(2);
sysCpuUsage = +(info.neState.cpu.sysCpuUsage / 100).toFixed(2);
}
if (info.neState.mem) {
let men = info.neState.mem.sysMemUsage;
if (men > 1000) {
men = +(men / 100).toFixed(2);
}
sysMemUsage = men;
}
function colorStyle(v: number): string {
let color = '#1890ff';
if (random < 30) {
if (v < 30) {
color = '#73d13d';
}
if (random > 60) {
if (v > 60) {
color = '#ff4d4f';
}
neResourcesChart.value.setOption({
series: [
{
data: [
{
name: '系统内存',
value: random,
itemStyle: {
color: color,
shadowColor: color,
},
},
],
},
{
data: [
{
name: '系统CPU',
value: random2,
},
],
},
{
data: [
{
name: '网元内存',
value: random3,
},
],
},
{
data: [
{
name: '网元CPU',
value: random4,
},
],
},
],
});
}, 2000);
return color;
}
handleRanderChart(neResourcesDom.value, optionData);
neResourcesChart.value.setOption({
series: [
{
data: [
{
name: '系统内存',
value: sysMemUsage,
itemStyle: {
color: colorStyle(sysMemUsage),
shadowColor: colorStyle(sysMemUsage),
},
},
],
},
{
data: [
{
name: '系统CPU',
value: sysCpuUsage,
itemStyle: {
color: colorStyle(sysCpuUsage),
shadowColor: colorStyle(sysCpuUsage),
},
},
],
},
{
data: [
{
name: '网元CPU',
value: nfCpuUsage,
itemStyle: {
color: colorStyle(nfCpuUsage),
shadowColor: colorStyle(nfCpuUsage),
},
},
],
},
],
});
}
watch(
graphNodeState,
v => {
fnChangeData(v, graphNodeClickID.value);
},
{
deep: true,
}
);
watch(graphNodeClickID, v => {
fnChangeData(graphNodeState.value, v);
});
onMounted(() => {
// setInterval(function () {
// neResourcesChart.value.setOption({
// series: [
// {
// data: [
// {
// name: '系统内存',
// value: sysMemUsage,
// itemStyle: {
// color: colorStyle(sysMemUsage),
// shadowColor: colorStyle(sysMemUsage),
// },
// },
// ],
// },
// {
// data: [
// {
// name: '系统CPU',
// value: sysCpuUsage,
// itemStyle: {
// color: colorStyle(sysCpuUsage),
// shadowColor: colorStyle(sysCpuUsage),
// },
// },
// ],
// },
// {
// data: [
// {
// name: '网元CPU',
// value: nfCpuUsage,
// itemStyle: {
// color: colorStyle(nfCpuUsage),
// shadowColor: colorStyle(nfCpuUsage),
// },
// },
// ],
// },
// ],
// });
// }, 2000);
nextTick(() => {
handleRanderChart(neResourcesDom.value, optionData);
});
});
onBeforeUnmount(() => {});