CN-49 feat ：饼图调整 && 数值过大的单位处理

2021-07-07 15:51:52 +08:00
parent c08ceb1966
commit 5d24c9cdce
11 changed files with 388 additions and 82 deletions
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -1,13 +1,21 @@
-.nz-chart-tooltip > div > div:nth-of-type(1) > div:nth-of-type(2) > div > div:nth-of-type(1){
+.nz-chart-tooltip .cn-chart-tooltip-box{
  display: flex;
-  span {
-    float: none;
-  }
-  > span:nth-of-type(2){
+  .cn-chart-tooltip-content{
    flex: 1;
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
+    font-size:14px;
+    color:#666;
+    font-weight:400;
+    margin-left:2px ;
+  }
+  .cn-chart-tooltip-value{
+    float:right;
+    margin-left:20px;
+    font-size:14px;
+    color:#666;
+    font-weight:900;
  }
 }
--- a/src/assets/css/tableCommon.scss
+++ b/src/assets/css/tableCommon.scss
@@ -391,3 +391,6 @@
 .margin-r-20{
  margin-right: 20px;
 }
+.margin-l-10{
+  margin-left: 10px;
+}
--- a/src/components/charts/PieTable.vue
+++ b/src/components/charts/PieTable.vue
@@ -1,9 +1,11 @@
 <template>
    <el-table
            v-loading="loading"
+            ref="table"
            class="pie-table"
-            :data="tableData"
+            :data="pieTableData"
            style="width: 100%;border: 1px solid #E7EAED"
+            @expand-change="expandChange"
            :size="'mini'"
            :height="'100%'">
        <el-table-column type="expand" :min-width="'5%'">
@@ -19,11 +21,21 @@
                            min-width="5%">
                    </el-table-column>
                    <el-table-column
-                            v-for="(item, index) in tableTitles"
+                            v-for="(item, index) in tableTitlesOther"
                            :key="index"
                            :min-width="item.width"
                            :label="item.label"
-                            :prop="item.prop">
+                            :prop="item.prop"
+                            #default="{row}">
+            <span v-if="item.prop === 'nameColumn'">
+                {{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>
@@ -33,51 +45,144 @@
                :key="index"
                :min-width="item.width"
                :label="item.label"
-                :prop="item.prop">
+                :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: {
-    tableData: Array
+    tableData: Array,
+    chartInfo: Object,
+    order: String,
+    startTime: {
+      type: Number
+    },
+    endTime: {
+      type: Number
+    }
  },
  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler (n) {
+        this.pieTableData = JSON.parse((JSON.stringify(n)))
+        this.pieTableData.forEach(item => {
+          item.children = []
+        })
+      }
+    },
+    pieTableData: {
+      handler (n) {
+      }
+    },
+    chartInfo: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        if (n && n.params) {
+          this.nameColumn = JSON.parse(n.params).nameColumn
+        }
      }
    }
  },
  data () {
    return {
      loading: false,
+      nameColumn: '',
+      pieTableData: [],
      tableTitles: [
        {
          label: this.$t('chart.pieTable.domain'),
          prop: 'domain',
          width: '20%'
        },
+        {
+          label: this.$t('chart.pieTable.nameColumn'),
+          prop: 'nameColumn',
+          width: '22%'
+        },
        {
          label: this.$t('chart.pieTable.sessions'),
          prop: 'sessions',
-          width: '25%'
+          width: '18%'
        },
        {
          label: this.$t('chart.pieTable.packets'),
          prop: 'packets',
-          width: '25%'
+          width: '18%'
        },
        {
          label: this.$t('chart.pieTable.bytes'),
          prop: 'bytes',
-          width: '25%'
+          width: '18%'
+        }
+      ],
+      tableTitlesOther: [
+        {
+          label: this.$t('chart.pieTable.serverIp'),
+          prop: 'serverIp',
+          width: '20%'
+        },
+        {
+          label: this.$t('chart.pieTable.nameColumn'),
+          prop: 'nameColumn',
+          width: '22%'
+        },
+        {
+          label: this.$t('chart.pieTable.sessions'),
+          prop: 'sessions',
+          width: '18%'
+        },
+        {
+          label: this.$t('chart.pieTable.packets'),
+          prop: 'packets',
+          width: '18%'
+        },
+        {
+          label: this.$t('chart.pieTable.bytes'),
+          prop: 'bytes',
+          width: '18%'
        }
      ]
    }
+  },
+  methods: {
+    shortFormatter: shortFormatter,
+    // rowChange (echartParams) {
+    //   const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
+    //   const row = this.pieTableData.find(item => echartParams.name === item[nameColumnKey])
+    //   this.toggleRowExpansion(row)
+    // },
+    // toggleRowExpansion (row) {
+    //   this.$refs.table.toggleRowExpansion(row)
+    // },
+    expandChange (row) {
+      const nameColumnKey = this.nameColumn === 'fqdnCategoryName' ? 'categoryName' : 'reputationLevel'
+      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) {
+          row.children = response2.data.result
+        }
+      })
+    }
  }
 }
 </script>
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -13,7 +13,6 @@ export default {
      immediate: true,
      deep: true,
      handler (n) {
-        // console.info(n)
      }
    }
  }
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -4,6 +4,7 @@
 * @description chart option和一些工具
 */
 import { format } from 'echarts'
