Data Push

Data push and tag registration support any technology — Socket or polling. Below is a Socket example; adapt it for polling.

Note: getPointList() and the points field in Socket payloads refer to tags on the screen. API names are kept for backward compatibility.

Core Methods

this.$refs.preview.getPointList()     // Get all tags used on the screen
this.$refs.preview.changeData(data)   // Push data to the component

Socket Example

<template>
  <preview
    :svgId="id"
    :webtopoAPI="webtopoAPI"
    :isConnect="isConnect"
    ref="preview"
    @register="register"
  ></preview>
</template>

<script>
  import * as webtopoAPI from '@/api/webtopo/index';
  import { getToken } from '@/utils/token-util';
  export default {
    data() {
      return {
        id: null,
        webtopoAPI,
        isConnect: false
      };
    },
    created() {
      this.id = this.$route.query.id;
      this.$socket.io.uri = `${location.protocol}//${location.hostname}:8031`;
      this.$socket.connect();
    },
    methods: {
      // Tag registration — component sends all tags on the screen
      register(pointList) {
        this.$socket.emit('register', {
          code: getToken(),
          points: pointList  // tag list (API field name)
        });
      }
    },
    sockets: {
      connect: function () {
        this.isConnect = true;
        this.$socket.emit('register', {
          code: getToken(),
          points: this.$refs.preview.getPointList()
        });
      },
      disconnect: function () {
        this.isConnect = false;
        console.log('Disconnected');
      },
      autoError: function (msg) {
        this.$message.error(msg);
      },
      reconnect: function () {
        this.isConnect = true;
        this.$socket.emit('register', {
          code: getToken(),
          points: this.$refs.preview.getPointList()
        });
        console.log('Reconnected');
      },
      data(data) {
        this.$refs.preview.changeData(data);
      }
    },
    beforeDestroy() {
      this.sockets.disconnect();
    }
  };
</script>

Polling

Poll your backend periodically and call this.$refs.preview.changeData(data) — no Socket code needed.