<template>
  <div id="app">
    <Webtopo :webtopoAPI="webAPI"></Webtopo>
  </div>
</template>

<script>
  import * as webAPI from './api/index.js';
  export default {
    name: 'App',
    data() {
      return {
        webAPI
      };
    }
  };
</script>

<template>
  <div id="app">
    <Webtopo :webtopoAPI="webAPI"></Webtopo>
  </div>
</template>

<script>
  import * as webAPI from './api/index.js';
  export default {
    name: 'App',
    data() {
      return {
        webAPI
      };
    }
  };
</script>

webtopoAPI: {
        getCaptcha: ({mps，startTime，endTime}) => {},//查询历史数据，历史图展示时使用
        getPoints: ({ page, limit }) => {},//查询你系统中所有点位信息，绑定点位时使用
        getAttrs: ({mpId, consId,readAndWriteVar}) => {},//根据点位（表计）查询遥信、遥测列表
        saveOrUpdate: ({cells, points, graph}) => {},//保存图纸信息，后台你是存到数据库还是存入文件系统都无所谓，只要用户展示是能查到就好
        getJSONById: (id) => {},//图纸id，这个地方需要后台保存好后生成一个唯一id，访问preview组件时将id传给组件，组件就会调用此方法获取图纸信息
        getImages: () => {},//获取拖拽到编辑器上传的所有图片或图元
        uploadFile: (file) => {},//拖拽到编辑器上传图片或图元的接口
        listNotPage: ({consId，notSearchId}) => {},//获取图纸列表，配置图纸跳转功能时，需要提供当前已有图纸让配置人员选择
        getMpAndMstypeNames: (mpAttrs) => {},//获取点位的名称，用户每次打开组态系统时组件都会去后台查一下点位名称，如果业务变动用户在你系统修改了点位名，渲染给用户时也会展示最新名称
        setData: (id,mpId,attrId,value) => {}//当用户在组态系统中向表计发送数据时，通过此接口发送给后台
      }

   this.$refs.preview.getPointList()//获取图纸所有点位信息
   this.$refs.preview.changeData(data);//将获取到的数据发送给组件

<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: {
      //点位注册，组件会将图纸用到的所有点位发送给register方法，如果使用socket需要向后台注册点位信息，方便数据推送
      register(pointList) {
        this.$socket.emit('register', {
          code: getToken(),
          points: pointList
        });
      }
    },
    sockets: {
     //重连时重新注册下点位信息
      connect: function () {
        this.isConnect = true;
        this.$socket.emit('register', {
          code: getToken(),
          points: this.$refs.preview.getPointList()
        });
      },
     //断开连接时通知组件，组件会提示用户后台断开连接，防止用户错过重要信息
      disconnect: function () {
        this.isConnect = false;
        console.log('断开连接');
      },
      //出错时提示用户
      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('重新连接');
      },
      //数据接收函数，接收到数据变化发送给组件
      data(data) {
        this.$refs.preview.changeData(data);
      }
    },
    //关闭页面时断开连接
    beforeDestroy() {
      // 关闭 Socket
      this.sockets.disconnect();
    }
  };
</script>