From 817cea489842fd78da015840980efeee381f1d6c Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 24 May 2022 15:43:10 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=85=B3=E7=B3=BB=E5=9B=BE=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/charts/chartRelationShipList.scss   |  4 ++
 src/views/charts/charts/ChartRelationShip.vue | 43 +++++++++++++++++--
 src/views/charts/charts/options/sankey.js     |  2 +-
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/components/views/charts/chartRelationShipList.scss b/src/assets/css/components/views/charts/chartRelationShipList.scss
index 325df5c6..dd2c01e4 100644
--- a/src/assets/css/components/views/charts/chartRelationShipList.scss
+++ b/src/assets/css/components/views/charts/chartRelationShipList.scss
@@ -1,3 +1,6 @@
+.ship--show.ship {
+  visibility: visible;
+}
 .ship {
   width: 320px;
   background: #FFFFFF;
@@ -6,6 +9,7 @@
   border-radius: 3px;
   position: absolute;
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   .ship-title {
     display: flex;
diff --git a/src/views/charts/charts/ChartRelationShip.vue b/src/views/charts/charts/ChartRelationShip.vue
index d809858c..e08b338c 100644
--- a/src/views/charts/charts/ChartRelationShip.vue
+++ b/src/views/charts/charts/ChartRelationShip.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
-  <div class="ship" v-show="showList" v-ele-click-outside="shipChangeDown" id="ship">
+  <div class="ship" :class="{'ship--show': showList}" v-ele-click-outside="shipChangeDown" id="ship">
     <div class="ship-title">
       <div class="ship-title-symbol" v-if="entityData.tableData.symbol"><img :src="entityData.tableData.symbol" /></div>
       <div class="ship-title-name">{{ $_.get(entityData.tableData, 'name') || '-' }}</div>
@@ -188,7 +188,44 @@ export default {
       handleData(data, links, this.chartData)
       const _this = this
       let queryParams = {}
-      this.myChart.on('mouseover', function (params) {
+      this.myChart.on('click', function (params) {
+        this.tableName = params.data.name
+        setTimeout(() => {
+          div.style.left = params.event.event.offsetX + 'px'
+          if (dom.offsetHeight > (params.event.event.offsetY + div.offsetHeight)) {
+            div.style.top = params.event.event.offsetY + 'px'
+            div.style.bottom = ''
+          } else {
+            div.style.top = ''
+            div.style.bottom = '10px'
+          }
+          _this.showList = true
+        }, 300)
+
+        if (params.data.type === 'ip') {
+          queryParams = {
+            ip: params.data.name,
+            startTime: getSecond(_this.timeFilter.startTime),
+            endTime: getSecond(_this.timeFilter.endTime)
+          }
+          _this.queryEntityDetail(_this.relationShipIpUrl, params, queryParams)
+        } else if (params.data.type === 'app_name') {
+          queryParams = {
+            appName: params.data.name,
+            startTime: getSecond(_this.timeFilter.startTime),
+            endTime: getSecond(_this.timeFilter.endTime)
+          }
+          _this.queryEntityDetail(_this.relationShipAppUrl, params, queryParams)
+        } else if (params.data.type === 'domain') {
+          queryParams = {
+            domain: params.data.name,
+            startTime: getSecond(_this.timeFilter.startTime),
+            endTime: getSecond(_this.timeFilter.endTime)
+          }
+          _this.queryEntityDetail(_this.relationShipDomainUrl, params, queryParams)
+        }
+      })
+      /*this.myChart.on('mouseover', function (params) {
         this.tableName = params.data.name
         _this.timer = setTimeout(() => {
           _this.timers = setTimeout(() => {
@@ -228,7 +265,7 @@ export default {
       this.myChart.on('mouseout', function (params) {
         clearTimeout(_this.timer)
         clearTimeout(_this.timers)
-      })
+      })*/
       this.chartOption.series[0].data = data
       this.chartOption.series[0].links = links
       this.myChart.setOption(this.chartOption)
diff --git a/src/views/charts/charts/options/sankey.js b/src/views/charts/charts/options/sankey.js
index 791b5a7e..6666e674 100644
--- a/src/views/charts/charts/options/sankey.js
+++ b/src/views/charts/charts/options/sankey.js
@@ -57,7 +57,7 @@ export const relationShip = {
       force: {
         repulsion: 350
       },
-      draggable: true,
+      animation: false,
       label: { show: true },
       edgeSymbol: ['none', 'arrow'],
       edgeSymbolSize: 7,