From a2ff0054373ad598427f6b507e1feeac365fc663 Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Thu, 28 May 2026 14:09:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Sidebar/index.vue       |   2 +-
 src/router/index.js                           |  12 +-
 .../screens/warehouse-overview/index.vue      | 985 +++++++++++++-----
 3 files changed, 735 insertions(+), 264 deletions(-)

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index da884dd..412714f 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -59,7 +59,7 @@ const menuItems = [
   { path: '/dashboard/output', meta: { title: '产出监控大屏', icon: 'output' } },
   { path: '/dashboard/stop-analysis', meta: { title: '停机分析大屏', icon: 'stop' } },
   { path: '/dashboard/acid-rolling', meta: { title: '酸轧数据大屏', icon: 'example' } },
-  { path: '/dashboard/warehouse-overview', meta: { title: '库区总览大屏', icon: 'example' } }
+  { path: '/warehouse-overview', meta: { title: '库区总览大屏', icon: 'example' } }
 ]
 </script>
 
diff --git a/src/router/index.js b/src/router/index.js
index 9c918b1..1197895 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -53,14 +53,14 @@ export const constantRoutes = [
         name: 'AcidRolling',
         component: () => import('@/views/screens/acid-rolling/index.vue'),
         meta: { title: '酸轧数据大屏', icon: 'example' }
-      },
-      {
-        path: 'warehouse-overview',
-        name: 'WarehouseOverview',
-        component: () => import('@/views/screens/warehouse-overview/index.vue'),
-        meta: { title: '库区总览大屏', icon: 'warehouse' }
       }
     ]
+  },
+  {
+    path: '/warehouse-overview',
+    name: 'WarehouseOverview',
+    component: () => import('@/views/screens/warehouse-overview/index.vue'),
+    meta: { title: '库区总览大屏' }
   }
 ]
 
diff --git a/src/views/screens/warehouse-overview/index.vue b/src/views/screens/warehouse-overview/index.vue
index 068a683..4afae7b 100644
--- a/src/views/screens/warehouse-overview/index.vue
+++ b/src/views/screens/warehouse-overview/index.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="warehouse-screen">
+        <div class="scale-wrapper" :style="scaleWrapperStyle">
         <!-- 动态背景 -->
         <div class="dynamic-bg">
             <!-- 网格线 -->
@@ -96,6 +97,10 @@
                     <div class="ring-chart-wrapper">
                         <div ref="chartRef" class="ring-chart"></div>
                     </div>
+                    <div class="util-text">
+                        <span class="util-number">{{ statistics.utilization }}%</span>
+                        <span class="util-label">利用率</span>
+                    </div>
                     <div class="chart-legend">
                         <div class="legend-item">
                             <span class="chart-dot occupied"></span>
@@ -110,11 +115,50 @@
                             空闲 <span class="legend-val">{{ statistics.available }}</span>
                         </div>
                     </div>
+                    <div class="status-bar">
+                        <span v-for="item in statusBarData" :key="item.label"
+                              class="status-bar-fill"
+                              :style="{ width: item.pct + '%', background: item.color }"></span>
+                    </div>
+                    <div class="status-bar-labels">
+                        <div class="status-bar-label" v-for="item in statusBarData" :key="item.label">
+                            <span class="sbl-dot" :style="{ background: item.color }"></span>
+                            <span class="sbl-text">{{ item.label }} {{ item.pct }}%</span>
+                        </div>
+                    </div>
+                    <div class="breath-indicators">
+                        <div v-for="item in statusBarData" :key="'b'+item.label"
+                             class="breath-dot"
+                             :style="{
+                                 background: item.color,
+                                 animationDuration: Math.max(1.5, 4 - item.pct * 0.03) + 's',
+                                 boxShadow: '0 0 ' + Math.round(3 + item.pct * 0.12) + 'px ' + item.color
+                             }"
+                             :title="item.label + ' ' + item.pct + '%'">
+                        </div>
+                    </div>
+                    <div class="micro-eq">
+                        <span v-for="i in 18" :key="i" class="micro-eq-bar"
+                              :style="{
+                                  animationDelay: (i * 0.08) + 's',
+                                  animationDuration: (1.2 + (i % 5) * 0.15) + 's'
+                              }"></span>
+                    </div>
+                    <div class="scan-line-red"><div class="scan-beam"></div></div>
+                    <div class="mini-chart">
+                        <div class="mini-chart-bars">
+                            <div v-for="i in 10" :key="i" class="mini-bar"
+                                 :style="{
+                                     height: (18 + (i * 7) % 52) + '%',
+                                     animationDelay: i * 0.12 + 's',
+                                     animationDuration: (1.8 + (i % 3) * 0.4) + 's'
+                                 }"></div>
+                        </div>
+                        <div class="mini-chart-axis"></div>
+                    </div>
                 </div>
                     </dv-border-box-8>
                 </div>
-
-                <!-- 拆分状态 -->
                 <div class="split-wrapper">
                     <dv-border-box-8 :reverse="true">
                 <div class="split-stats">
@@ -152,6 +196,19 @@
 
                     </div>
 
