🎨 make change server metric, it looks like cherrypick one (packages/client/src/widgets/server-metric/cpu-mem.vue, packages/client/src/widgets/server-metric/index.vue, packages/client/src/widgets/server-metric/pie.vue)
This commit is contained in:
parent
ee6ca9a764
commit
29fd3784f7
3 changed files with 66 additions and 161 deletions
|
|
@ -1,89 +1,23 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="lcfyofjk">
|
<div :class="$style.root">
|
||||||
<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
|
<XPie :class="$style.pie" :value="cpuUsage"/>
|
||||||
<defs>
|
<div :class="$style.div">
|
||||||
<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
|
<p>CPU</p>
|
||||||
<stop offset="0%" stop-color="hsl(189, 43%, 73%)"></stop>
|
<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ cpuUsage }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
|
||||||
<stop offset="100%" stop-color="hsl(343, 76%, 68%)"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<mask
|
|
||||||
:id="cpuMaskId"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
:width="viewBoxX"
|
|
||||||
:height="viewBoxY"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
:points="cpuPolygonPoints"
|
|
||||||
fill="#fff"
|
|
||||||
fill-opacity="0.5"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
:points="cpuPolylinePoints"
|
|
||||||
fill="none"
|
|
||||||
stroke="#fff"
|
|
||||||
stroke-width="1"
|
|
||||||
/>
|
|
||||||
<circle :cx="cpuHeadX" :cy="cpuHeadY" r="1.5" fill="#fff" />
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<rect
|
|
||||||
x="-2"
|
|
||||||
y="-2"
|
|
||||||
:width="viewBoxX + 4"
|
|
||||||
:height="viewBoxY + 4"
|
|
||||||
:style="`stroke: none; fill: url(#${cpuGradientId}); mask: url(#${cpuMaskId})`"
|
|
||||||
/>
|
|
||||||
<text x="1" y="5">
|
|
||||||
CPU
|
|
||||||
<tspan>{{ cpuUsage }}%</tspan>
|
|
||||||
</text>
|
|
||||||
</svg>
|
|
||||||
<svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
|
|
||||||
<defs>
|
|
||||||
<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
|
|
||||||
<stop offset="0%" stop-color="hsl(189, 43%, 73%)"></stop>
|
|
||||||
<stop offset="100%" stop-color="hsl(343, 76%, 68%)"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<mask
|
|
||||||
:id="memMaskId"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
:width="viewBoxX"
|
|
||||||
:height="viewBoxY"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
:points="memPolygonPoints"
|
|
||||||
fill="#fff"
|
|
||||||
fill-opacity="0.5"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
:points="memPolylinePoints"
|
|
||||||
fill="none"
|
|
||||||
stroke="#fff"
|
|
||||||
stroke-width="1"
|
|
||||||
/>
|
|
||||||
<circle :cx="memHeadX" :cy="memHeadY" r="1.5" fill="#fff" />
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<rect
|
|
||||||
x="-2"
|
|
||||||
y="-2"
|
|
||||||
:width="viewBoxX + 4"
|
|
||||||
:height="viewBoxY + 4"
|
|
||||||
:style="`stroke: none; fill: url(#${memGradientId}); mask: url(#${memMaskId})`"
|
|
||||||
/>
|
|
||||||
<text x="1" y="5">
|
|
||||||
MEM
|
|
||||||
<tspan>{{ memUsage }}%</tspan>
|
|
||||||
</text>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
|
<XPie :class="$style.pie" :value="memUsage"/>
|
||||||
|
<div :class="$style.div">
|
||||||
|
<p>RAM</p>
|
||||||
|
<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ memUsage }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onBeforeUnmount, onMounted, ref } from "vue";
|
import { onBeforeUnmount, onMounted, ref } from "vue";
|
||||||
import { v4 as uuid } from "uuid";
|
import { v4 as uuid } from "uuid";
|
||||||
|
import XPie from "./pie.vue";
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
connection: any;
|
connection: any;
|
||||||
|
|
@ -164,31 +98,30 @@ function onStatsLog(statsLog) {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.lcfyofjk {
|
.root {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 16px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
> svg {
|
.pie {
|
||||||
display: block;
|
height: 42px;
|
||||||
padding: 10px;
|
flex-shrink: 0;
|
||||||
inline-size: 50%;
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
&:first-child {
|
.div {
|
||||||
padding-inline-end: 5px;
|
flex: 1;
|
||||||
}
|
margin: auto;
|
||||||
|
|
||||||
&:last-child {
|
> p {
|
||||||
padding-inline-start: 5px;
|
margin: 0 0 2px;
|
||||||
}
|
font-size: 0.8em;
|
||||||
|
|
||||||
> text {
|
|
||||||
font-size: 5px;
|
|
||||||
fill: currentColor;
|
|
||||||
|
|
||||||
> tspan {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-weight: bold;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,21 +26,6 @@
|
||||||
:connection="connection"
|
:connection="connection"
|
||||||
:meta="meta"
|
:meta="meta"
|
||||||
/>
|
/>
|
||||||
<XCpu
|
|
||||||
v-else-if="widgetProps.view === 1"
|
|
||||||
:connection="connection"
|
|
||||||
:meta="meta"
|
|
||||||
/>
|
|
||||||
<XMemory
|
|
||||||
v-else-if="widgetProps.view === 2"
|
|
||||||
:connection="connection"
|
|
||||||
:meta="meta"
|
|
||||||
/>
|
|
||||||
<XDisk
|
|
||||||
v-else-if="widgetProps.view === 3"
|
|
||||||
:connection="connection"
|
|
||||||
:meta="meta"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</MkContainer>
|
</MkContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -54,9 +39,6 @@ import type {
|
||||||
} from "../widget";
|
} from "../widget";
|
||||||
import { useWidgetPropsManager } from "../widget";
|
import { useWidgetPropsManager } from "../widget";
|
||||||
import XCpuMemory from "./cpu-mem.vue";
|
import XCpuMemory from "./cpu-mem.vue";
|
||||||
import XCpu from "./cpu.vue";
|
|
||||||
import XMemory from "./mem.vue";
|
|
||||||
import XDisk from "./disk.vue";
|
|
||||||
import MkContainer from "@/components/MkContainer.vue";
|
import MkContainer from "@/components/MkContainer.vue";
|
||||||
import type { GetFormResultType } from "@/scripts/form";
|
import type { GetFormResultType } from "@/scripts/form";
|
||||||
import * as os from "@/os";
|
import * as os from "@/os";
|
||||||
|
|
@ -103,7 +85,7 @@ os.apiGet("server-info", {}).then((res) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleView = () => {
|
const toggleView = () => {
|
||||||
widgetProps.view = (widgetProps.view + 1) % 4;
|
widgetProps.view = (widgetProps.view + 1) % 1;
|
||||||
save();
|
save();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
|
<svg :class="$style.root" viewBox="0 0 1 1" preserveAspectRatio="none">
|
||||||
<circle
|
<circle
|
||||||
:r="r"
|
:r="r"
|
||||||
cx="50%"
|
cx="50%" cy="50%"
|
||||||
cy="50%"
|
fill="none"
|
||||||
fill="none"
|
stroke-width="0.2"
|
||||||
stroke-width="0.1"
|
stroke="rgba(0, 0, 0, 0.05)"
|
||||||
stroke="rgba(0, 0, 0, 0.05)"
|
:class="$style.circle"
|
||||||
/>
|
/>
|
||||||
<circle
|
<circle
|
||||||
:r="r"
|
:r="r"
|
||||||
cx="50%"
|
cx="50%" cy="50%"
|
||||||
cy="50%"
|
:stroke-dasharray="Math.PI * (r * 2)"
|
||||||
:stroke-dasharray="Math.PI * (r * 2)"
|
:stroke-dashoffset="strokeDashoffset"
|
||||||
:stroke-dashoffset="strokeDashoffset"
|
fill="none"
|
||||||
fill="none"
|
stroke-width="0.2"
|
||||||
stroke-width="0.1"
|
:class="$style.circle"
|
||||||
:stroke="color"
|
:stroke="color"
|
||||||
/>
|
/>
|
||||||
<text x="50%" y="50%" dy="0.05" text-anchor="middle">
|
</svg>
|
||||||
{{ (value * 100).toFixed(1) }}%
|
|
||||||
</text>
|
|
||||||
</svg>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
@ -32,33 +29,26 @@ const props = defineProps<{
|
||||||
reverse?: boolean;
|
reverse?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const r = 0.45;
|
const r = 0.35;
|
||||||
|
|
||||||
const color = computed(
|
const color = computed(
|
||||||
() =>
|
() => `hsl(${180 - (props.value / 100) * 180}, 80%, 70%)`,
|
||||||
`hsl(${
|
|
||||||
props.reverse ? props.value * 180 : 180 - props.value * 180
|
|
||||||
}, 80%, 70%)`,
|
|
||||||
);
|
);
|
||||||
const strokeDashoffset = computed(
|
const strokeDashoffset = computed(
|
||||||
() => (1 - props.value) * (Math.PI * (r * 2)),
|
() => (1 - props.value / 100) * (Math.PI * (r * 2)),
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.hsalcinq {
|
.root {
|
||||||
display: block;
|
display: block;
|
||||||
block-size: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
> circle {
|
.circle {
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
transition: stroke-dashoffset 0.5s ease;
|
transition: stroke-dashoffset 0.5s ease;
|
||||||
}
|
stroke-linecap: round;
|
||||||
|
|
||||||
> text {
|
|
||||||
font-size: 0.15px;
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Reference in a new issue