Files
console-dev/app/components/instance/InstanceOverview.vue
T
2026-11-06 00:04:38 +08:00

1867 lines
72 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script>
import "~/assets/styles/InstanceTraffic.CyyEAXl3.css";
import "~/assets/styles/FlowPacketPanel.-RJSx13z.css";
import "~/assets/styles/RingProgress.CVwR7il5.css";
import "~/assets/styles/OsIcon.CAi4Iz2S.css";
import "~/assets/styles/InstanceOverview.C9ExpxMB.css";
import { toDisplayString } from "vue";
import { renderList } from "vue";
import { onMounted } from "vue";
import { normalizeClass } from "vue";
import { onBeforeUnmount } from "vue";
import { watch } from "vue";
import { Suspense } from "vue";
import { defineAsyncComponent } from "vue";
import { createBlock } from "vue";
import { ref } from "vue";
import { withCtx } from "vue";
import { createCommentVNode } from "vue";
import { computed } from "vue";
import { createElementBlock } from "vue";
import { Fragment } 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 { 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 { t as useTheme_t } from "~/lib/useTheme.js";
import message from "primevue/message";
import { r as dict_r } from "~/lib/dict.js";
import OsIcon from "~/components/OsIcon.vue";
import { n as instance_status_n } from "~/lib/instance-status.js";
import skeleton from "primevue/skeleton";
import { t as os_name_t } from "~/lib/os-name.js";
import { n as configuration_display_n } from "~/lib/configuration-display.js";
import RingProgress from "~/components/RingProgress.vue";
import FlowPacketPanel from "~/components/instance/FlowPacketPanel.vue";
import InstanceStatusTag from "~/components/instance/InstanceStatusTag.vue";
import InstanceTraffic from "~/components/instance/InstanceTraffic.vue";
import { n as finance_resource_chart_n } from "~/lib/finance-resource-chart.js";
var le = defineAsyncComponent(() =>
loadModule(
() => import("~/components/ChartBox.vue").then((e) => e.default || e),
[],
import.meta.url,
),
),
ue = {
class: `ov`,
},
de = {
class: `grid`,
},
fe = {
class: `overview-column`,
},
pe = {
key: 0,
class: `card`,
},
me = {
class: `card-body`,
},
he = {
class: `card card-tall`,
},
ge = {
class: `card-body`,
},
_e = {
class: `res`,
},
ve = {
class: `res-head`,
},
ye = {
key: 0,
class: `res-sub`,
},
be = {
key: 1,
class: `res-body`,
},
xe = {
key: 1,
class: `resource-unavailable`,
},
Se = {
class: `res-chart`,
},
Ce = {
class: `res`,
},
we = {
class: `res-head`,
},
Te = {
key: 0,
class: `res-body`,
},
Ee = {
key: 1,
class: `resource-unavailable`,
},
De = {
class: `res-chart`,
},
Oe = {
class: `overview-column`,
},
ke = {
class: `card`,
},
Ae = {
class: `card-body`,
},
je = {
class: `os`,
},
Me = {
class: `kv`,
},
Ne = {
class: `col-mono`,
},
Pe = [`aria-label`],
Fe = {
class: `kv`,
},
Ie = {
class: `col-mono`,
},
Le = [`aria-label`],
Re = {
class: `kv`,
},
ze = {
class: `col-mono`,
},
Be = [`aria-label`],
Ve = {
class: `kv`,
},
He = {
class: `col-mono`,
},
Ue = [`aria-label`],
We = [`aria-label`],
Ge = {
class: `row-2`,
},
Ke = [`aria-busy`],
qe = {
class: `card-body`,
},
Je = {
key: 1,
role: `status`,
class: `muted`,
},
Ye = {
class: `disk-name`,
},
Xe = {
key: 3,
class: `muted`,
},
Ze = {
class: `overview-column`,
},
Qe = {
class: `card`,
},
$e = {
class: `card-body`,
},
et = {
class: `kv`,
},
tt = {
class: `kv`,
},
nt = {
class: `kv`,
},
rt = {
class: `price`,
},
it = {
class: `kv`,
},
at = {
class: `kv`,
},
ot = {
class: `card`,
},
st = {
class: `card-body`,
},
ct = {
class: `kv`,
},
lt = {
class: `kv`,
},
ut = {
key: 0,
class: `kv`,
},
dt = {
class: `kv`,
},
ft = {
class: `kv`,
},
pt = {
class: `kv`,
},
mt = {
class: `col-mono`,
},
ht = [`aria-busy`],
gt = {
class: `network-chart-title`,
},
_t = {
key: 0,
},
vt = {
class: `network-chart-viewport`,
},
yt = {
key: 0,
class: `network-chart-state`,
role: `status`,
},
bt = {
key: 3,
class: `network-chart-state`,
},
k = `#3b82f6`,
A = Object.assign(
_plugin_vue_export_helper_t(
defineComponent({
__name: `InstanceOverview`,
props: {
info: {},
productState: {},
host: {},
hostId: {},
module: {},
caps: {},
powerDesc: {},
disksLoading: {
type: Boolean,
},
disksError: {},
disksLoaded: {
type: Boolean,
},
},
emits: [`pay`, `go-tab`, `access-action`, `refresh-disks`],
setup(s, { emit: v }) {
let x = s,
C = v,
A = useApi(),
j = useTheme_t(),
M = computed(() =>
configuration_display_n(x.module, x.info.raw, x.host),
),
N = computed(() => instance_status_n(x.host, x.info.powerStatus)),
P = computed(() => (j.isDark.value ? `#38bdf8` : `#0ea5e9`)),
F = ref(null),
I = ref(!1),
L = ref(!1),
R = ref(null),
z = ref([]),
B = ref([]),
V = ref(!1),
H = ref(null),
U = ref(!1),
W = ref(``),
G = computed(
() =>
H.value?.series.some((e) => e.data.some((e) => e !== null)) ??
!1,
),
K = 0,
q = !1;
function J(e) {
if (typeof e != `number` && (typeof e != `string` || !e.trim()))
return null;
let t = Number(e);
return Number.isFinite(t) ? t : null;
}
let xt = (e) => (e.status === `fulfilled` ? e.value : null),
St = (e) => (e instanceof Error ? e.message : `网络监控加载失败`);
async function Y() {
if (q) return;
let e = ++K,
t = x.hostId,
n = x.module,
r = () => !q && e === K && t === x.hostId && n === x.module;
((V.value = !0),
(L.value =
x.caps.traffic !== !1 &&
[`mf_cloud`, `remf_cloud`].includes(n)),
(U.value = !0),
(W.value = ``),
(H.value = null),
(F.value = null),
(I.value = !1),
(R.value = null),
(z.value = []),
(B.value = []));
let i = Date.now(),
a = Math.floor(i / 1e3) - 86400;
async function o(e, t, n, i) {
try {
let n = await e;
r() && t(n);
} catch (e) {
r() && n?.(e);
} finally {
r() && i?.();
}
}
let s = (e) => {
W.value = St(e);
},
c = () => {
U.value = !1;
};
try {
if (n === `remf_finance`) {
let e = {
start: i - 864e5,
end: i,
};
await Promise.all([
o(
A.get(`/remf_finance/${t}/chart`, {
type: `cpu`,
...e,
}),
(e) => {
z.value = finance_resource_chart_n(e ?? {}, `cpu`).data;
},
),
o(
A.get(`/remf_finance/${t}/chart`, {
type: `memory`,
...e,
}),
(e) => {
B.value = finance_resource_chart_n(
e ?? {},
`memory`,
).data;
},
),
o(
A.get(`/remf_finance/${t}/chart`, {
type: `flow`,
...e,
}),
(e) => {
H.value = {
labels: (e?.list?.[0] ?? []).map((e) =>
String(e.time ?? ``).slice(11, 16),
),
unit: e?.unit?.trim() || ``,
series: (e?.list ?? []).map((t, n) => ({
name: String(
e.label?.[n] || `带宽系列 ${n + 1}`,
).replace(/\(.*\)$/, ``),
data: t.map((e) => J(e.value)),
})),
};
},
s,
c,
),
]);
} else if (
n === `mf_cloud` ||
n === `remf_cloud` ||
n === `jy_cloud` ||
n === `jy_dcim`
)
await Promise.all([
...(x.caps.traffic !== !1 &&
n !== `jy_cloud` &&
n !== `jy_dcim`
? [
o(
A.get(`/${n}/${t}/flow`),
(e) => {
F.value = e;
},
() => {
I.value = !0;
},
() => {
L.value = !1;
},
),
]
: []),
...(n === `jy_dcim`
? []
: [
o(A.get(`/${n}/${t}/real_data`), (e) => {
R.value = e;
}),
]),
...(n === `jy_dcim`
? []
: [
o(
A.get(`/${n}/${t}/chart`, {
type: `cpu`,
start_time: a,
}),
(e) => {
z.value = (e?.list ?? []).map((e) => J(e.value));
},
),
]),
...(n === `jy_dcim`
? []
: [
o(
A.get(`/${n}/${t}/chart`, {
type: `memory`,
start_time: a,
}),
(e) => {
B.value = (e?.list ?? []).map((e) => {
let t = J(e.total),
n = J(e.used);
return t !== null && t > 0 && n !== null
? (n / t) * 100
: null;
});
},
),
]),
o(
A.get(`/${n}/${t}/chart`, {
type: `bw`,
start_time: a,
}),
(e) => {
let t = e?.list ?? [],
n = [
t.map((e) => J(e.in_bw)),
t.map((e) => J(e.out_bw)),
],
r = n.flat().reduce((e, t) => Math.max(e, t ?? 0), 0),
i =
r > 0
? Math.min(
4,
Math.max(0, Math.floor(Math.log2(r) / 10)),
)
: 0;
H.value = {
labels: t.map((e) => {
let t = new Date(e.time * 1e3);
return `${String(t.getHours()).padStart(2, `0`)}:${String(t.getMinutes()).padStart(2, `0`)}`;
}),
unit: [`bps`, `Kbps`, `Mbps`, `Gbps`, `Tbps`][i],
series: n.map((e, t) => ({
name: t === 0 ? `下行带宽` : `上行带宽`,
data: e.map((e) =>
e === null
? null
: Number((e / 1024 ** i).toFixed(2)),
),
})),
};
},
s,
c,
),
]);
else {
let [e] = await Promise.allSettled([
A.get(`/kky_ecs/monitor/${t}`),
]);
if (!r()) return;
let n = xt(e);
z.value = n?.cpu?.[0]?.value ?? [];
let i = n?.memory?.find((e) => !/free/i.test(e.name)),
a = n?.memory?.find((e) => /free/i.test(e.name));
((B.value =
i && a
? i.value.map((e, t) => {
let n = Number(a.value?.[t] ?? 0);
return e > 0
? Math.max(0, Math.min(100, ((e - n) / e) * 100))
: 0;
})
: []),
e.status === `rejected`
? (W.value = St(e.reason))
: (H.value = {
labels: (n?.sample_info ?? []).map((e) =>
String(e.timestamp ?? ``).slice(11, 16),
),
unit: `Mbps`,
series: (n?.bandwidth ?? []).map((e, t) => ({
name: e.title || e.name || `带宽系列 ${t + 1}`,
data: (e.value ?? []).map((e) =>
typeof e == `number` && Number.isFinite(e)
? Number((e / 1e3).toFixed(2))
: null,
),
})),
}));
}
} finally {
r() && ((V.value = !1), (U.value = !1));
}
}
let X = (e) => Number(e ?? 0);
(computed(() => {
let e = F.value,
t = X(e?.total_num ?? e?.total);
return t > 0
? Math.min(100, (X(e?.used_num ?? e?.used) / t) * 100)
: 0;
}),
computed(
() => !I.value && X(F.value?.total_num ?? F.value?.total) <= 0,
));
let Ct = computed(() =>
x.module === `jy_cloud` || x.module === `jy_dcim`
? (J(R.value?.cpu_usage) ?? z.value.at(-1) ?? null)
: x.module === `mf_cloud` || x.module === `remf_cloud`
? X(R.value?.cpu_usage)
: z.value.length
? z.value[z.value.length - 1]
: x.module === `remf_finance`
? null
: 0,
),
wt = computed(() =>
x.module === `jy_cloud` || x.module === `jy_dcim`
? (J(R.value?.memory_usage) ?? B.value.at(-1) ?? null)
: x.module === `mf_cloud` || x.module === `remf_cloud`
? X(R.value?.memory_usage)
: B.value.length
? B.value[B.value.length - 1]
: x.module === `remf_finance`
? null
: 0,
);
function Tt(e) {
return {
grid: {
left: 7,
right: 7,
top: 14,
bottom: 7,
},
xAxis: {
type: `category`,
data: e.map((e, t) => t),
axisLabel: {
show: !1,
},
axisTick: {
show: !1,
},
axisLine: {
show: !1,
},
splitLine: {
show: !0,
lineStyle: {
color: j.isDark.value ? `#334155` : `#e2e8f0`,
},
},
boundaryGap: !1,
},
yAxis: {
type: `value`,
max: 100,
axisLabel: {
show: !1,
},
splitLine: {
lineStyle: {
color: j.isDark.value ? `#334155` : `#e2e8f0`,
},
},
},
tooltip: {
trigger: `axis`,
formatter: (e) => {
let t = J(e[0]?.value);
return t === null ? `暂无数据` : `${t.toFixed(1)}%`;
},
},
series: [
{
type: `line`,
smooth: !0,
showSymbol: !0,
connectNulls: !1,
areaStyle: {
opacity: 0.2,
},
lineStyle: {
width: 1.5,
color: P.value,
},
itemStyle: {
color: P.value,
},
data: e.map((e) =>
e === null ? null : Number(e.toFixed(2)),
),
},
],
};
}
let Et = computed(() => Tt(z.value)),
Dt = computed(() => Tt(B.value)),
Ot = computed(() => ({
grid: {
left: 7,
right: 7,
top: 28,
bottom: 7,
},
legend: {
top: 0,
right: 0,
itemWidth: 18,
itemHeight: 6,
textStyle: {
fontSize: 10,
color: j.isDark.value ? `#a1a1aa` : `#64748b`,
},
},
tooltip: {
trigger: `axis`,
},
xAxis: {
type: `category`,
data: H.value?.labels ?? [],
boundaryGap: !1,
axisLabel: {
show: !1,
},
axisTick: {
show: !1,
},
axisLine: {
show: !1,
},
splitLine: {
show: !0,
},
},
yAxis: {
type: `value`,
min: 0,
axisLabel: {
show: !1,
},
splitLine: {
show: !0,
},
},
series: (H.value?.series ?? []).map((e, t) => ({
name: e.name,
type: `line`,
smooth: !0,
showSymbol: !0,
connectNulls: !1,
lineStyle: {
width: 1.5,
color: t === 0 ? P.value : k,
},
itemStyle: {
color: t === 0 ? P.value : k,
},
areaStyle: {
opacity: 0.12,
},
data: e.data,
tooltip: {
valueFormatter: (e) =>
e == null
? `暂无数据`
: `${e}${H.value?.unit ? ` ${H.value.unit}` : `(单位未提供)`}`,
},
})),
})),
Z = ref(``);
async function Q(e, t) {
if (e)
try {
(await navigator.clipboard.writeText(e),
(Z.value = t),
setTimeout(() => (Z.value = ``), 1500));
} catch {}
}
let $ = ref(!1);
return (
onMounted(Y),
watch(() => [x.hostId, x.module], Y),
onBeforeUnmount(() => {
((q = !0), (K += 1));
}),
(n, i) => {
let a = message,
l = InstanceTraffic,
f = FlowPacketPanel,
v = button,
x = RingProgress,
S = le,
w = skeleton,
E = OsIcon,
D = InstanceStatusTag;
return (
openBlock(),
createElementBlock(`div`, ue, [
unref(N)
? (openBlock(),
createBlock(
a,
{
key: 0,
severity: `warn`,
closable: !1,
},
{
default: withCtx(() => [
createTextVNode(
`暂停原因:` + toDisplayString(unref(N)),
1,
),
]),
_: 1,
},
))
: createCommentVNode(``, !0),
createElementVNode(`div`, de, [
createElementVNode(`div`, fe, [
s.caps.traffic === !1
? createCommentVNode(``, !0)
: (openBlock(),
createElementBlock(`section`, pe, [
createElementVNode(
`button`,
{
type: `button`,
class: `card-head card-link`,
"aria-label": `查看流量详情`,
onClick: (i[0] ||= (e) =>
C(`go-tab`, `network`)),
},
[
...(i[20] ||= [
createElementVNode(`span`, null, `流量`, -1),
createElementVNode(
`i`,
{
class: `pi pi-angle-right`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
),
createElementVNode(`div`, me, [
createVNode(
l,
{
module: s.module,
"host-id": s.hostId,
raw: s.info.raw,
flow: unref(F),
loading: unref(L),
failed: unref(I),
},
null,
8,
[
`module`,
`host-id`,
`raw`,
`flow`,
`loading`,
`failed`,
],
),
]),
s.module === `mf_cloud` ||
s.module === `remf_cloud` ||
s.module === `remf_finance`
? (openBlock(),
createBlock(
f,
{
key: 0,
mode: `button`,
"host-id": s.hostId,
module: s.module,
flow: unref(F),
onPay: (i[1] ||= (e) => C(`pay`, e)),
},
null,
8,
[`host-id`, `module`, `flow`],
))
: (openBlock(),
createBlock(v, {
key: 1,
label: `流量详情`,
icon: `pi pi-plus`,
fluid: ``,
onClick: (i[2] ||= (e) =>
C(`go-tab`, `network`)),
})),
])),
createElementVNode(`section`, he, [
createElementVNode(
`button`,
{
type: `button`,
class: `card-head card-link`,
"aria-label": `查看资源监控`,
onClick: (i[3] ||= (e) => C(`go-tab`, `monitor`)),
},
[
...(i[21] ||= [
createElementVNode(`span`, null, `资源`, -1),
createElementVNode(
`i`,
{
class: `pi pi-angle-right`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
),
createElementVNode(`div`, ge, [
createElementVNode(`div`, _e, [
createElementVNode(`div`, ve, [
(i[22] ||= createElementVNode(
`i`,
{
class: `pi pi-microchip`,
},
null,
-1,
)),
(i[23] ||= createTextVNode(` CPU `, -1)),
createElementVNode(
`b`,
null,
toDisplayString(s.info.cpu || `—`) +
` ` +
toDisplayString(
s.module === `jy_dcim` ? `颗 CPU` : `核`,
),
1,
),
]),
s.module !== `kky_ecs` && s.info.raw.cpu_model_name
? (openBlock(),
createElementBlock(
`div`,
ye,
toDisplayString(s.info.raw.cpu_model_name),
1,
))
: createCommentVNode(``, !0),
s.module === `jy_dcim`
? createCommentVNode(``, !0)
: (openBlock(),
createElementBlock(`div`, be, [
unref(Ct) === null
? (openBlock(),
createElementBlock(
`div`,
xe,
toDisplayString(
unref(V)
? `正在加载 CPU 使用率`
: `暂无 CPU 使用率`,
),
1,
))
: (openBlock(),
createBlock(
x,
{
key: 0,
value: unref(Ct),
label: `CPU`,
},
null,
8,
[`value`],
)),
createElementVNode(`div`, Se, [
(openBlock(),
createBlock(Suspense, null, {
fallback: withCtx(() => [
createVNode(w, {
height: `126px`,
}),
]),
default: withCtx(() => [
createVNode(
S,
{
option: unref(Et),
height: 126,
},
null,
8,
[`option`],
),
]),
_: 1,
})),
]),
])),
]),
createElementVNode(`div`, Ce, [
createElementVNode(`div`, we, [
(i[24] ||= createElementVNode(
`i`,
{
class: `pi pi-server`,
},
null,
-1,
)),
(i[25] ||= createTextVNode(` 内存 `, -1)),
createElementVNode(
`b`,
null,
toDisplayString(s.info.memory || `—`) + ` GB`,
1,
),
]),
s.module === `jy_dcim`
? createCommentVNode(``, !0)
: (openBlock(),
createElementBlock(`div`, Te, [
unref(wt) === null
? (openBlock(),
createElementBlock(
`div`,
Ee,
toDisplayString(
unref(V)
? `正在加载内存使用率`
: `暂无内存使用率`,
),
1,
))
: (openBlock(),
createBlock(
x,
{
key: 0,
value: unref(wt),
label: `内存`,
},
null,
8,
[`value`],
)),
createElementVNode(`div`, De, [
(openBlock(),
createBlock(Suspense, null, {
fallback: withCtx(() => [
createVNode(w, {
height: `126px`,
}),
]),
default: withCtx(() => [
createVNode(
S,
{
option: unref(Dt),
height: 126,
},
null,
8,
[`option`],
),
]),
_: 1,
})),
]),
])),
]),
]),
s.caps.upgrade === !1
? createCommentVNode(``, !0)
: (openBlock(),
createBlock(v, {
key: 0,
label: `升降级`,
severity: `secondary`,
outlined: ``,
fluid: ``,
onClick: (i[4] ||= (e) => C(`go-tab`, `billing`)),
})),
]),
]),
createElementVNode(`div`, Oe, [
createElementVNode(`section`, ke, [
createElementVNode(
`button`,
{
type: `button`,
class: `card-head card-link`,
"aria-label": `打开访问控制`,
onClick: (i[5] ||= (e) => C(`go-tab`, `access`)),
},
[
...(i[26] ||= [
createElementVNode(`span`, null, `访问`, -1),
createElementVNode(
`i`,
{
class: `pi pi-angle-right`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
),
createElementVNode(`div`, Ae, [
createElementVNode(`div`, je, [
createVNode(
E,
{
url: s.info.image.iconUrl,
name: s.info.image.name,
size: 40,
},
null,
8,
[`url`, `name`],
),
createElementVNode(
`span`,
null,
toDisplayString(
unref(os_name_t)(s.info.image.name) || `—`,
),
1,
),
]),
createElementVNode(`div`, Me, [
(i[28] ||= createElementVNode(
`span`,
null,
`IP 地址`,
-1,
)),
createElementVNode(`b`, Ne, [
createTextVNode(
toDisplayString(s.info.ip || `—`) + ` `,
1,
),
createElementVNode(
`button`,
{
type: `button`,
class: normalizeClass([
`icon-action copy`,
{
ok: unref(Z) === `ip`,
},
]),
"aria-label":
unref(Z) === `ip`
? `IP 地址已复制`
: `复制 IP 地址`,
onClick: (i[6] ||= (e) => Q(s.info.ip, `ip`)),
},
[
...(i[27] ||= [
createElementVNode(
`i`,
{
class: `pi pi-copy`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
10,
Pe,
),
]),
]),
createElementVNode(`div`, Fe, [
(i[30] ||= createElementVNode(
`span`,
null,
`连接端口`,
-1,
)),
createElementVNode(`b`, Ie, [
createTextVNode(
toDisplayString(s.info.port || `未提供`) + ` `,
1,
),
s.info.port
? (openBlock(),
createElementBlock(
`button`,
{
key: 0,
type: `button`,
class: normalizeClass([
`icon-action copy`,
{
ok: unref(Z) === `port`,
},
]),
"aria-label":
unref(Z) === `port`
? `连接端口已复制`
: `复制连接端口`,
onClick: (i[7] ||= (e) =>
Q(String(s.info.port), `port`)),
},
[
...(i[29] ||= [
createElementVNode(
`i`,
{
class: `pi pi-copy`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
10,
Le,
))
: createCommentVNode(``, !0),
]),
]),
createElementVNode(`div`, Re, [
(i[32] ||= createElementVNode(
`span`,
null,
`用户名`,
-1,
)),
createElementVNode(`b`, ze, [
createTextVNode(
toDisplayString(s.info.username || `—`) + ` `,
1,
),
createElementVNode(
`button`,
{
type: `button`,
class: normalizeClass([
`icon-action copy`,
{
ok: unref(Z) === `user`,
},
]),
"aria-label":
unref(Z) === `user`
? `用户名已复制`
: `复制用户名`,
onClick: (i[8] ||= (e) =>
Q(s.info.username, `user`)),
},
[
...(i[31] ||= [
createElementVNode(
`i`,
{
class: `pi pi-copy`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
10,
Be,
),
]),
]),
createElementVNode(`div`, Ve, [
(i[34] ||= createElementVNode(
`span`,
null,
`密码`,
-1,
)),
createElementVNode(`b`, He, [
createTextVNode(
toDisplayString(
unref($) ? s.info.password : `••••••••`,
) + ` `,
1,
),
createElementVNode(
`button`,
{
type: `button`,
class: `icon-action`,
"aria-label": unref($)
? `隐藏密码`
: `显示密码`,
onClick: (i[9] ||= (e) =>
($.value = !unref($))),
},
[
createElementVNode(
`i`,
{
class: normalizeClass([
`pi`,
unref($) ? `pi-eye-slash` : `pi-eye`,
]),
"aria-hidden": `true`,
},
null,
2,
),
],
8,
Ue,
),
createElementVNode(
`button`,
{
type: `button`,
class: normalizeClass([
`icon-action copy`,
{
ok: unref(Z) === `pwd`,
},
]),
"aria-label":
unref(Z) === `pwd`
? `密码已复制`
: `复制密码`,
onClick: (i[10] ||= (e) =>
Q(s.info.password, `pwd`)),
},
[
...(i[33] ||= [
createElementVNode(
`i`,
{
class: `pi pi-copy`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
10,
We,
),
]),
]),
]),
createElementVNode(`div`, Ge, [
s.caps?.rescue
? (openBlock(),
createBlock(v, {
key: 0,
label: `救援模式`,
severity: `secondary`,
outlined: ``,
onClick: (i[11] ||= (e) =>
C(`access-action`, `rescue`)),
}))
: createCommentVNode(``, !0),
s.caps.reinstall
? (openBlock(),
createBlock(v, {
key: 1,
label: `重装系统`,
icon: `pi pi-wrench`,
onClick: (i[12] ||= (e) =>
C(`access-action`, `reinstall`)),
}))
: createCommentVNode(``, !0),
]),
]),
s.caps.disk === !1
? createCommentVNode(``, !0)
: (openBlock(),
createElementBlock(
`section`,
{
key: 0,
class: `card`,
"aria-busy": s.disksLoading,
},
[
createElementVNode(
`button`,
{
type: `button`,
class: `card-head card-link`,
"aria-label": `打开硬盘管理`,
onClick: (i[13] ||= (e) =>
C(`go-tab`, `disk`)),
},
[
...(i[35] ||= [
createElementVNode(
`span`,
null,
`硬盘`,
-1,
),
createElementVNode(
`i`,
{
class: `pi pi-angle-right`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
),
createElementVNode(`div`, qe, [
s.disksError
? (openBlock(),
createBlock(
a,
{
key: 0,
severity: `error`,
closable: !1,
},
{
default: withCtx(() => [
createTextVNode(
toDisplayString(s.disksError),
1,
),
s.disksLoaded
? (openBlock(),
createElementBlock(
Fragment,
{
key: 0,
},
[
createTextVNode(
`;以下为上次成功加载的数据。`,
),
],
64,
))
: createCommentVNode(``, !0),
createVNode(
v,
{
label: `重试`,
severity: `secondary`,
text: ``,
loading: s.disksLoading,
onClick: (i[14] ||= (e) =>
C(`refresh-disks`)),
},
null,
8,
[`loading`],
),
]),
_: 1,
},
))
: createCommentVNode(``, !0),
s.disksLoading
? (openBlock(),
createElementBlock(
`div`,
Je,
toDisplayString(
s.disksLoaded
? `正在刷新磁盘信息…`
: `正在加载磁盘信息…`,
),
1,
))
: createCommentVNode(``, !0),
s.info.disks.length
? (openBlock(!0),
createElementBlock(
Fragment,
{
key: 2,
},
renderList(
s.info.disks,
(t) => (
openBlock(),
createElementBlock(
`div`,
{
key: t.ident,
class: `disk-row`,
},
[
createElementVNode(
`i`,
{
class: normalizeClass(
t.type2 === `system`
? `pi pi-server`
: `pi pi-database`,
),
},
null,
2,
),
createElementVNode(
`span`,
Ye,
toDisplayString(t.name),
1,
),
createElementVNode(
`b`,
null,
toDisplayString(t.size) + ` GB`,
1,
),
],
)
),
),
128,
))
: s.disksLoaded
? (openBlock(),
createElementBlock(
`div`,
Xe,
`暂无磁盘信息`,
))
: createCommentVNode(``, !0),
]),
createVNode(v, {
label: `硬盘管理`,
severity: `secondary`,
outlined: ``,
fluid: ``,
onClick: (i[15] ||= (e) => C(`go-tab`, `disk`)),
}),
],
8,
Ke,
)),
]),
createElementVNode(`div`, Ze, [
createElementVNode(`section`, Qe, [
createElementVNode(
`button`,
{
type: `button`,
class: `card-head card-link`,
"aria-label": `查看计费信息`,
onClick: (i[16] ||= (e) => C(`go-tab`, `billing`)),
},
[
...(i[36] ||= [
createElementVNode(`span`, null, `计费`, -1),
createElementVNode(
`i`,
{
class: `pi pi-angle-right`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
),
createElementVNode(`div`, $e, [
createElementVNode(`div`, et, [
(i[37] ||= createElementVNode(
`span`,
null,
`计费方式`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(
s.info.billMethodName ||
s.host.billing_cycle_name ||
`—`,
),
1,
),
]),
createElementVNode(`div`, tt, [
(i[38] ||= createElementVNode(
`span`,
null,
`产品状态`,
-1,
)),
createVNode(
D,
{
state: s.productState,
power: s.info.powerStatus,
lifecycle: s.host.status,
},
null,
8,
[`state`, `power`, `lifecycle`],
),
]),
createElementVNode(`div`, nt, [
(i[39] ||= createElementVNode(
`span`,
null,
`续费金额`,
-1,
)),
createElementVNode(
`b`,
rt,
`¥` + toDisplayString(s.host.renew_amount),
1,
),
]),
createElementVNode(`div`, it, [
(i[40] ||= createElementVNode(
`span`,
null,
`到期时间`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(
(`formatTime` in n
? n.formatTime
: unref(dict_r))(s.host.due_time),
),
1,
),
]),
createElementVNode(`div`, at, [
(i[41] ||= createElementVNode(
`span`,
null,
`开通时间`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(
(`formatTime` in n
? n.formatTime
: unref(dict_r))(s.host.active_time),
),
1,
),
]),
]),
createVNode(v, {
label: `续费`,
icon: `pi pi-wallet`,
fluid: ``,
onClick: (i[17] ||= (e) => C(`go-tab`, `billing`)),
}),
]),
createElementVNode(`section`, ot, [
createElementVNode(
`button`,
{
type: `button`,
class: `card-head card-link`,
"aria-label": `打开网络与安全`,
onClick: (i[18] ||= (e) => C(`go-tab`, `network`)),
},
[
...(i[42] ||= [
createElementVNode(`span`, null, `网络`, -1),
createElementVNode(
`i`,
{
class: `pi pi-angle-right`,
"aria-hidden": `true`,
},
null,
-1,
),
]),
],
),
createElementVNode(`div`, st, [
createElementVNode(`div`, ct, [
(i[43] ||= createElementVNode(
`span`,
null,
`区域`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(unref(M).region || `—`),
1,
),
]),
createElementVNode(`div`, lt, [
(i[44] ||= createElementVNode(
`span`,
null,
`线路`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(unref(M).line || `—`),
1,
),
]),
unref(M).networkType
? (openBlock(),
createElementBlock(`div`, ut, [
(i[45] ||= createElementVNode(
`span`,
null,
`网络类型`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(unref(M).networkType),
1,
),
]))
: createCommentVNode(``, !0),
createElementVNode(`div`, dt, [
(i[46] ||= createElementVNode(
`span`,
null,
`带宽上限`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(
s.info.bw > 0 ? `${s.info.bw} Mbps` : `不限制`,
),
1,
),
]),
createElementVNode(`div`, ft, [
(i[47] ||= createElementVNode(
`span`,
null,
`防护峰值`,
-1,
)),
createElementVNode(
`b`,
null,
toDisplayString(
s.info.protect > 0
? `${s.info.protect} Gbps`
: `—`,
),
1,
),
]),
createElementVNode(`div`, pt, [
(i[48] ||= createElementVNode(
`span`,
null,
`IPv4 地址`,
-1,
)),
createElementVNode(
`b`,
mt,
toDisplayString(s.info.ip || `—`),
1,
),
]),
createElementVNode(
`div`,
{
class: `network-chart`,
"aria-busy": unref(U),
},
[
createElementVNode(`div`, gt, [
(i[49] ||= createTextVNode(`网络带宽`, -1)),
unref(G)
? (openBlock(),
createElementBlock(
`span`,
_t,
`(` +
toDisplayString(
unref(H)?.unit || `单位未提供`,
) +
`)`,
1,
))
: createCommentVNode(``, !0),
]),
createElementVNode(`div`, vt, [
unref(U)
? (openBlock(),
createElementBlock(
`div`,
yt,
`正在加载网络监控…`,
))
: unref(W)
? (openBlock(),
createBlock(
a,
{
key: 1,
severity: `warn`,
closable: !1,
},
{
default: withCtx(() => [
createTextVNode(
toDisplayString(unref(W)),
1,
),
createVNode(v, {
label: `重试`,
size: `small`,
severity: `secondary`,
text: ``,
onClick: Y,
}),
]),
_: 1,
},
))
: unref(G)
? (openBlock(),
createBlock(
Suspense,
{
key: 2,
},
{
fallback: withCtx(() => [
createVNode(w, {
height: `126px`,
}),
]),
default: withCtx(() => [
createVNode(
S,
{
option: unref(Ot),
height: 126,
},
null,
8,
[`option`],
),
]),
_: 1,
},
))
: (openBlock(),
createElementBlock(
`p`,
bt,
`暂无网络监控数据`,
)),
]),
],
8,
ht,
),
]),
createVNode(v, {
label: `网络管理`,
severity: `secondary`,
outlined: ``,
fluid: ``,
onClick: (i[19] ||= (e) => C(`go-tab`, `network`)),
}),
]),
]),
]),
(i[50] ||= createElementVNode(
`p`,
{
class: `hint`,
},
`如问题仍然存在,请通过提交工单与我们联系。`,
-1,
)),
])
);
}
);
},
}),
[[`__scopeId`, `data-v-fe24aa37`]],
),
{
__name: `InstanceOverview`,
},
);
export {};
export default A;
</script>