From 36f0f5570c4305ce2816ad44969c610f25786220 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 22 Jul 2021 21:35:06 +0800
Subject: [PATCH] =?UTF-8?q?CN-65=20fix:=20statistics-legend=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/PieTable.vue         | 18 ++++++------
 src/components/charts/StatisticsLegend.vue | 16 ++++++++++-
 src/components/charts/chart-table-title.js | 32 +++++++++++-----------
 src/components/entities/EntityList.vue     | 10 +++----
 src/components/entities/LeftFilter.vue     |  2 +-
 src/views/charts/Chart.vue                 | 27 ++++++++++++++++--
 6 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index 1223ff93..bec659d3 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -117,7 +117,7 @@ export default {
       expandRowKeys: [],
       tableTitles: [
         {
-          label: this.$t('common.domain'),
+          label: this.$t('overall.domain'),
           prop: 'domain',
           width: '20%'
         },
@@ -127,44 +127,44 @@ export default {
           width: '22%'
         },
         {
-          label: this.$t('common.sessions'),
+          label: this.$t('overall.sessions'),
           prop: 'sessions',
           width: '18%'
         },
         {
-          label: this.$t('common.packets'),
+          label: this.$t('overall.packets'),
           prop: 'packets',
           width: '18%'
         },
         {
-          label: this.$t('common.bytes'),
+          label: this.$t('overall.bytes'),
           prop: 'bytes',
           width: '18%'
         }
       ],
       tableTitlesOther: [
         {
-          label: this.$t('common.serverIp'),
+          label: this.$t('overall.serverIp'),
           prop: 'serverIp',
           width: '20%'
         },
         {
-          label: this.$t('common.reputation'),
+          label: this.$t('overall.reputation'),
           prop: 'nameColumn',
           width: '22%'
         },
         {
-          label: this.$t('common.sessions'),
+          label: this.$t('overall.sessions'),
           prop: 'sessions',
           width: '18%'
         },
         {
-          label: this.$t('common.packets'),
+          label: this.$t('overall.packets'),
           prop: 'packets',
           width: '18%'
         },
         {
-          label: this.$t('common.bytes'),
+          label: this.$t('overall.bytes'),
           prop: 'bytes',
           width: '18%'
         }
diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index b4e342e1..e6661b0d 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -7,7 +7,7 @@
       <div class="table__below-statistics">Max</div>
     </div>
     <div class="chart__table-below">
-      <div v-for="(item,index) in data" :key="index" class="table-below-box">
+      <div v-for="(item, index) in data" :key="index" class="table-below-box" :class="{'table-below-box--inactivated': !item.active}" @click="toggleLegend(index)">
         <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
         <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
         <div class="table__below-statistics" :title="item.aggregation.avg">{{unitConvert(item.aggregation.avg, chartInfo.params.unitType).join(' ')}}</div>
@@ -27,6 +27,11 @@ export default {
     data: Array,
     chartInfo: Object
   },
+  methods: {
+    toggleLegend (index) {
+      this.$emit('toggleLegend', index)
+    }
+  },
   setup () {
     return {
       getChartColor,
@@ -99,4 +104,13 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.table-below-box:not(.chart__table-top) {
+  cursor: pointer;
+}
+.table-below-box.table-below-box--inactivated {
+  color: #ccc;
+  .table__below-color div {
+    background-color: #ccc !important;
+  }
+}
 </style>
diff --git a/src/components/charts/chart-table-title.js b/src/components/charts/chart-table-title.js
index b408c969..852907a7 100644
--- a/src/components/charts/chart-table-title.js
+++ b/src/components/charts/chart-table-title.js
@@ -2,73 +2,73 @@ import i18n from '@/i18n'
 export const allTableTitle = {
   tableTitles10: [
     {
-      label: i18n.global.t('common.clientIp'),
+      label: i18n.global.t('overall.clientIp'),
       prop: 'clientIp'
     },
     {
-      label: i18n.global.t('common.sessions'),
+      label: i18n.global.t('overall.sessions'),
       prop: 'sessions'
     },
     {
-      label: i18n.global.t('common.bytes'),
+      label: i18n.global.t('overall.bytes'),
       prop: 'bytes'
     },
     {
-      label: i18n.global.t('common.packets'),
+      label: i18n.global.t('overall.packets'),
       prop: 'packets'
     }
   ],
   tableTitles13: [
     {
-      label: i18n.global.t('common.serverIp'),
+      label: i18n.global.t('overall.serverIp'),
       prop: 'serverIp'
     },
     {
-      label: i18n.global.t('common.sessions'),
+      label: i18n.global.t('overall.sessions'),
       prop: 'sessions'
     },
     {
-      label: i18n.global.t('common.bytes'),
+      label: i18n.global.t('overall.bytes'),
       prop: 'bytes'
     },
     {
-      label: i18n.global.t('common.packets'),
+      label: i18n.global.t('overall.packets'),
       prop: 'packets'
     }
   ],
   tableTitles14: [
     {
-      label: i18n.global.t('common.domain'),
+      label: i18n.global.t('overall.domain'),
       prop: 'domain'
     },
     {
-      label: i18n.global.t('common.sessions'),
+      label: i18n.global.t('overall.sessions'),
       prop: 'sessions'
     },
     {
-      label: i18n.global.t('common.bytes'),
+      label: i18n.global.t('overall.bytes'),
       prop: 'bytes'
     },
     {
-      label: i18n.global.t('common.packets'),
+      label: i18n.global.t('overall.packets'),
       prop: 'packets'
     }
   ],
   tableTitles15: [
     {
-      label: i18n.global.t('common.appName'),
+      label: i18n.global.t('overall.appName'),
       prop: 'appName'
     },
     {
-      label: i18n.global.t('common.sessions'),
+      label: i18n.global.t('overall.sessions'),
       prop: 'sessions'
     },
     {
-      label: i18n.global.t('common.bytes'),
+      label: i18n.global.t('overall.bytes'),
       prop: 'bytes'
     },
     {
-      label: i18n.global.t('common.packets'),
+      label: i18n.global.t('overall.packets'),
       prop: 'packets'
     }
   ]
diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
index 79aada4b..57200043 100644
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -25,18 +25,18 @@
         <div class="cn-entity__body">
           <template v-if="entityType === 'ip'">
             <div class="body__row">
-              <span class="body__row-label">{{$t('common.country')}}:</span>
+              <span class="body__row-label">{{$t('overall.country')}}:</span>
               <div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
             </div>
             <div class="body__row">
-              <span class="body__row-label">{{$t('common.region')}}:</span>
+              <span class="body__row-label">{{$t('overall.region')}}:</span>
               <div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.asn')}}:</span>
               <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
             </div>
-            <div class="body__detail">{{$t('common.detail')}}</div>
+            <div class="body__detail">{{$t('overall.detail')}}</div>
           </template>
           <template v-else-if="entityType === 'domain'">
             <div class="body__row">
@@ -51,7 +51,7 @@
               <span class="body__row-label">{{$t('entities.creditScore')}}:</span>
               <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
             </div>
-            <div class="body__detail">{{$t('common.detail')}}</div>
+            <div class="body__detail">{{$t('overall.detail')}}</div>
           </template>
           <template v-else-if="entityType === 'app'">
             <div class="body__row">
@@ -66,7 +66,7 @@
               <span class="body__row-label">{{$t('entities.subcategory')}}:</span>
               <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
             </div>
-            <div class="body__detail">{{$t('common.detail')}}</div>
+            <div class="body__detail">{{$t('overall.detail')}}</div>
           </template>
         </div>
       </div>
diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
index e0b1d518..43bbbd83 100644
--- a/src/components/entities/LeftFilter.vue
+++ b/src/components/entities/LeftFilter.vue
@@ -26,7 +26,7 @@
               </div>
             </template>
           </el-tree>
-          <div class="filter__more" :class="{'filter__more--disabled': f.hasnotMore}" @click="showMore(f.key, f.hasnotMore)">{{$t('common.showMore')}}</div>
+          <div class="filter__more" :class="{'filter__more--disabled': f.hasnotMore}" @click="showMore(f.key, f.hasnotMore)">{{$t('overall.showMore')}}</div>
         </el-collapse-item>
       </el-collapse>
     </div>
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 7fb117ec..80a35865 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -72,7 +72,7 @@
         <pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :time-filter="timeFilter" :order="orderPieTable"/>
       </template>
       <template v-else-if="isEchartsWithStatistics">
-        <statistics-legend :data="statisticsData" :chart-info="chartInfo"></statistics-legend>
+        <statistics-legend :data="statisticsData" :chart-info="chartInfo" @toggleLegend="toggleStatisticsLegend"></statistics-legend>
       </template>
     </template>
   </echarts-frame>
@@ -119,7 +119,7 @@
             size="mini"
             v-model="table.orderBy"
             class="option__select select-column"
-            :placeholder="$t('common.field')"
+            :placeholder="$t('overall.field')"
             popper-class="option-popper"
             @change="tableLimitChange"
         >
@@ -416,6 +416,22 @@ export default {
     getTargetPageData (pageNum, pageSize, tableData) {
       return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
     },
+    toggleStatisticsLegend (index) {
+      this.statisticsData[index].active = !this.statisticsData[index].active
+      this.statisticsData.forEach((d, i) => {
+        if (d.active) {
+          this.myChart.dispatchAction({
+            type: 'legendSelect',
+            name: d.legend
+          })
+        } else {
+          this.myChart.dispatchAction({
+            type: 'legendUnSelect',
+            name: d.legend
+          })
+        }
+      })
+    },
     orderPieTableChange () {
       if (this.chart.type === 31) {
         const chartParams = this.chartInfo.params || null // 图表参数
@@ -452,7 +468,12 @@ export default {
       const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000) }
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
-          this.statisticsData = response.data.result
+          this.statisticsData = response.data.result.map(d => {
+            return {
+              ...d,
+              active: true
+            }
+          })
           const seriesTemplate = this.chartOption.series[0]
           this.chartOption.series = response.data.result.map((r, i) => {
             return {