+                    <div class="split-bar">
+                        <div class="split-bar-fill unsplit" :style="{ width: splitStats.unsplitPct + '%' }"></div>
+                        <div class="split-bar-fill split" :style="{ width: splitStats.splitPct + '%' }"></div>
+                    </div>
+                    <div class="split-bar-labels">
+                        <span class="sbl-item">
+                            <span class="sbl-dot unsplit-dot"></span>大库位 {{ splitStats.unsplitPct }}%
+                        </span>
+                        <span class="sbl-item">
+                            <span class="sbl-dot split-dot"></span>小库位 {{ splitStats.splitPct }}%
+                        </span>
+                    </div>
+
                 </div>
                 </dv-border-box-8>
                 </div>
@@ -260,28 +317,33 @@
                                         :style="{ minWidth: columnWidth + 'px' }"
                                     >
                                         <div class="column-header">{{ colNum }}列</div>
-                                        <div
-                                            v-for="wh in gridData[colNum].layer1"
-                                            :key="wh.actualWarehouseId"
-                                            class="grid-cell"
-                                            :class="[getStatusClass(wh), { 'has-coil': !!wh.currentCoilNo }]"
-                                            :style="cellStyle"
-                                            @click="showDetail(wh)"
-                                        >
-                                            <span class="cell-code">{{ wh.actualWarehouseCode }}</span>
-                                            <span v-if="wh.currentCoilNo" class="cell-coil-dot">●</span>
-                                        </div>
-                                        <div v-if="gridData[colNum].layer1.length && gridData[colNum].layer2.length" class="layer-divider"></div>
-                                        <div
-                                            v-for="wh in gridData[colNum].layer2"
-                                            :key="wh.actualWarehouseId"
-                                            class="grid-cell"
-                                            :class="[getStatusClass(wh), { 'has-coil': !!wh.currentCoilNo }]"
-                                            :style="cellStyle"
-                                            @click="showDetail(wh)"
-                                        >
-                                            <span class="cell-code">{{ wh.actualWarehouseCode }}</span>
-                                            <span v-if="wh.currentCoilNo" class="cell-coil-dot">●</span>
+                                        <div class="column-pair">
+                                            <div class="layer-cells layer1-cells">
+                                                <div
+                                                    v-for="wh in gridData[colNum].layer1"
+                                                    :key="wh.actualWarehouseId"
+                                                    class="grid-cell"
+                                                    :class="[getStatusClass(wh), 'cell-layer-1', { 'has-coil': !!wh.currentCoilNo }]"
+                                                    :style="cellStyle"
+                                                    @click="showDetail(wh, $event)"
+                                                >
+                                                    <span class="cell-code">{{ wh.actualWarehouseCode }}</span>
+                                                    <span v-if="wh.currentCoilNo" class="cell-coil-dot">●</span>
+                                                </div>
+                                            </div>
+                                            <div class="layer-cells layer2-cells" :style="{ marginTop: cellMarginOffset + 'px' }">
+                                                <div
+                                                    v-for="wh in gridData[colNum].layer2"
+                                                    :key="wh.actualWarehouseId"
+                                                    class="grid-cell"
+                                                    :class="[getStatusClass(wh), 'cell-layer-2', { 'has-coil': !!wh.currentCoilNo }]"
+                                                    :style="cellStyle"
+                                                    @click="showDetail(wh, $event)"
+                                                >
+                                                    <span class="cell-code">{{ wh.actualWarehouseCode }}</span>
+                                                    <span v-if="wh.currentCoilNo" class="cell-coil-dot">●</span>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
                                     </div>
@@ -293,41 +355,6 @@
             </section>
         </main>
 
-        <!-- 库位详情弹窗 -->
-        <el-dialog
-            v-model="detailDialogVisible"
-            width="400px"
-            :close-on-click-modal="true"
-            custom-class="detail-dialog"
-            top="20vh"
-        >
-            <div class="detail-content" v-if="detailWarehouse">
-                <div class="detail-header">
-                    <span class="detail-code">{{ detailWarehouse.actualWarehouseCode }}</span>
-                    <span class="detail-status" :class="getStatusClass(detailWarehouse)">{{ getStatusText(detailWarehouse) }}</span>
-                </div>
-                <div class="detail-body">
-                    <div class="detail-row">
-                        <span class="detail-label">库位名称</span>
-                        <span class="detail-value">{{ detailWarehouse.actualWarehouseName }}</span>
-                    </div>
-                    <div class="detail-row">
-                        <span class="detail-label">钢卷编号</span>
-                        <span class="detail-value" v-if="detailWarehouse.currentCoilNo">📦 {{ detailWarehouse.currentCoilNo }}</span>
-                        <span class="detail-value empty" v-else>无</span>
-                    </div>
-                    <div class="detail-row">
-                        <span class="detail-label">数量</span>
-                        <span class="detail-value">{{ detailWarehouse.coilQuantity || 0 }}</span>
-                    </div>
-                    <div class="detail-row" v-if="detailWarehouse.parsedInfo">
-                        <span class="detail-label">位置</span>
-                        <span class="detail-value">{{ detailWarehouse.parsedInfo.column }}列 {{ detailWarehouse.parsedInfo.row }}行 {{ detailWarehouse.parsedInfo.layer }}层</span>
-                    </div>
-                </div>
-            </div>
-        </el-dialog>
-
         <!-- 底部跃动方块 -->
         <div class="eq-bar-container">
             <div
@@ -338,18 +365,54 @@
             ></div>
         </div>
 
