diff --git a/src/assets/styles/manage.scss b/src/assets/styles/manage.scss index 30b4ac3..461b678 100644 --- a/src/assets/styles/manage.scss +++ b/src/assets/styles/manage.scss @@ -31,7 +31,7 @@ } .venue-left{ - width: calc(100% / 2); + width: calc(100% / 2 - 20px); margin-right: 20px; @include bg_color; @include box_padding; @@ -46,7 +46,7 @@ } } .venue-right{ - flex: 1; + width: calc(100% / 2); @include bg_color; @include box_padding; .head-container{ diff --git a/src/views/components/mark.vue b/src/views/components/mark.vue index 8879b6e..2f2d2ea 100644 --- a/src/views/components/mark.vue +++ b/src/views/components/mark.vue @@ -88,64 +88,78 @@ export default { height() { this.canvas.setHeight(this.height) }, - currentMarkData(newVal) { - if (newVal) { - // console.log(newVal.signPoint) - // if (newVal.signPoint !== null) { - // this.drawinfo = JSON.parse(newVal.signPoint) - // } else { - // this.drawinfo = null - // } - this.initCanvas() - } + currentMarkData: { + handler(newVal, oldVal) { + if (newVal.id !== oldVal.id) { + console.log('id has changed') + console.log('handler') + this.canvas.clear() + this.canvas.dispose() + if (newVal.signPoint !== '' || newVal.signPoint !== null) { + this.drawinfo = JSON.parse(newVal.signPoint) + } else { + this.drawinfo = null + } + this.initCanvas() + } + }, + deep: true }, - imageFloorUrl(newVal) { - if (newVal) { - console.log('newVal', newVal) - this.isDrawing = false - this.bgImgFlag = true - const imgElement = document.getElementById('expImg') - imgElement.src = this.imageFloorUrl + imageFloorUrl(newVal, oldVal) { + if (newVal !== oldVal) { + console.log('imageFloorUrl') } } }, created() { + }, mounted() { - this.initCanvas() + this.$nextTick(() => { + console.log('mounted') + this.drawinfo = this.currentMarkData && this.currentMarkData.signPoint ? JSON.parse(this.currentMarkData.signPoint) : null + this.initCanvas() + }) + }, + beforeDestroy() { + if (this.canvas) { + this.canvas.clear() + this.canvas.dispose() + } }, methods: { initCanvas() { - if (this.currentMarkData && (this.currentMarkData.signPoint !== '' || this.currentMarkData.signPoint !== null)) { - this.drawinfo = JSON.parse(this.currentMarkData.signPoint) - } else { - this.drawinfo = null - } this.canvas = new fabric.Canvas('canvas', { skipTargetFind: false, // 当为真时，跳过目标检测。目标检测将返回始终未定义。点击选择将无效 selectable: false, // 为false时，不能选择对象进行修改 selection: false // 是否可以多个对象为一组 }) this.canvas.selectionColor = 'rgba(0,0,0,0.05)' - this.canvas.on('mouse:down', this.mousedown) - this.canvas.on('mouse:move', this.mousemove) - this.canvas.on('object:moving', this.objectMoving) - // this.canvas.on('mouse:wheel', this.mouse) - // this.$nextTick(() => { - // console.log(this.drawinfo) + // this.canvas.on('mouse:down', this.mousedown) + // this.canvas.on('mouse:move', this.mousemove) + // this.canvas.on('object:moving', this.objectMoving) + console.log('this.drawinfo', this.drawinfo) + console.log('this.canvas', this.canvas) if (this.drawinfo) { + console.log('444') this.loadDraw() - this.canvas.on('mouse:wheel', this.mouse) } else { + console.log('555') + this.isDrawing = false + this.bgImgFlag = true + const imgElement = document.getElementById('expImg') + imgElement.src = this.imageFloorUrl this.loadExpImg() } - // }) }, // 从已渲染的DOM元素加载图片至canvas loadExpImg() { + console.log('loadExpImg') const imgElement = document.getElementById('expImg') const newWidth = this.canvas.width + console.log('newWidth', newWidth) imgElement.onload = () => { + // console.log('imgElement.src', imgElement.src) const newHeight = newWidth / (imgElement.width / imgElement.height) new fabric.Image.fromURL( imgElement.src, @@ -255,13 +269,13 @@ export default { this.canvas.skipTargetFind = false try { + console.log('this.pointArray', this.pointArray) // 判断是否闭合多边形，点击红点时闭合多边形 if (this.pointArray.length > 1) { // e.target.id == this.pointArray[0].id 表示点击了初始红点 if (e.target && e.target.id === this.pointArray[0].id) { this.generatePolygon() console.log('画完') - console.log('this.pointArray', this.pointArray) this.isDrawing = true return } else { @@ -547,14 +561,16 @@ export default { }, // 回显详情信息 loadDraw() { + this.canvas.clear() const self = this - if (this.drawinfo.id === '') return + // if (this.drawinfo.id === '') return // const pointGroup = JSON.parse(self.drawinfo.pointInfo); // const imgInfo = JSON.parse(self.drawinfo.imgInfo); const pointGroup = self.drawinfo.pointInfo const imgInfo = self.drawinfo.imgInfo // self.imageFloorUrl = self.drawinfo.img imgInfo.src = self.imageFloorUrl + this.isDrawing = true // 加载底图 fabric.util.enlivenObjects([imgInfo], objects => { @@ -610,24 +626,22 @@ export default { this.canvas.renderAll() }) - // if (!self.readstate) { - // fabric.Image.fromURL(self.deleteIconURL, async img => { - // const _self = this; - // img.index = index; - // const oImg = await img.set({ - // name: 'delete-btn', - // left: item.pointInfo[0].x - 20, - // top: item.pointInfo[0].y - 20, - // width: 40, - // height: 40, - // angle: 0 - // }).scale(0.8); - // this.canvas.add(oImg); - // oImg.on('mousedown', function() { - // _self.deleteObject(); - // }); - // }); - // } + fabric.Image.fromURL(self.deleteIconURL, async img => { + const _self = this + img.index = index + const oImg = await img.set({ + name: 'delete-btn', + left: item.pointInfo[0].x - 20, + top: item.pointInfo[0].y - 20, + width: 40, + height: 40, + angle: 0 + }).scale(0.8) + this.canvas.add(oImg) + oImg.on('mousedown', function() { + _self.deleteObject() + }) + }) } }) }) @@ -641,12 +655,6 @@ export default { type: 'warning' }).then(() => { this.canvas.clear() - // 移除所有非背景图对象和删除按钮 - // this.canvas._objects = this.canvas._objects.filter((item) => { - // return item.isBgImg; - // }); - // 重新渲染画布 - // this.canvas.renderAll(); this.isDrawing = false this.bgImgFlag = true const imgElement = document.getElementById('expImg') diff --git a/src/views/visualCheck/venueDevice/area/index.vue b/src/views/visualCheck/venueDevice/area/index.vue index 83fdf54..fc00225 100644 --- a/src/views/visualCheck/venueDevice/area/index.vue +++ b/src/views/visualCheck/venueDevice/area/index.vue @@ -70,8 +70,12 @@ 区域标注 -
- +
+ +
+ +
+
@@ -135,11 +139,11 @@ - +
- +
@@ -157,6 +161,7 @@ import MarkCover from '@/views/components/mark.vue' import Sortable from 'sortablejs' import { mapGetters } from 'vuex' import defaultImg from '@/assets/images/system/default-img.jpg' +import { fabric } from 'fabric' const defaultForm = { id: null, floorId: null, regionName: null, regionCode: null, regionDescription: null, regionMap: null, signPoint: null } export default { @@ -175,6 +180,7 @@ export default { mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { + canvasPreview: {}, floorOptions: [], labelName: '区域地图', permission: { @@ -201,7 +207,11 @@ export default { sortVisible: false, // 排序dialog markVisible: false, // 区域标注 titleMark: '区域标注', - currentMarkData: null + currentMarkData: null, + + width: 900, + height: 600, + drawWidth: 2 // 笔触宽度 } }, computed: { @@ -210,6 +220,14 @@ export default { 'baseApi' ]) }, + watch: { + width() { + this.canvasPreview.setWidth(this.width) + }, + height() { + this.canvasPreview.setHeight(this.height) + } + }, methods: { [CRUD.HOOK.beforeRefresh]() { this.getLibraryFloorListAll() @@ -237,12 +255,15 @@ export default { clickRowHandler(row) { this.$refs.table.clearSelection() this.$refs.table.toggleRowSelection(row) - // http://192.168.99.67:12010/api/fileRelevant/getImg?imgId=f6d3ecea-0456-4429-ba77-1a4921d5c806 - + this.currentMarkData = row if (this.activeIndex === 0) { if (row.floorMap) { this.imageFloorUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + row.floorMap + if (row.signPoint) { + const drawinfo = JSON.parse(row.signPoint) + this.initCanvasPreview(drawinfo) + } } else { this.imageFloorUrl = this.defaultImg } @@ -256,9 +277,13 @@ export default { }, changeActiveTab(data) { this.activeIndex = data - console.log(this.crud.selections) if (this.crud.selections.length === 1) { + // if (this.canvasPreview) { + // this.canvasPreview.clear() + // this.canvasPreview.dispose() + // } if (this.crud.selections[0].floorMap) { + this.currentMarkData = this.crud.selections[0] this.imageFloorUrl = this.baseApi + '/api/fileRelevant/getImg?imgId=' + this.crud.selections[0].floorMap } else { this.imageFloorUrl = this.defaultImg @@ -268,6 +293,14 @@ export default { } else { this.imageRegionUrl = this.defaultImg } + + if (this.activeIndex === 0) { + if (this.crud.selections[0].signPoint) { + console.log('1111') + const drawinfo = JSON.parse(this.crud.selections[0].signPoint) + this.initCanvasPreview(drawinfo) + } + } } }, async handleMark() { @@ -339,6 +372,88 @@ export default { this.$message({ message: '保存成功', type: 'success', offset: 8 }) this.crud.refresh() }) + }, + handleCloseDialog() { + // this.$refs.markRefs.canvas.clear() + // this.$refs.markRefs.canvas.dispose() + this.markVisible = false + }, + initCanvasPreview(drawinfo) { + this.canvasPreview = new fabric.Canvas('canvasPreview', { + skipTargetFind: false, + selectable: false, + selection: false + }) + + 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.imageFloorUrl + // 加载底图 + 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() } } }