feat: 特殊 ip 列表重构

src/assets/css/components/views/charts/panel.scss

@@ -499,7 +499,9 @@
               height: calc(100% - 40px);
             }
           }
-          &>.cn-chart__table,{
+          &>.cn-chart__table{
+            height: 100%;
+            width: 100%;
             .cn-chart__header {
               border-bottom: 1px solid $--content-right-background-color;
               .header__operations {
@@ -580,6 +582,8 @@
             .cn-chart__body {
               flex: auto;
               overflow-y: auto;
+              height: 100%;
+              width: 100%;
 
               .el-table {
                 padding: 0 10px;
@@ -601,6 +605,30 @@
                   color: #333;
                 }
               }
+              .active-ip__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;
+              }
+              .active-ip__content {
+                position: absolute;
+                top: 7px;
+                left: 35px;
+                overflow: hidden;
+              }
             }
           }
           &>.cn-chart__echarts {

src/views/charts/Chart2.vue

@@ -79,7 +79,7 @@
       ></chart-ip-open-port-bar>
 
       <chart-table
-        v-else-if="isTable"
+        v-else-if="isTable && isCurrentTable"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :table="table"
@@ -91,6 +91,7 @@
           v-else-if="isActiveIpTable"
           :chart-info="chartInfo"
           :chart-data="chartData"
+          :table="table"
           :query-params="queryParams"
       ></chart-active-ip-table>
 
@@ -149,6 +150,7 @@ import {
   isEchartsLine,
   isSingleValue,
   isTable,
+  isCurrentTable,
   isActiveIpTable,
   isTitle,
   isMap,
@@ -214,7 +216,7 @@ export default {
   },
   computed: {
     isNoData () {
-      return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList
+      return !this.loading && (_.isEmpty(this.chartData) || this.isError) && !this.isSingleValue && !this.isTabs && !this.isDomainDnsRecord && !this.isCryptocurrencyEventList && !this.isActiveIpTable
     },
     chartOption () {
       if (this.customChartOption) {
@@ -246,6 +248,7 @@ export default {
       isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(props.chartInfo.type),
       isRelationShip: isRelationShip(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),
+      isCurrentTable: isCurrentTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
       isMap: isMap(props.chartInfo.type),
       isTitle: isTitle(props.chartInfo.type),

src/views/charts/ChartHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
-    <div class="chart-header__title" v-if="!isTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
+    <div class="chart-header__title" v-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
-    <template v-if="isTable">
+    <template v-if="isCurrentTable">
       <div class="chart-header__title">
         <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
         <span
@@ -10,7 +10,7 @@
         >
           as&nbsp;<span style="text-transform: capitalize">{{chartInfo.params.as}}</span>
         </span>
-      </div>
+      </div >
       <div class="header__operations">
         <el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
           <template>
@@ -47,8 +47,27 @@
         <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
       </div>
     </template>
+    <template v-else-if="isActiveIpTable">
+      <div class="header__operations">
+        <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>
+      </div>
+    </template>
+
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isTable">
+    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable">
       <div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
         <date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
         <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
@@ -66,11 +85,11 @@
 </template>
 
 <script>
-import { isTitle, isTabs, isBlock, isTable } from './charts/tools'
+import {isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable} from './charts/tools'
 import ChartError from '@/components/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
-import {chartTableTopOptions} from "@/utils/constants";
+import {chartTableTopOptions, chartActiveIpTableOrderOptions} from "@/utils/constants";
 
 export default {
   name: 'ChartHeader',
@@ -92,7 +111,35 @@ export default {
   data () {
     return {
       dropdownMenuShow: false,
-      errorText: ''
+      errorText: '',
+
+      activeIpTable: { // ActiveIpTable select
+        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的所有数据
+      },
     }
   },
   methods: {
@@ -113,6 +160,9 @@ export default {
     },
     tableLimitChange () {
       this.$emit('tableChange')
+    },
+    activeIpTableLimitChange () {
+      this.$emit('tableChange')
     }
   },
   setup (props) {
@@ -123,10 +173,13 @@ export default {
     return {
       chartTimeFilter,
       chartTableTopOptions,
+      chartActiveIpTableOrderOptions,
       isTitle: isTitle(props.chartInfo.type),
       isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type),
-      isTable: isTable(props.chartInfo.type)
+      isTable: isTable(props.chartInfo.type),
+      isCurrentTable: isCurrentTable(props.chartInfo.type),
+      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
     }
   }
 }

src/views/charts/charts/ChartActiveIpTable.vue

@@ -1,13 +1,99 @@
 <template>
-  <div>1</div>
+  <div class="cn-chart__table">
+    <div class="cn-chart__body">
+      <el-table
+          style="width: 100%"
+          tooltip-effect="light"
+          :data="activeIpTable.tableData"
+          :show-header="false"
+          :cell-style="{padding:'7px 0'}"
+      >
+        <el-table-column>
+          <template #default="{ row }">
+            <div class="active-ip__icon"><i class="cn-icon cn-icon-ip ip-green"></i></div>
+            <div class="active-ip__content" >
+              {{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 table.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>
 </template>
 
 <script>
+import {unitTypes} from '@/utils/constants'
+import unitConvert from '@/utils/unit-convert'
 export default {
-  name: "ChartActiveIpTable"
+  name: "ChartActiveIpTable",
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    queryParams: Object,
+    table: Object
+  },
+  data () {
+    return {
+      unitConvert,
+      unitTypes,
+      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的所有数据
+      }
+    }
+  },
+  mounted() {
+    console.log(this.chartData)
+  }
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/charts/charts/tools.js

@@ -101,6 +101,10 @@ export function isEchartsWithTable (type) {
 export function isTable (type) {
   return type >= 61 && type <= 70
 }
+/* current table */
+export function isCurrentTable (type) {
+  return type === 61
+}
 /* table */
 export function isActiveIpTable (type) {
   return type === 63
@@ -139,7 +143,7 @@ export function isDomainWhois (type) {
 }
 /* DOMAIN实体DNS记录 */
 export function isDomainDnsRecord (type) {
-  return type === 84
+  return type === 62
 }
 /* 近期挖矿事件 */
 export function isCryptocurrencyEventList (type) {