From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期四, 04 二月 2021 18:22:54 +0800 Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域 --- src/components/canvas/index.vue | 39 +++++++++++++++++++++++---------------- 1 files changed, 23 insertions(+), 16 deletions(-) diff --git a/src/components/canvas/index.vue b/src/components/canvas/index.vue index cd8f3b5..a7dae5a 100644 --- a/src/components/canvas/index.vue +++ b/src/components/canvas/index.vue @@ -1,10 +1,10 @@ <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"> @@ -93,17 +93,21 @@ 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; } } @@ -124,7 +128,7 @@ ctx: null, visible: false, baseImg: undefined, - showProportion: 1.666 + //showProportion: 1.666 }; }, watch: { @@ -165,11 +169,12 @@ // 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", @@ -192,10 +197,11 @@ this.$nextTick(() => { // this.$refs.bigCanvas.delCursor = {} }) + }, cancelFunc() { this.visible = false; - this.$refs.bigCanvas.cancel() + this.$refs.bigCanvas.cancel(); // console.log("鍏抽棴浜�"); }, handleOk() { @@ -219,6 +225,7 @@ // 椤轰究鐢╁埌鏇村灞傚幓 this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData); // console.log("浣犲ソ", this.canvasData); + this.clickSelect(this.canvasData); this.visible = false; }, @@ -494,14 +501,14 @@ }; </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; -- Gitblit v1.8.0