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
-
11src/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
-
595src/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
-
18src/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