You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
577 lines
19 KiB
577 lines
19 KiB
<template>
|
|
<div class="content-main">
|
|
<Search refs="searchRefs" search-type="noList" />
|
|
<div class="box-style" style="margin: 30px 44px;">
|
|
<div class="dataScreening-header">
|
|
<h4 class="filter-header">架位总览</h4>
|
|
<div class="bookshelf-area">
|
|
<!-- <span class="bookshelf-area">{{ floorName }} - {{ regionName }} - {{ gridRow +'排' }}</span> -->
|
|
<!-- <router-link :to="{ path: '/', query: {floorTabIndex: floorTabIndex }}">
|
|
{{ floorName }}
|
|
</router-link>
|
|
<span>/</span>
|
|
<router-link :to="{ path: '/regions', query: {regionTabIndex: regionTabIndex }}">
|
|
{{ regionName }}
|
|
</router-link>
|
|
<span>/</span>
|
|
<router-link :to="{ path: '/shelf', query: {tabIndex: tabIndex }}">
|
|
{{ gridRow +'排' }}
|
|
</router-link>
|
|
<div class="double-click-btn"><span>点击左侧位置返回</span></div> -->
|
|
<router-link :to="{ path: '/shelf', query: {tabIndex: tabIndex }}">
|
|
<i class="iconfont icon-huifu" />返回
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<ul class="tab-nav">
|
|
<li v-for="(item,index) in tabListData" :key="index" class="active-tab-nav">{{ item.name }}<i /></li>
|
|
</ul>
|
|
|
|
<div v-loading="shelfAllGridDataLoading" class="gird-data-book">
|
|
<div v-for="(item,index) in shelfAllGridData" :key="index" class="gird-layer">
|
|
<span class="gird-left-line" />
|
|
<span class="gird-right-line" />
|
|
<div class="layer-left">
|
|
<div class="layer-left-book">
|
|
<!-- <div
|
|
v-for="(book,i) in item.books"
|
|
:key="i"
|
|
:class="['book-item', { 'red-active' : book.bookStatus === '错架'} ,{ 'blue-active' : book.bookStatus === '错序'}]"
|
|
@touchstart="handleTouchStart(index, i, $event)"
|
|
@touchmove="handleTouchMove(index, i, $event)"
|
|
@touchend="handleTouchEnd(index, i, $event)"
|
|
>
|
|
<span class="book-name">{{ book.bookName }}</span>
|
|
</div> -->
|
|
<!-- @touchstart="handleTouchStart(index, i, book, $event)" -->
|
|
<div :class="['swiper'+index,'rack-box-list']">
|
|
<div class="swiper-wrapper">
|
|
<div v-for="book in item.books" :key="book.id" :class="['list-item swiper-slide', { 'red-active' : book.bookStatus === '错架'} ,{ 'blue-active' : book.bookStatus === '错序'}]" @click="getBookDetaisByBookRecNo(book)">
|
|
<span class="book-name">{{ book.bookName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="layer-right-handle">
|
|
<div class="layer-info-header">
|
|
<h4>{{ item.gridName }}</h4>
|
|
<!-- <span>2024-11-28 09:46</span> -->
|
|
</div>
|
|
<div class="layer-right-content">
|
|
<div class="layer-tag-info">
|
|
<div class="tag-item tag-sort">错序:<i class="iconfont icon-zhuangtai2" /><p>{{ baseStockData.length !==0 && baseStockData[index].errorOrderNum }}</p><span>({{ baseStockData.length !==0 && baseStockData[index].errorOrderProbo }})</span></div>
|
|
<div class="tag-item tag-place">错架:<i class="iconfont icon-zhuangtai2" /><p>{{ baseStockData.length !==0 &&baseStockData[index].errorShelfNum }}</p><span>({{ baseStockData.length !==0 && baseStockData[index].errorShelfProbo }})</span></div>
|
|
<div class="tag-item tag-all">在架:<i class="iconfont icon-zhuangtai2" /><p>{{ baseStockData.length !==0 && baseStockData[index].onShelfNum }}</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- popover -->
|
|
<div
|
|
v-if="popoverIndex !== null"
|
|
class="popover-external-set"
|
|
:style="popoverStyle"
|
|
>
|
|
<div class="popover-content-set">
|
|
<div class="tooltip-top">
|
|
<h4>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookName }}</h4>
|
|
<span v-if="shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookStatus === '错序'" class="tag-item tag-place">错序</span>
|
|
<span v-if="shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookStatus === '错架'" class="tag-item tag-sort">错架</span>
|
|
</div>
|
|
<ul>
|
|
<li><p>索书号</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].sortmark }}</em></li>
|
|
<li><p>ISBN</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].isbn }}</em></li>
|
|
<li><p>著者</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookAuthor }}</em></li>
|
|
<li><p>出版社</p><em>{{ shelfAllGridData[popoverIndex.layer].books[popoverIndex.book].bookPublish }}</em></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- <ul class="change-layer">
|
|
<li v-for="(item,index) in rackOptions" :key="index" :class="{ 'active': layerVal === index+1 }" @click="changeShelfGetGrid(parseInt(item.name))">{{ item.name }}</li>
|
|
</ul> -->
|
|
<swiper
|
|
ref="swiperTitleLayer"
|
|
class="swiper-title layerShelf-swiper"
|
|
:options="swiperOptionTitlelayer"
|
|
:auto-update="true"
|
|
:auto-destroy="true"
|
|
>
|
|
<swiper-slide
|
|
v-for="(item,index) in rackOptions"
|
|
:key="index"
|
|
ref="swiperSlideItem"
|
|
class="swiper-slide-title"
|
|
>
|
|
<div
|
|
class="tab-name"
|
|
:class="{ active: layerVal === index+1 }"
|
|
@click="changeShelfGetGrid(parseInt(item.name))"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
<BookDetails ref="bookDetailsRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchShelfGridByShelfIdAndGridShelf, FetchBillByShelfIdAndGridShelf, FetchBookShelfDetails, FetchInitStockInfo, FetchInitBookDetailsByGrids, FetchBookDetaisByBookRecNo } from '@/api/inquiryMachine'
|
|
import { positionCrud } from './mixins/index.js'
|
|
import Search from './module/search'
|
|
import BookDetails from './module/bookDetails'
|
|
import { Swiper, swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import 'swiper/swiper-bundle.css'
|
|
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
Search,
|
|
BookDetails,
|
|
swiper,
|
|
swiperSlide
|
|
},
|
|
mixins: [positionCrud],
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
detailVisible: false,
|
|
detailTable: [],
|
|
detailCurrent: {},
|
|
tabdialogIndex: 0,
|
|
listLoading: false,
|
|
tabIndex: 0,
|
|
floorTabIndex: 0,
|
|
regionTabIndex: 0,
|
|
floorName: null,
|
|
floorId: null,
|
|
regionName: null,
|
|
regionId: null,
|
|
gridRow: null,
|
|
gridShelf: null,
|
|
bookShelfDetails: null,
|
|
booShelfGrid: null,
|
|
shelfAllGridData: [],
|
|
layerNum: 0,
|
|
rackNum: 0,
|
|
bookNum: 46,
|
|
layerVal: null,
|
|
rackOptions: [],
|
|
tabListData: [],
|
|
popoverIndex: null,
|
|
popoverVisible: [],
|
|
popoverStyles: [],
|
|
popoverPosition: { x: 0, y: 0 }, // Popover的位置
|
|
baseStockData: [],
|
|
shelfAllGridDataLoading: false,
|
|
billNoImg: null,
|
|
bigImg: '',
|
|
gridName: '',
|
|
getGridToward: 1,
|
|
swiperOptionTitlelayer: {
|
|
slidesPerView: 'auto',
|
|
freeMode: true
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
swiperTitleLayer() {
|
|
return this.$refs.swiperTitleLayer.$el.swiper
|
|
},
|
|
cellStyle: function() {
|
|
const h = '76px'
|
|
const w = '100%/' + this.rackNum
|
|
return { width: `calc(${w} )`, height: `calc(${h})` }
|
|
},
|
|
popoverStyle() {
|
|
return {
|
|
top: `${this.popoverPosition.y - 300}px`, // 鼠标的Y坐标偏移10px
|
|
left: `${this.popoverPosition.x - 240}px`, // 鼠标的X坐标偏移10px
|
|
position: 'absolute'
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
if (localStorage.getItem('dataScreenFloorTableIndex')) {
|
|
this.floorTabIndex = localStorage.getItem('dataScreenFloorTableIndex')
|
|
}
|
|
if (localStorage.getItem('dataScreenRegionTableIndex')) {
|
|
this.regionTabIndex = localStorage.getItem('dataScreenRegionTableIndex')
|
|
}
|
|
if (localStorage.getItem('dataScreenShelf')) {
|
|
const dataScreenShelf = JSON.parse(localStorage.getItem('dataScreenShelf'))
|
|
this.floorName = dataScreenShelf.floorName
|
|
this.regionName = dataScreenShelf.regionName
|
|
this.gridName = dataScreenShelf.gridName
|
|
this.gridRow = dataScreenShelf.gridRow
|
|
this.gridShelf = dataScreenShelf.gridShelf
|
|
|
|
if (localStorage.getItem('dataScreenShelfAllGrid')) {
|
|
this.shelfAllGridData = JSON.parse(localStorage.getItem('dataScreenShelfAllGrid'))
|
|
}
|
|
|
|
// 单面/双面
|
|
this.tabListData = [{ name: dataScreenShelf.regionName + ' - ' + this.removeAreaPrefix(dataScreenShelf.gridName) }]
|
|
|
|
this.tabIndex = dataScreenShelf.toward - 1
|
|
FetchBookShelfDetails({ 'shelfId': dataScreenShelf.shelfId }).then(res => {
|
|
this.layerNum = res.shelfFloor
|
|
this.rackNum = res.shelfShelf
|
|
this.floorId = res.floorId
|
|
this.regionId = res.regionId
|
|
this.bookShelfDetails = res
|
|
|
|
this.rackOptions = []
|
|
for (let i = 1; i <= this.rackNum; i++) {
|
|
this.rackOptions.push({ id: i, name: `0${i}架` })
|
|
}
|
|
this.layerVal = parseInt(this.gridShelf) || ''
|
|
|
|
this.getInitStockInfo(this.shelfAllGridData)
|
|
|
|
this.getInitBookDetailsByGrids(this.shelfAllGridData)
|
|
|
|
this.initSwiper()
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
initSwiper() {
|
|
this.$nextTick(() => {
|
|
this.shelfAllGridData.forEach((el, index) => {
|
|
new Swiper('.swiper' + index, {
|
|
slidesPerView: 'auto',
|
|
slidesPerGroup: 15,
|
|
observer: true
|
|
})
|
|
})
|
|
})
|
|
},
|
|
removeAreaPrefix(gridNames) {
|
|
const index = gridNames.indexOf('面')
|
|
if (index !== -1) {
|
|
return gridNames.substring(0, index + 1)
|
|
}
|
|
return gridNames
|
|
},
|
|
|
|
getBillByShelfIdAndGridShelf(data) {
|
|
const params = {
|
|
'gridShelf': data[0].gridShelf,
|
|
'ShelfId': data[0].shelfId,
|
|
'size': 5
|
|
}
|
|
FetchBillByShelfIdAndGridShelf(params).then(res => {
|
|
if (res !== null) {
|
|
this.checkDateLine = res.sort((a, b) => {
|
|
return new Date(b.endTime) - new Date(a.endTime)
|
|
})
|
|
this.billNoImg = this.checkDateLine[0].stockBill
|
|
this.checkDateLine[0].icon = 'el-icon-more'
|
|
this.checkDateLine[0].color = '#0bbd87'
|
|
} else {
|
|
this.checkDateLine = []
|
|
}
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
async getInitStockInfo(data) {
|
|
const promises = data.map(item => {
|
|
const params = {
|
|
'fondsCode': this.libcode,
|
|
'floorId': this.floorId,
|
|
'regionId': this.regionId,
|
|
'shelfId': item.shelfId,
|
|
'gridId': item.id
|
|
}
|
|
return FetchInitStockInfo(params)
|
|
})
|
|
const results = await Promise.all(promises)
|
|
if (!Array.isArray(this.baseStockData)) {
|
|
this.baseStockData = []
|
|
}
|
|
this.baseStockData = this.baseStockData.concat(results)
|
|
},
|
|
getInitBookDetailsByGrids(data) {
|
|
const ids = data.map(item => item.id)
|
|
const params = {
|
|
'grids': ids.join(',')
|
|
}
|
|
FetchInitBookDetailsByGrids(params).then(res => {
|
|
this.shelfAllGridData.forEach((item) => {
|
|
const gridId = item.id
|
|
if (Object.prototype.hasOwnProperty.call(res, gridId)) {
|
|
// item.books = res[gridId]
|
|
this.$set(item, 'books', res[gridId])
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
handleDetail(item) {
|
|
console.log('item', item)
|
|
this.detailVisible = true
|
|
this.detailTable = item.books
|
|
this.detailCurrent = item
|
|
if (this.detailCurrent.onShelfNum) {
|
|
this.bigImg = `${this.baseApi}/api/fileRelevant/getImg?imgType=1&imgId=/${this.libcode}/${this.billNoImg}/${this.detailCurrent.gridCode}/img_result/result_LSD_compressed.jpg`
|
|
} else {
|
|
this.bigImg = ''
|
|
}
|
|
},
|
|
// handleTouchStart(item) {
|
|
// // this.isTouching = true
|
|
// // this.showPopover(layerIndex, bookIndex, event)
|
|
|
|
// // this.$refs.bookDetailsRef.detailShow = true
|
|
// },
|
|
getBookDetaisByBookRecNo(item) {
|
|
FetchBookDetaisByBookRecNo({
|
|
'bookRecNo': item.bookRecNo
|
|
}).then(res => {
|
|
this.$refs.bookDetailsRef.getBookRankingDetail(res)
|
|
}).catch(() => {
|
|
this.$message.error('接口错误')
|
|
})
|
|
},
|
|
handleTouchMove(layerIndex, bookIndex, event) {
|
|
if (this.isTouching) {
|
|
this.showPopover(layerIndex, bookIndex, event)
|
|
}
|
|
},
|
|
handleTouchEnd(layerIndex, bookIndex, event) {
|
|
this.isTouching = false
|
|
this.hidePopover()
|
|
},
|
|
showPopover(layerIndex, bookIndex, event) {
|
|
this.popoverIndex = { layer: layerIndex, book: bookIndex }
|
|
const bookElement = event.target // 获取书籍项元素
|
|
const rect = bookElement.getBoundingClientRect() // 获取边界
|
|
if (layerIndex === 0) {
|
|
this.popoverPosition = {
|
|
x: window.scrollX + rect.left + rect.width / 2 - 40,
|
|
y: window.scrollY + rect.top + rect.height
|
|
}
|
|
} else {
|
|
this.popoverPosition = {
|
|
x: window.scrollX + rect.left + rect.width / 2 - 40,
|
|
y: window.scrollY + rect.top + rect.height - 170
|
|
}
|
|
}
|
|
},
|
|
hidePopover() {
|
|
this.popoverIndex = null
|
|
},
|
|
updateParts(gridName) {
|
|
const parts = gridName.match(/(\d+)区(\d+)排([A-Za-z])面(\d+)架(\d+)层/)
|
|
if (parts) {
|
|
this.getGridShelf = parts[4]
|
|
this.getGridFloor = parts[5]
|
|
const toward = parts[3]
|
|
if (toward === 'A') {
|
|
this.getGridToward = 1
|
|
} else if (toward === 'B') {
|
|
this.getGridToward = 2
|
|
}
|
|
}
|
|
},
|
|
changeShelfGetGrid(val) {
|
|
this.updateParts(this.gridName)
|
|
this.shelfAllGridDataLoading = true
|
|
this.layerVal = val
|
|
const params = {
|
|
'gridShelf': '0' + val,
|
|
'shelfId': this.bookShelfDetails.id,
|
|
'toward': this.getGridToward,
|
|
'floorType': this.bookShelfDetails.floorType
|
|
}
|
|
FetchShelfGridByShelfIdAndGridShelf(params).then(res => {
|
|
this.shelfAllGridData = []
|
|
this.shelfAllGridData = res
|
|
this.getInitStockInfo(this.shelfAllGridData)
|
|
|
|
this.getInitBookDetailsByGrids(this.shelfAllGridData)
|
|
|
|
this.shelfAllGridDataLoading = false
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~@/assets/styles/index.scss";
|
|
.gird-data-book{
|
|
position: relative;
|
|
// padding: 0 10px;
|
|
// height: 650px;
|
|
// margin-top: 4px;
|
|
// overflow: hidden;
|
|
// overflow-y: scroll;
|
|
}
|
|
|
|
.gird-layer{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.gird-left-line{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: block;
|
|
width: 6px;
|
|
height: 130px;
|
|
background: url('~@/assets/images/shelf01.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
z-index: 999;
|
|
}
|
|
.gird-right-line{
|
|
position: absolute;
|
|
right: calc(310px);
|
|
top: 0;
|
|
display: block;
|
|
width: 6px;
|
|
height: 130px;
|
|
background: url('~@/assets/images/shelf01.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
z-index: 999;
|
|
}
|
|
.layer-left{
|
|
width: calc(100% - 300px);
|
|
height: 130px;
|
|
margin-right: 5px;
|
|
padding: 0 0 0 12px;
|
|
background: url('~@/assets/images/shelf02.png') repeat left top;
|
|
background-size: 10% 100%;
|
|
overflow: hidden;
|
|
overflow-x: scroll;
|
|
}
|
|
.layer-left-book{
|
|
// width: calc(100vw - 655px);
|
|
height: 130px;
|
|
white-space: nowrap;
|
|
.rack-box-list{
|
|
height: 200px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.list-item{
|
|
display: inline-block;
|
|
border: none;
|
|
width: 42px;
|
|
height: 120px;
|
|
background: url('~@/assets/images/shelf03.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
margin-left: -14px;
|
|
margin-top: 10px;
|
|
.book-name{
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 16px;
|
|
display: block;
|
|
height: 90px;
|
|
font-size: 16px;
|
|
writing-mode:vertical-rl;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
&.red-active{
|
|
background: url('~@/assets/images/shelf05.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
}
|
|
&.blue-active{
|
|
background: url('~@/assets/images/shelf06.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.layer-right-handle{
|
|
width: 300px;
|
|
padding: 0 10px;
|
|
background-color: #E8F2FF;
|
|
margin: 3px 5px;
|
|
border-radius: 6px;
|
|
}
|
|
.layer-info-header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
line-height: 36px;
|
|
h4{
|
|
font-size: 20px;
|
|
color: #0c0e1e;
|
|
}
|
|
span{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.layer-right-content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.layer-tag-info{
|
|
div.tag-item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
line-height: 26px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.layer-handle{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.el-button,
|
|
.el-button--info.is-plain {
|
|
margin-left: 0 !important;
|
|
margin-bottom: 10px;
|
|
padding: 7px 10px !important;
|
|
font-weight: bold !important;
|
|
border-color: #0348f3 !important;
|
|
color: #0348f3 !important;
|
|
}
|
|
.check-btn{
|
|
color: #fff !important;
|
|
background-color: #0348f3 !important;
|
|
}
|
|
}
|
|
|
|
.layerShelf-swiper{
|
|
margin-top: 20px;
|
|
::v-deep .swiper-wrapper{
|
|
font-size: 20px;
|
|
border-bottom: none !important;
|
|
.swiper-slide-title {
|
|
width: auto !important;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
.tab-name {
|
|
padding: 5px 10px;
|
|
&.active {
|
|
background-color: #0348F3;
|
|
color: #fff;
|
|
border-radius: 6px;
|
|
border: 2px solid #0348F3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|