renkang/ranking_list_h5
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加了 累计出餐 显示

Browse Source
This commit is contained in:
17792275749
2026-02-06 13:54:56 +08:00
parent 4e8ff8d777
commit 8d16895719
3 changed files with 81 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/mealSurplusInformation/danger_name_icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 975 B

src/assets/images/mealSurplusInformation/warning_name_icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 941 B

src/views/mealSurplusInformation/mealSurplusInformation.vue
+81 -29
View File
@@ -12,6 +12,7 @@
<div class="content_l_list_name">
<div></div>
<div>{{ item.foodName }}</div>
<div :class="'content_l_list_name_' + item.class"></div>
</div>
<div class="content_l_list_margin">
当前余量
@@ -25,16 +26,30 @@
</div>
<div class="content_l_list_status">
<template v-if="item.class === 'normal'">
<div class="content_l_list_status_icon"></div>
<div class="content_l_list_status_text">累计出餐</div>
<div class="content_l_list_status_">
<div class="content_l_list_status_text">累计出餐</div>
<div class="content_l_list_status_value">
<countTo
:endVal="item.foodWeight_kg"
separator=""
:decimals="2"
:duration="300"
/>
kg
</div>
</div>
</template>
<template v-if="item.class === 'warning'">
<div class="content_l_list_status_icon"></div>
<div class="content_l_list_status_text">餐品制作中</div>
<div class="content_l_list_status_">
<div class="content_l_list_status_icon"></div>
<div class="content_l_list_status_text">餐品制作中</div>
</div>
</template>
<template v-if="item.class === 'danger'">
<div class="content_l_list_status_icon"></div>
<div class="content_l_list_status_text">低于阈值，请补餐</div>
<div class="content_l_list_status_">
<div class="content_l_list_status_icon"></div>
<div class="content_l_list_status_text">低于阈值，请补餐</div>
</div>
</template>
</div>
<div class="content_l_list_progress">
@@ -177,6 +192,7 @@ export default {
if (item.marginWeight < item.dangerWeight) {
item.class = "danger";
}
item.foodWeight_kg = Math.round(item.foodWeight / 10) / 100;
item.marginWeight_kg = Math.round(item.marginWeight / 10) / 100;
item.progress = (1 - item.marginWeight / item.foodWeight) * 100 + '%';
});
@@ -296,6 +312,14 @@ export default {
line-height: 24px;
font-size: 20px;
}
> div:nth-of-type(3) {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: left bottom;
background-size: contain;
}
}
.content_l_list_margin {
@@ -313,28 +337,39 @@ export default {
}
.content_l_list_status {
width: 200px;
width: 100%;
height: 36px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border-radius: 6px;
margin: 0 auto 16px;
margin-bottom: 16px;
.content_l_list_status_icon {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 10px;
}
.content_l_list_status_ {
height: 36px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border-radius: 6px;
margin: 0 auto;
.content_l_list_status_text {
height: 16px;
font-size: 16px;
line-height: 16px;
.content_l_list_status_icon {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 10px;
}
.content_l_list_status_text {
height: 16px;
font-size: 16px;
line-height: 16px;
}
.content_l_list_status_value {
height: 14px;
font-size: 14px;
line-height: 14px;
}
}
}
@@ -362,6 +397,8 @@ export default {
> div:nth-of-type(2) {
color: #FFFFFF;
}
.content_l_list_name_normal {}
}
.content_l_list_margin {
@@ -372,10 +409,16 @@ export default {
}
}
.content_l_list_status {
.content_l_list_status_ {
.content_l_list_status_text {
flex: 1;
color: #869CC5;
}
.content_l_list_status_value {
color: #869CC5;
font-weight: bold;
}
}
.content_l_list_progress {
@@ -399,6 +442,10 @@ export default {
> div:nth-of-type(2) {
color: #F6BD9E;
}
.content_l_list_name_warning {
background-image: url("@/assets/images/mealSurplusInformation/warning_name_icon.png");
}
}
.content_l_list_margin {
@@ -409,7 +456,8 @@ export default {
}
}
.content_l_list_status {
.content_l_list_status_ {
width: 200px;
background-color: #5A2F00;
.content_l_list_status_icon {
@@ -442,6 +490,10 @@ export default {
> div:nth-of-type(2) {
color: #FFC8C8;
}
.content_l_list_name_danger {
background-image: url("@/assets/images/mealSurplusInformation/danger_name_icon.png");
}
}
.content_l_list_margin {
@@ -452,7 +504,8 @@ export default {
}
}
.content_l_list_status {
.content_l_list_status_ {
width: 200px;
background-color: #5A0A0A;
.content_l_list_status_icon {
@@ -519,7 +572,6 @@ export default {
.content_r_content_table {
width: 100%;
height: 50%;
display: flex;
flex-flow: column;