root/nl-acs3.0
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:增加AGV看板

Browse Source
This commit is contained in:
zhangzq
2026-01-21 18:20:21 +08:00
parent eb2eb764d7
commit 19a472edd2
2 changed files with 92 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
nl-vue/src/views/nl_agv/screen/dashboard-styles.less
View File

@@ -9,8 +9,7 @@
background: #0a1929;
color: #fff;
overflow: hidden;
height: 100%;
min-height: 100vh;
height: 100vh;
position: relative;
width: 100%;
}
@@ -102,12 +101,13 @@
padding: 20px;
z-index: 100;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(13, 27, 62, 0.5);
max-height: calc(100% - 120px);
max-height: calc(100vh - 120px);
overflow-y: auto;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
&.hidden {
transform: translateX(-100%);
transform: translateX(calc(-100% - 20px));
left: -350px;
}
&::-webkit-scrollbar {
@@ -131,21 +131,39 @@
backdrop-filter: blur(10px);
border: 1px solid rgba(64, 224, 208, 0.3);
border-radius: 8px;
padding: 20px;
padding: 0;
z-index: 100;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(13, 27, 62, 0.5);
max-height: calc(100% - 120px);
overflow-y: auto;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateX(100%);
max-height: calc((100vh - 120px) * 2 / 3);
display: flex;
flex-direction: column;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, right 0.3s ease-in-out;
transform: translateX(calc(100% + 20px));
right: -400px;
opacity: 0;
pointer-events: none;
&.show {
transform: translateX(0);
right: 20px;
opacity: 1;
pointer-events: auto;
}
}
.detail-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px 15px 20px;
border-bottom: 1px solid rgba(64, 224, 208, 0.3);
flex-shrink: 0;
}
.detail-panel-content {
flex: 1;
overflow-y: auto;
padding: 20px;
&::-webkit-scrollbar {
width: 6px;
@@ -155,15 +173,10 @@
background: rgba(64, 224, 208, 0.5);
border-radius: 3px;
}
}
.detail-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(64, 224, 208, 0.3);
&::-webkit-scrollbar-track {
background: rgba(13, 27, 62, 0.3);
}
}
.detail-panel-title {
@@ -191,16 +204,16 @@
}
}
.detail-card {
margin-bottom: 15px;
padding: 20px;
// 使用深度选择器确保 v-html 内容的样式生效
:deep(.detail-item) {
margin-bottom: 20px;
padding: 15px;
background: rgba(64, 224, 208, 0.1);
border-radius: 6px;
transition: all 0.3s ease;
&:hover {
background: rgba(64, 224, 208, 0.15);
transform: translateX(-2px);
}
&:last-child {
@@ -208,15 +221,15 @@
}
}
.detail-card-label {
:deep(.detail-item-label) {
font-size: 14px;
color: #b0bec5;
margin-bottom: 10px;
margin-bottom: 8px;
font-weight: normal;
}
.detail-card-value {
font-size: 24px;
:deep(.detail-item-value) {
font-size: 18px;
font-weight: bold;
color: #40e0d0;
line-height: 1.2;
@@ -279,7 +292,7 @@
justify-content: center;
color: #40e0d0;
font-size: 20px;
transition: all 0.3s;
transition: left 0.3s ease-in-out, background 0.3s ease-in-out;
z-index: 101;
&:hover {

92
nl-vue/src/views/nl_agv/screen/index.vue
View File

@@ -85,7 +85,7 @@
<div class="detail-panel-title">{{ detailPanelTitle }}</div>
<div class="detail-panel-close" @click="closeDetailPanel">×</div>
</div>
<div v-html="detailPanelContent"></div>
<div class="detail-panel-content" v-html="detailPanelContent"></div>
</div>
<!-- 地图容器 -->
@@ -446,31 +446,35 @@ const showAGVDetail = (agv) => {
const statusText = getStatusText(agv.status)
detailPanelContent.value = `
<div class="detail-card">
<div class="detail-card-label">车号</div>
<div class="detail-card-value">${agv.id}</div>
<div class="detail-item">
<div class="detail-item-label">车号</div>
<div class="detail-item-value">${agv.id}</div>
</div>
<div class="detail-card">
<div class="detail-card-label">类型</div>
<div class="detail-card-value">NT100</div>
<div class="detail-item">
<div class="detail-item-label">类型</div>
<div class="detail-item-value">NT100</div>
</div>
<div class="detail-card">
<div class="detail-card-label">任务号</div>
<div class="detail-card-value">${agv.taskId || '无'}</div>
<div class="detail-item">
<div class="detail-item-label">任务号</div>
<div class="detail-item-value">${agv.taskId || '无'}</div>
</div>
<div class="detail-card">
<div class="detail-card-label">运行状态</div>
<div class="detail-card-value">
<div class="detail-item">
<div class="detail-item-label">运行状态</div>
<div class="detail-item-value">
<span class="status-badge ${statusClass}">${statusText}</span>
</div>
</div>
<div class="detail-card">
<div class="detail-card-label">电量</div>
<div class="detail-card-value">${agv.battery}%</div>
<div class="detail-item">
<div class="detail-item-label">电量</div>
<div class="detail-item-value">${agv.battery}%</div>
</div>
<div class="detail-card">
<div class="detail-card-label">位置坐标</div>
<div class="detail-card-value">X: ${agv.x}, Y: ${agv.y}</div>
<div class="detail-item">
<div class="detail-item-label">位置坐标</div>
<div class="detail-item-value">X: ${agv.x}, Y: ${agv.y}</div>
</div>
<div class="detail-item">
<div class="detail-item-label">AGV状态</div>
<div class="detail-item-value">正常</div>
</div>
`
detailPanelVisible.value = true
@@ -479,21 +483,21 @@ const showAGVDetail = (agv) => {
const showStorageDetail = (storage) => {
detailPanelTitle.value = `货位 ${storage.id} 状态`
detailPanelContent.value = `
<div class="detail-card">
<div class="detail-card-label">货位编号</div>
<div class="detail-card-value">${storage.id}</div>
<div class="detail-item">
<div class="detail-item-label">货位编号</div>
<div class="detail-item-value">${storage.id}</div>
</div>
<div class="detail-card">
<div class="detail-card-label">货位状态</div>
<div class="detail-card-value">
<div class="detail-item">
<div class="detail-item-label">货位状态</div>
<div class="detail-item-value">
<span class="status-badge ${storage.hasGoods ? 'has-goods' : 'no-goods'}">
${storage.hasGoods ? '有货' : '无货'}
</span>
</div>
</div>
<div class="detail-card">
<div class="detail-card-label">位置坐标</div>
<div class="detail-card-value">X: ${storage.x}, Y: ${storage.y}</div>
<div class="detail-item">
<div class="detail-item-label">位置坐标</div>
<div class="detail-item-value">X: ${storage.x}, Y: ${storage.y}</div>
</div>
`
detailPanelVisible.value = true
@@ -502,21 +506,29 @@ const showStorageDetail = (storage) => {
const showStaticDeviceDetail = (device) => {
detailPanelTitle.value = `${device.name} 详情`
detailPanelContent.value = `
<div class="detail-card">
<div class="detail-card-label">设备编号</div>
<div class="detail-card-value">${device.code || device.id}</div>
<div class="detail-item">
<div class="detail-item-label">设备编号</div>
<div class="detail-item-value">${device.code || device.id}</div>
</div>
<div class="detail-card">
<div class="detail-card-label">设备名称</div>
<div class="detail-card-value">${device.name}</div>
<div class="detail-item">
<div class="detail-item-label">设备名称</div>
<div class="detail-item-value">${device.name}</div>
</div>
<div class="detail-card">
<div class="detail-card-label">设备类型</div>
<div class="detail-card-value">${device.type}</div>
<div class="detail-item">
<div class="detail-item-label">设备类型</div>
<div class="detail-item-value">${device.type}</div>
</div>
<div class="detail-card">
<div class="detail-card-label">位置坐标</div>
<div class="detail-card-value">X: ${device.x}, Y: ${device.y}</div>
<div class="detail-item">
<div class="detail-item-label">位置坐标</div>
<div class="detail-item-value">X: ${device.x}, Y: ${device.y}</div>
</div>
<div class="detail-item">
<div class="detail-item-label">旋转角度</div>
<div class="detail-item-value">${device.angle || 0}°</div>
</div>
<div class="detail-item">
<div class="detail-item-label">设备大小</div>
<div class="detail-item-value">${device.size || 50}px</div>
</div>
`
detailPanelVisible.value = true