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
@@ -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>
--- 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)