CN-627 Dashboard - network overview - 表格组件开发

src/assets/css/components/index.scss

@@ -49,4 +49,5 @@
 @import 'views/charts/NetworkOverviewLine';
 @import 'views/charts/NetworkOverviewDdosDetection';
 @import 'views/charts/NetworkOverviewPerformanceEvent';
+@import 'views/charts2/networkOverviewTabs';
 //@import '../chart';

src/assets/css/components/views/charts2/networkOverviewTabs.scss

@@ -0,0 +1,110 @@
+.tabs {
+  height:100%;
+  .cn-chart__tabs {
+    height:100%;
+    background-color:white;
+    .tab-pane {
+      height:100%;
+      border: 1px solid #e4e7ed;
+      padding:1px;
+      border-radius: 5px;
+      .tab-table {
+        color:#484949;
+        font-size:12px;
+        border:0px;
+      }
+      .data-total{
+        display: flex !important;
+      }
+      .data-total-trend {
+        display: flex;
+        margin-left: 10px;
+        align-items: center;
+        justify-content: center;
+        margin-top: 2px;
+      }
+      .data-total-trend-black {
+        background-color: #ededed;
+        border-radius: 18px;
+        width: 36px;
+        height: 18px;
+      }
+      .data-total-trend-green {
+        background-color: #eef2e8;
+        border-radius: 25px;
+        width: 50px;
+        height: 18px;
+        color:#94b072;
+      }
+      .data-total-trend-red {
+        background-color: #fbebe9;
+        border-radius: 25px;
+        width: 50px;
+        height: 18px;
+        color:#e97367;
+      }
+      .el-table--group::after,.el-table--border::after, .el-table::before {
+        height: 0px;
+      }
+    }
+    .el-tabs__nav-wrap::after {
+      height: 1px;
+      background-color: white ;
+    }
+    &>.el-tabs__header {
+      margin-bottom: 10px;
+    }
+    .el-tabs__nav.is-top {
+      margin-left:8px;
+      .el-tabs__active-bar {
+        display: none;
+      }
+      .el-tabs__item {
+        padding: 0 8px;
+        font-size:12px;
+        font-weight: bold;
+        color:#838383;
+      }
+      .el-tabs__item.is-top.is-active {
+        border-bottom: 2px solid #0091ff;
+        color:#0091ff;
+        height: 35px;
+      }
+    }
+    &>.el-tabs__content {
+      height: calc(100% - 40px);
+      border:none;
+    }
+  }
+  .tab-search {
+    position:absolute;
+    right:20px;
+    height:40px;
+    top:0px;
+    display:flex;
+    font-size:12px;
+    align-items: center;
+    .search-select {
+      margin-right:10px;
+      .option__select.select-column {
+        .el-input__inner {
+          width: 86px;
+          padding-left: 8px;
+          color:#2C72C6;
+          font-weight:400;
+        }
+      }
+      .option-popper {
+        .el-select-dropdown__item {
+          height: 24px;
+          line-height: 24px;
+          font-size: 12px;
+        }
+      }
+
+    }
+    .search-customize-tab {
+      color:#69a7de;
+    }
+  }
+}

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1653978200371') format('woff2'),
-       url('iconfont.woff?t=1653978200371') format('woff'),
-       url('iconfont.ttf?t=1653978200371') format('truetype');
+  src: url('iconfont.woff2?t=1657611740064') format('woff2'),
+       url('iconfont.woff?t=1657611740064') format('woff'),
+       url('iconfont.ttf?t=1657611740064') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,94 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-Detection:before {
+  content: "\e792";
+}
+
+.cn-icon-Entity:before {
+  content: "\e793";
+}
+
+.cn-icon-Case:before {
+  content: "\e794";
+}
+
+.cn-icon-Hunt:before {
+  content: "\e795";
+}
+
+.cn-icon-Report1:before {
+  content: "\e796";
+}
+
+.cn-icon-a-KnowledgeBase:before {
+  content: "\e797";
+}
+
+.cn-icon-constant:before {
+  content: "\e78f";
+}
+
+.cn-icon-decline:before {
+  content: "\e790";
+}
+
+.cn-icon-rise1:before {
+  content: "\e791";
+}
+
+.cn-icon-sort:before {
+  content: "\e78c";
+}
+
+.cn-icon-a-NetworkAnalytics:before {
+  content: "\e786";
+}
+
+.cn-icon-navigation:before {
+  content: "\e787";
+}
+
+.cn-icon-up:before {
+  content: "\e788";
+}
+
+.cn-icon-left:before {
+  content: "\e789";
+}
+
+.cn-icon-a-NetworkPerformanceEvent:before {
+  content: "\e78a";
+}
+
+.cn-icon-refresh1:before {
+  content: "\e78b";
+}
+
+.cn-icon-a-DDosDetection:before {
+  content: "\e78d";
+}
+
+.cn-icon-Setting1:before {
+  content: "\e78e";
+}
+
+.cn-icon-add1:before {
+  content: "\e783";
+}
+
+.cn-icon-down:before {
+  content: "\e784";
+}
+
+.cn-icon-right:before {
+  content: "\e785";
+}
+
+.cn-icon-Data:before {
+  content: "\e782";
+}
+
 .cn-icon-a-:before {
   content: "\e77b";
 }

src/utils/constants.js

@@ -153,6 +153,18 @@ export const listScrollPath = [
   '/detection/securityEvent'
 ]
 
