style:生产计划/任务单排产生产报表-进度条样式修改

pull/1/head
黄伟杰 4 weeks ago
parent fb969128df
commit 2bd0fcde8d

@ -104,7 +104,21 @@
sortable /> sortable />
<el-table-column :label="t('ProductionPlan.Plan.tableFinishNumberColumn')" align="center" prop="wangongNumber" <el-table-column :label="t('ProductionPlan.Plan.tableFinishNumberColumn')" align="center" prop="wangongNumber"
sortable /> sortable />
<el-table-column :label="t('ProductionPlan.Plan.tablePassRateColumn')" align="center" prop="passRate" sortable /> <el-table-column :label="t('ProductionPlan.Plan.tablePassRateColumn')" align="center" min-width="60px" sortable="custom">
<template #default="scope">
<div class="pass-rate-cell">
<el-progress
type="circle"
:percentage="Number(scope.row.passRate ?? 0)"
:width="40"
:stroke-width="4"
:show-text="false"
:color="Number(scope.row.passRate ?? 0) === 100 ? '#67c23a' : undefined"
/>
<span class="pass-rate-text">{{ Number(scope.row.passRate ?? 0) }}%</span>
</div>
</template>
</el-table-column>
<!-- <el-table-column label="热压数量" align="center" prop="reyaNumber" /> --> <!-- <el-table-column label="热压数量" align="center" prop="reyaNumber" /> -->
<el-table-column :label="t('ProductionPlan.Plan.tableStatusColumn')" align="center" prop="status" sortable> <el-table-column :label="t('ProductionPlan.Plan.tableStatusColumn')" align="center" prop="status" sortable>
<template #default="scope"> <template #default="scope">
@ -543,3 +557,23 @@ const handleTabClick = (tab: TabsPaneContext) => {
handleQuery() handleQuery()
} }
</script> </script>
<style scoped>
.pass-rate-cell {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.pass-rate-cell :deep(.el-progress-circle) {
display: flex;
align-items: center;
justify-content: center;
}
.pass-rate-text {
font-size: 12px;
white-space: nowrap;
}
</style>

@ -123,8 +123,10 @@
:percentage="getProductionProgressPercent(scope.row)" :percentage="getProductionProgressPercent(scope.row)"
:width="40" :width="40"
:stroke-width="4" :stroke-width="4"
:show-text="false"
:color="getProductionProgressPercent(scope.row) === 100 ? '#67c23a' : undefined" :color="getProductionProgressPercent(scope.row) === 100 ? '#67c23a' : undefined"
/> />
<span class="production-progress-text">{{ getProductionProgressPercent(scope.row) }}%</span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -276,6 +278,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px;
} }
.production-progress-cell :deep(.el-progress-circle) { .production-progress-cell :deep(.el-progress-circle) {
@ -284,11 +287,8 @@ onMounted(() => {
justify-content: center; justify-content: center;
} }
.production-progress-cell :deep(.el-progress__text) { .production-progress-text {
display: flex; font-size: 12px;
align-items: center; white-space: nowrap;
justify-content: center;
font-size: 10px !important;
min-width: auto !important;
} }
</style> </style>

@ -93,8 +93,10 @@ v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" hi
:percentage="getProductionProgressPercent(scope.row)" :percentage="getProductionProgressPercent(scope.row)"
:width="40" :width="40"
:stroke-width="4" :stroke-width="4"
:show-text="false"
:color="getProductionProgressPercent(scope.row) === 100 ? '#67c23a' : undefined" :color="getProductionProgressPercent(scope.row) === 100 ? '#67c23a' : undefined"
/> />
<span class="production-progress-text">{{ getProductionProgressPercent(scope.row) }}%</span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -273,6 +275,7 @@ const handleTabClick = (tab: TabsPaneContext) => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px;
} }
.production-progress-cell :deep(.el-progress-circle) { .production-progress-cell :deep(.el-progress-circle) {
@ -281,11 +284,8 @@ const handleTabClick = (tab: TabsPaneContext) => {
justify-content: center; justify-content: center;
} }
.production-progress-cell :deep(.el-progress__text) { .production-progress-text {
display: flex; font-size: 12px;
align-items: center; white-space: nowrap;
justify-content: center;
font-size: 10px !important;
min-width: auto !important;
} }
</style> </style>

Loading…
Cancel
Save