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.
1142 lines
39 KiB
1142 lines
39 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 }} - {{ regionName }} - {{ gridRow +'排' }}</span> -->
|
|
<router-link :to="{ path: '/check/check/dataScreening', query: {floorTabIndex: floorTabIndex }}">
|
|
{{ floorName }}
|
|
</router-link>
|
|
<span>/</span>
|
|
<router-link :to="{ path: '/dataScreening/regions', query: {regionTabIndex: regionTabIndex }}">
|
|
{{ regionName }}
|
|
</router-link>
|
|
<span>/</span>
|
|
<router-link :to="{ path: '/dataScreening/shelf', query: {tabIndex: tabIndex }}">
|
|
{{ gridRow +'排' }}
|
|
</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">
|
|
<div class="tab-content">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<div class="gird-data-header">
|
|
<ul class="tab-nav">
|
|
<li v-for="(item,index) in tabListData" :key="index" class="active-tab-nav">{{ item.name }}<i /></li>
|
|
<!-- 最右侧装饰img -->
|
|
<span class="tab-right-img" />
|
|
</ul>
|
|
<!-- <div class="tag-info">
|
|
<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-all">在架：<i class="iconfont icon-zhuangtai2" />20</p>
|
|
</div> -->
|
|
<div v-if="checkDateLine.length !== 0" class="time-update-cont">
|
|
<span class="time-left-txt">最后更新时间：</span>
|
|
<!-- <el-button class="time-btn-txt">{{ checkDateLine[2].endTime }}</el-button> -->
|
|
<el-button>{{ checkDateLine[timeIndex].stockType === 0 ? '现在' : checkDateLine[timeIndex].endTime }}</el-button>
|
|
<div class="time-update-line">
|
|
<ul class="el-timeline">
|
|
<li v-for="(activity, index) in checkDateLine" :key="index" class="el-timeline-item" @click="handleHistory(activity,index)">
|
|
<div class="el-timeline-item__tail" />
|
|
<div class="el-timeline-item__node el-timeline-item__node--normal" :style="index === timeIndex ? 'background-color: rgb(11, 189, 135);' : ''">
|
|
<i v-if="index === timeIndex" class="el-timeline-item__icon el-icon-more" />
|
|
</div>
|
|
<div class="el-timeline-item__wrapper">
|
|
<div class="el-timeline-item__content">
|
|
{{ computedStockType(activity.stockType) }}
|
|
</div>
|
|
<div class="el-timeline-item__timestamp is-bottom">
|
|
{{ activity.endTime }}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<crudOperation :permission="permission">
|
|
<template v-slot:middle>
|
|
<el-select v-model="layerVal" size="small" placeholder="架位" class="filter-item" style="width: 100px; margin-right: 10px;" @change="changeShelfGetGrid">
|
|
<el-option v-for="item in rackOptions" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
<el-button v-permission="permission.add" class="check-btn" size="mini" @click="toAdd(5)">
|
|
<i class="iconfont icon-shengchengpandiandan" />
|
|
架位盘点
|
|
</el-button>
|
|
</template>
|
|
<template v-slot:right>
|
|
<!-- @click="doExport(crud.selections)" -->
|
|
<el-button :loading="crud.downloadLoading" size="mini" @click="doExport(3)">
|
|
<i class="iconfont icon-daochu" />
|
|
导出
|
|
</el-button>
|
|
</template>
|
|
</crudOperation>
|
|
</div>
|
|
|
|
<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 === '错序'}]"
|
|
@mouseenter="showPopover(index, i, $event)"
|
|
@mouseleave="hidePopover"
|
|
>
|
|
<span class="book-name">{{ book.bookName }}</span>
|
|
</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 class="layer-handle">
|
|
<el-button size="mini" @click="handleDetail(item)">
|
|
<i class="iconfont icon-xiaowenjian" />
|
|
详情
|
|
</el-button>
|
|
<el-button size="mini" class="check-btn" @click="toAdd(6,item)">
|
|
<i class="iconfont icon-shengchengpandiandan" />
|
|
盘点
|
|
</el-button>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 详情 -->
|
|
<el-dialog class="dialog-grid-detail" append-to-body :close-on-click-modal="false" :visible.sync="detailVisible" :title="detailCurrent.gridName +'- 详情'" @close="handleCloseDialog">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
|
|
<div class="setting-dialog">
|
|
<div class="detail-tab tab-content">
|
|
<!-- <el-button v-if="detailCurrent && detailCurrent.onShelfNum" class="check-view-img" size="mini" @click="handleViewImg">
|
|
<i class="iconfont icon-sulan" />
|
|
盘点照片
|
|
</el-button> -->
|
|
<div v-if="detailCurrent && detailCurrent.onShelfNum" style="height: 260px; background-color: #ccc; overflow: hidden; position: relative;" @dblclick="handleViewImg" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseleave="onMouseUp" @mouseup="onMouseUp">
|
|
<img
|
|
ref="image"
|
|
style="display:block; width: 100%;cursor: grab;"
|
|
:src="bigImg"
|
|
alt=""
|
|
@wheel="onWheel"
|
|
>
|
|
<span style="position: absolute; top: 0; right: 0; padding: 4px 6px; color: #fff; background-color: rgba(3,72,243,.8); border-radius: 4px;">双击可查看所有图片</span>
|
|
<el-button v-if="shouldShowResetButton" style="position: absolute; bottom: 10px; right: 10px; background-color: #fff; color: rgba(3,72,243,1); font-weight: bold; padding: 4px;" @click="resetImage"><i class="iconfont icon-shuaxin" style="font-size: 12px;" />重置</el-button>
|
|
</div>
|
|
<ul class="tab-nav">
|
|
<li :class="{'active-tab-nav': tabdialogIndex === 0}" @click="changeDialogTab(0)">图书列表</li>
|
|
<el-button class="compare-btn" @click="isCompare = !isCompare">
|
|
<i :class="['iconfont', !isCompare ? 'icon-zhongxinjiance':'icon-huifu' ]" />{{ !isCompare ? '数据比对' : '返回列表' }}</el-button>
|
|
</ul>
|
|
<el-table
|
|
v-if="!isCompare"
|
|
ref="table"
|
|
class="archives-table"
|
|
:data="detailTable"
|
|
style="width: 100%;"
|
|
height="calc(100vh - 560px)"
|
|
>
|
|
<el-table-column type="index" label="序号" width="55" align="center" />
|
|
<el-table-column prop="bookName" label="题名" min-width="110" show-overflow-tooltip />
|
|
<el-table-column prop="isbn" label="ISBN" />
|
|
<el-table-column prop="sortmark" label="索书号" />
|
|
<el-table-column prop="barcode" label="条码" />
|
|
<el-table-column prop="floorName" label="所在位置" min-width="160">
|
|
<template slot-scope="scope">
|
|
<span>
|
|
{{ getLocation(scope.row) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="bookStatus" label="盘点结果" align="center">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.bookStatus === '未知'" class="row-state row-warehousing">未知</span>
|
|
<span v-if="scope.row.bookStatus === '在架'" class="row-state row-binding state-active">在架</span>
|
|
<span v-if="scope.row.bookStatus === '错架'" class="row-state row-lending state-active">错架</span>
|
|
<span v-if="scope.row.bookStatus === '错序'" class="row-state row-physical state-active">错序</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<swiper
|
|
v-else
|
|
ref="swiperList"
|
|
class="swiper-title layerShelf-swiper"
|
|
:options="swiperListOptions"
|
|
:auto-update="true"
|
|
:auto-destroy="true"
|
|
>
|
|
<swiper-slide
|
|
v-for="(item,index) in detailTable"
|
|
:key="index"
|
|
ref="swiperSlideItem"
|
|
class="swiper-slide-title"
|
|
>
|
|
<div class="book-name" :class="[{ 'red-active' : item.bookStatus === '错架'} ,{ 'blue-active' : item.bookStatus === '错序'}]">
|
|
<span>{{ index+1 }}</span>
|
|
{{ item.bookName }}
|
|
</div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<el-dialog class="gird-img-detail" append-to-body :close-on-click-modal="false" :visible.sync="detailImgVisible">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="gird-img-button">
|
|
<el-button size="mini" :loading="downImgLoading" :disabled="downImgLoading" @click="handleDownloadImg">
|
|
<i class="iconfont icon-xiazai" />
|
|
下载
|
|
</el-button>
|
|
<el-button size="mini" @click="handleCloseImgDialog">
|
|
<i class="iconfont icon-guanbixiao" />
|
|
关闭
|
|
</el-button>
|
|
</div>
|
|
<div class="setting-dialog">
|
|
<el-carousel ref="carousel" indicator-position="outside" :autoplay="false" @setActiveItem="setActiveItem">
|
|
<el-carousel-item v-for="item in bookImgData" :key="item">
|
|
<img :src="item" alt="">
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</el-dialog>
|
|
<eForm ref="eform" />
|
|
<exportForm ref="exportform" export-type="grid" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchInitStockInfo, FetchInitBookDetailsByGrids, FetchBillByShelfIdAndGridShelf, FetchIsGoodcutByBillNoAndGridId, FetchShowByBillIdAndShelfIdAndGridShelf } from '@/api/stockTask/index'
|
|
import { dataScreeningCrud } from '@/views/visualCheck/mixins/index'
|
|
import { FetchBookShelfDetails, FetchShelfGridByShelfIdAndGridShelf } from '@/api/shelf/index'
|
|
import crudRegion from '@/api/area/index'
|
|
import CRUD, { presenter, header, crud } from '@crud/crud'
|
|
import crudOperation from '@crud/CRUD.operation'
|
|
import { mapGetters } from 'vuex'
|
|
import eForm from './module/form'
|
|
import exportForm from './module/export'
|
|
import { parseTime, saveAs, getBlob } from '@/utils/index'
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import 'swiper/dist/css/swiper.css'
|
|
|
|
export default {
|
|
name: 'DataScreening',
|
|
components: { crudOperation, 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
|
|
},
|
|
queryOnPresenterCreated: false
|
|
})
|
|
},
|
|
mixins: [presenter(), header(), crud(), dataScreeningCrud],
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
downImgLoading: false,
|
|
detailVisible: false,
|
|
detailImgVisible: 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: [],
|
|
permission: {
|
|
add: ['admin', 'floor:add'],
|
|
edit: ['admin', 'floor:edit'],
|
|
del: ['admin', 'floor:del']
|
|
},
|
|
popoverIndex: null,
|
|
popoverVisible: [],
|
|
popoverStyles: [],
|
|
currentBookName: '', // 当前书籍的名称
|
|
popoverPosition: { x: 0, y: 0 }, // Popover的位置
|
|
checkDateLine: [],
|
|
baseStockData: [],
|
|
shelfAllGridDataLoading: false,
|
|
billNoImg: null,
|
|
bookImgData: [],
|
|
bigImg: '',
|
|
timeIndex: 0,
|
|
gridName: '',
|
|
getGridToward: 1,
|
|
currentScale: 1, // 当前缩放比例
|
|
isDragging: false, // 是否正在拖拽图片
|
|
startX: 0, // 拖拽起始点x坐标
|
|
startY: 0, // 拖拽起始点y坐标
|
|
translateX: 0, // 图片平移x方向距离
|
|
translateY: 0, // 图片平移y方向距离
|
|
dragSpeed: 0.3, // 拖拽速度
|
|
zoomSpeed: 0.1, // 控制缩放速度
|
|
maxScale: 5, // 最大缩放值
|
|
minScale: 0.1, // 最小缩放值
|
|
swiperListOptions: {
|
|
slidesPerView: 'auto',
|
|
freeMode: true
|
|
},
|
|
isCompare: false,
|
|
shouldShowResetButton: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user',
|
|
'baseApi'
|
|
]),
|
|
swiperList() {
|
|
return this.$refs.swiperList.$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'
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
[CRUD.HOOK.beforeRefresh]() {
|
|
},
|
|
[CRUD.HOOK.afterRefresh](crud) {
|
|
},
|
|
// 提交前的验证
|
|
[CRUD.HOOK.afterValidateCU](crud) {
|
|
return true
|
|
},
|
|
computedStockType(stockType) {
|
|
switch (stockType) {
|
|
case 1:
|
|
return '全量盘点'
|
|
case 2:
|
|
return '区域盘点'
|
|
case 3:
|
|
return '计划盘点'
|
|
case 4:
|
|
return '书架盘点'
|
|
case 5:
|
|
return '架位盘点'
|
|
case 6:
|
|
return '层位盘点'
|
|
default:
|
|
return '现在'
|
|
}
|
|
},
|
|
initData() {
|
|
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.updateParts(dataScreenShelf.gridName)
|
|
// 单面/双面
|
|
this.tabListData = [{ name: dataScreenShelf.regionName + ' - ' + this.removeAreaPrefix(dataScreenShelf.gridName) }]
|
|
|
|
// dataScreenShelf.rowType === 1
|
|
// ? dataScreenShelf.toward === 1
|
|
// ? [{ name: 'A面' }]
|
|
// : [{ name: 'B面' }]
|
|
// : [{ name: 'A面' }, { name: 'B面' }]
|
|
|
|
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.getBillByShelfIdAndGridShelf(this.shelfAllGridData)
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
},
|
|
removeQUPrefix(gridNames) {
|
|
const index = gridNames.indexOf('区')
|
|
if (index !== -1) {
|
|
return gridNames.substring(index + 1)
|
|
}
|
|
return gridNames
|
|
},
|
|
removeAreaPrefix(gridNames) {
|
|
const index = gridNames.indexOf('面')
|
|
if (index !== -1) {
|
|
return gridNames.substring(0, index + 1)
|
|
}
|
|
return gridNames
|
|
},
|
|
getLocation(row) {
|
|
const parts = []
|
|
if (row.floorName) {
|
|
parts.push(row.floorName)
|
|
}
|
|
if (row.regionName) {
|
|
parts.push(row.regionName)
|
|
}
|
|
if (row.gridName) {
|
|
parts.push(row.gridName)
|
|
}
|
|
return parts.length > 0 ? parts.join('-') : '-'
|
|
},
|
|
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.checkDateLine.unshift({
|
|
stockType: 0,
|
|
icon: 'el-icon-more',
|
|
color: '#0bbd87'
|
|
})
|
|
this.billNoImg = this.checkDateLine[this.timeIndex].stockType === 0 ? this.checkDateLine[1].stockBill : this.checkDateLine[this.timeIndex].stockBill
|
|
} else {
|
|
this.checkDateLine = []
|
|
}
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
async getInitStockInfo(data) {
|
|
const promises = data.map(item => {
|
|
const params = {
|
|
'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 (res.hasOwnProperty(gridId)) {
|
|
this.$set(item, 'books', res[gridId])
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
toAdd(type, item) {
|
|
if (type === 5) {
|
|
// this.$refs.eform.formVisible = true
|
|
this.$refs.eform.form.shelfId = this.bookShelfDetails.id
|
|
this.$refs.eform.form.toward = this.getGridToward
|
|
this.$refs.eform.form.gridShelf = this.gridShelf
|
|
this.$refs.eform.form.stockRegion = this.floorName + '-' + this.regionName + '-' + this.bookShelfDetails.shelfName + this.gridShelf + '架'
|
|
} else {
|
|
// if (item.isCheck) {
|
|
// this.$refs.eform.formVisible = true
|
|
this.$refs.eform.form.shelfId = null
|
|
this.$refs.eform.form.gridShelf = null
|
|
this.$refs.eform.form.gridId = item.id
|
|
this.$refs.eform.form.toward = this.getGridToward
|
|
this.$refs.eform.form.stockRegion = this.removeQUPrefix(item.gridName)
|
|
this.$refs.eform.gridStockRegion = this.floorName + '-' + this.regionName + '-' + this.removeQUPrefix(item.gridName)
|
|
// } else {
|
|
// this.$message({ message: '当前层位不可盘点', type: 'error', offset: 8 })
|
|
// }
|
|
}
|
|
this.$refs.eform.setData(type, item)
|
|
},
|
|
doExport(type) {
|
|
this.$refs.exportform.formExportVisible = true
|
|
this.$refs.exportform.type = 3
|
|
this.$refs.exportform.params = {
|
|
// 'floorId': this.floorId,
|
|
// 'regionId': this.regionId,
|
|
'shelfId': this.bookShelfDetails.id
|
|
}
|
|
},
|
|
handleCellCurrent(item, index) {
|
|
this.cellIndex = index
|
|
this.cellInfo = {
|
|
id: item.id,
|
|
gridName: item.gridName,
|
|
startSortmark: item.startSortmark,
|
|
endSortmark: item.endSortmark,
|
|
cameraId: item.cameraId,
|
|
check: item.isCheck,
|
|
order: item.isOrder
|
|
}
|
|
this.handleToGrids(this.cellInfo)
|
|
},
|
|
handleDetail(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 = ''
|
|
}
|
|
},
|
|
setActiveItem(index) {
|
|
this.$refs.carousel.setActiveItem(index)
|
|
},
|
|
// 鼠标按下事件处理函数
|
|
onMouseDown(e) {
|
|
e.preventDefault()
|
|
this.isDragging = true
|
|
this.startX = e.clientX
|
|
this.startY = e.clientY
|
|
this.$refs.image.style.cursor = 'grabbing'
|
|
},
|
|
// 鼠标移动事件处理函数
|
|
onMouseMove(e) {
|
|
if (!this.isDragging) return
|
|
const deltaX = (e.clientX - this.startX) * this.dragSpeed
|
|
const deltaY = (e.clientY - this.startY) * this.dragSpeed
|
|
this.translateX += deltaX
|
|
this.translateY += deltaY
|
|
this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`
|
|
this.startX = e.clientX
|
|
this.startY = e.clientY
|
|
this.shouldShowResetButton = true
|
|
},
|
|
// 鼠标松开事件处理函数
|
|
onMouseUp() {
|
|
this.isDragging = false
|
|
this.$refs.image.style.cursor = 'grab'
|
|
},
|
|
// 鼠标滚轮事件处理函数
|
|
onWheel(e) {
|
|
e.preventDefault()
|
|
const delta = e.deltaY > 0 ? -1 : 1
|
|
this.currentScale = Math.min(this.maxScale, Math.max(this.minScale, this.currentScale + delta * this.zoomSpeed))
|
|
this.$refs.image.style.transform = `scale(${this.currentScale}) translate(${this.translateX}px, ${this.translateY}px)`
|
|
this.shouldShowResetButton = true
|
|
},
|
|
// 重置图片缩放和移动
|
|
resetImage() {
|
|
this.currentScale = 1
|
|
this.translateX = 0
|
|
this.translateY = 0
|
|
this.$refs.image.style.transform = 'scale(1) translate(0, 0)'
|
|
this.shouldShowResetButton = false
|
|
},
|
|
handleViewImg() {
|
|
// /PD20250102001/040011011/img_result/result_cut_1.jpg
|
|
// /PD20250102001/040011011/img_result/result_cut_2.jpg
|
|
// /PD20250102001/040011011/img_result/result_cut_3.jpg
|
|
// http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=/ceshi111/1_1_book_spine-0.png
|
|
|
|
// http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=/1501/PD20250108013/010011015/img_result/result_LSD.jpg
|
|
// http://192.168.99.67:12010/api/fileRelevant/getImg?imgType=1&imgId=/1501/PD20250108013/010011015/img_result/result_cut_1_compressed.jpg
|
|
|
|
this.bookImgData = []
|
|
this.detailImgVisible = true
|
|
const params = {
|
|
'billNo': this.billNoImg,
|
|
'gridId': this.detailCurrent.id
|
|
}
|
|
FetchIsGoodcutByBillNoAndGridId(params)
|
|
.then(res => {
|
|
const baseUrl = `${this.baseApi}/api/fileRelevant/getImg?imgType=1&imgId=/${this.libcode}/${this.billNoImg}/${this.detailCurrent.gridCode}/img_result/`
|
|
const commonImgs = [
|
|
`${baseUrl}result_LSD_compressed.jpg`,
|
|
`${baseUrl}result_cut_1_compressed.jpg`
|
|
]
|
|
this.$refs.carousel.setActiveItem(0)
|
|
if (res === null) {
|
|
this.bookImgData = commonImgs
|
|
} else if (res === true) {
|
|
this.bookImgData = [...commonImgs, `${baseUrl}result_cut_2_compressed.jpg`]
|
|
} else if (res === false) {
|
|
this.bookImgData = [...commonImgs, `${baseUrl}result_cut_2_compressed.jpg`, `${baseUrl}result_cut_3_compressed.jpg`]
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error(error)
|
|
})
|
|
},
|
|
handleDownloadImg() {
|
|
this.downImgLoading = true
|
|
const idsArray = []
|
|
for (const url of this.bookImgData) {
|
|
const startIndex = url.indexOf('imgId=') + 'imgId='.length
|
|
const endIndex = url.length
|
|
idsArray.push(url.slice(startIndex, endIndex))
|
|
}
|
|
// 下载桶图片
|
|
const params = {
|
|
'imgIds': idsArray
|
|
}
|
|
const url = this.baseApi + '/api/fileRelevant/uploadImgs' + '?' + new URLSearchParams(params).toString()
|
|
getBlob(url, (blob) => {
|
|
const fileName = this.billNoImg + '-' + parseTime(new Date()) + '.zip'
|
|
saveAs(blob, fileName)
|
|
this.downImgLoading = false
|
|
})
|
|
},
|
|
handleCloseDialog() {
|
|
this.detailVisible = false
|
|
this.isCompare = false
|
|
if (this.shouldShowResetButton) {
|
|
this.resetImage()
|
|
}
|
|
},
|
|
handleCloseImgDialog() {
|
|
this.detailImgVisible = false
|
|
this.activeIndex = 0
|
|
},
|
|
handleToGrids(data) {
|
|
this.$router.push({ path: '/dataScreening/gird' })
|
|
localStorage.setItem('dataScreenShelf', JSON.stringify(data))
|
|
},
|
|
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
|
|
// 隐藏所有的popover
|
|
// this.popoverVisible.forEach((isVisible, index) => {
|
|
// if (isVisible) {
|
|
// this.$set(this.popoverVisible, index, false)
|
|
// }
|
|
// })
|
|
},
|
|
changeDialogTab(index) {
|
|
this.tabdialogIndex = index
|
|
},
|
|
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
|
|
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(() => {
|
|
})
|
|
},
|
|
handleHistory(item, index) {
|
|
this.shelfAllGridDataLoading = true
|
|
this.timeIndex = index
|
|
|
|
this.billNoImg = this.checkDateLine[this.timeIndex].stockType === 0 ? this.checkDateLine[1].stockBill : this.checkDateLine[this.timeIndex].stockBill
|
|
if (item.stockType === 0) {
|
|
this.initData()
|
|
setTimeout(() => {
|
|
this.shelfAllGridDataLoading = false
|
|
}, 500)
|
|
} else {
|
|
const params = {
|
|
'gridShelf': '0' + this.layerVal,
|
|
'ShelfId': this.bookShelfDetails.id,
|
|
'toward': this.bookShelfDetails.toward,
|
|
'billId': item.stockBill
|
|
}
|
|
FetchShowByBillIdAndShelfIdAndGridShelf(params).then(res => {
|
|
this.shelfAllGridData.forEach((item) => {
|
|
console.log(item.id)
|
|
const gridId = item.id
|
|
if (res.hasOwnProperty(gridId)) {
|
|
this.$set(item, 'books', res.gridShelfList[gridId])
|
|
}
|
|
})
|
|
|
|
const sortedKeys = Object.keys(res.gridShelfList).sort()
|
|
const sortedShelfDetails = []
|
|
sortedKeys.forEach(key => {
|
|
res.shelfDetails.forEach(shelfDetail => {
|
|
if (shelfDetail.gridId === key) {
|
|
sortedShelfDetails.push(shelfDetail)
|
|
}
|
|
})
|
|
})
|
|
this.baseStockData = sortedShelfDetails
|
|
|
|
setTimeout(() => {
|
|
this.shelfAllGridDataLoading = false
|
|
}, 500)
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.venue-content{
|
|
position: relative;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
.tab-content{
|
|
width: 100%;
|
|
min-height: calc(100vh - 232px) !important;
|
|
.tab-nav{
|
|
position: relative;
|
|
flex: 1;
|
|
.iconfont{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.compare-btn{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
font-size: 12px;
|
|
padding: 3px;
|
|
}
|
|
}
|
|
.gird-data-header{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tag-info{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
p{
|
|
margin-left: 20px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.time-update-cont{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
span.time-left-txt{
|
|
font-size: 14px;
|
|
}
|
|
.el-button{
|
|
width: 134px;
|
|
padding:5px;
|
|
border: none;
|
|
text-align: left;
|
|
}
|
|
.time-update-line{
|
|
display: none;
|
|
position: absolute;
|
|
top: 33px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
width: 250px;
|
|
max-height: 645px;
|
|
padding: 20px 30px;
|
|
background-color: #fff;
|
|
border: 1px solid #e8f2ff;
|
|
border-radius: 10px;
|
|
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.time-update-cont:hover .time-update-line {
|
|
display: block;
|
|
}
|
|
|
|
.gird-data-book{
|
|
position: relative;
|
|
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(298px);
|
|
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% - 240px);
|
|
height: 130px;
|
|
margin-right: 5px;
|
|
padding: 0 16px 0 20px;
|
|
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;
|
|
.book-item{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 42px;
|
|
height: 120px;
|
|
margin-top: 18px;
|
|
background: url('~@/assets/images/shelf03.png') no-repeat left top;
|
|
background-size: 100% 100%;
|
|
margin-left: -15px;
|
|
cursor: pointer;
|
|
span.book-name{
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 16px;
|
|
display: block;
|
|
height: 90px;
|
|
font-size: 12px;
|
|
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: 30px;
|
|
h4{
|
|
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: 14px;
|
|
}
|
|
}
|
|
.layer-handle{
|
|
display: flex;
|
|
flex-direction: column;
|
|
.el-button{
|
|
margin-left: 0 !important;
|
|
margin-bottom: 10px
|
|
}
|
|
}
|
|
|
|
.dialog-grid-detail{
|
|
::v-deep .el-dialog{
|
|
width: 1200px !important;
|
|
.el-dialog__body{
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.tab-nav{
|
|
margin: 14px 0 10px 0 !important;
|
|
}
|
|
}
|
|
.detail-tab{
|
|
position: relative;
|
|
}
|
|
.check-view-img{
|
|
position: absolute;
|
|
right: 0;
|
|
top: -10px;
|
|
}
|
|
}
|
|
|
|
.gird-img-detail{
|
|
::v-deep .el-dialog{
|
|
width: 1200px !important;
|
|
padding: 0 !important;
|
|
background: none;
|
|
box-shadow: none;
|
|
.el-dialog__header{
|
|
display: none;
|
|
}
|
|
.el-dialog__body{
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
::v-deep .el-carousel__container{
|
|
height: 600px !important;
|
|
.el-carousel__item{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.el-carousel__item img{
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.el-carousel__arrow{
|
|
background-color: rgba(3,72,243,1);
|
|
i.el-icon-arrow-left,
|
|
i.el-icon-arrow-right{
|
|
color: #fff;
|
|
}
|
|
.el-icon-arrow-right:before{
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
::v-deep .el-carousel__button{
|
|
height: 6px !important;
|
|
}
|
|
::v-deep .el-carousel__indicators--outside button{
|
|
background-color: rgba(3,72,243,1);
|
|
|
|
}
|
|
.gird-img-button{
|
|
position: fixed;
|
|
right: -200px;
|
|
top: -60px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
z-index: 9999999;
|
|
.el-button{
|
|
background-color: #e8f2ff;
|
|
}
|
|
}
|
|
}
|
|
.venue-content {
|
|
.tab-content .tab-nav {
|
|
li{
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
.popover-external-set{
|
|
ul li p{
|
|
width: 50px;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
ul li span,
|
|
ul li em{
|
|
width: 140px;
|
|
display: block;
|
|
text-align: right;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.layerShelf-swiper{
|
|
margin: 0 20px;
|
|
::v-deep .swiper-wrapper{
|
|
font-size: 14px;
|
|
border-bottom: none !important;
|
|
.swiper-slide-title {
|
|
font-weight: bold;
|
|
height: 300px;
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
color: #0c0e1e;
|
|
writing-mode:vertical-rl;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
.book-name {
|
|
&.red-active{
|
|
color: #ed4a41;
|
|
}
|
|
&.blue-active{
|
|
color: #0348f3;
|
|
}
|
|
span{
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|