+export const networkOverviewTable = [
+  'network.categories',
+  'network.providers',
+  'network.countries',
+  'network.applications',
+  'network.clientIps',
+  'network.serverIps',
+  'network.protocols',
+  'network.hosts',
+  'network.snis'
+]
+
 export const dnsServerRole = {
   RTDNS: 'RTDNS',
   TLDNS: 'TLDNS',

src/views/charts2/Chart.vue

@@ -14,6 +14,9 @@
         v-else-if="chart.type === typeMapping.networkOverview.performanceEvent"
         :chart="chart"
     ></network-overview-performance-event>
+    <network-overview-tabs
+         v-else-if="chart.type === typeMapping.networkOverview.table"
+    ></network-overview-tabs>
   </div>
 </template>
 
@@ -24,6 +27,7 @@ import { typeMapping } from '@/views/charts2/chart-tools'
 import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine'
 import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection'
 import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent'
+import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
 export default {
   name: 'Chart',
   components: {
@@ -31,7 +35,8 @@ export default {
     ChartNoData,
     NetworkOverviewLine,
     NetworkOverviewDdosDetection,
-    NetworkOverviewPerformanceEvent
+    NetworkOverviewPerformanceEvent,
+    NetworkOverviewTabs
   },
   props: {
     chart: Object

src/views/charts2/charts/NetworkOverviewTabs.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="tabs">
+    <el-tabs v-model="activeTab"
+             class="cn-chart__tabs"
+             @tab-click="handleClick"
+    >
+      <el-tab-pane  v-for="(tab,index) in networkOverviewTable"
+                    :label="$t(tab)"
+                    :name="tab"
+                    :key="index"
+                    :ref="`chart-tab-${index}`"
+                    class="tab-pane"
+
+      >
+
+        <el-table
+                id="tabTable"
+                ref="dataTable"
+                :data="tableData"
+                border
+                :cell-style="tableCellStyle"
+                :header-cell-style="tableHeaderCellStyle"
+                class="tab-table"
+                height="100%"
+        >
+          <el-table-column
+                  v-for="(item, index) in customTableTitles"
+                  class="data-column"
+          >
+            <template #header>
+              <span class="data-column__span">{{$t(item.label)}}</span>
+            </template>
+            <template  #default="scope" :column="item">
+              <div class="data-total" >
+                {{scope.row[item.prop]}}
+                <template v-if="item.prop === 'total'"  >
+                  <div v-if="scope.row['trend'] === 'up'" class="data-total-trend data-total-trend-red">
+                    <i class="cn-icon-rise1 cn-icon"></i>{{scope.row['trendValue']}}
+                  </div>
+                  <div v-else-if="scope.row['trend'] === 'down'" class="data-total-trend data-total-trend-green">
+                    <i class="cn-icon-decline cn-icon"></i>{{scope.row['trendValue']}}
+                  </div>
+                  <div v-else class="data-total-trend data-total-trend-black">
+                    <i class="cn-icon-constant cn-icon"></i>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+
+      </el-tab-pane>
+
+    </el-tabs>
+    <div class="tab-search" >
+      <div class="search-select" >
+        <span class="margin-r-10">{{$t('network.metric')}}:</span>
+        <el-select v-model="metric"
+                   class="option__select select-column"
+                   placeholder=""
+                   popper-class="option-popper"
+                   size="mini">
+          <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="search-customize-tab">
+        <i class="cn-icon-gear cn-icon"></i>  {{$t('network.customizeTabs')}}
+      </div>
+
+    </div>
+  </div>
+
+</template>
+<script>
+import _ from 'lodash'
+import { ref } from 'vue'
+import { networkOverviewTable } from '@/utils/constants'
+
+export default {
+  name: 'NetworkOverviewTable',
+  data () {
+    return {
+      metric: '',
+      options: [
+        {
+          value: 'Bits',
+          label: 'Bits'
+        }
+      ],
+      tableData: [
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'up',
+          trendValue: '33%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trendValue: '6%',
+          trend: '',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'up',
+          trendValue: '6%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: '',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'up',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        },
+        {
+          categories: 'cate',
+          total: 10,
+          trend: 'down',
+          trendValue: '2%',
+          inbound: 0.1,
+          outbound: 0.89
+        }
+      ],
+      customTableTitles: [
+        { label: 'network.categories', prop: 'categories' },
+        { label: 'network.total', prop: 'total' },
+        { label: 'network.inbound', prop: 'inbound' },
+        { label: 'network.outbound', prop: 'outbound' }
+      ]
+    }
+  },
+  methods: {
+    handleClick (tab) {
+      console.log(tab)
+      this.customTableTitles[0].label = tab.paneName
+      // this.activeTab = tab.paneName
+    },
+    tableCellStyle ({ row, column, rowIndex, columnIndex }) {
+      let style = 'border-right:0px;padding:7px 0 !important;'
+      if (rowIndex === this.tableData.length - 1) {
+        style = style + 'border-bottom:0px !important;'
+      }
+      if (columnIndex === 0) {
+        style = style + 'color:#69a7de;'
+      }
+      return style
+    },
+    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
+      return 'border-right:0px;font-size:12px;color:#656565;padding:7px 0 !important;'
+    }
+  },
+  setup (props) {
+    let activeTab = ref(networkOverviewTable[0])
+    if (props.chartInfo) {
+      if (!_.isEmpty(props.chartInfo.children)) {
+        activeTab = `${props.chartInfo.children[0].id}`
+      }
+      // const dataList = [...props.chartInfo.children]
+    }
+
+    return {
+      activeTab,
+      networkOverviewTable
+
+      // dataList
+    }
+  }
+}
+</script>