From ecfaa188c2dd94debbb4333f48ac47c26acb9dda Mon Sep 17 00:00:00 2001
From: 17792275749 <812100002@qq.com>
Date: Thu, 5 Feb 2026 10:20:10 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E9=A4=90=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 postcss.config.js                             |   6 +-
 .../mealSurplusInformation/content_r_icon.png | Bin 0 -> 659 bytes
 .../danger_status_icon.png                    | Bin 0 -> 596 bytes
 .../images/mealSurplusInformation/index.png   | Bin 1060 -> 0 bytes
 .../warning_status_icon.png                   | Bin 0 -> 584 bytes
 src/router/index.js                           |   4 -
 .../mealSurplusInformation.vue                | 808 +++++++++++-------
 7 files changed, 498 insertions(+), 320 deletions(-)
 create mode 100644 src/assets/images/mealSurplusInformation/content_r_icon.png
 create mode 100644 src/assets/images/mealSurplusInformation/danger_status_icon.png
 delete mode 100644 src/assets/images/mealSurplusInformation/index.png
 create mode 100644 src/assets/images/mealSurplusInformation/warning_status_icon.png

diff --git a/postcss.config.js b/postcss.config.js
index b0c0e98..6bd5daa 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,7 +2,11 @@ module.exports = {
     plugins: [
         require('postcss-pxtorem')({
             rootValue:({ file }) => {
-                if (file.includes('userRanking') || file.includes('dietaryNutritionTips') || file.includes('restaurantAndCafeteriaCombined')) {
+                if (
+                        file.includes('userRanking') ||
+                        file.includes('dietaryNutritionTips') ||
+                        file.includes('restaurantAndCafeteriaCombined')
+                ) {
                     return 108;
                 } else {
                     return 192;
diff --git a/src/assets/images/mealSurplusInformation/content_r_icon.png b/src/assets/images/mealSurplusInformation/content_r_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe74f55950b928e465686328106660fd5590bf48
GIT binary patch
literal 659
zcmV;E0&M+>P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px%O-V#SR7gv;l}%_9Q51#GNhVeyX^jPo3PmV7Efri;)TOH;NX1OhMHPYwaiJnJ
zRY5lvO5JFU)Srcj)r|;}MvN%Bu`30CHnu2}ieRDO!dh%oYRqJ=<WE!En6zo$Zsy%N
z-@WJFH;<_DVwLq#7N9No*460tgeVB46B6R?SbSQ4cXL~^RDxvzG{d|A;4HvLSwYz=
zkp9T!=99|>m=M8GB&7P&f|?$CAdvP*NUf^~khW%{$FoNS5dhO7NM!^G2Lv91hh{B?
zpI+URC<ZEOk*~`PP|yotLy0WMAv`k}+I(-JxOss6`pZ=o>hF*^P^$dGeGwU$tW$$S
z-Lwkd&jIY}exZ1Otc#M|{WnNv0EPwPBzW+@P~!ezpW2z8f_&T@fKNAjNu0}XipcXs
zA{BUYqxGv_A8i%dBc-Ym+ddt+(sF4YpyRmNtgMh>f=YH08T~Rd<!`KA?PV&}1E3Rx
zyA%Mx>@Q1ce%#+QmYs*((hTz!fFrrb&)<JqTfHllCJ3I9XedLtz*Sru45=sn0NR4$
zYIMiG5va`_q_8C9C~6$<39Mg~c%}g|ITnvMq)&RL0?qia6L7xzM=1Rpa4l9mA8!kG
zJPfI?xlbQ$C+!{r+m|X<<hwUEah{rCP5@Z5%;MQO0j8)Kv0*^AR09BTguYXs)=J9i
zU<H0Jl$-!bI+bXq$-ZMB>l0!xxuFXIYUoHtuD483>x$im$l<D3L=I5XO$&sx8UO(-
t`i<B{ffxWB%M7uF>?`ZatOQ(jz;7&^%daT4HUt0w002ovPDHLkV1ke*Bc%WU

literal 0
HcmV?d00001

diff --git a/src/assets/images/mealSurplusInformation/danger_status_icon.png b/src/assets/images/mealSurplusInformation/danger_status_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dd709aa33f67d5f65c052075014790a7b9ea257
GIT binary patch
literal 596
zcmV-a0;~OrP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px%4oO5oR5(wqls{+`K@`Tnx4V&ZXGB2=qK()D|G`Oug2~1vVj)6AyVxk&q)-S5
zqA4U8D^0jgj94jl8W9mx5V9MKV9*02XyHE)<PZ(IvmV~<KH1CVOzw6zci<~$zwh_H
znR&B>|6H^ZPd&GHA*4wH*fP++s$0EE^P~d#1=@n&G6rm`Lf+V`{Va8%q=TjceOC+-
z=;~54F%Q|jYP@COuW8v%A>I*TZJl{OGSIQ6+b<+RwF#9cC%`zFn1pac^!TTm1}fL?
z1dJH~Mr?X`H^iNrA+B6+!-kEO3=t6R7EUl*4{b=u00mRh17Yu?_}X|Gj~_%B8MCk>
zTj>$kwC(s#eEZAJxW0q$i2-7|wRBwr1V?;K?o+q5K+Z!1KgC;sHZ=nT_=_E=4mtp}
zs9&~a<;hVn&ex~bC9LQOmqm|%p#fNQGh0HKa{y&p0)mSrgxl9S#rF&RYAILV1JIu|
z3KO|99^H>HnzOKVXYEq{Ng0!(*FRhX7G2R7f}ZH6zwnjuawbCGK@+B#tTMs-Gmd&n
z{0x>dWuB<^UK<?W3XIPm8QCraMnb@<Va_i5SqfZvnt_}yUA%tc$REuA0FDouICNAK
zabeoekeU)7K(sjxc<EdTuk(zv7cF$|(MJUM69t}7%w(qloBzfEDOV1HF#^K+=8cKU
i?=Yg_75~_+Hu(#u!@!T<;-jAc0000<MNUMnLSTa3cLo{&

literal 0
HcmV?d00001

diff --git a/src/assets/images/mealSurplusInformation/index.png b/src/assets/images/mealSurplusInformation/index.png
deleted file mode 100644
index 4d430ba33f072556ed49f754c44deeb2985daa34..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1060
zcmV+<1l#+GP)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px&-bqA3RA@upnq7#LWfaGM|CyB(qM$-6%7Owftmq;VqCkrXss%yp11q<7wvQW)
zE&{WQ4N3$PgGgidd3VK?B{BK{GocL2AnL*!Q3$e|4f1P?jnLM0<}}ZI?Km^Lv*YaI
z`#$g8%zK`5&hL4i^PcD9hz5^!F`qO~lVT;teZWmXx{+)Q{>uXE<@l(PFRK01GCT`x
zEkVV={~5V3j<Ja}+ttU}>J}A1>m|hq+YztKNM#&_j0?biz!9-uV3UB|e4J>w`VRk8
zj@1Rg(zG0o<Dj(R(@{C@QQ?Eq!S4x+xn|tw$+AL&{4DEcEn;W0772Pk4s^=#jrUpB
z!{-<)69h1wt2vBSiuj@|B+D?8|LWWl2;eR`)?Sh(EW^bZC-K($-8ewR<32r9k6`6T
zYuaKfy${I9ajF=DnMvB%y4<>Be__0?h@nsc%U!Z1bijW@20Vw+6(*qZBSuC8{2Cgd
z-y3eg@qRf~ga+6rcj<O7G{8f0tf*bdgqG+x$+0oym5gV5TaNcaUded2m*f}>Ee0pU
z&lpj};!pw4V{BB!w$K2NkYk7rc9)M2LjnAQEYE3>?`t<6p#W}?<IP69sxSbJ<J`*K
z>LnNI2>L^c9!0p20Y{l&iFPp>@=|TH92-Ig405qO2AlwnAU;q($3hsvGyc+(aSm#T
z)6*TgB{NMJP7ysbIZaF^Ak@X$RIo_}yudkb)G&WH8^xpoR`z=#0}jivCS<@b<(l7X
z#(#<$Z;|3#vRp-qg}@EK1mk?wEJY;YOy;y4i<(WtB<I0D<+wRqKwsDsF~9o8wpG~p
z$KX7!(~jo(F7Ao`6vilGNnO1_mW3L`uRSm8x$-0E!P4BJKE~_?uBU@eQgi~#FpeqW
zvCASWHS&P|$|=>3k~Z7!k>i;*bxhgZ1D=HTKE-W0m!nq$ywjGBX&U=duEU52=gL4y
z?{~n}`BKOG8`ybXj@@%*-ve$%yfIe>fPHd>nDSMP%Ykjcy%l@nuG(GrZ2ID-=)=Il
zhDwbe5WeK{p(%|Tzaadv!J`djay*~`ek#AS)ug$WF5orbx4DeJ;!>?x>3bqyad>-`
zgOxgH1Cikq;Hf$QUpn;<PiimOQq^KVFt2KKj;o)gvpFKI>M9n*_V6mkj#A@^{2`8y
zi#?TIU&A#l;3%-TV!${<j-}N(%DQ<1u@_iSkQ3|F&xfr#HJkE9z~%Y-m^=9z<2J<0
zavZ8PVwu7eJW!QVR^=;dKdX~_k!7TbfH5xeh<5VdY&zVkuDYuG=@eLob--p{;jV~x
eTQzni<o^c+gjqsm@v)=;0000<MNUMnLSTY@!35+0

diff --git a/src/assets/images/mealSurplusInformation/warning_status_icon.png b/src/assets/images/mealSurplusInformation/warning_status_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a14c932f0c073cb593fe7732ea803bf225bc4528
GIT binary patch
literal 584
zcmV-O0=NB%P)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px%0!c(cR5(wqlD}(HaTLYR`6eL=LexM4MNyE(MMMXGjd3h)N<m+KK+!=IgiKDN
z_y<@Np&gu>ytEV)2L}hSI=QHHXcY^hqD3&24wCp1`@TmaDh6I&Q^<Gx-g`gXd(I(-
z{20dTxK3HZ6+wpxS_>=!yqzq%^?q}GfnLp-0&p>KkeEso>X(9Q|A6iKxdYbfxS?su
zYCFj3a5Z#U)OY#J(r7VJoO?<@)IvVmSsl42unZtnf=%RpwA6fen(eA{O~lP%cthwq
zy_)k8z}{g11*~;}c9T;zuoQyr0#^X!`fVtwK{7Mo1<UkioC*wXg#cfYJTeGS!~}IC
zA8n70JOp?uFjv%liD$xq1X>cVCQ9|Yzhk2L@kqNJy&&>DfulXc!X$`F2=GZ9oM6%Y
z((UQV-H+<oJZTnshgAVM*%v5{B}%i8|JHkenki*H<KLmQD&Q@FPx1K1E3X+zG3rNs
zMRr7BvVh$KGADAEl~>tTdhj(6*!^6qjipjZAKZ}LZwz<KR|XL#A$8-^q}Z?qpXJ+?
zBw|Y}SDXKD-?O3TIynf-0Aho<3gIWo!||f~CUC=6t#HCXF9w4BX_D;8WNGf%@PJnN
zWO?>^uqpH7X|EG|O(6~9J)sX)_y)28!6&g(PzJ(2Lyihqj}ymOsIT`mWh>_f_5K3q
WPSF`a*LQpX0000<MNUMnLSTYBcLOv4

literal 0
HcmV?d00001

diff --git a/src/router/index.js b/src/router/index.js
index e737026..0ca9442 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -173,14 +173,10 @@ const routes = [
 ];
 
 const router = new VueRouter({
-    // mode: 'history',
     base: process.env.BASE_URL,
     routes
 });
 
-// http://192.168.1.210/gateway/local/zhstapi/zhst/tv/rankingList?number=9
-//     http://vip.shuziweidao.com/shuwei-zhct/swLargeScreenFood/rankingList?type=1
-
 router.beforeEach((to, from, next) => {
     if (to.meta && to.meta.rootValue) {
         window.POSTCSS_PXTOREM_ROOT_VALUE = to.meta.rootValue;
diff --git a/src/views/mealSurplusInformation/mealSurplusInformation.vue b/src/views/mealSurplusInformation/mealSurplusInformation.vue
index 1a6a782..b6ed2a6 100644
--- a/src/views/mealSurplusInformation/mealSurplusInformation.vue
+++ b/src/views/mealSurplusInformation/mealSurplusInformation.vue
@@ -1,163 +1,215 @@
 <template>
     <div id="mealSurplusInformation">
-        <div class="title">
-            <div>{{ restName }}</div>
-            <div>餐品余量信息</div>
-            <div>{{ times }}  | {{ dinnerType }}</div>
+        <div class="header">
+            <div class="times">{{ times }}</div>
+            <div class="title">餐厅后厨智能看板</div>
+            <div class="meal">当前餐次：{{ dinnerType }}&emsp;{{ mealTime }}</div>
         </div>
-
         <div class="content">
-            <template v-for="(item, index) in list">
-                <div :class="['list', 'warning' + item.warningStatus]" @click="clickFood">
-                    <div class="index">{{ index < 9 ? '0' + (index + 1) : (index + 1)}}</div>
-                    <template v-if="item.warningStatus === 2">
-                        <div class="none">
-                            <div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
-                            <div class="accumulate">累计出餐 {{ item.initial }} kg</div>
+            <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>
-                    </template>
-                    <template v-else>
-                        <div class="info">
-                            <div class="info_">
-                                <div class="info_l">
-                                    <template v-if="item.relativeUrl">
-                                        <img :src="item.relativeUrl" />
-                                    </template>
-                                </div>
-                                <div class="info_r">
-                                    <div class="name">{{ item.foodName }} <template v-if="selectedIndex === index">选中</template></div>
-                                    <div class="accumulate">累计出餐 {{ item.initial }} kg</div>
-                                </div>
-                            </div>
+                        <div class="content_l_list_margin">
+                            当前余量
+                            <countTo
+                                :endVal="item.marginWeight_kg"
+                                separator=""
+                                :decimals="3"
+                                :duration="300"
+                            />
+                            kg
                         </div>
-                        <div class="remaining">
-                            <div class="remaining_">
-                                <template v-if="item.warningStatus === 0">当前余量 <span>{{ item.surplus }}</span> kg</template>
-                                <template v-if="item.warningStatus === 1">余量预警 <span>{{ item.surplus }}</span> kg 请备餐</template>
-                            </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>
+                            </template>
+                            <template v-if="item.class === 'warning'">
+                                <div class="content_l_list_status_icon"></div>
+                                <div class="content_l_list_status_text">餐品制作中</div>
+                            </template>
+                            <template v-if="item.class === 'danger'">
+                                <div class="content_l_list_status_icon"></div>
+                                <div class="content_l_list_status_text">低于阈值，请补餐</div>
+                            </template>
                         </div>
-                    </template>
+                        <div class="content_l_list_progress">
+                            <div :style="{'width': item.progress}"></div>
+                        </div>
+                    </div>
+                </template>
+
+<!--                <div class="content_l_list warning">-->
+<!--                    <div class="content_l_list_name">-->
+<!--                        <div></div>-->
+<!--                        <div>重庆歌乐山辣子鸡</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
+<!--                    <div class="content_l_list_status">-->
+<!--                        <div class="content_l_list_status_icon"></div>-->
+<!--                        <div class="content_l_list_status_text">餐品制作中</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_progress">-->
+<!--                        <div></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <div class="content_l_list danger">-->
+<!--                    <div class="content_l_list_name">-->
+<!--                        <div></div>-->
+<!--                        <div>重庆歌乐山辣子鸡</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
+<!--                    <div class="content_l_list_status">-->
+<!--                        <div class="content_l_list_status_icon"></div>-->
+<!--                        <div class="content_l_list_status_text">低于阈值，请补餐</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_progress">-->
+<!--                        <div></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--                <div class="content_l_list normal">-->
+<!--                    <div class="content_l_list_name">-->
+<!--                        <div></div>-->
+<!--                        <div>重庆歌乐山辣子鸡</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_margin">当前余量 <span>1.84</span> kg</div>-->
+<!--                    <div class="content_l_list_status">-->
+<!--                        <div class="content_l_list_status_text">累计出餐</div>-->
+<!--                    </div>-->
+<!--                    <div class="content_l_list_progress">-->
+<!--                        <div></div>-->
+<!--                    </div>-->
+<!--                </div>-->
+            </div>
+            <div class="content_r">
+                <div class="content_r_title">
+                    <div></div>
+                    <div>当餐菜品生产计划</div>
                 </div>
-            </template>
+                <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 }}</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 {httpRequest} from "@/XMLHttpRequest";
-import {getServeUrl} from "@/utils/serveUrl";
-import {token} from "@/utils/token";
+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(),
 
-            restName: "",
-            dinnerType: "",
-            list: [],
+            dinnerType: "", // 餐次
+            mealTime: "",   // 餐次的时间
 
-            cols: 5,
-            selectedIndex: null
+            nutritionFoodList: [],  // 菜品数据
+            recipeFoodNotMadeList: [],  // 食谱菜品未制作
+            recipeFoodProducedList: [],   // 食谱菜品已制作
         }
     },
     created() {
-        this.getTime();
-        this.requestFoodReplenishWarningList();
+        this.getKitchenInfo();
     },
     methods: {
-        getTime() {
-            let this_ = this;
-            this_.times = getCurrentTime();
-            setTimeout(function () {
-                this_.getTime();
-            }, 1000)
-        },
-
-        setTimePlay() {
-            let this_ = this;
-            setTimeout(function () {
-                this_.requestFoodReplenishWarningList();
-            }, 10000);
-        },
-
-        requestFoodReplenishWarningList() {
-            let this_ = this;
+        getKitchenInfo() {
             let params = {};
-            let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/foodReplenishWarningList';
-            httpRequest('GET', url, params, {
-                'Authorization': token
-            }).then(function(res) {
-                if (res.success) {
-                    this_.restName = res.data.restName;
-                    this_.dinnerType = res.data.dinnerType;
-                    if(res.data.voList && res.data.voList.length) {
-                        res.data.voList.map(item => {
-                            item.relativeUrl = item.relativeUrl.replace("https", "http");
-                        })
+            httpRequest("GET", "https://dev.yixiong-tech.com:8081/terminal/neglect/large-screen/kitchen/info", params, {
+                "authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"
+            }).then((res) => {
+                this.dinnerType = "";
+                this.mealTime = "";
+                this.nutritionFoodList = [];
+                this.recipeFoodNotMadeList = [];
+                this.recipeFoodProducedList = [];
+                if (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(item => {
+                            if (item.marginWeight >= item.warningWeight) {
+                                item.class = "normal";
+                            }
+                            if (item.marginWeight < item.warningWeight && item.marginWeight >= item.dangerWeight) {
+                                item.class = "warning";
+                            }
+                            if (item.marginWeight < item.dangerWeight) {
+                                item.class = "danger";
+                            }
+                            item.marginWeight_kg = item.marginWeight / 1000;
+                            item.progress = (1 - item.marginWeight / item.foodWeight) * 100 + '%';
+                        });
+                        this.nutritionFoodList = res.data.nutritionFoodList;
+                    }
+                    if (res.data.recipeFoodNotMadeList && res.data.recipeFoodNotMadeList.length) {
+                        this.recipeFoodNotMadeList = res.data.recipeFoodNotMadeList;
+                    }
+                    if (res.data.recipeFoodProducedList && res.data.recipeFoodProducedList.length) {
+                        res.data.recipeFoodProducedList.map(item => {
+                            item.foodWeight_kg = item.foodWeight / 1000;
+                        });
+                        this.recipeFoodProducedList = res.data.recipeFoodProducedList;
                     }
-                    this_.list = res.data.voList;
-
-                    this_.setTimePlay();
-                } else {
-                    console.error(res.message);
                 }
-            }).catch(function(error) {
-                location.reload();
-                console.error('GET request error:', error);
-            });
-        },
-
-        selectFood(key) {
-            let cols = this.cols;
-            let list = this.list;
-            let selectedIndex = this.selectedIndex === null ? 0 : this.selectedIndex;
-            let rows = Math.ceil(list.length / cols);
-            // 19 上
-            if(key === 19) {
-                this.selectedIndex = selectedIndex - cols >= 0 ? selectedIndex - cols : selectedIndex;
-            }
-            // 21 左
-            if(key === 21) {
-                this.selectedIndex = selectedIndex % cols !== 0 ? selectedIndex - 1 : selectedIndex;
-            }
-            // 22 右
-            if(key === 22) {
-                this.selectedIndex = (selectedIndex + 1) % cols !== 0 && selectedIndex + 1 < list.length ? selectedIndex + 1 : selectedIndex;
-            }
-            // 20 下
-            if(key === 20) {
-                this.selectedIndex = selectedIndex + cols < rows * cols ? selectedIndex + cols : selectedIndex;
-            }
-        },
-
-        clickFood() {
-            let { selectedIndex, list } = this;
-            let this_ = this;
-            let params = {
-                foodId: list[selectedIndex].foodId
-            };
-            let url = getServeUrl('ctRequest') + '/shuwei-zhct/swLargeScreenFood/updateStatusByFoodId';
-            httpRequest('GET', url, params, {
-                'Authorization': token
-            }).then(function(res) {
-                if (res.success) {
-                    this_.list[selectedIndex].warningStatus = res.data;
-                } else {
-                    console.error(res.message);
-                }
-            }).catch(function(error) {
-                location.reload();
-                console.error('GET request error:', error);
-            });
+            }).then(() => {}).finally(() => {
+                setTimeout(() => {
+                    this.getKitchenInfo();
+                }, 10000)
+            })
         }
     },
     mounted() {
-        window.selectFood = this.selectFood;
-        window.clickFood = this.clickFood;
+        this.timer = setInterval(() => {
+            this.times = getCurrentTime();
+        }, 1000);
     },
+    beforeDestroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
 }
 </script>
 
@@ -165,243 +217,369 @@ export default {
 #mealSurplusInformation {
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    background-color: #000A14;
+    display: flex;
+    flex-flow: column;
+    padding: 0 24px 24px;
+    box-sizing: border-box;
+    font-family: PingFangSC-Medium;
+    background-color: #051836;
 
-    .title {
+    .header {
         width: 100%;
-        height: 120px;
-        padding: 0 24px;
-        box-sizing: border-box;
+        height: 96px;
         display: flex;
-        align-items: center;
+        flex-wrap: nowrap;
+        justify-content: space-between;
 
-        > div:nth-of-type(1) {
-            flex: 1;
-            color: #FFFFFF;
+        .times {
+            color: #869CC5;
+            height: 96px;
             font-size: 18px;
-            height: 18px;
-            line-height: 18px;
+            line-height: 96px;
         }
 
-        > div:nth-of-type(2) {
-            flex: 1;
+        .title {
             color: #FFFFFF;
+            height: 96px;
             font-size: 40px;
-            height: 40px;
-            font-weight: bold;
-            line-height: 40px;
-            text-align: center;
+            font-weight: 500;
+            line-height: 96px;
         }
 
-        > div:nth-of-type(3) {
-            flex: 1;
-            color: #FFFFFF;
+        .meal {
+            color: #869CC5;
+            height: 96px;
             font-size: 18px;
-            height: 18px;
-            line-height: 18px;
-            text-align: right;
+            line-height: 96px;
         }
     }
 
     .content {
-        width: 100%;
-        padding: 0 24px;
-        box-sizing: border-box;
+        flex: 1;
+        overflow: hidden;
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
 
-        .list {
-            overflow: hidden;
-            width: 355px;
-            height: 216px;
-            position: relative;
-            margin-bottom: 24px;
-            margin-right: calc((100% - 355px * 5) / 4);
-            border-radius: 12px;
-            border: 2px solid #5272D9;
-            background-color: #1A3467;
+        .content_l {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            align-content: flex-start;
+            column-gap: 24px;
+            row-gap: 24px;
 
-            .index {
-                width: 56px;
-                height: 56px;
-                position: absolute;
-                z-index: 2;
-                top: 0;
-                left: 0;
-                color: #FFFFFF;
-                font-size: 22px;
-                line-height: 50px;
-                padding-left: 10px;
+            .content_l_list {
+                width: 336px;
+                height: 222px;
+                padding: 24px 24px 0;
+                border-radius: 12px;
                 box-sizing: border-box;
-                font-weight: bold;
-                background-size: contain;
-                background-position: center;
-                background-repeat: no-repeat;
-                background-image: url("@/assets/images/mealSurplusInformation/index.png");
-            }
 
-            .none {
-                height: 100%;
-                padding-top: 70px;
-                box-sizing: border-box;
-                background-color: #0F1A29;
-
-                .name {
-                    color: #5A6478;
-                    width: 100%;
-                    height: 28px;
-                    font-size: 28px;
-                    line-height: 28px;
-                    font-weight: bold;
-                    text-align: center;
-                    margin-bottom: 25px;
-                }
-
-                .accumulate {
-                    color: #5A6478;
-                    width: 100%;
-                    height: 16px;
-                    font-size: 16px;
-                    font-weight: bold;
-                    line-height: 16px;
-                    text-align: center;
-                }
-            }
-
-            .info {
-                width: 100%;
-                padding: 22px 18px 0;
-                box-sizing: border-box;
-                margin-bottom: 24px;
-
-                .info_ {
+                .content_l_list_name {
                     width: 100%;
+                    height: 24px;
                     display: flex;
                     flex-wrap: nowrap;
+                    margin-bottom: 28px;
 
-                    .info_l {
-                        width: 80px;
-                        height: 80px;
-                        overflow: hidden;
-                        border-radius: 10px;
-                        margin-right: 10px;
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                        }
+                    > div:nth-of-type(1) {
+                        width: 6px;
+                        height: 24px;
+                        border-radius: 3px;
+                        margin-right: 12px;
                     }
 
-                    .info_r {
-                        padding-top: 10px;
+                    > div:nth-of-type(2) {
                         flex: 1;
-                        width: 0;
+                        height: 24px;
+                        line-height: 24px;
+                        font-size: 20px;
+                    }
+                }
 
-                        .name {
-                            width: 100%;
-                            color: #FFFFFF;
-                            font-size: 28px;
-                            height: 28px;
-                            font-weight: bold;
-                            line-height: 28px;
-                            margin-bottom: 16px;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
+                .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: 200px;
+                    height: 36px;
+                    display: flex;
+                    flex-wrap: nowrap;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 6px;
+                    margin: 0 auto 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_progress {
+                    width: 100%;
+                    height: 12px;
+                    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;
                         }
 
-                        .accumulate {
-                            width: 100%;
-                            color: #9DA8BA;
-                            font-size: 16px;
-                            height: 16px;
-                            line-height: 16px;
+                        > div:nth-of-type(2) {
+                            color: #FFFFFF;
+                        }
+                    }
+
+                    .content_l_list_margin {
+                        color: #FFFFFF;
+
+                        span {
+                            color: #5AF186;
+                        }
+                    }
+
+                    .content_l_list_status {
+                        .content_l_list_status_text {
+                            color: #869CC5;
+                        }
+                    }
+
+                    .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_margin {
+                        color: #F6BD9E;
+
+                        span {
+                            color: #F8A45A;
+                        }
+                    }
+
+                    .content_l_list_status {
+                        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_margin {
+                        color: #FFC8C8;
+
+                        span {
+                            color: #FF3232;
+                        }
+                    }
+
+                    .content_l_list_status {
+                        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;
                         }
                     }
                 }
             }
+        }
 
-            .remaining {
+        .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%;
-                padding: 0 10px;
-                box-sizing: border-box;
+                height: 24px;
+                display: flex;
+                flex-wrap: nowrap;
+                margin-bottom: 22px;
 
-                .remaining_ {
-                    color: #FFFFFF;
-                    font-size: 24px;
-                    font-weight: bold;
-                    width: 100%;
-                    height: 76px;
-                    line-height: 76px;
-                    border-radius: 8px;
-                    text-align: center;
-                    background-color: #0A2049;
+                > 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");
+                }
 
-                     span {
-                         color: #B1FF89;
-                     }
+                > div:nth-of-type(2) {
+                    flex: 1;
+                    height: 24px;
+                    color: #5272D9;
+                    line-height: 24px;
+                    font-size: 20px;
+                    font-weight: 500;
                 }
             }
 
-            &:nth-of-type(5n) {
-                margin-right: 0;
-            }
-        }
+            .content_r_content {
+                flex: 1;
+                overflow: hidden;
 
-        @keyframes warn_animation {
-            0%   {
-                border: 2px solid #5272D9;
-                background-color: #1A3467;
-            }
-            50% {
-                border: 2px solid #DC2828;
-                background-color: #7F1520;
-            }
-            100%   {
-                border: 2px solid #5272D9;
-                background-color: #1A3467;
-            }
-        }
+                .content_r_content_table {
+                    width: 100%;
+                    height: 50%;
+                    display: flex;
+                    flex-flow: column;
 
-        @keyframes accumulate_animation {
-            0%   {
-                color: #9DA8BA;
-            }
-            50% {
-                color: #FFC8C8;
-            }
-            100%   {
-                color: #9DA8BA;
-            }
-        }
+                    .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;
 
-        @keyframes remaining_animation {
-            0%   {
-                background-color: #0A2049;
-            }
-            50% {
-                background-color: #DC2828;
-            }
-            100%   {
-                background-color: #0A2049;
-            }
-        }
+                        > div {
+                            color: #FFFFFF;
+                            height: 48px;
+                            font-size: 18px;
+                            line-height: 48px;
+                        }
+                    }
 
-        .warning1 {
-            animation: warn_animation 1s infinite;
+                    .content_r_content_table_body {
+                        flex: 1;
+                        overflow: hidden;
+                        display: flex;
+                        flex-wrap: wrap;
+                        align-content: flex-start;
 
-            .accumulate {
-                animation: accumulate_animation 1s infinite;
+                        > div {
+                            flex: none;
+                            width: 50%;
+                            padding-left: 24px;
+                            box-sizing: border-box;
+                            height: 18px;
+                            display: flex;
+                            flex-wrap: nowrap;
+                            align-items: flex-end;
+                            margin-bottom: 22px;
+
+                            > div:nth-of-type(1) {
+                                height: 18px;
+                                font-size: 18px;
+                                line-height: 18px;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                            }
+
+                            > div:nth-of-type(2) {
+                                height: 14px;
+                                font-size: 14px;
+                                line-height: 14px;
+                                margin-left: 8px;
+                            }
+                        }
+                    }
+                }
             }
-
-            .remaining_ {
-                animation: remaining_animation 1s infinite;
-            }
-        }
-
-        .warning2 {
-            border: 2px solid #263249 !important;
         }
     }
 }