347 lines
12 KiB
Vue
347 lines
12 KiB
Vue
<script>
|
|
// DCIM 带宽监控根据时间范围查询入/出站曲线，图表组件按需加载。
|
|
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);
|
|
}
|
|
}
|
|
// 缺失采样转为 null 而不是 0，配合 connectNulls:false 保留采集中断的空隙。
|
|
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>
|