first commit
This commit is contained in:
cieanyau committed
commit
db5762abd4
687 files changed
+171307
No files matched your search
@@ -0,0 +1,343 @@
|
||||
<script>
|
||||
import "~/assets/styles/DcimMonitor.CiStTCbZ.css";
|
||||
import { toDisplayString } from "vue";
|
||||
import { onMounted } from "vue";
|
||||
import { normalizeClass } from "vue";
|
||||
import { onBeforeUnmount } from "vue";
|
||||
import { watch } from "vue";
|
||||
import { defineAsyncComponent } from "vue";
|
||||
import { createBlock } from "vue";
|
||||
import { ref } from "vue";
|
||||
import { createCommentVNode } from "vue";
|
||||
import { computed } from "vue";
|
||||
import { isRef } from "vue";
|
||||
import { createElementBlock } from "vue";
|
||||
import { createElementVNode } from "vue";
|
||||
import { createTextVNode } from "vue";
|
||||
import { unref } from "vue";
|
||||
import { defineComponent } from "vue";
|
||||
import { createVNode } from "vue";
|
||||
import { openBlock } from "vue";
|
||||
import { normalizeStyle } from "vue";
|
||||
import { loadModule } from "~/utils/load-module.js";
|
||||
import { useApi } from "~/lib/auth.js";
|
||||
import button from "primevue/button";
|
||||
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
||||
import skeleton from "primevue/skeleton";
|
||||
import selectbutton from "primevue/selectbutton";
|
||||
var T = defineAsyncComponent(() =>
|
||||
loadModule(
|
||||
() => import("~/components/ChartBox.vue").then((e) => e.default || e),
|
||||
[],
|
||||
import.meta.url,
|
||||
),
|
||||
),
|
||||
E = {
|
||||
class: `monitor-panel`,
|
||||
},
|
||||
D = {
|
||||
key: 0,
|
||||
class: `monitor-head`,
|
||||
},
|
||||
O = {
|
||||
class: `legend`,
|
||||
},
|
||||
k = [`aria-busy`],
|
||||
A = {
|
||||
key: 1,
|
||||
role: `alert`,
|
||||
class: `monitor-error`,
|
||||
},
|
||||
j = {
|
||||
key: 3,
|
||||
class: `empty`,
|
||||
},
|
||||
M = Object.assign(
|
||||
_plugin_vue_export_helper_t(
|
||||
defineComponent({
|
||||
__name: `DcimMonitor`,
|
||||
props: {
|
||||
hostId: {},
|
||||
module: {},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: !1,
|
||||
},
|
||||
},
|
||||
setup(a) {
|
||||
let h = a,
|
||||
y = useApi(),
|
||||
S = ref(3600),
|
||||
M = [
|
||||
{
|
||||
label: `1 小时`,
|
||||
value: 3600,
|
||||
},
|
||||
{
|
||||
label: `24 小时`,
|
||||
value: 86400,
|
||||
},
|
||||
{
|
||||
label: `7 天`,
|
||||
value: 604800,
|
||||
},
|
||||
{
|
||||
label: `1 个月`,
|
||||
value: 2592e3,
|
||||
},
|
||||
{
|
||||
label: `1 年`,
|
||||
value: 31536e3,
|
||||
},
|
||||
],
|
||||
N = ref(!1),
|
||||
P = ref(``),
|
||||
F = ref([]),
|
||||
I = ref(``),
|
||||
L = 0,
|
||||
R = !1,
|
||||
z = ``;
|
||||
async function B() {
|
||||
let e = ++L,
|
||||
t = h.hostId,
|
||||
n = h.module,
|
||||
r = `${n}:${t}:${S.value}`;
|
||||
(r !== z && ((F.value = []), (I.value = ``)),
|
||||
(z = r),
|
||||
(N.value = !0),
|
||||
(P.value = ``));
|
||||
try {
|
||||
let r = await y.get(`/${n}/${t}/chart`, {
|
||||
start_time: Math.floor(Date.now() / 1e3) - S.value,
|
||||
});
|
||||
if (R || e !== L || t !== h.hostId || n !== h.module) return;
|
||||
((F.value = (Array.isArray(r.list) ? r.list : []).filter((e) =>
|
||||
Number.isFinite(Number(e.time)),
|
||||
)),
|
||||
(I.value = typeof r.unit == `string` ? r.unit : ``));
|
||||
} catch (t) {
|
||||
!R &&
|
||||
e === L &&
|
||||
(P.value = t instanceof Error ? t.message : `带宽监控加载失败`);
|
||||
} finally {
|
||||
!R && e === L && (N.value = !1);
|
||||
}
|
||||
}
|
||||
function V(e) {
|
||||
return e != null && e !== `` && Number.isFinite(Number(e))
|
||||
? Number(e)
|
||||
: null;
|
||||
}
|
||||
let H = computed(() =>
|
||||
F.value.some((e) => V(e.in_bw) !== null || V(e.out_bw) !== null),
|
||||
),
|
||||
U = computed(() => ({
|
||||
color: [`#1687d9`, `#29b6d8`],
|
||||
tooltip: {
|
||||
trigger: `axis`,
|
||||
},
|
||||
grid: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: h.compact ? 10 : 30,
|
||||
bottom: 8,
|
||||
outerBoundsMode: `same`,
|
||||
outerBoundsContain: `axisLabel`,
|
||||
},
|
||||
xAxis: {
|
||||
type: `category`,
|
||||
boundaryGap: !1,
|
||||
data: F.value.map((e) =>
|
||||
new Date(Number(e.time) * 1e3).toLocaleTimeString(`zh-CN`, {
|
||||
hour: `2-digit`,
|
||||
minute: `2-digit`,
|
||||
}),
|
||||
),
|
||||
},
|
||||
yAxis: {
|
||||
type: `value`,
|
||||
name: I.value,
|
||||
min: 0,
|
||||
splitNumber: h.compact ? 2 : 5,
|
||||
},
|
||||
series: [`in_bw`, `out_bw`].map((e, t) => ({
|
||||
name: t ? `出站` : `入站`,
|
||||
type: `line`,
|
||||
showSymbol: !0,
|
||||
symbol: `circle`,
|
||||
symbolSize: h.compact ? 3 : 4,
|
||||
smooth: 0.25,
|
||||
lineStyle: {
|
||||
width: 1.5,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.14,
|
||||
},
|
||||
connectNulls: !1,
|
||||
data: F.value.map((t) => V(t[e])),
|
||||
})),
|
||||
}));
|
||||
return (
|
||||
watch([() => h.hostId, () => h.module, S], B),
|
||||
onMounted(B),
|
||||
onBeforeUnmount(() => {
|
||||
((R = !0), L++);
|
||||
}),
|
||||
(t, r) => {
|
||||
let i = selectbutton,
|
||||
s = skeleton,
|
||||
l = button,
|
||||
h = T;
|
||||
return (
|
||||
openBlock(),
|
||||
createElementBlock(
|
||||
`section`,
|
||||
{
|
||||
class: normalizeClass([
|
||||
`monitor`,
|
||||
{
|
||||
compact: a.compact,
|
||||
},
|
||||
]),
|
||||
},
|
||||
[
|
||||
a.compact
|
||||
? createCommentVNode(``, !0)
|
||||
: (openBlock(),
|
||||
createBlock(
|
||||
i,
|
||||
{
|
||||
key: 0,
|
||||
modelValue: unref(S),
|
||||
"onUpdate:modelValue": (r[0] ||= (e) =>
|
||||
isRef(S) ? (S.value = e) : null),
|
||||
class: `range`,
|
||||
options: M,
|
||||
"option-label": `label`,
|
||||
"option-value": `value`,
|
||||
"allow-empty": !1,
|
||||
"aria-label": `监控时间范围`,
|
||||
},
|
||||
null,
|
||||
8,
|
||||
[`modelValue`],
|
||||
)),
|
||||
createElementVNode(`div`, E, [
|
||||
a.compact
|
||||
? createCommentVNode(``, !0)
|
||||
: (openBlock(),
|
||||
createElementBlock(`div`, D, [
|
||||
...(r[1] ||= [
|
||||
createElementVNode(`h3`, null, `网络带宽`, -1),
|
||||
]),
|
||||
])),
|
||||
createElementVNode(`div`, O, [
|
||||
(r[2] ||= createElementVNode(
|
||||
`span`,
|
||||
null,
|
||||
[
|
||||
createElementVNode(`i`, {
|
||||
class: `incoming`,
|
||||
}),
|
||||
createTextVNode(`入站`),
|
||||
],
|
||||
-1,
|
||||
)),
|
||||
(r[3] ||= createElementVNode(
|
||||
`span`,
|
||||
null,
|
||||
[
|
||||
createElementVNode(`i`, {
|
||||
class: `outgoing`,
|
||||
}),
|
||||
createTextVNode(`出站`),
|
||||
],
|
||||
-1,
|
||||
)),
|
||||
createElementVNode(
|
||||
`small`,
|
||||
null,
|
||||
toDisplayString(unref(I) || `单位未返回`),
|
||||
1,
|
||||
),
|
||||
]),
|
||||
createElementVNode(
|
||||
`div`,
|
||||
{
|
||||
class: `chart-viewport`,
|
||||
style: normalizeStyle({
|
||||
"--chart-height": a.compact ? `126px` : `320px`,
|
||||
}),
|
||||
"aria-busy": unref(N),
|
||||
},
|
||||
[
|
||||
unref(N) && !unref(H)
|
||||
? (openBlock(),
|
||||
createBlock(
|
||||
s,
|
||||
{
|
||||
key: 0,
|
||||
height: a.compact ? `126px` : `320px`,
|
||||
},
|
||||
null,
|
||||
8,
|
||||
[`height`],
|
||||
))
|
||||
: unref(P)
|
||||
? (openBlock(),
|
||||
createElementBlock(`div`, A, [
|
||||
createElementVNode(
|
||||
`span`,
|
||||
null,
|
||||
toDisplayString(unref(P)),
|
||||
1,
|
||||
),
|
||||
createVNode(l, {
|
||||
label: `重试`,
|
||||
text: ``,
|
||||
size: `small`,
|
||||
onClick: B,
|
||||
}),
|
||||
]))
|
||||
: unref(H)
|
||||
? (openBlock(),
|
||||
createBlock(
|
||||
h,
|
||||
{
|
||||
key: 2,
|
||||
option: unref(U),
|
||||
height: a.compact ? 126 : 320,
|
||||
loading: unref(N),
|
||||
},
|
||||
null,
|
||||
8,
|
||||
[`option`, `height`, `loading`],
|
||||
))
|
||||
: (openBlock(),
|
||||
createElementBlock(
|
||||
`p`,
|
||||
j,
|
||||
`所选时段暂无带宽采样`,
|
||||
)),
|
||||
],
|
||||
12,
|
||||
k,
|
||||
),
|
||||
]),
|
||||
],
|
||||
2,
|
||||
)
|
||||
);
|
||||
}
|
||||
);
|
||||
},
|
||||
}),
|
||||
[[`__scopeId`, `data-v-eb47944f`]],
|
||||
),
|
||||
{
|
||||
__name: `DcimMonitor`,
|
||||
},
|
||||
);
|
||||
export {};
|
||||
export default M;
|
||||
</script>
|
||||
Reference in new issue
Block a user