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

2021-07-14 15:40:05 +08:00
parent 2e2b197b90
commit 8a0eb23e2d
7 changed files with 183 additions and 148 deletions
--- 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>
--- a/src/components/charts/PieTable.vue
+++ b/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,23 +23,24 @@
            :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"
              #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 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>
@@ -46,18 +49,19 @@
    <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'] }}
+                {{ 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>
@@ -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) {
@@ -202,23 +209,32 @@ export default {
 </script>

 <style scoped lang="scss">
-    /deep/ .el-table__expanded-cell[class*=cell]{
+/deep/ .el-table__expanded-cell[class*=cell] {
  padding: 0;
-    }
-    .expand-table /deep/ .el-table__body .el-table__row:last-of-type td{
+}
+
+.expand-table /deep/ .el-table__body .el-table__row:last-of-type td {
  border: none;
-    }
-    .pie-table{
-        font-family: Roboto-Medium;
+}
+
+.pie-table {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
+
+  /deep/ .el-table__header-wrapper {
+    .cell {
+      color: #333;
    }
-    .expand-table{
+  }
+}
+
+.expand-table {
  font-weight: 400;
  color: #606266;
-        /deep/ .el-table__body-wrapper{
+
+  /deep/ .el-table__body-wrapper {
    height: auto !important;
  }
-    }
+}
 </style>
--- 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'
+}
--- 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 {
--- 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)
--- 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()
--- 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,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()