0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 运维管理 仪表盘修复部分bug

This commit is contained in:
jackhoo_98 2023-03-15 13:54:00 +08:00
parent 30b97ca3cb
commit 0879a35eeb
5 changed files with 84 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/link/DashBoard/components/Cpu.vue
View File

@ -33,7 +33,17 @@
>
</j-range-picker>
</div>
<div ref="chartRef" style="width: 100%; height: 300px"></div>
<div>
<j-empty
v-if="isEmpty"
style="height: 200px; margin-top: 100px"
/>
<div
v-else
ref="chartRef"
style="width: 100%; height: 300px"
></div>
</div>
</div>
</j-spin>
</template>
@ -50,26 +60,27 @@ import {
areaStyleCpu,
typeDataLine,
} from './tool.ts';
import { DataType } from '../typings';
const chartRef = ref<Record<string, any>>({});
const loading = ref(false);
const data = ref({
const data = ref<DataType>({
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',

35
src/views/link/DashBoard/components/Jvm.vue
View File

@ -33,7 +33,17 @@
>
</j-range-picker>
</div>
<div ref="chartRef" style="width: 100%; height: 300px"></div>
<div>
<j-empty
v-if="isEmpty"
style="height: 200px; margin-top: 100px"
/>
<div
v-else
ref="chartRef"
style="width: 100%; height: 300px"
></div>
</div>
</div>
</j-spin>
</template>
@ -50,26 +60,27 @@ import {
areaStyleJvm,
defulteParamsData,
} from './tool.ts';
import { DataType } from '../typings';
const chartRef = ref<Record<string, any>>({});
const loading = ref(false);
const data = ref({
const data = ref<DataType>({
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);

39
src/views/link/DashBoard/components/Network.vue
View File

@ -43,7 +43,15 @@
</div>
</div>
<div>
<div ref="chartRef" style="width: 100%; height: 350px"></div>
<j-empty
v-if="isEmpty"
style="height: 250px; margin-top: 100px"
/>
<div
v-else
ref="chartRef"
style="width: 100%; height: 350px"
></div>
</div>
</div>
</j-spin>
@ -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<Record<string, any>>({});
const loading = ref(false);
const data = ref({
const data = ref<DataType>({
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<any> = [];
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}<br />${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

8
src/views/link/DashBoard/components/TopCard.vue
View File

@ -49,7 +49,7 @@ import { getWebSocket } from '@/utils/websocket';
import { map } from 'rxjs/operators';
const serverId = ref();
const serverNodeOptions = ref([]);
const serverNodeOptions = ref<Array<any>>([]);
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,
}));

4
src/views/link/DashBoard/typings.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export type DataType = {
type: string | undefined;
time: array<any>;
};