|
|
@ -53,16 +53,17 @@ |
|
|
</div> |
|
|
</div> |
|
|
<ul v-loading="listLoading" class="data-shelf-row" :style="rowStyle"> |
|
|
<ul v-loading="listLoading" class="data-shelf-row" :style="rowStyle"> |
|
|
<!-- :class="{ active: i === cellIndex }" --> |
|
|
<!-- :class="{ active: i === cellIndex }" --> |
|
|
|
|
|
<!-- { active: columnIndex === i % rackNum} --> |
|
|
<li |
|
|
<li |
|
|
v-for="(cell,i) in booShelfGrid" |
|
|
v-for="(cell,i) in booShelfGrid" |
|
|
:key="i" |
|
|
:key="i" |
|
|
class="data-shelf-cell" |
|
|
|
|
|
|
|
|
:class="['data-shelf-cell',{'active': isActiveColumn(i)}]" |
|
|
:style="cellStyle" |
|
|
:style="cellStyle" |
|
|
@dblclick="handleCellCurrent(cell,i)" |
|
|
@dblclick="handleCellCurrent(cell,i)" |
|
|
@mouseenter="showPopover(i)" |
|
|
@mouseenter="showPopover(i)" |
|
|
@mouseleave="hidePopover" |
|
|
@mouseleave="hidePopover" |
|
|
> |
|
|
> |
|
|
<!-- <span class="cell-name">{{ removeAreaPrefix(cell.gridName) }}</span> --> |
|
|
|
|
|
|
|
|
<div class="mask" /> |
|
|
<div class="tag-info"> |
|
|
<div class="tag-info"> |
|
|
<p class="tag-sort"><i class="iconfont icon-zhuangtai2" />1</p> |
|
|
<p class="tag-sort"><i class="iconfont icon-zhuangtai2" />1</p> |
|
|
<p class="tag-place"><i class="iconfont icon-zhuangtai2" />1</p> |
|
|
<p class="tag-place"><i class="iconfont icon-zhuangtai2" />1</p> |
|
|
@ -76,13 +77,13 @@ |
|
|
:style="popoverStyles[i]" |
|
|
:style="popoverStyles[i]" |
|
|
trigger="manual" |
|
|
trigger="manual" |
|
|
> |
|
|
> |
|
|
<div slot="reference" class="popover-content"> |
|
|
|
|
|
|
|
|
<div slot="reference" class="popover-content-set"> |
|
|
<div class="tooltip-top"> |
|
|
<div class="tooltip-top"> |
|
|
<h4>层位概况</h4> |
|
|
|
|
|
|
|
|
<h4>本架概况</h4> |
|
|
<i class="update-time">2024-11-28 09:46</i> |
|
|
<i class="update-time">2024-11-28 09:46</i> |
|
|
</div> |
|
|
</div> |
|
|
<ul> |
|
|
<ul> |
|
|
<li><p>层位</p><em class="percentage"><i style="color: #fff;">{{ removeAreaPrefix(cell.gridName) }}</i></em></li> |
|
|
|
|
|
|
|
|
<li><p>架位</p><em class="percentage"><i style="color: #fff;">{{ removeAreaPrefix(cell.gridName) }}</i></em></li> |
|
|
<li><p>在架</p><em><i>15000</i>册</em></li> |
|
|
<li><p>在架</p><em><i>15000</i>册</em></li> |
|
|
<li><p>错架</p><em><i>300</i>层</em> <em class="percentage">（2.00%）</em></li> |
|
|
<li><p>错架</p><em><i>300</i>层</em> <em class="percentage">（2.00%）</em></li> |
|
|
<li><p>错序</p><em><i>0</i>层</em><em class="percentage">（0.00%）</em></li> |
|
|
<li><p>错序</p><em><i>0</i>层</em><em class="percentage">（0.00%）</em></li> |
|
|
@ -95,14 +96,14 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div class="venue-right"> |
|
|
<div class="venue-right"> |
|
|
<div class="lib-right-item lib-info"> |
|
|
<div class="lib-right-item lib-info"> |
|
|
<h4>本架概况</h4> |
|
|
|
|
|
|
|
|
<h4>书架概况</h4> |
|
|
<ul class="data-right-list"> |
|
|
<ul class="data-right-list"> |
|
|
<li><p>书架</p><span><i>001排</i></span></li> |
|
|
<li><p>书架</p><span><i>001排</i></span></li> |
|
|
<li><p>规格</p><span><i>双面 6 x 5</i></span></li> |
|
|
<li><p>规格</p><span><i>双面 6 x 5</i></span></li> |
|
|
</ul> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lib-right-item"> |
|
|
<div class="lib-right-item"> |
|
|
<h4>本架盘点概况</h4> |
|
|
|
|
|
|
|
|
<h4>书架盘点概况</h4> |
|
|
<div class="refresh-date">2024-11-28 09:46</div> |
|
|
<div class="refresh-date">2024-11-28 09:46</div> |
|
|
<ul class="data-right-list"> |
|
|
<ul class="data-right-list"> |
|
|
<li><p>在架</p><span><i>15000</i>册</span></li> |
|
|
<li><p>在架</p><span><i>15000</i>册</span></li> |
|
|
@ -163,6 +164,7 @@ export default { |
|
|
rackNum: 0, |
|
|
rackNum: 0, |
|
|
swiperActiveIndex: 0, |
|
|
swiperActiveIndex: 0, |
|
|
cellIndex: null, |
|
|
cellIndex: null, |
|
|
|
|
|
columnIndex: null, |
|
|
swiperOptionContent: { |
|
|
swiperOptionContent: { |
|
|
slidesPerView: 'auto', |
|
|
slidesPerView: 'auto', |
|
|
on: { |
|
|
on: { |
|
|
@ -187,7 +189,8 @@ export default { |
|
|
}, |
|
|
}, |
|
|
popoverIndex: null, |
|
|
popoverIndex: null, |
|
|
popoverVisible: [], |
|
|
popoverVisible: [], |
|
|
popoverStyles: [] |
|
|
|
|
|
|
|
|
popoverStyles: [], |
|
|
|
|
|
activeColumns: {} |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
@ -281,11 +284,7 @@ export default { |
|
|
this.$refs.eform.setData(type) |
|
|
this.$refs.eform.setData(type) |
|
|
}, |
|
|
}, |
|
|
removeAreaPrefix(gridNames) { |
|
|
removeAreaPrefix(gridNames) { |
|
|
const index = gridNames.indexOf('区') |
|
|
|
|
|
if (index !== -1) { |
|
|
|
|
|
return gridNames.substring(index + 1) |
|
|
|
|
|
} |
|
|
|
|
|
return gridNames |
|
|
|
|
|
|
|
|
return gridNames.replace(/\d*区|\d*层/g, '') |
|
|
}, |
|
|
}, |
|
|
getInitShelfGridByShelfId(toward) { |
|
|
getInitShelfGridByShelfId(toward) { |
|
|
this.listLoading = true |
|
|
this.listLoading = true |
|
|
@ -311,6 +310,8 @@ export default { |
|
|
const sortMethod = sortFunction[shelfType][floorType] |
|
|
const sortMethod = sortFunction[shelfType][floorType] |
|
|
this.booShelfGrid = this[sortMethod](res) |
|
|
this.booShelfGrid = this[sortMethod](res) |
|
|
|
|
|
|
|
|
|
|
|
console.log('booShelfGrid', this.booShelfGrid) |
|
|
|
|
|
|
|
|
this.popoverVisible = Array(this.booShelfGrid.length).fill(false) |
|
|
this.popoverVisible = Array(this.booShelfGrid.length).fill(false) |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this.listLoading = false |
|
|
this.listLoading = false |
|
|
@ -436,7 +437,7 @@ export default { |
|
|
if (columnIndex === this.rackNum - 1) { |
|
|
if (columnIndex === this.rackNum - 1) { |
|
|
lastColumnIndexes.push(i) |
|
|
lastColumnIndexes.push(i) |
|
|
// 更新最后一列的样式 |
|
|
// 更新最后一列的样式 |
|
|
// this.$set(this.popoverStyles, i, { position: 'absolute', left: '0', top: '20px' }) |
|
|
|
|
|
|
|
|
this.$set(this.popoverStyles, i, { position: 'absolute', left: '-180px', top: '20px' }) |
|
|
} |
|
|
} |
|
|
// 如果是倒数第二列（第4列） |
|
|
// 如果是倒数第二列（第4列） |
|
|
if (columnIndex === this.rackNum - 2) { |
|
|
if (columnIndex === this.rackNum - 2) { |
|
|
@ -445,10 +446,16 @@ export default { |
|
|
// this.$set(this.popoverStyles, i, { position: 'absolute', left: '-20px', top: '20px' }) |
|
|
// this.$set(this.popoverStyles, i, { position: 'absolute', left: '-20px', top: '20px' }) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
const columnIndex = index % this.rackNum |
|
|
|
|
|
this.activeColumns[columnIndex] = true |
|
|
|
|
|
}, |
|
|
|
|
|
isActiveColumn(index) { |
|
|
|
|
|
const columnIndex = index % this.rackNum |
|
|
|
|
|
return this.activeColumns[columnIndex] === true |
|
|
}, |
|
|
}, |
|
|
hidePopover() { |
|
|
hidePopover() { |
|
|
|
|
|
this.activeColumns = {} |
|
|
this.popoverIndex = null |
|
|
this.popoverIndex = null |
|
|
// 隐藏所有的popover |
|
|
|
|
|
this.popoverVisible.forEach((isVisible, index) => { |
|
|
this.popoverVisible.forEach((isVisible, index) => { |
|
|
if (isVisible) { |
|
|
if (isVisible) { |
|
|
this.$set(this.popoverVisible, index, false) |
|
|
this.$set(this.popoverVisible, index, false) |
|
|
@ -565,8 +572,14 @@ export default { |
|
|
line-height: 76px; |
|
|
line-height: 76px; |
|
|
} |
|
|
} |
|
|
&.active{ |
|
|
&.active{ |
|
|
color: #fff; |
|
|
|
|
|
background-color: #0348F3; |
|
|
|
|
|
|
|
|
.mask{ |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 6px; |
|
|
|
|
|
width: 98%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background-color: rgba(255,0,0,.3); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -575,57 +588,12 @@ export default { |
|
|
position: absolute !important; |
|
|
position: absolute !important; |
|
|
left: 60% !important; |
|
|
left: 60% !important; |
|
|
top: 48px !important; |
|
|
top: 48px !important; |
|
|
width: 300px; |
|
|
|
|
|
height: 210px; |
|
|
|
|
|
background:rgba(0,0,0,.8); |
|
|
|
|
|
|
|
|
width: 250px; |
|
|
|
|
|
// height: 210px; |
|
|
|
|
|
background:rgba(0,0,0,1); |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
border-radius: 6px; |
|
|
border-radius: 6px; |
|
|
z-index: 99999999; |
|
|
z-index: 99999999; |
|
|
.popover-content{ |
|
|
|
|
|
.tooltip-top{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
line-height: 40px; |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
border-bottom: 1px solid #fff; |
|
|
|
|
|
} |
|
|
|
|
|
.tooltip-top i{ |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
ul{ |
|
|
|
|
|
padding: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
ul li{ |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
line-height: 36px; |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
ul li p{ |
|
|
|
|
|
width: 80px; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
} |
|
|
|
|
|
ul li em{ |
|
|
|
|
|
width: 100px; |
|
|
|
|
|
display: block; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
} |
|
|
|
|
|
ul li i{ |
|
|
|
|
|
font-style: normal; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
color: #0348f3; |
|
|
|
|
|
} |
|
|
|
|
|
ul li em.percentage{ |
|
|
|
|
|
width: auto; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
