fix: 运维管理 仪表盘代码优化
This commit is contained in:
jackhoo_98
parent
401634be3e
commit
568afdb69e
|
|
@ -8,5 +8,4 @@ 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);
|
||||
export const serverNode = () => server.get(`/dashboard/cluster/nodes`);
|
||||
|
|
|
|||
|
|
@ -110,9 +110,6 @@ const handleJVMOptions = (optionsData, xAxis) => {
|
|||
if (chart) {
|
||||
const myChart = echarts.init(chart);
|
||||
const dataKeys = Object.keys(optionsData);
|
||||
|
||||
console.log(21, arrayReverse(xAxis), xAxis);
|
||||
|
||||
const options = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
|
|
|||
|
|
@ -190,9 +190,6 @@ watch(
|
|||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
// onMounted(() => {
|
||||
// createEcharts();
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
style="width: 300px; margin-bottom: 20px"
|
||||
@change="serverIdChange"
|
||||
:value="serverId"
|
||||
:options="serverNode"
|
||||
v-if="serverNode.length > 1"
|
||||
:options="serverNodeOptions"
|
||||
v-if="serverNodeOptions.length > 1"
|
||||
></a-select>
|
||||
<div class="dash-board">
|
||||
<div class="dash-board-item">
|
||||
|
|
@ -42,99 +42,85 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup name="TopCard">
|
||||
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),
|
||||
};
|
||||
});
|
||||
},
|
||||
},
|
||||
const serverId = ref();
|
||||
const serverNodeOptions = ref([]);
|
||||
const topValues = ref({
|
||||
cpu: 0,
|
||||
jvm: 0,
|
||||
jvmTotal: 0,
|
||||
usage: 0,
|
||||
usageTotal: 0,
|
||||
systemUsage: 0,
|
||||
systemUsageTotal: 0,
|
||||
});
|
||||
|
||||
const serverIdChange = (val: string) => {
|
||||
serverId.value = val;
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
const id = 'operations-statistics-system-info-realTime';
|
||||
const topic = '/dashboard/systemMonitor/stats/info/realTime';
|
||||
getWebSocket(id, topic, {
|
||||
type: 'all',
|
||||
serverNodeId: serverId.value,
|
||||
interval: '1s',
|
||||
agg: 'avg',
|
||||
})
|
||||
.pipe(map((res) => res.payload))
|
||||
.subscribe((payload) => {
|
||||
const {
|
||||
value: { cpu, memory, disk },
|
||||
} = payload;
|
||||
topValues.value = {
|
||||
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),
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
serverNode().then((resp) => {
|
||||
if (resp.success) {
|
||||
serverNodeOptions.value = resp.result.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
if (serverNodeOptions.value.length) {
|
||||
serverId.value = serverNodeOptions.value[0]?.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
watch(
|
||||
() => serverId.value,
|
||||
(val) => {
|
||||
val && getData();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { topOptionsSeries } from './tool';
|
||||
export default {
|
||||
name: 'TopEchartsItemNode',
|
||||
props: {
|
||||
|
|
@ -60,30 +61,8 @@ export default {
|
|||
this.options = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
min: 0,
|
||||
...topOptionsSeries,
|
||||
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',
|
||||
|
|
@ -98,93 +77,6 @@ export default {
|
|||
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 }],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -123,3 +123,98 @@ export const typeDataLine = [
|
|||
type: 'line',
|
||||
},
|
||||
];
|
||||
|
||||
export const topOptionsSeries = {
|
||||
type: 'gauge',
|
||||
min: 0,
|
||||
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',
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,15 +11,11 @@
|
|||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup name="DashBoardPage">
|
||||
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