| | |
| | | ref="myCanvas" |
| | | :width="canvasWidth" |
| | | :height="canvasHeight" |
| | | :style="`background:url(${snapshot_url ? `/httpImage/${snapshot_url}` : blackImg}) 100% 100% / 576px 324px; no-repeat; background-size: contain;`" |
| | | :style="`background:url(${canvasBg}) center / 576px 324px no-repeat; background-size: contain;`" |
| | | ></canvas> |
| | | |
| | | <el-tooltip content="刷新底图" placement="bottom" popper-class="atooltip"> |
| | | <el-tooltip content="刷新底图" placement="bottom" popper-class="atooltip" v-if="isShowRefresh"> |
| | | <span class="iconfont icongengxin" @click="refresh"></span> |
| | | </el-tooltip> |
| | | <p class="tip" :style="disabled ? `display:block;` : `display:none;`">批量配置方式不允许绘制区域,请选择摄像机进行区域绘制</p> |
| | |
| | | <canvas-dialog |
| | | ref="bigCanvas" |
| | | :canvasDataToChild="canvasData" |
| | | :snapshot_url="snapshot_url" |
| | | :snapshot_url="canvasBg" |
| | | @refresh="refresh" |
| | | ></canvas-dialog> |
| | | <span slot="footer" class="dialog-footer"> |
| | |
| | | isGB28181: { |
| | | default: false, |
| | | type: Boolean |
| | | }, |
| | | isShowRefresh: { |
| | | default: true, |
| | | type: Boolean |
| | | }, |
| | | sourceType: { |
| | | default: 1, |
| | | type: Number |
| | | }, |
| | | isShowDrawArrow: { |
| | | default: false, |
| | |
| | | default: 324 |
| | | } |
| | | }, |
| | | computed:{ |
| | | canvasBg(){ |
| | | if(this.snapshot_url){ |
| | | if(this.sourceType == 2){ |
| | | return `/files/${this.snapshot_url}` |
| | | }else{ |
| | | return `/httpImage/${this.snapshot_url}` |
| | | } |
| | | }else{ |
| | | return this.blackImg; |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | blackImg: require("../../assets/baseimg.png"), |
| | | blackImg: require("../../assets/img/baseimg.png"), |
| | | canvasData: { |
| | | line: [], |
| | | rect: [], |
| | |
| | | ctx: null, |
| | | visible: false, |
| | | baseImg: undefined, |
| | | showProportion: 1.71 |
| | | showProportion: 1.666 |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | .then(res => { |
| | | if (res.data.cameraId === this.currentCameraId) { |
| | | this.baseImg = res.data.snapshotUrl; |
| | | this.$emit('refresh',res.data.snapshotUrl) |
| | | this.$emit('refresh', res.data.snapshotUrl) |
| | | this.$forceUpdate() |
| | | this.$notify({ |
| | | type: "success", |
| | |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | canvas{ |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | .s-cavas { |
| | | width: 576px; |
| | | height: 324px; |