22 changed files with 1071 additions and 792 deletions
-
19src/api/book/index.js
-
12src/api/shelf/index.js
-
27src/api/stockTask/index.js
-
132src/assets/styles/manage.scss
-
7src/components/Crud/crud.js
-
2src/views/components/bookSwiper.vue
-
14src/views/components/canvasPreview.vue
-
16src/views/components/mark.vue
-
8src/views/dashboard/PanelGroup.vue
-
215src/views/home.vue
-
236src/views/visualCheck/checkManage/bookSearch/index.vue
-
591src/views/visualCheck/checkManage/bookshelfSearch/index.vue
-
2src/views/visualCheck/checkManage/dataScreening/girdList.vue
-
33src/views/visualCheck/checkManage/dataScreening/index.vue
-
2src/views/visualCheck/checkManage/dataScreening/regionsList.vue
-
10src/views/visualCheck/checkManage/dataScreening/shelfList.vue
-
44src/views/visualCheck/checkManage/paramSetting/index.vue
-
334src/views/visualCheck/checkManage/positionMixins/index.js
-
42src/views/visualCheck/checkManage/statistic/seqShelf/index.vue
-
80src/views/visualCheck/checkManage/upDownLog/index.vue
-
8src/views/visualCheck/venueDevice/area/index.vue
-
13src/views/visualCheck/venueDevice/bookshelf/index.vue
@ -0,0 +1,334 @@ |
|||||
|
import { FetchInitShelfGridByShelfId, FetchBookShelfDetails } from '@/api/shelf/index' |
||||
|
import defaultImg from '@/assets/images/system/default-img.jpg' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { fabric } from 'fabric' |
||||
|
export const positionCrud = { |
||||
|
mixins: [], |
||||
|
// 组件共用属性
|
||||
|
data() { |
||||
|
return { |
||||
|
positionVisible: false, |
||||
|
positionTitle: '', |
||||
|
positionContent: {}, |
||||
|
currentMarkData: null, |
||||
|
defaultImg: defaultImg, |
||||
|
imageUrl: defaultImg, |
||||
|
canvasPreview: {}, |
||||
|
width: 900, |
||||
|
height: 600, |
||||
|
drawWidth: 2, // 笔触宽度
|
||||
|
booShelfGrid: [], |
||||
|
layerNum: 0, |
||||
|
rackNum: 0, |
||||
|
cellIndex: 0, |
||||
|
bookShelfDetails: {}, |
||||
|
getGridShelf: '', |
||||
|
getGridFloor: '', |
||||
|
getGridToward: 1 |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'user', |
||||
|
'baseApi' |
||||
|
]), |
||||
|
cellStyle: function() { |
||||
|
const h = '38px' |
||||
|
let w |
||||
|
if (this.rackNum === 1) { |
||||
|
w = '146px' |
||||
|
} else { |
||||
|
w = '100%/' + this.rackNum |
||||
|
} |
||||
|
return { width: `calc(${w})`, height: `calc(${h})` } |
||||
|
}, |
||||
|
rowStyle: function() { |
||||
|
let w |
||||
|
if (this.rackNum === 1) { |
||||
|
w = 146 * this.rackNum + 'px' |
||||
|
} else { |
||||
|
w = '100%' |
||||
|
} |
||||
|
return { width: `calc(${w})` } |
||||
|
}, |
||||
|
reversedRackNum() { |
||||
|
if (this.booShelfGrid && this.booShelfGrid.length > 0) { |
||||
|
if (parseInt(this.booShelfGrid[0].gridShelf) === this.rackNum) { |
||||
|
return Array.from({ length: this.rackNum }, (_, i) => this.rackNum - i).map(x => x.toString()) |
||||
|
} else { |
||||
|
return Array.from({ length: this.rackNum }, (_, i) => i + 1).map(x => x.toString()) |
||||
|
} |
||||
|
} else { |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// 组件挂载时的共用方法
|
||||
|
mounted() { |
||||
|
}, |
||||
|
// 组件共用方法
|
||||
|
methods: { |
||||
|
removeAreaPrefix(gridNames) { |
||||
|
const index = gridNames.indexOf('面') |
||||
|
if (index !== -1) { |
||||
|
return gridNames.substring(index + 1) |
||||
|
} |
||||
|
return gridNames |
||||
|
}, |
||||
|
handlePosition(row) { |
||||
|
if (this.canvasPreview.lowerCanvasEl) { |
||||
|
this.canvasPreview.clear() |
||||
|
this.canvasPreview.dispose() |
||||
|
} |
||||
|
this.booShelfGrid = [] |
||||
|
this.currentMarkData = {} |
||||
|
|
||||
|
this.positionVisible = true |
||||
|
this.positionTitle = row.gridName |
||||
|
this.positionContent = row |
||||
|
this.updateParts(row.gridName) |
||||
|
|
||||
|
FetchBookShelfDetails({ 'shelfId': row.shelfId }).then(res => { |
||||
|
this.layerNum = res.shelfFloor |
||||
|
this.rackNum = res.shelfShelf |
||||
|
this.bookShelfDetails = res |
||||
|
this.currentMarkData = res |
||||
|
|
||||
|
if (row.regionMap) { |
||||
|
this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + row.regionMap |
||||
|
this.$nextTick(() => { |
||||
|
const drawinfo = JSON.parse(res.signPoint) |
||||
|
this.initCanvasPreview(drawinfo) |
||||
|
}) |
||||
|
} else { |
||||
|
this.imageUrl = this.defaultImg |
||||
|
} |
||||
|
this.getInitShelfGridByShelfId(this.getGridToward) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
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 |
||||
|
} |
||||
|
console.log(' this.getGridShelf', this.getGridShelf) |
||||
|
console.log(' this.getGridFloor', this.getGridFloor) |
||||
|
console.log(' this.getGridToward', this.getGridToward) |
||||
|
} |
||||
|
}, |
||||
|
getInitShelfGridByShelfId(toward) { |
||||
|
this.listLoading = true |
||||
|
// rowType 1 单 2 双
|
||||
|
// toward 1 A面 2 B面
|
||||
|
// shelfType 1 '始终最左边为第1架（S型排架）'
|
||||
|
// shelfType 2 'A面最左为第1架（B面最左为最后1架）'
|
||||
|
// shelfType 3 'B面最左为第1架（A面最左为最后1架）'
|
||||
|
// floorType 1 '最顶层为第一层（从上至下）'
|
||||
|
// floorType 2 '最底层为第一层（从下至上）'
|
||||
|
FetchInitShelfGridByShelfId({ 'shelfId': this.bookShelfDetails.id, 'toward': toward }).then(res => { |
||||
|
const sortFunction = toward === 1 ? { |
||||
|
1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
||||
|
2: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
||||
|
3: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' } |
||||
|
} : { |
||||
|
1: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' }, |
||||
|
2: { 1: 'sortBookshelvesRightTop', 2: 'sortBookshelvesRightBottom' }, |
||||
|
3: { 1: 'sortBookshelvesLeftTop', 2: 'sortBookshelvesLeftBottom' } |
||||
|
} |
||||
|
const shelfType = this.bookShelfDetails.shelfType |
||||
|
const floorType = this.bookShelfDetails.floorType |
||||
|
const sortMethod = sortFunction[shelfType][floorType] |
||||
|
this.booShelfGrid = this[sortMethod](res) |
||||
|
|
||||
|
const index = this.booShelfGrid.findIndex((obj) => { |
||||
|
return obj.gridShelf === this.getGridShelf && obj.gridFloor === this.getGridFloor |
||||
|
}) |
||||
|
|
||||
|
this.cellIndex = index |
||||
|
setTimeout(() => { |
||||
|
this.listLoading = false |
||||
|
}, 1000) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 最左为第一架, 最顶层为第一层 从上往下
|
||||
|
sortBookshelvesLeftTop(data) { |
||||
|
const sortedData = [] |
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1)))) |
||||
|
|
||||
|
for (let i = 1; i <= maxFloor; i++) { |
||||
|
for (let j = 1; j <= maxShelf; j++) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
// 最右为第一架,最左为最后一架, 最顶层为第一层 从上往下
|
||||
|
sortBookshelvesRightTop(data) { |
||||
|
const sortedData = [] |
||||
|
// 获取最大的楼层数
|
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0]))) |
||||
|
for (let i = 1; i <= maxFloor; i++) { |
||||
|
// 从最大的书架层数开始，向下排序
|
||||
|
for (let j = maxShelf; j >= 1; j--) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
// 最左为第一架, 最底层为第一层 从下往上
|
||||
|
sortBookshelvesLeftBottom(data) { |
||||
|
const sortedData = [] |
||||
|
// 获取最大的楼层数
|
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
// 获取最大的书架层数
|
||||
|
const maxShelf = Math.max(...data.map(item => parseInt(item.gridShelf.slice(-1)))) |
||||
|
for (let i = maxFloor; i >= 1; i--) { |
||||
|
for (let j = 1; j <= maxShelf; j++) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.slice(-1)) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
// 最左为最后一架, 最底层为第一层 从下往上
|
||||
|
sortBookshelvesRightBottom(data) { |
||||
|
const sortedData = [] |
||||
|
// 获取最大的楼层数
|
||||
|
const maxFloor = Math.max(...data.map(item => parseInt(item.gridFloor))) |
||||
|
const maxShelfPerFloor = data.map(item => parseInt(item.gridShelf.match(/\d+$/)[0])) |
||||
|
.reduce((acc, curr, index, arr) => { |
||||
|
const floor = parseInt(data[index].gridFloor) |
||||
|
if (!acc[floor]) acc[floor] = 1 |
||||
|
if (acc[floor] < curr) acc[floor] = curr |
||||
|
return acc |
||||
|
}, {}) |
||||
|
// 从最大的楼层开始向下遍历
|
||||
|
for (let i = maxFloor; i >= 1; i--) { |
||||
|
// 从最大的书架编号开始向左遍历
|
||||
|
for (let j = maxShelfPerFloor[i] || 1; j >= 1; j--) { |
||||
|
const currentShelf = data.find(item => parseInt(item.gridFloor) === i && parseInt(item.gridShelf.match(/\d+$/)[0]) === j) |
||||
|
if (currentShelf) { |
||||
|
sortedData.push(currentShelf) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return sortedData |
||||
|
}, |
||||
|
initCanvasPreview(drawinfo) { |
||||
|
if (!this.currentMarkData) { |
||||
|
console.error('currentMarkData is null or undefined') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
const canvasId = `canvasPreview${this.currentMarkData.id}` |
||||
|
this.canvasPreview = new fabric.Canvas(canvasId, { |
||||
|
skipTargetFind: false, |
||||
|
selectable: false, |
||||
|
selection: false |
||||
|
}) |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
this.canvasPreview.selectionColor = 'rgba(0,0,0,0.05)' |
||||
|
this.loadDrawPreview(drawinfo) |
||||
|
this.canvasPreview.on('mouse:wheel', this.mouse) |
||||
|
}) |
||||
|
}, |
||||
|
// 鼠标滚轮放大缩小
|
||||
|
mouse(e) { |
||||
|
if (undefined === e) return |
||||
|
let zoom = (e.e.deltaY > 0 ? -0.1 : 0.1) + this.canvasPreview.getZoom() |
||||
|
zoom = Math.max(0.8, zoom) |
||||
|
// 最小为原来的1/10
|
||||
|
zoom = Math.min(3, zoom) |
||||
|
// 最大是原来的3倍
|
||||
|
const zoomPoint = new fabric.Point(e.e.pageX, e.e.pageY) |
||||
|
this.canvasPreview.zoomToPoint(zoomPoint, zoom) |
||||
|
}, |
||||
|
// 回显详情信息
|
||||
|
loadDrawPreview(drawinfo) { |
||||
|
const self = this |
||||
|
const pointGroup = drawinfo.pointInfo |
||||
|
const imgInfo = drawinfo.imgInfo |
||||
|
imgInfo.src = self.imageUrl |
||||
|
// 加载底图
|
||||
|
fabric.util.enlivenObjects([imgInfo], objects => { |
||||
|
objects.forEach(o => { |
||||
|
o.selectable = false |
||||
|
o.hasControls = false |
||||
|
o.centeredScaling = false |
||||
|
self.canvasPreview.add(o) |
||||
|
}) |
||||
|
|
||||
|
// 处理多边形绘制回显操作
|
||||
|
pointGroup.forEach(async(item, index) => { |
||||
|
if (item.pointInfo !== '') { |
||||
|
const polygon = new fabric.Polygon(item.pointInfo, { |
||||
|
name: item.name, |
||||
|
stroke: 'rgba(196, 43, 1, 1)', |
||||
|
strokeWidth: self.drawWidth, |
||||
|
fill: 'rgba(196, 43, 1, 1)', |
||||
|
opacity: 0.5, |
||||
|
selectable: false, |
||||
|
hasBorders: false, |
||||
|
hasControls: false, |
||||
|
originX: 'left', |
||||
|
originY: 'top' |
||||
|
}) |
||||
|
self.canvasPreview.add(polygon) |
||||
|
|
||||
|
polygon.on('mousedown', function(e) { |
||||
|
console.log('Rect' + (index + 1) + 'clicked', e) |
||||
|
console.log('e.target.name', e.target.name) |
||||
|
}) |
||||
|
|
||||
|
polygon.on('mouseover', function(e) { |
||||
|
console.log('e', e) |
||||
|
console.log('e.target', e.target) |
||||
|
console.log('e.target.name', e.target.name) |
||||
|
this.set({ opacity: 0.8, hoverCursor: 'pointer' }) |
||||
|
self.canvasPreview.renderAll() |
||||
|
}) |
||||
|
|
||||
|
polygon.on('mouseout', function() { |
||||
|
this.set({ opacity: 0.5 }) |
||||
|
self.canvasPreview.renderAll() |
||||
|
}) |
||||
|
|
||||
|
// 加载完成后直接对多边形执行zoomToPoint操作
|
||||
|
const center = polygon.getCenterPoint() |
||||
|
self.canvasPreview.zoomToPoint({ x: center.x, y: center.y }, 1.4) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
self.canvasPreview.renderAll() |
||||
|
}, |
||||
|
handleCloseDialog() { |
||||
|
this.positionVisible = false |
||||
|
this.detailVisible = false |
||||
|
// 功能隐藏待定
|
||||
|
// this.addBookShelfVisible = false
|
||||
|
// if (this.$refs.form) {
|
||||
|
// this.crud.cancelCU()
|
||||
|
// this.$refs.form.resetFields()
|
||||
|
// }
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue