|
|
|
|
@ -43,46 +43,34 @@
|
|
|
|
|
draggable="false"
|
|
|
|
|
alt="overview"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 货架点位 -->
|
|
|
|
|
<div v-for="shelf in shelves" :key="shelf.id" class="shelf-point" :style="{
|
|
|
|
|
left: `${shelf.area_x}%`,
|
|
|
|
|
top: `${shelf.area_y}%`
|
|
|
|
|
}" @click="handleShelfClick(shelf)" />
|
|
|
|
|
<!-- 货架点位 + 弹窗（使用 Popover，追加到 body 避免裁切） -->
|
|
|
|
|
<el-popover
|
|
|
|
|
v-for="shelf in shelves"
|
|
|
|
|
:key="shelf.id"
|
|
|
|
|
placement="top"
|
|
|
|
|
trigger="manual"
|
|
|
|
|
:append-to-body="true"
|
|
|
|
|
v-model="shelf._show"
|
|
|
|
|
>
|
|
|
|
|
<div style="min-width:320px;max-width:560px;">
|
|
|
|
|
<div class="popup-header" style="text-align:left;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
|
|
|
|
|
<span style="font-weight:600;">{{ shelf.huojiamingcheng }}</span>
|
|
|
|
|
<el-button type="text" icon="el-icon-close" @click="shelf._show=false" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 物资信息浮窗 -->
|
|
|
|
|
<div v-if="showMaterialInfo" class="material-info-popup" :style="{
|
|
|
|
|
left: calculatePopupLeft(selectedShelf.area_x),
|
|
|
|
|
top: calculatePopupTop(selectedShelf.area_y),
|
|
|
|
|
transform: calculatePopupTransform(selectedShelf.area_x)
|
|
|
|
|
}">
|
|
|
|
|
<div class="popup-header" style="text-align: left;">
|
|
|
|
|
<el-button type="text" icon="el-icon-close" @click="showMaterialInfo = false" />
|
|
|
|
|
<span>{{ selectedShelf.huojiamingcheng }}</span>
|
|
|
|
|
|
|
|
|
|
<xy-table style="width:100%" :height="300" :list="materialList" :is-page="false" :table-item="materialTable">
|
|
|
|
|
<template v-slot:btns><div /></template>
|
|
|
|
|
</xy-table>
|
|
|
|
|
</div>
|
|
|
|
|
<xy-table style="width: 100%" :height="300" :list="materialList" :is-page="false"
|
|
|
|
|
:table-item="materialTable">
|
|
|
|
|
<template v-slot:btns>
|
|
|
|
|
<div />
|
|
|
|
|
</template>
|
|
|
|
|
<div
|
|
|
|
|
slot="reference"
|
|
|
|
|
class="shelf-point"
|
|
|
|
|
:style="{ left: `${shelf.area_x}%`, top: `${shelf.area_y}%` }"
|
|
|
|
|
@click="openShelfPopover(shelf)"
|
|
|
|
|
/>
|
|
|
|
|
</el-popover>
|
|
|
|
|
|
|
|
|
|
</xy-table>
|
|
|
|
|
<!-- <el-table :data="materialList" size="small" style="width: 100%" :max-height="300">
|
|
|
|
|
<el-table-column prop="name" label="物资名称"></el-table-column>
|
|
|
|
|
<el-table-column prop="quantity" label="数量"></el-table-column>
|
|
|
|
|
<el-table-column prop="unit" label="单位"></el-table-column>
|
|
|
|
|
<el-table-column prop="status" label="状态">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
|
|
|
|
|
{{ scope.row.status }}
|
|
|
|
|
</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()
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 处理货架点击
|
|
|
|
|
async handleShelfClick(shelf) {
|
|
|
|
|
// 处理货架点击（使用 Popover 展示）
|
|
|
|
|
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() {
|
|
|
|
|
// 如果需要在窗口大小改变时进行特殊处理
|
|
|
|
|
|
