提交

src/router/index.js

@@ -16,6 +16,7 @@ Vue.use(Router)
 // import Layout from '@/layout'
 import routesOne from './routes/routes-file-one'
 import routesTwo from './routes/routes-file-two'
+import routesThree from './routes/routes-file-three'
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -68,7 +69,8 @@ export const asyncRoutes = []
 routesPush(
   [
     ...routesOne,
-    ...routesTwo
+    ...routesTwo,
+    ...routesThree
   ],
   asyncRoutes
 )

src/router/routes/routes-file-three.js

@@ -0,0 +1,49 @@
+import Layout from '@/layout'
+const integrationRoutes = {
+  path: '/',
+  component: Layout,
+  redirect: "/integration",
+  children: [
+    {
+      path: '/integration',
+      component: () => import('@/views/dataIntegration/index.vue'),
+      meta: { title: '数据整合', icon: 'dataParser', imgstyle: 'ic_list_nav_search_default.png', imgstyleup: 'ic_list_nav_search_check.png' },
+      children: [
+        {
+          path: '/integration',
+          name: 'integration',
+          component: {
+            render(c) {
+              return c('router-view')
+            }
+          },
+          meta: { title: '数据整合' },
+          children: [
+            {
+              path: '/integration',
+              name: 'integrationHome',
+              component: () => import('@/views/dataIntegration/views/integrationHome.vue')
+            },
+            {
+              path: '/integration/interfaceEdit',
+              name: 'InterfaceEdit',
+              component: () => import('@/views/dataIntegration/views/interfaceEdit'),
+              meta: { title: '编辑接口' }
+            },
+            {
+              path: '/integration/interfaceLog',
+              name: 'InterfaceLog',
+              component: () => import('@/views/dataIntegration/views/interfaceLog'),
+              meta: { title: '日志查询' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+
+export default [
+  integrationRoutes
+]

src/views/dataIntegration/index.vue

@@ -0,0 +1,20 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-24 09:53:07
+ * @LastEditTime: 2022-03-24 18:21:39
+ * @LastEditors: your name
+ * @Description: 数据整合
+ * have a nice day!
+-->
+
+<template>
+  <div class="data-integration">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-integration {
+  position: relative;
+}
+</style>

src/views/dataIntegration/views/graphChart.vue

@@ -0,0 +1,631 @@
+<template>
+  <div class="integration__cont__map__cont" id="map"></div>
+</template>
+
+<script>
+//默认节点
+const defaultImg = 'image://' + require('@/assets/integr/jiekou_blue.png');
+
+//默认节点-错误
+const defaultImgError = 'image://' + require('@/assets/integr/jiekou_red.png');
+
+//拉取节点
+const pullImg = 'image://' + require('@/assets/integr/pull_blue.png');
+
+//拉取节点-错误
+const pullImgError = 'image://' + require('@/assets/integr/pull_red.png');
+
+//kafka节点
+const kafkaImg = 'image://' + require('@/assets/integr/kafka_blue.png');
+
+//kafka节点-错误
+const kafkaImgError = 'image://' + require('@/assets/integr/kafka_red.png');
+
+//推送节点
+const pushImg = 'image://' + require('@/assets/integr/push_blue.png');
+
+//推送节点-错误
+const pushImgError = 'image://' + require('@/assets/integr/push_red.png');
+
+//存储节点
+const saveImg = 'image://' + require('@/assets/integr/save_blue.png');
+
+//存储节点-错误
+const saveImgError = 'image://' + require('@/assets/integr/save_red.png');
+
+//存储节点
+const mysqlImg = 'image://' + require('@/assets/integr/mysql_blue.png');
+
+//存储节点-错误
+const mysqlImgError = 'image://' + require('@/assets/integr/mysql_red.png');
+
+// 节点数据
+export default {
+  name: '',
+  data () {
+    return {
+      myChart: null,
+      desc: 300, // 防抖时间
+      nodeDataList: [
+        {
+          name: "首都机场BHS",
+          linkTargetName: '首都机场边缘节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 250],
+          draggable: false,
+          fixed: true,
+          symbol: defaultImg,
+          symbolSize: 30
+        }, {
+          name: "星盟SBH",
+          linkTargetName: '国航主动拉取节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 220],
+          draggable: false,
+          fixed: true,
+          symbol: defaultImg,
+          symbolSize: 30
+        }, {
+          name: "局方公共平台",
+          linkTargetName: '国航主动拉取节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 190],
+          draggable: false,
+          symbol: defaultImgError,
+          symbolSize: 30
+        },
+        {
+          name: "离港高频",
+          linkTargetName: '国航主动拉取节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 160],
+          draggable: false,
+          symbol: defaultImg,
+          symbolSize: 30
+        },
+        {
+          name: "WT",
+          linkTargetName: '国航主动拉取节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 130],
+          draggable: false,
+          symbol: defaultImg,
+          symbolSize: 30
+        },
+        {
+          name: "特殊及异常行李",
+          linkTargetName: '国航主动拉取节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 100],
+          draggable: false,
+          symbol: defaultImg,
+          symbolSize: 30
+        },
+        {
+          name: "SCS",
+          linkTargetName: '国航被动接收节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 70],
+          draggable: false,
+          symbol: defaultImg,
+          symbolSize: 30
+        },
+        {
+          name: "ERP",
+          linkTargetName: '国航被动接收节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 40],
+          draggable: false,
+          symbol: defaultImg,
+          symbolSize: 30
+        },
+        {
+          name: "服务质量",
+          linkTargetName: '国航被动接收节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '0',
+          },
+          value: [10, 10],
+          draggable: false,
+          symbol: defaultImg,
+          symbolSize: 30
+        },
+        //节点B,C,D ....n
+        {
+          name: "首都机场边缘节点",
+          linkTargetName: '国航主动拉取节点',
+          linkValue: ' ',
+          coordConfig: {
+            level: '1',
+          },
+          symbol: pullImg,
+          symbolSize: 60,
+          draggable: false,
+          value: [40, 245]
+        }, {
+          name: "国航主动拉取节点",
+          linkTargetName: 'Kafka',
+          linkValue: ' ',
+          coordConfig: {
+            level: '2',
+          },
+          symbol: pullImg,
+          symbolSize: 60,
+          draggable: false,
+          value: [80, 180]
+        }, {
+          name: "国航被动接收节点",
+          linkTargetName: 'Kafka',
+          linkValue: ' ',
+          coordConfig: {
+            level: '2',
+          },
+          symbol: pullImg,
+          symbolSize: 60,
+          draggable: false,
+          value: [80, 100]
+        }, {
+          name: "Kafka",
+          linkTargetName: 'BSM',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 60,
+          symbol: kafkaImg,
+          draggable: false,
+          value: [120, 140],
+        },
+        {
+          name: "Kafka ",
+          linkTargetName: 'BPM',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 60,
+          symbol: kafkaImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [120, 140],
+        },
+        {
+          name: "Kafka  ",
+          linkTargetName: '航班',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 60,
+          symbol: kafkaImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [120, 140],
+        },
+        {
+          name: "Kafka   ",
+          linkTargetName: '行李投诉',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 60,
+          symbol: kafkaImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [120, 140],
+        },
+        {
+          name: "Kafka    ",
+          linkTargetName: '旅客',
+          linkValue: ' ',
+          coordConfig: { level: '3' },
+          symbolSize: 60,
+          symbol: kafkaImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [120, 140],
+        },
+        {
+          name: "BSM",
+          linkTargetName: '解析服务',
+          linkValue: ' ',
+          coordConfig: { level: '4' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [160, 180]
+        },
+        {
+          name: "BPM",
+          linkTargetName: '推送节点',
+          linkValue: ' ',
+          coordConfig: { level: '4' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [160, 150]
+        },
+        {
+          name: "航班",
+          linkTargetName: '解析服务',
+          linkValue: ' ',
+          coordConfig: { level: '4' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [160, 120]
+        },
+        {
+          name: "行李投诉",
+          linkTargetName: '解析服务',
+          linkValue: ' ',
+          coordConfig: { level: '4' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [160, 90]
+        },
+        {
+          name: "旅客",
+          linkTargetName: '解析服务',
+          linkValue: ' ',
+          coordConfig: { level: '4' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [160, 60]
+        },
+        {
+          name: "推送节点",
+          linkTargetName: '首都机场BHS ',
+          linkValue: ' ',
+          coordConfig: { level: '5' },
+          symbolSize: 60,
+          symbol: pushImg,
+          draggable: false,
+          value: [200, 160]
+        },
+        {
+          name: "推送节点 ",
+          linkTargetName: '星盟SBH ',
+          linkValue: ' ',
+          coordConfig: { level: '5' },
+          symbolSize: 60,
+          symbol: pushImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [200, 160]
+        },
+        {
+          name: "推送节点  ",
+          linkTargetName: '局方公共平台 ',
+          linkValue: ' ',
+          coordConfig: { level: '5' },
+          symbolSize: 60,
+          symbol: pushImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [200, 160]
+        },
+        {
+          name: "推送节点   ",
+          linkTargetName: '行李推送事件',
+          linkValue: ' ',
+          coordConfig: { level: '5' },
+          symbolSize: 60,
+          symbol: pushImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [200, 160]
+        },
+        {
+          name: "推送节点    ",
+          linkTargetName: 'ES',
+          linkValue: ' ',
+          coordConfig: { level: '5' },
+          symbolSize: 60,
+          symbol: pushImg,
+          draggable: false,
+          label: {
+            show: false
+          },
+          value: [200, 160]
+        },
+        {
+          name: "解析服务",
+          linkTargetName: ' Kafka',
+          linkValue: ' ',
+          coordConfig: { level: '5' },
+          symbolSize: 60,
+          symbol: pushImg,
+          draggable: false,
+          value: [200, 100]
+        },
+        {
+          name: "首都机场BHS ",
+          linkTargetName: '首都机场BHS ',
+          linkValue: ' ',
+          coordConfig: { level: '6' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [240, 220]
+        },
+        {
+          name: "星盟SBH ",
+          linkTargetName: '星盟SBH ',
+          linkValue: ' ',
+          coordConfig: { level: '6' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [240, 190]
+        },
+        {
+          name: "局方公共平台 ",
+          linkTargetName: '局方公共平台 ',
+          linkValue: ' ',
+          coordConfig: { level: '6' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [240, 160]
+        },
+        {
+          name: "行李推送事件",
+          linkTargetName: '行李推送事件',
+          linkValue: ' ',
+          coordConfig: { level: '6' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [240, 130]
+        },
+        {
+          name: "ES",
+          linkTargetName: 'ES',
+          linkValue: ' ',
+          coordConfig: { level: '6' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [240, 100]
+        },
+        {
+          name: " Kafka",
+          linkTargetName: '存储服务',
+          linkValue: ' ',
+          coordConfig: { level: '6' },
+          symbolSize: 30,
+          symbol: defaultImg,
+          draggable: false,
+          value: [240, 70]
+        },
+        {
+          name: "存储服务",
+          linkTargetName: 'Mysql',
+          linkValue: ' ',
+          coordConfig: { level: '7' },
+          symbolSize: 60,
+          symbol: saveImg,
+          draggable: false,
+          value: [280, 160]
+        },
+        {
+          name: "Mysql",
+          linkTargetName: 'Mysql',
+          linkValue: ' ',
+          coordConfig: { level: '8' },
+          symbolSize: 60,
+          symbol: mysqlImg,
+          draggable: false,
+          value: [340, 160]
+        },
+      ],
+      options: {
+        itemStyle: {
+          normal: {
+            color: "#67C23A",
+          },
+          shadowBlur: 0
+        },
+        textStyle: {
+          color: '#444',
+          fontSize: 16,
+          fontWeight: 600,
+        },
+        grid: {
+          top: 20,
+          bottom: 10,
+          left: 0,
+          right: 0
+        },
+        legend: [{
+          formatter: function (name) {
+            return this.$echarts.format.truncateText(name, 200, '12px', '…');
+          },
+          tooltip: {
+            show: true
+          },
+          selectedMode: 'false',
+          bottom: 20,
+        }],
+        animationDuration: 500,
+        animationEasingUpdate: 'quinticInOut',
+        xAxis: {
+          show: false,
+          type: 'value'
+        },
+        yAxis: {
+          show: false,
+          type: 'value'
+        },
+        series: [{
+          type: 'graph',
+          coordinateSystem: 'cartesian2d',
+          //圆形上面的文字	
+          label: {
+            normal: {
+              position: "bottom",
+              show: true,
+              textStyle: {
+                fontSize: 12
+              },
+            }
+          },
+          itemStyle: {
+            normal: {
+              color: "#409eff",
+            },
+            shadowBlur: 0
+          },
+          lineStyle: {
+            normal: {
+              width: 0,
+              shadowColor: 'none',
+              color: '#ff0000'
+            }
+          },
+          data: [],
+          links: []
+        }]
+      }
+    }
+  },
+  watch: {
+    // 监听数据变化 重绘图形
+    options: {
+      handler (obj) {
+        // 生成柱状图
+        this.myChart.setOption(obj)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    const datas = []
+    this.nodeDataList.map(item => {
+      datas.push({
+        source: item.name,
+        value: item.linkValue,
+        target: item.linkTargetName
+      })
+    })
+    this.options.series[0].data = this.nodeDataList
+    this.options.series[0].links = datas
+    this.options.series = this.options.series.concat(this.getCoordDataList())
+    this.myChart = this.$echarts.init(document.getElementById('map'))
+    this.myChart.setOption(this.options)
+    // 事件
+    this.myChart.on('click', params => {
+      console.log(params)
+    })
+    // 监听页面缩放 防止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()
+      }
+    },
+    getCoordDataList () {
+      let coorDataDict = {}
+      let defaultConfig = {
+        type: 'lines', //块1,2...n到节点A,B...N
+        coordinateSystem: 'cartesian2d',
+        // animationDelay: 10000,
+        z: 1,
+        effect: {
+          show: true,
+          smooth: true,
+          trailLength: 0,
+          symbol: "arrow",
+          color: '#92A7D5',
+          symbolSize: 10,
+          period: 3,
+          delay: 1500,
+          loop: true,
+        },
+        lineStyle: {
+          normal: {
+            curveness: 0,
+            color: '#92A7D5',
+            width: 1,
+          }
+        },
+        data: []
+      }
+      this.nodeDataList.map(item => {
+        if (item.coordConfig !== undefined) {
+          if (!(item.coordConfig.level in coorDataDict)) {
+            let coorConfig = JSON.parse(JSON.stringify(defaultConfig))
+            if (item.coordConfig.lineStyle !== undefined) {
+              coorConfig.lineStyle = item.coordConfig.lineStyle
+            }
+            if (item.coordConfig.effect !== undefined) {
+              coorConfig.effect = item.coordConfig.effect
+            }
+            coorDataDict[item.coordConfig.level] = coorConfig
+          }
+
+          let coordData = [
+            item.value,
+            this.nodeDataList.filter(i => i.name == item.linkTargetName)[0].value || this.nodeDataList.filter(i => i.name == item.linkTargetName)[1].value
+          ]
+          coorDataDict[item.coordConfig.level].data.push({
+            coords: coordData
+          })
+          if (item.coordConfig.bilateral) {
+            coorDataDict[item.coordConfig.level].data.push({
+              coords: coordData.reverse()
+            })
+          }
+        }
+
+      })
+      return Object.values(coorDataDict)
+    }
+  }
+}
+</script>

src/views/dataIntegration/views/integrationHome.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="integration">
+    <div class="integration__head flex">
+      <div class="flex-wrap integration__head__uls">
+        <div class="list">
+          <el-select v-model="total" size="small" clearable placeholder="全部接口">
+            <el-option v-for="item in totalData" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="list">
+          <el-select v-model="source" size="small" clearable placeholder="源数据">
+            <el-option v-for="item in sourceData" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="list">
+          <el-select v-model="target" size="small" clearable placeholder="目标数据">
+            <el-option v-for="item in targetData" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="integration__head__btns flex-wrap">
+        <el-button style="padding:0;border: 0;" size="small">
+          <router-link to="/integration/interfaceLog">
+            <img src="../../../assets/integr/ic_warning.png" alt="" srcset="">
+          </router-link>
+        </el-button>
+        <el-button size="small" type="primary" @click="handleButtonClick(1)">新增接口</el-button>
+        <el-button size="small" type="primary">新增源数据</el-button>
+        <el-button size="small" type="primary">新增目标数据</el-button>
+      </div>
+    </div>
+    <div class="integration__cont">
+      <div class="integration__cont__map">
+        <div v-if="flag" class="integration__cont__map__box">
+          <div class="acquisitionError">
+            <span class="icon"></span>
+            <span class="txt">采集错误</span>
+          </div>
+          <div class="parsingError">
+            <span class="icon"></span>
+            <span class="txt">解析错误</span>
+          </div>
+          <div class="saveError">
+            <span class="icon"></span>
+            <span class="txt">存储错误</span>
+          </div>
+        </div>
+        <!--桑葚图-->
+        <sankey-chart v-if="flag" />
+        <graph-chart v-else />
+      </div>
+    </div>
+  </div>
+</template>
+{
+<script>
+import sankeyChart from './sankeyChart.vue'
+import graphChart from './graphChart.vue'
+export default {
+  name: 'Integration',
+  components: { sankeyChart, graphChart },
+  data () {
+    return {
+      totalData: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }],
+      sourceData: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }],
+      targetData: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }],
+      total: '',
+      source: '',
+      target: '',
+      flag: false
+    }
+  },
+  methods: {
+    handleButtonClick (num) {
+      switch (num) {
+        case 1:
+          this.$router.push('/integration/interfaceEdit')
+          break
+        default:
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.integration {
+  padding: 16px 46px 24px 24px;
+  &__head {
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 16px;
+    &__uls {
+      .list {
+        width: 144px;
+        margin-right: 8px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  &__cont {
+    height: calc(100vh - 170px);
+    &__map {
+      height: 100%;
+      padding: 24px;
+      background-color: #fff;
+      border-radius: 4px;
+      &__box {
+        position: relative;
+        height: 40px;
+        > div {
+          position: absolute;
+          .icon {
+            width: 20px;
+            height: 20px;
+            background-color: red;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 5px;
+          }
+          .txt {
+            font-size: 18px;
+            font-weight: 800;
+            color: #666666;
+            margin-top: -2px;
+          }
+        }
+        .acquisitionError {
+          left: 24.7%;
+        }
+        .parsingError {
+          left: 61.8%;
+        }
+        .saveError {
+          left: 86.4%;
+        }
+      }
+      &__cont {
+        height: calc(100% - 50px);
+      }
+    }
+  }
+}
+</style>

src/views/dataIntegration/views/interfaceEdit.vue

@@ -0,0 +1,450 @@
+<!--
+ * @Author: Badguy
+ * @Date: 2022-03-24 09:55:13
+ * @LastEditTime: 2022-03-24 18:13:32
+ * @LastEditors: your name
+ * @Description: 数据整合-编辑接口
+ * have a nice day!
+-->
+
+<template>
+  <div class="interface-edit">
+    <el-container class="scrollbar">
+      <el-container>
+        <el-main class="part part1">
+          <el-form
+            ref="form"
+            :model="formData"
+            class="form"
+            label-position="right"
+            label-width="132px"
+          >
+            <div class="header">
+              <span class="title">编辑接口</span>
+              <el-form-item label="是否启用">
+                <el-radio-group v-model="formData.active">
+                  <el-radio label="1">是</el-radio>
+                  <el-radio label="0">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  size="small"
+                >保存</el-button>
+              </el-form-item>
+            </div>
+            <div class="main">
+              <el-form-item
+                label="名称"
+                prop="name"
+              >
+                <el-input
+                  v-model="formData.name"
+                  width="224px"
+                  placeholder="请输入名称"
+                  size="small"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item
+                label="描述"
+                prop="desc"
+              >
+                <el-input
+                  v-model="formData.desc"
+                  placeholder="请输入描述"
+                  type="textarea"
+                  :auto-size="{ minRows: 2 }"
+                  clearable
+                />
+              </el-form-item>
+              <el-row>
+                <el-col :span="8">
+                  <el-form-item label="接口类型">
+                    <el-select
+                      v-model="formData.type"
+                      size="small"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="{ value, label } in formOptions.type"
+                        :key="value"
+                        :value="value"
+                        :label="label"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="接口协议">
+                    <el-select
+                      v-model="formData.protocol"
+                      size="small"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="{ value, label } in formOptions.protocol"
+                        :key="value"
+                        :value="value"
+                        :label="label"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-form-item
+                label="详细配置"
+                prop="options"
+              >
+                <el-input
+                  v-model="formData.options"
+                  placeholder="请输入详细配置"
+                  type="textarea"
+                  :auto-size="{ minRows: 2 }"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="是否开启本地缓存">
+                <el-radio-group v-model="formData.cache">
+                  <el-radio label="1">是</el-radio>
+                  <el-radio label="0">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="目标数据类型">
+                <el-select
+                  v-model="formData.dataType"
+                  size="small"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="{ value, label } in formOptions.dataType"
+                    :key="value"
+                    :value="value"
+                    :label="label"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                label="目标数据配置"
+                prop="dataOptions"
+              >
+                <el-input
+                  v-model="formData.dataOptions"
+                  placeholder="请输入目标数据配置"
+                  type="textarea"
+                  :auto-size="{ minRows: 2 }"
+                  clearable
+                />
+              </el-form-item>
+            </div>
+          </el-form>
+        </el-main>
+        <el-aside
+          class="part part2"
+          width="502px"
+        >
+          <div class="header">
+            <span class="title">节点管理</span>
+            <el-button
+              class="button-white"
+              size="small"
+            >新增</el-button>
+          </div>
+          <div class="main">
+            <el-row :gutter="22">
+              <el-col
+                v-for="node in nodeList"
+                :key="node.id"
+                :span="12"
+              >
+                <div class="interface-edit-card">
+                  <div class="card-button-close">
+                    <i class="el-icon-close" />
+                  </div>
+                  <div class="card-header">
+                    <span>{{ node.nodeName }}</span>
+                    <el-checkbox v-model="node.isChecked" />
+                  </div>
+                  <div class="card-main">
+                    <span>{{ node.IPAddr }}</span>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-aside>
+      </el-container>
+      <el-footer
+        class="part part3"
+        height="360px"
+      >
+        <div class="header">
+          <span class="title">源数据管理</span>
+          <el-button
+            class="button-white"
+            size="small"
+          >新增</el-button>
+        </div>
+        <div class="main">
+          <el-row :gutter="20">
+            <el-col
+              v-for="source in sourceList"
+              :key="source.id"
+              :span="4"
+            >
+              <div class="interface-edit-card">
+                <div class="card-button-close">
+                  <i class="el-icon-close" />
+                </div>
+                <div class="card-header">
+                  <span>{{ source.sourceName }}</span>
+                  <el-checkbox v-model="source.isChecked" />
+                </div>
+                <div class="card-main">
+                  <span>{{ source.desc }}</span>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formData: {
+        active: '1',
+        name: '',
+        desc: '',
+        type: '',
+        protocol: '',
+        options: '',
+        cache: '1',
+        dataType: '',
+        dataOptions: ''
+      },
+      formOptions: {
+        type: [
+          {
+            value: '1',
+            label: '主动拉取'
+          },
+          {
+            value: '2',
+            label: '自动拉取'
+          }
+        ],
+        protocol: [
+          {
+            value: 'IBMMQ',
+            label: 'IBMMQ'
+          },
+          {
+            value: 'http',
+            label: 'http'
+          }
+        ],
+        dataType: [
+          {
+            value: 'kafka',
+            label: 'kafka'
+          },
+          {
+            value: 'MQ',
+            label: 'MQ'
+          }
+        ]
+      },
+      nodeList: [
+        {
+          id: 0,
+          nodeName: '首都机场BHS',
+          IPAddr: '192.168.1.1',
+          isChecked: false
+        },
+        {
+          id: 1,
+          nodeName: '主采集节点',
+          IPAddr: '10.12.13.112',
+          isChecked: true
+        },
+        {
+          id: 2,
+          nodeName: '备用采集节点',
+          IPAddr: '10.12.13.112',
+          isChecked: true
+        }
+      ],
+      checkedNodeList: [],
+      sourceList: [
+        {
+          id: 0,
+          sourceName: 'BSM',
+          desc: '行李源报文',
+          isChecked: true
+        },
+        {
+          id: 1,
+          sourceName: 'BPM',
+          desc: '行李处理报文',
+          isChecked: true
+        },
+        {
+          id: 2,
+          sourceName: '航班动态',
+          desc: '国航全球航班计划及航班动态信息',
+          isChecked: false
+        }
+      ],
+      sourceCheckedList: []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.interface-edit {
+  padding: 16px 0 8px;
+  overflow: hidden;
+  > .scrollbar {
+    padding: 0 24px;
+    height: calc(100vh - 104px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    ::v-deep .part {
+      background: #ffffff;
+      padding: 24px 33px 20px 24px;
+      .header {
+        display: flex;
+        justify-content: space-between;
+        .title {
+          flex: 1;
+          position: relative;
+          padding-left: 16px;
+          height: 20px;
+          line-height: 32px;
+          font-size: 20px;
+          font-weight: bold;
+          &::before {
+            content: '';
+            position: absolute;
+            width: 4px;
+            height: 20px;
+            background: #2d67e3;
+            top: 6px;
+            left: 0;
+          }
+        }
+        button {
+          width: 64px;
+          height: 32px;
+          &.button-white {
+            background: #ffffff;
+            border: 1px solid #92ace2;
+            color: #2d67e3;
+          }
+        }
+      }
+      label,
+      span,
+      button,
+      input,
+      optgroup,
+      select,
+      textarea {
+        font-family: Helvetica, 'Microsoft YaHei';
+        font-size: 14px;
+      }
+      label {
+        color: #303133;
+      }
+      input {
+        color: #101116;
+      }
+      .el-radio {
+        font-weight: 400;
+      }
+      .interface-edit-card {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 16px 14px 16px 16px;
+        background: #f5f7fa;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        position: relative;
+        font-family: Helvetica, 'Microsoft YaHei';
+        .card-button-close {
+          position: absolute;
+          top: -12px;
+          right: -12px;
+          z-index: 10;
+          width: 24px;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          background: #000000;
+          opacity: 0.8;
+          border-radius: 50%;
+          color: #ffffff;
+          cursor: pointer;
+        }
+        .card-header {
+          display: flex;
+          justify-content: space-between;
+          color: #101116;
+          font-weight: bold;
+          font-size: 14px;
+        }
+        .card-main {
+          color: #afb4bf;
+          font-size: 12px;
+        }
+      }
+      &.part1 {
+        .header {
+          .el-form-item {
+            .el-form-item__label {
+              line-height: 34px;
+            }
+            .el-form-item__content {
+              height: 32px;
+              line-height: 32px;
+            }
+          }
+        }
+        .main {
+          span {
+            line-height: 32px;
+          }
+        }
+      }
+    }
+    .part2 {
+      margin-left: 16px;
+      .main {
+        margin-top: 4px;
+        .interface-edit-card {
+          margin-top: 20px;
+          height: 104px;
+        }
+      }
+    }
+    .part3 {
+      margin-top: 16px;
+      .main {
+        margin-top: 4px;
+        .interface-edit-card {
+          margin-top: 20px;
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataIntegration/views/interfaceLog.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="interfaceLog">
+    <div class="interfaceLog_head flex">
+      <div class="interfaceLog_head_time flex-wrap">
+        <div class="interfaceLog_head_time_start mr10">
+          <el-date-picker v-model="timeStart" size="small" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
+          </el-date-picker>
+        </div>
+        <div class="interfaceLog_head_time_end">
+          <el-date-picker v-model="timeEnd" size="small" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="interfaceLog_head_btn">
+        <Search @getSearchData="getSearchData" :isTitle="false" @clearSearchData="clearSearchData" />
+      </div>
+    </div>
+    <div class="interfaceLog_content">
+      <el-table :data="tableData" class="table" border style="width: 100%">
+        <el-table-column prop="action" label="动作">
+        </el-table-column>
+        <el-table-column prop="dataNumber" label="数据编号">
+        </el-table-column>
+        <el-table-column prop="sourceDataNumber" label="源数据编号">
+        </el-table-column>
+        <el-table-column prop="time" label="发生时间">
+        </el-table-column>
+        <el-table-column label="结果">
+          <template slot-scope="scope">
+            <span :class="scope.row.result ? 'success' : 'error'">{{scope.row.result ? '成功' : '出错'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="details" label="详情">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from "@/layout/components/Search";
+export default {
+  name: 'InterfaceLog',
+  components: { Search },
+  data () {
+    return {
+      timeStart: '',
+      timeEnd: '',
+      tableData: []
+    }
+  },
+  created () {
+    for (let i = 0; i < 10; i++) {
+      const element = {
+        action: '采集',
+        dataNumber: '000120220307201211011201',
+        sourceDataNumber: 'BSM',
+        time: '2022-03-07 20:00:12',
+        result: i % 2 == 0 ? true : false,
+        details: '数据格式不正确'
+      };
+      this.tableData.push(element)
+    }
+  },
+  mounted () {
+    document.querySelector('.interfaceLog_head_time_start .el-input__prefix i').remove()
+    document.querySelector('.interfaceLog_head_time_start .el-input__prefix').innerHTML = '开始：'
+    document.querySelector('.interfaceLog_head_time_end .el-input__prefix i').remove()
+    document.querySelector('.interfaceLog_head_time_end .el-input__prefix').innerHTML = '结束：'
+  },
+  methods: {
+    getSearchData (val) {
+      console.log(val)
+    },
+    clearSearchData () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.interfaceLog {
+  padding: 16px 46px 24px 24px;
+  .mr10 {
+    margin-right: 10px;
+  }
+  ::v-deep .interfaceLog_head_time {
+    .el-input__prefix {
+      left: 10px;
+      color: #101116;
+      top: 10px;
+    }
+    .el-input--prefix .el-input__inner {
+      padding-left: 50px;
+    }
+  }
+  .interfaceLog_head_btn {
+    .btn {
+      margin-right: 0;
+    }
+  }
+  .interfaceLog_content {
+    margin-top: 8px;
+    ::v-deep .table {
+      color: #101116;
+      thead {
+        color: #101116;
+      }
+      .success {
+        color: #33bf47;
+      }
+      .error {
+        color: #df4545;
+      }
+    }
+  }
+}
+</style>

src/views/dataIntegration/views/sankeyChart.vue

@@ -0,0 +1,674 @@
+<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>