From 75f745cdb2b257f041be8b50461f8dd1741189e9 Mon Sep 17 00:00:00 2001
From: jhd <1684074631@qq.com>
Date: Tue, 26 May 2026 20:32:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=88=A4=E6=96=AD=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/wms/actualWarehouse.js                |    1 +
 src/utils/request.js                          |    2 +-
 .../screens/warehouse-overview/index.vue      | 1002 +++++++++++++----
 3 files changed, 764 insertions(+), 241 deletions(-)

diff --git a/src/api/wms/actualWarehouse.js b/src/api/wms/actualWarehouse.js
index 2119308..1cf6808 100644
--- a/src/api/wms/actualWarehouse.js
+++ b/src/api/wms/actualWarehouse.js
@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 
+
 // 查询实际库区/库位自关联列表
 export function listActualWarehouse(query) {
     return request({
diff --git a/src/utils/request.js b/src/utils/request.js
index 8f7f5c0..96dd47d 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -34,7 +34,7 @@ service.interceptors.request.use(
 
     if (token) {
       // 直接使用Token（不带Bearer前缀）
-      config.headers['Authorization'] = token
+      config.headers['Authorization'] = "Bearer " + token
     }
     return config
   },
diff --git a/src/views/screens/warehouse-overview/index.vue b/src/views/screens/warehouse-overview/index.vue
index acc7400..630334c 100644
--- a/src/views/screens/warehouse-overview/index.vue
+++ b/src/views/screens/warehouse-overview/index.vue
@@ -51,16 +51,10 @@
                                 :props="treeProps"
                                 node-key="actualWarehouseId"
                                 @node-click="handleNodeClick"
+                                :expand-on-click-node="false"
                                 highlight-current
                                 class="warehouse-tree"
                             >
-                                <template #default="scope">
-                                    <span class="tree-label">
-                                        <span v-if="scope.node.children?.length">📂</span>
-                                        <span v-else>📦</span>
-                                        {{ scope.node.actualWarehouseName }}
-                                    </span>
-                                </template>
                             </el-tree>
                         </div>
 
@@ -69,49 +63,31 @@
                 </dv-border-box8>
 
                 <!-- 统计卡片 -->
+                <div class="stats-wrapper">
                 <dv-border-box8 :reverse="true">
                 <div class="stats-sidebar">
-                    <div class="stat-border-small">
-                        <div class="stat-card-small">
-                            <span class="stat-icon-small">📦</span>
-                            <div class="stat-info-small">
-                                <div class="stat-value-small">{{ animatedTotal }}</div>
-                                <div class="stat-label-small">总库位数</div>
-                            </div>
-                        </div>
+                    <div class="total-row">
+                        <span class="total-num">{{ animatedTotal }}</span>
+                        <span class="total-lbl">总库位数</span>
                     </div>
-
-                    <div class="stat-border-small occupied-border">
-                        <div class="stat-card-small">
-                            <span class="stat-icon-small">✅</span>
-                            <div class="stat-info-small">
-                                <div class="stat-value-small occupied">{{ animatedOccupied }}</div>
-                                <div class="stat-label-small">已占用</div>
-                            </div>
+                    <div ref="chartRef" class="ring-chart"></div>
+                    <div class="chart-legend">
+                        <div class="legend-item">
+                            <span class="chart-dot occupied"></span>
+                            已占用 <span class="legend-val">{{ statistics.occupied }}</span>
                         </div>
-                    </div>
-
-                    <div class="stat-border-small available-border">
-                        <div class="stat-card-small">
-                            <span class="stat-icon-small">🔄</span>
-                            <div class="stat-info-small">
-                                <div class="stat-value-small available">{{ animatedAvailable }}</div>
-                                <div class="stat-label-small">可用</div>
-                            </div>
+                        <div class="legend-item">
+                            <span class="chart-dot error"></span>
+                            异常 <span class="legend-val">{{ statistics.error }}</span>
                         </div>
-                    </div>
-
-                    <div class="stat-border-small rate-border">
-                        <div class="stat-card-small">
-                            <span class="stat-icon-small">📊</span>
-                            <div class="stat-info-small">
-                                <div class="stat-value-small rate">{{ animatedUtilization }}%</div>
-                                <div class="stat-label-small">利用率</div>
-                            </div>
+                        <div class="legend-item">
+                            <span class="chart-dot available"></span>
+                            可用 <span class="legend-val">{{ statistics.available }}</span>
                         </div>
                     </div>
                 </div>
                 </dv-border-box8>
+                </div>
             </aside>
 
             <!-- 中间大框：库位列表 -->
@@ -128,46 +104,111 @@
                                 <span class="empty-icon">📭</span>
                                 <div class="empty-text">点击左侧分区查看库位</div>
                             </div>
-                            <el-table
-                                v-else
-                                :data="warehouseList"
-                                border
-                                size="small"
-                                class="warehouse-table"
-                            >
-                                <el-table-column prop="actualWarehouseCode" label="库位编码" width="120">
-                                    <template #default="scope">
-                                        <span class="code-tag">{{ scope.row.actualWarehouseCode }}</span>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="actualWarehouseName" label="库位名称" width="120" />
-                                <el-table-column prop="status" label="状态" width="100">
-                                    <template #default="scope">
-                                        <span class="status-tag" :class="scope.row.status">
-                                            {{ getStatusText(scope.row.status) }}
-                                        </span>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="coilCode" label="钢卷编号" width="150">
-                                    <template #default="scope">
-                                        <span v-if="scope.row.coilCode" class="coil-code">📦 {{ scope.row.coilCode }}</span>
-                                        <span v-else class="empty-code">-</span>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="coilQuantity" label="数量" width="80" />
-                            </el-table>
+                            <template v-else>
+                                <!-- 图例 -->
+                                <div class="grid-legend">
+                                    <div class="legend-item">
+                                        <span class="legend-dot available"></span>
+                                        <span>可用</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-dot occupied"></span>
+                                        <span>已占用</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-dot error"></span>
+                                        <span>异常</span>
+                                    </div>
+                                    <div class="legend-item">
+                                        <span class="legend-dot has-coil-icon"></span>
+                                        <span>有钢卷 ●</span>
+                                    </div>
+                                </div>
+                                <!-- 库位网格：外层容器负责裁剪，内层负责 flex 布局 + transform 移动 -->
+                                <div ref="gridContainerRef" class="warehouse-grid" @mouseenter="onGridMouseEnter" @mouseleave="onGridMouseLeave">
+                                    <div class="grid-inner" ref="gridInnerRef">
+                                    <div
+                                        v-for="colNum in sortedColumnKeys"
+                                        :key="colNum"
+                                        class="grid-column"
+                                        :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>
+                                    </div>
+                                    </div>
+                                </div>
+                            </template>
                         </div>
                     </div>
-                </dv-border-box1>>
+                </dv-border-box1>
             </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>
 </template>
 
 <script>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import * as echarts from 'echarts'
 import DataVLayout from "@/components/DataVLayout.vue";
-import { listActualWarehouseTree, listActualWarehouse } from '@/api/wms/actualWarehouse'
+import { treeActualWarehouseTwoLevel, listActualWarehouse } from '@/api/wms/actualWarehouse'
 
 export default {
     name: 'WarehouseOverview',
@@ -195,6 +236,7 @@ export default {
         // 统计数据
         const statistics = reactive({
             total: 0,
+            error: 0,
             occupied: 0,
             available: 0,
             utilization: 0
@@ -203,12 +245,183 @@ export default {
         // 动画数字
         const animatedTotal = ref(0)
         const animatedOccupied = ref(0)
+        const animatedError = ref(0)
         const animatedAvailable = ref(0)
         const animatedUtilization = ref(0)
 
         // 加载状态
         const loading = ref(false)
 
+        // 网格数据
+        const gridData = ref({})
+
+        // 排序的列键
+        const sortedColumnKeys = computed(() => {
+            return Object.keys(gridData.value).sort((a, b) => Number(a) - Number(b))
+        })
+
+        // 详情弹窗
+        const detailDialogVisible = ref(false)
+        const detailWarehouse = ref(null)
+
+        // 容器尺寸观测（自适应网格）
+        const gridContainerRef = ref(null)
+        const containerRect = reactive({ width: 800, height: 600 })
+        let resizeObserver = null
+
+        // 自适应格子尺寸
+        const cellSize = computed(() => {
+            const keys = sortedColumnKeys.value
+            const colCount = keys.length
+            if (!colCount) return 60
+
+            let maxRows = 0
+            keys.forEach(k => {
+                const col = gridData.value[k]
+                if (col) {
+                    maxRows = Math.max(maxRows, 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
+
+            let size = Math.min(byWidth, byHeight)
+            return Math.max(44, Math.min(80, Math.floor(size)))
+        })
+
+        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 columnWidth = computed(() => cellSize.value + 8)
+
+        // 测量网格容器尺寸（每次网格数据变化后调用）
+        const measureGridContainer = () => {
+            nextTick(() => {
+                const el = gridContainerRef.value
+                if (!el) return
+                const rect = el.getBoundingClientRect()
+                containerRect.width = rect.width
+                containerRect.height = rect.height
+                // 持久化 ResizeObserver，监听窗口缩放
+                if (!resizeObserver) {
+                    resizeObserver = new ResizeObserver(entries => {
+                        for (const entry of entries) {
+                            containerRect.width = entry.contentRect.width
+                            containerRect.height = entry.contentRect.height
+                        }
+                        nextTick(() => checkOverflow())
+                    })
+                    resizeObserver.observe(el)
+                }
+                // 检查是否需要自动滚动（立即 + 延迟，确保布局完成）
+                checkOverflow()
+                setTimeout(() => checkOverflow(), 400)
+            })
+        }
+
+        // --- 自动轮播滚动（transform 驱动，不依赖 overflow） ---
+        const gridInnerRef = ref(null)
+        let scrollTimer = null
+        let pauseTimer = null
+        let isScrollPaused = false
+
+        const startAutoScroll = () => {
+            stopAutoScroll()
+            const container = gridContainerRef.value
+            const inner = gridInnerRef.value
+            if (!container || !inner) return
+
+            // 测量实际溢出距离
+            const overflowX = Math.max(inner.scrollWidth - container.clientWidth, 0)
+            const overflowY = Math.max(inner.scrollHeight - container.clientHeight, 0)
+            if (overflowX <= 0 && overflowY <= 0) return // 无需滚动
+
+            let hPos = 0
+            let vPos = 0
+
+            const step = () => {
+                if (isScrollPaused) return
+
+                let changed = false
+
+                if (overflowX > 0) {
+                    hPos += 1
+                    if (hPos >= overflowX + 40) { // 多滚 40px 再回退
+                        hPos = 0
+                        changed = true
+                    }
+                }
+
+                if (overflowY > 0) {
+                    vPos += 0.5
+                    if (vPos >= overflowY + 30) {
+                        vPos = 0
+                        changed = true
+                    }
+                }
+
+                if (changed) {
+                    isScrollPaused = true
+                    clearTimeout(pauseTimer)
+                    pauseTimer = setTimeout(() => { isScrollPaused = false }, 2000)
+                }
+
+                inner.style.transform = `translate(${-hPos}px, ${-vPos}px)`
+            }
+
+            scrollTimer = setInterval(step, 30)
+        }
+
+        const stopAutoScroll = () => {
+            if (scrollTimer) {
+                clearInterval(scrollTimer)
+                scrollTimer = null
+            }
+            if (pauseTimer) {
+                clearTimeout(pauseTimer)
+                pauseTimer = null
+            }
+        }
+
+        const resetScroll = () => {
+            const inner = gridInnerRef.value
+            if (inner) {
+                inner.style.transform = 'translate(0, 0)'
+            }
+        }
+
+        const checkOverflow = () => {
+            const el = gridContainerRef.value
+            const inner = gridInnerRef.value
+            if (!el || !inner) return
+            stopAutoScroll()
+            resetScroll()
+            // 等待一帧让布局稳定再测量溢出
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    startAutoScroll()
+                })
+            })
+        }
+
+        const onGridMouseEnter = () => { isScrollPaused = true }
+        const onGridMouseLeave = () => { isScrollPaused = false }
+
+        // 监听仓库列表变化，数据就绪后启动滚动
+        const stopWatchList = watch(warehouseList, () => {
+            nextTick(() => checkOverflow())
+        })
+
         // 更新时间
         const updateTime = () => {
             const now = new Date()
@@ -245,11 +458,82 @@ export default {
             requestAnimationFrame(animate)
         }
 
-        // 获取仓库树形结构
+        // ===== 环图 =====
+        const chartRef = ref(null)
+        let chartInstance = null
+        let chartInitTimer = null
+
+        const initChart = () => {
+            // dv-border-box8 渲染较慢，需要延迟以确保容器有尺寸
+            if (chartInitTimer) clearTimeout(chartInitTimer)
+            chartInitTimer = setTimeout(() => {
+                const el = chartRef.value
+                if (!el || chartInstance) return
+                chartInstance = echarts.init(el, null, { renderer: 'canvas' })
+                updateChart()
+            }, 300)
+        }
+
+        const updateChart = () => {
+            if (!chartInstance) return
+            chartInstance.setOption({
+                backgroundColor: 'transparent',
+                tooltip: { trigger: 'item', formatter: '{b}: {c} 个 ({d}%)' },
+                series: [{
+                    type: 'pie',
+                    radius: ['50%', '72%'],
+                    center: ['50%', '50%'],
+                    avoidLabelOverlap: false,
+                    label: { show: false },
+                    emphasis: {
+                        label: { show: true, fontSize: 14, fontWeight: 'bold', color: '#fff' }
+                    },
+                    animationDuration: 1200,
+                    data: [
+                        { value: statistics.occupied || 0, name: '已占用', itemStyle: { color: '#7c63ff' } },
+                        { value: statistics.error || 0, name: '异常', itemStyle: { color: '#ff6b6b' } },
+                        { value: statistics.available || 0, name: '可用', itemStyle: { color: '#00ff88' } }
+                    ]
+                }],
+                graphic: [
+                    {
+                        type: 'text',
+                        left: 'center',
+                        top: '36%',
+                        style: {
+                            text: `${statistics.utilization}%`,
+                            fill: '#00d4ff',
+                            fontSize: 28,
+                            fontWeight: 'bold',
+                            fontFamily: 'Arial',
+                            lineHeight: 32
+                        }
+                    },
+                    {
+                        type: 'text',
+                        left: 'center',
+                        top: '52%',
+                        style: {
+                            text: '利用率',
+                            fill: '#6a8cb5',
+                            fontSize: 13,
+                            fontFamily: 'Arial',
+                            lineHeight: 20
+                        }
+                    }
+                ]
+            })
+        }
+
+        const handleChartResize = () => {
+            if (chartInstance) chartInstance.resize()
+        }
+
+        // 获取仓库树形结构（两级）
         const fetchWarehouseTree = async () => {
             try {
                 loading.value = true
-                const data = await listActualWarehouseTree()
+                const data = await treeActualWarehouseTwoLevel()
                 warehouseTree.value = data || []
             } catch (error) {
                 console.error('获取仓库树形结构失败:', error)
@@ -258,38 +542,6 @@ export default {
             }
         }
 
-        // 获取库位列表
-        const getWarehouseList = async (parentId) => {
-            try {
-                loading.value = true
-                const data = await listActualWarehouse({ parentId })
-                warehouseList.value = data || []
-
-                // 统计数据
-                const total = warehouseList.value.length
-                const occupied = warehouseList.value.filter(w =>
-                    w.status === 'occupied'
-                ).length
-                const available = total - occupied
-                const utilization = total > 0 ? Math.round((occupied / total) * 100) : 0
-
-                // 触发动画
-                animateValue(animatedTotal.value, total, (val) => { animatedTotal.value = val })
-                animateValue(animatedOccupied.value, occupied, (val) => { animatedOccupied.value = val })
-                animateValue(animatedAvailable.value, available, (val) => { animatedAvailable.value = val })
-                animateValue(animatedUtilization.value, utilization, (val) => { animatedUtilization.value = val })
-
-                statistics.total = total
-                statistics.occupied = occupied
-                statistics.available = available
-                statistics.utilization = utilization
-            } catch (error) {
-                console.error('获取库位列表失败:', error)
-            } finally {
-                loading.value = false
-            }
-        }
-
         // 树节点点击
         const handleNodeClick = (node) => {
             selectedNodeId.value = node.actualWarehouseId
@@ -300,15 +552,117 @@ export default {
             }
         }
 
-        // 状态文本
-        const getStatusText = (status) => {
-            const map = {
-                'occupied': '已占用',
-                'available': '可用',
-                'reserved': '预留',
-                'maintenance': '维护中'
+        // 获取库位列表
+        const getWarehouseList = async (parentId) => {
+            try {
+                loading.value = true
+                const data = await listActualWarehouse({ parentId })
+                warehouseList.value = data || []
+                buildGridData()
+                measureGridContainer()
+
+                // 确保环图已初始化（数据加载时 DOM 必定就绪）
+                nextTick(() => {
+                    if (!chartInstance) initChart()
+                    else updateChart()
+                })
+
+                // 统计数据 — 与 getStatusClass 逻辑一一对应
+                const total = warehouseList.value.length
+                const error = warehouseList.value.filter(w =>
+                    w.isEnabled === 0 && !w.currentCoilNo
+                ).length
+                const occupied = warehouseList.value.filter(w =>
+                    w.isEnabled === 0 && w.currentCoilNo
+                ).length
+                const available = warehouseList.value.filter(w =>
+                    w.isEnabled !== 0
+                ).length
+                const usable = occupied + available
+                const utilization = usable > 0 ? Math.round((occupied / usable) * 100) : 0
+
+                // 触发动画
+                animateValue(animatedTotal.value, total, (val) => { animatedTotal.value = val })
+                animateValue(animatedOccupied.value, occupied, (val) => { animatedOccupied.value = val })
+                animateValue(animatedError.value, error, (val) => { animatedError.value = val })
+                animateValue(animatedAvailable.value, available, (val) => { animatedAvailable.value = val })
+                animateValue(animatedUtilization.value, utilization, (val) => { animatedUtilization.value = val })
+
+                statistics.total = total
+                statistics.occupied = occupied
+                statistics.error = error
+                statistics.available = available
+                statistics.utilization = utilization
+                updateChart()
+            } catch (error) {
+                console.error('获取库位列表失败:', error)
+            } finally {
+                loading.value = false
             }
-            return map[status] || status || '未知'
+        }
+
+        // 获取状态文本
+        const getStatusText = (row) => {
+            if (row.isEnabled === 0 && !row.currentCoilNo) {
+                return '异常'
+            } else if (row.isEnabled === 0 && row.currentCoilNo) {
+                return '已占用'
+            } else {
+                return '可用'
+            }
+        }
+
+        // 获取状态样式类
+        const getStatusClass = (row) => {
+            if (row.isEnabled === 0 && !row.currentCoilNo) {
+                return 'error'
+            } else if (row.isEnabled === 0 && row.currentCoilNo) {
+                return 'occupied'
+            } else {
+                return 'available'
+            }
+        }
+
+        // 解析库位编码：如 F2A101-01-1 → { column: 101, row: 1, layer: 1 }
+        const parseWarehouseCode = (code) => {
+            if (!code) return null
+            const reg = /^([A-Za-z0-9]{3})([^-]+)-(\d{2})-(\d+)$/
+            const match = code.match(reg)
+            if (!match) return null
+            return {
+                column: Number(match[2]),
+                row: Number(match[3]),
+                layer: match[4]
+            }
+        }
+
+        // 构建网格数据结构：按列分组 → 按层分行
+        const buildGridData = () => {
+            const columns = {}
+            warehouseList.value.forEach(wh => {
+                const parsed = parseWarehouseCode(wh.actualWarehouseCode)
+                if (!parsed) return
+                wh.parsedInfo = parsed
+                if (!columns[parsed.column]) {
+                    columns[parsed.column] = { layer1: [], layer2: [] }
+                }
+                if (String(parsed.layer) === '1') {
+                    columns[parsed.column].layer1.push(wh)
+                } else {
+                    columns[parsed.column].layer2.push(wh)
+                }
+            })
+            Object.values(columns).forEach(col => {
+                col.layer1.sort((a, b) => a.parsedInfo.row - b.parsedInfo.row)
+                col.layer2.sort((a, b) => a.parsedInfo.row - b.parsedInfo.row)
+            })
+            gridData.value = columns
+        }
+
+        // 显示库位详情弹窗
+        const showDetail = (wh) => {
+            detailWarehouse.value = wh
+            detailDialogVisible.value = true
         }
 
         // 初始化
@@ -317,10 +671,23 @@ export default {
             timeInterval = setInterval(updateTime, 1000)
             // 加载仓库树形结构
             fetchWarehouseTree()
+            // 初始化环图
+            initChart()
+            window.addEventListener('resize', handleChartResize)
         })
 
         onBeforeUnmount(() => {
+            stopWatchList()
             if (timeInterval) clearInterval(timeInterval)
+            if (resizeObserver) resizeObserver.disconnect()
+            stopAutoScroll()
+            resetScroll()
+            if (chartInitTimer) clearTimeout(chartInitTimer)
+            window.removeEventListener('resize', handleChartResize)
+            if (chartInstance) {
+                chartInstance.dispose()
+                chartInstance = null
+            }
         })
 
         return {
@@ -332,11 +699,26 @@ export default {
             statistics,
             animatedTotal,
             animatedOccupied,
+            animatedError,
             animatedAvailable,
             animatedUtilization,
             getParticleStyle,
             handleNodeClick,
-            getStatusText
+            getStatusText,
+            getStatusClass,
+            // 网格
+            gridData,
+            sortedColumnKeys,
+            detailDialogVisible,
+            detailWarehouse,
+            showDetail,
+            cellStyle,
+            columnWidth,
+            onGridMouseEnter,
+            onGridMouseLeave,
+            chartRef,
+            gridContainerRef,
+            gridInnerRef
         };
     }
 };
@@ -650,10 +1032,9 @@ export default {
 
 .panel-body {
     flex: 1;
-    padding: 15px;
-    overflow-y: auto;
+    padding: 15px 10px;
+    overflow: hidden;
     min-height: 0;
-    max-height: 400px;
 }
 
 /* 树形样式 */
@@ -686,75 +1067,82 @@ export default {
     gap: 8px;
 }
 
-/* 侧边栏统计卡片 */
+/* 统计卡片包装 - 防止被 flex 压缩 */
+.stats-wrapper {
+    flex-shrink: 0;
+    min-height: 260px;
+}
+
+/* 侧边栏统计 - 环图 */
 .stats-sidebar {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-}
-
-.stat-border-small {
-    padding: 3px;
-    background: rgba(0, 212, 255, 0.1);
-    border-radius: 6px;
-}
-
-.stat-border-small.occupied-border {
-    background: rgba(124, 99, 255, 0.2);
-}
-
-.stat-border-small.available-border {
-    background: rgba(0, 255, 136, 0.2);
-}
-
-.stat-border-small.rate-border {
-    background: rgba(255, 159, 67, 0.2);
-}
-
-.stat-card-small {
-    background: rgba(10, 20, 40, 0.9);
-    border-radius: 4px;
-    padding: 12px 15px;
-    display: flex;
     align-items: center;
-    gap: 12px;
+    padding: 6px 8px;
+    min-height: 240px;
 }
 
-.stat-icon-small {
-    font-size: 20px;
+.total-row {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 2px;
 }
 
-.stat-info-small {
-    flex: 1;
-}
-
-.stat-value-small {
-    font-size: 18px;
+.total-num {
+    font-size: 32px;
     font-weight: bold;
     color: #00d4ff;
-    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
+    text-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
+    line-height: 1.1;
 }
 
-.stat-value-small.occupied {
-    color: #7c63ff;
-    text-shadow: 0 0 10px rgba(124, 99, 255, 0.6);
-}
-
-.stat-value-small.available {
-    color: #00ff88;
-    text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
-}
-
-.stat-value-small.rate {
-    color: #ff9f43;
-    text-shadow: 0 0 10px rgba(255, 159, 67, 0.6);
-}
-
-.stat-label-small {
+.total-lbl {
     font-size: 11px;
     color: #6a8cb5;
+    margin-top: 1px;
 }
 
+.ring-chart {
+    width: 100%;
+    height: 150px;
+    flex-shrink: 0;
+}
+
+.chart-legend {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    padding: 0 6px;
+    margin-top: 2px;
+}
+
+.chart-legend .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: #a0c4e8;
+}
+
+.chart-legend .legend-val {
+    margin-left: auto;
+    font-weight: 600;
+    color: #fff;
+}
+
+.chart-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.chart-dot.occupied { background: #7c63ff; }
+.chart-dot.error { background: #ff6b6b; }
+.chart-dot.available { background: #00ff88; }
+
 .header-badge {
     background: rgba(0, 212, 255, 0.2);
     color: #00d4ff;
@@ -782,9 +1170,11 @@ export default {
 .table-container {
     padding: 15px;
     height: calc(100% - 60px);
-    overflow-y: auto;
+    overflow: hidden;
     background: rgba(10, 20, 40, 0.85);
     border-radius: 6px;
+    display: flex;
+    flex-direction: column;
 }
 
 .empty-tip {
@@ -809,118 +1199,250 @@ export default {
     color: #8892a6;
 }
 
-/* 表格样式 */
-.warehouse-table {
-    background: transparent;
-    height: 100%;
+/* 图例 */
+.grid-legend {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 12px;
+    padding: 8px 16px;
+    background: rgba(0, 212, 255, 0.05);
+    border-radius: 4px;
+    border: 1px solid rgba(0, 212, 255, 0.1);
 }
 
-:deep(.warehouse-table .el-table__header-wrapper) {
-    border-radius: 4px 4px 0 0;
-    overflow: hidden;
-}
-
-:deep(.warehouse-table .el-table__header) {
-    background: rgba(0, 212, 255, 0.12);
-}
-
-:deep(.warehouse-table th) {
-    background: rgba(0, 212, 255, 0.18);
-    color: #00d4ff;
-    font-weight: 600;
-    border-bottom: 1px solid rgba(0, 212, 255, 0.35);
-    padding: 12px 16px;
-    font-size: 14px;
-    text-align: center;
-}
-
-:deep(.warehouse-table td) {
-    background: rgba(10, 20, 40, 0.7);
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
     color: #a0c4e8;
-    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
-    padding: 12px 16px;
-    font-size: 13px;
+}
+
+.legend-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.legend-dot.available { background: #00ff88; }
+.legend-dot.occupied { background: #7c63ff; }
+.legend-dot.error { background: #ff6b6b; }
+.legend-dot.has-coil-icon {
+    background: transparent;
+    color: #00d4ff;
+    font-size: 14px;
+    line-height: 12px;
     text-align: center;
+    border: none;
 }
 
-:deep(.warehouse-table tr:hover td) {
-    background: rgba(0, 212, 255, 0.15);
+/* 库位网格 */
+.warehouse-grid {
+    overflow: hidden;
+    flex: 1;
+    min-height: 0;
+    position: relative;
 }
 
-:deep(.warehouse-table .el-table__body-wrapper) {
-    overflow-x: auto;
+/* 内层内容容器：flex 布局 + transform 驱动轮播 */
+.grid-inner {
+    display: flex;
+    gap: 8px;
+    padding-bottom: 8px;
+    will-change: transform;
 }
 
-:deep(.warehouse-table .el-table__row) {
+.grid-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.column-header {
+    font-size: 12px;
+    color: #6a8cb5;
+    text-align: center;
+    padding: 4px 0;
+    margin-bottom: 4px;
+    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
+    width: 100%;
+    white-space: nowrap;
+}
+
+.grid-cell {
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
     transition: all 0.2s ease;
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    flex-shrink: 0;
 }
 
-:deep(.warehouse-table .el-table__row:hover) {
-    transform: scale(1.002);
+.grid-cell.available {
+    background: rgba(0, 255, 136, 0.15);
+    border-color: rgba(0, 255, 136, 0.3);
+    box-shadow: 0 0 8px rgba(0, 255, 136, 0.1);
 }
 
-.coil-code {
+.grid-cell.occupied {
+    background: rgba(124, 99, 255, 0.2);
+    border-color: rgba(124, 99, 255, 0.3);
+    box-shadow: 0 0 8px rgba(124, 99, 255, 0.15);
+}
+
+.grid-cell.error {
+    background: rgba(255, 107, 107, 0.15);
+    border-color: rgba(255, 107, 107, 0.3);
+    box-shadow: 0 0 8px rgba(255, 107, 107, 0.1);
+}
+
+.grid-cell.has-coil {
+    border-width: 2px;
+}
+
+.grid-cell.has-coil.available,
+.grid-cell.has-coil.occupied {
+    border-color: #00d4ff;
+    box-shadow: 0 0 12px rgba(0, 212, 255, 0.3);
+}
+
+.grid-cell:hover {
+    transform: scale(1.15);
+    z-index: 2;
+}
+
+.grid-cell:hover.available {
+    box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
+}
+
+.grid-cell:hover.occupied {
+    box-shadow: 0 0 20px rgba(124, 99, 255, 0.5);
+}
+
+.grid-cell:hover.error {
+    box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
+}
+
+.cell-code {
+    font-weight: 600;
+    color: #fff;
+    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
+    line-height: 1.2;
+    text-align: center;
+    word-break: break-all;
+}
+
+.cell-coil-dot {
+    font-size: 8px;
     color: #00d4ff;
-    font-weight: 500;
+    position: absolute;
+    top: 2px;
+    right: 4px;
+    text-shadow: 0 0 6px #00d4ff;
 }
 
-.empty-code {
-    color: #4a5568;
+.layer-divider {
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
+    margin: 4px 0;
+    flex-shrink: 0;
 }
 
-/* 自定义标签样式 */
-.code-tag {
-    background: rgba(0, 212, 255, 0.2);
-    color: #00d4ff;
-    padding: 4px 12px;
-    border-radius: 6px;
-    font-size: 12px;
+</style>
+
+<!-- 全局样式：弹窗 teleport 到 body，不受 scoped 限制 -->
+<style>
+.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);
 }
 
-.status-tag {
-    padding: 4px 12px;
-    border-radius: 6px;
+.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;
 }
 
-.status-tag.occupied {
+.detail-dialog .detail-status.occupied {
     background: rgba(124, 99, 255, 0.2);
     color: #7c63ff;
     border: 1px solid rgba(124, 99, 255, 0.3);
 }
 
-.status-tag.available {
+.detail-dialog .detail-status.available {
     background: rgba(0, 255, 136, 0.2);
     color: #00ff88;
     border: 1px solid rgba(0, 255, 136, 0.3);
 }
 
-.status-tag.reserved {
-    background: rgba(255, 215, 0, 0.2);
-    color: #ffd700;
-    border: 1px solid rgba(255, 215, 0, 0.3);
-}
-
-.status-tag.maintenance {
+.detail-dialog .detail-status.error {
     background: rgba(255, 107, 107, 0.2);
     color: #ff6b6b;
     border: 1px solid rgba(255, 107, 107, 0.3);
 }
 
-/* 滚动条样式 */
-:deep(.panel-body::-webkit-scrollbar) {
-    width: 6px;
+.detail-dialog .detail-body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
-:deep(.panel-body::-webkit-scrollbar-track) {
-    background: rgba(0, 212, 255, 0.1);
-    border-radius: 3px;
+.detail-dialog .detail-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
-:deep(.panel-body::-webkit-scrollbar-thumb) {
-    background: rgba(0, 212, 255, 0.4);
-    border-radius: 3px;
-    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+.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>