|
|
|
@ -153,14 +153,24 @@ |
|
|
|
<i class="iconfont icon-sulan" /> |
|
|
|
盘点照片 |
|
|
|
</el-button> --> |
|
|
|
<div v-if="detailCurrent && detailCurrent.onShelfNum" style="height: 260px; background-color: #ccc; overflow: hidden; position: relative;" @click="handleViewImg"> |
|
|
|
<img style="display:block; width: 100%;" :src="bigImg" alt=""> |
|
|
|
<span style="position: absolute; top: 0; right: 0; padding: 4px 6px; color: #fff; background-color: rgba(3,72,243,.8); border-radius: 4px;">单击可查看所有图片</span> |
|
|
|
<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" |
|
|
|
@ -187,12 +197,27 @@ |
|
|
|
<span v-if="scope.row.bookStatus === '错序'" class="row-state row-physical state-active">错序</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<!-- <el-table-column prop="updateTime" label="盘点时间"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div>{{ scope.row.updateTime | parseTime }}</div> |
|
|
|
</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> |
|
|
|
@ -234,10 +259,12 @@ 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 }, |
|
|
|
components: { crudOperation, eForm, exportForm, swiper, swiperSlide }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '架位盘点', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: { |
|
|
|
add: false, |
|
|
|
@ -297,7 +324,23 @@ export default { |
|
|
|
bigImg: '', |
|
|
|
timeIndex: 0, |
|
|
|
gridName: '', |
|
|
|
getGridToward: 1 |
|
|
|
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: { |
|
|
|
@ -305,11 +348,8 @@ export default { |
|
|
|
'user', |
|
|
|
'baseApi' |
|
|
|
]), |
|
|
|
swiperContent() { |
|
|
|
return this.$refs.swiperContent.$el.swiper |
|
|
|
}, |
|
|
|
swiperTitle() { |
|
|
|
return this.$refs.swiperTitle.$el.swiper |
|
|
|
swiperList() { |
|
|
|
return this.$refs.swiperList.$el.swiper |
|
|
|
}, |
|
|
|
cellStyle: function() { |
|
|
|
const h = '76px' |
|
|
|
@ -323,7 +363,6 @@ export default { |
|
|
|
position: 'absolute' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
async created() { |
|
|
|
this.initData() |
|
|
|
@ -373,7 +412,7 @@ export default { |
|
|
|
if (localStorage.getItem('dataScreenShelfAllGrid')) { |
|
|
|
this.shelfAllGridData = JSON.parse(localStorage.getItem('dataScreenShelfAllGrid')) |
|
|
|
} |
|
|
|
|
|
|
|
this.updateParts(dataScreenShelf.gridName) |
|
|
|
// 单面/双面 |
|
|
|
this.tabListData = [{ name: dataScreenShelf.regionName + ' - ' + this.removeAreaPrefix(dataScreenShelf.gridName) }] |
|
|
|
|
|
|
|
@ -406,6 +445,13 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
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) { |
|
|
|
@ -482,22 +528,25 @@ export default { |
|
|
|
}, |
|
|
|
toAdd(type, item) { |
|
|
|
if (type === 5) { |
|
|
|
this.$refs.eform.formVisible = true |
|
|
|
// 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 + '架' |
|
|
|
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.stockRegion = item.gridName |
|
|
|
} else { |
|
|
|
this.$message({ message: '当前层位不可盘点', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
// 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) |
|
|
|
this.$refs.eform.setData(type, item) |
|
|
|
}, |
|
|
|
doExport(type) { |
|
|
|
this.$refs.exportform.formExportVisible = true |
|
|
|
@ -534,6 +583,47 @@ export default { |
|
|
|
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 |
|
|
|
@ -542,6 +632,7 @@ export default { |
|
|
|
|
|
|
|
// 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 = { |
|
|
|
@ -553,14 +644,15 @@ export default { |
|
|
|
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`, |
|
|
|
`${baseUrl}result_cut_2_compressed.jpg` |
|
|
|
`${baseUrl}result_cut_1_compressed.jpg` |
|
|
|
] |
|
|
|
this.$refs.carousel.setActiveItem(0) |
|
|
|
if (res) { |
|
|
|
if (res === null) { |
|
|
|
this.bookImgData = commonImgs |
|
|
|
} else { |
|
|
|
this.bookImgData = [...commonImgs, `${baseUrl}result_cut_3_compressed.jpg`] |
|
|
|
} 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 => { |
|
|
|
@ -588,6 +680,10 @@ export default { |
|
|
|
}, |
|
|
|
handleCloseDialog() { |
|
|
|
this.detailVisible = false |
|
|
|
this.isCompare = false |
|
|
|
if (this.shouldShowResetButton) { |
|
|
|
this.resetImage() |
|
|
|
} |
|
|
|
}, |
|
|
|
handleCloseImgDialog() { |
|
|
|
this.detailImgVisible = false |
|
|
|
@ -716,7 +812,18 @@ export default { |
|
|
|
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{ |
|
|
|
@ -996,4 +1103,40 @@ export default { |
|
|
|
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> |
