<template>
  <div class="integration__cont__map__cont" id="map"></div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      myChart: null,
      desc: 300, // 防抖时间
      nodes: [
        {
          name: '首都机场BHS',
          itemStyle: {
            color: '#5AAEF4',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '星盟SBH',
          itemStyle: {
            color: '#5B6E96',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '局方公共平台',
          itemStyle: {
            color: '#FFE88E',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '离港高频',
          itemStyle: {
            color: '#61D9AC',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'WT',
          itemStyle: {
            color: '#A8E0FB',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '特殊及异常行李',
          itemStyle: {
            color: '#ffdc4c',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'SCS',
          itemStyle: {
            color: '#fc9850',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'ERP',
          itemStyle: {
            color: '#e55a55',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '服务质量',
          itemStyle: {
            color: '#6d62e4',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '首都机场边缘节点',
          itemStyle: {
            color: '#6c9ae7',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '采集错误',
          itemStyle: {
            color: '#fff000',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '国航主动拉取节点',
          itemStyle: {
            color: '#4a6fe2',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '国航被动接收节点',
          itemStyle: {
            color: '#22c2da',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'Kafka',
          itemStyle: {
            color: '#fc6e6c',
          },
          label: {
            position: 'right',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'BSM',
          itemStyle: {
            color: '#f4ec59',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'BPM',
          itemStyle: {
            color: '#ffb64d',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '航班',
          itemStyle: {
            color: '#5aaef4',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '行李投诉',
          itemStyle: {
            color: '#61d9ac',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '旅客',
          itemStyle: {
            color: '#5b6e96',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '推送节点',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '解析服务',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '存储服务',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '首都机场BHS ',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '星盟SBH ',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '局方公共平台 ',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: '行李事件推送',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'ES',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
        {
          name: 'Kafka ',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
          top: 10
        },
        {
          name: 'Mysql',
          itemStyle: {
            color: '#a8e0fb',
          },
          label: {
            position: 'left',
            textStyle: {
              fontSize: 18,
              fontWeight: 800,
              color: '#666666',
            },
          },
        },
      ],
      links: [
        {
          source: '首都机场BHS',
          target: '首都机场边缘节点',
          value: 10,
        },
        {
          source: '首都机场边缘节点',
          target: '国航主动拉取节点',
          value: 5,
        },
        {
          source: '首都机场边缘节点',
          target: '国航被动接收节点',
          value: 5,
        },
        {
          source: '星盟SBH',
          target: '国航主动拉取节点',
          value: 10,
        },
        {
          source: '局方公共平台',
          target: '国航主动拉取节点',
          value: 10,
        },
        {
          source: '离港高频',
          target: '国航主动拉取节点',
          value: 10,
        },
        {
          source: 'WT',
          target: '国航主动拉取节点',
          value: 10,
        },
        {
          source: '特殊及异常行李',
          target: '国航主动拉取节点',
          value: 10,
        },
        {
          source: 'SCS',
          target: '国航被动接收节点',
          value: 10,
        },
        {
          source: 'ERP',
          target: '国航被动接收节点',
          value: 10,
        },
        {
          source: '服务质量',
          target: '国航被动接收节点',
          value: 10,
        },
        {
          source: '国航主动拉取节点',
          target: 'Kafka',
          value: 55,
        },
        {
          source: '国航被动接收节点',
          target: 'Kafka',
          value: 55,
        },
        {
          source: 'Kafka',
          target: 'BSM',
          value: 20,
        },
        {
          source: 'Kafka',
          target: 'BPM',
          value: 20,
        },
        {
          source: 'Kafka',
          target: '航班',
          value: 20,
        },
        {
          source: 'Kafka',
          target: '行李投诉',
          value: 20,
        },
        {
          source: 'Kafka',
          target: '旅客',
          value: 20,
        },
        {
          source: 'BPM',
          target: '推送节点',
          value: 8,
        },
        {
          source: '推送节点',
          target: '首都机场BHS ',
          value: 8,
        },
        {
          source: '推送节点',
          target: '星盟SBH ',
          value: 8,
        },
        {
          source: '推送节点',
          target: '局方公共平台 ',
          value: 8,
        },
        {
          source: '推送节点',
          target: '行李推送事件',
          value: 8,
        },
        {
          source: '推送节点',
          target: 'ES',
          value: 8,
        },
        {
          source: '旅客',
          target: '解析服务',
          value: 8,
        },
        {
          source: '航班',
          target: '解析服务',
          value: 8,
        },
        {
          source: '行李投诉',
          target: '解析服务',
          value: 8,
        },
        {
          source: '解析服务',
          target: 'Kafka ',
          value: 8,
        },
        {
          source: 'BSM',
          target: '解析服务',
          value: 15,
        },
        {
          source: 'Kafka ',
          target: '存储服务',
          value: 35,
        },
        {
          source: '存储服务',
          target: 'Mysql',
          value: 35,
        },
      ],
      options: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
        },
        series: {
          type: 'sankey',
          layout: 'none',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          nodeGap: 14,
          layoutIterations: 0, // 自动优化列表，尽量减少线的交叉，为0就是按照数据排列
          data: [], // 节点
          links: [], // 节点之间的连线
          draggable: false,
          focusNodeAdjacency: 'allEdges', // 鼠标划上时高亮的节点和连线，allEdges表示鼠标划到节点上点亮节点上的连线及连线对应的节点
          levels: [{
            depth: 0,
            itemStyle: {
              color: '#F27E7E',
            },
            lineStyle: {
              color: 'source',
              opacity: 0.2,
            },
          },
          {
            depth: 1,
            lineStyle: {
              color: 'source',
              opacity: 0.2,
            },
          },
          {
            depth: 2,
            lineStyle: {
              color: 'source',
              opacity: 0.2,
            },
          },
          {
            depth: 3,
            label: {
              fontSize: 12,
            },
          },
          ],
          label: {
            fontSize: 14,
            color: '#666',
          },
          itemStyle: {
            normal: {
              borderWidth: 0,
            },
          },
        },
      },
    }
  },
  watch: {
    // 监听数据变化 重绘图形
    options: {
      handler (obj) {
        // 生成柱状图
        this.myChart.setOption(obj)
      },
      deep: true
    }
  },
  mounted () {
    this.options.series.data = this.nodes
    this.options.series.links = this.links
    this.myChart = this.$echarts.init(document.getElementById('map'))
    this.myChart.setOption(this.options)
    // 监听页面缩放 防止dom重复渲染
    window.addEventListener('resize', _.debounce(this.handle, this.desc))
  },
  beforeDestroy () {
    // 销毁实例和移除监听
    if (this.myChart) {
      this.myChart.dispose()
      window.removeEventListener('resize', this.handle)
      this.myChart = null
    }
  },
  methods: {
    handle () {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
  }
}
</script>