修改

src/views/virtual/index.vue

@@ -43,46 +43,34 @@
                 draggable="false"
                 alt="overview"
               />
-              <!-- 货架点位 -->
+              <!-- 货架点位 + 弹窗（使用 Popover，追加到 body 避免裁切） -->
-              <div v-for="shelf in shelves" :key="shelf.id" class="shelf-point" :style="{
+          <el-popover
-                  left: `${shelf.area_x}%`,
+            v-for="shelf in shelves"
-                  top: `${shelf.area_y}%`
+            :key="shelf.id"
-                }" @click="handleShelfClick(shelf)" />
+            placement="top"
-            </div>
+            trigger="manual"
-           
+            :append-to-body="true"
-            <!-- 物资信息浮窗 -->
+            v-model="shelf._show"
-            <div v-if="showMaterialInfo" class="material-info-popup" :style="{
+          >
-                left: calculatePopupLeft(selectedShelf.area_x),
+            <div style="min-width:320px;max-width:560px;">
-                top: calculatePopupTop(selectedShelf.area_y),
+              <div class="popup-header" style="text-align:left;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
-                transform: calculatePopupTransform(selectedShelf.area_x)
+                <span style="font-weight:600;">{{ shelf.huojiamingcheng }}</span>
-              }">
+                <el-button type="text" icon="el-icon-close" @click="shelf._show=false" />
-              <div class="popup-header" style="text-align: left;">
-                <el-button type="text" icon="el-icon-close" @click="showMaterialInfo = false" />
-                <span>{{ selectedShelf.huojiamingcheng }}</span>
-                
               </div>
-              <xy-table style="width: 100%" :height="300" :list="materialList" :is-page="false"
+              <xy-table style="width:100%" :height="300" :list="materialList" :is-page="false" :table-item="materialTable">
-                :table-item="materialTable">
+                <template v-slot:btns><div /></template>
-                <template v-slot:btns>
-                  <div />
-                </template>
-
               </xy-table>
-              <!-- <el-table :data="materialList" size="small" style="width: 100%" :max-height="300">
+            </div>
-                <el-table-column prop="name" label="物资名称"></el-table-column>
+            <div
-                <el-table-column prop="quantity" label="数量"></el-table-column>
+              slot="reference"
-                <el-table-column prop="unit" label="单位"></el-table-column>
+              class="shelf-point"
-                <el-table-column prop="status" label="状态">
+              :style="{ left: `${shelf.area_x}%`, top: `${shelf.area_y}%` }"
-                  <template slot-scope="scope">
+              @click="openShelfPopover(shelf)"
-                    <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
+            />
-                      {{ scope.row.status }}
+          </el-popover>
-                    </el-tag>
+ 
-                  </template>
-                </el-table-column>
-              </el-table> -->
             </div>
           </div>
-          <!-- 无概览图时显示提示 -->
           <div v-else class="no-preview">
             <el-empty description="该仓库还没有概览图">
               <!-- <el-button type="primary" @click="handleAddImage">添加概览图</el-button> -->
@@ -90,7 +78,6 @@
           </div>
         </div>
       </div>
-      <!-- 未选择仓库时显示提示 -->
       <div v-else class="no-selection">
         <el-empty description="请选择一个仓库" />
       </div>
@@ -479,12 +466,15 @@
             this.resetView()
           },
 
-          // 处理货架点击
+          // 处理货架点击（使用 Popover 展示）
-          async handleShelfClick(shelf) {
+          async openShelfPopover(shelf) {
+            // 关闭其他弹层
+            this.shelves.forEach(s => this.$set(s, '_show', false))
             this.selectedShelf = shelf
-            // await this.fetchMaterialInfo(shelf.id);
             await this.fetchMaterialInfo(shelf.id)
-            this.showMaterialInfo = true
+            this.$nextTick(() => {
+              this.$set(shelf, '_show', true)
+            })
           },
 
           // 处理添加概览图
@@ -532,8 +522,6 @@
               leftPx = margin
               transform = 'translateX(0)'
             }
-            // 因为是 position absolute 仍相对预览容器定位
-            leftPx = leftPx - containerRect.left
             return { left: `${leftPx}px`, transform }
           },
           calculatePopupLeft(x) {
@@ -543,6 +531,48 @@
             return this.getPopupMetrics(x).transform
           },
  
+          // 固定定位样式，避免被父容器overflow裁切
+          getFixedPopupStyle(shelf) {
+            if (!shelf) return {}
+            const container = this.$el.querySelector('.preview-image')
+            const rect = container ? container.getBoundingClientRect() : {left: 0, top: 0, width: window.innerWidth, height: window.innerHeight}
+            const margin = 10
+            const popupWidth = Math.min(560, window.innerWidth * 0.8)
+            const popupHeight = 300
+            const xPercent = parseFloat(shelf.area_x)
+            const yPercent = parseFloat(shelf.area_y)
+            const anchorX = rect.left + (xPercent / 100) * rect.width
+            const anchorY = rect.top + (yPercent / 100) * rect.height
+ 
+             // 计算X（同getPopupMetrics逻辑）
+             let leftPx = anchorX
+             let transformX = 'translateX(-50%)'
+             if (anchorX + popupWidth / 2 > window.innerWidth - margin) {
+               leftPx = window.innerWidth - margin
+               transformX = 'translateX(-100%)'
+             } else if (anchorX - popupWidth / 2 < margin) {
+               leftPx = margin
+               transformX = 'translateX(0)'
+             }
+ 
+             // 计算Y：下方不够则显示在上方
+             let topPx = anchorY + 20
+             let transformY = ''
+             if (anchorY + 20 + popupHeight > window.innerHeight - margin) {
+               topPx = anchorY - (popupHeight + 20)
+             }
+             if (topPx < margin) topPx = margin
+ 
+             return {
+               position: 'fixed',
+               left: `${leftPx}px`,
+               top: `${topPx}px`,
+               transform: `${transformX} ${transformY}`.trim(),
+               maxWidth: '80vw',
+               zIndex: 10000
+             }
+           },
+
           // 可选：添加窗口调整处理
           handleResize() {
             // 如果需要在窗口大小改变时进行特殊处理