| | |
| | | ctx: null, |
| | | visible: false, |
| | | baseImg: undefined, |
| | | showProportion: 1.71 |
| | | showProportion: 1.666 |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | arrow: [], |
| | | polygon: [] |
| | | }, |
| | | showProportion: 3.65, |
| | | showProportion: 3.2, |
| | | showProportionY: 3.58, |
| | | canvas: null, |
| | | ctx: null |
| | | }; |
| | |
| | | } |
| | | _this.ctx.strokeStyle = "yellow"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY); |
| | | for (let i = 1; i < v.location.length; i++) { |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY); |
| | | } |
| | | _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.showProportion, |
| | | v.location[v.location.length - 1].y / _this.showProportionY, |
| | | v.name |
| | | ); |
| | | _this.canvas.style.cursor = "default"; |
| | |
| | | // 将当前元素标红 |
| | | _this.ctx.strokeStyle = "red"; |
| | | _this.ctx.beginPath(); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion); |
| | | _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportionY); |
| | | for (let i = 1; i < v.location.length; i++) { |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion); |
| | | _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportionY); |
| | | } |
| | | _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.showProportion, |
| | | v.location[v.location.length - 1].y / _this.showProportionY, |
| | | v.name |
| | | ); |
| | | _this.canvas.style.cursor = "pointer"; |
| | |
| | | this.$nextTick(()=>{ |
| | | this.canvas = this.$refs.areaCanvas; |
| | | this.ctx = this.canvas.getContext("2d"); |
| | | this.ctx.lineWidth = '1' |
| | | this.ctx.lineWidth = 1; |
| | | |
| | | this.initArea() |
| | | |
| | | }) |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | timeRange: [new Date(2020, 7, 25, 8), new Date()], |
| | | timeRange: [new Date(2020, 7, 25, 8), new Date(new Date().setHours(23,59,59))], |
| | | memberInfo: { |
| | | personName: '', |
| | | sex: '', |