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

refactor(led): 补餐屏动态数据绑定与标签自适应截断

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

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
weixin
2026-08-05 14:54:17 +08:00
co-authored by Claude Opus 4.7
parent 54b6d52346
commit ca5b21bd9a
3 changed files with 141 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/led/components/info.vue
+88 -19
View File
@@ -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;
}
src/views/led/components/rowDom.vue
+2 -2
View File
@@ -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>
src/views/led/led.vue
+51 -66
View File
@@ -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)
})
}
}
}