refactor(led): 重构补餐屏设备信息卡片UI，清理冗余代码和旧图片
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.7
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
@@ -0,0 +1,965 @@
|
||||
<template>
|
||||
<div class="outer-d">
|
||||
<div class="title">
|
||||
<img src="@/assets/images/dataBoard/title.png" alt="" />
|
||||
</div>
|
||||
<div class="total">
|
||||
<div class="total-left">{{ preTime(nowTime) }}</div>
|
||||
<div class="total-d">
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
<countTo
|
||||
:startVal="dataInitOverview.userCount ? dataInitOverview.userCount : 0"
|
||||
:endVal="dataOverview.userCount"
|
||||
separator=""
|
||||
:duration="1500" />
|
||||
</span>
|
||||
<span>人</span>
|
||||
</div>
|
||||
<div>用餐总人数</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
<countTo
|
||||
:startVal="dataInitOverview.perCalorie ? dataInitOverview.perCalorie : 0"
|
||||
:endVal="dataOverview.perCalorie"
|
||||
separator=""
|
||||
:duration="1500" />
|
||||
</span>
|
||||
<span>千卡</span>
|
||||
</div>
|
||||
<div>人均热量</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
<countTo
|
||||
:startVal="dataInitOverview.perScore ? dataInitOverview.perScore : 0"
|
||||
:endVal="dataOverview.perScore"
|
||||
separator=""
|
||||
:duration="1500" />
|
||||
</span>
|
||||
<span>分</span>
|
||||
</div>
|
||||
<div>人均营养分</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-right">{{dinnerType}} {{mealTimeStart && mealTimeEnd ? `(${mealTimeStart} ~ ${mealTimeEnd})` : ''}}</div>
|
||||
</div>
|
||||
<div class="table-top">
|
||||
<div>
|
||||
<img class="voice-img" src="@/assets/images/bigScreen/voice.png" alt="" />
|
||||
<span class="voice-span">
|
||||
实时播报：
|
||||
</span>
|
||||
</div>
|
||||
<div class="scroll-container">
|
||||
<!-- <div class="scroll-content animal-css" :style="animationCss">-->
|
||||
<div class="scroll-content" :style="animationCss" :class="[orderListData.length > 0 ? 'animal-css' : '']">
|
||||
<div v-for="(item,index) in orderListData" :key="`top-list-data-${index}`">
|
||||
<img style="border-radius: 8px" :src="item.faceUrl || require('@/assets/images/bigScreen/user.png')" alt="" />
|
||||
{{preName(item.name)}} {{item.userScore}}分 第{{item?.sort}}名；
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-d">
|
||||
<div class="table-d">
|
||||
<div class="table-title">
|
||||
<div>排名</div>
|
||||
<div>
|
||||
<div class="table-info-one">用户信息</div>
|
||||
<div class="table-title-point table-info-two">
|
||||
健康得分
|
||||
<img src="@/assets/images/dataBoard/down.png" alt="" />
|
||||
</div>
|
||||
<div class="table-info-three">下单时间</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition-group name="flip-list" tag="div" style="flex: 1;overflow: auto;">
|
||||
<div class="table-item" v-for="(item, index) in listData.slice(0, 10)" :key="`list-data-${index}`">
|
||||
<div class="index-item">
|
||||
<template v-if="index === 0">
|
||||
<img src="@/assets/images/bigScreen/1.png" alt="" />
|
||||
</template>
|
||||
<template v-else-if="index === 1">
|
||||
<img src="@/assets/images/bigScreen/2.png" alt="" />
|
||||
</template>
|
||||
<template v-else-if="index === 2">
|
||||
<img src="@/assets/images/bigScreen/3.png" alt="" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="img-d">
|
||||
{{index+1}}
|
||||
</div>
|
||||
</template>
|
||||
<img style="border-radius: 8px" class="title-img" :src="item.faceUrl || require('@/assets/images/bigScreen/user.png')" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="table-info-one">{{preName(item.name)}}</div>
|
||||
<div class="table-info-two" style="color: #FFB99C">{{ item.userScore}}</div>
|
||||
<div class="table-info-three">{{preDate(item.orderDate)}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="table-right-d">
|
||||
<div class="table-right-d-title">
|
||||
餐品热度排行榜
|
||||
</div>
|
||||
<div class="table-right-d-body">
|
||||
<transition-group name="flip-list" tag="div" class="progress-d">
|
||||
<div class="progress-d-item" v-for="(item, index) in valList.slice(0, 6)" :key="`val-list-${index}`">
|
||||
<div style="color: #FFFFFF;display: flex;align-items: center">
|
||||
<template v-if="index === 0">
|
||||
<img src="@/assets/images/bigScreen/1.png" alt="" />
|
||||
</template>
|
||||
<template v-else-if="index === 1">
|
||||
<img src="@/assets/images/bigScreen/2.png" alt="" />
|
||||
</template>
|
||||
<template v-else-if="index === 2">
|
||||
<img src="@/assets/images/bigScreen/3.png" alt="" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="index-d">
|
||||
{{index+1}}、
|
||||
</div>
|
||||
</template>
|
||||
<div class="index-name">{{item.foodName}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div :style="{width: item.weightPoint + '%'}" style="border-radius: 50px;height: 100%;transition: width 0.5s ease-in-out;" :class="getProgressClass(item.weightPoint )"></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
||||
<div class="swiper-d">
|
||||
<div class="swiper-container" v-if="swiperList.length !== 0">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" v-for="(item, index) in swiperList" :key="`slide-${index}`">
|
||||
<!-- 图片轮播 -->
|
||||
<img
|
||||
v-if="item.type === '1'"
|
||||
:src="item.url"
|
||||
class="swiper-content"
|
||||
alt="轮播图片"
|
||||
/>
|
||||
<!-- 视频轮播 -->
|
||||
<video
|
||||
v-else-if="item.type === '2'"
|
||||
class="swiper-content"
|
||||
:ref="`videRef${index}`"
|
||||
:src="item.url"
|
||||
@ended="onVideoEnded"
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-data-d" v-else>
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;justify-content: center">
|
||||
<img src="@/assets/images/bigScreen/noData.png" alt="" />
|
||||
</div>
|
||||
<div class="no-data-msg">
|
||||
<div>
|
||||
欢迎用餐
|
||||
</div>
|
||||
<div>
|
||||
<div>均衡饮食很重要</div> <div>你我生活都需要</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-d">
|
||||
数智餐厅
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as dayjs from "dayjs";
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import Swiper from 'swiper';
|
||||
import 'swiper/css/swiper.css';
|
||||
import {httpRequest} from "@/XMLHttpRequest";
|
||||
import countTo from "vue-count-to";
|
||||
import {callBackMqttMessage, initMqtt} from "@/utils/mqtt";
|
||||
|
||||
export default {
|
||||
name: 'DataBoard',
|
||||
components: {
|
||||
countTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: "https://api.dm.yixiong-tech.com:8443/",
|
||||
nowTimeInterval: null,
|
||||
nowTime: dayjs(),
|
||||
dinnerType: '',
|
||||
mealTimeStart: '',
|
||||
mealTimeEnd: '',
|
||||
dataInitOverview: {
|
||||
userCount: 0,
|
||||
perCalorie: 0,
|
||||
perScore: 0
|
||||
},
|
||||
dataOverview: {
|
||||
userCount: 0,
|
||||
perCalorie: 0,
|
||||
perScore: 0
|
||||
},
|
||||
listData: [],
|
||||
orderListData: [],
|
||||
// 餐品热度数据：包含名称和热度值
|
||||
valList: [],
|
||||
// 轮播数据：支持图片和视频
|
||||
swiperList: [
|
||||
// { type: '1', src: require('@/assets/images/bigScreen/1.png'), duration: 3000 },
|
||||
// { type: '2', src: require('@/assets/images/bigScreen/demo.mp4'), duration: 0 },
|
||||
// { type: '1', src: require('@/assets/images/bigScreen/1.png'), duration: 3000 },
|
||||
// { type: '2', src: require('@/assets/images/bigScreen/demo.mp4'), duration: 0 }
|
||||
],
|
||||
// 当前轮播索引
|
||||
currentSwiperIndex: 0,
|
||||
// 轮播定时器
|
||||
swiperTimer: null,
|
||||
// 是否正在播放视频
|
||||
isPlayingVideo: false,
|
||||
// Swiper 实例引用
|
||||
swiperInstance: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initMttqF()
|
||||
this.initMttqFile()
|
||||
},
|
||||
computed: {
|
||||
animationCss() {
|
||||
return this.orderListData && this.orderListData.length > 0 ? {
|
||||
// animationName: 'scroll',
|
||||
animationDuration: (this.orderListData.length === 0 ? 0 : 45) + 's',
|
||||
animationTimingFunction: 'linear',
|
||||
// animationIterationCount: 'infinite',
|
||||
animationFillMode: 'forwards'
|
||||
} : {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
callBackMqttMessage((data) => {
|
||||
console.log('loadData=============='+data.topic+'==='+dayjs().format('YYYY-MM-DD HH:mm:ss'), data)
|
||||
if (data.topic === 'yx/device/rankingScreen/needUpdate') {
|
||||
// if (data.message?.type === 'rankingFileUpdate') {
|
||||
// this.initSwiperData()
|
||||
// } else {
|
||||
if(data.message?.userId) this.initData(data.message?.userId);
|
||||
// }
|
||||
} else {
|
||||
this.initSwiperData()
|
||||
}
|
||||
})
|
||||
this.initTime();
|
||||
this.initData('');
|
||||
this.initSwiperData();
|
||||
// this.$nextTick(() => {
|
||||
// this.initSwiper();
|
||||
// this.startSwiperAutoPlay();
|
||||
// });
|
||||
// this.startRandomVal();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.nowTimeInterval) {
|
||||
clearInterval(this.nowTimeInterval);
|
||||
}
|
||||
if (this.swiperTimer) {
|
||||
clearTimeout(this.swiperTimer);
|
||||
}
|
||||
if (this.swiperInstance) {
|
||||
this.swiperInstance.destroy();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMttqF() {
|
||||
initMqtt('deviceId-' + Math.random().toString(16).substring(2, 8),'yx/device/rankingScreen/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)
|
||||
})
|
||||
},
|
||||
initMttqFile() {
|
||||
initMqtt('deviceId-' + Math.random().toString(16).substring(2, 8),'yx/device/rankingFile/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)
|
||||
})
|
||||
},
|
||||
preName(name) {
|
||||
if (!name) return;
|
||||
if (name === '匿名用户') return name
|
||||
if (name.length < 3) {
|
||||
return name.substring(0, 1) + '*'
|
||||
} else {
|
||||
return name.replace(/^(.)(.*?)(.)$/, (match, first, middle, last) => {
|
||||
return first + '*'.repeat(middle.length) + last;
|
||||
})
|
||||
}
|
||||
},
|
||||
preDate(d) {
|
||||
if (!d) return;
|
||||
return dayjs(d).format('HH:mm:ss');
|
||||
},
|
||||
initSwiperData() {
|
||||
let _this = this;
|
||||
httpRequest("GET", this.url + 'terminal/neglect/large-screen/ranking/file', {}, {"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"})
|
||||
.then(function (res) {
|
||||
console.log(res)
|
||||
if (res.code === '00000') {
|
||||
_this.swiperList = res.data || [];
|
||||
if (_this.swiperInstance) {
|
||||
_this.swiperInstance.destroy(true, true);
|
||||
_this.swiperInstance = null;
|
||||
}
|
||||
if (_this.swiperTimer) {
|
||||
clearTimeout(_this.swiperTimer);
|
||||
}
|
||||
_this.$nextTick(() => {
|
||||
_this.initSwiper();
|
||||
_this.startSwiperAutoPlay();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
initData(userId) {
|
||||
let _this = this;
|
||||
this.orderListData = [];
|
||||
httpRequest("GET", this.url + 'terminal/neglect/large-screen/ranking' , {userId}, {"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"}).then(function (res) {
|
||||
if (res?.code === '00000') {
|
||||
_this.dinnerType = res.data.dinnerType;
|
||||
_this.dataOverview = res.data.dataOverview || {
|
||||
userCount: 0,
|
||||
perCalorie: 0,
|
||||
perScore: 0
|
||||
};
|
||||
_this.mealTimeStart = res.data.mealTimeStart;
|
||||
_this.mealTimeEnd = res.data.mealTimeEnd;
|
||||
_this.listData = res.data.userScoreInfos || [];
|
||||
_this.orderListData = res.data.userOrderInfos || [];
|
||||
const maxWeight = res.data.foodSortInfos && res.data.foodSortInfos.length > 0 ? res.data.foodSortInfos[0].foodWeight || 0 : 0;
|
||||
_this.valList = (res.data.foodSortInfos || []).map((item) => {
|
||||
item['weightPoint'] = maxWeight === 0 ? 0 : parseFloat(((item?.foodWeight || 0) / maxWeight * 100).toFixed(2));
|
||||
return item;
|
||||
});
|
||||
} else {
|
||||
}
|
||||
}).catch(function(err) {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
preTime(time) {
|
||||
return `${dayjs(time).format('YYYY年MM月DD日 HH:mm:ss')} ${dayjs(time).locale('zh-cn').format('dddd')}`
|
||||
},
|
||||
// 初始化时间
|
||||
initTime() {
|
||||
this.nowTime = dayjs();
|
||||
this.nowTimeInterval = setInterval(() => {
|
||||
this.nowTime = dayjs();
|
||||
}, 1000);
|
||||
},
|
||||
// 生成随机热度值并排序
|
||||
randomVal() {
|
||||
this.valList.forEach(item => {
|
||||
item.value = (Math.floor(Math.random() * 10) + 1) * 10;
|
||||
});
|
||||
// 按热度值降序排列
|
||||
this.valList.sort((a, b) => b.value - a.value);
|
||||
},
|
||||
// 启动随机更新
|
||||
startRandomVal() {
|
||||
setInterval(() => {
|
||||
this.randomVal();
|
||||
}, 1500);
|
||||
},
|
||||
// 根据热度值返回对应的进度条样式类
|
||||
getProgressClass(val) {
|
||||
if (val < 30) {
|
||||
return ['small-progress'];
|
||||
}
|
||||
if (val > 50) {
|
||||
return ['large-progress'];
|
||||
}
|
||||
return ['middle-progress'];
|
||||
},
|
||||
// 初始化 Swiper
|
||||
initSwiper() {
|
||||
if (this.swiperList.length <= 1) return;
|
||||
this.swiperInstance = new Swiper('.swiper-container', {
|
||||
loop: true,
|
||||
grabCursor: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 0,
|
||||
on: {
|
||||
slideChangeTransitionEnd: () => {
|
||||
this.onSlideChangeTransitionEnd();
|
||||
},
|
||||
slideChange: () => {
|
||||
this.onSwiperSlideChange();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// Swiper 滑动事件处理
|
||||
onSwiperSlideChange() {
|
||||
if (!this.swiperInstance || this.swiperList.length <= 1) return;
|
||||
// 获取当前索引
|
||||
const realIndex = this.swiperInstance.activeIndex;
|
||||
this.currentSwiperIndex = realIndex;
|
||||
|
||||
// 清除之前的定时器
|
||||
if (this.swiperTimer) {
|
||||
clearTimeout(this.swiperTimer);
|
||||
}
|
||||
const currentIndex = realIndex === 0 ? 0 : realIndex > this.swiperList.length ? 0 : realIndex - 1;
|
||||
// 获取当前幻灯片数据
|
||||
const currentItem = this.swiperList[currentIndex];
|
||||
if (this.swiperList[currentIndex !== 0 ? currentIndex - 1 : this.swiperList.length - 1].type === '2') {
|
||||
const refD = this.$refs[`videRef${currentIndex !== 0 ? currentIndex - 1 : this.swiperList.length - 1}`];
|
||||
if (refD && refD.length > 0 && refD[0]) {
|
||||
refD[0].currentTime = 0;
|
||||
refD[0].pause();
|
||||
}
|
||||
const refD1 = this.$refs[`videRef${currentIndex === this.swiperList.length ? this.swiperList.length - 1 : currentIndex + 1 }`];
|
||||
if (refD1 && refD1.length > 0 && refD1[0]) {
|
||||
refD1[0].currentTime = 0;
|
||||
refD1[0].pause();
|
||||
}
|
||||
}
|
||||
if (currentItem.type === '1') {
|
||||
// 图片：按设定时长自动切换
|
||||
this.swiperTimer = setTimeout(() => {
|
||||
this.swiperInstance.slideNext();
|
||||
}, 3000);
|
||||
} else if (currentItem.type === '2') {
|
||||
// 视频：等待播放完毕后切换
|
||||
this.isPlayingVideo = true;
|
||||
}
|
||||
},
|
||||
onSlideChangeTransitionEnd () {
|
||||
if (!this.swiperInstance) return
|
||||
// 获取当前索引
|
||||
const realIndex = this.swiperInstance.activeIndex;
|
||||
this.currentSwiperIndex = realIndex;
|
||||
const currentIndex = realIndex === 0 ? 0 : realIndex > this.swiperList.length ? 0 : realIndex - 1;
|
||||
const currentItem = this.swiperList[currentIndex];
|
||||
if (currentItem.type === '2') {
|
||||
const refD = this.$refs[`videRef${currentIndex}`]
|
||||
if (refD && refD.length > 0) {
|
||||
refD[0].muted = false;
|
||||
refD[0].play().catch((e) => {
|
||||
console.error(e)
|
||||
refD[0].muted = true;
|
||||
refD[0].play();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
// 视频播放完毕回调
|
||||
onVideoEnded() {
|
||||
this.isPlayingVideo = false;
|
||||
if (this.swiperInstance) {
|
||||
this.swiperInstance.slideNext();
|
||||
}
|
||||
},
|
||||
// 启动轮播自动播放
|
||||
startSwiperAutoPlay() {
|
||||
// 初始化时触发一次
|
||||
this.onSwiperSlideChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.outer-d {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/bigScreen/bigBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
padding-top: 13px;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 500px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
padding: 0 140px;
|
||||
.total-left, .total-right {
|
||||
color: #8CCAFF;
|
||||
font-size: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
.total-left {
|
||||
text-align: left;
|
||||
}
|
||||
.total-right {
|
||||
text-align: right;
|
||||
}
|
||||
.total-d {
|
||||
width: 800px;
|
||||
background: url("@/assets/images/dataBoard/total.png") no-repeat;
|
||||
background-size: 100% 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-position: center bottom;
|
||||
padding: 10px 120px 18px;
|
||||
> div {
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
color: #FFB99C;
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-family: 'HarmonyOS Sans SC';
|
||||
&:nth-child(1) {
|
||||
font-size: 36px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: 24px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: #8CCAFF;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-top {
|
||||
padding: 5px 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:nth-child(1) {
|
||||
.voice-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.voice-span {
|
||||
color: #8CCAFF;
|
||||
font-size: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
color: #FFB99C;
|
||||
font-size: 22px;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
> div {
|
||||
padding: 0 45px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-d {
|
||||
flex: 1;
|
||||
padding: 10px 100px 20px;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
width: 67%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-d {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.table-title {
|
||||
background: #2f487e;
|
||||
border-radius: 5px;
|
||||
padding: 3px 40px;
|
||||
color: #8CCAFF;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-child(1) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: calc(100% / 3 * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.table-title-point {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
right: -8px;
|
||||
}
|
||||
}
|
||||
.table-info-one {
|
||||
width: 90px;
|
||||
text-align: left;
|
||||
}
|
||||
.table-info-two {
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.table-info-three {
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
.table-item {
|
||||
height: 10%;
|
||||
padding: 15px 40px 3px;
|
||||
color: #8CCAFF;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.table-info-one {
|
||||
width: 90px;
|
||||
text-align: left;
|
||||
}
|
||||
.table-info-two {
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
}
|
||||
.table-info-three {
|
||||
width: 90px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-child(1) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: calc(100% / 3 * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.index-item {
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
.img-d {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: url("@/assets/images/bigScreen/4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title-img {
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-right-d {
|
||||
padding-left: 60px;
|
||||
color: #FFFFFF;
|
||||
font-family: 'HarmonyOS Sans SC';
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table-right-d-title {
|
||||
font-size: 20px;
|
||||
background: #2f487e;
|
||||
padding: 4px 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.table-right-d-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.progress-d {
|
||||
padding: 20px 15px 15px;
|
||||
height: calc(100% - 270px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden auto;
|
||||
.progress-d-item {
|
||||
margin-top: 10px;
|
||||
height: calc(100% / 6 - 10px);
|
||||
img {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
>div {
|
||||
&:nth-child(1) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
height: 10px;
|
||||
background: #1f2635;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-d {
|
||||
height: 23px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.index-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-d {
|
||||
flex: 1;
|
||||
height: 270px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #183159;
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.no-data-d {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 80px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.no-data-msg {
|
||||
text-align: center;
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
font-size: 27px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin-top: 5px;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
padding-right: 13px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
padding-left: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.swiper-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-d {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
color: #8CCAFF;
|
||||
}
|
||||
}
|
||||
|
||||
.small-progress {
|
||||
background: #45FFA1;
|
||||
}
|
||||
|
||||
.middle-progress {
|
||||
background: #FFFD45;
|
||||
}
|
||||
|
||||
.large-progress {
|
||||
background: linear-gradient(-90deg, #FF0048, #FFAB61);
|
||||
}
|
||||
|
||||
// 列表排序动画
|
||||
.flip-list-move {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// 轮播淡入动画
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 2px; /* 垂直滚动条宽度 */
|
||||
height: 2px; /* 水平滚动条高度 */
|
||||
}
|
||||
|
||||
/* 滚动条轨道 */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 滚动条滑块 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 滑块悬停效果 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* 滚动条两端按钮 */
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 边角（两个滚动条交汇处） */
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.animal-css {
|
||||
animation: scroll;
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%); /* 移动一半距离，因为复制了一份 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 鼠标悬停暂停 */
|
||||
.scroll-container:hover .scroll-content {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
</style>
|
||||
+282
-251
@@ -2,74 +2,51 @@
|
||||
<div class="rowDom-info">
|
||||
<template v-if="deviceData">
|
||||
<div class="deviceData">
|
||||
<div class="detailHeader">
|
||||
<div>{{deviceData.foodName || '暂无餐品'}}</div>
|
||||
<div>{{ deviceData.calorie }}千卡/100克</div>
|
||||
</div>
|
||||
<div class="detailImg">
|
||||
<div>
|
||||
<img :src="deviceData.foodImg" alt=""/>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="detailFooter">
|
||||
<!-- <div class="detailFooter-1">-->
|
||||
<!-- <div class="detailFooter-1-food-name">{{ deviceData.foodName }}</div>-->
|
||||
<!-- <template v-if="deviceData.makeFoodWeight">-->
|
||||
<!-- <div>({{ deviceData.makeFoodWeight }}kg)</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- </div>-->
|
||||
<div class="detailFooter-2">
|
||||
<template v-for="item in deviceData.labelList">
|
||||
<div>{{ item }}</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="detailFooter-3">
|
||||
<div>
|
||||
<div>{{ deviceData.makeFoodWeight }}</div>
|
||||
<div>总制作量(kg)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div :style="{ color: Number(deviceData.differenceWeight) > 0 ? '#F24439' : '' }">{{ deviceData.differenceWeight }}</div>
|
||||
<div>异常损耗(kg)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{ deviceData.totalFoodWeight }}</div>
|
||||
<div>总售卖量(kg)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div :style="{ color: Number(deviceData.marginWeight) > 0 ? '#95f204' : '#F24439' }">{{ deviceData.marginWeight }}</div>
|
||||
<div>当前余量(kg)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deviceDataHeader">
|
||||
<div>1</div>
|
||||
<div>暂无餐品</div>
|
||||
</div>
|
||||
<div class="deviceDataBody"></div>
|
||||
<div class="deviceDataFooter">
|
||||
<div>
|
||||
<div></div>
|
||||
<div>每100克</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>16.8<span>元</span></div>
|
||||
<div>98<span>kcal</span></div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div>
|
||||
<div>高蛋白</div>
|
||||
<div>解馋下饭</div>
|
||||
<div>肉质软烂</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="deviceDataNull">
|
||||
<div class="detailImg">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="deviceDataHeader">
|
||||
<div>15</div>
|
||||
<div>暂无餐品</div>
|
||||
</div>
|
||||
<div class="detailFooter">
|
||||
<div class="detailFooter-1">
|
||||
<div>暂无餐品</div>
|
||||
<div class="deviceDataBody">
|
||||
<img src="@/assets/images/led/null.png" alt="暂无餐品">
|
||||
</div>
|
||||
<div class="deviceDataFooter">
|
||||
<div>
|
||||
<div></div>
|
||||
<div>每100克</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- <div class="detailFooter-2"></div>-->
|
||||
<!-- <div class="detailFooter-3">-->
|
||||
<!-- <div>-->
|
||||
<!-- <div>-</div>-->
|
||||
<!-- <div>实名取量(kg)</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div>-</div>-->
|
||||
<!-- <div>余量(kg)</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <div>-</div>-->
|
||||
<!-- <div>异常损耗(kg)</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<div>--</div>
|
||||
<div>--</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -104,162 +81,160 @@ export default {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.detailHeader {
|
||||
.deviceDataHeader {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 232px;
|
||||
height: 78px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
padding-top: 6px;
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-image: url("@/assets/images/led/headerNew.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/led/header.png");
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #F24439;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background-color: #F5F7FB;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
height: 22px;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceDataBody {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceDataFooter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 240px;
|
||||
height: 120px;
|
||||
padding: 12px 4px 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #FFFFFF;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
color: #FFFFFF;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
margin: 11px 0 8px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.detailImg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
|
||||
> 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;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 240px;
|
||||
height: 160px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
padding-top: 14px;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #FFFFFF;
|
||||
background: rgba(238, 246, 253, 0.72);
|
||||
|
||||
.detailFooter-1 {
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: end;
|
||||
margin-bottom: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #000000;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: bold;
|
||||
width: 64px;
|
||||
height: 2px;
|
||||
background: linear-gradient(-90deg, #808080 0%, rgba(148,125,255,0) 100%);
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 64px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #808080 0%, rgba(245,247,251,0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter-2 {
|
||||
> div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
margin-left: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
color: #F24439;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: #252535;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #EAECF1;
|
||||
}
|
||||
|
||||
> div:nth-of-type(4) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
|
||||
> div {
|
||||
margin: 0 8px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
color: #2AC79F;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
border-radius: 6px;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
line-height: 22px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #2AC79F;
|
||||
background-color: #E5FFF8;
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter-3 {
|
||||
width: 100%;
|
||||
//padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
margin-bottom: 6px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #161616;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #77849E;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -268,102 +243,158 @@ export default {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.detailImg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
position: relative;
|
||||
.deviceDataHeader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("@/assets/images/led/header.png");
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/images/led/null.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: #F24439;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
background-color: #F5F7FB;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||||
color: #FFFFFF;
|
||||
height: 22px;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 245px;
|
||||
height: 160px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
padding-top: 14px;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #FFFFFF;
|
||||
background: rgba(238, 246, 253, 0.72);
|
||||
.deviceDataBody {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
background: linear-gradient(0deg, #1B2E54 0%, #FFFFFF 0%, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
|
||||
.detailFooter-1 {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.deviceDataFooter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 240px;
|
||||
height: 120px;
|
||||
padding: 12px 4px 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #FFFFFF;
|
||||
border-radius: 16px 16px 0 0;
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
> div {
|
||||
> div:nth-of-type(1) {
|
||||
width: 64px;
|
||||
height: 2px;
|
||||
background: linear-gradient(-90deg, #808080 0%, rgba(148,125,255,0) 100%);
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #000000;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
padding: 0 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 64px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #808080 0%, rgba(245,247,251,0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailFooter-2 {
|
||||
> div:nth-of-type(2) {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.detailFooter-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
> div {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
|
||||
> div:nth-of-type(1) {
|
||||
color: #161616;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
span {
|
||||
font-size: 20px;
|
||||
margin-left: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
> div:nth-of-type(2) {
|
||||
color: #77849E;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
&:first-of-type {
|
||||
color: #F24439;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: #252535;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-of-type(3) {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 10px;
|
||||
background-color: #EAECF1;
|
||||
}
|
||||
|
||||
> div:nth-of-type(4) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
|
||||
> div {
|
||||
color: #2AC79F;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
line-height: 22px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #2AC79F;
|
||||
background-color: #E5FFF8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+82
-209
@@ -33,186 +33,52 @@ export default {
|
||||
return {
|
||||
url: "https://api.dm.yixiong-tech.com:8443/",
|
||||
screenWidth: 1920,
|
||||
// deviceDataList: [
|
||||
// {
|
||||
// deviceId: '1',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '2',
|
||||
// data: {
|
||||
// foodId: "2028767531816284161",
|
||||
// foodName: "蒜香鸡翅根",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260303/ad0b893a-1fa6-4905-b969-016c44cd29b4.png",
|
||||
// calorie: "116",
|
||||
// labelList: ['补充蛋白质', '增强免疫力'],
|
||||
// differenceWeight: "14.88", // 偷菜
|
||||
// marginWeight: "5.32", // 余量（kg）
|
||||
// realNameWeight: "7.86", // 实名取餐重量（kg）
|
||||
// anonymityWeight: "1.70", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '3',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '4',
|
||||
// data: {
|
||||
// foodId: "2028273122528030722",
|
||||
// foodName: "杏鲍菇炒肉",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260302/a0c9541a-47bb-43db-bff5-053fe3d88111.png",
|
||||
// calorie: "59",
|
||||
// labelList: ['润肠通便', '提高免疫'],
|
||||
// differenceWeight: "12.50", // 偷菜
|
||||
// marginWeight: "6.18", // 余量（kg）
|
||||
// realNameWeight: "5.42", // 实名取餐重量（kg）
|
||||
// anonymityWeight: "0.90", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '5',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '6',
|
||||
// data: {
|
||||
// foodId: "2029388232071933954",
|
||||
// foodName: "青椒鸡肉丝",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260305/8e833968-f88b-4918-84d0-99dcc5118b4b.png",
|
||||
// calorie: "43",
|
||||
// labelList: ['促进消化', '补充维C'],
|
||||
// differenceWeight: "11.92", // 偷菜
|
||||
// marginWeight: "4.56", // 余量（kg）
|
||||
// realNameWeight: "6.24", // 实名取餐重量（kg）
|
||||
// anonymityWeight: "1.12", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '7',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '8',
|
||||
// data: {
|
||||
// foodId: "2028277177375617026",
|
||||
// foodName: "西红柿炒鸡蛋",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260302/660cc729-09cc-4b77-bfe9-9d2918714a3c.png",
|
||||
// calorie: "44",
|
||||
// labelList: ['美容养颜', '健脑益智'],
|
||||
// differenceWeight: "15.00", // 偷菜
|
||||
// marginWeight: "3.74", // 余量（kg）
|
||||
// realNameWeight: "8.96", // 实名取餐重量（kg）
|
||||
// anonymityWeight: "2.30", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '9',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '10',
|
||||
// data: {
|
||||
// foodId: "2028768323575050242",
|
||||
// foodName: "凉拌菠菜",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260303/af27cd5a-325f-4d9c-bedf-4b32870f293c.png",
|
||||
// calorie: "30",
|
||||
// labelList: ['补铁补血', '明目护眼'],
|
||||
// differenceWeight: "12.14", // 偷菜
|
||||
// marginWeight: "7.20", // 余量（kg）
|
||||
// realNameWeight: "4.38", // 实名取餐重量（kg）
|
||||
// anonymityWeight: "0.56", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '11',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '12',
|
||||
// data: {
|
||||
// foodId: "2031257721365442561",
|
||||
// foodName: "青笋炒木耳？",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260310/45e6f7fc-f58a-4828-b5ff-72c5a5f561da.png",
|
||||
// calorie: "28",
|
||||
// labelList: ['清热解毒', '活血化瘀'],
|
||||
// differenceWeight: "10.50", // 偷菜
|
||||
// realNameWeight: "3.82", // 实名取餐重量（kg）
|
||||
// marginWeight: "5.94", // 余量（kg）
|
||||
// anonymityWeight: "0.74", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '13',
|
||||
// data: null
|
||||
// }, {
|
||||
// deviceId: '14',
|
||||
// data: {
|
||||
// foodId: "2031248239226892289",
|
||||
// foodName: "玉米粒大米饭",
|
||||
// foodImg: "https://dev.yixiong-tech.com:8081/common/files/20260306/db3b1d29-8a8d-4e26-a93f-fdc066959f30.png",
|
||||
// calorie: "137",
|
||||
// labelList: ['补充能量', '促进消化'],
|
||||
// differenceWeight: "20.00",
|
||||
// marginWeight: "8.64", // 余量（kg）
|
||||
// realNameWeight: "10.26", // 实名取餐重量（kg）
|
||||
// anonymityWeight: "1.10", // 匿名取餐重量（kg）
|
||||
// }
|
||||
// }, {
|
||||
// deviceId: '15',
|
||||
// data: null
|
||||
// }],
|
||||
deviceDataList: [],
|
||||
initDeviceDataList: [
|
||||
{
|
||||
deviceId: '1',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '2',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '3',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '4',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '5',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '6',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '7',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '8',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '9',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '10',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '11',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '12',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '13',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '14',
|
||||
data: null
|
||||
},
|
||||
{
|
||||
deviceId: '15',
|
||||
data: null
|
||||
},
|
||||
],
|
||||
deviceDataList: [{
|
||||
deviceId: '1',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '2',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '3',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '4',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '5',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '6',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '7',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '8',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '9',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '10',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '11',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '12',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '13',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '14',
|
||||
data: null
|
||||
}, {
|
||||
deviceId: '15',
|
||||
data: null
|
||||
}],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -227,35 +93,38 @@ export default {
|
||||
},
|
||||
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)
|
||||
})
|
||||
}
|
||||
// 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)
|
||||
// })
|
||||
// }
|
||||
},
|
||||
initData() {
|
||||
let _this = this;
|
||||
httpRequest("GET", this.url+'terminal/neglect/large-screen/longScreen', {}, {"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"}).then(function (res) {
|
||||
httpRequest("GET", this.url + 'terminal/neglect/large-screen/longScreen', {}, {"authorization": "57ee87183f2a4fa59683ec9ef41c8f5d"}).then(function (res) {
|
||||
if (res?.code === '00000') {
|
||||
_this.deviceDataList = res?.data?.foodList ? res?.data?.foodList.map((item, index) => {
|
||||
return {
|
||||
@@ -263,17 +132,21 @@ export default {
|
||||
data: item.foodName ? item : null
|
||||
}
|
||||
}) : _this.initDeviceDataList;
|
||||
} else {
|
||||
} else {
|
||||
_this.deviceDataList = _this.initDeviceDataList
|
||||
}
|
||||
console.log(_this.deviceDataList);
|
||||
}).catch(function(err) {
|
||||
}).catch(function (err) {
|
||||
console.log(err)
|
||||
_this.deviceDataList = _this.initDeviceDataList
|
||||
})
|
||||
},
|
||||
initMttqF() {
|
||||
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'})
|
||||
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)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user