diff --git a/src/views/link/DashBoard/components/Cpu.vue b/src/views/link/DashBoard/components/Cpu.vue index 14ecc946..a637fbad 100644 --- a/src/views/link/DashBoard/components/Cpu.vue +++ b/src/views/link/DashBoard/components/Cpu.vue @@ -33,7 +33,17 @@ > -
+
+ +
+
@@ -50,26 +60,27 @@ import { areaStyleCpu, typeDataLine, } from './tool.ts'; +import { DataType } from '../typings'; const chartRef = ref>({}); const loading = ref(false); -const data = ref({ +const data = ref({ type: 'hour', time: [null, null], }); - +const isEmpty = ref(false); const pickerTimeChange = () => { data.value.type = undefined; }; -const getCPUEcharts = async (val) => { +const getCPUEcharts = async (val: any) => { loading.value = true; - const res = await dashboard(defulteParamsData('cpu', val)); + const res: any = await dashboard(defulteParamsData('cpu', val)); if (res.success) { const _cpuOptions = {}; const _cpuXAxis = new Set(); if (res.result?.length) { - res.result.forEach((item) => { + res.result.forEach((item: any) => { const value = item.data.value; const nodeID = item.data.clusterNodeId; _cpuXAxis.add( @@ -84,15 +95,18 @@ const getCPUEcharts = async (val) => { Number(value.cpuSystemUsage).toFixed(2), ); }); + handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]); + } else { + handleCpuOptions([], []); + isEmpty.value = true; } - handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]); } setTimeout(() => { loading.value = false; }, 300); }; -const setOptions = (optionsData, key) => ({ +const setOptions = (optionsData: any, key: string) => ({ data: arrayReverse(optionsData[key]), name: key, type: 'line', @@ -101,8 +115,9 @@ const setOptions = (optionsData, key) => ({ areaStyle: areaStyleCpu, }); -const handleCpuOptions = (optionsData, xAxis) => { - const chart = chartRef.value; +const handleCpuOptions = (optionsData: any, xAxis: any) => { + if (optionsData.length === 0 && xAxis.length === 0) return; + const chart: any = chartRef.value; if (chart) { const myChart = echarts.init(chart); const dataKeys = Object.keys(optionsData); @@ -114,7 +129,7 @@ const handleCpuOptions = (optionsData, xAxis) => { }, tooltip: { trigger: 'axis', - valueFormatter: (value) => `${value}%`, + valueFormatter: (value: any) => `${value}%`, }, yAxis: { type: 'value', diff --git a/src/views/link/DashBoard/components/Jvm.vue b/src/views/link/DashBoard/components/Jvm.vue index f77c80c9..399aa347 100644 --- a/src/views/link/DashBoard/components/Jvm.vue +++ b/src/views/link/DashBoard/components/Jvm.vue @@ -33,7 +33,17 @@ > -
+
+ +
+
@@ -50,26 +60,27 @@ import { areaStyleJvm, defulteParamsData, } from './tool.ts'; +import { DataType } from '../typings'; const chartRef = ref>({}); const loading = ref(false); -const data = ref({ +const data = ref({ type: 'hour', time: [null, null], }); - +const isEmpty = ref(false); const pickerTimeChange = () => { data.value.type = undefined; }; -const getJVMEcharts = async (val) => { +const getJVMEcharts = async (val: any) => { loading.value = true; - const res = await dashboard(defulteParamsData('jvm', val)); + const res: any = await dashboard(defulteParamsData('jvm', val)); if (res.success) { const _jvmOptions = {}; const _jvmXAxis = new Set(); if (res.result?.length) { - res.result.forEach((item) => { + res.result.forEach((item: any) => { const value = item.data.value; const memoryJvmHeapFree = value.memoryJvmHeapFree; const memoryJvmHeapTotal = value.memoryJvmHeapTotal; @@ -90,15 +101,18 @@ const getJVMEcharts = async (val) => { ); _jvmOptions[nodeID].push(_value); }); + handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]); + } else { + handleJVMOptions([], []); + isEmpty.value = true; } - handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]); } setTimeout(() => { loading.value = false; }, 300); }; -const setOptions = (optionsData, key) => ({ +const setOptions = (optionsData: any, key: string) => ({ data: arrayReverse(optionsData[key]), name: key, type: 'line', @@ -106,8 +120,9 @@ const setOptions = (optionsData, key) => ({ symbol: 'none', areaStyle: areaStyleJvm, }); -const handleJVMOptions = (optionsData, xAxis) => { - const chart = chartRef.value; +const handleJVMOptions = (optionsData: any, xAxis: any) => { + if (optionsData.length === 0 && xAxis.length === 0) return; + const chart: any = chartRef.value; if (chart) { const myChart = echarts.init(chart); const dataKeys = Object.keys(optionsData); diff --git a/src/views/link/DashBoard/components/Network.vue b/src/views/link/DashBoard/components/Network.vue index 930f191c..23ed3520 100644 --- a/src/views/link/DashBoard/components/Network.vue +++ b/src/views/link/DashBoard/components/Network.vue @@ -43,7 +43,15 @@
-
+ +
@@ -59,33 +67,34 @@ import { } from './tool.ts'; import moment from 'moment'; import * as echarts from 'echarts'; +import { DataType } from '../typings.d'; const chartRef = ref>({}); const loading = ref(false); -const data = ref({ +const data = ref({ type: 'bytesRead', time: { - type: 'today', + type: 'hour', time: [null, null], }, }); - +const isEmpty = ref(false); const pickerTimeChange = () => { data.value.time.type = undefined; }; -const getNetworkEcharts = async (val) => { +const getNetworkEcharts = async (val: any) => { loading.value = true; - const resp = await dashboard(networkParams(val)); + const resp: any = await dashboard(networkParams(val)); if (resp.success) { const _networkOptions = {}; const _networkXAxis = new Set(); if (resp.result.length) { - resp.result.forEach((item) => { + resp.result.forEach((item: any) => { const value = item.data.value; - const _data = []; + const _data: Array = []; const nodeID = item.data.clusterNodeId; - value.forEach((item) => { + value.forEach((item: any) => { _data.push(item.value); _networkXAxis.add(item.timeString); }); @@ -98,13 +107,14 @@ const getNetworkEcharts = async (val) => { handleNetworkOptions(_networkOptions, [..._networkXAxis.keys()]); } else { handleNetworkOptions([], []); + isEmpty.value = true; } } setTimeout(() => { loading.value = false; }, 300); }; -const networkValueRender = (obj) => { +const networkValueRender = (obj: any) => { const { value } = obj; let _data = ''; if (value >= 1024 && value < 1024 * 1024) { @@ -117,7 +127,7 @@ const networkValueRender = (obj) => { return `${obj?.axisValueLabel}
${obj?.marker}${obj?.seriesName}: ${_data}`; }; -const setOptions = (data, key) => ({ +const setOptions = (data: any, key: string) => ({ data: data[key]._data, // .map((item) => Number((item / 1024 / 1024).toFixed(2))), name: key, type: 'line', @@ -125,8 +135,9 @@ const setOptions = (data, key) => ({ areaStyle, }); -const handleNetworkOptions = (optionsData, xAxis) => { - const chart = chartRef.value; +const handleNetworkOptions = (optionsData: any, xAxis: any) => { + if (optionsData.length === 0 && xAxis.length === 0) return; + const chart: any = chartRef.value; if (chart) { const myChart = echarts.init(chart); const dataKeys = Object.keys(optionsData); @@ -145,7 +156,7 @@ const handleNetworkOptions = (optionsData, xAxis) => { }, tooltip: { trigger: 'axis', - formatter: (_value) => networkValueRender(_value[0]), + formatter: (_value: any) => networkValueRender(_value[0]), }, color: ['#979AFF'], series: dataKeys.length diff --git a/src/views/link/DashBoard/components/TopCard.vue b/src/views/link/DashBoard/components/TopCard.vue index f1b17c9c..2bf79655 100644 --- a/src/views/link/DashBoard/components/TopCard.vue +++ b/src/views/link/DashBoard/components/TopCard.vue @@ -49,7 +49,7 @@ import { getWebSocket } from '@/utils/websocket'; import { map } from 'rxjs/operators'; const serverId = ref(); -const serverNodeOptions = ref([]); +const serverNodeOptions = ref>([]); const topValues = ref({ cpu: 0, jvm: 0, @@ -73,7 +73,7 @@ const getData = () => { interval: '1s', agg: 'avg', }) - .pipe(map((res) => res.payload)) + .pipe(map((res: any) => res.payload)) .subscribe((payload) => { const { value: { cpu, memory, disk }, @@ -103,9 +103,9 @@ const getData = () => { }; onMounted(() => { - serverNode().then((resp) => { + serverNode().then((resp: any) => { if (resp.success) { - serverNodeOptions.value = resp.result.map((item) => ({ + serverNodeOptions.value = resp.result.map((item: any) => ({ label: item.name, value: item.id, })); diff --git a/src/views/link/DashBoard/typings.d.ts b/src/views/link/DashBoard/typings.d.ts new file mode 100644 index 00000000..ffcc8623 --- /dev/null +++ b/src/views/link/DashBoard/typings.d.ts @@ -0,0 +1,4 @@ +export type DataType = { + type: string | undefined; + time: array; +};