644 lines
26 KiB
Vue
644 lines
26 KiB
Vue
<script>
|
||
/** 流量展示适配层：一般模块使用父级 flow，快快云按实例独立请求并经 instance-data 统一口径。 */
|
||
import "~/assets/styles/InstanceTraffic.CyyEAXl3.css";
|
||
import { toDisplayString } from "vue";
|
||
import { onMounted } from "vue";
|
||
import { normalizeClass } from "vue";
|
||
import { onBeforeUnmount } from "vue";
|
||
import { watch } 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 { 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 message from "primevue/message";
|
||
import { d as instance_data_d } from "~/lib/instance-data.js";
|
||
import { n as instance_data_n } from "~/lib/instance-data.js";
|
||
import progressbar from "primevue/progressbar";
|
||
var w = [`aria-busy`],
|
||
T = {
|
||
key: 0,
|
||
class: `traffic-progress`,
|
||
},
|
||
E = {
|
||
class: `traffic-row`,
|
||
},
|
||
D = {
|
||
class: `traffic-row`,
|
||
},
|
||
O = {
|
||
class: `traffic-row`,
|
||
},
|
||
k = {
|
||
class: `traffic-row`,
|
||
},
|
||
A = {
|
||
key: 1,
|
||
class: `traffic-row`,
|
||
},
|
||
j = {
|
||
key: 2,
|
||
class: `traffic-row`,
|
||
},
|
||
M = {
|
||
key: 3,
|
||
class: `traffic-row`,
|
||
},
|
||
N = {
|
||
key: 4,
|
||
class: `traffic-actions`,
|
||
},
|
||
P = {
|
||
key: 5,
|
||
class: `traffic-note`,
|
||
role: `status`,
|
||
},
|
||
F = {
|
||
key: 6,
|
||
class: `traffic-error`,
|
||
},
|
||
I = {
|
||
key: 1,
|
||
class: `traffic-note`,
|
||
role: `status`,
|
||
},
|
||
L = {
|
||
key: 2,
|
||
class: `traffic-error`,
|
||
},
|
||
R = {
|
||
key: 0,
|
||
class: `traffic-progress`,
|
||
},
|
||
z = {
|
||
class: `traffic-row`,
|
||
},
|
||
B = {
|
||
class: `traffic-row`,
|
||
},
|
||
V = {
|
||
class: `traffic-row`,
|
||
},
|
||
H = {
|
||
key: 1,
|
||
class: `traffic-row`,
|
||
},
|
||
U = {
|
||
key: 2,
|
||
class: `traffic-row`,
|
||
},
|
||
W = {
|
||
key: 3,
|
||
class: `traffic-note`,
|
||
},
|
||
G = Object.assign(
|
||
_plugin_vue_export_helper_t(
|
||
defineComponent({
|
||
__name: `InstanceTraffic`,
|
||
props: {
|
||
module: {},
|
||
hostId: {},
|
||
raw: {},
|
||
flow: {},
|
||
loading: {
|
||
type: Boolean,
|
||
},
|
||
failed: {
|
||
type: Boolean,
|
||
},
|
||
layout: {},
|
||
},
|
||
setup(m) {
|
||
let y = m,
|
||
G = useApi(),
|
||
K = ref(null),
|
||
q = ref(!1),
|
||
J = ref(``),
|
||
Y = computed(() =>
|
||
instance_data_d(
|
||
y.module,
|
||
y.raw,
|
||
y.module === `kky_ecs` ? K.value : y.flow,
|
||
),
|
||
),
|
||
X = 0,
|
||
Z = !1;
|
||
async function Q() {
|
||
// unavailable 是统计不可用，不等同于“未用流量”；请求响应绑定模块、实例和代次。
|
||
if (Z) return;
|
||
let e = ++X,
|
||
t = y.hostId,
|
||
n = y.module,
|
||
r = () => !Z && e === X && t === y.hostId && n === y.module;
|
||
if (
|
||
((K.value = null),
|
||
(J.value = ``),
|
||
(q.value = !1),
|
||
n === `kky_ecs` && t)
|
||
) {
|
||
q.value = !0;
|
||
try {
|
||
let e = await G.get(`/kky_ecs/${t}/traffic`);
|
||
r() &&
|
||
((K.value = e),
|
||
e.usage_status === `unavailable` &&
|
||
(J.value =
|
||
e.usage_error || `流量统计暂不可用，请稍后重试`));
|
||
} catch (e) {
|
||
r() &&
|
||
(J.value =
|
||
e instanceof Error ? e.message : `流量数据获取失败`);
|
||
} finally {
|
||
r() && (q.value = !1);
|
||
}
|
||
}
|
||
}
|
||
return (
|
||
onMounted(Q),
|
||
watch(() => [y.hostId, y.module, y.raw], Q, {
|
||
flush: `sync`,
|
||
}),
|
||
onBeforeUnmount(() => {
|
||
((Z = !0), X++);
|
||
}),
|
||
(t, r) => {
|
||
let i = progressbar,
|
||
a = button,
|
||
c = message;
|
||
return (
|
||
openBlock(),
|
||
createElementBlock(
|
||
`div`,
|
||
{
|
||
class: normalizeClass([
|
||
`traffic-summary`,
|
||
{
|
||
"traffic-table": m.layout === `table`,
|
||
},
|
||
]),
|
||
"aria-busy": m.module === `kky_ecs` ? unref(q) : m.loading,
|
||
},
|
||
[
|
||
m.module === `kky_ecs`
|
||
? (openBlock(),
|
||
createElementBlock(
|
||
Fragment,
|
||
{
|
||
key: 0,
|
||
},
|
||
[
|
||
unref(Y).quota && unref(Y).quota.percent !== null
|
||
? (openBlock(),
|
||
createElementBlock(`div`, T, [
|
||
createVNode(
|
||
i,
|
||
{
|
||
value: unref(Y).quota.percent,
|
||
showValue: !1,
|
||
"aria-label": `当前流量包使用进度`,
|
||
style: {
|
||
height: `6px`,
|
||
},
|
||
},
|
||
null,
|
||
8,
|
||
[`value`],
|
||
),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
createElementVNode(`div`, E, [
|
||
(r[0] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`已用流量`,
|
||
-1,
|
||
)),
|
||
createElementVNode(`b`, null, [
|
||
createTextVNode(
|
||
toDisplayString(
|
||
unref(Y).quota
|
||
? unref(instance_data_n)(
|
||
unref(Y).quota.used,
|
||
)
|
||
: `—`,
|
||
),
|
||
1,
|
||
),
|
||
unref(Y).quota &&
|
||
unref(Y).quota.percent !== null
|
||
? (openBlock(),
|
||
createElementBlock(
|
||
Fragment,
|
||
{
|
||
key: 0,
|
||
},
|
||
[
|
||
createTextVNode(
|
||
`（` +
|
||
toDisplayString(
|
||
unref(Y).quota.percent.toFixed(1),
|
||
) +
|
||
`%）`,
|
||
1,
|
||
),
|
||
],
|
||
64,
|
||
))
|
||
: createCommentVNode(``, !0),
|
||
]),
|
||
]),
|
||
createElementVNode(`div`, D, [
|
||
(r[1] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`总流量`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(Y).quota
|
||
? unref(instance_data_n)(
|
||
unref(Y).quota.total,
|
||
)
|
||
: unref(Y).quotaLoaded
|
||
? unref(Y).metered
|
||
? unref(Y).monthlyQuota
|
||
? `暂无有效流量包`
|
||
: `无固定额度`
|
||
: `不限量`
|
||
: `—`,
|
||
),
|
||
1,
|
||
),
|
||
]),
|
||
createElementVNode(`div`, O, [
|
||
(r[2] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`剩余流量`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(Y).quota
|
||
? unref(instance_data_n)(
|
||
unref(Y).quota.remaining,
|
||
)
|
||
: unref(Y).quotaLoaded
|
||
? unref(Y).metered
|
||
? `无可抵扣流量`
|
||
: `不限量`
|
||
: `—`,
|
||
),
|
||
1,
|
||
),
|
||
]),
|
||
createElementVNode(`div`, k, [
|
||
(r[3] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`网络计费`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(Y).metered
|
||
? `按流量计费 · 按小时结算`
|
||
: `按带宽计费`,
|
||
),
|
||
1,
|
||
),
|
||
]),
|
||
unref(Y).metered
|
||
? (openBlock(),
|
||
createElementBlock(`div`, A, [
|
||
(r[4] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`超额流量单价`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(Y).unitPrice === null
|
||
? `—`
|
||
: `¥${unref(Y).unitPrice.toFixed(2)} / GB`,
|
||
),
|
||
1,
|
||
),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
unref(Y).metered && unref(Y).monthlyQuota !== null
|
||
? (openBlock(),
|
||
createElementBlock(`div`, j, [
|
||
(r[5] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`每月赠送额度`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(instance_data_n)(
|
||
unref(Y).monthlyQuota,
|
||
),
|
||
),
|
||
1,
|
||
),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
!unref(Y).quota &&
|
||
unref(Y).packageRemaining !== null
|
||
? (openBlock(),
|
||
createElementBlock(`div`, M, [
|
||
(r[6] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`流量包剩余`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(instance_data_n)(
|
||
unref(Y).packageRemaining,
|
||
),
|
||
),
|
||
1,
|
||
),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
m.hostId && !unref(J)
|
||
? (openBlock(),
|
||
createElementBlock(`div`, N, [
|
||
createVNode(
|
||
a,
|
||
{
|
||
label: `刷新流量数据`,
|
||
icon: `pi pi-refresh`,
|
||
size: `small`,
|
||
severity: `secondary`,
|
||
text: ``,
|
||
loading: unref(q),
|
||
onClick: Q,
|
||
},
|
||
null,
|
||
8,
|
||
[`loading`],
|
||
),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
unref(q)
|
||
? (openBlock(),
|
||
createElementBlock(`p`, P, `正在加载流量数据…`))
|
||
: unref(J)
|
||
? (openBlock(),
|
||
createElementBlock(`div`, F, [
|
||
createVNode(
|
||
c,
|
||
{
|
||
severity: `warn`,
|
||
closable: !1,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
createTextVNode(
|
||
toDisplayString(unref(J)),
|
||
1,
|
||
),
|
||
]),
|
||
_: 1,
|
||
},
|
||
),
|
||
createVNode(a, {
|
||
label: `重试`,
|
||
size: `small`,
|
||
severity: `secondary`,
|
||
outlined: ``,
|
||
onClick: Q,
|
||
}),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
],
|
||
64,
|
||
))
|
||
: m.loading
|
||
? (openBlock(),
|
||
createElementBlock(`p`, I, `正在加载流量数据…`))
|
||
: m.failed
|
||
? (openBlock(),
|
||
createElementBlock(`div`, L, [
|
||
createVNode(
|
||
c,
|
||
{
|
||
severity: `warn`,
|
||
closable: !1,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
...(r[7] ||= [
|
||
createTextVNode(
|
||
`流量数据获取失败，请刷新后重试。`,
|
||
-1,
|
||
),
|
||
]),
|
||
]),
|
||
_: 1,
|
||
},
|
||
),
|
||
]))
|
||
: (openBlock(),
|
||
createElementBlock(
|
||
Fragment,
|
||
{
|
||
key: 3,
|
||
},
|
||
[
|
||
unref(Y).percent === null
|
||
? createCommentVNode(``, !0)
|
||
: (openBlock(),
|
||
createElementBlock(`div`, R, [
|
||
createVNode(
|
||
i,
|
||
{
|
||
value: unref(Y).percent,
|
||
showValue: !1,
|
||
style: {
|
||
height: `6px`,
|
||
},
|
||
},
|
||
null,
|
||
8,
|
||
[`value`],
|
||
),
|
||
])),
|
||
createElementVNode(`div`, z, [
|
||
(r[8] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`已用流量`,
|
||
-1,
|
||
)),
|
||
createElementVNode(`b`, null, [
|
||
createTextVNode(
|
||
toDisplayString(
|
||
unref(instance_data_n)(unref(Y).used),
|
||
),
|
||
1,
|
||
),
|
||
unref(Y).percent === null
|
||
? createCommentVNode(``, !0)
|
||
: (openBlock(),
|
||
createElementBlock(
|
||
Fragment,
|
||
{
|
||
key: 0,
|
||
},
|
||
[
|
||
createTextVNode(
|
||
`（` +
|
||
toDisplayString(
|
||
unref(Y).percent.toFixed(1),
|
||
) +
|
||
`%）`,
|
||
1,
|
||
),
|
||
],
|
||
64,
|
||
)),
|
||
]),
|
||
]),
|
||
createElementVNode(`div`, B, [
|
||
(r[9] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`总流量`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(Y).unlimited
|
||
? `不限量`
|
||
: unref(instance_data_n)(
|
||
unref(Y).total,
|
||
),
|
||
),
|
||
1,
|
||
),
|
||
]),
|
||
createElementVNode(`div`, V, [
|
||
(r[10] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`剩余流量`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(Y).unlimited
|
||
? `不限量`
|
||
: unref(instance_data_n)(
|
||
unref(Y).remaining,
|
||
),
|
||
),
|
||
1,
|
||
),
|
||
]),
|
||
unref(Y).packageRemaining === null
|
||
? createCommentVNode(``, !0)
|
||
: (openBlock(),
|
||
createElementBlock(`div`, H, [
|
||
(r[11] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`流量包剩余`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(
|
||
unref(instance_data_n)(
|
||
unref(Y).packageRemaining,
|
||
),
|
||
),
|
||
1,
|
||
),
|
||
])),
|
||
unref(Y).reset
|
||
? (openBlock(),
|
||
createElementBlock(`div`, U, [
|
||
(r[12] ||= createElementVNode(
|
||
`span`,
|
||
null,
|
||
`重置时间`,
|
||
-1,
|
||
)),
|
||
createElementVNode(
|
||
`b`,
|
||
null,
|
||
toDisplayString(unref(Y).reset),
|
||
1,
|
||
),
|
||
]))
|
||
: createCommentVNode(``, !0),
|
||
unref(Y).used === null
|
||
? (openBlock(),
|
||
createElementBlock(
|
||
`p`,
|
||
W,
|
||
toDisplayString(
|
||
unref(Y).metered
|
||
? `按流量计费，当前用量暂未返回。`
|
||
: `当前用量暂未返回。`,
|
||
),
|
||
1,
|
||
))
|
||
: createCommentVNode(``, !0),
|
||
],
|
||
64,
|
||
)),
|
||
],
|
||
10,
|
||
w,
|
||
)
|
||
);
|
||
}
|
||
);
|
||
},
|
||
}),
|
||
[[`__scopeId`, `data-v-484c7b21`]],
|
||
),
|
||
{
|
||
__name: `InstanceTraffic`,
|
||
},
|
||
);
|
||
export {};
|
||
export default G;
|
||
</script>
|