luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加停机断点
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 5m1s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-28 09:38:52 +08:00
parent af3f38aba0
commit ffdc6e2bbb
2 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/asset-management/asset-information/components/CurrentPackageCard.vue
View File

@@ -95,23 +95,30 @@
}}</span>
</span>
</div>
<ElProgress
:percentage="
getUsageProgress(
currentPackage.virtual_used_mb || 0,
currentPackage.virtual_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
<div class="progress-wrapper">
<ElProgress
:percentage="
getUsageProgress(
currentPackage.virtual_used_mb || 0,
currentPackage.virtual_total_mb || 0
)
)
"
:stroke-width="10"
/>
"
:color="
getProgressColorByPercentage(
getUsageProgress(
currentPackage.virtual_used_mb || 0,
currentPackage.virtual_total_mb || 0
)
)
"
:stroke-width="10"
/>
<div
class="breakpoint-marker"
:style="{ left: getBreakpointPosition(currentPackage) + '%' }"
:title="`停机阈值/真流量总量: ${formatDataSize(currentPackage.virtual_total_mb || 0)} / ${formatDataSize(currentPackage.real_total_mb || 0)}`"
></div>
</div>
</div>
</div>
</template>
@@ -262,6 +269,11 @@
}
return typeMap[type || ''] || '-'
}
const getBreakpointPosition = (pkg: PackageInfo) => {
if (!pkg.real_total_mb || pkg.real_total_mb === 0) return 0
return (pkg.virtual_total_mb / pkg.real_total_mb) * 100
}
</script>
<style scoped lang="scss">
@@ -355,6 +367,22 @@
margin-bottom: 4px;
}
}
.progress-wrapper {
position: relative;
.breakpoint-marker {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background-color: var(--el-color-danger);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 1;
cursor: pointer;
}
}
}
.package-info-table {

54
src/views/asset-management/asset-information/components/PackageListCard.vue
View File

@@ -94,23 +94,30 @@
>停机阈值: {{ formatDataSize(scope.row.virtual_total_mb || 0) }}</span
>
</div>
<ElProgress
style="margin-top: 4px"
:percentage="
getUsageProgress(
scope.row.virtual_used_mb || 0,
scope.row.virtual_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
<div class="progress-wrapper">
<ElProgress
style="margin-top: 4px"
:percentage="
getUsageProgress(
scope.row.virtual_used_mb || 0,
scope.row.virtual_total_mb || 0
)
)
"
/>
"
:color="
getProgressColorByPercentage(
getUsageProgress(
scope.row.virtual_used_mb || 0,
scope.row.virtual_total_mb || 0
)
)
"
/>
<div
class="breakpoint-marker"
:style="{ left: getBreakpointPosition(scope.row) + '%' }"
:title="`停机阈值/真流量总量: ${formatDataSize(scope.row.virtual_total_mb || 0)} / ${formatDataSize(scope.row.real_total_mb || 0)}`"
></div>
</div>
</template>
<template v-else>
<div class="progress-text">
@@ -340,6 +347,11 @@
getProgressColorByPercentage
} = useAssetFormatters()
const getBreakpointPosition = (pkg: PackageInfo) => {
if (!pkg.real_total_mb || pkg.real_total_mb === 0) return 0
return (pkg.virtual_total_mb / pkg.real_total_mb) * 100
}
// 套餐名称点击
const handlePackageNameClick = (packageRow: PackageInfo) => {
if (!hasAuth('package_usage:daily_records')) {
@@ -443,6 +455,22 @@
color: var(--el-text-color-secondary);
}
}
.progress-wrapper {
position: relative;
.breakpoint-marker {
position: absolute;
top: 50%;
width: 8px;
height: 8px;
background-color: var(--el-color-danger);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 1;
cursor: pointer;
}
}
}
}
}