CN-53 perf: cn-53第三条，column和legend国际化

src/components/charts/EchartsFrame.vue

@@ -37,9 +37,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.cn-panel .cn-chart__echarts .pie-with-table{
+.cn-panel .cn-chart__echarts {
-  flex: 1;
+  .cn-chart__body.pie-with-table {
-  padding: 10px 40px 30px;
+    flex-basis: 40%;
+  }
+  .cn-chart__footer.pie-with-table {
+    flex-basis: 60%;
+    padding: 10px 30px 30px;
+  }
 }
 </style>

src/components/charts/PieTable.vue

@@ -8,12 +8,14 @@
       :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%;"
@@ -21,11 +23,12 @@
             :size="'mini'"
             :height="'100%'">
           <el-table-column
-                            min-width="5%">
+              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"
@@ -46,6 +49,7 @@
     <el-table-column
         v-for="(item, index) in tableTitles"
         :key="index"
+        show-overflow-tooltip
         :min-width="item.width"
         :label="item.label"
         :prop="item.prop"
@@ -67,6 +71,7 @@
 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) {
+      this.childrenTableData = []
+
+      // this.$refs.table.toggleRowExpansion(row)
+      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]
         }
-
-      // 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 }
-      get(replaceUrlPlaceholder(url, queryParams)).then(response2 => {
-        if (response2.code === 200) {
-          this.childrenTableData = response2.data.result
-        }
       })
     },
     getRowKey (row) {
@@ -205,18 +212,27 @@ export default {
 /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;
+
+  /deep/ .el-table__header-wrapper {
+    .cell {
+      color: #333;
     }
+  }
+}
+
 .expand-table {
   font-weight: 400;
   color: #606266;
+
   /deep/ .el-table__body-wrapper {
     height: auto !important;
   }

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'
+}

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 {

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'), {
+        ElMessageBox.confirm(i18n.global.t('tip.confirmCancel'), {
-          confirmButtonText: i18n.t('tip.yes'),
+          confirmButtonText: i18n.global.t('tip.yes'),
-          cancelButtonText: i18n.t('tip.no'),
+          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()

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,9 +524,13 @@ export default {
     },
     handleSingleValue () {
       return function (value) {
+        if (!Number(value)) {
+          return 0
+        } else {
           return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2)
         }
       }
+    }
   },
   mounted () {
     this.initChart()