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>