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

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 {
+  .cn-chart-tooltip-content{
-    float: none;
-  }
-  > span:nth-of-type(2){
     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;
   }
 }

src/assets/css/tableCommon.scss

@@ -44,7 +44,7 @@
       height: 44px;
       background-color: white;
       border: 1px solid #E6EAED;
-      
+
     }
 
     .top-tool-right {
@@ -134,7 +134,7 @@
         color: #666666;
         font-size: 14px;
         text-align: center;
-        
+
         line-height: 40px;
 
         &.sub-list-tab--active {
@@ -156,7 +156,7 @@
     background-color: #e6eaed;
     position: absolute;
     z-index: 1;
-    
+
     user-select: none;
     color: #5f6368;
     cursor: ns-resize;
@@ -188,7 +188,7 @@
     position: relative;
     padding: 0 20px;
     width: 100%;
-    
+
     flex: auto;
     height: calc(100% - 58px);
 
@@ -356,7 +356,7 @@
   left: 270px !important;
   margin-top: -3px !important;
   box-shadow: none;
-  
+
   border-radius: 0;
   border-color: #c7c7c7;
 
@@ -391,3 +391,6 @@
 .margin-r-20{
   margin-right: 20px;
 }
+.margin-l-10{
+  margin-left: 10px;
+}

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>

src/components/charts/StatisticsLegend.vue

@@ -13,7 +13,6 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        // console.info(n)
       }
     }
   }
@@ -22,4 +21,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

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: () =>{
+    formatter: axiosFormatter,
-    //   return '1'
-    // }
     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: () =>{
+    formatter: axiosFormatter,
-    //   return '1'
-    // }
     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: () =>{
+    formatter: axiosFormatter,
-    //   return '1'
-    // }
     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
+}

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

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;
+//}

src/components/common/Pagination.vue

@@ -231,7 +231,6 @@ export default {
       immediate: true,
       deep: true,
       handler (n, o) {
-        // console.log(n)
       }
     }
   }

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选项

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>
+      </div>
-    </template>
+      <i class="cn-icon cn-icon-more-light margin-l-10"></i>
-    <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
-      <i class="cn-icon cn-icon-more-light"></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 } // 统计数据的查询参数
+            this.chartWithPieTableInit(chartParams)
-            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
-                }
-              })
-            })
           } 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),

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 () {