hanbaoshan
2020-10-20 98a6297b10a4b97c3022f84d3ba7908c178d9ee0
src/components/canvas/index.vue
@@ -4,10 +4,10 @@
      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>
@@ -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,
@@ -87,6 +95,19 @@
      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/img/baseimg.png"),
@@ -103,7 +124,7 @@
      ctx: null,
      visible: false,
      baseImg: undefined,
      showProportion: 1.71
      showProportion: 1.666
    };
  },
  watch: {
@@ -473,6 +494,11 @@
};
</script>
<style lang="scss" scoped>
canvas{
  position: absolute;
  top: 0;
  left: 0;
}
.s-cavas {
  width: 576px;
  height: 324px;