CN-228 Cyptocurrency--活跃IP新图表开发

src/components/charts/ChartTableActiveIp.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="cn-chart cn-chart__table">
+    <div class="cn-chart__header chart-header-position" >
+      <slot name="chartErrorInfo"></slot>
+      <div class="header__title">
+        <slot name="title"></slot>
+      </div>
+      <div class="header__operations">
+        <slot name="operations"></slot>
+      </div>
+    </div>
+    <div class="chart__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="cn-chart__body" v-no-data="noData">
+      <el-table
+          style="width: 100%"
+          tooltip-effect="light"
+          :data="tableData"
+          :show-header="false"
+          :cell-style="{padding:'7px 0'}"
+      >
+        <el-table-column>
+          <template #default="{ row }">
+              <div class="header__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
+             <div class="content__name" >
+               {{row['name']}}
+             </div>
+          </template>
+        </el-table-column>
+        <el-table-column align="center">
+          <template #default="{ row }">
+            <span>
+                {{row['num']}}
+            </span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+            v-for="(c, i) in tableColumns"
+            show-overflow-tooltip
+            :key="i"
+            :label="c.label"
+            :prop="c.prop"
+        >
+          <template #default="{ row }">
+            <span v-if="c.prop === 'bytes'">
+                {{unitConvert(row[c.prop], unitTypes.byte).join(' ')}}
+            </span>
+            <span v-else-if="c.prop === 'packets' || c.prop === 'sessions'">
+                {{unitConvert(row[c.prop], unitTypes.number).join(' ')}}
+            </span>
+            <span v-else>
+                {{row[c.prop]}}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="cn-chart__footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import unitConvert from '@/utils/unit-convert'
+import { unitTypes } from '@/utils/constants'
+export default {
+  name: 'ChartTableActiveIp',
+  props: {
+    tableColumns: Array,
+    tableData: Array,
+    loading: Boolean,
+    noData: Boolean
+  },
+  setup () {
+    return {
+      unitTypes,
+      unitConvert
+    }
+  }
+}
+</script>
+
+<style>
+
+  .header__icon {
+    overflow: hidden;
+    position: absolute;
+    top: 8px;
+    left: 6px;
+    display: flex;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    width: 23px;
+    height: 23px;
+    border-radius: 50%;
+    background: #e8fbf9;
+    border: 2px solid #e8fbf9;
+  }
+  .ip-green {
+    color: #23BF9A;
+  }
+  .content__name {
+    position: absolute;
+    top: 7px;
+    left: 35px;
+    overflow: hidden;
+  }
+</style>

src/components/charts/chart-options.js

