treee, 修复tab切换时树的选中状态.添加区域

zhangzengfei

2021-02-04 0175cda6150656bc74b34c6f6c71edd1e1fc653c

 src/components/canvas/index.vue

@@ -1,13 +1,13 @@
<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(${snapshot_url ? `/httpImage/${snapshot_url}` : blackImg}) 100% 100% / 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">
    <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>
@@ -21,7 +21,7 @@
      <canvas-dialog
        ref="bigCanvas"
        :canvasDataToChild="canvasData"
        :snapshot_url="snapshot_url"
        :snapshot_url="canvasBg"
        @refresh="refresh"
      ></canvas-dialog>
      <span slot="footer" class="dialog-footer">
@@ -47,6 +47,14 @@
    isGB28181: {
      default: false,
      type: Boolean
    },
    isShowRefresh: {
      default: true,
      type: Boolean
    },
    sourceType: {
      default: 1,
      type: Number
    },
    isShowDrawArrow: {
      default: false,
@@ -85,6 +93,23 @@
    canvasHeight: {
      type: Number,
      default: 324
    },
    showProportion: {
      type: Number,
      default: 1.666
    }
  },
  computed: {
    canvasBg() {
      if (this.snapshot_url) {
        if (this.sourceType == 2) {
          return `${this.snapshot_url}`
        } else {
          return `/httpImage/${this.snapshot_url}`
        }
      } else {
        return this.blackImg;
      }
    }
  },
  data() {
@@ -103,7 +128,7 @@
      ctx: null,
      visible: false,
      baseImg: undefined,
      showProportion: 1.71
      //showProportion: 1.666
    };
  },
  watch: {
@@ -144,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",
@@ -171,10 +197,11 @@
      this.$nextTick(() => {
        // this.$refs.bigCanvas.delCursor = {}
      })
      
    },
    cancelFunc() {
      this.visible = false;
      this.$refs.bigCanvas.cancel()
      this.$refs.bigCanvas.cancel();
      // console.log("关闭了");
    },
    handleOk() {
@@ -198,6 +225,7 @@
      // 顺便甩到更外层去
      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
      // console.log("你好", this.canvasData);

      this.clickSelect(this.canvasData);
      this.visible = false;
    },
@@ -473,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;