From 8a0eb23e2debaabc2c766ec0a635a0baa00095d2 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Wed, 14 Jul 2021 15:40:05 +0800
Subject: [PATCH] =?UTF-8?q?CN-53=20perf:=20cn-53=E7=AC=AC=E4=B8=89?=
 =?UTF-8?q?=E6=9D=A1=EF=BC=8Ccolumn=E5=92=8Clegend=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/EchartsFrame.vue        |  13 +-
 src/components/charts/PieTable.vue            | 204 ++++++++++--------
 src/components/charts/chartTableTitle.js      |  63 +++---
 src/components/charts/panel.scss              |   5 +-
 .../common/TimeRange/DateTimeRange.vue        |   4 +-
 src/utils/tools.js                            |  12 +-
 src/views/charts/Chart.vue                    |  30 +--
 7 files changed, 183 insertions(+), 148 deletions(-)

diff --git a/src/components/charts/EchartsFrame.vue b/src/components/charts/EchartsFrame.vue
index d4b06d26..0137ab9d 100644
--- a/src/components/charts/EchartsFrame.vue
+++ b/src/components/charts/EchartsFrame.vue
@@ -37,9 +37,14 @@ export default {
 }
 </script>
 
-<style scoped>
-.cn-panel .cn-chart__echarts .pie-with-table{
-  flex: 1;
-  padding: 10px 40px 30px;
+<style lang="scss" scoped>
+.cn-panel .cn-chart__echarts {
+  .cn-chart__body.pie-with-table {
+    flex-basis: 40%;
+  }
+  .cn-chart__footer.pie-with-table {
+    flex-basis: 60%;
+    padding: 10px 30px 30px;
+  }
 }
 </style>
diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
index e09366f9..29ec1c65 100644
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -1,72 +1,77 @@
 <template>
-    <el-table
-            v-loading="loading"
-            ref="table"
-            class="pie-table"
-            :data="pieTableData"
-            style="width: 100%;border: 1px solid #E7EAED"
-            :row-key="getRowKey"
-            @expand-change="currentChange"
-            current-row-key="domain"
-            :expand-row-keys="expandRowKeys"
+  <el-table
+      v-loading="loading"
+      ref="table"
+      class="pie-table"
+      :data="pieTableData"
+      style="width: 100%;border: 1px solid #E7EAED"
+      :row-key="getRowKey"
+      @expand-change="currentChange"
+      current-row-key="domain"
+      tooltip-effect="light"
+      :expand-row-keys="expandRowKeys"
+      :size="'mini'"
+      :height="'100%'">
+    <el-table-column type="expand" :min-width="'5%'">
+      <template #default="props" style="height: auto">
+        <el-table
+            tooltip-effect="light"
+            class="expand-table"
+            :data="childrenTableData"
+            style="width: 100%;"
+            :show-header="false"
             :size="'mini'"
             :height="'100%'">
-        <el-table-column type="expand" :min-width="'5%'">
-            <template #default="props" style="height: auto">
-                <el-table
-                        class="expand-table"
-                        :data="childrenTableData"
-                        style="width: 100%;"
-                        :show-header="false"
-                        :size="'mini'"
-                        :height="'100%'">
-                    <el-table-column
-                            min-width="5%">
-                    </el-table-column>
-                    <el-table-column
-                            v-for="(item, index) in tableTitlesOther"
-                            :key="index"
-                            :min-width="item.width"
-                            :label="item.label"
-                            :prop="item.prop"
-                            #default="{row}">
+          <el-table-column
+              width="48">
+          </el-table-column>
+          <el-table-column
+              v-for="(item, index) in tableTitlesOther"
+              :key="index"
+              show-overflow-tooltip
+              :min-width="item.width"
+              :label="item.label"
+              :prop="item.prop"
+              #default="{row}">
             <span v-if="item.prop === 'nameColumn'">
-                {{nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
+                {{ nameColumn === 'fqdnCategoryName' ? row['fqdnCategoryName'] : row['reputationLevel'] }}
             </span>
-                        <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
-                {{shortFormatter(row[item.prop])}}
-            </span>
-                        <span v-else>
-                {{row[item.prop]}}
-            </span>
-                    </el-table-column>
-                </el-table>
-            </template>
-        </el-table-column>
-        <el-table-column
-                v-for="(item, index) in tableTitles"
-                :key="index"
-                :min-width="item.width"
-                :label="item.label"
-                :prop="item.prop"
-                #default="{row}">
-            <span v-if="item.prop === 'nameColumn'">
-                {{nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
-            </span>
-            <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'" >
-                {{shortFormatter(row[item.prop])}}
+            <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'">
+                {{ shortFormatter(row[item.prop]) }}
             </span>
             <span v-else>
-                {{row[item.prop]}}
+                {{ row[item.prop] }}
             </span>
-        </el-table-column>
-    </el-table>
+          </el-table-column>
+        </el-table>
+      </template>
+    </el-table-column>
+    <el-table-column
+        v-for="(item, index) in tableTitles"
+        :key="index"
+        show-overflow-tooltip
+        :min-width="item.width"
+        :label="item.label"
+        :prop="item.prop"
+        #default="{row}">
+            <span v-if="item.prop === 'nameColumn'">
+                {{ nameColumn === 'fqdnCategoryName' ? row['categoryName'] : row['reputationLevel'] }}
+            </span>
+      <span v-else-if="item.prop === 'bytes' || item.prop === 'packets' || item.prop === 'sessions'">
+                {{ shortFormatter(row[item.prop]) }}
+            </span>
+      <span v-else>
+                {{ row[item.prop] }}
+            </span>
+    </el-table-column>
+  </el-table>
 </template>
 
 <script>
 import { shortFormatter } from '@/components/charts/chartFormatter'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder } from '@/utils/tools'
+
 export default {
   name: 'PieTable',
   props: {
@@ -91,10 +96,6 @@ export default {
         })
       }
     },
-    pieTableData: {
-      handler (n) {
-      }
-    },
     chartInfo: {
       deep: true,
       immediate: true,
@@ -114,54 +115,54 @@ export default {
       expandRowKeys: [],
       tableTitles: [
         {
-          label: this.$t('chart.pieTable.domain'),
+          label: this.$t('common.domain'),
           prop: 'domain',
           width: '20%'
         },
         {
-          label: this.$t('chart.pieTable.nameColumn'),
+          label: this.$t('entities.category'),
           prop: 'nameColumn',
           width: '22%'
         },
         {
-          label: this.$t('chart.pieTable.sessions'),
+          label: this.$t('common.sessions'),
           prop: 'sessions',
           width: '18%'
         },
         {
-          label: this.$t('chart.pieTable.packets'),
+          label: this.$t('common.packets'),
           prop: 'packets',
           width: '18%'
         },
         {
-          label: this.$t('chart.pieTable.bytes'),
+          label: this.$t('common.bytes'),
           prop: 'bytes',
           width: '18%'
         }
       ],
       tableTitlesOther: [
         {
-          label: this.$t('chart.pieTable.serverIp'),
+          label: this.$t('common.serverIp'),
           prop: 'serverIp',
           width: '20%'
         },
         {
-          label: this.$t('chart.pieTable.nameColumn'),
+          label: this.$t('common.reputation'),
           prop: 'nameColumn',
           width: '22%'
         },
         {
-          label: this.$t('chart.pieTable.sessions'),
+          label: this.$t('common.sessions'),
           prop: 'sessions',
           width: '18%'
         },
         {
-          label: this.$t('chart.pieTable.packets'),
+          label: this.$t('common.packets'),
           prop: 'packets',
           width: '18%'
         },
         {
-          label: this.$t('chart.pieTable.bytes'),
+          label: this.$t('common.bytes'),
           prop: 'bytes',
           width: '18%'
         }
@@ -179,19 +180,25 @@ export default {
     //   this.$refs.table.toggleRowExpansion(row)
     // },
     currentChange (row, expandedRows) {
-      if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
-        this.expandRowKeys = []
-      } else {
-        this.expandRowKeys = [row.domain]
-      }
+      this.childrenTableData = []
 
       // this.$refs.table.toggleRowExpansion(row)
-      const url = JSON.parse(this.chartInfo.params).urlChildrenTable
-      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), order: this.order, domain: row.domain }
+      const url = this.chartInfo.params.urlChildrenTable
+      const queryParams = {
+        startTime: parseInt(this.startTime / 1000),
+        endTime: parseInt(this.endTime / 1000),
+        order: this.order,
+        domain: row.domain
+      }
       get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
         if (response2.code === 200) {
           this.childrenTableData = response2.data.result
         }
+        if (this.expandRowKeys[0] && (row.domain === this.expandRowKeys[0])) {
+          this.expandRowKeys = []
+        } else {
+          this.expandRowKeys = [row.domain]
+        }
       })
     },
     getRowKey (row) {
@@ -202,23 +209,32 @@ export default {
 </script>
 
 <style scoped lang="scss">
-    /deep/ .el-table__expanded-cell[class*=cell]{
-        padding: 0;
-    }
-    .expand-table /deep/ .el-table__body .el-table__row:last-of-type td{
-        border: none;
-    }
-    .pie-table{
-        font-family: Roboto-Medium;
-        font-size: 14px;
-        color: #333333;
-        font-weight: 500;
-    }
-    .expand-table{
-        font-weight: 400;
-        color: #606266;
-        /deep/ .el-table__body-wrapper{
-            height: auto !important;
-        }
+/deep/ .el-table__expanded-cell[class*=cell] {
+  padding: 0;
+}
+
+.expand-table /deep/ .el-table__body .el-table__row:last-of-type td {
+  border: none;
+}
+
+.pie-table {
+  font-size: 14px;
+  color: #333333;
+  font-weight: 500;
+
+  /deep/ .el-table__header-wrapper {
+    .cell {
+      color: #333;
     }
+  }
+}
+
+.expand-table {
+  font-weight: 400;
+  color: #606266;
+
+  /deep/ .el-table__body-wrapper {
+    height: auto !important;
+  }
+}
 </style>
diff --git a/src/components/charts/chartTableTitle.js b/src/components/charts/chartTableTitle.js
index bedc1c64..b64a1084 100644
--- a/src/components/charts/chartTableTitle.js
+++ b/src/components/charts/chartTableTitle.js
@@ -1,74 +1,81 @@
+import i18n from '@/i18n'
 export const allTableTitle = {
   tableTitles10: [
     {
-      label: 'clientIp',
+      label: i18n.global.t('common.clientIp'),
       prop: 'clientIp'
     },
     {
-      label: 'bytes',
+      label: i18n.global.t('common.sessions'),
+      prop: 'sessions'
+    },
+    {
+      label: i18n.global.t('common.bytes'),
       prop: 'bytes'
     },
     {
-      label: 'packets',
+      label: i18n.global.t('common.packets'),
       prop: 'packets'
-    },
-    {
-      label: 'sessions',
-      prop: 'sessions'
     }
   ],
   tableTitles13: [
     {
-      label: 'serverIp',
+      label: i18n.global.t('common.serverIp'),
       prop: 'serverIp'
     },
     {
-      label: 'bytes',
+      label: i18n.global.t('common.sessions'),
+      prop: 'sessions'
+    },
+    {
+      label: i18n.global.t('common.bytes'),
       prop: 'bytes'
     },
     {
-      label: 'packets',
+      label: i18n.global.t('common.packets'),
       prop: 'packets'
-    },
-    {
-      label: 'sessions',
-      prop: 'sessions'
     }
   ],
   tableTitles14: [
     {
-      label: 'domain',
+      label: i18n.global.t('common.domain'),
       prop: 'domain'
     },
     {
-      label: 'bytes',
+      label: i18n.global.t('common.sessions'),
+      prop: 'sessions'
+    },
+    {
+      label: i18n.global.t('common.bytes'),
       prop: 'bytes'
     },
     {
-      label: 'packets',
+      label: i18n.global.t('common.packets'),
       prop: 'packets'
-    },
-    {
-      label: 'sessions',
-      prop: 'sessions'
     }
   ],
   tableTitles15: [
     {
-      label: 'appName',
+      label: i18n.global.t('common.appName'),
       prop: 'appName'
     },
     {
-      label: 'bytes',
+      label: i18n.global.t('common.sessions'),
+      prop: 'sessions'
+    },
+    {
+      label: i18n.global.t('common.bytes'),
       prop: 'bytes'
     },
     {
-      label: 'packets',
+      label: i18n.global.t('common.packets'),
       prop: 'packets'
-    },
-    {
-      label: 'sessions',
-      prop: 'sessions'
     }
   ]
 }
+export const legendMapping = {
+  bytes_received_rate: 'Bytes Received Rate',
+  bytes_sent_rate: 'Bytes Sent Rate',
+  bytes_rate: 'Bytes Rate',
+  session_rate: 'Session Rate'
+}
diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss
index 87ac02f4..993e75f8 100644
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -297,7 +297,7 @@
         justify-content: end;
         align-items: center;
 
-        .header__operation.header__operation--table {
+        .header__operation.header__operation--echarts {
           display: flex;
           align-items: center;
           height: 22px;
@@ -352,7 +352,7 @@
           }
           .option__select.select-column {
             .el-input__inner {
-              width: 120px;
+              width: 86px;
               padding-left: 8px;
             }
           }
@@ -368,7 +368,6 @@
       }
     }
     .cn-chart__body {
-      flex: auto;
       overflow-y: auto;
 
       .el-table {
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 81b91d7b..ace441e7 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import {ref, computed} from 'vue'
+import { ref, computed } from 'vue'
 import MyDatePicker from '../MyDatePicker'
 
 export default {
@@ -105,7 +105,7 @@ export default {
   components: {
     MyDatePicker
   },
-  setup(props, ctx) {
+  setup (props, ctx) {
     // data
     const myStartTime = ref(props.startTime)
     const myEndTime = ref(props.endTime)
diff --git a/src/utils/tools.js b/src/utils/tools.js
index b1b5c6a6..502387ef 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -255,9 +255,9 @@ export const cancelWithChange = {
     function domClick (e) {
       const newValue = JSON.parse(JSON.stringify(binding.value.object))
       if (unsavedChange === 'on' && !isEqual(oldValue, newValue)) {
-        ElMessageBox.confirm(i18n.t('tip.confirmCancel'), {
-          confirmButtonText: i18n.t('tip.yes'),
-          cancelButtonText: i18n.t('tip.no'),
+        ElMessageBox.confirm(i18n.global.t('tip.confirmCancel'), {
+          confirmButtonText: i18n.global.t('tip.yes'),
+          cancelButtonText: i18n.global.t('tip.no'),
           type: 'warning'
         }).then(() => {
           if (binding.value.func) {
@@ -393,6 +393,12 @@ export function lineToHump (name) {
     return letter.toUpperCase()
   })
 }
+// 下划线转换空格首位大写
+export function lineToSpace (name) {
+  return _.upperFirst(name.replace(/\_(\w)/g, function (all, letter) {
+    return ` ${letter.toUpperCase()}`
+  }))
+}
 // 驼峰转换下划线
 export function humpToLine (name) {
   return name.replace(/([A-Z])/g, '_$1').toLowerCase()
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 146e28fd..b000fe40 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -29,7 +29,7 @@
   >
     <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
     <template #operations>
-      <i class="cn-icon cn-icon-more-light"></i>
+<!--      <i class="cn-icon cn-icon-more-light"></i>-->
 <!--      <i class="cn-icon cn-icon-refresh" @click="loadMap"></i>-->
     </template>
     <template #default>
@@ -47,20 +47,19 @@
       {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
     </template>
     <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
-      <div class="header__operation header__operation--table" v-if="chart.type === 31">
+      <div class="header__operation header__operation--echarts" v-if="chart.type === 31">
         <el-select
                 size="mini"
                 v-model="orderPieTable"
-                class="option__select select-topn"
+                class="option__select select-column"
                 placeholder=""
                 popper-class="option-popper"
                 @change="orderPieTableChange"
         >
           <el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option>
-          <template #prefix>TOP&nbsp;</template>
         </el-select>
       </div>
-      <i class="cn-icon cn-icon-more-light margin-l-10"></i>
+<!--      <i class="cn-icon cn-icon-more-light margin-l-10"></i>-->
     </template>
     <template #default>
       <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -131,10 +130,10 @@
         <span class="option__button"><i class="cn-icon cn-icon-style"></i></span>
         <div class="icon-group-divide"></div>
         <span class="option__button"><i class="cn-icon cn-icon-dropdown"></i></span>
-      </div>-->
+      </div>
       <div class="header__operation header__operation--table">
         <span class="option__button"><i class="cn-icon cn-icon-full-screen"></i></span>
-      </div>
+      </div>-->
     </template>
     <template #footer>
       <chart-table-pagination
@@ -150,7 +149,7 @@ import * as echarts from 'echarts'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { shallowRef } from 'vue'
-import { allTableTitle } from '@/components/charts/chartTableTitle'
+import { allTableTitle, legendMapping } from '@/components/charts/chartTableTitle'
 import {
   isEcharts,
   isSingleValue,
@@ -177,7 +176,7 @@ import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
 import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
-import { replaceUrlPlaceholder, getCapitalGeo, getGeoData } from '@/utils/tools'
+import { replaceUrlPlaceholder, getCapitalGeo, getGeoData, lineToSpace } from '@/utils/tools'
 
 export default {
   name: 'Chart',
@@ -400,7 +399,7 @@ export default {
     },
     orderPieTableChange () {
       if (this.chart.type === 31) {
-        const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+        const chartParams = this.chartInfo.params || null // 图表参数
         this.myChart.off('click')
         this.initEchartsWithPieTable(chartParams)
       }
@@ -409,12 +408,11 @@ export default {
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
-          this.statisticsData = response.data.result
           const seriesTemplate = this.chartOption.series[0]
           this.chartOption.series = response.data.result.map(r => {
             return {
               ...seriesTemplate,
-              name: r.legend,
+              name: legendMapping[r.legend] ? legendMapping[r.legend] : lineToSpace(r.legend),
               data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1])])
             }
           })
@@ -501,7 +499,7 @@ export default {
       })
     },
     tableLimitChange () {
-      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+      const chartParams = this.chartInfo.params || null // 图表参数
       this.initChartTable(chartParams)
     },
     initChartTable (chartParams) {
@@ -526,7 +524,11 @@ export default {
     },
     handleSingleValue () {
       return function (value) {
-        return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2)
+        if (!Number(value)) {
+          return 0
+        } else {
+          return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2)
+        }
       }
     }
   },