From e46aa927d231af83724683c7286d9db503e24cf7 Mon Sep 17 00:00:00 2001
From: z8018 <1282578289@qq.com>
Date: 星期二, 10 六月 2025 11:46:20 +0800
Subject: [PATCH] 1
---
项目代码/WCS/WIDESEAWCS_Client/src/views/bigdata.vue | 226 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 186 insertions(+), 40 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/bigdata.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/bigdata.vue"
index d10ce9c..28c4c25 100644
--- "a/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/bigdata.vue"
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/WCS/WIDESEAWCS_Client/src/views/bigdata.vue"
@@ -7,33 +7,36 @@
:id="item.stationCode"
@click="handleClick"
>
- <h1>{{ item.stationCode }}--{{ item.orderData.length > 0 ?item.orderData[0].orderCode +"-"+ item.orderData[0].cusName + "-" +item.orderData[0].orderName : '鏆傛棤璁㈠崟'}}</h1>
+ <h1>{{ item.stationCode }}--{{ item.orderData.length > 0 ?item.orderCode +"-"+ item.cusName + "-" +item.orderName : '鏆傛棤璁㈠崟'}}</h1>
+ <!-- <h1></h1> -->
<div class="bigdata-content">
- <div class="content-item" :data-value="item.sortedNum">宸插垎鎷ｆ暟閲�</div>
- <div class="content-item" :data-value="item.unsortedNum">鏈垎鎷ｆ暟閲�</div>
- <div class="content-item" :data-value="item.orderTotalNum">璁㈠崟鎬绘暟閲�</div>
+ <div class="content-item" :data-value="item.stationSortedNum">宸ヤ綅鏁�</div>
+ <div class="content-item" :data-value="item.sortedNum">宸插垎鎷�</div>
+ <div class="content-item" :data-value="item.unsortedNum">鏈垎鎷�</div>
+ <div class="content-item" :data-value="item.orderTotalNum">璁㈠崟鏁�</div>
</div>
<div class="bigdata-table">
<table>
<thead>
<tr>
- <th>璁㈠崟缂栧彿</th>
- <th>瀹㈡埛鍚嶇О</th>
- <th>璁㈠崟鍚嶇О</th>
- <th>鎵规</th>
- <th>浜у搧鍚嶇О</th>
+ <th>宸ヤ欢鍚�</th>
+ <th>鐗╂枡鍚�</th>
+ <th>灏哄</th>
+ <th>宸ュ簭</th>
</tr>
</thead>
<tbody>
<tr v-for="(order,index) in item.orderData" :key="index">
- <td>{{ order.orderCode }}</td>
- <td>{{ order.cusName }}</td>
- <td>{{ order.orderName }}</td>
- <td>{{ order.batch }}</td>
- <td>{{ order.productName }}</td>
+ <td>{{ order.name }}</td>
+ <td>{{ order.baseName }}</td>
+ <td>{{ order.size }}</td>
+ <td>{{ order.process }}</td>
</tr>
</tbody>
</table>
+ </div>
+ <div :id="item.stationCode + '-modal'" class="modal-overlay">
+ <div class="modal-content">璇锋斁琛�</div>
</div>
</div>
</div>
@@ -149,15 +152,62 @@
this.getStations(deviceCode);
},
methods: {
+ modalOverlay(stationCode, show) {
+ const modal = document.getElementById(stationCode + "-modal");
+ if (modal) {
+ if (show) {
+ const element = document.getElementById(stationCode); // 鑾峰彇鍏冪礌
+ modal.style.display = "flex"; // 鏄剧ず閬僵灞�
+ modal.style.left = element.offsetLeft + "px"; // 璁剧疆閬僵灞備綅缃�
+ modal.style.top = element.offsetTop + "px"; // 璁剧疆閬僵灞備綅缃�
+ modal.style.width = element.offsetWidth + "px"; // 璁剧疆閬僵灞傚搴�
+ modal.style.height = element.offsetHeight + "px"; // 璁剧疆閬僵灞傞珮搴�
+ } else {
+ modal.style.display = "none"; // 闅愯棌閬僵灞�
+ }
+ // modal.classList.add("modal-blink"); // 娣诲姞闂儊鏁堟灉
+ }
+ },
handleClick() {
const parent = event.target.closest(".bigdata");
parent.classList.remove("flash-bg");
void parent.offsetWidth; // 寮哄埗DOM閲嶇粯
parent.classList.add("flash-bg");
+
+ const stationCode = parent.id;
+ this.modalOverlay(stationCode, true); // 鏄剧ず閬僵灞�
+
+ setTimeout(() => {
+ this.modalOverlay(stationCode, false); // 闅愯棌閬僵灞�
+ }, 10000); // 2绉掑悗闅愯棌閬僵灞�
+ },
+ handleBackgroundColor(stationCode) {
+ const element = document.getElementById(stationCode);
+ if (element) {
+ element.classList.remove("flash-bg");
+ void element.offsetWidth; // 寮哄埗DOM閲嶇粯
+ element.classList.add("flash-bg");
+ }
+ },
+ clearStationContent(stationCode) {
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderTotalNum = 0;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).sortedNum = 0;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).unsortedNum = 0;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).stationSortedNum = 0;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderData = [];
},
createSocket(url) {
// 鍒涘缓WebSocket杩炴帴
- //"ws://127.0.0.1:9295/admin"
this.client = new WebSocket(url);
var _this = this; // 淇濆瓨this鐨勫紩鐢�
this.client.onopen = function() {
@@ -173,17 +223,67 @@
this.client.onerror = function() {};
},
handleMessage(event) {
+ console.log(this.contentData);
const data = JSON.parse(event.data);
- console.log("鏀跺埌娑堟伅锛�", event.data);
+ if (data.release === 1) {
+ this.clearStationContent(data.stationCode);
+ } else {
+ const stationCode = data.stationCode;
+ const orderData = data.orderData;
+ const orderTotalNum = data.orderTotalNum;
+ const sortedNum = data.sortedNum;
+ const unsortedNum = data.unsortedNum;
+ const stationSortedNum = data.stationSortedNum;
+ const orderCode = data.orderCode;
+ const cusName = data.cusName;
+ const orderName = data.orderName;
+ const orderId = data.orderId;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderId = orderId;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderCode = orderCode;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).cusName = cusName;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderName = orderName;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderData = orderData;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).orderTotalNum = orderTotalNum;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).sortedNum = sortedNum;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).unsortedNum = unsortedNum;
+ this.contentData.find(
+ item => item.stationCode === stationCode
+ ).stationSortedNum = stationSortedNum;
+
+ this.handleBackgroundColor(stationCode);
+
+ this.contentData.forEach(item => {
+ if (item.orderId === orderId) {
+ item.sortedNum = sortedNum;
+ item.unsortedNum = unsortedNum;
+ }
+ });
+ }
},
- getStations(deviceCode){
+ getStations(deviceCode) {
this.http
.post(
"/api/Container/GetPutStations?deviceCode=" + deviceCode,
{},
true
)
- .then((x) => {
+ .then(x => {
if (!x.status) return this.$message.error(x.message);
this.contentData = x.data;
});
@@ -193,14 +293,58 @@
</script>
<style scoped>
+.modal-overlay {
+ display: none; /* 榛樿涓嶆樉绀� */
+ position: fixed; /* 鍏ㄥ睆瀹氫綅 */
+ background-color: rgba(0, 0, 0, 1); /* 鍗婇�忔槑榛戣壊閬僵 */
+ z-index: 5; /* 纭繚閬僵鍦ㄥ唴瀹逛箣涓� */
+ opacity: 1; /* 鍒濆瀹屽叏涓嶉�忔槑 */
+ animation: modal-overlay 1.5s infinite; /* 1绉掗棯鐑佷竴娆★紝鏃犻檺娆￠噸澶� */
+}
+
+@keyframes modal-overlay {
+ 0%,
+ 100% {
+ opacity: 1;
+ }
+ 50% {
+ opacity: 0;
+ }
+}
+
+.modal-content {
+ position: absolute; /* 鐩稿瀹氫綅 */
+ top: 50%; /* 鍨傜洿灞呬腑 */
+ left: 50%; /* 姘村钩灞呬腑 */
+ transform: translate(-50%, -50%); /* 绮剧‘灞呬腑 */
+ padding: 20px; /* 鍐呰竟璺� */
+ border-radius: 10px; /* 鍦嗚 */
+ font-size: 20px; /* 瀛椾綋澶у皬 */
+ animation: modal-content 1.5s infinite; /* 1绉掗棯鐑佷竴娆★紝鏃犻檺娆￠噸澶� */
+ font-family: "Microsoft YaHei", sans-serif; /* 瀛椾綋鏍峰紡 */
+ color: #f0f0f0; /* 瀛椾綋棰滆壊 */
+}
+
+@keyframes modal-content {
+ 0%,
+ 100% {
+ font-size: 40px;
+ color: #f0f0f0;
+ }
+ 50% {
+ font-size: 20px;
+ color: #000000;
+ }
+}
+
.bigdata-container {
width: 100%;
height: 100%;
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
- gap: 15px;
- padding: 20px;
+ gap: 5px;
+ padding: 10px;
background: #f8f9fa;
}
@@ -208,7 +352,7 @@
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- padding: 20px;
+ padding: 5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #e9ecef;
overflow: hidden; /* 澶栧眰瀹瑰櫒闅愯棌婧㈠嚭 */
@@ -228,7 +372,7 @@
left: 0;
right: 0;
bottom: 0;
- border-radius: 12px;
+ border-radius: 5px;
animation: bg-flash 1s ease-in-out;
z-index: 1;
}
@@ -254,8 +398,8 @@
/* 淇琛ㄦ牸瀹瑰櫒鏍峰紡 */
.bigdata-table {
- margin-top: 15px;
- padding-top: 10px;
+ margin-top: 5px;
+ padding-top: 5px;
border-top: 1px solid #eee;
flex: 1;
overflow: hidden;
@@ -264,10 +408,10 @@
}
.bigdata h1 {
- font-size: 20px;
+ font-size: 14px;
color: #2d8cf0;
font-weight: 700;
- margin-bottom: 15px;
+ margin-bottom: 5px;
text-shadow: 1px 1px 2px rgba(45, 140, 240, 0.15);
letter-spacing: 0.5px;
font-family: "Microsoft YaHei", sans-serif;
@@ -275,18 +419,18 @@
.bigdata-content {
display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 12px;
- margin: 18px 0;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 5px;
+ margin: 5px 0;
}
.content-item {
position: relative;
background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
- border-radius: 10px;
- padding: 16px 12px;
+ border-radius: 5px;
+ padding: 5px 5px;
color: #343a40;
- font-size: 18px;
+ font-size: 20px;
font-weight: 600;
display: flex;
flex-direction: column;
@@ -299,7 +443,7 @@
.content-item::after {
content: attr(data-value);
color: #2d8cf0;
- font-size: 24px;
+ font-size: 50px;
font-weight: 800;
margin-top: 12px;
text-shadow: 0 2px 4px rgba(45, 140, 240, 0.15);
@@ -334,7 +478,7 @@
border-radius: 10px;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
- margin-top: 15px;
+ margin-top: 5px;
max-height: 290px; /* 鏍规嵁瀹為檯闇�瑕佽皟鏁� */
display: block;
overflow-y: hidden; /* 闅愯棌婊氬姩鏉� */
@@ -347,6 +491,7 @@
z-index: 2;
background: linear-gradient(145deg, #e6f3ff 0%, #d4e7ff 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ opacity: 1;
}
/* 璋冩暣tbody鏄剧ず楂樺害 */
@@ -385,9 +530,10 @@
background: linear-gradient(145deg, #e6f3ff 0%, #d4e7ff 100%);
color: #2d8cf0;
font-weight: 600;
- padding: 14px 12px;
+ padding: 5px 12px;
border-bottom: 2px solid #2d8cf0;
letter-spacing: 0.5px;
+ font-size: 12px;
}
/* 琛ㄦ牸鍗曞厓鏍� */
@@ -395,7 +541,7 @@
padding: 12px;
border-bottom: 1px solid rgba(233, 236, 239, 0.8);
color: #495057;
- font-size: 14px;
+ font-size: 12px;
transition: all 0.25s ease;
}
@@ -438,14 +584,14 @@
.bigdata-table td:first-child {
font-weight: 500;
color: #2d8cf0;
- text-align: left; /* 棣栧垪淇濇寔宸﹀榻� */
- padding-left: 24px; /* 澧炲姞宸︿晶闂磋窛 */
+ text-align: center; /* 棣栧垪淇濇寔宸﹀榻� */
+ padding-left: 5px; /* 澧炲姞宸︿晶闂磋窛 */
}
/* 鏈�鍚庡崟鍏冩牸鍙冲榻� */
.bigdata-table td:last-child {
text-align: right;
- padding-right: 24px;
+ padding-right: 5px;
}
@keyframes scroll {
--
Gitblit v1.9.3