<template>
  <div>
    <div
      id="myDiagramDiv"
      :style="{width: canvasW + 'px',height: canvasH + 'px',backgroundColor: '#DAE4E4'}"
    ></div>
    <el-button @click="save" style="position: absolute;right: 10%;top: 5%;z-index:9999;">保存</el-button>
  </div>
</template>
<script>
import {
  getBussTypes2
} from "@/api/request";
import tools from "@/assets/js/tools"

export default {
  data() {
    return {
      canvasW: 0,
      canvasH: 0,
      data: '',
      keys: [],
      paths: [],
      mapKeys: [],
      //最大的toItem个数
      max: 0,
      //距离顶部的距离,间距
      toTop: 40,
      interval: 50,
      xInterval: 200,
      lastData: [],
      diagram: "",
      coordinates: [], //坐标为空的虚拟点位
    }
  },
  created() { },
  mounted() {
    this.getWidth()
    window.addEventListener("resize", this.getWidth)
    let recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('type', 'text/javascript')
    recaptchaScript.setAttribute('src', './../../static/js/go-debug.js')
    document.head.appendChild(recaptchaScript)
    recaptchaScript.onload = () => {
      this.getJson()
    }
    window.onbeforeunload = function (event) {
      return '您可能有数据没有保存';
    };
  },
  methods: {
    getJson() {
      getBussTypes2({}).then(res => {
        // res.data = { "Content": { "GraphList": [{ "Nodes": [{ "Location": { "X": 9.37996654, "Y": 65.5669039, "Z": -41.17454068 }, "Id": "V1", "Name": "螺杆式冷水机组-WSCGS", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 28.23532905, "Y": 65.24693377, "Z": -29.52755906 }, "Id": "V4", "Name": "流量传感器-VH3N7", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 23.44676771, "Y": 56.42303974, "Z": -41.17454068 }, "Id": "V6", "Name": "板式换热器", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 9.37996654, "Y": 75.41278023, "Z": -41.17454068 }, "Id": "V16", "Name": "螺杆式冷水机组-ZP6WK", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 27.82989242, "Y": 78.35405319, "Z": -30.18372703 }, "Id": "V18", "Name": "流量传感器-2Z3IP", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V22", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 7.4908353, "Y": 85.05207299, "Z": -40.79954068 }, "Id": "V26", "Name": "离心式冷水机组-5I0SD", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 7.8755509, "Y": 166.65169631, "Z": -40.22904134 }, "Id": "V31", "Name": "冷冻水泵", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 16.97797085, "Y": 131.65454901, "Z": -40.09124607 }, "Id": "V33", "Name": "免费冷冻水泵", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 11.36862193, "Y": 131.65454901, "Z": -40.09124607 }, "Id": "V35", "Name": "免费冷冻水泵", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 7.4908353, "Y": 98.83160055, "Z": -41.17454068 }, "Id": "V37", "Name": "离心式冷水机组-R267Z", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 31.49774048, "Y": 83.34472391, "Z": -34.56738534 }, "Id": "V41", "Name": "流量传感器-CBHG6", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 14.28467164, "Y": 166.65169631, "Z": -40.22904134 }, "Id": "V43", "Name": "冷冻水泵", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 31.49774048, "Y": 97.12425147, "Z": -34.56738534 }, "Id": "V52", "Name": "流量传感器-V1VMI", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 7.4908353, "Y": 112.61112811, "Z": -40.87270341 }, "Id": "V54", "Name": "离心式冷水机组-031E5", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 41.42981168, "Y": 153.37064254, "Z": -36.52834678 }, "Id": "V56", "Name": "供冷集水器-AU3GJ", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 20.69490354, "Y": 166.65169631, "Z": -40.22904134 }, "Id": "V62", "Name": "供冷冷冻水泵-2", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 31.49774048, "Y": 110.90377903, "Z": -34.23273967 }, "Id": "V69", "Name": "流量传感器-KNCBZ", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.4092427, "Y": 143.26565567, " Z": -25.26246719 }, "Id": "V71", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.45631193, "Y": 152.28796538, "Z": -25.26246719 }, "Id": "V73", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.45631193, "Y": 147.53074753, "Z": -25.26246719 }, "Id": "V75", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.60394973, "Y": 149.99137745, "Z": -25.26246719 }, "Id": "V77", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.36669231, "Y": 145.3982016, "Z": -25.26246719 }, "Id": "V79", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.45631193, "Y": 154.09242732, "Z": -25.26246719 }, "Id": "V81", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.25555279, "Y": 139.1646058, "Z": -25.26246719 }, "Id": "V83", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 64.36288255, "Y": 137.90947873, "Z": -25.26246719 }, "Id": "V85", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 41.42981168, "Y": 169.00384464, "Z": -36.52834678 }, "Id": "V104", "Name": "分水器", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 26.59354101, "Y": 131.77892148, "Z": -39.62598425 }, "Id": "V115", "Name": "供冷冷冻水泵-TC16F", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.42621211, "Y": 171.23481577, "Z": -25.26246719 }, "Id": "V117", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.57384991, "Y": 181.89754543, "Z": -25.26246719 }, "Id": "V119", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.57384991, "Y": 179.7649995, "Z": -25.26246719 }, "Id": "V121", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.51801999, "Y": 169.10226984, "Z": -25.26246719 }, "Id": "V123", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.42621211, "Y": 173.20331971, "Z": -25.26246719 }, "Id": "V125", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.42621211, "Y": 188.13114123, "Z": -25.26246719 }, "Id": "V127", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.6997365, "Y": 175.00778165, "Z": -25.26246719 }, "Id": "V129", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 45.57384991, "Y": 177.30436958, "Z": -25.26246719 }, "Id": "V131", "Name": "水管流向指示符", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V138", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 26.21096241, "Y": 148.61767196, "Z": -39.62598425 }, "Id": "V142", "Name": "供冷冷冻水泵-20C2A", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V146", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 14.78251738, "Y": 148.61767196, "Z": -39.62598425 }, "Id": "V148", "Name": "供冷冷冻水泵-AA18A", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V150", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V163", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V164", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }, { "Location": { "X": 0.0, "Y": 0.0, "Z": 0.0 }, "Id": "V179", "Name": "", "ElementType": "Node", "ElementColor": "#FF000000", "RefData": null }], "Paths": [{ "StartNodeId": "V1", "EndNodeId": "V164", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V4", "EndNodeId": "V1", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V164", "EndNodeId": "V6", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V163", "EndNodeId": "V4", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V16", "EndNodeId": "V164", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V163", "EndNodeId": "V18", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V26", "EndNodeId": "V164", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V18", "EndNodeId": "V16", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V31", "EndNodeId": "V163", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V33", "EndNodeId": "V22", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V35", "EndNodeId": "V22", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V37", "EndNodeId": "V164", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V41", "EndNodeId": "V26", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V43", "EndNodeId": "V163", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V33", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V35", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V52", "EndNodeId": "V37", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V54", "EndNodeId": "V164", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V164", "EndNodeId": "V56", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V43", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V179", "EndNodeId": "V52", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V69", "EndNodeId": "V54", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V71", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V73", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V75", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V77", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V79", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V81", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V83", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V56", "EndNodeId": "V85", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V62", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V179", "EndNodeId": "V69", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V104", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V115", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V117", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V119", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V121", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V123", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V125", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V127", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V129", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V131", "EndNodeId": "V104", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V138", "EndNodeId": "V115", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V142", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V146", "EndNodeId": "V142", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V150", "EndNodeId": "V148", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V22", "EndNodeId": "V6", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V62", "EndNodeId": "V163", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V31", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V179", "EndNodeId": "V41", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "V148", "EndNodeId": "V179", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V31", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V33", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V35", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V43", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V62", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V117", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V119", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V121", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V123", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V125", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V127", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V129", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V131", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V138", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V146", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }, { "StartNodeId": "-1", "EndNodeId": "V150", "MidPoints": [], "Id": null, "Name": "", "ElementType": "NodePath", "ElementColor": "#FF000000", "RefData": null }], "Id": null, "Name": "", "ElementType": "Graph", "ElementColor": "#FF000000", "RefData": null }], "Id": "B2-20190306125322" } }
        this.data = res.data.Content.GraphList[0];
        this.id = res.data.Content.Id

        if (!!tools.getItem("coldside" + this.id)) {
          this.data = tools.getItem("coldside" + this.id)
          console.log(this.data)
          this.keys = this.data.nodeDataArray
          this.paths = this.data.linkDataArray
          this.doGoJs()
        } else {
          this.getBasicsData()
          //获取链接关系
          this.getLinkRea()
          //根据链接关系改变位置关系
          this.changeLocFromRea()
          //然后获取级联关系
          // this.getCascadeData()
          //检查数据，如果有两个或以上位置相同，将其x添加50或减少50
          // this.changeLoc()
          this.doGoJs()
        }
      });
    },
    save() {
      console.log("save", this.diagram.model.toJson())
      tools.setItem("coldside" + this.id, JSON.parse(this.diagram.model.toJson()))
    },
    changeLocFromRea() {
      this.keys.map(item => {
        if (!!item.linkFrom || !!item.linkTo) {
          let x = 0,
            y = 0;
          if (!!item.linkTo) {
            item.linkTo.map(item => {
              y += item.Location.Y
            })
            x = x / item.linkTo.length
            y = y / item.linkTo.length
          }
          if (!!item.linkFrom) {
            item.linkFrom.map(item => {
              x += item.Location.X
            })
            x = x / item.linkFrom.length
            y = y / item.linkFrom.length
          }
          item.loc = x * 10 + " " + y * 10
        }
      })
    },
    //获取链接关系
    getLinkRea() {
      this.coordinates.map(item => {
        item.linkTo = this.getName(item.key, 1)
        item.linkFrom = this.getName(item.key, 2)
      })
    },
    //获取基础数据
    getBasicsData() {
      this.coordinates = []
      this.keys = this.data.Nodes.map((item, index) => {
        let obj = {
          key: item.Id,
          name: item.Name,
          color: "#fff"
        },
          remainder = index % 3,
          exact = (index - remainder) / 3;
        if (item.Name === "") {
          obj.shape = "Circle"
        }
        obj.loc = item.Location.X * 10 + " " + item.Location.Y * 10
        obj.Location = item.Location
        // obj.loc = new go.Point(item.Location.X,item.Location.Y)
        // obj.loc = this.xInterval * remainder + " " + (this.toTop + this.interval * exact)
        // obj.loc = new go.Point(obj.loc.x, obj.loc.y)
        //新建一个变量存储住xyz坐标为0的数据
        if (item.Location.X == 0 && item.Location.Y == 0) {
          this.coordinates.push(obj)
        }
        return obj
      })
      this.paths = this.data.Paths.map(item => {
        return {
          from: item.StartNodeId,
          to: item.EndNodeId
        }
      })
      // this.mapKeys = this.keys.map(item => {
      //     this.paths.map(child => {
      //         if (item.key == child.from) {
      //             if (!item.toKeys) {
      //                 item.toKeys = []
      //             }
      //             item.toKeys.push(child.to)
      //         }
      //     })
      //     return item
      // })
    },
    //修改loc
    changeLoc() {
      let hash = {}
      this.keys.map(item => {
        if (hash[item.loc.x + "" + item.loc.y]) {
          hash[item.loc.x + "" + item.loc.y].push(item.key)
        } else {
          hash[item.loc.x + "" + item.loc.y] = [item.key]
        }
      })
      for (let key in hash) {
        if (hash[key].length > 1) {
          let i = 1,
            ids = hash[key]
          for (i; i < ids.length; i++) {
            let item = this.getName(ids[i])
            item.loc.y -= this.interval * i
          }
        }
      }
      this.keys = this.keys.map(item => {
        item.loc = new go.Point(item.loc.x, item.loc.y)
        if (item.key == "-1") {
          return null
        } else {
          return item
        }
      }).filter(d => d)
    },
    //获取级联关系
    getCascadeData() {
      this.changeData(this.mapKeys[0])
      this.changeItem([this.mapKeys[0]], 0)
      this.getDoData([this.mapKeys[0]], this.lastData)
    },
    //计算出级联关系
    changeData(obj) {
      if (!!obj.toKeys) {
        obj.toKeys.map(item => {
          if (!!obj.toItem) {
            obj.toItem.push(this.getName(item))
          } else {
            obj.toItem = [this.getName(item)]
          }
        })
        obj.toItem = this.unique(obj.toItem, "key")
        if (!!obj.toItem) {
          //判断toItem的长度，给最大值
          if (obj.toItem.length > this.max) {
            this.max = obj.toItem.length
          }
          obj.toItem.map(item => {
            this.changeData(item)
          })
        }
      } else {
        obj.toItem = null
      }
    },
    changeItem(arr, tier, y) {
      let length = arr.length
      //总个数比数组长度多的部分
      let countHeight = this.max - length
      arr.map((item, index) => {
        item.loc = {
          //x坐标由层级决定,y坐标由最大数和间隔决定
          x: tier * this.xInterval + 50,
          //y存在使用y
          y: y ? y : countHeight * this.interval / 2 + this.interval * (index - 1) + this.toTop,
        }
      })
      tier++
      arr.map(item => {
        if (!!item.toItem) {
          if (arr.length != 1) {
            this.changeItem(item.toItem, tier, item.loc.y)
          } else {
            this.changeItem(this.unique(item.toItem, 'key'), tier)
          }
        }
      })
    },
    //通过key值获取obj,flag为1获取该key link的下一级arr,2时获取上一级的arr
    getName(key, falg) {
      let data = [],
        toKey = [];
      if (falg == 1) {
        this.paths.map(item => {
          if (item.from == key) {
            toKey.push(item)
          }
        })
        this.keys.map(item => {
          toKey.map(child => {
            if (item.key == child.to) {
              data.push(item)
            }
          })
        })
      } else if (falg == 2) {
        this.paths.map(item => {
          if (item.to == key) {
            toKey.push(item.from)
          }
        })
        this.keys.map(item => {
          toKey.map(child => {
            if (item.key == child) {
              data.push(item)
            }
          })
        })
      } else {
        this.mapKeys.map(item => {
          if (item.key == key) {
            data = item
          }
        })
      }
      return data
    },
    //获取计算后的数据
    getDoData(arr, doData) {
      arr.map(item => {
        // item.loc = new go.Point(item.loc.x, item.loc.y)
        doData.push(item)
        if (!!item.toItem) {
          this.getDoData(this.unique(item.toItem, 'key'), doData)
        }
      })
    },
    // 数组去重
    unique(Arr, key) {
      var hash = {};
      return Arr.reduce(function (arr, current) {
        hash[current[key]] ? '' : hash[current[key]] = true && arr.push(current);
        return arr
      }, [])
    },
    //初始化宽高
    getWidth() {
      this.canvasW = document.getElementById("app").offsetWidth;
      this.canvasH = document.getElementById("app").offsetHeight;
    },
    doGoJs() {
      var _go = go.GraphObject.make;
      this.diagram = new go.Diagram("myDiagramDiv");
      // the node template describes how each Node should be constructed
      this.diagram.nodeTemplate =
        _go(go.Node, "Auto", // the Shape automatically fits around the TextBlock
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          _go(go.Shape, "RoundedRectangle",
            new go.Binding("figure", "shape"), //绑定Node的形状，也可直接设置Shape.figure
            // new go.Binding("lineDash", "lineDash"), //绑定Node的形状，也可直接设置Shape.figure
            // bind Shape.fill to Node.data.color
            new go.Binding("fill", "color"),
            // new go.Size(0, 10),
          ),
          _go(go.TextBlock, {
            margin: 3,
            textAlign: "center",
            wrap: go.TextBlock.WrapDesiredSize
          }, // some room around the text
            // bind TextBlock.text to Node.data.key
            new go.Binding("text", "name")
          )
        );
      // this.diagram.linkTemplate = _go(
      //     go.Link,
      //     // new go.Binding("routing", "routing"), 
      //     {
      //         routing: go.Link.AvoidsNodes,
      //         corner: 10,
      //     },
      //     _go(go.Shape),
      //     _go(go.Shape, {
      //         toArrow: "Standard"
      //     })
      // )
      // the Model holds only the essential information describing the diagram
      console.log(this.keys, this.paths)
      this.keys.map(item => {
        if (item.hasOwnProperty("linkTo")) {
          delete item.linkTo
        }
        if (item.hasOwnProperty("linkFrom")) {
          delete item.linkFrom
        }
        return item
      })
      this.diagram.model.copiesArrays = true; //设置这个使用itemArr数据才不会互相影响
      this.diagram.model.copiesArrayObjects = true; //设置这个使用itemArr数据才不会互相影响
      this.diagram.model = new go.GraphLinksModel(this.keys, this.paths);
      this.diagram.initialContentAlignment = go.Spot.Center;
      // enable Ctrl-Z to undo and Ctrl-Y to redo
      this.diagram.undoManager.isEnabled = true;
    }
  }
}
</script>
<style>
</style>