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.
295 lines
11 KiB
295 lines
11 KiB
<template>
|
|
<div class="app-container">
|
|
<div class="venue-header dataScreening-header">
|
|
<h4><i class="iconfont icon-shuju" />区域总览</h4>
|
|
<div class="bookshelf-area">
|
|
<!-- <span class="bookshelf-area">{{ floorName }} </span> -->
|
|
<router-link :to="{ path: '/check/check/dataScreening', query: {floorTabIndex: floorTabIndex }}">
|
|
{{ floorName }}
|
|
</router-link>
|
|
<div class="double-click-btn"><span>点击左侧位置返回</span></div>
|
|
</div>
|
|
<p><i class="iconfont icon-gongsi" />{{ user.fonds.fondsName }}</p>
|
|
</div>
|
|
<div class="venue-content dataScreening-content">
|
|
<crudOperation :permission="permission">
|
|
<template v-slot:middle>
|
|
<el-button v-permission="permission.add" class="check-btn" size="mini" @click="toAdd(2)">
|
|
<i class="iconfont icon-shengchengpandiandan" />
|
|
区域盘点
|
|
</el-button>
|
|
</template>
|
|
<template v-slot:right>
|
|
<el-button :loading="crud.downloadLoading" size="mini" @click="doExport(2)">
|
|
<i class="iconfont icon-daochu" />
|
|
导出
|
|
</el-button>
|
|
</template>
|
|
</crudOperation>
|
|
<div class="venue-left">
|
|
<div class="container-right tab-content">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<!-- <ul class="tab-nav">
|
|
<li v-for="(item,index) in regionOptions" :key="index" :class="{ 'active-tab-nav': tabIndex == index }" @click="changeActiveTab(index)">{{ item.regionName }}<i /></li>
|
|
<span class="tab-right-img" />
|
|
</ul> -->
|
|
<swiper ref="swiperTitle" class="swiper-title" :options="swiperOptionTitle" :auto-update="true" :auto-destroy="true">
|
|
<swiper-slide v-for="(item,index) in regionOptions" :key="index" ref="swiperSlideItem" class="swiper-slide-title">
|
|
<div class="tab-name" :class="{ active: tabIndex == index }" @click="changeActiveTab(index)">
|
|
{{ item.regionName }}
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
<CanvasPreview ref="previewRefs" v-loading="prewLoading" page-preview="region" :current-mark-data="currentMarkData" :image-url="imageUrl" />
|
|
</div>
|
|
</div>
|
|
<div class="venue-right">
|
|
<div class="lib-right-item lib-info">
|
|
<h4>本区概况</h4>
|
|
<ul class="data-right-list">
|
|
<li><p>书架</p><span><i>{{ baseData.shelfCount }}</i>个</span></li>
|
|
<li><p>摄像头</p><span><i>{{ baseData.deviceCount }}</i>个</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="lib-right-item">
|
|
<h4>本区盘点概况</h4>
|
|
<!-- <div class="refresh-date">2024-11-28 09:46</div> -->
|
|
<ul class="data-right-list">
|
|
<li><p>在架</p><span><i>{{ baseStockData.onShelfNum }}</i>册</span></li>
|
|
<li><p>错架</p><span><i>{{ baseStockData.errorShelfNum }}</i>册</span> <span class="percentage">（{{ baseStockData.errorShelfProbo }}）</span></li>
|
|
<li><p>错序</p><span><i>{{ baseStockData.errorOrderNum }}</i>册</span><span class="percentage">（{{ baseStockData.errorOrderProbo }}）</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="lib-right-item">
|
|
<h4>本区流通统计</h4>
|
|
<div class="refresh-date">2024-11-28 09:46</div>
|
|
<bookSwiper ref="bookSwiperRefs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<eForm ref="eform" />
|
|
<exportForm ref="exportform" export-type="regions" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchInitStockInfo } from '@/api/stockTask/index'
|
|
import { dataScreeningCrud } from '@/views/visualCheck/mixins/index'
|
|
import crudRegion from '@/api/area/index'
|
|
import { FetchInitBookShelfList } from '@/api/shelf/index'
|
|
import CRUD, { presenter, header, crud } from '@crud/crud'
|
|
import crudOperation from '@crud/CRUD.operation'
|
|
import { mapGetters } from 'vuex'
|
|
import defaultImg from '@/assets/images/system/default-img.jpg'
|
|
import bookSwiper from '@/views/components/bookSwiper.vue'
|
|
import CanvasPreview from '@/views/components/canvasPreview.vue'
|
|
import eForm from './module/form'
|
|
import exportForm from './module/export'
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import 'swiper/dist/css/swiper.css'
|
|
|
|
export default {
|
|
name: 'DataScreening',
|
|
components: { crudOperation, bookSwiper, CanvasPreview, eForm, exportForm, swiper, swiperSlide },
|
|
cruds() {
|
|
return CRUD({ title: '区域总览', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: {
|
|
add: false,
|
|
edit: false,
|
|
del: false,
|
|
download: false,
|
|
group: false,
|
|
reset: false
|
|
}
|
|
})
|
|
},
|
|
mixins: [presenter(), header(), crud(), dataScreeningCrud],
|
|
data() {
|
|
return {
|
|
prewLoading: false,
|
|
regionOptions: [],
|
|
floorName: null,
|
|
currentRegionId: null,
|
|
tabIndex: 0,
|
|
floorTabIndex: 0,
|
|
defaultImg: defaultImg,
|
|
imageUrl: defaultImg,
|
|
imageRegionUrl: defaultImg,
|
|
currentMarkData: null,
|
|
allCoverData: [],
|
|
swiperActiveIndex: 0,
|
|
rightDataIndex: null,
|
|
swiperOptionTitle: {
|
|
slidesPerView: 'auto',
|
|
freeMode: true
|
|
},
|
|
tabListData: [{ name: '热门图书' }, { name: '热门架位' }, { name: '冷面图书' }],
|
|
permission: {
|
|
add: ['admin', 'floor:add'],
|
|
edit: ['admin', 'floor:edit'],
|
|
del: ['admin', 'floor:del']
|
|
},
|
|
baseStockDataAllShelf: [],
|
|
swiperParams: {},
|
|
swiperShelfParams: {}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user',
|
|
'baseApi'
|
|
]),
|
|
swiperTitle() {
|
|
return this.$refs.swiperTitle.$el.swiper
|
|
}
|
|
},
|
|
methods: {
|
|
handleToShelfs() {
|
|
this.$router.push({ path: '/dataScreening/shelf', query: { }})
|
|
},
|
|
[CRUD.HOOK.beforeRefresh]() {
|
|
const data = JSON.parse(localStorage.getItem('dataScreenFloor'))
|
|
this.crud.query.floorId = data.floorId
|
|
this.currentRegionId = data.id
|
|
},
|
|
[CRUD.HOOK.afterRefresh](crud) {
|
|
if (localStorage.getItem('dataScreenFloorTableIndex')) {
|
|
this.floorTabIndex = localStorage.getItem('dataScreenFloorTableIndex')
|
|
}
|
|
|
|
this.regionOptions = crud.data
|
|
const item = this.regionOptions.find(element => element.id === this.currentRegionId)
|
|
let index
|
|
if (this.$route.query.regionTabIndex) {
|
|
index = this.$route.query.regionTabIndex
|
|
} else {
|
|
index = item ? this.regionOptions.indexOf(item) : -1
|
|
}
|
|
this.floorName = this.regionOptions[index].floorName
|
|
this.tabIndex = index
|
|
this.changeActiveTab(index)
|
|
|
|
// 盘点概况
|
|
const params = {
|
|
'floorId': this.regionOptions[this.tabIndex].floorId,
|
|
'regionId': this.regionOptions[this.tabIndex].id
|
|
}
|
|
this.handleInitStockInfo(params)
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs.bookSwiperRefs.swiperParams = params
|
|
this.$refs.bookSwiperRefs.swiperShelfParams = params
|
|
if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) {
|
|
this.$refs.bookSwiperRefs.getInitHotBookList()
|
|
} else {
|
|
this.$refs.bookSwiperRefs.getInitHotShelfList()
|
|
}
|
|
})
|
|
},
|
|
// 提交前的验证
|
|
[CRUD.HOOK.afterValidateCU](crud) {
|
|
return true
|
|
},
|
|
toAdd(type) {
|
|
// this.$refs.eform.formVisible = true
|
|
this.$refs.eform.form.regionId = this.regionOptions[this.tabIndex].id
|
|
this.$refs.eform.form.stockRegion = this.regionOptions[this.tabIndex].floorName + '-' + this.regionOptions[this.tabIndex].regionName
|
|
this.$refs.eform.setData(type)
|
|
},
|
|
doExport(type) {
|
|
this.$refs.exportform.formExportVisible = true
|
|
this.$refs.exportform.type = 2
|
|
this.$refs.exportform.params = {
|
|
'regionId': this.regionOptions[this.tabIndex].id
|
|
}
|
|
},
|
|
async getInitStockInfo(data) {
|
|
const promises = data.map(item => {
|
|
const params = {
|
|
'floorId': this.floorId,
|
|
'regionId': this.regionId,
|
|
'shelfId': item.shelfId
|
|
}
|
|
return FetchInitStockInfo(params)
|
|
})
|
|
const results = await Promise.all(promises)
|
|
if (!Array.isArray(this.baseStockDataAllShelf)) {
|
|
this.baseStockDataAllShelf = []
|
|
}
|
|
// 为每个结果对象添加id字段
|
|
results.forEach((result, index) => {
|
|
result.id = data[index].shelfId
|
|
})
|
|
this.baseStockDataAllShelf = this.baseStockDataAllShelf.concat(results)
|
|
return this.baseStockDataAllShelf
|
|
},
|
|
|
|
async changeActiveTab(index) {
|
|
this.prewLoading = true
|
|
this.tabIndex = index
|
|
this.swiperTitle.slideTo(index, 500, false)
|
|
const params = {
|
|
'floorId': this.regionOptions[index].floorId,
|
|
'regionId': this.regionOptions[index].id
|
|
}
|
|
try {
|
|
const res = await FetchInitBookShelfList(params)
|
|
this.allCoverData = res.content
|
|
if (this.regionOptions[index].regionMap) {
|
|
this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + this.regionOptions[index].regionMap
|
|
} else {
|
|
this.imageUrl = this.defaultImg
|
|
}
|
|
|
|
if (this.allCoverData.length !== 0) {
|
|
this.currentMarkData = this.regionOptions[index]
|
|
const signPoint = this.allCoverData.find(item => item.signPoint !== null)?.signPoint
|
|
const imgInfo = signPoint ? JSON.parse(signPoint).imgInfo : null
|
|
const baseStockDataAllShelf = await this.getInitStockInfo(this.allCoverData)
|
|
const parsedSignPoints = this.allCoverData.map(item => {
|
|
const signPoint = item.signPoint ? JSON.parse(item.signPoint) : null
|
|
return {
|
|
id: item.shelfId,
|
|
name: item.shelfName,
|
|
rowType: item.rowType,
|
|
toward: item.toward,
|
|
floorName: item.floorName,
|
|
regionName: item.regionName,
|
|
shelfFloor: item.shelfFloor,
|
|
shelfShelf: item.shelfShelf,
|
|
floorId: this.regionOptions[index].floorId,
|
|
regionId: this.regionOptions[index].id,
|
|
pointInfo: signPoint ? signPoint.pointInfo[0].pointInfo : null
|
|
}
|
|
})
|
|
parsedSignPoints.forEach(parsedItem => {
|
|
const baseStockItem = baseStockDataAllShelf.find(baseItem => baseItem.id === parsedItem.id)
|
|
if (baseStockItem) {
|
|
Object.assign(parsedItem, baseStockItem)
|
|
}
|
|
})
|
|
|
|
const result = {
|
|
pointInfo: parsedSignPoints,
|
|
imgInfo: imgInfo
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.previewRefs.initCanvasPreview(result, this.tabIndex)
|
|
})
|
|
} else {
|
|
this.currentMarkData = {}
|
|
setTimeout(() => {
|
|
this.prewLoading = false
|
|
}, 500)
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|