| | |
| | | <template> |
| | | <div class="s-cavas"> |
| | | <div class="s-cavas" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"> |
| | | <canvas |
| | | ref="myCanvas" |
| | | :width="canvasWidth" |
| | | :height="canvasHeight" |
| | | :style="`background:url(${canvasBg}) center / 576px 324px no-repeat; background-size: contain;`" |
| | | :style="`background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`" |
| | | ></canvas> |
| | | |
| | | <el-tooltip content="刷新底图" placement="bottom" popper-class="atooltip" v-if="isShowRefresh"> |
| | |
| | | canvasHeight: { |
| | | type: Number, |
| | | default: 324 |
| | | }, |
| | | showProportion: { |
| | | type: Number, |
| | | default: 1.666 |
| | | } |
| | | }, |
| | | computed:{ |
| | | canvasBg(){ |
| | | if(this.snapshot_url){ |
| | | if(this.sourceType == 2){ |
| | | return `/files/${this.snapshot_url}` |
| | | }else{ |
| | | computed: { |
| | | canvasBg() { |
| | | if (this.snapshot_url) { |
| | | if (this.sourceType == 2) { |
| | | return `${this.snapshot_url}` |
| | | } else { |
| | | return `/httpImage/${this.snapshot_url}` |
| | | } |
| | | }else{ |
| | | } else { |
| | | return this.blackImg; |
| | | } |
| | | } |
| | |
| | | ctx: null, |
| | | visible: false, |
| | | baseImg: undefined, |
| | | showProportion: 1.666 |
| | | //showProportion: 1.666 |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | // this.$emit('changeBaseImg',this.currentCameraId) |
| | | this.$emit('changeLoading', true) |
| | | if (this.currentCameraId) { |
| | | let _this = this; |
| | | await updateSnapshot(this.currentCameraId) |
| | | .then(res => { |
| | | if (res.data.cameraId === this.currentCameraId) { |
| | | if (res.data.cameraId === _this.currentCameraId) { |
| | | this.baseImg = res.data.snapshotUrl; |
| | | this.$emit('refresh', res.data.snapshotUrl) |
| | | this.$emit('refresh', res.data.snapshotUrl, _this.currentCameraId) |
| | | this.$forceUpdate() |
| | | this.$notify({ |
| | | type: "success", |
| | |
| | | this.$nextTick(() => { |
| | | // this.$refs.bigCanvas.delCursor = {} |
| | | }) |
| | | |
| | | }, |
| | | cancelFunc() { |
| | | this.visible = false; |
| | | this.$refs.bigCanvas.cancel() |
| | | this.$refs.bigCanvas.cancel(); |
| | | // console.log("关闭了"); |
| | | }, |
| | | handleOk() { |
| | |
| | | // 顺便甩到更外层去 |
| | | this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData); |
| | | // console.log("你好", this.canvasData); |
| | | |
| | | this.clickSelect(this.canvasData); |
| | | this.visible = false; |
| | | }, |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | canvas{ |
| | | canvas { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | .s-cavas { |
| | | width: 576px; |
| | | height: 324px; |
| | | // width: 576px; |
| | | // height: 324px; |
| | | margin-top: 10px; |
| | | position: relative; |
| | | overflow: auto; |