From ca5b21bd9a97346836fdc7fb3c0f7175cd6388e5 Mon Sep 17 00:00:00 2001
From: wx <645899409@qq.com>
Date: Wed, 5 Aug 2026 14:54:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(led):=20=E8=A1=A5=E9=A4=90=E5=B1=8F?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E6=95=B0=E6=8D=AE=E7=BB=91=E5=AE=9A=E4=B8=8E?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E8=87=AA=E9=80=82=E5=BA=94=E6=88=AA=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- info.vue: 卡片数据改为动态绑定，标签列表超出容器宽度自动截断不显示半个
- rowDom.vue: 传递 index 属性，用 deviceCode 作为 key
- led.vue: 统一 deviceId→deviceCode 字段命名，简化接口调用逻辑

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/views/led/components/info.vue   | 107 ++++++++++++++++++++-----
 src/views/led/components/rowDom.vue |   4 +-
 src/views/led/led.vue               | 117 ++++++++++++----------------
 3 files changed, 141 insertions(+), 87 deletions(-)

diff --git a/src/views/led/components/info.vue b/src/views/led/components/info.vue
index 2dee658..80aecb8 100644
--- a/src/views/led/components/info.vue
+++ b/src/views/led/components/info.vue
@@ -1,12 +1,17 @@
 <template>
     <div class="rowDom-info">
-        <template v-if="deviceData">
+        <template v-if="deviceData && deviceData.foodId">
             <div class="deviceData">
                  <div class="deviceDataHeader">
-                     <div>1</div>
-                     <div>暂无餐品</div>
+                     <div>{{ index + 1 }}</div>
+                     <div>{{ deviceData.foodName }}</div>
+                 </div>
+                 <div class="deviceDataBody">
+                     <div>
+                         <img :src="deviceData.foodImg" :alt="deviceData.foodName">
+                     </div>
+                     <div></div>
                  </div>
-                 <div class="deviceDataBody"></div>
                  <div class="deviceDataFooter">
                      <div>
                          <div></div>
@@ -15,13 +20,13 @@
                      </div>
                      <div>
                          <div>16.8<span>元</span></div>
-                         <div>98<span>kcal</span></div>
+                         <div>{{ parseInt(deviceData.calorie) }}<span>kcal</span></div>
                      </div>
                      <div></div>
-                     <div>
-                         <div>高蛋白</div>
-                         <div>解馋下饭</div>
-                         <div>肉质软烂</div>
+                     <div ref="labelContainer">
+                         <template v-for="(item, i) in visibleLabels">
+                             <div :key="i">{{ item }}</div>
+                         </template>
                      </div>
                  </div>
             </div>
@@ -29,11 +34,14 @@
         <template v-else>
             <div class="deviceDataNull">
                 <div class="deviceDataHeader">
-                    <div>15</div>
+                    <div>{{ index + 1 }}</div>
                     <div>暂无餐品</div>
                 </div>
                 <div class="deviceDataBody">
-                    <img src="@/assets/images/led/null.png" alt="暂无餐品">
+                    <div>
+                        <img src="@/assets/images/led/null.png" alt="暂无餐品">
+                    </div>
+                    <div></div>
                 </div>
                 <div class="deviceDataFooter">
                     <div>
@@ -54,15 +62,35 @@
 </template>
 
 <script>
-import countTo from "vue-count-to";
-
 export default {
     name: "info",
     props: {
+        index: {
+            type: Number,
+            default: () => 0
+        },
         deviceData: {
             type: Object,
             default: () => null
         }
+    },
+    computed: {
+        visibleLabels() {
+            const list = this.deviceData?.labelList;
+            if (!list?.length) return [];
+            const maxWidth = 230;
+            let used = 0;
+            const result = [];
+            for (const label of list) {
+                const charWidth = [...label].reduce((w, ch) =>
+                    w + (/[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef]/.test(ch) ? 14 : 7), 0);
+                const total = charWidth + 18 + (result.length ? 8 : 0);
+                if (used + total > maxWidth) break;
+                used += total;
+                result.push(label);
+            }
+            return result;
+        }
     }
 }
 </script>
