diff --git a/nl-vue/src/views/nl_agv/screen/dashboard-styles.less b/nl-vue/src/views/nl_agv/screen/dashboard-styles.less index 825bd93..e2bbc2d 100644 --- a/nl-vue/src/views/nl_agv/screen/dashboard-styles.less +++ b/nl-vue/src/views/nl_agv/screen/dashboard-styles.less @@ -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 { diff --git a/nl-vue/src/views/nl_agv/screen/index.vue b/nl-vue/src/views/nl_agv/screen/index.vue index 3f991a1..acafd98 100644 --- a/nl-vue/src/views/nl_agv/screen/index.vue +++ b/nl-vue/src/views/nl_agv/screen/index.vue @@ -85,7 +85,7 @@
{{ detailPanelTitle }}
×
-
+
@@ -446,31 +446,35 @@ const showAGVDetail = (agv) => { const statusText = getStatusText(agv.status) detailPanelContent.value = ` -
-
车号
-
${agv.id}
+
+
车号
+
${agv.id}
-
-
类型
-
NT100
+
+
类型
+
NT100
-
-
任务号
-
${agv.taskId || '无'}
+
+
任务号
+
${agv.taskId || '无'}
-
-
运行状态
-
+
+
运行状态
+
${statusText}
-
-
电量
-
${agv.battery}%
+
+
电量
+
${agv.battery}%
-
-
位置坐标
-
X: ${agv.x}, Y: ${agv.y}
+
+
位置坐标
+
X: ${agv.x}, Y: ${agv.y}
+
+
+
AGV状态
+
正常
` detailPanelVisible.value = true @@ -479,21 +483,21 @@ const showAGVDetail = (agv) => { const showStorageDetail = (storage) => { detailPanelTitle.value = `货位 ${storage.id} 状态` detailPanelContent.value = ` -
-
货位编号
-
${storage.id}
+
+
货位编号
+
${storage.id}
-
-
货位状态
-
+
+
货位状态
+
${storage.hasGoods ? '有货' : '无货'}
-
-
位置坐标
-
X: ${storage.x}, Y: ${storage.y}
+
+
位置坐标
+
X: ${storage.x}, Y: ${storage.y}
` detailPanelVisible.value = true @@ -502,21 +506,29 @@ const showStorageDetail = (storage) => { const showStaticDeviceDetail = (device) => { detailPanelTitle.value = `${device.name} 详情` detailPanelContent.value = ` -
-
设备编号
-
${device.code || device.id}
+
+
设备编号
+
${device.code || device.id}
-
-
设备名称
-
${device.name}
+
+
设备名称
+
${device.name}
-
-
设备类型
-
${device.type}
+
+
设备类型
+
${device.type}
-
-
位置坐标
-
X: ${device.x}, Y: ${device.y}
+
+
位置坐标
+
X: ${device.x}, Y: ${device.y}
+
+
+
旋转角度
+
${device.angle || 0}°
+
+
+
设备大小
+
${device.size || 50}px
` detailPanelVisible.value = true