From 17d7c39b48a0542438f517b4e4b950f16b30cfbd Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Wed, 23 Aug 2023 17:36:22 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-3083=20fix=EF=BC=9Alegend=E5=88=92=E8=BF=87?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=A4=8D=E5=88=B6=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/components/chart/chart.scss    | 20 +++++++++++++---
 .../chart/chart/chartTimeSeries.vue           | 23 ++++++++++++-------
 .../src/components/chart/chart/legend.vue     | 13 +++++++++--
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 6e0fb1ab6..5a318301d 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -396,8 +396,8 @@
   box-sizing: border-box;
 
   .legend-item {
+    padding: 0 8px;
     white-space: nowrap;
-    margin-right: 10px;
     cursor: pointer;
     display: inline-block;
     line-height: 20px;
@@ -406,16 +406,27 @@
   .legend-item, .legend--table-row {
     &.legend-item--inactive, &.row--inactive {
       color: $--color-text-secondary;
-
       .legend-shape {
         background-color: $--background-color-1 !important;
       }
-
       .nz-icon{
         color: $--background-color-1 !important;
       }
     }
   }
+  .nz-icon-override{
+    visibility: hidden;
+    font-size: 15px;
+    margin-left: 5px;
+    vertical-align: middle;
+  }
+  .legend-item:hover {
+    background-color: $--background-color-1;
+    cursor: pointer;
+    .nz-icon-override{
+      visibility: visible;
+    }
+  }
 
   // 表格类型
   .legend--table {
@@ -429,6 +440,9 @@
     .legend--table-row:not(:first-of-type):hover {
       background-color: $--background-color-1;
       cursor: pointer;
+      .nz-icon-override{
+        visibility: visible;
+      }
     }
     .legend--table-row:first-of-type {
       color:#33a2e5;
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index d173506c5..ed87f0cc7 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -721,15 +721,22 @@ export default {
       if (this.isConnect !== 'none') {
         echarts.disconnect('timeSeriesGroup')
       }
-      const index = this.tooltip.clickIndex
-      getChart(this.chartId).dispatchAction({
-        type: 'legendInverseSelect'
+
+      this.legends.forEach((item, index) => {
+        if (index == this.tooltip.clickIndex) {
+          getChart(this.chartId).dispatchAction({
+            type: 'legendSelect',
+            name: item.name
+          })
+        } else {
+          getChart(this.chartId).dispatchAction({
+            type: 'legendUnSelect',
+            name: item.name
+          })
+        }
       })
-      getChart(this.chartId).dispatchAction({
-        type: 'legendSelect',
-        name: this.legends[index].name
-      })
-      this.isGrey = this.isGrey.map((g, i) => i !== index)
+
+      this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex)
       this.$refs.legend.isGrey = this.isGrey
       if (this.isConnect !== 'none') {
         echarts.disconnect('timeSeriesGroup')
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index a183e22f0..2d811b924 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -25,6 +25,7 @@
             <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
             <span v-else :style="{background: item.color}" class="legend-shape"></span>
             <span>{{item.alias ? item.alias : item.name}}</span>
+            <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
           </div>
           <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
         </div>
@@ -43,6 +44,7 @@
             <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
             <span v-else :style="{background: item.color}" class="legend-shape"></span>
             <span>{{item.alias ? item.alias : item.name}}</span>
+            <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
           </div>
           <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
         </div>
@@ -65,6 +67,7 @@
         <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
         <span v-else :style="{background: item.color}" class="legend-shape"></span>
         <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
+        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
       </div>
       <!-- 右y轴legend -->
       <div
@@ -81,6 +84,7 @@
         <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
         <span v-else :style="{background: item.color}" class="legend-shape"></span>
         <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
+        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
       </div>
     </template>
   </div>
@@ -123,6 +127,11 @@ export default {
     }
   },
   methods: {
+    onCopy (txt) {
+      this.$copyText(txt).then(() => {
+        this.$message.success({ message: this.$t('overall.copySuccess') })
+      })
+    },
     clickLegend (legendName, index) {
       /* 点击legend
           * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
@@ -238,13 +247,13 @@ export default {
     },
     hoverLegend (legendName, index, type) {
       if (this.isTimeSeries) {
-        getChart(this.chartId).dispatchAction({
+        getChart(this.chartId) && getChart(this.chartId).dispatchAction({
           type: type,
           seriesIndex: index,
           name: legendName
         })
       } else {
-        getChart(this.chartId).dispatchAction({
+        getChart(this.chartId) && getChart(this.chartId).dispatchAction({
           type: type,
           name: legendName
         })