ZZJ
2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3
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,16 +93,26 @@
    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}`
        // 数据栈自动上传处理
        if (this.snapshot_url.indexOf("/opt/vasystem") == 0) {
          return this.snapshot_url.replace("/opt/vasystem", "");
        }
        if (this.sourceType == 2) {
          return `${this.snapshot_url}`;
        } else {
          return `/httpImage/${this.snapshot_url}`;
        }
      } else {
        return this.blackImg;
      }
@@ -124,7 +134,7 @@
      ctx: null,
      visible: false,
      baseImg: undefined,
      showProportion: 1.666
      //showProportion: 1.666
    };
  },
  watch: {
@@ -193,10 +203,11 @@
      this.$nextTick(() => {
        // this.$refs.bigCanvas.delCursor = {}
      })
    },
    cancelFunc() {
      this.visible = false;
      this.$refs.bigCanvas.cancel()
      this.$refs.bigCanvas.cancel();
      // console.log("关闭了");
    },
    handleOk() {
@@ -220,6 +231,7 @@
      // 顺便甩到更外层去
      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
      // console.log("你好", this.canvasData);
      this.clickSelect(this.canvasData);
      this.visible = false;
    },
@@ -501,8 +513,8 @@
  left: 0;
}
.s-cavas {
  width: 576px;
  height: 324px;
  // width: 576px;
  // height: 324px;
  margin-top: 10px;
  position: relative;
  overflow: auto;