控制轮询

ZZJ

2022-07-15 a3f357e8a60443b74b64c7479113c68eb35ce1f5

 src/components/canvas/index.vue

@@ -1,16 +1,26 @@
<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">
    <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>
    <p class="tip" :style="disabled ? `display:block;` : `display:none;`">
      批量配置方式不允许绘制区域，请选择摄像机进行区域绘制
    </p>
    <el-dialog
      title
      :visible.sync="visible"
@@ -26,7 +36,9 @@
      ></canvas-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFunc" size="small">取 消</el-button>
        <el-button type="primary" @click="handleOk" size="small">确 定</el-button>
        <el-button type="primary" @click="handleOk" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
@@ -37,76 +49,85 @@
export default {
  name: "myCanvas",
  components: {
    canvasDialog
    canvasDialog,
  },
  props: {
    divId: {
      default: "my-canvas",
      type: String
      type: String,
    },
    isGB28181: {
      default: false,
      type: Boolean
      type: Boolean,
    },
    isShowRefresh: {
      default: true,
      type: Boolean
      type: Boolean,
    },
    sourceType: {
      default: 1,
      type: Number
      type: Number,
    },
    isShowDrawArrow: {
      default: false,
      type: Boolean
      type: Boolean,
    },
    disabled: {
      default: false,
      type: Boolean
      type: Boolean,
    },
    canvasDataShow: {
      default: () => {
        return { line: [], rect: [], arrow: [], polygon: [] };
      },
      type: Object
      type: Object,
    },
    currentCameraId: {
      type: String,
      default: ""
      default: "",
    },
    snapshot_url: {
      type: String,
      default: ""
      default: "",
    },
    isLink: {
      type: Boolean,
      default: false
      default: false,
    },
    loading: {
      type: Boolean,
      default: false
      default: false,
    },
    canvasWidth: {
      type: Number,
      default: 576
      default: 576,
    },
    canvasHeight: {
      type: Number,
      default: 324
    }
      default: 324,
    },
    showProportion: {
      type: Number,
      default: 1.666,
    },
  },
  computed:{
    canvasBg(){
      if(this.snapshot_url){
        if(this.sourceType == 2){
          return `/files/${this.snapshot_url}`
        }else{
          return `/httpImage/${this.snapshot_url}`
  computed: {
    canvasBg() {
      if (this.snapshot_url) {
        // 数据栈自动上传处理
        if (this.snapshot_url.indexOf("/opt/vasystem") == 0) {
          return this.snapshot_url.replace("/opt/vasystem", "");
        }
      }else{

        if (this.sourceType == 2) {
          return `${this.snapshot_url}`;
        } else {
          return `/httpImage/${this.snapshot_url}`;
        }
      } else {
        return this.blackImg;
      }
    }
    },
  },
  data() {
    return {
@@ -115,7 +136,7 @@
        line: [],
        rect: [],
        arrow: [],
        polygon: []
        polygon: [],
      }, // 最终输出的画布坐标数据
      canvasPic: new Image(), // 撤销用的图片
      canvasHistory: [], // 历史数据，以供撤销使用
@@ -124,7 +145,7 @@
      ctx: null,
      visible: false,
      baseImg: undefined,
      showProportion: 1.666
      //showProportion: 1.666
    };
  },
  watch: {
@@ -136,7 +157,7 @@
          this.refresh();
        }
      },
      deep: true
      deep: true,
    },
    canvasDataShow: {
      handler(newVal, oldVal) {
@@ -147,8 +168,8 @@
        this.canvasData.polygon = newVal.polygon;
        this.clickSelect(this.canvasData);
      },
      deep: true
    }
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
@@ -162,28 +183,36 @@
  methods: {
    // 获取canvas底图
    async getCanvasPic() {
      if (TreeDataPool.selectedNode.type == "MENU") {
        return;
      }
      // this.$emit('changeBaseImg',this.currentCameraId)
      this.$emit('changeLoading', true)
      this.$emit("changeLoading", true);
      if (this.currentCameraId) {
        await updateSnapshot(this.currentCameraId)
          .then(res => {
            if (res.data.cameraId === this.currentCameraId) {
        let _this = this;
        await updateSnapshot(this.currentCameraId, this.isGB28181)
          .then((res) => {
            if (res.data.cameraId === _this.currentCameraId) {
              this.baseImg = res.data.snapshotUrl;
              this.$emit('refresh', res.data.snapshotUrl)
              this.$forceUpdate()
              this.$emit(
                "refresh",
                res.data.snapshotUrl,
                _this.currentCameraId
              );
              this.$forceUpdate();
              this.$notify({
                type: "success",
                message: "底图已刷新"
                message: "底图已刷新",
              });
            }
          })
          .catch(err => {
          .catch((err) => {
            this.$notify({
              type: "error",
              message: "底图刷新失败"
              message: "底图刷新失败",
            });
          });
        this.$emit('changeLoading', false)
        this.$emit("changeLoading", false);
      }
    },
    showModal() {
@@ -191,34 +220,35 @@
      this.visible = true;
      this.$nextTick(() => {
        // this.$refs.bigCanvas.delCursor = {}
      })
      });
    },
    cancelFunc() {
      this.visible = false;
      this.$refs.bigCanvas.cancel()
      this.$refs.bigCanvas.cancel();
      // console.log("关闭了");
    },
    handleOk() {
      // 判断图形的名字是否重复
      // console.log("ok");
      this.$refs.bigCanvas.changeType('0')
      this.$refs.bigCanvas.changeType("0");
      let repeatName = this.isRepeat();
      if (repeatName !== "") {
        this.$notify({
          type: "error",
          message: repeatName + "图形名称重复，请更正！"
          message: repeatName + "图形名称重复，请更正！",
        });
        return;
      }
      this.$notify({
        type: "success",
        message: "已保存绘制！"
        message: "已保存绘制！",
      });
      // 每次保存关闭模态窗时都要把模态窗的数据写到父组件里来
      this.canvasData = this.$refs.bigCanvas.canvasData;
      // 顺便甩到更外层去
      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
      // console.log("你好", this.canvasData);

      this.clickSelect(this.canvasData);
      this.visible = false;
    },
@@ -230,8 +260,14 @@
      _this.canvasData.line.forEach(function (v, i) {
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
        _this.ctx.moveTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[1].x / _this.showProportion,
          v.location[1].y / _this.showProportion
        );
        _this.ctx.stroke();
        _this.showRemarks(
          v.location[0].x / _this.showProportion,
@@ -249,8 +285,14 @@
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.beginPath();
          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
          _this.ctx.moveTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[1].x / _this.showProportion,
            v.location[1].y / _this.showProportion
          );
          _this.ctx.stroke();
          _this.showRemarks(
            v.location[0].x / _this.showProportion,
@@ -263,11 +305,26 @@
      _this.canvasData.rect.forEach(function (v, i) {
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
        _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion);
        _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion);
        _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
        _this.ctx.moveTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[1].x / _this.showProportion,
          v.location[1].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[2].x / _this.showProportion,
          v.location[2].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[3].x / _this.showProportion,
          v.location[3].y / _this.showProportion
        );
        _this.ctx.lineTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        _this.ctx.stroke();
        _this.showRemarks(
          v.location[0].x / _this.showProportion,
@@ -284,11 +341,26 @@
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.beginPath();
          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
          _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion);
          _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion);
          _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
          _this.ctx.moveTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[1].x / _this.showProportion,
            v.location[1].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[2].x / _this.showProportion,
            v.location[2].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[3].x / _this.showProportion,
            v.location[3].y / _this.showProportion
          );
          _this.ctx.lineTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          _this.ctx.stroke();
          _this.showRemarks(
            v.location[0].x / _this.showProportion,
@@ -357,9 +429,15 @@
        }
        _this.ctx.strokeStyle = "yellow";
        _this.ctx.beginPath();
        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
        _this.ctx.moveTo(
          v.location[0].x / _this.showProportion,
          v.location[0].y / _this.showProportion
        );
        for (let i = 1; i < v.location.length; i++) {
          _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion);
          _this.ctx.lineTo(
            v.location[i].x / _this.showProportion,
            v.location[i].y / _this.showProportion
          );
        }
        _this.ctx.closePath();
        _this.ctx.stroke();
@@ -379,9 +457,15 @@
          // 将当前元素标红
          _this.ctx.strokeStyle = "red";
          _this.ctx.beginPath();
          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
          _this.ctx.moveTo(
            v.location[0].x / _this.showProportion,
            v.location[0].y / _this.showProportion
          );
          for (let i = 1; i < v.location.length; i++) {
            _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion);
            _this.ctx.lineTo(
              v.location[i].x / _this.showProportion,
              v.location[i].y / _this.showProportion
            );
          }
          _this.ctx.closePath();
          _this.ctx.stroke();
@@ -489,19 +573,19 @@
        nameArray.push(v.name);
      }
      return "";
    }
  }
    },
  },
};
</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;