From 59548ecdddf437e77662e202d278f214db3aa4ad Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期二, 11 三月 2025 09:28:43 +0800
Subject: [PATCH] 合并代码
---
UI-Project/src/views/largescreendisplay/screendisplay.vue | 142 +++++++++++++++++++++++++++++++++++++++--------
1 files changed, 118 insertions(+), 24 deletions(-)
diff --git a/UI-Project/src/views/largescreendisplay/screendisplay.vue b/UI-Project/src/views/largescreendisplay/screendisplay.vue
index 147e107..078881d 100644
--- a/UI-Project/src/views/largescreendisplay/screendisplay.vue
+++ b/UI-Project/src/views/largescreendisplay/screendisplay.vue
@@ -12,6 +12,7 @@
const blindb = ref(false)
const { t } = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
+
let socket = null;
const rawGlassStorageDetailList = ref([])
const orderDTOS = ref([])
@@ -20,6 +21,7 @@
rawGlassStorageDetailList.value = data.rawGlassStorageDetailList[0]
orderDTOS.value = data.orderDTOS[0]
};
+
let socket1 = null;
const edgOneTasks = ref([])
const edgTwoTasks = ref([])
@@ -41,9 +43,11 @@
}
};
+
let socket2 = null;
const temperingTaskType = ref([])
const temperingGlassInfoList = ref([])
+const temperingGlassInfoOutList = ref([])
const socketUrl2 = `ws://${WebSocketHost}:${host}/api/temperingGlass/api/talk/largenScreen`;
const handleMessage2 = (data) => {
temperingTaskType.value = data.temperingTaskType[0];
@@ -52,7 +56,28 @@
numBoxes3.value =temperingTaskType.value;
boxStart3();
}
+ temperingGlassInfoOutList.value = data.temperingGlassInfoOutList[0];
+ if(numBoxes4.value !=temperingGlassInfoOutList.value){
+ numBoxes4.value =temperingGlassInfoOutList.value;
+ boxStart3();
+ }
};
+
+let socket3 = null;
+const bigStorageCageUsage = ref([])
+const socketUrl3 = `ws://${WebSocketHost}:${host}/api/cacheVerticalGlass/api/talk/largenScreen`;
+const handleMessage3 = (data) => {
+ bigStorageCageUsage.value = data.bigStorageCageUsage[0];
+};
+
+let socket4 = null;
+const hollowBigStorageCageUsage = ref([])
+const socketUrl4 = `ws://${WebSocketHost}:${host}/api/hollowGlass/api/talk/largenScreen`;
+const handleMessage4 = (data) => {
+ hollowBigStorageCageUsage.value = data.hollowBigStorageCageUsage[0];
+};
+
+
const tableDatad = ref([]);
const patternUsage = async () => {
try {
@@ -74,21 +99,8 @@
thickness: '',
films: ''
})
-// const tableDatac = ref([]);
-// const patternUsage = async () => {
-// try {
-// const response = await request.post('/glassStorage/rawGlassStorageDetails/patternUsage?width=' + ptnusage.value.width + '&height=' + ptnusage.value.height + '&thickness=' + ptnusage.value.thickness + '&films=' + ptnusage.value.films);
-// if (response.code == 200) {
-// ElMessage.success(response.message);
-// tableDatad.value = response.data;
-// } else {
-// ElMessage.error(response.message);
-// }
-// }
-// catch (error) {
-// console.error(error);
-// }
-// }
+
+
// 鐐瑰嚮涓嬫柟寮圭獥
const handlehistorical = (row) => {
blindb.value = true;
@@ -99,10 +111,13 @@
boxStart();
boxStart2();
boxStart3();
+ boxStart4();
requestAnimationFrame(animate);
socket = initializeWebSocket(socketUrl, handleMessage);
socket1 = initializeWebSocket(socketUrl1, handleMessage1);
socket2 = initializeWebSocket(socketUrl2, handleMessage2);
+ socket3 = initializeWebSocket(socketUrl3, handleMessage3);
+ socket4 = initializeWebSocket(socketUrl4, handleMessage4);
const endTime = dayjs().startOf('minute'); // 褰撳墠鏃堕棿锛岀簿纭埌鍒嗛挓
const startTime = endTime.subtract(1, 'day').startOf('minute'); // 褰撳墠鏃堕棿鐨勫墠涓�澶╋紝绮剧‘鍒板垎閽�
// 璁剧疆鏃堕棿鑼冨洿涓� [寮�濮嬫椂闂�, 缁撴潫鏃堕棿]
@@ -116,26 +131,35 @@
closeWebSocket(socket);
closeWebSocket(socket1);
closeWebSocket(socket2);
+ closeWebSocket(socket3);
+ closeWebSocket(socket4);
}
});
onBeforeUnmount(() => {
console.log("鍏抽棴浜�")
closeWebSocket();
});
+
const numBoxes = ref(5);
const numBoxes2 = ref(5);
-const numBoxes3 = ref(5); // 鍙姩鎬佷慨鏀圭殑 div 鏁伴噺
+const numBoxes3 = ref(5);
+const numBoxes4 = ref(1);
const speed = 0.1;
const maxX = 200; // 缁堢偣X鍧愭爣
-const maxY = -80; // 缁堢偣Y鍧愭爣
+const maxY = -73; // 缁堢偣Y鍧愭爣
const maxX2 = 250; // 缁堢偣X鍧愭爣
const maxY2 = -165; // 缁堢偣Y鍧愭爣
const maxX3 = 100; // 缁堢偣X鍧愭爣
-const maxY3 = -55; // 缁堢偣Y鍧愭爣
+const maxY3 = -75; // 缁堢偣Y鍧愭爣
+const maxX4 = 60; // 缁堢偣X鍧愭爣
+const maxY4 = 0; // 缁堢偣Y鍧愭爣
const delayFrames = 600; // 姣忎釜 div 鐨勫欢杩熷抚鏁�
+
const boxes = ref([]);
const boxes2 = ref([]);
const boxes3 = ref([]);
+const boxes4 = ref([]);
+
// 鍒濆鍖� div 鏁版嵁
const boxStart = () => {
boxes.value = [];
@@ -173,6 +197,7 @@
});
}
}
+
const boxStart3 = () => {
boxes3.value = [];
for (let i = 0; i < numBoxes3.value; i++) {
@@ -191,12 +216,34 @@
});
}
}
+
+const boxStart4 = () => {
+ boxes4.value = [];
+ for (let i = 0; i < numBoxes4.value; i++) {
+ boxes4.value.push({
+ x: 0,
+ y: 0, // 鍒濆浣嶇疆鍦ㄥ簳閮�
+ direction: 'right',
+ delay: i * delayFrames,
+ style: {
+ width: '15px',
+ height: '15px',
+ backgroundColor: i % 2 === 0 ? '#911005' : 'blue',
+ position: 'absolute',
+ transform: `translate(0px, 0px)`
+ }
+ });
+}
+}
+
+
const animate = () => {
boxes.value.forEach((box) => {
if (box.delay > 0) {
box.delay--;
return;
}
+
if (box.direction === 'up') {
box.y -= speed;
if (box.y <= maxY) {
@@ -211,16 +258,19 @@
box.direction = 'up';
}
}
+
box.style = {
...box.style,
transform: `translate(${box.x}px, ${box.y}px)`
};
});
+
boxes2.value.forEach((box) => {
if (box.delay > 0) {
box.delay--;
return;
}
+
if (box.direction === 'up') {
box.y -= speed;
if (box.y <= maxY2) {
@@ -240,11 +290,13 @@
transform: `translate(${box.x}px, ${box.y}px)`
};
});
+
boxes3.value.forEach((box) => {
if (box.delay > 0) {
box.delay--;
return;
}
+
if (box.direction === 'up') {
box.y -= speed;
if (box.y <= maxY3) {
@@ -265,11 +317,34 @@
transform: `translate(${box.x}px, ${box.y}px)`
};
});
+
+ boxes4.value.forEach((box) => {
+ if (box.delay > 0) {
+ box.delay--;
+ return;
+ }
+
+ if (box.direction === 'right') {
+ box.x += speed;
+ if (box.x >= maxX4) {
+ // box.y = 0; // 纭繚涓嶄細瓒呭嚭鐣岄檺
+ box.x = 0;
+ box.y = 0; // 閲嶆柊鍥炲埌搴曢儴
+ }
+ }
+ box.style = {
+ ...box.style,
+ transform: `translate(${box.x}px, ${box.y}px)`
+ };
+ });
+
requestAnimationFrame(animate);
};
+
</script>
<template>
<div style="height: 500px;">
+
<div class="awatch">
<div class="img-screen" alt="Screen">
<!-- 閽㈠寲鑹插潡 -->
@@ -298,19 +373,30 @@
<div v-for="(item,index) in rawGlassStorageDetailList.slice(28,29)" :key="index" :style='"width: "+(item.remainQuantity / 5)+"px;height: 5px;background-color: #911005;"'></div>
</div>
<!-- 纾ㄨ竟鑹插潡 -->
- <div class="container" style="position: relative;width: 20px;height: 20px;top: 572px;left: 645px;border: 1px solid #000;position: absolute;">
+ <div class="container" style="position: relative;width: 20px;height: 20px;top: 572px;left: 648px;border: 1px solid #000;position: absolute;">
<div v-for="(box, index) in boxes" :key="index" class="box" :style="box.style"></div>
</div>
<div class="container" style="position: relative;width: 20px;height: 20px;top: 625px;left: 700px;border: 1px solid #000;position: absolute;">
- <div v-for="(box, index) in boxes2" :key="index" class="box1" :style="box.style"></div>
+ <div v-for="(box, index) in boxes2" :key="index" class="box" :style="box.style"></div>
</div>
<!-- 閽㈠寲杩愬姩鑹插潡 -->
<div class="container" style="position: relative;width: 20px;height: 20px;top: 438px;left: 196px;border: 1px solid #000;position: absolute;">
- <div v-for="(box, index) in boxes3" :key="index" class="box1" :style="box.style"></div>
+ <div v-for="(box, index) in boxes3" :key="index" class="box" :style="box.style"></div>
</div>
- <!-- <div class="raw" style="width: 31px;height: 32px;top: 571px;left: 300px;position: absolute;background-color: #911005;">
- <div v-for="(item,index) in rawGlassStorageDetailList.slice(0,7)" :key="index" :style='"width: "+item.remainQuantity+"px;height: 5px;background-color: #911005;"'></div>
- </div> -->
+ <div class="container" style="position: relative;width: 20px;height: 20px;top: 355px;left: 496px;border: 1px solid #000;position: absolute;">
+ <div v-for="(box, index) in boxes4" :key="index" class="box" :style="box.style"></div>
+ </div>
+ <!-- 閽㈠寲鍓嶅ぇ鐞嗙墖鑹插潡 -->
+ <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(0,1)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 447px;left: 314px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(1,2)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 463px;left: 314px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(2,3)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 478px;left: 314px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in bigStorageCageUsage.slice(3,4)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 493px;left: 314px;position: absolute;background-color: #911005;"'></div>
+ <!-- 涓┖鍓嶅ぇ鐞嗙墖鑹插潡 -->
+ <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(0,1)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 337px;left: 671px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(1,2)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 353px;left: 671px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(2,3)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 369px;left: 671px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(3,4)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 385px;left: 671px;position: absolute;background-color: #911005;"'></div>
+ <div class="container" v-for="(item,index) in hollowBigStorageCageUsage.slice(4,5)" :key="index" :style='"position: relative;width: "+(38*item.percentage/100)+"px;height: 13px;top: 401px;left: 671px;position: absolute;background-color: #911005;"'></div>
</div>
<div class="clickable-area" @click="handlehistorical"
style="position: relative;width: 110px;height: 140px;top: 603px;left: 297px;"></div>
@@ -421,16 +507,19 @@
line-height: 20px;
margin-left: 100px;
}
+
#dta {
display: block;
float: left;
line-height: 20px;
margin-left: 80%;
}
+
#dialog-footer {
text-align: center;
margin-top: -15px;
}
+
#message {
text-align: center;
align-items: center;
@@ -440,9 +529,11 @@
background-color: #337ecc;
margin-left: 28%;
}
+
#awatch {
height: 460px;
}
+
.img-screen {
max-width: 48%;
max-height: 100%;
@@ -459,6 +550,7 @@
height: 0;
padding-bottom: 50%; */
}
+
.clickable-area {
cursor: pointer;
/* 鎸囩ず杩欐槸涓�涓彲鐐瑰嚮鐨勫尯鍩� */
@@ -467,9 +559,11 @@
line-height: 95px;
/* 濡傛灉闇�瑕侊紝浣挎枃鏈瀭鐩村眳涓� */
}
+
/* .awatch{
height: 460px;
/* max-width: 100%; */
+
.box {
transition: transform 0.016s linear;
}
--
Gitblit v1.8.0