江夏区图书馆自助查询机
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

<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>