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>
</span> </span>
</div> </div>
<ElProgress <div class="progress-wrapper">
:percentage=" <ElProgress
getUsageProgress( :percentage="
currentPackage.virtual_used_mb || 0,
currentPackage.virtual_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress( getUsageProgress(
currentPackage.virtual_used_mb || 0, currentPackage.virtual_used_mb || 0,
currentPackage.virtual_total_mb || 0 currentPackage.virtual_total_mb || 0
) )
) "
" :color="
:stroke-width="10" 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>
</div> </div>
</template> </template>
@@ -262,6 +269,11 @@
} }
return typeMap[type || ''] || '-' 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -355,6 +367,22 @@
margin-bottom: 4px; 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 { .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 >停机阈值: {{ formatDataSize(scope.row.virtual_total_mb || 0) }}</span
> >
</div> </div>
<ElProgress <div class="progress-wrapper">
style="margin-top: 4px" <ElProgress
:percentage=" style="margin-top: 4px"
getUsageProgress( :percentage="
scope.row.virtual_used_mb || 0,
scope.row.virtual_total_mb || 0
)
"
:color="
getProgressColorByPercentage(
getUsageProgress( getUsageProgress(
scope.row.virtual_used_mb || 0, scope.row.virtual_used_mb || 0,
scope.row.virtual_total_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>
<template v-else> <template v-else>
<div class="progress-text"> <div class="progress-text">
@@ -340,6 +347,11 @@
getProgressColorByPercentage getProgressColorByPercentage
} = useAssetFormatters() } = 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) => { const handlePackageNameClick = (packageRow: PackageInfo) => {
if (!hasAuth('package_usage:daily_records')) { if (!hasAuth('package_usage:daily_records')) {
@@ -443,6 +455,22 @@
color: var(--el-text-color-secondary); 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;
}
}
} }
} }
} }