补充组件
This commit is contained in:
lai
@@ -1,241 +1,387 @@
|
|||||||
|
<template>
|
||||||
|
<div id="trend" class="chart-container"></div>
|
||||||
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import { PageContainer } from 'antdv-pro-layout';
|
import { mainGet } from '@/api/faultManage/actAlarm';
|
||||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
||||||
import { listNe, stateNe } from '@/api/ne/ne';
|
|
||||||
import { message } from 'ant-design-vue/lib';
|
|
||||||
import { getGraphData } from '@/api/monitor/topology';
|
|
||||||
import { parseDateToStr } from '@/utils/date-utils';
|
|
||||||
import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
|
|
||||||
import {
|
|
||||||
edgeCubicAnimateCircleMove,
|
|
||||||
edgeCubicAnimateLineDash,
|
|
||||||
edgeLineAnimateState,
|
|
||||||
} from '@/views/monitor/topologyBuild/hooks/registerEdge';
|
|
||||||
import {
|
|
||||||
nodeCircleAnimateShapeR,
|
|
||||||
nodeCircleAnimateShapeStroke,
|
|
||||||
nodeImageAnimateState,
|
|
||||||
nodeRectAnimateState,
|
|
||||||
} from '@/views/monitor/topologyBuild/hooks/registerNode';
|
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
import { TooltipComponent } from 'echarts/components';
|
import {
|
||||||
import { GaugeChart } from 'echarts/charts';
|
GridComponent,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
} from 'echarts/components';
|
||||||
|
import { BarChart, PieChart } from 'echarts/charts';
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { LabelLayout } from 'echarts/features';
|
||||||
import useI18n from '@/hooks/useI18n';
|
import useI18n from '@/hooks/useI18n';
|
||||||
const { t } = useI18n();
|
const { t, currentLocale } = useI18n();
|
||||||
|
echarts.use([
|
||||||
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
|
GridComponent,
|
||||||
|
BarChart,
|
||||||
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
|
CanvasRenderer,
|
||||||
|
TitleComponent,
|
||||||
/**图DOM节点实例对象 */
|
TooltipComponent,
|
||||||
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
|
GridComponent,
|
||||||
|
LegendComponent,
|
||||||
/**图实例对象 */
|
BarChart,
|
||||||
const neResourcesChart = ref<any>(null);
|
CanvasRenderer,
|
||||||
|
TooltipComponent,
|
||||||
const optionData: EChartsOption = {
|
LegendComponent,
|
||||||
tooltip: {
|
PieChart,
|
||||||
formatter: '{a} <br> {b} : {c}%',
|
CanvasRenderer,
|
||||||
},
|
LabelLayout,
|
||||||
series: [
|
]);
|
||||||
{
|
// 将现有数据补全为期望的格式
|
||||||
name: '系统内存',
|
function completeData(existingData: any, expectedData: any) {
|
||||||
type: 'gauge',
|
let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
|
||||||
center: ['30%', '25%'],
|
const result = expectedData.map((item: any) => {
|
||||||
radius: '40%',
|
const found = existingData.find(
|
||||||
startAngle: 90,
|
(existingItem: any) => existingItem.name === item.name
|
||||||
endAngle: -270,
|
);
|
||||||
min: 1,
|
if (found) return found;
|
||||||
max: 100,
|
else {
|
||||||
itemStyle: {
|
return item;
|
||||||
color: '#1890ff',
|
}
|
||||||
},
|
});
|
||||||
progress: {
|
var lang = currentLocale.value.split('_')[0];
|
||||||
show: true,
|
console.log(lang);
|
||||||
width: 10,
|
result.forEach((item: any) => {
|
||||||
overlap: true,
|
item.name = t('views.index.' + item.name);
|
||||||
roundCap: true,
|
});
|
||||||
clip: false,
|
return result;
|
||||||
},
|
}
|
||||||
pointer: {
|
|
||||||
show: false,
|
function fnDesign() {
|
||||||
},
|
mainGet().then((res: any) => {
|
||||||
axisLine: {
|
const expectedData = [
|
||||||
lineStyle: {
|
{
|
||||||
width: 10,
|
name: 'CommunicationAlarm',
|
||||||
},
|
value: 0,
|
||||||
},
|
},
|
||||||
axisTick: {
|
{
|
||||||
show: false,
|
name: 'EquipmentAlarm',
|
||||||
},
|
value: 0,
|
||||||
splitLine: {
|
},
|
||||||
show: false,
|
{
|
||||||
},
|
name: 'ProcessingFailure',
|
||||||
axisLabel: {
|
value: 0,
|
||||||
show: false,
|
},
|
||||||
},
|
{
|
||||||
anchor: {
|
name: 'EnvironmentalAlarm',
|
||||||
show: false,
|
value: 0,
|
||||||
},
|
},
|
||||||
title: {
|
{
|
||||||
show: true,
|
name: 'QualityOfServiceAlarm',
|
||||||
offsetCenter: [0, -5],
|
value: 0,
|
||||||
fontSize: 10,
|
},
|
||||||
color: '#fafafa',
|
];
|
||||||
},
|
var chartDom = document.getElementById('trend');
|
||||||
detail: {
|
var myChart = echarts.init(chartDom);
|
||||||
valueAnimation: true,
|
var option: any;
|
||||||
width: '60%',
|
var colorList = [
|
||||||
lineHeight: 40,
|
'#afa3f5',
|
||||||
borderRadius: 8,
|
'#00d488',
|
||||||
offsetCenter: [0, 10],
|
'#3feed4',
|
||||||
fontSize: 10,
|
'#3bafff',
|
||||||
fontWeight: 'bolder',
|
'#f1bb4c',
|
||||||
formatter: '{value}%',
|
'#aff',
|
||||||
color: 'inherit',
|
'rgba(250,250,250,0.5)',
|
||||||
},
|
];
|
||||||
data: [
|
option = {
|
||||||
{
|
legend: {
|
||||||
name: '系统内存',
|
bottom: 5,
|
||||||
value: 20,
|
left: 'center',
|
||||||
},
|
data: ['香料香精', '粘度调节类', '防腐类', '防晒类', '防晒剂'],
|
||||||
],
|
},
|
||||||
},
|
tooltip: {
|
||||||
{
|
trigger: 'axis',
|
||||||
name: '系统CPU',
|
axisPointer: {
|
||||||
type: 'gauge',
|
type: 'cross',
|
||||||
center: ['70%', '25%'],
|
},
|
||||||
radius: '40%',
|
},
|
||||||
startAngle: 90,
|
|
||||||
endAngle: -270,
|
xAxis: [
|
||||||
min: 1,
|
{
|
||||||
max: 100,
|
gridIndex: 0,
|
||||||
itemStyle: {
|
show: false,
|
||||||
color: '#1890ff',
|
type: 'category',
|
||||||
},
|
boundaryGap: false,
|
||||||
progress: {
|
data: [
|
||||||
show: true,
|
'2017年2季度',
|
||||||
width: 10,
|
'2017年3季度',
|
||||||
overlap: true,
|
'2017年4季度',
|
||||||
roundCap: true,
|
'2018年1季度',
|
||||||
clip: false,
|
'2018年2季度',
|
||||||
},
|
'2018年3季度',
|
||||||
pointer: {
|
'2018年4季度',
|
||||||
show: false,
|
'2019年1季度',
|
||||||
},
|
'2019年2季度',
|
||||||
axisLine: {
|
'2019年3季度',
|
||||||
lineStyle: {
|
'2019年4季度',
|
||||||
width: 10,
|
'2020年1季度',
|
||||||
},
|
],
|
||||||
},
|
},
|
||||||
axisTick: {
|
{
|
||||||
show: false,
|
gridIndex: 1,
|
||||||
},
|
show: false,
|
||||||
splitLine: {
|
type: 'category',
|
||||||
show: false,
|
boundaryGap: false,
|
||||||
},
|
data: [
|
||||||
axisLabel: {
|
'2017年2季度',
|
||||||
show: false,
|
'2017年3季度',
|
||||||
},
|
'2017年4季度',
|
||||||
anchor: {
|
'2018年1季度',
|
||||||
show: false,
|
'2018年2季度',
|
||||||
},
|
'2018年3季度',
|
||||||
title: {
|
'2018年4季度',
|
||||||
show: true,
|
'2019年1季度',
|
||||||
offsetCenter: [0, -5],
|
'2019年2季度',
|
||||||
fontSize: 10,
|
'2019年3季度',
|
||||||
color: '#fafafa',
|
'2019年4季度',
|
||||||
},
|
'2020年1季度',
|
||||||
detail: {
|
],
|
||||||
valueAnimation: true,
|
},
|
||||||
width: '60%',
|
{
|
||||||
lineHeight: 40,
|
gridIndex: 2,
|
||||||
borderRadius: 8,
|
show: false,
|
||||||
offsetCenter: [0, 10],
|
type: 'category',
|
||||||
fontSize: 10,
|
boundaryGap: false,
|
||||||
fontWeight: 'bolder',
|
data: [
|
||||||
formatter: '{value}%',
|
'2017年2季度',
|
||||||
color: 'inherit',
|
'2017年3季度',
|
||||||
},
|
'2017年4季度',
|
||||||
data: [
|
'2018年1季度',
|
||||||
{
|
'2018年2季度',
|
||||||
name: '系统内存',
|
'2018年3季度',
|
||||||
value: 20,
|
'2018年4季度',
|
||||||
},
|
'2019年1季度',
|
||||||
],
|
'2019年2季度',
|
||||||
},
|
'2019年3季度',
|
||||||
],
|
'2019年4季度',
|
||||||
};
|
'2020年1季度',
|
||||||
|
],
|
||||||
/**图数据渲染 */
|
},
|
||||||
function handleRanderChart(
|
{
|
||||||
container: HTMLElement | undefined,
|
gridIndex: 3,
|
||||||
option: EChartsOption
|
show: false,
|
||||||
) {
|
type: 'category',
|
||||||
if (!container) return;
|
boundaryGap: false,
|
||||||
const { clientHeight, clientWidth } = container;
|
data: [
|
||||||
|
'2017年2季度',
|
||||||
neResourcesChart.value = echarts.init(container, 'light', {
|
'2017年3季度',
|
||||||
width: clientWidth,
|
'2017年4季度',
|
||||||
height: clientHeight - 36,
|
'2018年1季度',
|
||||||
|
'2018年2季度',
|
||||||
|
'2018年3季度',
|
||||||
|
'2018年4季度',
|
||||||
|
'2019年1季度',
|
||||||
|
'2019年2季度',
|
||||||
|
'2019年3季度',
|
||||||
|
'2019年4季度',
|
||||||
|
'2020年1季度',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 4,
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
'2017年2季度',
|
||||||
|
'2017年3季度',
|
||||||
|
'2017年4季度',
|
||||||
|
'2018年1季度',
|
||||||
|
'2018年2季度',
|
||||||
|
'2018年3季度',
|
||||||
|
'2018年4季度',
|
||||||
|
'2019年1季度',
|
||||||
|
'2019年2季度',
|
||||||
|
'2019年3季度',
|
||||||
|
'2019年4季度',
|
||||||
|
'2020年1季度',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitNumber: 1,
|
||||||
|
name: '香料香精',
|
||||||
|
nameLocation: 'center',
|
||||||
|
nameRotate: 360,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 1,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitNumber: 1,
|
||||||
|
name: '粘度调节类',
|
||||||
|
nameLocation: 'center',
|
||||||
|
nameRotate: 360,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 2,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitNumber: 1,
|
||||||
|
name: '防腐类',
|
||||||
|
nameLocation: 'center',
|
||||||
|
nameRotate: 360,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 3,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitNumber: 1,
|
||||||
|
name: '防晒类',
|
||||||
|
nameLocation: 'center',
|
||||||
|
nameRotate: 360,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gridIndex: 4,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitNumber: 1,
|
||||||
|
name: '防晒剂',
|
||||||
|
nameLocation: 'center',
|
||||||
|
nameRotate: 360,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: [
|
||||||
|
{
|
||||||
|
top: '17%',
|
||||||
|
height: '15%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: '32%',
|
||||||
|
height: '15%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: '47%',
|
||||||
|
height: '15%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
top: '62%',
|
||||||
|
height: '15%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
bottom: '8%',
|
||||||
|
height: '15%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 0,
|
||||||
|
],
|
||||||
|
xAxisIndex: 0,
|
||||||
|
yAxisIndex: 0,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
|
||||||
|
],
|
||||||
|
xAxisIndex: 1,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0,
|
||||||
|
],
|
||||||
|
xAxisIndex: 2,
|
||||||
|
yAxisIndex: 2,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
|
||||||
|
],
|
||||||
|
xAxisIndex: 3,
|
||||||
|
yAxisIndex: 3,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
0, 74.1, 67.2, 79.5, 46.4, 46.4, 46.4, 74.1, 67.2, 79.5, 46.4, 0,
|
||||||
|
],
|
||||||
|
xAxisIndex: 4,
|
||||||
|
yAxisIndex: 4,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
window.onresize = function () {
|
||||||
|
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
|
||||||
|
myChart.resize();
|
||||||
|
};
|
||||||
|
// 点击圆形饼状图
|
||||||
|
myChart.on('click', (params: any) => {
|
||||||
|
// 根据点击的数据params更新柱状图的数据
|
||||||
|
console.log(params);
|
||||||
|
// const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
|
||||||
|
// updateBarChart(newData); // 更新柱状图
|
||||||
|
});
|
||||||
});
|
});
|
||||||
option && neResourcesChart.value.setOption(option);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setInterval(function () {
|
fnDesign();
|
||||||
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);
|
|
||||||
let color = '#1890ff';
|
|
||||||
if (random < 30) {
|
|
||||||
color = '#73d13d';
|
|
||||||
}
|
|
||||||
if (random > 60) {
|
|
||||||
color = '#ff4d4f';
|
|
||||||
}
|
|
||||||
neResourcesChart.value.setOption({
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
value: random,
|
|
||||||
itemStyle: {
|
|
||||||
color: color,
|
|
||||||
shadowColor: color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统CPU',
|
|
||||||
value: random2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
handleRanderChart(neResourcesDom.value, optionData);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<div ref="neResourcesDom" class="chart"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.chart {
|
.chart-container {
|
||||||
|
/* 设置图表容器大小和位置 */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,170 +1,372 @@
|
|||||||
|
<template>
|
||||||
|
<div id="main" class="chart-container"></div>
|
||||||
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
|
import { onMounted } from 'vue';
|
||||||
import { PageContainer } from 'antdv-pro-layout';
|
import { mainGet } from '@/api/faultManage/actAlarm';
|
||||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
||||||
import { listNe, stateNe } from '@/api/ne/ne';
|
|
||||||
import { message } from 'ant-design-vue/lib';
|
|
||||||
import { getGraphData } from '@/api/monitor/topology';
|
|
||||||
import { parseDateToStr } from '@/utils/date-utils';
|
|
||||||
import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
|
|
||||||
import {
|
|
||||||
edgeCubicAnimateCircleMove,
|
|
||||||
edgeCubicAnimateLineDash,
|
|
||||||
edgeLineAnimateState,
|
|
||||||
} from '@/views/monitor/topologyBuild/hooks/registerEdge';
|
|
||||||
import {
|
|
||||||
nodeCircleAnimateShapeR,
|
|
||||||
nodeCircleAnimateShapeStroke,
|
|
||||||
nodeImageAnimateState,
|
|
||||||
nodeRectAnimateState,
|
|
||||||
} from '@/views/monitor/topologyBuild/hooks/registerNode';
|
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
import { TooltipComponent } from 'echarts/components';
|
import {
|
||||||
import { GaugeChart } from 'echarts/charts';
|
GridComponent,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
} from 'echarts/components';
|
||||||
|
import { BarChart, PieChart } from 'echarts/charts';
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import { LabelLayout } from 'echarts/features';
|
||||||
import useI18n from '@/hooks/useI18n';
|
import useI18n from '@/hooks/useI18n';
|
||||||
const { t } = useI18n();
|
const { t, currentLocale } = useI18n();
|
||||||
|
echarts.use([
|
||||||
|
GridComponent,
|
||||||
|
BarChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
GridComponent,
|
||||||
|
LegendComponent,
|
||||||
|
BarChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
PieChart,
|
||||||
|
CanvasRenderer,
|
||||||
|
LabelLayout,
|
||||||
|
]);
|
||||||
|
// 将现有数据补全为期望的格式
|
||||||
|
// function completeData(existingData: any, expectedData: any) {
|
||||||
|
// let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
|
||||||
|
// const result = expectedData.map((item: any) => {
|
||||||
|
// const found = existingData.find(
|
||||||
|
// (existingItem: any) => existingItem.name === item.name
|
||||||
|
// );
|
||||||
|
// if (found) return found;
|
||||||
|
// else {
|
||||||
|
// return item;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// var lang = currentLocale.value.split('_')[0];
|
||||||
|
// console.log(lang);
|
||||||
|
// result.forEach((item: any) => {
|
||||||
|
// item.name = t('views.index.' + item.name);
|
||||||
|
// });
|
||||||
|
// return result;
|
||||||
|
// }
|
||||||
|
|
||||||
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
|
function fnDesign() {
|
||||||
|
mainGet().then((res: any) => {
|
||||||
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
|
const expectedData = [
|
||||||
|
{
|
||||||
/**图DOM节点实例对象 */
|
name: 'CommunicationAlarm',
|
||||||
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
|
value: 0,
|
||||||
|
|
||||||
/**图实例对象 */
|
|
||||||
const neResourcesChart = ref<any>(null);
|
|
||||||
|
|
||||||
const optionData: EChartsOption = {
|
|
||||||
tooltip: {
|
|
||||||
formatter: '{a} <br> {b} : {c}%',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
type: 'gauge',
|
|
||||||
center: ['30%', '25%'],
|
|
||||||
radius: '40%',
|
|
||||||
startAngle: 90,
|
|
||||||
endAngle: -270,
|
|
||||||
min: 1,
|
|
||||||
max: 100,
|
|
||||||
itemStyle: {
|
|
||||||
color: '#1890ff',
|
|
||||||
},
|
},
|
||||||
progress: {
|
{
|
||||||
show: true,
|
name: 'EquipmentAlarm',
|
||||||
width: 10,
|
value: 0,
|
||||||
overlap: true,
|
|
||||||
roundCap: true,
|
|
||||||
clip: false,
|
|
||||||
},
|
},
|
||||||
pointer: {
|
{
|
||||||
|
name: 'ProcessingFailure',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'EnvironmentalAlarm',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'QualityOfServiceAlarm',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
var chartDom = document.getElementById('main');
|
||||||
|
var myChart = echarts.init(chartDom);
|
||||||
|
var option: any;
|
||||||
|
var colorList = [
|
||||||
|
'#afa3f5',
|
||||||
|
'#00d488',
|
||||||
|
'#3feed4',
|
||||||
|
'#3bafff',
|
||||||
|
'#f1bb4c',
|
||||||
|
'#aff',
|
||||||
|
'rgba(250,250,250,0.5)',
|
||||||
|
];
|
||||||
|
// option = {
|
||||||
|
// // title: {
|
||||||
|
// // subtext: '告警占比',
|
||||||
|
// // x: 'center',
|
||||||
|
// // y: '42%',
|
||||||
|
// // textStyle: {
|
||||||
|
// // fontSize: 12,
|
||||||
|
// // fontWeight: 'normal',
|
||||||
|
// // color: ['#333'],
|
||||||
|
// // },
|
||||||
|
// // subtextStyle: {
|
||||||
|
// // color: '#f1bb4c',
|
||||||
|
// // fontSize: 16,
|
||||||
|
// // },
|
||||||
|
// // },
|
||||||
|
// grid: {
|
||||||
|
// left: '10%',
|
||||||
|
// right: '5%',
|
||||||
|
// bottom: '10%',
|
||||||
|
// },
|
||||||
|
// legend: {
|
||||||
|
// show: false,
|
||||||
|
// orient: 'vertical',
|
||||||
|
// top: 'middle',
|
||||||
|
// right: '5%',
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#3db8ff',
|
||||||
|
// fontSize: 12,
|
||||||
|
// },
|
||||||
|
// icon: 'roundRect',
|
||||||
|
// },
|
||||||
|
// series: [
|
||||||
|
// // 主要展示层的
|
||||||
|
// {
|
||||||
|
// radius: ['29%', '59%'],
|
||||||
|
// center: ['50%', '50%'],
|
||||||
|
// type: 'pie',
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: function (params: any) {
|
||||||
|
// return colorList[params.dataIndex];
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// normal: {
|
||||||
|
// show: true,
|
||||||
|
// length: 20,
|
||||||
|
// length2: 100,
|
||||||
|
// lineStyle: {
|
||||||
|
// color: '#d3d3d3',
|
||||||
|
// },
|
||||||
|
// align: 'right',
|
||||||
|
// },
|
||||||
|
// color: '#000',
|
||||||
|
// emphasis: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// normal: {
|
||||||
|
// formatter: '{b}: {d}%',
|
||||||
|
// padding: [0, -90],
|
||||||
|
// height: 35,
|
||||||
|
// rich: {
|
||||||
|
// a: {
|
||||||
|
// width: 38,
|
||||||
|
// height: 38,
|
||||||
|
// lineHeight: 50,
|
||||||
|
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// b: {
|
||||||
|
// width: 29,
|
||||||
|
// height: 45,
|
||||||
|
// lineHeight: 50,
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// c: {
|
||||||
|
// width: 34,
|
||||||
|
// height: 33,
|
||||||
|
// lineHeight: 50,
|
||||||
|
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// d: {
|
||||||
|
// width: 34,
|
||||||
|
// height: 44,
|
||||||
|
// lineHeight: 50,
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// e: {
|
||||||
|
// width: 38,
|
||||||
|
// height: 30,
|
||||||
|
// lineHeight: 50,
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// nameStyle: {
|
||||||
|
// fontSize: 16,
|
||||||
|
// color: '#555',
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// rate: {
|
||||||
|
// fontSize: 20,
|
||||||
|
// color: '#1ab4b8',
|
||||||
|
// align: 'left',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// data: [
|
||||||
|
// { value: 10, name: '通信告警' },
|
||||||
|
// { value: 20, name: '设备告警' },
|
||||||
|
// { value: 30, name: '服务质量' },
|
||||||
|
// { value: 30, name: '环境告警' },
|
||||||
|
// { value: 20, name: '处理错误' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// // 边框的设置
|
||||||
|
// {
|
||||||
|
// radius: ['54%', '59%'],
|
||||||
|
// center: ['50%', '50%'],
|
||||||
|
// type: 'pie',
|
||||||
|
// label: {
|
||||||
|
// normal: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// emphasis: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// labelLine: {
|
||||||
|
// normal: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// emphasis: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// animation: false,
|
||||||
|
// tooltip: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: 'rgba(250,250,250,0.5)',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// data: [
|
||||||
|
// {
|
||||||
|
// value: 1,
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// };
|
||||||
|
option = {
|
||||||
|
grid: {
|
||||||
|
bottom: 150,
|
||||||
|
left: 0,
|
||||||
|
right: '10%',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
orient: 'vertical',
|
||||||
axisLine: {
|
top: 'middle',
|
||||||
lineStyle: {
|
right: '5%',
|
||||||
width: 10,
|
textStyle: {
|
||||||
|
color: '#f2f2f2',
|
||||||
|
fontSize: 25,
|
||||||
},
|
},
|
||||||
|
icon: 'roundRect',
|
||||||
},
|
},
|
||||||
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,
|
|
||||||
fontWeight: 'bolder',
|
|
||||||
formatter: '{value}%',
|
|
||||||
color: 'inherit',
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
/**图数据渲染 */
|
|
||||||
function handleRanderChart(
|
|
||||||
container: HTMLElement | undefined,
|
|
||||||
option: EChartsOption
|
|
||||||
) {
|
|
||||||
if (!container) return;
|
|
||||||
const { clientHeight, clientWidth } = container;
|
|
||||||
|
|
||||||
neResourcesChart.value = echarts.init(container, 'light', {
|
|
||||||
width: clientWidth,
|
|
||||||
height: clientHeight - 36,
|
|
||||||
});
|
|
||||||
option && neResourcesChart.value.setOption(option);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
let color = '#1890ff';
|
|
||||||
if (random < 30) {
|
|
||||||
color = '#73d13d';
|
|
||||||
}
|
|
||||||
if (random > 60) {
|
|
||||||
color = '#ff4d4f';
|
|
||||||
}
|
|
||||||
neResourcesChart.value.setOption({
|
|
||||||
series: [
|
series: [
|
||||||
|
// 主要展示层的
|
||||||
{
|
{
|
||||||
|
radius: ['29%', '59%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
type: 'pie',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function (params: any) {
|
||||||
|
return colorList[params.dataIndex];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
length: 20,
|
||||||
|
length2: 120,
|
||||||
|
align: 'right',
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: '{b}: {d}%',
|
||||||
|
padding: [0, -110],
|
||||||
|
height: 35,
|
||||||
|
alignTo: 'labelLine',
|
||||||
|
bleedMargin: 5,
|
||||||
|
color: 'auto',
|
||||||
|
borderColor: '#777',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: '#ff0000', // 修改名称颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1, name: '通信告警' },
|
||||||
|
{ value: 2, name: '设备告警' },
|
||||||
|
{ value: 3, name: '服务质量' },
|
||||||
|
{ value: 3, name: '环境告警' },
|
||||||
|
{ value: 2, name: '处理错误' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 边框的设置
|
||||||
|
{
|
||||||
|
radius: ['54%', '59%'],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
type: 'pie',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(250,250,250,0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
name: '系统内存',
|
value: 1,
|
||||||
value: random,
|
|
||||||
itemStyle: {
|
|
||||||
color: color,
|
|
||||||
shadowColor: color,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
};
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
window.onresize = function () {
|
||||||
|
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
|
||||||
|
myChart.resize();
|
||||||
|
};
|
||||||
|
// 点击圆形饼状图
|
||||||
|
myChart.on('click', (params: any) => {
|
||||||
|
// 根据点击的数据params更新柱状图的数据
|
||||||
|
console.log(params);
|
||||||
|
// const newData = generateNewData(params.name); // 根据点击的数据生成新的柱状图数据
|
||||||
|
// updateBarChart(newData); // 更新柱状图
|
||||||
});
|
});
|
||||||
}, 2000);
|
});
|
||||||
|
}
|
||||||
|
|
||||||
handleRanderChart(neResourcesDom.value, optionData);
|
onMounted(() => {
|
||||||
|
fnDesign();
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
|
||||||
<div ref="neResourcesDom" class="chart"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.chart {
|
.chart-container {
|
||||||
|
/* 设置图表容器大小和位置 */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,242 +1,295 @@
|
|||||||
<script setup lang="ts">
|
<!-- <script setup lang="ts">
|
||||||
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
|
import { reactive, onMounted } from 'vue';
|
||||||
import { PageContainer } from 'antdv-pro-layout';
|
import { PageContainer } from 'antdv-pro-layout';
|
||||||
|
import ChartLine from '@/components/ChartLine/index.vue';
|
||||||
|
import { getLoad } from '@/api/monitor/monitor';
|
||||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||||
import { listNe, stateNe } from '@/api/ne/ne';
|
|
||||||
import { message } from 'ant-design-vue/lib';
|
|
||||||
import { getGraphData } from '@/api/monitor/topology';
|
|
||||||
import { parseDateToStr } from '@/utils/date-utils';
|
|
||||||
import { Graph, GraphData, Menu, Tooltip } from '@antv/g6';
|
|
||||||
import {
|
|
||||||
edgeCubicAnimateCircleMove,
|
|
||||||
edgeCubicAnimateLineDash,
|
|
||||||
edgeLineAnimateState,
|
|
||||||
} from '@/views/monitor/topologyBuild/hooks/registerEdge';
|
|
||||||
import {
|
|
||||||
nodeCircleAnimateShapeR,
|
|
||||||
nodeCircleAnimateShapeStroke,
|
|
||||||
nodeImageAnimateState,
|
|
||||||
nodeRectAnimateState,
|
|
||||||
} from '@/views/monitor/topologyBuild/hooks/registerNode';
|
|
||||||
import * as echarts from 'echarts/core';
|
|
||||||
import { TooltipComponent } from 'echarts/components';
|
|
||||||
import { GaugeChart } from 'echarts/charts';
|
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
|
||||||
|
|
||||||
import useI18n from '@/hooks/useI18n';
|
import useI18n from '@/hooks/useI18n';
|
||||||
|
import {
|
||||||
|
YYYY_MM_DD_HH_MM_SS,
|
||||||
|
parseDateToStr,
|
||||||
|
parseDateWithoutYear,
|
||||||
|
parseStrToDate,
|
||||||
|
} from '@/utils/date-utils';
|
||||||
|
import { parseSizeFromKBs } from '@/utils/parse-utils';
|
||||||
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
|
/**开始结束时间类型 */
|
||||||
|
type RangePickerType = {
|
||||||
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
|
placeholder: [string, string];
|
||||||
|
ranges: Record<string, [Dayjs, Dayjs]>;
|
||||||
/**图DOM节点实例对象 */
|
/**全局时间 */
|
||||||
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
|
all: [string, string];
|
||||||
|
/**网络 */
|
||||||
/**图实例对象 */
|
network: [string, string];
|
||||||
const neResourcesChart = ref<any>(null);
|
|
||||||
|
|
||||||
const optionData: EChartsOption = {
|
|
||||||
tooltip: {
|
|
||||||
formatter: '{a} <br> {b} : {c}%',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
type: 'gauge',
|
|
||||||
center: ['30%', '25%'],
|
|
||||||
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,
|
|
||||||
fontWeight: 'bolder',
|
|
||||||
formatter: '{value}%',
|
|
||||||
color: 'inherit',
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '系统CPU',
|
|
||||||
type: 'gauge',
|
|
||||||
center: ['70%', '25%'],
|
|
||||||
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,
|
|
||||||
fontWeight: 'bolder',
|
|
||||||
formatter: '{value}%',
|
|
||||||
color: 'inherit',
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
value: 20,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**图数据渲染 */
|
/**开始结束时间 */
|
||||||
function handleRanderChart(
|
let rangePicker = reactive<RangePickerType>({
|
||||||
container: HTMLElement | undefined,
|
placeholder: [
|
||||||
option: EChartsOption
|
t('views.monitor.monitor.startTime'),
|
||||||
) {
|
t('views.monitor.monitor.endTime'),
|
||||||
if (!container) return;
|
],
|
||||||
const { clientHeight, clientWidth } = container;
|
ranges: {
|
||||||
|
[t('views.monitor.monitor.today')]: [
|
||||||
|
dayjs().subtract(1, 'day').startOf('day'),
|
||||||
|
dayjs().subtract(1, 'day').endOf('day'),
|
||||||
|
],
|
||||||
|
[t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
|
||||||
|
[t('views.monitor.monitor.week')]: [
|
||||||
|
dayjs().startOf('week'),
|
||||||
|
dayjs().endOf('week'),
|
||||||
|
],
|
||||||
|
[t('views.monitor.monitor.month')]: [
|
||||||
|
dayjs().startOf('month'),
|
||||||
|
dayjs().endOf('month'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
all: ['', ''],
|
||||||
|
network: ['', ''],
|
||||||
|
});
|
||||||
|
|
||||||
neResourcesChart.value = echarts.init(container, 'light', {
|
/**查询全部资源数据列表 */
|
||||||
width: clientWidth,
|
function fnGetList() {
|
||||||
height: clientHeight - 36,
|
let startTime = null;
|
||||||
|
let endTime = null;
|
||||||
|
const dateString = rangePicker.all;
|
||||||
|
if (dateString[0]) {
|
||||||
|
startTime = parseStrToDate(dateString[0], YYYY_MM_DD_HH_MM_SS);
|
||||||
|
endTime = parseStrToDate(dateString[1], YYYY_MM_DD_HH_MM_SS);
|
||||||
|
} else {
|
||||||
|
const now = new Date();
|
||||||
|
now.setHours(0, 0, 0, 0);
|
||||||
|
startTime = now;
|
||||||
|
endTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
getLoad({
|
||||||
|
type: 'network',
|
||||||
|
startTime: startTime.getTime(),
|
||||||
|
endTime: endTime.getTime(),
|
||||||
|
neType: '#',
|
||||||
|
neId: '#',
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||||
|
fnNetworkChart(res.data.network);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
option && neResourcesChart.value.setOption(option);
|
|
||||||
|
// 设置初始时间段
|
||||||
|
const initRangePicker: [string, string] = [
|
||||||
|
parseDateToStr(startTime, YYYY_MM_DD_HH_MM_SS),
|
||||||
|
parseDateToStr(endTime, YYYY_MM_DD_HH_MM_SS),
|
||||||
|
];
|
||||||
|
rangePicker.all = initRangePicker;
|
||||||
|
rangePicker.network = initRangePicker;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**图表显示数据 */
|
||||||
|
const chartsOption = reactive({
|
||||||
|
/**网络 */
|
||||||
|
networkChart: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**初始图表数据-Network */
|
||||||
|
function fnNetworkChart(data: Record<string, any>[]) {
|
||||||
|
let networkDate: string[] = [];
|
||||||
|
let networkUp: string[] = [];
|
||||||
|
let networkDown: string[] = [];
|
||||||
|
|
||||||
|
for (const item of data) {
|
||||||
|
networkDate.push(parseDateWithoutYear(item.createTime));
|
||||||
|
networkUp.push(Number(item.up).toFixed(2));
|
||||||
|
networkDown.push(Number(item.down).toFixed(2));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标参数
|
||||||
|
const option = {
|
||||||
|
xDatas: networkDate,
|
||||||
|
yDatas: [
|
||||||
|
{
|
||||||
|
name: t('views.monitor.monitor.up'),
|
||||||
|
data: networkUp,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('views.monitor.monitor.down'),
|
||||||
|
data: networkDown,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%',
|
||||||
|
},
|
||||||
|
formatStr: 'KB/s',
|
||||||
|
};
|
||||||
|
chartsOption.networkChart = option;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setInterval(function () {
|
fnGetList();
|
||||||
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);
|
|
||||||
let color = '#1890ff';
|
|
||||||
if (random < 30) {
|
|
||||||
color = '#73d13d';
|
|
||||||
}
|
|
||||||
if (random > 60) {
|
|
||||||
color = '#ff4d4f';
|
|
||||||
}
|
|
||||||
neResourcesChart.value.setOption({
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统内存',
|
|
||||||
value: random,
|
|
||||||
itemStyle: {
|
|
||||||
color: color,
|
|
||||||
shadowColor: color,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
name: '系统CPU',
|
|
||||||
value: random2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
handleRanderChart(neResourcesDom.value, optionData);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="neResourcesDom" class="chart"></div>
|
<div class="chart">
|
||||||
|
<ChartLine
|
||||||
|
:option="chartsOption.networkChart"
|
||||||
|
></ChartLine>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.chart {
|
.chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 400px;
|
||||||
|
}
|
||||||
|
</style> -->
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted } from 'vue';
|
||||||
|
import { PageContainer } from 'antdv-pro-layout';
|
||||||
|
import ChartLine from '@/components/ChartLine/index.vue';
|
||||||
|
import { getLoad } from '@/api/monitor/monitor';
|
||||||
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||||
|
import useI18n from '@/hooks/useI18n';
|
||||||
|
import {
|
||||||
|
YYYY_MM_DD_HH_MM_SS,
|
||||||
|
parseDateToStr,
|
||||||
|
parseDateWithoutYear,
|
||||||
|
parseStrToDate,
|
||||||
|
} from '@/utils/date-utils';
|
||||||
|
import { parseSizeFromKBs } from '@/utils/parse-utils';
|
||||||
|
import dayjs, { Dayjs } from 'dayjs';
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
|
/**开始结束时间类型 */
|
||||||
|
type RangePickerType = {
|
||||||
|
placeholder: [string, string];
|
||||||
|
ranges: Record<string, [Dayjs, Dayjs]>;
|
||||||
|
/**全局时间 */
|
||||||
|
all: [string, string];
|
||||||
|
/**网络 */
|
||||||
|
network: [string, string];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**开始结束时间 */
|
||||||
|
let rangePicker = reactive<RangePickerType>({
|
||||||
|
placeholder: [
|
||||||
|
t('views.monitor.monitor.startTime'),
|
||||||
|
t('views.monitor.monitor.endTime'),
|
||||||
|
],
|
||||||
|
ranges: {
|
||||||
|
[t('views.monitor.monitor.today')]: [
|
||||||
|
dayjs().subtract(1, 'day').startOf('day'),
|
||||||
|
dayjs().subtract(1, 'day').endOf('day'),
|
||||||
|
],
|
||||||
|
[t('views.monitor.monitor.yesterday')]: [dayjs().startOf('day'), dayjs()],
|
||||||
|
[t('views.monitor.monitor.week')]: [
|
||||||
|
dayjs().startOf('week'),
|
||||||
|
dayjs().endOf('week'),
|
||||||
|
],
|
||||||
|
[t('views.monitor.monitor.month')]: [
|
||||||
|
dayjs().startOf('month'),
|
||||||
|
dayjs().endOf('month'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
all: ['', ''],
|
||||||
|
network: ['', ''],
|
||||||
|
});
|
||||||
|
|
||||||
|
/**查询全部资源数据列表 */
|
||||||
|
function fnGetList() {
|
||||||
|
let startTime = null;
|
||||||
|
let endTime = null;
|
||||||
|
const dateString = rangePicker.all;
|
||||||
|
if (dateString[0]) {
|
||||||
|
startTime = parseStrToDate(dateString[0], YYYY_MM_DD_HH_MM_SS);
|
||||||
|
endTime = parseStrToDate(dateString[1], YYYY_MM_DD_HH_MM_SS);
|
||||||
|
} else {
|
||||||
|
const now = new Date();
|
||||||
|
now.setHours(0, 0, 0, 0);
|
||||||
|
startTime = now;
|
||||||
|
endTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
getLoad({
|
||||||
|
type: 'network',
|
||||||
|
startTime: startTime.getTime(),
|
||||||
|
endTime: endTime.getTime(),
|
||||||
|
neType: '#',
|
||||||
|
neId: '#',
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||||
|
fnNetworkChart(res.data.network);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置初始时间段
|
||||||
|
const initRangePicker: [string, string] = [
|
||||||
|
parseDateToStr(startTime, YYYY_MM_DD_HH_MM_SS),
|
||||||
|
parseDateToStr(endTime, YYYY_MM_DD_HH_MM_SS),
|
||||||
|
];
|
||||||
|
rangePicker.all = initRangePicker;
|
||||||
|
rangePicker.network = initRangePicker;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**图表显示数据 */
|
||||||
|
const chartsOption = reactive({
|
||||||
|
/**网络 */
|
||||||
|
networkChart: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**初始图表数据-Network */
|
||||||
|
function fnNetworkChart(data: Record<string, any>[]) {
|
||||||
|
let networkDate: string[] = [];
|
||||||
|
let networkUp: string[] = [];
|
||||||
|
let networkDown: string[] = [];
|
||||||
|
|
||||||
|
for (const item of data) {
|
||||||
|
networkDate.push(parseDateWithoutYear(item.createTime));
|
||||||
|
networkUp.push(Number(item.up).toFixed(2));
|
||||||
|
networkDown.push(Number(item.down).toFixed(2));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图标参数
|
||||||
|
const option = {
|
||||||
|
xDatas: networkDate,
|
||||||
|
yDatas: [
|
||||||
|
{
|
||||||
|
name: t('views.monitor.monitor.up'),
|
||||||
|
data: networkUp,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('views.monitor.monitor.down'),
|
||||||
|
data: networkDown,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '20%',
|
||||||
|
},
|
||||||
|
formatStr: 'KB/s',
|
||||||
|
};
|
||||||
|
chartsOption.networkChart = option;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fnGetList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="chart">
|
||||||
|
<ChartLine :option="chartsOption.networkChart"></ChartLine>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -115,36 +115,12 @@
|
|||||||
height: 14.167rem;
|
height: 14.167rem;
|
||||||
}
|
}
|
||||||
.alarmType .chart {
|
.alarmType .chart {
|
||||||
display: flex;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.alarmType .bar {
|
|
||||||
width: 13rem;
|
|
||||||
height: 10rem;
|
|
||||||
margin-left: -0.4rem;
|
|
||||||
}
|
|
||||||
.alarmType .data {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 7rem;
|
|
||||||
padding: 1.5rem 1.25rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-image: url(../images/rect.png);
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
.alarmType .data h4 {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: 1.167rem;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.alarmType .data span {
|
|
||||||
display: block;
|
|
||||||
color: #4c9bfd;
|
|
||||||
font-size: 0.667rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 告警趋势 */
|
/* 告警趋势 */
|
||||||
.alarmDay {
|
.alarmDay {
|
||||||
height: 16rem;
|
height: 16rem;
|
||||||
|
|||||||
@@ -71,25 +71,7 @@ onMounted(() => {});
|
|||||||
<div class="inner">
|
<div class="inner">
|
||||||
<h3>本月告警统计</h3>
|
<h3>本月告警统计</h3>
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
<div class="bar">
|
<AlarnTypeBar />
|
||||||
<AlarnTypeBar />
|
|
||||||
</div>
|
|
||||||
<div class="data">
|
|
||||||
<div class="item">
|
|
||||||
<h4>320,11</h4>
|
|
||||||
<span>
|
|
||||||
<i class="icon-dot" style="color: #ed3f35"></i>
|
|
||||||
告警总数
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<h4>418</h4>
|
|
||||||
<span>
|
|
||||||
<i class="icon-dot" style="color: #eacf19"></i>
|
|
||||||
本月新增
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user