+import { shortFormatter } from './chartFormatter'
 import _ from 'lodash'
 export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB']
 export function getChartColor (index) {
@@ -17,9 +18,7 @@ const line = {
      width: '20px',
      overflow: 'truncate'
    },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
@@ -27,7 +26,11 @@ const line = {
    type: 'time'
  },
  yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
  },
  animation: false,
  grid: {
@@ -71,9 +74,7 @@ const lineWithStatistics = {
      width: '20px',
      overflow: 'truncate'
    },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
@@ -82,7 +83,11 @@ const lineWithStatistics = {
  },
  animation: false,
  yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
  },
  color: chartColor,
  grid: {
@@ -114,9 +119,7 @@ const lineStack = {
      width: '20px',
      overflow: 'truncate'
    },
-    // formatter: () =>{
-    //   return '1'
-    // }
+    formatter: axiosFormatter,
    className: 'nz-chart-tooltip',
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
  },
@@ -125,7 +128,11 @@ const lineStack = {
  },
  color: chartColor,
  yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLabel: {
+      formatter: shortFormatter
+    }
+
  },
  grid: {
    left: 55,
@@ -183,6 +190,7 @@ const pieWithTable = {
  series: [
    {
      type: 'pie',
+      selectedMode: 'single',
      radius: ['42%', '70%'],
      center: ['30%', '50%'],
      data: [],
@@ -290,6 +298,26 @@ export function getLayout (type) {
 function tooLongFormatter (name) {
  return format.truncateText(name, 110, '12')
 }
-// function axiosFormatter(params) {
-//
-// }
+function axiosFormatter (params) {
+  let str = '<div>'
+  const sum = 0
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      str += '<div style="margin-bottom: 5px">'
+      str += window.$dayJs.tz(tData).format('YYYY-MM-DD HH:mm:ss')
+      str += '</div>'
+    }
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${shortFormatter(item.data[1])}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
--- a/src/components/charts/chartFormatter.js
+++ b/src/components/charts/chartFormatter.js
@@ -0,0 +1,21 @@
+const shortList = [' ', 'K', 'Mil', 'Bil', 'Til', 'Quadrillion', 'Quintillion']
+function asciiCompute (num, ascii, units, dot = 2) {
+  if (!num && num !== 0 && num !== '0') {
+    return ''
+  }
+  num = Number(num)
+  let carry = 0
+  if (num > 1) {
+    const log = Math.log(num) / Math.log(ascii)
+    carry = parseInt(log)
+    num = num / Math.pow(ascii, carry)
+  }
+  if (Number.isInteger(num)) {
+    return num + ' ' + units[carry]
+  } else {
+    return num.toFixed(dot) + ' ' + units[carry]
+  }
+}
+export function shortFormatter (value, index, dot = 2) {
+  return asciiCompute(value, 1000, shortList, dot)
+}
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -257,6 +257,110 @@
      flex: auto;
      overflow-y: auto;

+      .el-table {
+        padding: 0 10px;
+
+        &:before {
+          height: 0;
+        }
+        thead {
+          color: #333;
+        }
+        th.is-leaf, td {
+          border-bottom: none;
+        }
+        th {
+          padding-bottom: 5px;
+        }
+        td {
+          padding: 4px 0;
+          color: #333;
+        }
+      }
+    }
+  }
+  &>.cn-chart__echarts {
+    .cn-chart__header {
+      border-bottom: 1px solid $--content-right-background-color;
+      .header__operations {
+        display: flex;
+        justify-content: end;
+        align-items: center;
+
+        .header__operation.header__operation--table {
+          display: flex;
+          align-items: center;
+          height: 22px;
+          margin-left: 10px;
+          color: $--color-primary;
+          border: 1px solid $--color-primary;
+          border-radius: $--border-radius-primary;
+
+          .option__button {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding: 0 5px;
+            cursor: pointer;
+            background-color: white;
+            transition: all linear .2s;
+          }
+          .option__button:hover {
+            background-color: #EFF2F5;
+          }
+          .option__button.icon-group-item:first-of-type:not(:last-of-type) {
+            padding: 0 5px 0 0;
+          }
+          .option__button.icon-group-item:last-of-type:not(:first-of-type) {
+            padding: 0 0 0 5px;
+          }
+          .option__select {
+            .el-input__inner {
+              width: 120px;
+              padding-right: 20px;
+              border: none;
+              height: 100%;
+              line-height: 20px;
+              color: $--color-primary;
+            }
+            .el-input__prefix > div {
+              font-weight: normal;
+              line-height: 19px;
+              color: $--color-primary;
+            }
+            .el-input__suffix {
+              display: flex;
+              .el-input__suffix-inner {
+                line-height: 14px;
+                .el-select__caret {
+                  line-height: 14px;
+                  width: 16px;
+                  color: $--color-primary;
+                }
+              }
+            }
+          }
+          .option__select.select-column {
+            .el-input__inner {
+              width: 120px;
+              padding-left: 8px;
+            }
+          }
+          .icon-group-divide {
+            height: 14px;
+            width: 1px;
+            background-color: $--color-primary;
+          }
+          i {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+    .cn-chart__body {
+      flex: auto;
+      overflow-y: auto;
+
      .el-table {
        padding: 0 10px;

@@ -287,3 +391,12 @@
    font-size: 12px;
  }
 }
+//.cn-chart-select{
+//  display: flex;
+//  align-items: center;
+//  height: 22px;
+//  margin-left: 10px;
+//  color: #0091ff;
+//  border: 1px solid #0091ff;
+//  border-radius: 2px;
+//}
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -231,7 +231,6 @@ export default {
      immediate: true,
      deep: true,
      handler (n, o) {
-        // console.log(n)
      }
    }
  }
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -46,3 +46,4 @@ export const position = {

 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
+export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -44,21 +44,22 @@
  >
    <template #title v-if="layout.indexOf(layoutConstant.HEADER) > -1">
      {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
-      <span v-if="isEchartsWithTable">
+    </template>
+    <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
+      <div class="header__operation header__operation--table">
        <el-select
                size="mini"
-                v-model="table.limit"
+                v-model="orderPieTable"
                class="option__select select-topn"
                placeholder=""
                popper-class="option-popper"
+                @change="orderPieTableChange"
        >
-          <el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
+          <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>
-      </span>
-    </template>
-    <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
-      <i class="cn-icon cn-icon-more-light"></i>
+      </div>
+      <i class="cn-icon cn-icon-more-light margin-l-10"></i>
    </template>
    <template #default>
      <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -66,7 +67,7 @@
    <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{}">
      <!-- 带Table的饼图，展示Table -->
      <template v-if="isEchartsWithTable">
-        <pie-table :tableData="pieTableData" ref="pieTable"/>
+        <pie-table :tableData="pieTableData" ref="pieTable" :chartInfo="chartInfo" :start-time="startTime" :end-time="endTime" :order="orderPieTable"/>
      </template>
      <template v-else-if="isEchartsWithStatistics">
        <statistics-legend :data="statisticsData"></statistics-legend>
@@ -165,7 +166,7 @@ import ChartMap from '@/components/charts/ChartMap'
 import PieTable from '@/components/charts/PieTable'
 import StatisticsLegend from '@/components/charts/StatisticsLegend'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
-import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
+import { chartTableDefaultPageSize, chartTableTopOptions, chartPieTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'

@@ -202,11 +203,14 @@ export default {
      pieTableData: [],
      singleValue: '-',
      activeTab: '',
-      statisticsData: []
+      statisticsData: [],
+      orderPieTable: chartPieTableTopOptions[0].value,
+      selectPieChartName: ''
    }
  },
  methods: {
    initChart () {
+      const self = this
      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
      if (this.isMap) {
        this.myChart = this.initMap(`chart${this.chartInfo.id}`)
@@ -303,41 +307,7 @@ export default {
        this.myChart = echarts.init(dom)
        if (chartParams) {
          if (this.isEchartsWithTable) {
-            const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10 } // 统计数据的查询参数
-            const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10 } // 统计数据的查询参数
-            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
-              if (response.code === 200) {
-                const data = response.data.result
-                this.chartOption.series[0].data = data.map(d => {
-                  return {
-                    data: d,
-                    name: d[chartParams.nameColumn],
-                    value: parseInt(d[chartParams.valueColumn])
-                  }
-                })
-                if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
-                  this.chartOption.legend.type = 'scroll'
-                }
-                this.myChart.setOption(this.chartOption)
-                this.$nextTick(() => {
-                  this.myChart.resize()
-                })
-                tableQueryParams[chartParams.nameColumn] = data[0][chartParams.nameColumn]
-                get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
-                  if (response2.code === 200) {
-                    this.pieTableData = response2.data.result
-                  }
-                })
-              }
-            })
-
-            this.myChart.on('click', function (echartParams) {
-              get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response => {
-                if (response.code === 200) {
-                  this.pieTableData = response.data.result
-                }
-              })
-            })
+            this.chartWithPieTableInit(chartParams)
          } else if (this.isEchartsWithStatistics) {
            const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
            get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -443,7 +413,64 @@ export default {
    },
    getTargetPageData (pageNum, pageSize, tableData) {
      return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
+    },
+    orderPieTableChange () {
+      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+      this.myChart.off('click')
+      this.chartWithPieTableInit(chartParams)
+    },
+    chartWithPieTableInit (chartParams) {
+      chartParams.valueColumn = this.orderPieTable
+      const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), limit: 10, order: this.orderPieTable } // 统计数据的查询参数
+      const tableQueryParams = { startTime: parseInt(this.startTime / 1000), endTime: this.endTime, limit: 10, order: this.orderPieTable } // 统计数据的查询参数
+      tableQueryParams[chartParams.nameColumn] = [] // 处理两个图表不一样的地方
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          const data = response.data.result
+          this.chartOption.series[0].data = data.map(d => {
+            if (chartParams.nameColumn === 'fqdnCategoryName') {
+              tableQueryParams[chartParams.nameColumn].push(d[chartParams.nameColumn])
            }
+            return {
+              data: d,
+              name: d[chartParams.nameColumn],
+              value: parseInt(d[chartParams.valueColumn])
+            }
+          })
+          if (tableQueryParams[chartParams.nameColumn].length) {
+            // tableQueryParams[chartParams.nameColumn] = JSON.stringify(tableQueryParams[chartParams.nameColumn])
+          }
+          if (this.chartOption.series[0].data && this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
+            this.chartOption.legend.type = 'scroll'
+          }
+          this.myChart.setOption(this.chartOption)
+          this.$nextTick(() => {
+            this.myChart.resize()
+          })
+          get(replaceUrlPlaceholder(chartParams.urlTable, tableQueryParams)).then(response2 => {
+            if (response2.code === 200) {
+              this.pieTableData = response2.data.result
+            }
+          })
+        }
+      })
+
+      this.myChart.on('click', function (echartParams) {
+        const childrenParams = { startTime: parseInt(self.startTime / 1000), endTime: parseInt(self.endTime / 1000), limit: 10 }
+        childrenParams[chartParams.nameColumn] = echartParams.name
+        if (self.selectPieChartName === echartParams.name) {
+          self.selectPieChartName = ''
+          childrenParams[chartParams.nameColumn] = tableQueryParams[chartParams.nameColumn]
+        } else {
+          self.selectPieChartName = echartParams.name
+        }
+        get(replaceUrlPlaceholder(chartParams.urlTable, childrenParams)).then(response2 => {
+          if (response2.code === 200) {
+            self.pieTableData = response2.data.result
+          }
+        })
+      })
+    },
  },
  computed: {
    computePosition () {
@@ -465,6 +492,7 @@ export default {
      chartInfo,
      layoutConstant,
      chartTableTopOptions,
+      chartPieTableTopOptions,
      chartOption: getOption(props.chart.type),
      isEcharts: isEcharts(props.chart.type),
      isEchartsWithTable: isEchartsWithTable(props.chart.type),
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -101,6 +101,7 @@ export default {
          chart.i = chart.id
          return chart
        })
+        // this.chartList = [this.chartList[7], this.chartList[12]]
      }
    },
    timeRefreshChange () {