-    </div>
+    </div><!-- /scale-wrapper -->
+
+        <!-- 库位详情浮层 -->
+        <div
+            v-show="!!detailWarehouse"
+            ref="tooltipRef"
+            class="warehouse-tooltip"
+            :style="tooltipStyle"
+            @mousedown.stop
+        >
+            <template v-if="detailWarehouse">
+                <div class="tooltip-header">
+                    <span class="tooltip-code">{{ detailWarehouse.actualWarehouseCode }}</span>
+                    <span class="tooltip-status" :class="getStatusClass(detailWarehouse)">{{ getStatusText(detailWarehouse) }}</span>
+                </div>
+                <div class="tooltip-divider"></div>
+                <div class="tooltip-body">
+                    <div class="tooltip-row">
+                        <span class="tooltip-label">库位名称</span>
+                        <span class="tooltip-value">{{ detailWarehouse.actualWarehouseName }}</span>
+                    </div>
+                    <div class="tooltip-row">
+                        <span class="tooltip-label">钢卷编号</span>
+                        <span class="tooltip-value highlight" v-if="detailWarehouse.currentCoilNo">{{ detailWarehouse.currentCoilNo }}</span>
+                        <span class="tooltip-value dim" v-else>无</span>
+                    </div>
+                    <div class="tooltip-row">
+                        <span class="tooltip-label">数量</span>
+                        <span class="tooltip-value">{{ detailWarehouse.coilQuantity || 0 }}</span>
+                    </div>
+                    <div class="tooltip-row" v-if="detailWarehouse.parsedInfo">
+                        <span class="tooltip-label">位置</span>
+                        <span class="tooltip-value">{{ detailWarehouse.parsedInfo.column }}列 {{ detailWarehouse.parsedInfo.row }}行 {{ detailWarehouse.parsedInfo.layer }}层</span>
+                    </div>
+                </div>
+            </template>
+        </div>
+
+    </div><!-- /warehouse-screen -->
 </template>
 
 <script>
 import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import * as echarts from 'echarts'
-import DataVLayout from "@/components/DataVLayout.vue";
 import { treeActualWarehouseTwoLevel, listActualWarehouse } from '@/api/wms/actualWarehouse'
 
 export default {
     name: 'WarehouseOverview',
-    components: {DataVLayout},
     setup() {
         // 时间显示
         const currentDate = ref('')
@@ -412,6 +475,16 @@ export default {
             }
         })
 
+        // 状态占比条数据
+        const statusBarData = computed(() => {
+            const total = statistics.total || 1
+            return [
+                { label: '已占用', pct: Math.round(statistics.occupied / total * 100), color: '#7c63ff' },
+                { label: '异常', pct: Math.round(statistics.error / total * 100), color: '#ff6b6b' },
+                { label: '空闲', pct: Math.round(statistics.available / total * 100), color: '#00ff88' }
+            ]
+        })
+
         // 动画数字
         const animatedTotal = ref(0)
         const animatedOccupied = ref(0)
@@ -422,6 +495,15 @@ export default {
         // 加载状态
         const loading = ref(false)
 
+        // 缩放比例（transform scale 适配超大屏）
+        const scaleRatio = ref(1)
+        const scaleWrapperStyle = computed(() => ({
+            transform: `scale(${scaleRatio.value})`
+        }))
+        const updateScale = () => {
+            scaleRatio.value = Math.min(window.innerWidth / 1920, window.innerHeight / 1080)
+        }
+
         // 网格数据
         const gridData = ref({})
 
@@ -430,76 +512,86 @@ export default {
             return Object.keys(gridData.value).sort((a, b) => Number(a) - Number(b))
         })
 
-        // 详情弹窗
-        const detailDialogVisible = ref(false)
+        // 详情浮层
         const detailWarehouse = ref(null)
+        const tooltipRef = ref(null)
+        const tooltipPos = reactive({ x: 0, y: 0 })
+        const tooltipStyle = computed(() => ({
+            left: tooltipPos.x + 'px',
+            top: tooltipPos.y + 'px'
+        }))
 
         // 容器尺寸观测（自适应网格）
         const gridContainerRef = ref(null)
         const containerRect = reactive({ width: 800, height: 600 })
         let resizeObserver = null
+        let chartResizeObserver = null
 