@@ -543,6 +543,10 @@ export function isEchartsWithTable (type) {
 export function isTable (type) {
   return type >= 61 && type <= 70
 }
+/* table */
+export function isActiveIpTable (type) {
+  return type == 63
+}
 /* title */
 export function isTitle (type) {
   return type === 93

src/components/rightBox/settings/ChartBox.vue

@@ -56,6 +56,7 @@
 
                 <el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
                 <el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
+                <el-option :key="panelTypeAndRouteMapping.cyptocurrency" :label="$t('cyptocurrency.cyptocurrency')" :value="panelTypeAndRouteMapping.cyptocurrency"></el-option>
                 <el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
                 <el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
                 <el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
@@ -229,8 +230,11 @@ export default {
           value: 62,
           label: 'table-2',
           remark: 'DNS记录'
-        },
+        }, {
-        {
+          value: 63,
+          label: 'table-3',
+          remark: '挖矿活跃ip'
+        }, {
           value: 31,
           label: 'pie-1',
           remark: '饼图-带联动表格'
@@ -400,4 +404,4 @@ export default {
       outline: none;
     }
   }
-</style>
+</style>

src/utils/constants.js

@@ -87,6 +87,7 @@ export const unitTypes = {
 
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
+export const chartActiveIpTableOrderOptions = ['machine'] // active ip table类型图表的order 选项
 export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项
 
 export const iso36112 = {

src/views/charts/Chart.vue

@@ -235,6 +235,44 @@
       <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
     </template>
   </single-value>
+  <!-- 表格：Cryptocurrency活跃IP -->
+  <chart-table-active-ip
+          v-else-if="isActiveIpTable"
+          :table-data="activeIpTable.tableData"
+          :style="computePosition"
+          :loading="loading"
+          :no-data="false"
+  >
+    <template #chartErrorInfo>
+      <chart-error
+              :isError="isError"
+              :errorInfo="errorInfo"
+      >
+      </chart-error>
+    </template>
+    <template #title>{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
+    <template #operations>
+      <el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
+        <template #reference>
+          <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
+        </template>
+      </el-popover>
+      <div class="header__operation header__operation--table">
+        <el-select
+                size="mini"
+                v-model="activeIpTable.orderBy"
+                class="option__select select-column"
+                :placeholder="$t('overall.field')"
+                popper-class="option-popper"
+                @change="activeIpTableLimitChange"
+        >
+          <template v-for="item in chartActiveIpTableOrderOptions" :key="item">
+            <el-option :value="item">{{item}}</el-option>
+          </template>
+        </el-select>
+      </div>
+    </template>
+  </chart-table-active-ip>
   <!-- 表格 -->
   <chart-table
     v-else-if="isTable"
@@ -489,6 +527,7 @@ import {
   isEcharts,
   isSingleValue,
   isTable,
+  isActiveIpTable,
   isTitle,
   isMap,
   getOption,
@@ -517,12 +556,13 @@ import ChartError from '@/components/charts/ChartError'
 import EchartsFrame from '@/components/charts/EchartsFrame'
 import SingleValue from '@/components/charts/ChartSingleValue'
 import ChartTable from '@/components/charts/ChartTable'
+import ChartTableActiveIp from '@/components/charts/ChartTableActiveIp'
 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 unitConvert, { getUnitType, valueToRangeValue } from '@/utils/unit-convert'
-import { chartTableDefaultPageSize, chartTableTopOptions, storageKey, chartPieTableTopOptions, unitTypes } from '@/utils/constants'
+import { chartTableDefaultPageSize, chartTableTopOptions, chartActiveIpTableOrderOptions, storageKey, chartPieTableTopOptions, unitTypes } from '@/utils/constants'
 import { get, post } from '@/utils/http'
 import { replaceUrlPlaceholder, getCapitalGeo, getGeoData, lineToSpace } from '@/utils/tools'
 import { HeatLegend } from '@/components/amcharts/heatLegend'
@@ -548,6 +588,7 @@ export default {
     SingleValue,
     ChartTablePagination,
     ChartTable,
+    ChartTableActiveIp,
     PieTable,
     StatisticsLegend,
     ChartMap,
@@ -563,6 +604,34 @@ export default {
         tableData: [], // table的所有数据
         currentPageData: [] // table当前页的数据
       },
+      activeIpTable: {
+        orderBy: 'machine',
+        tableData: [
+          {
+            name: '192.168.20.21',
+            num: 111
+
+          }, {
+            name: '192.168.20.22',
+            num: 345
+          }, {
+            name: '192.168.20.23',
+            num: 111
+
+          }, {
+            name: '192.168.20.24',
+            num: 345
+          }, {
+            name: '192.168.20.25',
+            num: 111
+
+          }, {
+            name: '192.168.20.26',
+            num: 345
+          }
+        ], // table的所有数据
+        currentPageData: [] // table当前页的数据
+      },
       pieTableData: [],
       singleValue: {
         value: '-',
@@ -643,6 +712,8 @@ export default {
               this.initECharts(chartParams)
             }
           }
+        } else if (this.isActiveIpTable) {
+          this.initChartActiveIpTable(chartParams)
         } else if (this.isTable) {
           if (chartParams) {
             this.initChartTable(chartParams)
@@ -1765,6 +1836,33 @@ export default {
         setTimeout(() => { this.loading = false }, 250)
       })
     },
+
+    activeIpTableLimitChange () {
+      const chartParams = this.chartInfo.params || null // 图表参数
+      this.initChartActiveIpTable(chartParams)
+    },
+    initChartActiveIpTable (chartParams) {
+      const queryParams = { ...this.queryTimeRange, order: this.activeIpTable.orderBy, ...this.entity }
+      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
+        if (response.code === 200) {
+          if (this.$_.isEmpty(response.data.result)) {
+            this.noData = true
+            return
+          } else {
+            this.noData = false
+          }
+          this.activeIpTable.tableData = response.data.result
+          this.activeIpTable.tableColumns = this.getTableTitle(response.data.result)
+          this.activeIpTable.currentPageData = this.getTargetPageData(1, this.activeIpTable.pageSize, this.activeIpTable.tableData)
+        } else {
+          this.isError = true
+          this.noData = true
+          this.errorInfo = response.msg || response.message || this.$t('tip.unknownError')
+        }
+      }).finally(() => {
+        setTimeout(() => { this.loading = false }, 250)
+      })
+    },
     echartsResize () {
       this.myChart && this.myChart.resize()
       this.myChart2 && this.myChart2.resize()
@@ -1858,6 +1956,7 @@ export default {
       chartInfo,
       layoutConstant,
       chartTableTopOptions,
+      chartActiveIpTableOrderOptions,
       chartPieTableTopOptions,
       isEcharts: isEcharts(props.chart.type),
       isEchartsWithTable: isEchartsWithTable(props.chart.type),
@@ -1866,6 +1965,7 @@ export default {
       isSingleValueWithEcharts: isSingleValueWithEcharts(props.chart.type),
       isRelationShip: isRelationShip(props.chart.type),
       isTable: isTable(props.chart.type),
+      isActiveIpTable: isActiveIpTable(props.chart.type),
       isMap: isMap(props.chart.type),
       isTitle: isTitle(props.chart.type),
       isMapLine: isMapLine(props.chart.type),