Claude Opus 4.7
@@ -0,0 +1,656 @@
|
||||
<template>
|
||||
<div id="mealSurplusInformation">
|
||||
<div class="header">
|
||||
<div class="times">{{ times }}</div>
|
||||
<div class="title">餐厅后厨智能看板</div>
|
||||
<div class="meal">当前餐次：{{ dinnerType }} {{ mealTime }}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content_l">
|
||||
<template v-for="item in nutritionFoodList">
|
||||
<div :class="['content_l_list', item.class]">
|
||||
<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">
|
||||
当前余量
|
||||
<countTo
|
||||
:endVal="item.marginWeight_kg"
|
||||
separator=""
|
||||
:decimals="2"
|
||||
:duration="300"
|
||||
/>
|
||||
kg
|
||||
</div>
|
||||
<div class="content_l_list_status">
|
||||
<template v-if="item.class === 'normal'">
|
||||
<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_">
|
||||
<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_">
|
||||
<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">
|
||||
<div :style="{'width': item.progress}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="item in 16 - nutritionFoodList.length">
|
||||
<div class="content_l_list noData">
|
||||
<div></div>
|
||||
<div>无开餐数据</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="content_r">
|
||||
<div class="content_r_title">
|
||||
<div></div>
|
||||
<div>当餐菜品生产计划</div>
|
||||
</div>
|
||||
<div class="content_r_content">
|
||||
<div class="content_r_content_table">
|
||||
<div class="content_r_content_table_head">
|
||||
<div>未制作</div>
|
||||
<div style="color: #F8A45A">{{ recipeFoodNotMadeList.length }}</div>
|
||||
</div>
|
||||
<div class="content_r_content_table_body">
|
||||
<template v-for="item in recipeFoodNotMadeList">
|
||||
<div style="color: #FFFFFF">
|
||||
<div>{{ item.foodName }}</div>
|
||||
<div>{{ item.foodWeight_kg }}kg</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_r_content_table">
|
||||
<div class="content_r_content_table_head">
|
||||
<div>已制作</div>
|
||||
<div style="color: #5AF186">{{ recipeFoodProducedList.length }}</div>
|
||||
</div>
|
||||
<div class="content_r_content_table_body">
|
||||
<template v-for="item in recipeFoodProducedList">
|
||||
<div style="color: #869CC5">
|
||||
<div>{{ item.foodName }}</div>
|
||||
<div>{{ item.foodWeight_kg }}kg</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import countTo from "vue-count-to";
|
||||
import {getCurrentTime} from "@/utils/times";
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
|
||||
export default {
|
||||
name: "mealSurplusInformation",
|
||||
components: {
|
||||
countTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
times: getCurrentTime(),
|
||||
|
||||
dinnerType: "", // 餐次
|
||||
mealTime: "", // 餐次的时间
|
||||
|
||||
nutritionFoodList: [], // 菜品数据
|
||||
recipeFoodNotMadeList: [], // 食谱菜品未制作
|
||||
recipeFoodProducedList: [], // 食谱菜品已制作
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getKitchenInfo();
|
||||
},
|
||||
methods: {
|
||||
getKitchenInfo() {
|
||||
var params = {};
|
||||
var _this = this;
|
||||
|
||||
httpRequest("GET", "http://me.dm.yixiong-tech.com/terminal/neglect/large-screen/kitchen/info", params, {
|
||||
"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"
|
||||
}).then(function(res) {
|
||||
_this.dinnerType = "";
|
||||
_this.mealTime = "";
|
||||
_this.nutritionFoodList = [];
|
||||
_this.recipeFoodNotMadeList = [];
|
||||
_this.recipeFoodProducedList = [];
|
||||
|
||||
if (res && res.code === "00000" && res.data) {
|
||||
_this.dinnerType = res.data.dinnerType;
|
||||
|
||||
if (res.data.mealTimeStart && res.data.mealTimeEnd) {
|
||||
_this.mealTime = res.data.mealTimeStart + ' - ' + res.data.mealTimeEnd;
|
||||
}
|
||||
|
||||
// 处理营养菜品列表
|
||||
if (res.data.nutritionFoodList && res.data.nutritionFoodList.length) {
|
||||
res.data.nutritionFoodList.map(function(item) {
|
||||
if (item.marginWeight >= item.warningWeight) {
|
||||
item.class = "normal";
|
||||
} else if (item.marginWeight >= item.dangerWeight) {
|
||||
item.class = "warning";
|
||||
} else {
|
||||
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 + '%';
|
||||
return item;
|
||||
});
|
||||
_this.nutritionFoodList = res.data.nutritionFoodList;
|
||||
}
|
||||
|
||||
// 处理已出菜品列表
|
||||
if (res.data.recipeFoodNotMadeList && res.data.recipeFoodNotMadeList.length) {
|
||||
res.data.recipeFoodNotMadeList.map(function(item) {
|
||||
item.foodWeight_kg = Math.round(item.foodWeight / 10) / 100;
|
||||
return item;
|
||||
});
|
||||
_this.recipeFoodNotMadeList = res.data.recipeFoodNotMadeList;
|
||||
}
|
||||
if (res.data.recipeFoodProducedList && res.data.recipeFoodProducedList.length) {
|
||||
res.data.recipeFoodProducedList.map(function(item) {
|
||||
item.foodWeight_kg = Math.round(item.foodWeight / 10) / 100;
|
||||
return item;
|
||||
});
|
||||
_this.recipeFoodProducedList = res.data.recipeFoodProducedList;
|
||||
}
|
||||
}
|
||||
|
||||
// 模拟 finally 效果：成功时触发下一次轮询
|
||||
setTimeout(function() {
|
||||
_this.getKitchenInfo();
|
||||
}, 10000);
|
||||
}).catch(function(err) {
|
||||
console.error("H5 Log: 请求出错", err);
|
||||
// 模拟 finally 效果：失败时也触发下一次轮询，保证页面不卡死
|
||||
setTimeout(function() {
|
||||
_this.getKitchenInfo();
|
||||
}, 10000);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.timer = setInterval(() => {
|
||||
this.times = getCurrentTime();
|
||||
}, 1000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
#mealSurplusInformation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
padding: 0 24px 24px;
|
||||
box-sizing: border-box;
|
||||
font-family: PingFangSC-Medium;
|
||||
background-color: #051836;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.times {
|
||||
color: #869CC5;
|
||||
height: 96px;
|
||||
font-size: 18px;
|
||||
line-height: 96px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #FFFFFF;
|
||||
height: 96px;
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
line-height: 96px;
|
||||
}
|
||||
|
||||
.meal {
|
||||
color: #869CC5;
|
||||
height: 96px;
|
||||
font-size: 18px;
|
||||
line-height: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.content_l {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
.content_l_list {
|
||||
width: 336px;
|
||||
height: 222px;
|
||||
margin-right: 24px;
|
||||
margin-bottom: 24px;
|
||||
padding: 24px 24px 0;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(n+13) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content_l_list_name {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 28px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 6px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
font-size: 24px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
margin-bottom: 22px;
|
||||
|
||||
span {
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.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_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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
|
||||
> div {
|
||||
height: 12px;
|
||||
transition: .3s;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.normal {
|
||||
background-color: #1A3467;
|
||||
border: 2px solid #5272D9;
|
||||
|
||||
.content_l_list_name {
|
||||
> div:nth-of-type(1) {
|
||||
background-color: #5272D9;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.content_l_list_name_normal {}
|
||||
}
|
||||
|
||||
.content_l_list_margin {
|
||||
color: #FFFFFF;
|
||||
|
||||
span {
|
||||
color: #5AF186;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: rgba(90, 241, 134, .3);
|
||||
|
||||
> div {
|
||||
background-color: #5AF186;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: #402200;
|
||||
border: 2px solid #5E4728;
|
||||
|
||||
.content_l_list_name {
|
||||
> div:nth-of-type(1) {
|
||||
background-color: #F8A45A;
|
||||
}
|
||||
|
||||
> 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 {
|
||||
color: #F6BD9E;
|
||||
|
||||
span {
|
||||
color: #F8A45A;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status_ {
|
||||
width: 200px;
|
||||
background-color: #5A2F00;
|
||||
|
||||
.content_l_list_status_icon {
|
||||
background-image: url("@/assets/images/mealSurplusInformation/warning_status_icon.png");
|
||||
}
|
||||
|
||||
.content_l_list_status_text {
|
||||
color: #F6BD9E;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
background-color: rgba(248, 164, 90, .3);
|
||||
|
||||
> div {
|
||||
background-color: #F8A45A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: #220203;
|
||||
border: 2px solid #FF3232;
|
||||
|
||||
.content_l_list_name {
|
||||
> div:nth-of-type(1) {
|
||||
background-color: #FF3232;
|
||||
}
|
||||
|
||||
> 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 {
|
||||
color: #FFC8C8;
|
||||
|
||||
span {
|
||||
color: #FF3232;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_status_ {
|
||||
width: 200px;
|
||||
background-color: #5A0A0A;
|
||||
|
||||
.content_l_list_status_icon {
|
||||
background-image: url("@/assets/images/mealSurplusInformation/danger_status_icon.png");
|
||||
}
|
||||
|
||||
.content_l_list_status_text {
|
||||
color: #FF6464;
|
||||
}
|
||||
}
|
||||
|
||||
.content_l_list_progress {
|
||||
background-color: rgba(200, 50, 50, .3);
|
||||
|
||||
> div {
|
||||
background-color: #FF3232;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.noData {
|
||||
background-color: #0F1A29;
|
||||
border: 2px solid #263249;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 35px auto 16px;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/mealSurplusInformation/noData.png");
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #5A6478;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content_r {
|
||||
width: 432px;
|
||||
height: 100%;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #2F415F;
|
||||
background-color: #051836;
|
||||
|
||||
.content_r_title {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 22px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-image: url("@/assets/images/mealSurplusInformation/content_r_icon.png");
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
flex: 1;
|
||||
height: 24px;
|
||||
color: #5272D9;
|
||||
line-height: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.content_r_content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.content_r_content_table {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.content_r_content_table_head {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
border-radius: 6px;
|
||||
background-color: #2F415F;
|
||||
margin-bottom: 30px;
|
||||
|
||||
> div {
|
||||
color: #FFFFFF;
|
||||
height: 48px;
|
||||
font-size: 18px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.content_r_content_table_body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
|
||||
> div {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
padding-left: 24px;
|
||||
box-sizing: border-box;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 20px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
height: 20px;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user