补充组件
This commit is contained in:
lai
@@ -1,241 +1,387 @@
|
||||
<template>
|
||||
<div id="trend" class="chart-container"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
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 { onMounted } from 'vue';
|
||||
import { mainGet } from '@/api/faultManage/actAlarm';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { TooltipComponent } from 'echarts/components';
|
||||
import { GaugeChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import { BarChart, PieChart } from 'echarts/charts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
const { t } = useI18n();
|
||||
|
||||
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
|
||||
|
||||
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
/**图实例对象 */
|
||||
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(
|
||||
container: HTMLElement | undefined,
|
||||
option: EChartsOption
|
||||
) {
|
||||
if (!container) return;
|
||||
const { clientHeight, clientWidth } = container;
|
||||
|
||||
neResourcesChart.value = echarts.init(container, 'light', {
|
||||
width: clientWidth,
|
||||
height: clientHeight - 36,
|
||||
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;
|
||||
}
|
||||
|
||||
function fnDesign() {
|
||||
mainGet().then((res: any) => {
|
||||
const expectedData = [
|
||||
{
|
||||
name: 'CommunicationAlarm',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: 'EquipmentAlarm',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: 'ProcessingFailure',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: 'EnvironmentalAlarm',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: 'QualityOfServiceAlarm',
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
var chartDom = document.getElementById('trend');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option: any;
|
||||
var colorList = [
|
||||
'#afa3f5',
|
||||
'#00d488',
|
||||
'#3feed4',
|
||||
'#3bafff',
|
||||
'#f1bb4c',
|
||||
'#aff',
|
||||
'rgba(250,250,250,0.5)',
|
||||
];
|
||||
option = {
|
||||
legend: {
|
||||
bottom: 5,
|
||||
left: 'center',
|
||||
data: ['香料香精', '粘度调节类', '防腐类', '防晒类', '防晒剂'],
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
},
|
||||
},
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
gridIndex: 0,
|
||||
show: false,
|
||||
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季度',
|
||||
],
|
||||
},
|
||||
{
|
||||
gridIndex: 1,
|
||||
show: false,
|
||||
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季度',
|
||||
],
|
||||
},
|
||||
{
|
||||
gridIndex: 2,
|
||||
show: false,
|
||||
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季度',
|
||||
],
|
||||
},
|
||||
{
|
||||
gridIndex: 3,
|
||||
show: false,
|
||||
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季度',
|
||||
],
|
||||
},
|
||||
{
|
||||
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(() => {
|
||||
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: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统内存',
|
||||
value: random,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
shadowColor: color,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统CPU',
|
||||
value: random2,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
handleRanderChart(neResourcesDom.value, optionData);
|
||||
fnDesign();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
.chart-container {
|
||||
/* 设置图表容器大小和位置 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,170 +1,372 @@
|
||||
<template>
|
||||
<div id="main" class="chart-container"></div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
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 { onMounted } from 'vue';
|
||||
import { mainGet } from '@/api/faultManage/actAlarm';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { TooltipComponent } from 'echarts/components';
|
||||
import { GaugeChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
} from 'echarts/components';
|
||||
import { BarChart, PieChart } from 'echarts/charts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
import { LabelLayout } from 'echarts/features';
|
||||
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]);
|
||||
|
||||
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
/**图实例对象 */
|
||||
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',
|
||||
function fnDesign() {
|
||||
mainGet().then((res: any) => {
|
||||
const expectedData = [
|
||||
{
|
||||
name: 'CommunicationAlarm',
|
||||
value: 0,
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 10,
|
||||
overlap: true,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
{
|
||||
name: 'EquipmentAlarm',
|
||||
value: 0,
|
||||
},
|
||||
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,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
orient: 'vertical',
|
||||
top: 'middle',
|
||||
right: '5%',
|
||||
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: [
|
||||
// 主要展示层的
|
||||
{
|
||||
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: [
|
||||
{
|
||||
name: '系统内存',
|
||||
value: random,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
shadowColor: color,
|
||||
},
|
||||
value: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
.chart-container {
|
||||
/* 设置图表容器大小和位置 */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,242 +1,295 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, onMounted, ref, onBeforeUnmount } from 'vue';
|
||||
<!-- <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 { 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 {
|
||||
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();
|
||||
|
||||
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);
|
||||
|
||||
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const neResourcesDom = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
/**图实例对象 */
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
/**开始结束时间类型 */
|
||||
type RangePickerType = {
|
||||
placeholder: [string, string];
|
||||
ranges: Record<string, [Dayjs, Dayjs]>;
|
||||
/**全局时间 */
|
||||
all: [string, string];
|
||||
/**网络 */
|
||||
network: [string, string];
|
||||
};
|
||||
|
||||
/**图数据渲染 */
|
||||
function handleRanderChart(
|
||||
container: HTMLElement | undefined,
|
||||
option: EChartsOption
|
||||
) {
|
||||
if (!container) return;
|
||||
const { clientHeight, clientWidth } = container;
|
||||
/**开始结束时间 */
|
||||
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: ['', ''],
|
||||
});
|
||||
|
||||
neResourcesChart.value = echarts.init(container, 'light', {
|
||||
width: clientWidth,
|
||||
height: clientHeight - 36,
|
||||
/**查询全部资源数据列表 */
|
||||
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);
|
||||
}
|
||||
});
|
||||
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(() => {
|
||||
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: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统内存',
|
||||
value: random,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
shadowColor: color,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统CPU',
|
||||
value: random2,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
handleRanderChart(neResourcesDom.value, optionData);
|
||||
fnGetList();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
<div class="chart">
|
||||
<ChartLine
|
||||
:option="chartsOption.networkChart"
|
||||
></ChartLine>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
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>
|
||||
|
||||
@@ -115,36 +115,12 @@
|
||||
height: 14.167rem;
|
||||
}
|
||||
.alarmType .chart {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
height: 16rem;
|
||||
|
||||
@@ -71,25 +71,7 @@ onMounted(() => {});
|
||||
<div class="inner">
|
||||
<h3>本月告警统计</h3>
|
||||
<div class="chart">
|
||||
<div class="bar">
|
||||
<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>
|
||||
<AlarnTypeBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user