feat: 运维管理 仪表盘
This commit is contained in:
jackhoo_98
parent
fd0c3f2eb8
commit
401634be3e
|
|
@ -0,0 +1,12 @@
|
||||||
|
import server from '@/utils/request';
|
||||||
|
|
||||||
|
export const dashboard = (data: object) =>
|
||||||
|
server.post(`/dashboard/_multi`, data);
|
||||||
|
export const productCount = (data: object) =>
|
||||||
|
server.post(`/device-product/_count`, data);
|
||||||
|
export const getGeo = (data: object) =>
|
||||||
|
server.post(`/geo/object/device/_search/geo.json`, data);
|
||||||
|
export const deviceCount = (data: object) =>
|
||||||
|
server.get(`/device/instance/_count`, data);
|
||||||
|
export const serverNode = (data: object) =>
|
||||||
|
server.get(`/dashboard/cluster/nodes`, data);
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
<template>
|
||||||
|
<a-spin :spinning="loading">
|
||||||
|
<div class="dash-board">
|
||||||
|
<div class="header">
|
||||||
|
<h3>CPU使用率趋势</h3>
|
||||||
|
<a-range-picker
|
||||||
|
@change="pickerTimeChange"
|
||||||
|
:allowClear="false"
|
||||||
|
:show-time="{ format: 'HH:mm:ss' }"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
v-model="data.time"
|
||||||
|
>
|
||||||
|
<template #suffixIcon><a-icon type="calendar" /></template>
|
||||||
|
<template #renderExtraFooter>
|
||||||
|
<a-radio-group
|
||||||
|
default-value="a"
|
||||||
|
button-style="solid"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
v-model:value="data.type"
|
||||||
|
>
|
||||||
|
<a-radio-button value="hour">
|
||||||
|
最近1小时
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="today">
|
||||||
|
今日
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="week">
|
||||||
|
近一周
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group></template
|
||||||
|
>
|
||||||
|
</a-range-picker>
|
||||||
|
</div>
|
||||||
|
<div ref="chartRef" style="width: 100%; height: 300px"></div>
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
m
|
||||||
|
<script lang="ts" setup name="Cpu">
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { dashboard } from '@/api/link/dashboard';
|
||||||
|
import moment from 'moment';
|
||||||
|
import {
|
||||||
|
getTimeFormat,
|
||||||
|
getTimeByType,
|
||||||
|
arrayReverse,
|
||||||
|
defulteParamsData,
|
||||||
|
areaStyleCpu,
|
||||||
|
typeDataLine,
|
||||||
|
} from './tool.ts';
|
||||||
|
|
||||||
|
const chartRef = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const data = ref({
|
||||||
|
type: 'hour',
|
||||||
|
time: [null, null],
|
||||||
|
});
|
||||||
|
|
||||||
|
const pickerTimeChange = () => {
|
||||||
|
data.value.type = undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCPUEcharts = async (val) => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await dashboard(defulteParamsData('cpu', val));
|
||||||
|
if (res.success) {
|
||||||
|
const _cpuOptions = {};
|
||||||
|
const _cpuXAxis = new Set();
|
||||||
|
if (res.result?.length) {
|
||||||
|
res.result.forEach((item) => {
|
||||||
|
const value = item.data.value;
|
||||||
|
const nodeID = item.data.clusterNodeId;
|
||||||
|
_cpuXAxis.add(
|
||||||
|
moment(value.timestamp).format(
|
||||||
|
getTimeFormat(data.value.type),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
if (!_cpuOptions[nodeID]) {
|
||||||
|
_cpuOptions[nodeID] = [];
|
||||||
|
}
|
||||||
|
_cpuOptions[nodeID].push(
|
||||||
|
Number(value.cpuSystemUsage).toFixed(2),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleCpuOptions(_cpuOptions, [..._cpuXAxis.keys()]);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setOptions = (optionsData, key) => ({
|
||||||
|
data: arrayReverse(optionsData[key]),
|
||||||
|
name: key,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'none',
|
||||||
|
areaStyle: areaStyleCpu,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleCpuOptions = (optionsData, xAxis) => {
|
||||||
|
const chart = chartRef.value;
|
||||||
|
if (chart) {
|
||||||
|
const myChart = echarts.init(chart);
|
||||||
|
const dataKeys = Object.keys(optionsData);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: arrayReverse(xAxis),
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
valueFormatter: (value) => `${value}%`,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '50px',
|
||||||
|
right: '50px',
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
color: ['#2CB6E0'],
|
||||||
|
series: dataKeys.length
|
||||||
|
? dataKeys.map((key) => setOptions(optionsData, key))
|
||||||
|
: typeDataLine,
|
||||||
|
};
|
||||||
|
myChart.setOption(options);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => data.value.type,
|
||||||
|
(val) => {
|
||||||
|
const endTime = moment(new Date());
|
||||||
|
const startTime = getTimeByType(val);
|
||||||
|
data.value.time = [startTime, endTime];
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => data.value,
|
||||||
|
(val) => {
|
||||||
|
const { time } = val;
|
||||||
|
if (time && Array.isArray(time) && time.length === 2 && time[0]) {
|
||||||
|
getCPUEcharts(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dash-board {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
h3 {
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,196 @@
|
||||||
|
<template>
|
||||||
|
<a-spin :spinning="loading">
|
||||||
|
<div class="dash-board">
|
||||||
|
<div class="header">
|
||||||
|
<h3>JVM内存使用率趋势</h3>
|
||||||
|
<a-range-picker
|
||||||
|
@change="pickerTimeChange"
|
||||||
|
:allowClear="false"
|
||||||
|
:show-time="{ format: 'HH:mm:ss' }"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
v-model="data.time"
|
||||||
|
>
|
||||||
|
<template #suffixIcon><a-icon type="calendar" /></template>
|
||||||
|
<template #renderExtraFooter>
|
||||||
|
<a-radio-group
|
||||||
|
default-value="a"
|
||||||
|
button-style="solid"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
v-model:value="data.type"
|
||||||
|
>
|
||||||
|
<a-radio-button value="hour">
|
||||||
|
最近1小时
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="today">
|
||||||
|
今日
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="week">
|
||||||
|
近一周
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group></template
|
||||||
|
>
|
||||||
|
</a-range-picker>
|
||||||
|
</div>
|
||||||
|
<div ref="chartRef" style="width: 100%; height: 300px"></div>
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Jvm">
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { dashboard } from '@/api/link/dashboard';
|
||||||
|
import moment from 'moment';
|
||||||
|
import {
|
||||||
|
getTimeFormat,
|
||||||
|
getTimeByType,
|
||||||
|
arrayReverse,
|
||||||
|
typeDataLine,
|
||||||
|
areaStyleJvm,
|
||||||
|
defulteParamsData,
|
||||||
|
} from './tool.ts';
|
||||||
|
|
||||||
|
const chartRef = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const data = ref({
|
||||||
|
type: 'hour',
|
||||||
|
time: [null, null],
|
||||||
|
});
|
||||||
|
|
||||||
|
const pickerTimeChange = () => {
|
||||||
|
data.value.type = undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getJVMEcharts = async (val) => {
|
||||||
|
loading.value = true;
|
||||||
|
const res = await dashboard(defulteParamsData('jvm', val));
|
||||||
|
if (res.success) {
|
||||||
|
const _jvmOptions = {};
|
||||||
|
const _jvmXAxis = new Set();
|
||||||
|
if (res.result?.length) {
|
||||||
|
res.result.forEach((item) => {
|
||||||
|
const value = item.data.value;
|
||||||
|
const memoryJvmHeapFree = value.memoryJvmHeapFree;
|
||||||
|
const memoryJvmHeapTotal = value.memoryJvmHeapTotal;
|
||||||
|
const nodeID = item.data.clusterNodeId;
|
||||||
|
|
||||||
|
const _value = (
|
||||||
|
((memoryJvmHeapTotal - memoryJvmHeapFree) /
|
||||||
|
memoryJvmHeapTotal) *
|
||||||
|
100
|
||||||
|
).toFixed(2);
|
||||||
|
if (!_jvmOptions[nodeID]) {
|
||||||
|
_jvmOptions[nodeID] = [];
|
||||||
|
}
|
||||||
|
_jvmXAxis.add(
|
||||||
|
moment(value.timestamp).format(
|
||||||
|
getTimeFormat(data.value.type),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
_jvmOptions[nodeID].push(_value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
handleJVMOptions(_jvmOptions, [..._jvmXAxis.keys()]);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setOptions = (optionsData, key) => ({
|
||||||
|
data: arrayReverse(optionsData[key]),
|
||||||
|
name: key,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
symbol: 'none',
|
||||||
|
areaStyle: areaStyleJvm,
|
||||||
|
});
|
||||||
|
const handleJVMOptions = (optionsData, xAxis) => {
|
||||||
|
const chart = chartRef.value;
|
||||||
|
if (chart) {
|
||||||
|
const myChart = echarts.init(chart);
|
||||||
|
const dataKeys = Object.keys(optionsData);
|
||||||
|
|
||||||
|
console.log(21, arrayReverse(xAxis), xAxis);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: arrayReverse(xAxis),
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
valueFormatter: (value: any) => `${value}%`,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '50px',
|
||||||
|
right: '50px',
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
color: ['#60DFC7'],
|
||||||
|
series: dataKeys.length
|
||||||
|
? dataKeys.map((key) => setOptions(optionsData, key))
|
||||||
|
: typeDataLine,
|
||||||
|
};
|
||||||
|
myChart.setOption(options);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => data.value.type,
|
||||||
|
(val) => {
|
||||||
|
const endTime = moment(new Date());
|
||||||
|
const startTime = getTimeByType(val);
|
||||||
|
data.value.time = [startTime, endTime];
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => data.value,
|
||||||
|
(val) => {
|
||||||
|
const { time } = val;
|
||||||
|
if (time && Array.isArray(time) && time.length === 2 && time[0]) {
|
||||||
|
getJVMEcharts(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dash-board {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
h3 {
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,222 @@
|
||||||
|
<template>
|
||||||
|
<a-spin :spinning="loading">
|
||||||
|
<div class="dash-board">
|
||||||
|
<div class="header">
|
||||||
|
<div class="left">
|
||||||
|
<h3 style="width: 80px">网络流量</h3>
|
||||||
|
<a-radio-group
|
||||||
|
button-style="solid"
|
||||||
|
v-model:value="data.type"
|
||||||
|
>
|
||||||
|
<a-radio-button value="bytesRead">
|
||||||
|
上行
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="bytesSent">
|
||||||
|
下行
|
||||||
|
</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<a-radio-group
|
||||||
|
default-value="a"
|
||||||
|
button-style="solid"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
v-model:value="data.time.type"
|
||||||
|
>
|
||||||
|
<a-radio-button value="hour">
|
||||||
|
最近1小时
|
||||||
|
</a-radio-button>
|
||||||
|
<a-radio-button value="today"> 今日 </a-radio-button>
|
||||||
|
<a-radio-button value="week"> 近一周 </a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<a-range-picker
|
||||||
|
:allowClear="false"
|
||||||
|
:show-time="{ format: 'HH:mm:ss' }"
|
||||||
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
v-model="data.time.time"
|
||||||
|
@change="pickerTimeChange"
|
||||||
|
>
|
||||||
|
<template #suffixIcon
|
||||||
|
><a-icon type="calendar"
|
||||||
|
/></template>
|
||||||
|
</a-range-picker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
ref="chartRef"
|
||||||
|
v-if="flag"
|
||||||
|
style="width: 100%; height: 350px"
|
||||||
|
></div>
|
||||||
|
<a-empty v-else style="height: 300px; margin-top: 120px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-spin>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Network">
|
||||||
|
import { dashboard } from '@/api/link/dashboard';
|
||||||
|
import {
|
||||||
|
getTimeByType,
|
||||||
|
typeDataLine,
|
||||||
|
areaStyle,
|
||||||
|
networkParams,
|
||||||
|
arrayReverse,
|
||||||
|
} from './tool.ts';
|
||||||
|
import moment from 'moment';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
const chartRef = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
const flag = ref(true);
|
||||||
|
const loading = ref(false);
|
||||||
|
const myChart = ref(null);
|
||||||
|
const data = ref({
|
||||||
|
type: 'bytesRead',
|
||||||
|
time: {
|
||||||
|
type: 'today',
|
||||||
|
time: [null, null],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const pickerTimeChange = () => {
|
||||||
|
data.value.time.type = undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNetworkEcharts = async (val) => {
|
||||||
|
loading.value = true;
|
||||||
|
const resp = await dashboard(networkParams(val));
|
||||||
|
if (resp.success) {
|
||||||
|
const _networkOptions = {};
|
||||||
|
const _networkXAxis = new Set();
|
||||||
|
if (resp.result.length) {
|
||||||
|
resp.result.forEach((item) => {
|
||||||
|
const value = item.data.value;
|
||||||
|
const _data = [];
|
||||||
|
const nodeID = item.data.clusterNodeId;
|
||||||
|
value.forEach((item) => {
|
||||||
|
_data.push(item.value);
|
||||||
|
_networkXAxis.add(item.timeString);
|
||||||
|
});
|
||||||
|
_networkOptions[nodeID] = {
|
||||||
|
_data: _networkOptions[nodeID]
|
||||||
|
? _networkOptions[nodeID]._data.concat(_data)
|
||||||
|
: _data,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
handleNetworkOptions(_networkOptions, [..._networkXAxis.keys()]);
|
||||||
|
} else {
|
||||||
|
handleNetworkOptions([], []);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false;
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
const networkValueRender = (obj) => {
|
||||||
|
const { value } = obj;
|
||||||
|
let _data = '';
|
||||||
|
if (value >= 1024 && value < 1024 * 1024) {
|
||||||
|
_data = `${Number((value / 1024).toFixed(2))}KB`;
|
||||||
|
} else if (value >= 1024 * 1024) {
|
||||||
|
_data = `${Number((value / 1024 / 1024).toFixed(2))}M`;
|
||||||
|
} else {
|
||||||
|
_data = `${value}B`;
|
||||||
|
}
|
||||||
|
return `${obj?.axisValueLabel}<br />${obj?.marker}${obj?.seriesName}: ${_data}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setOptions = (data, key) => ({
|
||||||
|
data: data[key]._data, // .map((item) => Number((item / 1024 / 1024).toFixed(2))),
|
||||||
|
name: key,
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
areaStyle,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleNetworkOptions = (optionsData, xAxis) => {
|
||||||
|
const chart = chartRef.value;
|
||||||
|
|
||||||
|
if (chart) {
|
||||||
|
const myChart = echarts.init(chart);
|
||||||
|
const dataKeys = Object.keys(optionsData);
|
||||||
|
const options = {
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: xAxis,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '80px',
|
||||||
|
right: '50px',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: (_value) => networkValueRender(_value[0]),
|
||||||
|
},
|
||||||
|
color: ['#979AFF'],
|
||||||
|
series: dataKeys.length
|
||||||
|
? dataKeys.map((key) => setOptions(optionsData, key))
|
||||||
|
: typeDataLine,
|
||||||
|
};
|
||||||
|
myChart.setOption(options);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => data.value.time.type,
|
||||||
|
(value) => {
|
||||||
|
const endTime = moment(new Date());
|
||||||
|
const startTime = getTimeByType(value);
|
||||||
|
data.value.time.time = [startTime, endTime];
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => data.value,
|
||||||
|
(value) => {
|
||||||
|
const {
|
||||||
|
time: { time },
|
||||||
|
} = value;
|
||||||
|
if (time && Array.isArray(time) && time.length === 2 && time[0]) {
|
||||||
|
getNetworkEcharts(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true },
|
||||||
|
);
|
||||||
|
// onMounted(() => {
|
||||||
|
// createEcharts();
|
||||||
|
// });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dash-board {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.left h3 {
|
||||||
|
width: 200px;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-select
|
||||||
|
style="width: 300px; margin-bottom: 20px"
|
||||||
|
@change="serverIdChange"
|
||||||
|
:value="serverId"
|
||||||
|
:options="serverNode"
|
||||||
|
v-if="serverNode.length > 1"
|
||||||
|
></a-select>
|
||||||
|
<div class="dash-board">
|
||||||
|
<div class="dash-board-item">
|
||||||
|
<TopEchartsItemNode title="CPU使用率" :value="topValues.cpu" />
|
||||||
|
</div>
|
||||||
|
<div class="dash-board-item">
|
||||||
|
<TopEchartsItemNode
|
||||||
|
title="JVM内存"
|
||||||
|
:max="topValues.jvmTotal"
|
||||||
|
:bottom="`总JVM内存 ${topValues.jvmTotal}G`"
|
||||||
|
formatter="G"
|
||||||
|
:value="topValues.jvm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="dash-board-item">
|
||||||
|
<TopEchartsItemNode
|
||||||
|
title="磁盘占用"
|
||||||
|
:max="topValues.usageTotal"
|
||||||
|
:bottom="`总磁盘大小 ${topValues.usageTotal}G`"
|
||||||
|
formatter="G"
|
||||||
|
:value="topValues.usage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="dash-board-item">
|
||||||
|
<TopEchartsItemNode
|
||||||
|
title="系统内存"
|
||||||
|
:max="topValues.systemUsageTotal"
|
||||||
|
:bottom="`系统内存 ${topValues.systemUsageTotal}G`"
|
||||||
|
formatter="G"
|
||||||
|
:value="topValues.systemUsage"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { serverNode } from '@/api/link/dashboard';
|
||||||
|
import TopEchartsItemNode from './TopEchartsItemNode.vue';
|
||||||
|
import { getWebSocket } from '@/utils/websocket';
|
||||||
|
import { map } from 'rxjs/operators';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TopCard',
|
||||||
|
components: { TopEchartsItemNode },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
serverId: '',
|
||||||
|
serverNode: [],
|
||||||
|
topValues: {
|
||||||
|
cpu: 0,
|
||||||
|
jvm: 0,
|
||||||
|
jvmTotal: 0,
|
||||||
|
usage: 0,
|
||||||
|
usageTotal: 0,
|
||||||
|
systemUsage: 0,
|
||||||
|
systemUsageTotal: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
serverNode().then((resp) => {
|
||||||
|
if (resp.success) {
|
||||||
|
this.serverNode = resp.result.map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
if (this.serverNode && this.serverNode.length) {
|
||||||
|
this.serverId = this.serverNode[0].value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
serverId: {
|
||||||
|
handler(val) {
|
||||||
|
if (val) {
|
||||||
|
this.getData(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
serverIdChange(val) {
|
||||||
|
this.serverId = val;
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
const id = 'operations-statistics-system-info-realTime';
|
||||||
|
const topic = '/dashboard/systemMonitor/stats/info/realTime';
|
||||||
|
getWebSocket(id, topic, {
|
||||||
|
type: 'all',
|
||||||
|
serverNodeId: this.serverId,
|
||||||
|
interval: '1s',
|
||||||
|
agg: 'avg',
|
||||||
|
})
|
||||||
|
.pipe(map((res) => res.payload))
|
||||||
|
.subscribe((payload) => {
|
||||||
|
const value = payload.value;
|
||||||
|
const cpu = value.cpu;
|
||||||
|
const memory = value.memory;
|
||||||
|
const disk = value.disk;
|
||||||
|
this.topValues = {
|
||||||
|
cpu: cpu.systemUsage,
|
||||||
|
jvm: Number(
|
||||||
|
(
|
||||||
|
(memory.jvmHeapUsage / 100) *
|
||||||
|
(memory.jvmHeapTotal / 1024)
|
||||||
|
).toFixed(1),
|
||||||
|
),
|
||||||
|
jvmTotal: Math.ceil(memory.jvmHeapTotal / 1024),
|
||||||
|
usage: Number(
|
||||||
|
((disk.total / 1024) * (disk.usage / 100)).toFixed(
|
||||||
|
1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
usageTotal: Math.ceil(disk.total / 1024),
|
||||||
|
systemUsage: Number(
|
||||||
|
(
|
||||||
|
(memory.systemTotal / 1024) *
|
||||||
|
(memory.systemUsage / 100)
|
||||||
|
).toFixed(1),
|
||||||
|
),
|
||||||
|
systemUsageTotal: Math.ceil(memory.systemTotal / 1024),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dash-board {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
justify-content: space-between;
|
||||||
|
.dash-board-item {
|
||||||
|
flex: 1;
|
||||||
|
margin: 24px 12px;
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,282 @@
|
||||||
|
<template>
|
||||||
|
<div class="echarts-item">
|
||||||
|
<div class="echarts-item-left">
|
||||||
|
<div class="echarts-item-title">{{ title }}</div>
|
||||||
|
<div class="echarts-item-value">
|
||||||
|
{{ value || 0 }} {{ formatter || '%' }}
|
||||||
|
</div>
|
||||||
|
<div v-if="!!bottom" class="echarts-item-bottom">{{ bottom }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="echarts-item-right">
|
||||||
|
<div ref="chartRef" style="width: 100%; height: 100px"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
export default {
|
||||||
|
name: 'TopEchartsItemNode',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
bottom: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
formatter: {
|
||||||
|
type: String,
|
||||||
|
default: '%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createChart(val) {
|
||||||
|
const chart = this.$refs.chartRef;
|
||||||
|
if (chart && Object.keys(val).length > 0) {
|
||||||
|
const myChart = echarts.init(chart);
|
||||||
|
myChart.setOption(val);
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getOptions(max, formatter, val) {
|
||||||
|
let formatterCount = 0;
|
||||||
|
this.options = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
min: 0,
|
||||||
|
max: max || 100,
|
||||||
|
startAngle: 200,
|
||||||
|
endAngle: -20,
|
||||||
|
center: ['50%', '67%'],
|
||||||
|
title: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
distance: -20,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: 'rgba(0,0,0,0.15)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
distance: -22,
|
||||||
|
length: 9,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: '#000',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
distance: -22,
|
||||||
|
color: 'auto',
|
||||||
|
fontSize: 12,
|
||||||
|
width: 30,
|
||||||
|
padding: [6, 10, 0, 10],
|
||||||
|
formatter: (value) => {
|
||||||
|
formatterCount += 1;
|
||||||
|
if ([1, 3, 6, 9, 11].includes(formatterCount)) {
|
||||||
|
return value + (formatter || '%');
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
length: '80%',
|
||||||
|
width: 4,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: true,
|
||||||
|
showAbove: true,
|
||||||
|
size: 20,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 3,
|
||||||
|
borderColor: '#fff',
|
||||||
|
shadowBlur: 20,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, .25)',
|
||||||
|
color: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 10,
|
||||||
|
color: [
|
||||||
|
[0.25, 'rgba(36, 178, 118, 1)'],
|
||||||
|
[
|
||||||
|
0.4,
|
||||||
|
new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(66, 147, 255, 1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(36, 178, 118, 1)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
0.5,
|
||||||
|
new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(250, 178, 71, 1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(66, 147, 255, 1)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
[
|
||||||
|
1,
|
||||||
|
new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(250, 178, 71, 1)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(247, 111, 93, 1)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [{ value: val || 0 }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options: {
|
||||||
|
handler(val) {
|
||||||
|
this.createChart(val);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
handler(val) {
|
||||||
|
this.getOptions(val, this.formatter, this.value);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
this.getOptions(this.max, this.formatter, val);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
formatter: {
|
||||||
|
handler(val) {
|
||||||
|
this.getOptions(this.max, val, this.value);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.echarts-item {
|
||||||
|
display: flex;
|
||||||
|
height: 150px;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 2.73036px 5.46071px rgba(31, 89, 245, 0.2);
|
||||||
|
|
||||||
|
.echarts-item-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-item-right {
|
||||||
|
width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-item-title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: rgba(#000, 0.6);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-item-value {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 36px;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: left;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.echarts-item-bottom {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
height: 0;
|
||||||
|
padding-left: 12px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 12px;
|
||||||
|
background-color: #ff595e;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
import moment from 'moment';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
export const getInterval = (type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
return '30d';
|
||||||
|
case 'month':
|
||||||
|
case 'week':
|
||||||
|
return '1d';
|
||||||
|
case 'hour':
|
||||||
|
return '1m';
|
||||||
|
default:
|
||||||
|
return '1h';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
export const getTimeFormat = (type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
return 'YYYY-MM-DD';
|
||||||
|
case 'month':
|
||||||
|
case 'week':
|
||||||
|
return 'MM-DD';
|
||||||
|
case 'hour':
|
||||||
|
return 'HH:mm';
|
||||||
|
default:
|
||||||
|
return 'HH';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getTimeByType = (type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'hour':
|
||||||
|
return moment().subtract(1, 'hours');
|
||||||
|
case 'week':
|
||||||
|
return moment().subtract(6, 'days');
|
||||||
|
case 'month':
|
||||||
|
return moment().subtract(29, 'days');
|
||||||
|
case 'year':
|
||||||
|
return moment().subtract(365, 'days');
|
||||||
|
default:
|
||||||
|
return moment().startOf('day');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const arrayReverse = (data) => {
|
||||||
|
const newArray = [];
|
||||||
|
for (let i = data.length - 1; i >= 0; i--) {
|
||||||
|
newArray.push(data[i]);
|
||||||
|
}
|
||||||
|
return newArray;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const networkParams = (val) => [
|
||||||
|
{
|
||||||
|
dashboard: 'systemMonitor',
|
||||||
|
object: 'network',
|
||||||
|
measurement: 'traffic',
|
||||||
|
dimension: 'agg',
|
||||||
|
group: 'network',
|
||||||
|
params: {
|
||||||
|
type: val.type,
|
||||||
|
interval: getInterval(val.time.type),
|
||||||
|
from: moment(val.time.time[0]).valueOf(),
|
||||||
|
to: moment(val.time.time[1]).valueOf(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export const defulteParamsData = (group, val) => [
|
||||||
|
{
|
||||||
|
dashboard: 'systemMonitor',
|
||||||
|
object: 'stats',
|
||||||
|
measurement: 'info',
|
||||||
|
dimension: 'history',
|
||||||
|
group,
|
||||||
|
params: {
|
||||||
|
from: moment(val.time[0]).valueOf(),
|
||||||
|
to: moment(val.time[1]).valueOf(),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const areaStyle = {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(151, 154, 255, 0)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(151, 154, 255, .24)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
};
|
||||||
|
export const areaStyleCpu = {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(44, 182, 224, 0)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(44, 182, 224, .24)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
};
|
||||||
|
export const areaStyleJvm = {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(96, 223, 199, 0)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(96, 223, 199, .24)',
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const typeDataLine = [
|
||||||
|
{
|
||||||
|
data: [],
|
||||||
|
type: 'line',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<page-container>
|
||||||
|
<div>
|
||||||
|
<a-row :gutter="[24, 24]">
|
||||||
|
<a-col :span="24"><TopCard /> </a-col>
|
||||||
|
<a-col :span="24"><Network /></a-col>
|
||||||
|
<a-col :span="12"><Cpu /></a-col>
|
||||||
|
<a-col :span="12"><Jvm /></a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</page-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TopCard from './components/TopCard.vue';
|
||||||
|
import Network from './components/Network.vue';
|
||||||
|
import Cpu from './components/Cpu.vue';
|
||||||
|
import Jvm from './components/Jvm.vue';
|
||||||
|
export default {
|
||||||
|
name: 'LinkDashboard',
|
||||||
|
components: { Cpu, Jvm, Network, TopCard },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
Loading…
Reference in New Issue