root/wq-wms-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:配盘看板

Browse Source
This commit is contained in:
zhaoyf
2026-06-13 16:45:20 +08:00
parent bd522fb4ea
commit 54074c420e
5 changed files with 598 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
Distributedboard/index.html Normal file
View File

@@ -0,0 +1,499 @@
<html lang="zh-CN"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>智能配盘监控系统 - Smart Kitting Dashboard</title>
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap');
:root {
--primary: #00d4ff;
--secondary: #00ff88;
--warning: #ff6b35;
--bg-dark: #050c17;
--card-bg: rgba(10, 22, 40, 0.7);
}
body {
background-color: var(--bg-dark);
color: #e2e8f0;
font-family: 'Noto Sans SC', sans-serif;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.tech-font {
font-family: 'Orbitron', sans-serif;
}
/* 背景网格 */
.bg-grid {
background-image:
linear-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 212, 255, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
}
/* 扫描线动画 */
.scanline {
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
position: absolute;
top: 0;
left: 0;
opacity: 0.3;
animation: scan 8s linear infinite;
z-index: 50;
pointer-events: none;
}
@keyframes scan {
0% { top: 0%; }
100% { top: 100%; }
}
/* 呼吸光效 */
.glow-border {
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
border: 1px solid rgba(0, 212, 255, 0.3);
}
.glow-text {
text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
/* 工业零件模型样式 */
.part-svg {
filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.4));
transition: all 0.3s ease;
}
.part-card:hover .part-svg {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8));
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 2px;
}
.corner-deco::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
width: 15px;
height: 15px;
border-top: 2px solid var(--primary);
border-left: 2px solid var(--primary);
}
.corner-deco::after {
content: '';
position: absolute;
bottom: -2px;
right: -2px;
width: 15px;
height: 15px;
border-bottom: 2px solid var(--primary);
border-right: 2px solid var(--primary);
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(4px);
}
.modal-box {
background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 100%);
border: 1px solid rgba(0, 212, 255, 0.4);
border-radius: 4px;
padding: 32px 40px;
min-width: 400px;
position: relative;
box-shadow: 0 0 40px rgba(0, 212, 255, 0.15), 0 0 80px rgba(0, 212, 255, 0.05);
}
.modal-box .corner-deco::before,
.modal-box .corner-deco::after {
width: 20px;
height: 20px;
}
.sect-btn {
padding: 12px 32px;
border: 1px solid rgba(0, 212, 255, 0.3);
background: rgba(0, 212, 255, 0.05);
color: #e2e8f0;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 2px;
min-width: 100px;
text-align: center;
}
.sect-btn:hover {
background: rgba(0, 212, 255, 0.15);
border-color: rgba(0, 212, 255, 0.7);
box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
color: #00d4ff;
}
.sect-btn.active {
background: rgba(0, 212, 255, 0.2);
border-color: #00d4ff;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
color: #00d4ff;
}
.confirm-btn {
padding: 10px 48px;
background: linear-gradient(135deg, #00d4ff, #0088cc);
border: none;
color: #050c17;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s ease;
letter-spacing: 0.1em;
}
.confirm-btn:hover {
box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
transform: translateY(-1px);
}
.confirm-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.status-dot.offline {
background: #666;
}
.status-dot.online {
background: #00ff88;
box-shadow: 0 0 6px #00ff88;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.part-image {
max-width: 96px;
max-height: 96px;
object-fit: contain;
filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.4));
transition: all 0.3s ease;
}
.part-card:hover .part-image {
transform: scale(1.1);
filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8));
}
</style>
</head>
<body class="bg-grid flex flex-col p-4 relative">
<div class="scanline"></div>
<!-- 顶部标题栏 -->
<header class="flex-none h-20 relative flex items-center justify-between px-8 border-b border-cyan-900/50 mb-4 bg-black/20 backdrop-blur-sm">
<div class="flex items-center gap-4">
<div class="w-10 h-10 flex items-center justify-center border border-cyan-500 rounded-sm rotate-45">
<iconify-icon class="text-cyan-400 -rotate-45 text-2xl" icon="mdi:factory"></iconify-icon>
</div>
<div>
<h1 class="text-3xl font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500 glow-text">智能配盘监控系统</h1>
<p class="text-[10px] tech-font text-cyan-700 tracking-[0.3em]">SMART KITTING DASHBOARD V2.0</p>
</div>
</div>
<!-- 装饰线条 -->
<div class="absolute left-1/2 -translate-x-1/2 top-0 h-full w-[400px] flex items-center justify-center">
<div class="h-[1px] w-full bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-50"></div>
<div class="absolute top-0 px-6 py-1 bg-cyan-900/30 border-x border-b border-cyan-500/50 rounded-b-lg">
<span class="text-xs text-cyan-400 font-bold tracking-widest">PRODUCTION LINE STATUS: ACTIVE</span>
</div>
</div>
<div class="flex items-center gap-8">
<div class="flex items-center gap-3 cursor-pointer px-3 py-1 border border-cyan-900/50 rounded-sm hover:border-cyan-500/50 hover:bg-cyan-900/20 transition-all" id="sect-selector">
<iconify-icon class="text-cyan-400 text-lg" icon="mdi:map-marker-outline"></iconify-icon>
<span class="text-sm text-cyan-300 font-bold" id="current-sect">未选择</span>
<span class="status-dot offline" id="connection-dot"></span>
</div>
<div class="text-right">
<div class="text-xs text-cyan-600 tech-font" id="current-date">2026.06.13周六</div>
<div class="text-2xl font-bold tech-font text-cyan-400 glow-text" id="current-time">00:00:00</div>
</div>
</div>
</header>
<!-- 主内容区 -->
<main class="flex-1 flex gap-6 min-h-0">
<!-- 左侧区域 (55%) -->
<section class="w-[55%] flex flex-col gap-4">
<!-- 工单概览卡片 -->
<div class="bg-cyan-950/20 border border-cyan-900/50 p-6 rounded-sm relative corner-deco backdrop-blur-md">
<div class="flex justify-between items-end">
<div>
<span class="text-xs text-cyan-600 block mb-1" style="font-size: 15px; font-weight: 700;">当前工单号</span>
<h2 class="text-5xl font-bold tech-font text-[#00d4ff] tracking-tighter" id="work-order-code">--</h2>
</div>
<div class="text-right">
<span class="text-xs text-cyan-600 block mb-1">OUTLET LOCATION</span>
<div class="flex items-center gap-2">
<span class="text-3xl font-bold text-[#ff6b35] tech-font" id="load-port">--</span>
<div class="w-3 h-3 rounded-full bg-[#00ff88] animate-ping" id="load-port-dot" style="display:none;"></div>
</div>
</div>
</div>
<div class="mt-6 flex items-center gap-4">
<div class="flex-1 h-2 bg-cyan-900/50 rounded-full overflow-hidden p-[1px]">
<div class="h-full bg-gradient-to-r from-cyan-600 to-cyan-400 rounded-full shadow-[0_0_10px_rgba(0,212,255,0.5)]" id="progress-bar" style="width:0%"></div>
</div>
<span class="text-xs tech-font text-cyan-400" id="progress-text">WAITING...</span>
</div>
</div>
<!-- 零件清单表格 -->
<div class="flex-1 bg-cyan-950/10 border border-cyan-900/30 rounded-sm overflow-hidden flex flex-col backdrop-blur-sm">
<div class="bg-cyan-900/30 px-6 py-3 flex items-center justify-between border-b border-cyan-800/50">
<div class="flex items-center gap-2">
<iconify-icon class="text-cyan-400" icon="mdi:format-list-bulleted"></iconify-icon>
<span class="font-bold tracking-wider text-cyan-100">零件配盘清单 / Parts List</span>
</div>
<span class="text-[10px] text-cyan-600 tech-font" id="parts-total">TOTAL: 0 ITEMS</span>
</div>
<div class="flex-1 overflow-y-auto">
<table class="w-full text-left border-collapse">
<thead class="sticky top-0 bg-[#0a1628] z-10">
<tr class="text-[11px] text-cyan-500 uppercase tracking-widest border-b border-cyan-900/50">
<th class="px-6 py-4 font-medium">No.</th>
<th class="px-6 py-4 font-medium">零件编码 P/N</th>
<th class="px-6 py-4 font-medium">零件名称 Name</th>
<th class="px-6 py-4 font-medium text-right">需求数量 Qty</th>
<th class="px-6 py-4 font-medium">单位 Unit</th>
</tr>
</thead>
<tbody class="text-sm" id="parts-tbody">
</tbody>
</table>
</div>
</div>
</section>
<!-- 右侧区域 (45%) -->
<section class="w-[45%] flex flex-col gap-4">
<div class="bg-cyan-900/30 px-6 py-3 flex items-center gap-2 border border-cyan-900/50 rounded-sm">
<iconify-icon class="text-cyan-400" icon="mdi:view-grid-outline"></iconify-icon>
<span class="font-bold tracking-wider text-cyan-100">零件示意图 / Visualized Parts</span>
</div>
<div class="flex-1 grid grid-cols-2 auto-rows-min gap-4 overflow-y-auto" id="parts-grid">
</div>
</section>
</main>
<!-- 底部装饰条 -->
<footer class="flex-none h-8 mt-4 flex items-center justify-between text-[10px] text-cyan-800 tech-font tracking-widest px-4">
<div class="flex gap-4">
<span>SYSTEM MONITOR: OK</span>
<span id="footer-sync">DATA SYNC: IDLE</span>
<span>NETWORK: 5G_CONNECTED</span>
</div>
<div class="flex gap-1">
<div class="w-1 h-3 bg-cyan-900"></div>
<div class="w-1 h-3 bg-cyan-700"></div>
<div class="w-1 h-3 bg-cyan-500"></div>
<div class="w-1 h-3 bg-cyan-300"></div>
<div class="w-6 h-3 bg-cyan-100/20"></div>
</div>
<div>DESIGNED FOR INDUSTRIAL INTELLIGENCE</div>
</footer>
<!-- 工作区选择弹窗 -->
<div class="modal-overlay" id="sect-modal">
<div class="modal-box corner-deco">
<h3 class="text-xl font-bold text-cyan-300 tracking-wider mb-2">选择工作区 / SELECT WORK ZONE</h3>
<p class="text-xs text-cyan-600 mb-6">请选择当前需要监控的工作区域，系统将自动开始刷新数据</p>
<div class="flex gap-4 mb-8 justify-center" id="sect-buttons">
</div>
<div class="flex justify-center">
<button class="confirm-btn" id="confirm-sect-btn" disabled>确认选择</button>
</div>
</div>
</div>
<script>
const API_BASE = 'http://127.0.0.1:8011';
const SECT_LIST = ['work1', 'work2', 'work3', 'work4', 'work5', 'work6'];
let curSect = null;
let fetchTimer = null;
let selectedSectInModal = null;
function updateDateTime() {
const now = new Date();
const timeStr = now.toLocaleTimeString('zh-CN', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
document.getElementById('current-time').textContent = timeStr;
const options = { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short' };
const dateStr = now.toLocaleDateString('zh-CN', options).toUpperCase().replace(/\//g, '.');
document.getElementById('current-date').textContent = dateStr;
}
setInterval(updateDateTime, 1000);
updateDateTime();
function initSectModal() {
const container = document.getElementById('sect-buttons');
SECT_LIST.forEach(sect => {
const btn = document.createElement('button');
btn.className = 'sect-btn';
btn.textContent = sect.toUpperCase();
btn.dataset.sect = sect;
btn.addEventListener('click', () => {
document.querySelectorAll('.sect-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
selectedSectInModal = sect;
document.getElementById('confirm-sect-btn').disabled = false;
});
container.appendChild(btn);
});
}
function openSectModal() {
selectedSectInModal = null;
document.querySelectorAll('.sect-btn').forEach(b => b.classList.remove('active'));
document.getElementById('confirm-sect-btn').disabled = true;
document.getElementById('sect-modal').style.display = 'flex';
}
function closeSectModal() {
document.getElementById('sect-modal').style.display = 'none';
}
document.getElementById('confirm-sect-btn').addEventListener('click', () => {
if (!selectedSectInModal) return;
curSect = selectedSectInModal;
document.getElementById('current-sect').textContent = curSect.toUpperCase();
closeSectModal();
startFetchData();
});
document.getElementById('sect-selector').addEventListener('click', openSectModal);
function startFetchData() {
if (fetchTimer) clearInterval(fetchTimer);
document.getElementById('connection-dot').className = 'status-dot online';
document.getElementById('footer-sync').textContent = 'DATA SYNC: REALTIME';
document.getElementById('load-port-dot').style.display = 'block';
fetchData();
fetchTimer = setInterval(fetchData, 1000);
}
function stopFetchData() {
if (fetchTimer) {
clearInterval(fetchTimer);
fetchTimer = null;
}
document.getElementById('connection-dot').className = 'status-dot offline';
document.getElementById('footer-sync').textContent = 'DATA SYNC: IDLE';
}
async function fetchData() {
if (!curSect) return;
try {
const url = API_BASE + '/api/disScreen?curSect=' + encodeURIComponent(curSect);
const resp = await fetch(url);
if (!resp.ok) throw new Error('HTTP ' + resp.status);
const data = await resp.json();
renderData(data);
} catch (e) {
console.warn('Fetch error:', e.message);
}
}
function renderData(data) {
document.getElementById('work-order-code').textContent = data.WorkOrderCode || '--';
document.getElementById('load-port').textContent = data.LoadPort || '--';
const list = data.partsList || [];
document.getElementById('parts-total').textContent = 'TOTAL: ' + list.length + ' ITEMS';
const tbody = document.getElementById('parts-tbody');
tbody.innerHTML = '';
list.forEach((part, idx) => {
const tr = document.createElement('tr');
tr.className = 'border-b border-cyan-900/20 hover:bg-cyan-400/5 transition-colors group';
const no = String(idx + 1).padStart(2, '0');
const qty = part.BomQty % 1 === 0 ? part.BomQty : part.BomQty.toFixed(1);
tr.innerHTML =
'<td class="px-6 py-4 tech-font text-cyan-700 group-hover:text-cyan-400">' + no + '</td>' +
'<td class="px-6 py-4 font-mono text-cyan-100">' + part.MaterialCode + '</td>' +
'<td class="px-6 py-4">' + part.MaterialName + '</td>' +
'<td class="px-6 py-4 text-right tech-font font-bold text-cyan-400">' + qty + '</td>' +
'<td class="px-6 py-4 text-cyan-600">' + part.Unit + '</td>';
tbody.appendChild(tr);
});
const grid = document.getElementById('parts-grid');
grid.innerHTML = '';
list.forEach((part) => {
const card = document.createElement('div');
card.className = 'part-card bg-card-bg border border-cyan-900/50 p-4 rounded-sm flex flex-col items-center justify-center relative glow-border transition-all hover:bg-cyan-900/20';
let visual = '';
if (part.PartsImage) {
visual = '<img class="part-image" src="' + part.PartsImage + '" alt="' + part.MaterialName + '" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'block\'">' +
'<svg class="part-svg w-24 h-24" viewBox="0 0 100 100" style="display:none"><circle cx="50" cy="50" fill="none" r="30" stroke="#00d4ff" stroke-width="2"></circle><text x="50" y="54" text-anchor="middle" fill="#00d4ff" font-size="12">' + part.MaterialCode + '</text></svg>';
} else {
visual = '<svg class="part-svg w-24 h-24" viewBox="0 0 100 100"><circle cx="50" cy="50" fill="none" r="30" stroke="#00d4ff" stroke-width="2"></circle><text x="50" y="54" text-anchor="middle" fill="#00d4ff" font-size="12">' + part.MaterialCode + '</text></svg>';
}
card.innerHTML =
'<div class="absolute top-2 left-2 text-[10px] tech-font text-cyan-700">P/N: ' + part.MaterialCode + '</div>' +
visual +
'<span class="mt-2 text-sm font-bold text-cyan-200">' + part.MaterialName + '</span>' +
'<span class="text-xs text-cyan-500 tech-font">' + part.BomQty + ' ' + part.Unit + '</span>';
grid.appendChild(card);
});
}
initSectModal();
openSectModal();
</script>
</body></html>

31
nladmin-system/wms-server/src/main/java/org/nl/wms/bigscreen_manage/controller/DisScreenController.java Normal file
View File

@@ -0,0 +1,31 @@
package org.nl.wms.bigscreen_manage.controller;
import cn.dev33.satoken.annotation.SaIgnore;
import org.nl.wms.bigscreen_manage.service.DisScreenService;
import org.nl.wms.bigscreen_manage.service.dto.DistributionModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api/disScreen")
public class DisScreenController {
@Autowired
private DisScreenService disScreenService;
@GetMapping
@SaIgnore
public ResponseEntity<DistributionModel> getData(@RequestParam String curSect){
DistributionModel data = disScreenService.getData(curSect);
return new ResponseEntity<>(data, HttpStatus.OK);
}
@PostMapping
@SaIgnore
public ResponseEntity setData(@RequestBody DistributionModel distributionModel){
disScreenService.setData(distributionModel);
return new ResponseEntity<>(HttpStatus.OK);
}
}

8
nladmin-system/wms-server/src/main/java/org/nl/wms/bigscreen_manage/service/DisScreenService.java Normal file
View File

@@ -0,0 +1,8 @@
package org.nl.wms.bigscreen_manage.service;
import org.nl.wms.bigscreen_manage.service.dto.DistributionModel;
public interface DisScreenService {
DistributionModel getData(String curSect);
void setData(DistributionModel model);
}

32
nladmin-system/wms-server/src/main/java/org/nl/wms/bigscreen_manage/service/dto/DistributionModel.java Normal file
View File

@@ -0,0 +1,32 @@
package org.nl.wms.bigscreen_manage.service.dto;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;
import java.math.BigDecimal;
import java.util.List;
@Data
public class DistributionModel {
@JsonProperty("WorkOrderCode")
private String WorkOrderCode;//工单号
@JsonProperty("LoadPort")
private String LoadPort;//上料口
@JsonProperty("WorkSect")
private String WorkSect;//工作区
private List<Parts> partsList;
@Data
public static class Parts {
@JsonProperty("MaterialCode")
private String MaterialCode;
@JsonProperty("MaterialName")
private String MaterialName;
@JsonProperty("BomQty")
private BigDecimal BomQty;
@JsonProperty("Unit")
private String Unit;
@JsonProperty("PartsImage")
private String PartsImage;
}
}

28
nladmin-system/wms-server/src/main/java/org/nl/wms/bigscreen_manage/service/impl/DisScreenServiceImpl.java Normal file
View File

@@ -0,0 +1,28 @@
package org.nl.wms.bigscreen_manage.service.impl;
import cn.hutool.core.util.StrUtil;
import org.nl.common.exception.BadRequestException;
import org.nl.wms.bigscreen_manage.service.DisScreenService;
import org.nl.wms.bigscreen_manage.service.dto.DistributionModel;
import org.springframework.stereotype.Service;
import java.util.concurrent.ConcurrentHashMap;
@Service
public class DisScreenServiceImpl implements DisScreenService {
private ConcurrentHashMap<String,DistributionModel> modelMap = new ConcurrentHashMap<>();
@Override
public DistributionModel getData(String curSect) {
return modelMap.get(curSect);
}
@Override
public void setData(DistributionModel model) {
if (StrUtil.isEmptyIfStr(model.getWorkSect())){
throw new BadRequestException("参数WorkSect为空");
}
modelMap.put(model.getWorkSect(), model);
}
}