| | |
| | | }; |
| | | }, |
| | | watch: { |
| | | // "TreeDataPool.selectedNode": async function(node){ |
| | | // if(node){ |
| | | // console.log('TreeDataPool.selectedNode') |
| | | // console.log(node) |
| | | // //this.Camera.cameraId = node.id; |
| | | // const res = await getAllPolygon({cameraId: node.id}); |
| | | |
| | | // this.canvasData.line = res.data.line; |
| | | // this.canvasData.rect = res.data.rect; |
| | | // this.canvasData.arrow = res.data.arrow; |
| | | // this.canvasData.polygon = res.data.polygon; |
| | | // console.log(this.canvasData) |
| | | // this.clickSelect(this.canvasData); |
| | | // } |
| | | // }, |
| | | |
| | | rtspUrl: function (newVal, oldVal) { |
| | | if (newVal !== oldVal) { |
| | | if (this.wfs.config) { |
| | |
| | | if (id !== this.wfsId) { |
| | | return |
| | | } |
| | | |
| | | |
| | | if (this.wfs.websocketLoader && this.wfs.websocketLoader.client) { |
| | | if (this.wfs.websocketLoader.client.disconnected) { |
| | | this.clickStart(); |
| | |
| | | if (cameraId == "") { |
| | | cameraId = this.getUuid(); |
| | | } |
| | | |
| | | if (Wfs.isSupported()) { |
| | | let wsAddr = this.wsAddr; |
| | | let cameraInfo = { |
| | |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion); |
| | | _this.ctx.stroke(); |
| | | // _this.showRemarks( |
| | | // v.location[0].x / _this.showProportion, |
| | | // v.location[0].y / _this.showProportion, |
| | | // v.name |
| | | // ); |
| | | _this.canvas.style.cursor = "default"; |
| | | }); |
| | | _this.canvasData.rect.forEach(function (v, i) { |
| | |
| | | _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.stroke(); |
| | | // _this.showRemarks( |
| | | // v.location[0].x / _this.showProportion, |
| | | // v.location[0].y / _this.showProportion, |
| | | // v.name |
| | | // ); |
| | | _this.canvas.style.cursor = "default"; |
| | | |
| | | }); |
| | |
| | | 30, |
| | | "yellow" |
| | | ); |
| | | // 绘制方法 |
| | | // _this.showRemarks( |
| | | // v.location[0].x / _this.showProportion, |
| | | // v.location[0].y / _this.showProportion, |
| | | // v.name |
| | | // ); |
| | | _this.canvas.style.cursor = "default"; |
| | | |
| | | }); |
| | |
| | | } |
| | | _this.ctx.closePath(); |
| | | _this.ctx.stroke(); |
| | | // _this.showRemarks( |
| | | // v.location[v.location.length - 1].x / _this.showProportion, |
| | | // v.location[v.location.length - 1].y / _this.showProportionY, |
| | | // v.name |
| | | // ); |
| | | _this.canvas.style.cursor = "default"; |
| | | |
| | | }); |
| | |
| | | this.canvasData.arrow = res.data.arrow; |
| | | this.canvasData.polygon = res.data.polygon; |
| | | console.log(this.canvasData) |
| | | // this.canvasData = { |
| | | // line: [], |
| | | // arrow: [], |
| | | // polygon: [{id:'uuid', name: '多边形1', location: [{ x: 735, y: 155 }, { x: 830, y: 156 }, { x: 809, y: 351 }, { x: 809, y: 364 }, { x: 753, y: 396 }, { x: 755, y: 520 },{ x: 706, y: 524 },{ x: 722, y: 392 },{x:758,y:280},{ x: 735, y: 155 }] }], |
| | | // //rect: rsp.data.rect |
| | | // rect: [] |
| | | // }; |
| | | this.clickSelect(this.canvasData); |
| | | } |
| | | }, |
| | | mounted() { |
| | | //获取video宽高并给区域canvas赋值 |
| | | //this.setWidthHeight(); |
| | | this.clickStart(); |
| | | |
| | | window.addEventListener('resize',()=>{ |
| | | //this.setWidthHeight(); |
| | | //this.initArea(); |
| | | }); |
| | | this.$nextTick(()=>{ |
| | | this.canvas = this.$refs.areaCanvas; |
| | | this.ctx = this.canvas.getContext("2d"); |
| | | this.ctx.lineWidth = 1; |
| | | |
| | | this.initArea(); |
| | | |
| | | }) |