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

feat: 看板左右高度百分比适配

Browse Source
This commit is contained in:
TsMask
2024-01-27 14:57:21 +08:00
parent 4ea8ec2f96
commit 24b367c08e
7 changed files with 395 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,24 @@
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';
import { onMounted, ref, onBeforeUnmount, nextTick, watch } from 'vue';
import * as echarts from 'echarts/core';
import { TooltipComponent } from 'echarts/components';
import { GaugeChart } from 'echarts/charts';
import { GridComponent, GridComponentOption } from 'echarts/components';
import {
BarChart,
BarSeriesOption,
PictorialBarChart,
PictorialBarSeriesOption,
} 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';
import { markRaw } from 'vue';
const { t } = useI18n();
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
echarts.use([GridComponent, BarChart, PictorialBarChart, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
type EChartsOption = echarts.ComposeOption<
GridComponentOption | BarSeriesOption | PictorialBarSeriesOption
>;
/**图DOM节点实例对象 */
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
@@ -20,199 +26,188 @@ const neResourcesDom = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
const neResourcesChart = ref<any>(null);
const optionData: EChartsOption = {
tooltip: {
formatter: '{a} <br> {b} : {c}%',
// 类别
const category = ref<any>([
{
name: '系统内存',
value: 1,
},
{
name: '系统CPU',
value: 1,
},
{
name: '网元CPU',
value: 1,
},
]);
// 数据总数
const total = 100;
/**图数据 */
const optionData: EChartsOption = {
xAxis: {
max: total,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
grid: {
top: '1%', // 设置条形图的边距
bottom: '12%',
left: '25%',
right: '25%',
},
yAxis: [
{
type: 'category',
inverse: false,
data: category.value,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
],
series: [
{
name: '系统内存',
type: 'gauge',
center: ['15%', '45%'],
radius: '65%',
startAngle: 90,
endAngle: -270,
min: 1,
max: 100,
// 内
type: 'bar',
barWidth: 10,
legendHoverLink: false,
silent: true,
itemStyle: {
color: '#1890ff',
},
progress: {
show: true,
width: 20,
overlap: true,
roundCap: true,
clip: false,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 20,
color: function (params) {
// 红色
if (+params.value >= 70) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#fff1f0' },
{ offset: 0.5, color: '#ffa39e' },
{ offset: 1, color: '#f5222d' },
]);
}
// 蓝色
if (+params.value >= 30) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f0f5ff' },
{ offset: 0.5, color: '#adc6ff' },
{ offset: 1, color: '#2f54eb' },
]);
}
// 绿色
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f6ffed' },
{ offset: 0.5, color: '#b7eb8f' },
{ offset: 1, color: '#52c41a' },
]);
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
label: {
show: true,
offsetCenter: [0, '-10%'],
position: 'left',
formatter: '{b}: ',
fontSize: 15,
color: '#fafafa',
color: '#fff',
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '30%'],
fontSize: 15,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
},
data: [
{
name: '系统内存',
value: 1,
},
],
data: category.value,
z: 1,
animationEasing: 'elasticOut',
},
{
name: '系统CPU',
type: 'gauge',
center: ['50%', '45%'],
radius: '65%',
startAngle: 90,
endAngle: -270,
min: 1,
max: 100,
// 分隔
type: 'pictorialBar',
itemStyle: {
color: '#1890ff',
color: '#0a3ca0',
},
progress: {
show: true,
width: 20,
overlap: true,
roundCap: true,
clip: false,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 20,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: true,
offsetCenter: [0, '-10%'],
fontSize: 15,
color: '#fafafa',
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '30%'],
fontSize: 15,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
},
data: [
{
name: '系统内存',
value: 20,
},
],
symbolRepeat: 'fixed',
symbolMargin: 6,
symbol: 'rect',
symbolClip: true,
symbolSize: [1, 12],
symbolPosition: 'start',
symbolOffset: [0, -1],
symbolBoundingData: total,
data: category.value,
z: 2,
animationEasing: 'elasticOut',
},
{
name: '网元内存',
type: 'gauge',
center: ['85%', '45%'],
radius: '65%',
startAngle: 90,
endAngle: -270,
min: 1,
max: 100,
// 外边框
type: 'pictorialBar',
symbol: 'rect',
symbolBoundingData: total,
itemStyle: {
color: '#1890ff',
color: 'transparent',
},
progress: {
show: true,
width: 20,
overlap: true,
roundCap: true,
clip: false,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
width: 20,
label: {
formatter: params => {
var text = `{a| ${params.value}%} `;
if (+params.value >= 70) {
text = `{c| ${params.value}%} `;
} else if (+params.value >= 30) {
text = `{b| ${params.value}%} `;
}
return text;
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
anchor: {
show: false,
},
title: {
show: true,
offsetCenter: [0, '-10%'],
fontSize: 15,
color: '#fafafa',
},
detail: {
valueAnimation: true,
width: '60%',
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '30%'],
fontSize: 15,
fontWeight: 'bolder',
formatter: '{value}%',
color: 'inherit',
},
data: [
{
name: '系统内存',
value: 20,
rich: {
a: {
color: '#52c41a', // 绿
fontSize: 16,
},
b: {
color: '#2f54eb', // 蓝
fontSize: 16,
},
c: {
color: '#f5222d', // 红
fontSize: 16,
},
f: {
color: '#ffffff', // 默认
fontSize: 16,
},
},
],
position: 'right',
distance: 0, // 向右偏移位置
show: true,
},
data: category.value,
z: 0,
animationEasing: 'elasticOut',
},
{
name: '外框',
type: 'bar',
barGap: '-120%', // 设置外框粗细
data: [total, total, total],
barWidth: 14,
itemStyle: {
color: 'transparent', // 填充色
borderColor: '#0a3ca0', // 边框色
borderWidth: 1, // 边框宽度
borderRadius: 1, //圆角半径
},
label: {
// 标签显示位置
show: false,
position: 'top', // insideTop 或者横向的 insideLeft
},
z: 0,
},
],
};
@@ -223,12 +218,14 @@ function handleRanderChart(
option: EChartsOption
) {
if (!container) return;
neResourcesChart.value = echarts.init(container, 'light');
neResourcesChart.value = markRaw(echarts.init(container, 'light'));
option && neResourcesChart.value.setOption(option);
// 创建 ResizeObserver 实例
var observer = new ResizeObserver(function (entries) {
neResourcesChart.value.resize();
var observer = new ResizeObserver(entries => {
if (neResourcesChart.value) {
neResourcesChart.value.resize();
}
});
// 监听元素大小变化
observer.observe(container);
@@ -240,75 +237,45 @@ function fnChangeData(data: any[], itemID: string) {
info = data.find((item: any) => item.id === 'OMC');
graphNodeClickID.value = 'OMC';
}
let sysMemUsage = 0;
// console.log(info.id);
// console.log(info.neState.cpu.nfCpuUsage);
// console.log(info.neState.cpu.sysCpuUsage);
// console.log(info.neState.mem.sysMemUsage);
let sysCpuUsage = 0;
let nfCpuUsage = 0;
if (info.neState.cpu) {
nfCpuUsage = info.neState.cpu.nfCpuUsage;
if (nfCpuUsage > 1000) {
if (nfCpuUsage > 100) {
nfCpuUsage = +(info.neState.cpu.nfCpuUsage / 100).toFixed(2);
}
sysCpuUsage = info.neState.cpu.sysCpuUsage;
if (nfCpuUsage > 1000) {
if (sysCpuUsage > 100) {
sysCpuUsage = +(info.neState.cpu.sysCpuUsage / 100).toFixed(2);
}
}
let sysMemUsage = 0;
if (info.neState.mem) {
let men = info.neState.mem.sysMemUsage;
if (men > 1000) {
if (men > 100) {
men = +(men / 100).toFixed(2);
}
sysMemUsage = men;
}
function colorStyle(v: number): string {
let color = '#1890ff';
if (v < 30) {
color = '#73d13d';
}
if (v > 60) {
color = '#ff4d4f';
}
return color;
}
category.value[0].value = sysMemUsage;
category.value[1].value = sysCpuUsage;
category.value[2].value = nfCpuUsage;
neResourcesChart.value.setOption({
series: [
{
data: [
{
name: '系统内存',
value: sysMemUsage,
itemStyle: {
color: colorStyle(sysMemUsage),
shadowColor: colorStyle(sysMemUsage),
},
},
],
data: category.value,
},
{
data: [
{
name: '系统CPU',
value: sysCpuUsage,
itemStyle: {
color: colorStyle(sysCpuUsage),
shadowColor: colorStyle(sysCpuUsage),
},
},
],
data: category.value,
},
{
data: [
{
name: '网元CPU',
value: nfCpuUsage,
itemStyle: {
color: colorStyle(nfCpuUsage),
shadowColor: colorStyle(nfCpuUsage),
},
},
],
data: category.value,
},
],
});
@@ -330,43 +297,30 @@ watch(graphNodeClickID, v => {
onMounted(() => {
// setInterval(function () {
// var ndata = [
// {
// name: '系统内存',
// value: Math.round(Math.random() * 100),
// },
// {
// name: '系统CPU',
// value: Math.round(Math.random() * 100),
// },
// {
// name: '网元CPU',
// value: Math.round(Math.random() * 100),
// },
// ];
// neResourcesChart.value.setOption({
// series: [
// {
// data: [
// {
// name: '系统内存',
// value: sysMemUsage,
// itemStyle: {
// color: colorStyle(sysMemUsage),
// shadowColor: colorStyle(sysMemUsage),
// },
// },
// ],
// data: ndata,
// },
// {
// data: [
// {
// name: '系统CPU',
// value: sysCpuUsage,
// itemStyle: {
// color: colorStyle(sysCpuUsage),
// shadowColor: colorStyle(sysCpuUsage),
// },
// },
// ],
// data: ndata,
// },
// {
// data: [
// {
// name: '网元CPU',
// value: nfCpuUsage,
// itemStyle: {
// color: colorStyle(nfCpuUsage),
// shadowColor: colorStyle(nfCpuUsage),
// },
// },
// ],
// data: ndata,
// },
// ],
// });