feat: 仪表板看板
This commit is contained in:
TsMask
242
src/views/dashboard/overview/components/AlarnDayLine/index.vue
Normal file
242
src/views/dashboard/overview/components/AlarnDayLine/index.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<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 * 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';
|
||||
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,
|
||||
});
|
||||
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);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
171
src/views/dashboard/overview/components/AlarnTypeBar/index.vue
Normal file
171
src/views/dashboard/overview/components/AlarnTypeBar/index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<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 * 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';
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/**图数据渲染 */
|
||||
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: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统内存',
|
||||
value: random,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
shadowColor: color,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
handleRanderChart(neResourcesDom.value, optionData);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
143
src/views/dashboard/overview/components/CDR/index.vue
Normal file
143
src/views/dashboard/overview/components/CDR/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
const { t } = useI18n();
|
||||
|
||||
const newNumber = ref(1);
|
||||
const dataArr = ref([
|
||||
{
|
||||
recordType: 'CALL',
|
||||
seqNumber: 1,
|
||||
callReference: 'X1gcbQ8zT@10.10.91.252',
|
||||
callerParty: '12307551241',
|
||||
calledParty: '12307550064',
|
||||
serviceResult: 'ok',
|
||||
seizureTime: 1705542348,
|
||||
answerTime: 1705542356,
|
||||
releaseTime: 1705542378,
|
||||
callDuration: 22,
|
||||
},
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
setInterval(function () {
|
||||
const random = Math.ceil(Math.random() * 1000);
|
||||
const time = Math.ceil(Date.now() / 1000);
|
||||
newNumber.value = time;
|
||||
dataArr.value.unshift({
|
||||
recordType: 'CALL',
|
||||
seqNumber: time,
|
||||
callReference: `X${random}Q8zT@10${random}.252`,
|
||||
callerParty: `1230755${random}`,
|
||||
calledParty: `${random}075064`,
|
||||
serviceResult: random > 500 ? 'ok' : 'fail',
|
||||
seizureTime: time,
|
||||
answerTime: time,
|
||||
releaseTime: time - random,
|
||||
callDuration: 22,
|
||||
});
|
||||
if (dataArr.value.length > 50) {
|
||||
dataArr.value.splice(50);
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="cdr" style="display: block">
|
||||
<div class="cdr-head">
|
||||
<span class="col">号码</span>
|
||||
<span class="col">行为</span>
|
||||
<span class="col-w">描述</span>
|
||||
</div>
|
||||
<div class="cdr-marquee-view">
|
||||
<div
|
||||
class="row"
|
||||
:class="{ 'row-new': item.seqNumber === newNumber }"
|
||||
v-for="item in dataArr"
|
||||
:key="item.seqNumber"
|
||||
>
|
||||
<span class="col">{{ item.callReference }}</span>
|
||||
<span class="col">{{ item.recordType }}</span>
|
||||
<span class="col-w"
|
||||
>[{{ item.serviceResult }}]
|
||||
{{ item.callerParty }}
|
||||
->
|
||||
{{ item.calledParty }}
|
||||
# {{ item.callDuration }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cdr {
|
||||
&-head {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
font-size: 0.583rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
color: #68d8fe;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 1.05;
|
||||
& .col {
|
||||
width: 3.2rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&-w {
|
||||
width: 8.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-marquee-view {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 70%;
|
||||
|
||||
& .row {
|
||||
line-height: 1.05;
|
||||
padding: 0.5rem 1.5rem;
|
||||
color: #61a8ff;
|
||||
font-size: 0.75rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&-new {
|
||||
color: #fff;
|
||||
animation: backInRight 0.3s alternate;
|
||||
}
|
||||
@keyframes backInRight {
|
||||
0% {
|
||||
opacity: 0.7;
|
||||
-webkit-transform: translateX(2000px) scale(0.7);
|
||||
transform: translateX(2000px) scale(0.7);
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0.7;
|
||||
-webkit-transform: translateX(0) scale(0.7);
|
||||
transform: translateX(0) scale(0.7);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
& .col {
|
||||
width: 3.2rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&-w {
|
||||
width: 8.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
384
src/views/dashboard/overview/components/NeResources/index.vue
Normal file
384
src/views/dashboard/overview/components/NeResources/index.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<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 * 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';
|
||||
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,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '网元内存',
|
||||
type: 'gauge',
|
||||
center: ['30%', '75%'],
|
||||
radius: '40%',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
min: 1,
|
||||
max: 100,
|
||||
itemStyle: {
|
||||
color: '#1890ff',
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 10,
|
||||
overlap: true,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
anchor: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, -5],
|
||||
fontSize: 10,
|
||||
color: '#fafafa',
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
width: '60%',
|
||||
lineHeight: 40,
|
||||
borderRadius: 8,
|
||||
offsetCenter: [0, 10],
|
||||
fontSize: 10,
|
||||
fontWeight: 'bolder',
|
||||
formatter: '{value}%',
|
||||
color: 'inherit',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '系统内存',
|
||||
value: 20,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '网元CPU',
|
||||
type: 'gauge',
|
||||
center: ['70%', '75%'],
|
||||
radius: '40%',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
min: 1,
|
||||
max: 100,
|
||||
itemStyle: {
|
||||
color: '#1890ff',
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 10,
|
||||
overlap: true,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
},
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 10,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
anchor: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
show: true,
|
||||
offsetCenter: [0, -5],
|
||||
fontSize: 10,
|
||||
color: '#fafafa',
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
width: '60%',
|
||||
lineHeight: 40,
|
||||
borderRadius: 8,
|
||||
offsetCenter: [0, 10],
|
||||
fontSize: 10,
|
||||
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: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统内存',
|
||||
value: random,
|
||||
itemStyle: {
|
||||
color: color,
|
||||
shadowColor: color,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '系统CPU',
|
||||
value: random2,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '网元内存',
|
||||
value: random3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
name: '网元CPU',
|
||||
value: random4,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
handleRanderChart(neResourcesDom.value, optionData);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -167,8 +167,9 @@ function handleRanderGraph(
|
||||
const graph = new Graph({
|
||||
container: container,
|
||||
width: clientWidth,
|
||||
height: clientHeight,
|
||||
height: clientHeight - 36,
|
||||
fitCenter: true,
|
||||
fitView: true,
|
||||
modes: {
|
||||
default: [
|
||||
'drag-combo',
|
||||
|
||||
242
src/views/dashboard/overview/components/UPFFlow/index.vue
Normal file
242
src/views/dashboard/overview/components/UPFFlow/index.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<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 * 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';
|
||||
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,
|
||||
});
|
||||
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);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="neResourcesDom" class="chart"></div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user