From dd43d29ce9afe42bba04597671f9e37bae550d2e Mon Sep 17 00:00:00 2001
From: wx <645899409@qq.com>
Date: Tue, 4 Aug 2026 18:34:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=A1=A5=E9=A4=90=E5=B1=8F?=
 =?UTF-8?q?=E6=97=A7=E7=89=88=E5=A4=87=E4=BB=BD=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../mealSurplusInformation1.vue               | 656 ++++++++++++++++++
 1 file changed, 656 insertions(+)
 create mode 100644 src/views/mealSurplusInformation/mealSurplusInformation1.vue

diff --git a/src/views/mealSurplusInformation/mealSurplusInformation1.vue b/src/views/mealSurplusInformation/mealSurplusInformation1.vue
new file mode 100644
index 0000000..fa9fd12
--- /dev/null
+++ b/src/views/mealSurplusInformation/mealSurplusInformation1.vue
@@ -0,0 +1,656 @@
+<template>
+    <div id="mealSurplusInformation">
+        <div class="header">
+            <div class="times">{{ times }}</div>
+            <div class="title">餐厅后厨智能看板</div>
+            <div class="meal">当前餐次：{{ dinnerType }}&emsp;{{ 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>