-        // 自适应格子尺寸
-        const cellSize = computed(() => {
+        // 自适应格子尺寸（错层布局：高宽独立）
+        const maxLayerRows = computed(() => {
             const keys = sortedColumnKeys.value
-            const colCount = keys.length
-            if (!colCount) return 60
-
-            let maxRows = 0
+            let m = 0
             keys.forEach(k => {
                 const col = gridData.value[k]
                 if (col) {
-                    maxRows = Math.max(maxRows, col.layer1.length + col.layer2.length)
+                    m = Math.max(m, col.layer1.length, col.layer2.length)
                 }
             })
-            maxRows = Math.max(maxRows, 1)
-
-            const cw = containerRect.width
-            const ch = containerRect.height
-
-            // 宽度约束：容器宽 - 内边距 - 列间距
-            const byWidth = (cw - 30 - (colCount - 1) * 8) / colCount
-            // 高度约束：容器高 - 图例 - 列头 - 标题栏 - 分隔线 - 间距 - 内边距
-            const byHeight = (ch - 120 - (maxRows - 1) * 4) / maxRows
-
-            // 居中时（列数≤15）：尽量填满容器宽度
-            if (colCount <= 15) {
-                // 目标：网格总宽占容器宽的 85%
-                const fillSize = (cw * 0.85 - 30 - (colCount - 1) * 8) / colCount
-                let size = Math.max(byHeight, fillSize)
-                size = Math.min(size, byWidth)
-                // 列数越少，可放大的上限越高
-                const maxSize = colCount <= 2 ? 180 : colCount <= 4 ? 140 : 110
-                return Math.max(44, Math.min(maxSize, Math.floor(size)))
-            }
-
-            // 列数多时：维持原逻辑（高度约束为主）
-            let size = Math.min(byWidth, byHeight)
-            return Math.max(44, Math.min(80, Math.floor(size)))
+            return Math.max(m, 1)
         })
 
+        const cellHeight = computed(() => {
+            const keys = sortedColumnKeys.value
+            const colCount = keys.length
+            if (!colCount) return 60
+            const mRows = maxLayerRows.value
+            const ch = containerRect.height
+            const h = (ch - 120 - (mRows - 1) * 4) / mRows
+            // 大屏下按容器高度比例放大，不再固定封顶 120
+            const maxH = Math.floor(ch * 0.15)
+            return Math.max(36, Math.min(Math.max(maxH, 120), Math.floor(h)))
+        })
+
+        const cellWidth = computed(() => {
+            const keys = sortedColumnKeys.value
+            const colCount = keys.length
+            if (!colCount) return 60
+            const cw = containerRect.width
+            const byWidth = (cw - 30 - (colCount - 1) * 8) / colCount
+            let w = (byWidth - 6) / 2
+            if (colCount <= 15) {
+                w = Math.max(w, cellHeight.value)
+            }
+            // 大屏下按列宽比例放大，不再固定封顶 140
+            const maxW = Math.floor(byWidth * 0.45)
+            return Math.max(30, Math.min(Math.max(maxW, 140), Math.floor(w)))
+        })
+
+        // 错层偏移量（二层下移半格）
+        const cellMarginOffset = computed(() => Math.round(cellHeight.value / 2))
+
         // 网格居中（列数少于15时居中更美观）
         const isGridCentered = computed(() => {
             return sortedColumnKeys.value.length <= 15
         })
 
         const cellStyle = computed(() => {
-            const s = cellSize.value
-            const fs = Math.max(9, Math.min(14, Math.floor(s * 0.16)))
-            return { width: s + 'px', height: s + 'px', fontSize: fs + 'px' }
+            const h = cellHeight.value
+            const w = cellWidth.value
+            const fs = Math.max(9, Math.min(13, Math.floor(Math.min(w, h) * 0.15)))
+            return { width: w + 'px', height: h + 'px', fontSize: fs + 'px' }
         })
 
-        const columnWidth = computed(() => cellSize.value + 8)
+        const columnWidth = computed(() => cellWidth.value * 2 + 14)
 
-        // 测量网格容器尺寸（每次网格数据变化后调用）
+        // 测量网格容器尺寸（始终使用 pre-scale 尺寸，避免缩放反馈循环）
         const measureGridContainer = () => {
             nextTick(() => {
                 const el = gridContainerRef.value
                 if (!el) return
-                const rect = el.getBoundingClientRect()
-                containerRect.width = rect.width
-                containerRect.height = rect.height
-                // 持久化 ResizeObserver，监听窗口缩放
+                containerRect.width = el.clientWidth
+                containerRect.height = el.clientHeight
+                // 持久化 ResizeObserver，监听容器尺寸变化
                 if (!resizeObserver) {
                     resizeObserver = new ResizeObserver(entries => {
                         for (const entry of entries) {
@@ -547,20 +639,46 @@ export default {
                 if (isScrollPaused) return
 
                 let changed = false
+                const inner = gridInnerRef.value
 
                 if (overflowDist.x > 0) {
-                    scrollPos.x += 1
-                    if (scrollPos.x >= overflowDist.x + 40) {
+                    // 渐进减速：距终点 100px 内线性降低速度
+                    const endX = overflowDist.x + 40
+                    const remainingX = endX - scrollPos.x
+                    const decelDist = 100
+                    const speedX = remainingX < decelDist
+                        ? Math.max(0.2, remainingX / decelDist)
+                        : 1
+                    scrollPos.x += speedX
+                    if (scrollPos.x >= endX) {
                         scrollPos.x = 0
                         changed = true
+                        // CSS 过渡实现平滑回弹
+                        if (inner) {
+                            inner.style.transition = 'transform 0.35s ease'
+                            setTimeout(() => {
+                                if (inner) inner.style.transition = ''
+                            }, 400)
+                        }
                     }
                 }
 
                 if (overflowDist.y > 0) {
-                    scrollPos.y += 0.5
-                    if (scrollPos.y >= overflowDist.y + 30) {
+                    const endY = overflowDist.y + 30
+                    const remainingY = endY - scrollPos.y
+                    const speedY = remainingY < 100
+                        ? Math.max(0.1, remainingY / 100)
+                        : 0.5
+                    scrollPos.y += speedY
+                    if (scrollPos.y >= endY) {
                         scrollPos.y = 0
                         changed = true
+                        if (inner) {
+                            inner.style.transition = 'transform 0.35s ease'
+                            setTimeout(() => {
+                                if (inner) inner.style.transition = ''
+                            }, 400)
+                        }
                     }
                 }
 
@@ -646,8 +764,9 @@ export default {
 
             if (!dragState.active) return
 
-            scrollPos.x = Math.max(0, Math.min(overflowDist.x + 40, dragState.startScrollX - dx))
-            scrollPos.y = Math.max(0, Math.min(overflowDist.y + 30, dragState.startScrollY - dy * 0.5))
+            const s = scaleRatio.value
+            scrollPos.x = Math.max(0, Math.min(overflowDist.x + 40, dragState.startScrollX - dx / s))
+            scrollPos.y = Math.max(0, Math.min(overflowDist.y + 30, dragState.startScrollY - dy * 0.5 / s))
             applyTransform()
         }
 
@@ -728,6 +847,14 @@ export default {
                 if (!el || chartInstance) return
                 chartInstance = echarts.init(el, null, { renderer: 'canvas' })
                 updateChart()
+                // 监听 chart 容器尺寸变化，大屏缩放时实时重绘
+                const parent = el.parentElement
+                if (parent && !chartResizeObserver) {
+                    chartResizeObserver = new ResizeObserver(() => {
+                        if (chartInstance) chartInstance.resize()
+                    })
+                    chartResizeObserver.observe(parent)
+                }
             }, 300)
         }
 
@@ -752,35 +879,6 @@ export default {
                         { value: statistics.available || 0, name: '空闲', itemStyle: { color: '#00ff88' } }
                     ]
                 }],
-                graphic: [
-                    {
-                        id: 'util-number',
-                        type: 'text',
-                        left: 'center',
-                        top: '36%',
-                        style: {
-                            text: `${statistics.utilization}%`,
-                            fill: '#00d4ff',
-                            fontSize: 28,
-                            fontWeight: 'bold',
-                            fontFamily: 'Arial',
-                            lineHeight: 32
-                        }
-                    },
-                    {
-                        id: 'util-label',
-                        type: 'text',
-                        left: 'center',
-                        top: '52%',
-                        style: {
-                            text: '利用率',
-                            fill: '#6a8cb5',
-                            fontSize: 13,
-                            fontFamily: 'Arial',
-                            lineHeight: 20
-                        }
-                    }
-                ]
             })
         }
 
@@ -943,10 +1041,35 @@ export default {
             gridData.value = columns
         }
 
-        // 显示库位详情弹窗
-        const showDetail = (wh) => {
+        // 显示库位详情浮层（基于视口坐标，tooltip 使用 position: fixed）
+        const showDetail = (wh, event) => {
             detailWarehouse.value = wh
-            detailDialogVisible.value = true
+            const cellRect = event.currentTarget.getBoundingClientRect()
+            const vw = window.innerWidth
+            const vh = window.innerHeight
+            let left = cellRect.right + 8
+            let top = cellRect.top - 10
+            const tw = 260
+            const th = 180
+            const pad = 10
+            if (left + tw > vw - pad) {
+                left = cellRect.left - tw - 8
+            }
+            if (top + th > vh - pad) {
+                top = vh - th - pad
+            }
+            tooltipPos.x = Math.round(Math.max(pad, left))
+            tooltipPos.y = Math.round(Math.max(pad, top))
+        }
+        const closeTooltip = () => {
+            detailWarehouse.value = null
+        }
+        const handleDocumentMousedown = (e) => {
+            if (!detailWarehouse.value) return
+            const el = tooltipRef.value
+            if (el && !el.contains(e.target)) {
+                closeTooltip()
+            }
         }
 
         // 全屏切换 → 刷新 popper 位置
@@ -956,12 +1079,15 @@ export default {
 
         // 初始化
         onMounted(() => {
+            updateScale()
+            window.addEventListener('resize', updateScale)
             updateTime()
             timeInterval = setInterval(updateTime, 1000)
             // 加载仓库树形结构
             fetchWarehouseTree()
             // 初始化环图
             initChart()
+            document.addEventListener('mousedown', handleDocumentMousedown)
             window.addEventListener('resize', handleChartResize)
             document.addEventListener('fullscreenchange', handleFullscreenChange)
             document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
@@ -971,11 +1097,14 @@ export default {
             stopWatchList()
             if (timeInterval) clearInterval(timeInterval)
             if (resizeObserver) resizeObserver.disconnect()
+            if (chartResizeObserver) chartResizeObserver.disconnect()
             stopAutoScroll()
             resetScroll()
+            window.removeEventListener('resize', updateScale)
             document.removeEventListener('mousemove', onGridDragMove)
             document.removeEventListener('mouseup', onGridDragEnd)
             if (chartInitTimer) clearTimeout(chartInitTimer)
+            document.removeEventListener('mousedown', handleDocumentMousedown)
             window.removeEventListener('resize', handleChartResize)
             document.removeEventListener('fullscreenchange', handleFullscreenChange)
             document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
@@ -986,6 +1115,7 @@ export default {
         })
 
         return {
+            scaleWrapperStyle,
             currentDate,
             warehouseTree,
             warehouseOptions,
@@ -999,6 +1129,7 @@ export default {
             animatedError,
             animatedAvailable,
             animatedUtilization,
+            statusBarData,
             getParticleStyle,
             getEqBarStyle,
             handleSelectChange,
@@ -1007,10 +1138,12 @@ export default {
             // 网格
             gridData,
             sortedColumnKeys,
-            detailDialogVisible,
             detailWarehouse,
             showDetail,
+            tooltipRef,
+            tooltipStyle,
             cellStyle,
+            cellMarginOffset,
             columnWidth,
             isGridCentered,
             onGridMouseEnter,
@@ -1026,19 +1159,30 @@ export default {
 
 <style scoped>
 .warehouse-screen {
-    width: 100%;
-    min-height: 100vh;
+    width: 100vw;
+    height: 100vh;
     background: linear-gradient(135deg, #050a15 0%, #0a1428 50%, #0d1b34 100%);
-    padding: 20px 20px 56px;
-    box-sizing: border-box;
-    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.scale-wrapper {
+    width: 1920px;
+    height: 1080px;
+    flex-shrink: 0;
     position: relative;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transform-origin: center center;
 }
 
 /* 动态背景 */
 .dynamic-bg {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
@@ -1120,19 +1264,23 @@ export default {
 
 @keyframes particleFloat {
     0%, 100% {
-        transform: translateY(100vh) translateX(0) scale(0.5);
+        top: 100%;
+        transform: translateX(0) scale(0.5);
         opacity: 0;
     }
     10% {
+        top: 80%;
+        transform: translateX(0) scale(1);
         opacity: 1;
-        transform: translateY(80vh) translateX(0) scale(1);
     }
     50% {
-        transform: translateY(50vh) translateX(30px) scale(1.2);
+        top: 50%;
+        transform: translateX(30px) scale(1.2);
     }
     90% {
         opacity: 0.8;
-        transform: translateY(10vh) translateX(-20px) scale(0.8);
+        top: 10%;
+        transform: translateX(-20px) scale(0.8);
     }
 }
 
@@ -1206,7 +1354,7 @@ export default {
 }
 
 .bg-border {
-    position: fixed;
+    position: absolute;
     top: 10px;
     left: 10px;
     right: 10px;
@@ -1302,7 +1450,8 @@ export default {
 .screen-body {
     display: flex;
     gap: 20px;
-    height: calc(100vh - 180px);
+    flex: 1;
+    min-height: 0;
     position: relative;
     z-index: 10;
     overflow: visible;
@@ -1310,11 +1459,11 @@ export default {
 
 .sidebar {
     width: 300px;
-    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     gap: 15px;
     min-height: 0;
+    font-size: 14px;
 }
 
 .tree-panel {
@@ -1409,7 +1558,8 @@ export default {
 
 /* 统计卡片包装 */
 .stats-wrapper {
-    flex-shrink: 0;
+    flex: 2;
+    min-height: 0;
 }
 
 /* 侧边栏统计 - 环图 */
@@ -1417,8 +1567,8 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 6px 8px;
-    min-height: 240px;
+    padding: 6px 8px 0;
+    flex: 1;
     background: rgba(10, 20, 40, 0.85);
     border-radius: 4px;
 }
@@ -1446,8 +1596,8 @@ export default {
 
 .ring-chart {
     width: 100%;
-    height: 150px;
-    flex-shrink: 0;
+    flex: 1;
+    min-height: 80px;
     position: relative;
     z-index: 1;
 }
@@ -1456,7 +1606,36 @@ export default {
 .ring-chart-wrapper {
     position: relative;
     width: 100%;
-    height: 150px;
+    flex: 1;
+    min-height: 80px;
+}
+
+.ring-chart-wrapper::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 44%;
+    height: 44%;
+    transform: translate(-50%, -50%) rotate(0deg);
+    border-radius: 50%;
+    background: conic-gradient(
+        transparent 0deg,
+        transparent 310deg,
+        rgba(0, 212, 255, 0.08) 330deg,
+        rgba(0, 212, 255, 0.5) 345deg,
+        rgba(0, 212, 255, 0.7) 350deg,
+        rgba(0, 212, 255, 0.15) 355deg,
+        transparent 360deg
+    );
+    animation: radarSweep 2.5s linear infinite;
+    z-index: 0;
+    pointer-events: none;
+}
+
+@keyframes radarSweep {
+    from { transform: translate(-50%, -50%) rotate(0deg); }
+    to { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
 .ring-chart-wrapper::after {
@@ -1484,6 +1663,30 @@ export default {
     100% { transform: rotate(360deg); }
 }
 
+.util-text {
+    text-align: center;
+    padding: 4px 0 2px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1px;
+}
+
+.util-number {
+    font-size: 22px;
+    font-weight: bold;
+    color: #00d4ff;
+    font-family: Arial, sans-serif;
+    line-height: 1.2;
+    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+.util-label {
+    font-size: 12px;
+    color: #6a8cb5;
+    line-height: 1.2;
+}
+
 .chart-legend {
     display: flex;
     flex-direction: column;
@@ -1518,6 +1721,162 @@ export default {
 .chart-dot.error { background: #ff6b6b; }
 .chart-dot.available { background: #00ff88; }
 
+/* 状态占比条 */
+.status-bar {
+    display: flex;
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 6px 8px 0;
+    background: rgba(255, 255, 255, 0.05);
+    gap: 2px;
+}
+
+.status-bar-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 0.6s ease;
+    min-width: 0;
+}
+
+.status-bar-labels {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    padding: 3px 8px 0;
+}
+
+.status-bar-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    color: #8aa8c8;
+}
+
+.sbl-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.sbl-text {
+    white-space: nowrap;
+}
+
+/* 数据呼吸指示器 */
+.breath-indicators {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    padding: 6px 0 0;
+    width: 100%;
+}
+
+.breath-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    animation: breathPulse 2s ease-in-out infinite;
+}
+
+@keyframes breathPulse {
+    0%, 100% { transform: scale(0.5); opacity: 0.3; }
+    50% { transform: scale(1.4); opacity: 1; }
+}
+
+/* 微频谱条 */
+.micro-eq {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 3px;
+    padding: 6px 10px 0;
+    width: 100%;
+    height: 18px;
+}
+
+.micro-eq-bar {
+    width: 3px;
+    min-height: 2px;
+    border-radius: 1px;
+    background: linear-gradient(to top, transparent, rgba(0, 212, 255, 0.3), #00d4ff);
+    animation: microEqBounce 1s ease-in-out infinite alternate;
+}
+
+@keyframes microEqBounce {
+    0% { height: 2px; opacity: 0.1; }
+    50% { height: 14px; opacity: 0.7; }
+    100% { height: 3px; opacity: 0.15; }
+}
+
+/* 红色扫描线 */
+.scan-line-red {
+    position: relative;
+    height: 20px;
+    width: 100%;
+    overflow: hidden;
+}
+
+.scan-line-red .scan-beam {
+    position: absolute;
+    top: 0;
+    left: -10%;
+    width: 8px;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 50, 50, 0.8), transparent);
+    box-shadow: 0 0 12px rgba(255, 50, 50, 0.6), 0 0 30px rgba(255, 50, 50, 0.2);
+    border-radius: 4px;
+    animation: scanRedBeam 3s ease-in-out infinite;
+}
+
+@keyframes scanRedBeam {
+    0% { left: -10%; opacity: 0; }
+    10% { opacity: 1; }
+    50% { left: 100%; opacity: 1; }
+    60% { opacity: 0.3; }
+    100% { left: 100%; opacity: 0; }
+}
+
+/* 动态柱状图 */
+.mini-chart {
+    width: 100%;
+    padding: 4px 12px 0;
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.mini-chart-bars {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
+    height: 36px;
+    gap: 2px;
+}
+
+.mini-bar {
+    width: 8px;
+    min-height: 2px;
+    border-radius: 2px 2px 0 0;
+    background: linear-gradient(to top, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.6));
+    animation: miniBarPulse 2s ease-in-out infinite alternate;
+}
+
+.mini-chart-axis {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);
+    margin-top: 2px;
+}
+
+@keyframes miniBarPulse {
+    0% { opacity: 0.3; transform: scaleY(0.4); transform-origin: bottom; }
+    50% { opacity: 0.9; transform: scaleY(1); transform-origin: bottom; }
+    100% { opacity: 0.4; transform: scaleY(0.6); transform-origin: bottom; }
+}
+
 /* 中间主内容区 */
 .main-content {
     flex: 1;
@@ -1628,8 +1987,7 @@ export default {
 .grid-column {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 4px;
+    align-items: stretch;
     flex-shrink: 0;
 }
 
@@ -1720,17 +2078,65 @@ export default {
     text-shadow: 0 0 6px #00d4ff;
 }
 
-.layer-divider {
+.column-pair {
+    display: flex;
+    gap: 6px;
     width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
-    margin: 4px 0;
-    flex-shrink: 0;
+    flex: 1;
+}
+
+.layer-cells {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+}
+
+.layer1-cells .grid-cell {
+    background: rgba(255, 167, 38, 0.06);
+    border-color: rgba(255, 167, 38, 0.2);
+}
+
+.layer1-cells .grid-cell.occupied {
+    background: rgba(124, 99, 255, 0.2);
+    border-color: rgba(124, 99, 255, 0.3);
+}
+
+.layer1-cells .grid-cell.available {
+    background: rgba(255, 167, 38, 0.12);
+    border-color: rgba(0, 255, 136, 0.3);
+}
+
+.layer1-cells .grid-cell.error {
+    background: rgba(255, 107, 107, 0.2);
+    border-color: rgba(255, 107, 107, 0.3);
+}
+
+.layer2-cells .grid-cell {
+    background: rgba(0, 212, 255, 0.06);
+    border-color: rgba(0, 212, 255, 0.2);
+}
+
+.layer2-cells .grid-cell.occupied {
+    background: rgba(124, 99, 255, 0.2);
+    border-color: rgba(124, 99, 255, 0.3);
+}
+
+.layer2-cells .grid-cell.available {
+    background: rgba(0, 212, 255, 0.1);
+    border-color: rgba(0, 255, 136, 0.3);
+}
+
+.layer2-cells .grid-cell.error {
+    background: rgba(255, 107, 107, 0.2);
+    border-color: rgba(255, 107, 107, 0.3);
 }
 
 /* 拆分状态卡片 */
 .split-wrapper {
-    flex-shrink: 0;
+    flex: 1;
+    min-height: 0;
 }
 
 .split-stats {
@@ -1814,9 +2220,57 @@ export default {
     background: linear-gradient(to bottom, transparent, rgba(0, 212, 255, 0.3), transparent);
 }
 
+.split-bar {
+    display: flex;
+    height: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 8px 12px 0;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.split-bar-fill {
+    height: 100%;
+    transition: width 0.6s ease;
+    min-width: 0;
+}
+
+.split-bar-fill.unsplit {
+    background: linear-gradient(90deg, #ffa726, #ffb74d);
+}
+
+.split-bar-fill.split {
+    background: linear-gradient(90deg, #42a5f5, #64b5f6);
+}
+
+.split-bar-labels {
+    display: flex;
+    justify-content: space-around;
+    padding: 3px 12px 0;
+    font-size: 10px;
+    color: #8aa8c8;
+}
+
+.sbl-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.sbl-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.unsplit-dot { background: #ffa726; }
+.split-dot { background: #42a5f5; }
+
 /* 层列信息卡片 */
 .layer-wrapper {
-    flex-shrink: 0;
+    flex: 1;
+    min-height: 0;
 }
 
 .layer-stats {
@@ -1860,7 +2314,7 @@ export default {
 }
 
 .layer-lbl {
-    font-size: 11px;
+    font-size: 13px;
     color: #6a8cb5;
 }
 
@@ -1870,6 +2324,106 @@ export default {
     font-weight: 500;
 }
 
+/* ===== 库位详情浮层（毛玻璃 tooltip） ===== */
+.warehouse-tooltip {
+    position: fixed;
+    z-index: 2000;
+    min-width: 220px;
+    background: rgba(8, 18, 38, 0.88);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    border: 1px solid rgba(0, 212, 255, 0.25);
+    border-radius: 6px;
+    padding: 12px 14px;
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.6),
+        0 0 20px rgba(0, 212, 255, 0.08);
+    animation: tooltipFadeIn 0.2s ease;
+    pointer-events: auto;
+}
+
+@keyframes tooltipFadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.warehouse-tooltip .tooltip-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.warehouse-tooltip .tooltip-code {
+    font-size: 15px;
+    font-weight: 700;
+    color: #00d4ff;
+    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
+    letter-spacing: 1px;
+}
+
+.warehouse-tooltip .tooltip-status {
+    font-size: 11px;
+    padding: 1px 8px;
+    border-radius: 3px;
+    line-height: 1.6;
+}
+
+.warehouse-tooltip .tooltip-status.occupied {
+    background: rgba(124, 99, 255, 0.2);
+    color: #7c63ff;
+    border: 1px solid rgba(124, 99, 255, 0.3);
+}
+
+.warehouse-tooltip .tooltip-status.available {
+    background: rgba(0, 255, 136, 0.2);
+    color: #00ff88;
+    border: 1px solid rgba(0, 255, 136, 0.3);
+}
+
+.warehouse-tooltip .tooltip-status.error {
+    background: rgba(255, 107, 107, 0.2);
+    color: #ff6b6b;
+    border: 1px solid rgba(255, 107, 107, 0.3);
+}
+
+.warehouse-tooltip .tooltip-divider {
+    height: 1px;
+    background: linear-gradient(90deg, rgba(0, 212, 255, 0.3), transparent);
+    margin-bottom: 10px;
+}
+
+.warehouse-tooltip .tooltip-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.warehouse-tooltip .tooltip-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.warehouse-tooltip .tooltip-label {
+    font-size: 12px;
+    color: #6a8cb5;
+}
+
+.warehouse-tooltip .tooltip-value {
+    font-size: 12px;
+    color: #e0e8f0;
+    font-weight: 500;
+}
+
+.warehouse-tooltip .tooltip-value.highlight {
+    color: #00d4ff;
+}
+
+.warehouse-tooltip .tooltip-value.dim {
+    color: #4a5568;
+}
+
 /* ===== 底部跃动方块 ===== */
 .eq-bar-container {
     position: absolute;
@@ -1913,6 +2467,7 @@ export default {
 .warehouse-select-popper {
     background: rgba(10, 20, 40, 0.95) !important;
     border: 1px solid rgba(0, 212, 255, 0.3) !important;
+    font-size: 14px;
 }
 
 .warehouse-select-popper .el-select-dropdown {
@@ -1926,6 +2481,7 @@ export default {
 .warehouse-select-popper .el-select-dropdown__item {
     background: transparent !important;
     color: #a0c4e8 !important;
+    font-size: 14px;
 }
 
 .warehouse-select-popper .el-select-dropdown__item.hover,
@@ -1985,89 +2541,4 @@ export default {
     font-size: 14px;
 }
 
-.detail-dialog {
-    background: rgba(10, 20, 40, 0.95) !important;
-    border: 1px solid rgba(0, 212, 255, 0.3);
-    border-radius: 8px;
-    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
-}
-
-.detail-dialog .el-dialog__header {
-    display: none;
-}
-
-.detail-dialog .el-dialog__body {
-    padding: 24px !important;
-}
-
-.detail-dialog .detail-content {
-    color: #a0c4e8;
-}
-
-.detail-dialog .detail-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
-}
-
-.detail-dialog .detail-code {
-    font-size: 20px;
-    font-weight: 700;
-    color: #00d4ff;
-    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
-}
-
-.detail-dialog .detail-status {
-    font-size: 12px;
-    padding: 2px 10px;
-    border-radius: 4px;
-}
-
-.detail-dialog .detail-status.occupied {
-    background: rgba(124, 99, 255, 0.2);
-    color: #7c63ff;
-    border: 1px solid rgba(124, 99, 255, 0.3);
-}
-
-.detail-dialog .detail-status.available {
-    background: rgba(0, 255, 136, 0.2);
-    color: #00ff88;
-    border: 1px solid rgba(0, 255, 136, 0.3);
-}
-
-.detail-dialog .detail-status.error {
-    background: rgba(255, 107, 107, 0.2);
-    color: #ff6b6b;
-    border: 1px solid rgba(255, 107, 107, 0.3);
-}
-
-.detail-dialog .detail-body {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.detail-dialog .detail-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.detail-dialog .detail-label {
-    font-size: 13px;
-    color: #6a8cb5;
-}
-
-.detail-dialog .detail-value {
-    font-size: 14px;
-    color: #fff;
-    font-weight: 500;
-}
-
-.detail-dialog .detail-value.empty {
-    color: #4a5568;
-}
 </style>