|
|
|
@ -3,13 +3,11 @@ |
|
|
|
<div class="head-container"> |
|
|
|
<div class="head-search"> |
|
|
|
<!-- 搜索 --> |
|
|
|
<el-select v-model="query.floorId" clearable size="small" placeholder="楼层" class="filter-item" style="width: 100px" @change="changeFloorValue"> |
|
|
|
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
|
|
|
<el-option v-for="item in floorOptions" :key="item.key" :label="item.floorName" :value="item.id" /> |
|
|
|
<el-select v-model="selectFloorVal" clearable size="small" placeholder="楼层" class="filter-item" style="width: 80px" value-key="id" @change="changeBeforeFloor"> |
|
|
|
<el-option v-for="(item,index) in floorOptions" :key="index" :label="item.floorName" :value="item" /> |
|
|
|
</el-select> |
|
|
|
<el-select v-model="query.regionId" clearable size="small" placeholder="区域" class="filter-item" style="width: 180px" @change="crud.toQuery"> |
|
|
|
<i slot="prefix" class="iconfont icon-zhuangtai" /> |
|
|
|
<el-option v-for="item in regionOptions" :key="item.key" :label="item.regionName" :value="item.id" /> |
|
|
|
<el-select v-model="selectRegionVal" clearable size="small" placeholder="区域" class="filter-item" style="width: 120px" value-key="id" @change="changeBeforeRegion"> |
|
|
|
<el-option v-for="(item,index) in regionOptions" :key="index" :label="item.regionName" :value="item" /> |
|
|
|
</el-select> |
|
|
|
<el-input v-model="query.search" clearable size="small" placeholder="输入检索条件检索" prefix-icon="el-icon-search" style="width: 220px;" class="filter-item" @clear="crud.toQuery" @keyup.enter.native="crud.toQuery" /> |
|
|
|
<rrOperation /> |
|
|
|
@ -38,8 +36,8 @@ |
|
|
|
> |
|
|
|
<el-table-column type="selection" align="center" width="55" /> |
|
|
|
<el-table-column prop="regionName" label="层位名称" /> |
|
|
|
<el-table-column prop="regionCode" label="所属楼层" /> |
|
|
|
<el-table-column prop="floorName" label="所属区域" /> |
|
|
|
<el-table-column prop="floorName" label="所属楼层" /> |
|
|
|
<el-table-column prop="regionName" label="所属区域" /> |
|
|
|
<el-table-column prop="booksheflCount" label="盘点开关" align="center"> |
|
|
|
<!-- slot-scope="scope" --> |
|
|
|
<template> |
|
|
|
@ -69,9 +67,8 @@ |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="createTime" label="操作"> |
|
|
|
<!-- slot-scope="scope" --> |
|
|
|
<template> |
|
|
|
<el-button>定位</el-button> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button @click="handlePosition(scope.row)">定位</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -79,25 +76,61 @@ |
|
|
|
<pagination v-if="crud.data.length!==0" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog class="positionDialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="positionVisible" :title="positionTitle+' - 层位定位'"> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<ul class="book-detail"> |
|
|
|
<li><span>所属机构</span>机构A</li> |
|
|
|
<li><span>所属楼层</span>五楼</li> |
|
|
|
<li><span>所属区域</span>区域A</li> |
|
|
|
<li><span>所属书架</span>001排A面</li> |
|
|
|
<li> |
|
|
|
<i class="row-state no-state">未知</i> |
|
|
|
<!-- <i class="row-state end-state">在架</i> |
|
|
|
<i class="row-state cancel-state">错架</i> |
|
|
|
<i class="row-state ing-state">错序</i> --> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<div class="position-content"> |
|
|
|
<div class="position-left"> |
|
|
|
<h5>平面图</h5> |
|
|
|
<div class="venue-preview"> |
|
|
|
<div v-show="currentMarkData && currentMarkData.signPoint "> |
|
|
|
<canvas :id="`canvasPreview${currentMarkData && currentMarkData.id}`" :width="width" :height="height" /> |
|
|
|
</div> |
|
|
|
<img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageUrl" :onerror="defaultImg" alt=""> |
|
|
|
<img v-if="!currentMarkData" :src="imageUrl" :onerror="defaultImg" alt=""> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="position-right"> |
|
|
|
<h5>书架图</h5> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { FetchLibraryFloorListAll } from '@/api/floor/index' |
|
|
|
import { FetchRegionAllByFloor } from '@/api/area/index' |
|
|
|
import crudRegion from '@/api/area/index' |
|
|
|
import { FetchInitLibraryRegionList } from '@/api/area/index' |
|
|
|
import crudShelf from '@/api/shelf/index' |
|
|
|
import CRUD, { presenter, header, crud } from '@crud/crud' |
|
|
|
import crudOperation from '@crud/CRUD.operation' |
|
|
|
import rrOperation from '@crud/RR.operation' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
import defaultImg from '@/assets/images/system/default-img.jpg' |
|
|
|
import { fabric } from 'fabric' |
|
|
|
// import { exportFile } from '@/utils/index' |
|
|
|
// import qs from 'qs' |
|
|
|
export default { |
|
|
|
name: 'BookSearch', |
|
|
|
components: { crudOperation, rrOperation, pagination }, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '架位检索', url: 'api/libraryRegion/initLibraryRegionList', crudMethod: { ...crudRegion }, sort: [], optShow: { |
|
|
|
return CRUD({ title: '架位检索', url: 'api/bookShelf/initBookShelfList', crudMethod: { ...crudShelf }, sort: [], optShow: { |
|
|
|
add: false, |
|
|
|
edit: false, |
|
|
|
del: false, |
|
|
|
@ -115,7 +148,18 @@ export default { |
|
|
|
del: ['admin', 'search:del'] |
|
|
|
}, |
|
|
|
floorOptions: [], |
|
|
|
regionOptions: [] |
|
|
|
regionOptions: [], |
|
|
|
selectFloorVal: null, |
|
|
|
selectRegionVal: null, |
|
|
|
positionVisible: false, |
|
|
|
positionTitle: '001排A面01架1层', |
|
|
|
currentMarkData: null, |
|
|
|
defaultImg: defaultImg, |
|
|
|
imageUrl: defaultImg, |
|
|
|
canvasPreview: {}, |
|
|
|
width: 900, |
|
|
|
height: 600, |
|
|
|
drawWidth: 2 // 笔触宽度 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -143,24 +187,63 @@ export default { |
|
|
|
[CRUD.HOOK.afterValidateCU](crud) { |
|
|
|
return false |
|
|
|
}, |
|
|
|
changeBeforeFloor(val) { |
|
|
|
if (val) { |
|
|
|
this.selectFloorVal = val |
|
|
|
this.crud.query.floorId = val.id |
|
|
|
this.getInitLibraryRegionList(val.id) |
|
|
|
} |
|
|
|
}, |
|
|
|
changeBeforeRegion(val) { |
|
|
|
if (val) { |
|
|
|
this.selectRegionVal = val |
|
|
|
this.crud.query.regionId = val.id |
|
|
|
this.crud.toQuery() |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取楼层数据 |
|
|
|
getLibraryFloorListAll() { |
|
|
|
FetchLibraryFloorListAll().then(res => { |
|
|
|
this.floorOptions = res |
|
|
|
if (this.floorOptions.length > 0) { |
|
|
|
this.selectFloorVal = this.floorOptions[0] |
|
|
|
this.crud.query.floorId = this.selectFloorVal.id |
|
|
|
if (this.crud.query.floorId) { |
|
|
|
this.getInitLibraryRegionList(this.crud.query.floorId) |
|
|
|
} |
|
|
|
} |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|
changeFloorValue(value) { |
|
|
|
console.log(value) |
|
|
|
this.crud.query.regionId = null |
|
|
|
getInitLibraryRegionList(val) { |
|
|
|
const params = { |
|
|
|
'floorId': value |
|
|
|
'floorId': val |
|
|
|
} |
|
|
|
FetchRegionAllByFloor(params).then(res => { |
|
|
|
this.regionOptions = res |
|
|
|
FetchInitLibraryRegionList(params).then(res => { |
|
|
|
this.regionOptions = res.content |
|
|
|
console.log('this.regionOptions', this.regionOptions) |
|
|
|
if (this.regionOptions.length > 0) { |
|
|
|
this.selectRegionVal = this.regionOptions[0] |
|
|
|
this.crud.query.regionId = this.selectRegionVal.id |
|
|
|
} else { |
|
|
|
this.selectRegionVal = null |
|
|
|
this.crud.query.regionId = null |
|
|
|
} |
|
|
|
this.crud.toQuery() |
|
|
|
}).catch(() => { |
|
|
|
}) |
|
|
|
}, |
|
|
|
// changeFloorValue(value) { |
|
|
|
// console.log(value) |
|
|
|
// this.crud.query.regionId = null |
|
|
|
// const params = { |
|
|
|
// 'floorId': value |
|
|
|
// } |
|
|
|
// FetchRegionAllByFloor(params).then(res => { |
|
|
|
// this.regionOptions = res |
|
|
|
// }).catch(() => { |
|
|
|
// }) |
|
|
|
// }, |
|
|
|
clickRowHandler(row) { |
|
|
|
this.$refs.table.clearSelection() |
|
|
|
this.$refs.table.toggleRowSelection(row) |
|
|
|
@ -188,6 +271,10 @@ export default { |
|
|
|
this.crud.downloadLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
handlePosition(row) { |
|
|
|
console.log('position', row) |
|
|
|
this.positionVisible = true |
|
|
|
}, |
|
|
|
handleCloseDialog() { |
|
|
|
this.addBookShelfVisible = false |
|
|
|
this.detailVisible = false |
|
|
|
@ -195,6 +282,92 @@ export default { |
|
|
|
this.crud.cancelCU() |
|
|
|
this.$refs.form.resetFields() |
|
|
|
} |
|
|
|
this.positionVisible = false |
|
|
|
}, |
|
|
|
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, 0.3)', |
|
|
|
opacity: 1, |
|
|
|
selectable: false, |
|
|
|
hasBorders: false, |
|
|
|
hasControls: false, |
|
|
|
originX: 'left', // 设置原点为左上角 |
|
|
|
originY: 'top' // 设置原点为左上角 |
|
|
|
}) |
|
|
|
// polygon.index = index |
|
|
|
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.3, hoverCursor: 'pointer' }) |
|
|
|
self.canvasPreview.renderAll() |
|
|
|
}) |
|
|
|
|
|
|
|
// 监听鼠标移出事件 |
|
|
|
polygon.on('mouseout', function() { |
|
|
|
this.set({ opacity: 1 }) |
|
|
|
self.canvasPreview.renderAll() |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
self.canvasPreview.renderAll() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -206,4 +379,54 @@ export default { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.positionDialog{ |
|
|
|
::v-deep .el-dialog{ |
|
|
|
width: 1200px !important; |
|
|
|
.el-dialog__body{ |
|
|
|
padding: 0 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.book-detail{ |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 10px 30px !important; |
|
|
|
background-color: #F6F8FC; |
|
|
|
li{ |
|
|
|
line-height: 40px; |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
width: 60px; |
|
|
|
text-align: right; |
|
|
|
margin-right: 20px; |
|
|
|
color: #0C0E1E; |
|
|
|
} |
|
|
|
i{ |
|
|
|
font-style: normal; |
|
|
|
padding: 0 8px; |
|
|
|
} |
|
|
|
&:last-child{ |
|
|
|
width: 30%; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.position-content{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 20px 30px !important; |
|
|
|
h5{ |
|
|
|
font-size: 18px; |
|
|
|
color: #0C0E1E; |
|
|
|
} |
|
|
|
.position-left{ |
|
|
|
width: 600px; |
|
|
|
overflow: hidden; |
|
|
|
::v-deep .venue-preview{ |
|
|
|
height: 500px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
