ZhangShan_VueProject/src/views/xDesigner/viewer.vue

<template>
  <div class="mainpage" id="rootElement" ref="rootElement"></div>
</template>

 <script>
import Vue from 'vue'
import { Topology, Lock, Options, Pen } from '@topology/core'
import * as FileSaver from 'file-saver'
import { Store } from 'le5le-store'
import { monitor } from '../../network/network'
import example from '@/static/json/example.json'


export default {
  data()
  {
    return {
      dataSubscribe: '',
      nodes: {},
      pullDataTimer: '',
      paintLockSubscribe: {},
      canvas: null,
    }
  },
  mounted()
  {
    this.init();
    this.pullDataTimer = setInterval(this.pullTagData, 1000);
  },
  watch: {
    '$route'(to, from)
    {
      this.$router.go(0);
    }
  },
  methods: {
    init()
    {
      window.scrollTo(0, 0);
      if (this.canvas == null) {
        this.canvas = new Topology('rootElement', this.canvasOptions);
        this.canvasHeight = this.canvas.canvas.height;

        this.dataSubscribe = Store.subscribe('wxwData', value =>
        {
          for (let i = 0; i < value.length; i++) {
            if (this.nodes[value[i].point]) {
              let penArray = this.nodes[value[i].point];
              for (let e in penArray) {
                let pent = penArray[e].binding.type;
                switch (pent.toLowerCase()) {
                  case 'di': {
                    penArray[e].fillStyle = parseInt(value[i].latestValue) % 2 == 0 ? "#e00404ff" : "#21e004ff";
                  } break;
                  case 'ai': {
                    penArray[e].text = value[i].latestValue;
                  } break;
                  default:
                    { }
                    break;
                }
              }
            }
            else {
              // console.log(value[i].point);
              //console.log(this.nodes[value[i].point]) 
            }
          }
          this.canvas.render();
        });

        this.paintLockSubscribe = Store.subscribe('viewLock', tag =>
        {
          if (this.canvas) {
            this.canvas.lock(tag);
          }
        });
      }

      this.open();

    },
    open()
    {
      window.v = this.canvas;
      window.s = this.$store;

      if (this.$route.query.path) {
        monitor.getJsonFileBy(this.$route.query.path, res =>
        {
          if (res.data && res.data.data && res.data.data.pagejson) {
            this.canvas.open(res.data.data.pagejson);
            this.canvas.lock(2);
          }
          else {
            this.canvas.open(JSON.stringify(example));
            this.canvas.lock(2);
          }
        });

      }
      else {
        this.canvas.open(JSON.stringify(example));
        this.canvas.lock(2);
      }

    },
    pullTagData()
    {
      window.nnn = this.nodes;

      //if ((!this.nodes || Object.keys(this.nodes).length == 0) && this.canvas && this.canvas.data.pens.length > 0) {
      if (this.canvas && this.canvas.data.pens.length > 0) {
        // 遍历出所有要查询的节点
        for (let i = 0; i < this.canvas.data.pens.length; i++) {
          let node = this.canvas.data.pens[i];
          if (node.binding && node.binding.tagName != "") {

            if (!this.nodes[node.binding.tagName]) {

              this.nodes[node.binding.tagName] = [];
            }

            if (!this.nodes[node.binding.tagName][node.id]) {
              this.nodes[node.binding.tagName][node.id] = node;
            }
          }
        }
      }
      monitor.getTagValues(Object.keys(this.nodes));
    }

  },
  beforeDestroy()
  {
    if (this.dataSubscribe != '') {
      this.dataSubscribe.unsubscribe();
    }
    if (this.pullDataTimer != '') {
      clearTimeout(this.pullDataTimer);
    }

  }
}
 </script> 
 <style lang="css" scoped>
.mainpage {
  height: 100%;
  width: 100%;
}
</style>