player 添加算法数据推送

zhangzengfei

2021-05-21 fd7d0f525987ef7cbfea05ae514faa0342206114

player 添加算法数据推送

 src/components/player/index.vue

@@ -49,7 +49,6 @@
  },
 
  computed: {

    poster() {
      return "/images/player/player_poster.gif?t=" + Math.random()
    }
@@ -76,6 +75,7 @@
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0,
      algoDataSocket: null
    };
  },
  watch: {
@@ -83,12 +83,29 @@
      if (newVal !== oldVal) {
        if (this.wfs.config) {
          this.wfs.destroy();
          !!this.algoDataSocket && this.algoDataSocket.close()
        }
        this.$nextTick(() => {
          this.clickStart();
        });
      }
    }
  },
  mounted() {
    this.clickStart();
    this.$nextTick(() => {
      this.canvas = this.$refs.areaCanvas;
      this.ctx = this.canvas.getContext("2d");
      this.ctx.lineWidth = 1;
      this.initArea();

    })
  },
  beforeDestroy() {
    this.wfs.destroy();
    this.wfsId = "";

    !!this.algoDataSocket && this.algoDataSocket.close()
  },
  methods: {
    checkConnect(id) {
@@ -283,21 +300,23 @@
      this.canvasData.polygon = res.data.polygon;
      console.log(this.canvasData)
      this.clickSelect(this.canvasData);
    },
    initAlgoDataWebScoket() {
      if (typeof (WebSocket) === "undefined") {
        console.log("error,您的浏览器不支持socket")
      } else {
        this.algoDataSocket = new WebSocket()
        this.algoDataSocket.onopen = () => {
          console.log("socket连接成功")
    }
  },
  mounted() {
    this.clickStart();
    this.$nextTick(()=>{
      this.canvas = this.$refs.areaCanvas;
      this.ctx = this.canvas.getContext("2d");
      this.ctx.lineWidth = 1;
      this.initArea();

    })
  },
  beforeDestroy() {
    this.wfs.destroy();
    this.wfsId = "";
        this.algoDataSocket.onerror = () => {
          console.log("连接错误")
        }
        this.algoDataSocket.onmessage = msg => {
          console.log(msg)
        }
      }
    }
  }
};
</script>