From 254fa3d5b65cd469de2728ac395553fe727a342e Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Fri, 8 Oct 2021 21:09:51 +0800
Subject: [PATCH] =?UTF-8?q?CN-141=20feat:=20=E6=A1=91=E5=9F=BA=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/chart-options.js |   3 +
 src/views/charts/Chart.vue             | 232 ++++++++++++++++++++++++-
 2 files changed, 234 insertions(+), 1 deletion(-)

diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index 6c14e628..3ff23a66 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -404,6 +404,9 @@ const sankey = {
       type: 'sankey',
       data: [],
       links: [],
+      right: '5%',
+      top: 50,
+      bottom: 100,
       levels: [
         {
           depth: 0,
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 2525388b..095b5e28 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -172,6 +172,14 @@
           </div>
         </div>
       </template>
+      <template v-else-if="isSankey">
+        <div class="sankey-box">
+          <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+          <div class="sankey__label" style="left: 5%;">{{$t('entities.inboundLinkId')}}</div>
+          <div class="sankey__label" style="left: 50%;">{{entity.ip || entity.domain || entity.app}}</div>
+          <div class="sankey__label" style="right: 5%; transform: translateX(50%)">{{$t('entities.outboundLinkId')}}</div>
+        </div>
+      </template>
       <div v-else class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
     </template>
     <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1">
@@ -1162,7 +1170,177 @@ export default {
       }
     },
     initSankey (chartParams) {
-
+      const vm = this
+      const entityName = this.entity.ip || this.entity.domain || this.entity.app
+      this.chartOption.series[0].tooltip = {
+        formatter: function ({ name }) {
+          return `
+            <div class="sankey__tooltip">
+              <div class="sankey__tooltip-row">
+                <div class="sankey__row-label">Via:</div>
+                <div class="sankey__row-value">1521</div>
+              </div>
+              <div class="sankey__tooltip-row">
+                <div class="sankey__row-label">To:</div>
+                <div class="sankey__row-value">21522</div>
+              </div>
+              <div class="sankey__tooltip-row">
+                <div style="margin: 6px 0; height: 1px; width: 100%; background-color: #E7EAED;"></div>
+              </div>
+              <div class="sankey__tooltip-row">
+                <div class="sankey__row-label">Traffic:</div>
+                <div class="sankey__row-value">150bps(8%)</div>
+              </div>
+              <div class="sankey__tooltip-row">
+                <div class="sankey__row-label">Performance:</div>
+              </div>
+              <div class="sankey__tooltip-table">
+                <div class="sankey__table-row">
+                  <div class="sankey__table-cell">${vm.$t('networkAppPerformance.tripTime')}:</div>
+                  <div class="sankey__table-cell">58ms</div>
+                </div>
+                <div class="sankey__table-row">
+                  <div class="sankey__table-cell">${vm.$t('overall.packetLoss')}:</div>
+                  <div class="sankey__table-cell">5%</div>
+                </div>
+                <div class="sankey__table-row">
+                  <div class="sankey__table-cell">${vm.$t('overall.packetRetrans')}:</div>
+                  <div class="sankey__table-cell">58%</div>
+                </div>
+              </div>
+            </div>
+          `
+        }
+      }
+      this.chartOption.series[0].data = [
+        {
+          name: '1521'
+        },
+        {
+          name: '2714'
+        },
+        {
+          name: entityName,
+          label: {
+            show: false
+          }
+        },
+        {
+          name: '21521'
+        },
+        {
+          name: '22714'
+        },
+        {
+          name: '29047'
+        },
+        {
+          name: '21522'
+        },
+        {
+          name: '22715'
+        },
+        {
+          name: '29048'
+        },
+        {
+          name: '121521'
+        },
+        {
+          name: '122714'
+        },
+        {
+          name: '129047'
+        },
+        {
+          name: '121522'
+        },
+        {
+          name: '122715'
+        },
+        {
+          name: '129048'
+        }
+      ]
+      this.chartOption.series[0].links = [
+        {
+          source: '1521',
+          target: entityName,
+          value: 6779
+        },
+        {
+          source: '2714',
+          target: entityName,
+          value: 4417
+        },
+        {
+          source: entityName,
+          target: '21521',
+          value: 704
+        },
+        {
+          source: entityName,
+          target: '22714',
+          value: 55
+        },
+        {
+          source: entityName,
+          target: '29047',
+          value: 509
+        },
+        {
+          source: entityName,
+          target: '21522',
+          value: 3140
+        },
+        {
+          source: entityName,
+          target: '22715',
+          value: 550
+        },
+        {
+          source: entityName,
+          target: '29048',
+          value: 1290
+        },
+        {
+          source: entityName,
+          target: '121521',
+          value: 704
+        },
+        {
+          source: entityName,
+          target: '122714',
+          value: 55
+        },
+        {
+          source: entityName,
+          target: '129047',
+          value: 509
+        },
+        {
+          source: entityName,
+          target: '121522',
+          value: 2040
+        },
+        {
+          source: entityName,
+          target: '122715',
+          value: 550
+        },
+        {
+          source: entityName,
+          target: '129048',
+          value: 1090
+        }
+      ]
+      this.myChart.setOption(this.chartOption)
+      setTimeout(() => {
+        this.loading = false
+        this.$nextTick(() => {
+          this.echartsResize()
+        })
+      }, 250)
     },
     initIpOpenPort (chartParams) {
       get(replaceUrlPlaceholder(chartParams.url, { ip: this.entity.ip })).then(response => {
@@ -1758,4 +1936,56 @@ export default {
     }
   }
 }
+.sankey-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .sankey__label {
+    position: absolute;
+    color: #333;
+    bottom: 50px;
+    font-weight: bold;
+    transform: translateX(-50%);
+  }
+}
+.sankey__tooltip {
+  width: 270px;
+  height: 200px;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+
+  .sankey__tooltip-row {
+    display: flex;
+    padding: 2px 0;
+
+    .sankey__row-label {
+      flex: 0 0 98px;
+      color: #666;
+    }
+    .sankey__row-value {
+      flex: 1;
+      color: #333;
+    }
+  }
+
+  .sankey__tooltip-table {
+    padding: 2px 0 2px 22px;
+    display: table;
+
+    .sankey__table-row {
+      display: table-row;
+      padding: 1px 0 4px 0;
+
+      .sankey__table-cell {
+        display: table-cell;
+        font-size: 12px;
+        color: #333;
+      }
+      .sankey__table-cell:first-of-type {
+        color: #999;
+      }
+    }
+  }
+}
 </style>