@@ -83,6 +111,7 @@ export default {
 
         .deviceDataHeader {
             position: absolute;
+            z-index: 2;
             top: 0;
             left: 0;
             right: 0;
@@ -114,21 +143,40 @@ export default {
 
             > div:nth-of-type(2) {
                 color: #FFFFFF;
+                max-width: 120px;
                 height: 22px;
                 font-size: 22px;
                 font-weight: 500;
                 line-height: 22px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
         }
 
         .deviceDataBody {
             width: 100%;
             height: 250px;
-            background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+            position: relative;
 
-            img {
+            > div:nth-of-type(1) {
                 width: 100%;
                 height: 100%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            > div:nth-of-type(2) {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                width: 100%;
+                height: 80px;
+                background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
             }
         }
 
@@ -221,7 +269,7 @@ export default {
                 display: flex;
                 gap: 8px;
                 flex-wrap: nowrap;
-
+                overflow: hidden;
 
                 > div {
                     color: #2AC79F;
@@ -231,6 +279,8 @@ export default {
                     border-radius: 4px;
                     line-height: 22px;
                     box-sizing: border-box;
+                    white-space: nowrap;
+                    flex-shrink: 0;
                     border: 1px solid #2AC79F;
                     background-color: #E5FFF8;
                 }
@@ -245,6 +295,7 @@ export default {
 
         .deviceDataHeader {
             position: absolute;
+            z-index: 2;
             top: 0;
             left: 0;
             right: 0;
@@ -276,6 +327,7 @@ export default {
 
             > div:nth-of-type(2) {
                 color: #FFFFFF;
+                max-width: 120px;
                 height: 22px;
                 font-size: 22px;
                 font-weight: 500;
@@ -286,11 +338,26 @@ export default {
         .deviceDataBody {
             width: 100%;
             height: 250px;
-            background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+            position: relative;
 
-            img {
+            > div:nth-of-type(1) {
                 width: 100%;
                 height: 100%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            > div:nth-of-type(2) {
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                width: 100%;
+                height: 80px;
+                background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
             }
         }
 
@@ -383,7 +450,7 @@ export default {
                 display: flex;
                 gap: 8px;
                 flex-wrap: nowrap;
-
+                overflow: hidden;
 
                 > div {
                     color: #2AC79F;
@@ -393,6 +460,8 @@ export default {
                     border-radius: 4px;
                     line-height: 22px;
                     box-sizing: border-box;
+                    white-space: nowrap;
+                    flex-shrink: 0;
                     border: 1px solid #2AC79F;
                     background-color: #E5FFF8;
                 }
diff --git a/src/views/led/components/rowDom.vue b/src/views/led/components/rowDom.vue
index f3f9b2d..c4154fa 100644
--- a/src/views/led/components/rowDom.vue
+++ b/src/views/led/components/rowDom.vue
@@ -5,8 +5,8 @@
             <div>数味智餐</div>
         </div>
         <div class="rowDom-dishes">
-            <template v-for="item in deviceDataList">
-                <Info :deviceData="item.data" :key="item.deviceId" />
+            <template v-for="(item, index) in deviceDataList">
+                <Info :index="index" :deviceData="item" :key="item.deviceCode" />
             </template>
         </div>
     </div>
diff --git a/src/views/led/led.vue b/src/views/led/led.vue
index 7e8852f..7901e8c 100644
--- a/src/views/led/led.vue
+++ b/src/views/led/led.vue
@@ -20,9 +20,8 @@
 
 <script>
 import RowDom from "./components/rowDom.vue";
-import {callBackMqttMessage, initMqtt} from "@/utils/mqtt";
 import {httpRequest} from "@/XMLHttpRequest";
-import dayjs from "dayjs";
+import {callBackMqttMessage, initMqtt} from "@/utils/mqtt";
 
 export default {
     name: "led",
@@ -31,128 +30,114 @@ export default {
     },
     data() {
         return {
-            url: "https://api.dm.yixiong-tech.com:8443/",
+            url: "http://192.168.10.101:24801/nutrition/",
             screenWidth: 1920,
             deviceDataList: [{
-                deviceId: '1',
+                deviceCode: '1',
                 data: null
             }, {
-                deviceId: '2',
+                deviceCode: '2',
                 data: null
             }, {
-                deviceId: '3',
+                deviceCode: '3',
                 data: null
             }, {
-                deviceId: '4',
+                deviceCode: '4',
                 data: null
             }, {
-                deviceId: '5',
+                deviceCode: '5',
                 data: null
             }, {
-                deviceId: '6',
+                deviceCode: '6',
                 data: null
             }, {
-                deviceId: '7',
+                deviceCode: '7',
                 data: null
             }, {
-                deviceId: '8',
+                deviceCode: '8',
                 data: null
             }, {
-                deviceId: '9',
+                deviceCode: '9',
                 data: null
             }, {
-                deviceId: '10',
+                deviceCode: '10',
                 data: null
             }, {
-                deviceId: '11',
+                deviceCode: '11',
                 data: null
             }, {
-                deviceId: '12',
+                deviceCode: '12',
                 data: null
             }, {
-                deviceId: '13',
+                deviceCode: '13',
                 data: null
             }, {
-                deviceId: '14',
+                deviceCode: '14',
                 data: null
             }, {
-                deviceId: '15',
+                deviceCode: '15',
                 data: null
             }],
         }
     },
     mounted() {
         callBackMqttMessage((data) => {
-            console.log(`data============${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, data);
-            this.getInfoByDeviceId(data?.message || {});
+            this.getInfoByDevice(data?.message || {});
         })
     },
     created() {
         this.initData();
-        this.initMttqF()
+        this.initMQ();
     },
     methods: {
-        getInfoByDeviceId(deviceIdInfo) {
-            // if (deviceIdInfo.deviceId === 'all') {
-            //     this.initData();
-            // } else {
-            //     let _this = this;
-            //     if (!deviceIdInfo.deviceId) return;
-            //     httpRequest("GET", this.url + 'terminal/neglect/large-screen/longScreen/device', {deviceId: deviceIdInfo.deviceId}, {"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"})
-            //         .then((res) => {
-            //             if (res.code === '00000') {
-            //                 let data = JSON.parse(JSON.stringify(_this.deviceDataList));
-            //                 let count = -1;
-            //                 for (let i = 0; i < data.length; i++) {
-            //                     if (data[i].deviceId === deviceIdInfo.deviceId) {
-            //                         count = i;
-            //                         break;
-            //                     }
-            //                 }
-            //                 if (count !== -1) {
-            //                     _this.deviceDataList.splice(count, 1, {
-            //                         deviceId: deviceIdInfo.deviceId,
-            //                         data: res.data
-            //                     });
-            //                 }
-            //             }
-            //         })
-            //         .catch((err) => {
-            //             console.log(err)
-            //         })
-            // }
+        getInfoByDevice(deviceCode) {
+            if (deviceCode === 'all') {
+                this.initData();
+            } else {
+                let _this = this;
+                if (!deviceCode) return;
+                httpRequest("GET", this.url + 'neglect/large-screen/long-screen/device', {
+                    deviceCode: deviceCode
+                }, {
+                    "authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"
+                }).then((res) => {
+                    if (res.code === '00000') {
+                        const i = _this.deviceDataList.findIndex(item => item.deviceCode === res.data.deviceCode);
+                        if (i !== -1) _this.deviceDataList.splice(i, 1, res.data);
+                    }
+                }).catch((err) => {
+                    console.log(err)
+                })
+            }
         },
         initData() {
             let _this = this;
-            httpRequest("GET", this.url + 'terminal/neglect/large-screen/longScreen', {}, {"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"}).then(function (res) {
+            httpRequest("GET", this.url + 'neglect/large-screen/long-screen', {}, {
+                "authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"
+            }).then(function (res) {
                 if (res?.code === '00000') {
-                    _this.deviceDataList = res?.data?.foodList ? res?.data?.foodList.map((item, index) => {
-                        return {
-                            deviceId: item?.deviceId || index + '',
-                            data: item.foodName ? item : null
+                    _this.deviceDataList = res?.data?.foodList.map((item, index) => {
+                        if (!item.deviceCode) {
+                            item.deviceCode = index.toString();
                         }
-                    }) : _this.initDeviceDataList;
-                } else {
-                    _this.deviceDataList = _this.initDeviceDataList
+                        return item;
+                    })
                 }
                 console.log(_this.deviceDataList);
             }).catch(function (err) {
                 console.log(err)
-                _this.deviceDataList = _this.initDeviceDataList
             })
         },
-        initMttqF() {
+        initMQ() {
             initMqtt('deviceId-' + Math.random().toString(16).substring(2, 8), 'yx/device/foodRecord/needUpdate', 'led', {
                 username: process.env.VUE_APP_LED_MQTT_USERNAME,
                 password: process.env.VUE_APP_LED_MQTT_PASSWORD,
                 head: 'wss'
+            }).then((res) => {
+                console.log(res)
+            }).catch((err) => {
+                console.log(err)
             })
-                .then((res) => {
-                    console.log(res)
-                })
-                .catch((err) => {
-                    console.log(err)
-                })
         }
     }
 }