pig/pig-farm-controller-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化展示

Browse Source
This commit is contained in:
huang
2025-11-27 20:45:34 +08:00
parent 908af8eaa5
commit 7166d5049f
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/feed/RecipeCompareDialog.vue
View File

@@ -56,19 +56,21 @@
@close="compareError = null" @close="compareError = null"
/> />
</div> </div>
<div v-else-if="compareResult.length > 0"> <div v-else-if="compareResult.length > 0" class="table-wrapper">
<el-table :data="compareResult" style="width: 100%" border> <el-table :data="compareResult" style="width: 100%" border>
<el-table-column prop="nutrientName" label="营养素" width="150" fixed /> <el-table-column prop="nutrientName" label="营养素" fixed />
<el-table-column :label="currentRecipe.name" width="150"> <el-table-column :label="currentRecipe.name">
<template #default="scope"> <template #default="scope">
{{ scope.row.currentRecipeValue !== undefined ? scope.row.currentRecipeValue.toFixed(2) : '-' }} <span :style="{ color: scope.row.currentRecipeValue > scope.row.compareRecipeValue ? 'green' : (scope.row.currentRecipeValue < scope.row.compareRecipeValue ? 'red' : 'inherit') }">
{{ scope.row.currentRecipeValue !== undefined ? scope.row.currentRecipeValue.toFixed(2) : '-' }}
</span>
</template> </template>
</el-table-column> </el-table-column>
<template v-if="compareType === 'recipe'"> <template v-if="compareType === 'recipe'">
<el-table-column :label="compareRecipeName" width="150"> <el-table-column :label="compareRecipeName">
<template #default="scope"> <template #default="scope">
<span :style="{ color: scope.row.compareRecipeValue > scope.row.currentRecipeValue ? 'green' : 'inherit' }"> <span :style="{ color: scope.row.compareRecipeValue > scope.row.currentRecipeValue ? 'green' : (scope.row.compareRecipeValue < scope.row.currentRecipeValue ? 'red' : 'inherit') }">
{{ scope.row.compareRecipeValue !== undefined ? scope.row.compareRecipeValue.toFixed(2) : '-' }} {{ scope.row.compareRecipeValue !== undefined ? scope.row.compareRecipeValue.toFixed(2) : '-' }}
</span> </span>
</template> </template>
@@ -76,17 +78,17 @@
</template> </template>
<template v-else-if="compareType === 'pigType'"> <template v-else-if="compareType === 'pigType'">
<el-table-column :label="pigTypeName + ' (下限)'" width="150"> <el-table-column :label="pigTypeName + ' (下限)'">
<template #default="scope"> <template #default="scope">
{{ scope.row.minRequirement !== undefined ? scope.row.minRequirement.toFixed(2) : '-' }} {{ scope.row.minRequirement !== undefined ? scope.row.minRequirement.toFixed(2) : '-' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :label="pigTypeName + ' (上限)'" width="150"> <el-table-column :label="pigTypeName + ' (上限)'">
<template #default="scope"> <template #default="scope">
{{ scope.row.maxRequirement !== undefined ? scope.row.maxRequirement.toFixed(2) : '-' }} {{ scope.row.maxRequirement !== undefined ? scope.row.maxRequirement.toFixed(2) : '-' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="是否达标" width="100" align="center"> <el-table-column label="是否达标" align="center">
<template #default="scope"> <template #default="scope">
<el-icon v-if="scope.row.isMet" color="green"><Check /></el-icon> <el-icon v-if="scope.row.isMet" color="green"><Check /></el-icon>
<el-icon v-else color="red"><Close /></el-icon> <el-icon v-else color="red"><Close /></el-icon>
@@ -328,4 +330,8 @@ export default {
.dialog-footer { .dialog-footer {
text-align: right; text-align: right;
} }
.table-wrapper {
margin: 0 auto; /* 水平居中 */
max-width: 100%; /* 确保不超过父容器宽度 */
}
</style> </style>