feat：type 22 （30%）

src/assets/css/components/index.scss

@@ -19,4 +19,5 @@
 @import './views/entityExplorer/entityList/row';
 @import 'views/entityExplorer/entityList/detail-overview';
 @import './views/charts/panel';
+@import 'views/charts/ChartIpOpenPortBar';
 //@import '../chart';

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

@@ -0,0 +1,24 @@
+.chart-ip-open-port-bar {
+    display: flex;
+    .el-table--border td{
+        border: none !important;
+    }
+    .el-table--border th{
+        border-right: none !important;
+    }
+    .chart-box{
+        width: 30%;
+        height: 100%;
+        border: 1px solid #EBEEF5;
+        >.title{
+            height: 36px;
+            line-height: 36px;
+            box-sizing: border-box;
+            padding: 0 10px;
+            color: #909399;
+            font-size: 12px;
+            font-weight: bold;
+        }
+    }
+
+}

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

@@ -345,7 +345,9 @@
     border-left: 5px solid #aeaeae;
   }
 }
-
+.nz-chart-tooltip{
+  border-color: transparent !important;
+}
 .nz-chart-tooltip .cn-chart-tooltip-box{
   display: flex;
   .cn-chart-tooltip-content{

src/assets/css/themes/theme-light.scss

@@ -55,6 +55,7 @@ $--content-right-background-color: #EFF2F5; //右侧背景色
 $--background-color-empty: #fffffe;
 $--background-color-1: #EFEFEF;
 // 普通字色(覆盖element-ui内置变量)
+$--color-text: #333;
 $--color-text-regular: #666665;
 $--border-color-light: #E7EAED;
 $--chart-box-border-color: $--border-color-light;

src/views/charts/Chart2.vue

@@ -69,6 +69,15 @@
               @showLoading="showLoading"
       ></chart-category-bar>
 
+      <chart-ip-open-port-bar
+              v-else-if="isIpOpenPortBar"
+              :chart-info="chartInfo"
+              :chart-data="chartData"
+              :result-type="resultType"
+              :query-params="queryParams"
+              @showLoading="showLoading"
+      ></chart-ip-open-port-bar>
+
       <chart-table
         v-else-if="isTable"
         :chart-info="chartInfo"
@@ -93,7 +102,8 @@ import IpBasicInfo from '@/views/charts/charts/IpBasicInfo'
 import ChartEchartLine from './charts/ChartEchartLine'
 import ChartTimeBar from './charts/ChartTimeBar'
 import ChartCategoryBar from './charts/ChartCategoryBar'
-import ChartTable from "./charts/ChartTable";
+import ChartIpOpenPortBar from './charts/ChartIpOpenPortBar'
+import ChartTable from './charts/ChartTable'
 import {
   isEcharts,
   isEchartsLine,
@@ -107,6 +117,7 @@ import {
   isEchartsWithStatistics,
   isEchartsTimeBar,
   isEchartsCategoryBar,
+  isIpOpenPortBar,
   isMapLine,
   isMapBlock,
   isSingleValueWithEcharts,
@@ -140,7 +151,8 @@ export default {
     ChartEchartLine,
     ChartBlock,
     ChartTimeBar,
-    ChartCategoryBar
+    ChartCategoryBar,
+    ChartIpOpenPortBar
   },
   props: {
     chartInfo: Object,
@@ -181,6 +193,7 @@ export default {
       isEchartsLine: isEchartsLine(props.chartInfo.type),
       isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
       isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
+      isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
       isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
       isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
       isSingleValue: isSingleValue(props.chartInfo.type),

src/views/charts/PanelChart.vue

@@ -184,11 +184,12 @@ export default {
         const requestUrl = url || (chartParams && chartParams.url)
         if (requestUrl) {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-            console.log(testData)
             if (this.chartInfo.type === 23 && testData) {
               response = testData.data
             } else if (this.chartInfo.type === 24 && testData) {
               response = testData.data2
+            } else if (this.chartInfo.type === 22 && testData) {
+              response = testData.data3
             }
             if (response.code === 200) {
               this.chartData = response.data.result

src/views/charts/charts/ChartCategoryBar.vue

@@ -11,7 +11,7 @@ import { legendMapping } from '@/components/charts/chart-table-title'
 import {
   categoryBar
 } from '@/views/charts/charts/options/bar'
-import { getCharBartColor } from '@/views/charts/charts/tools'
+import { getCharBartColor, categoryBarTooltipFormatter } from '@/views/charts/charts/tools'
 
 export default {
   name: 'ChartCategoryBar',
@@ -33,6 +33,11 @@ export default {
       const dom = document.getElementById(id)
       !this.myChart && (this.myChart = echarts.init(dom))
       this.chartOption = this.$_.cloneDeep(categoryBar)
+      this.chartOption.tooltip.trigger = 'item'
+      this.chartOption.tooltip.formatter = (params) => {
+        const str = categoryBarTooltipFormatter(params, chartParams.direction)
+        return str
+      }
       if (!chartParams.itemColorAlternately) {
         this.chartOption.series[0].itemStyle.color = function (params) {
           return getCharBartColor(0)
@@ -50,9 +55,9 @@ export default {
       this.chartData.forEach((r, index) => {
         // chartParams.direction === 'vertical' ? r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]) : r.values.map(v => [Number(v[1]), Number(v[0]) * 1000, chartParams.unitType])
         if (chartParams.direction === 'horizontal') {
-          obj.data.push([Number(r.events), r.clientCountry + ' ' + r.clientRegion, r])
+          obj.data.push([Number(r.events), r.clientCountry + ' ' + r.clientRegion, chartParams.unitType])
         } else {
-          obj.data.push([r.clientCountry + ' ' + r.clientRegion, Number(r.events), r])
+          obj.data.push([r.clientCountry + ' ' + r.clientRegion, Number(r.events), chartParams.unitType])
         }
         return obj
       })

src/views/charts/charts/ChartIpOpenPortBar.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="chart-ip-open-port-bar">
+        <el-table
+                ref="table"
+                class="pie-table"
+                :data="tableData"
+                style="width: 70%;border-left: none;"
+                tooltip-effect="light"
+                border="none"
+                :size="'mini'"
+                :height="'100%'">
+            <el-table-column
+                    v-for="(item,index) in tableKey"
+                    :key="index"
+                    :label="item.label"
+                    :prop="item.prop"
+                    :min-width="item.width"
+            >
+                <template v-slot="scope" :column="item">
+                    <span v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+                    <template v-else>-</template>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="chart-box">
+            <div class="title">
+                Protocols statistics
+            </div>
+            <div class="chart-drawing" :id="`chart${chartInfo.id}`">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import lodash from 'lodash'
+export default {
+  name: 'ChartIpOpenPortBar',
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    resultType: Object,
+    queryParams: Object
+  },
+  data () {
+    return {
+      myChart: null,
+      chartOption: null,
+      tableData: [],
+      tableKey: [
+        {
+          label: 'Port',
+          prop: 'port',
+          width: '15%'
+        }, {
+          label: 'Protocol',
+          prop: 'protocol',
+          width: '20%'
+        }, {
+          label: 'Banner',
+          prop: 'banner',
+          width: '40%'
+        }, {
+          label: 'Updated at',
+          prop: 'utime',
+          width: '25%'
+        }
+      ]
+    }
+  },
+  methods: {
+    init (id) {
+      this.tableData = lodash.cloneDeep(this.chartData)
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler (n) {
+        console.log(n)
+        this.init(`chart${this.chartInfo.id}`)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/charts/charts/ChartTimeBar.vue

@@ -11,7 +11,7 @@ import { legendMapping } from '@/components/charts/chart-table-title'
 import {
   timeBar
 } from '@/views/charts/charts/options/bar'
-import { getCharBartColor } from '@/views/charts/charts/tools'
+import { getCharBartColor, timeBarTooltipFormatter } from '@/views/charts/charts/tools'
 
 export default {
   name: 'ChaetTimeBar',
@@ -33,6 +33,11 @@ export default {
       const dom = document.getElementById(id)
       !this.myChart && (this.myChart = echarts.init(dom))
       this.chartOption = this.$_.cloneDeep(timeBar)
+      this.chartOption.tooltip.trigger = 'item'
+      this.chartOption.tooltip.formatter = (params) => {
+        const str = timeBarTooltipFormatter(params, chartParams.direction)
+        return str
+      }
       if (!chartParams.itemColorAlternately) {
         this.chartOption.series[0].itemStyle.color = function (params) {
           return getCharBartColor(0)
@@ -107,6 +112,7 @@ export default {
         return allZero
       }
     }
+
   },
   watch: {
     chartData: {

src/views/charts/charts/options/bar.js

@@ -34,7 +34,7 @@ export const ipOpenPortBar = {
 export const categoryBar = {
   tooltip: {
     appendToBody: true,
-    trigger: 'axis',
+    trigger: 'item',
     textStyle: {
       width: '20px',
       overflow: 'truncate'

src/views/charts/charts/testData.js

@@ -59,8 +59,35 @@ const data2 = {
       clientRegion: 'ShangHai',
       clientId: 'CN',
       events: 13000
+    }, {
+      serverCountry: 'America2',
+      serverRegion: 'Washington2',
+      serverId: 'US',
+      clientCountry: 'China',
+      clientRegion: 'ShangHai2',
+      clientId: 'CN',
+      events: 13000
     }
     ]
   }
 }
-export default { data, data2 }
+const data3 = {
+  code: 200,
+  msg: '',
+  data: {
+    resultType: 'object',
+    result: [{
+      port: '80',
+      protocol: 'HTTP',
+      banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache',
+      utime: '2021-9-17 13:53:37'
+    }, {
+      port: '443',
+      protocol: 'HTTPS',
+      banner: 'Http/1.1 200 OK\r\nDate:2021-9-17 13:53:03\r\nServer: Apache',
+      utime: '2021-9-17 13:53:37'
+    }
+    ]
+  }
+}
+export default { data, data2, data3 }

src/views/charts/charts/tools.js

@@ -46,6 +46,9 @@ export function isEchartsTimeBar (type) {
 export function isEchartsCategoryBar (type) {
   return type === 24
 }
+export function isIpOpenPortBar (type) {
+  return type === 22
+}
 /* 饼图柱状图等 */
 export function isEcharts (type) {
   return type >= 11 && type <= 50
@@ -337,3 +340,60 @@ export function timeVerticalFormatter (params) {
   str += '</div>'
   return str
 }
+export function timeBarTooltipFormatter (params, type) {
+  console.log(params, type)
+  let index1, index0
+  if (type === 'vertical') {
+    index0 = 0
+    index1 = 1
+  } else {
+    index0 = 1
+    index1 = 0
+  }
+  let str = '<div>'
+  const tData = params.data[index0]
+  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 += params.marker
+  str += `<span class="cn-chart-tooltip-content"> 
+       values
+    </span>`
+  str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(params.data[index1], params.data[2]).join(' ')}
+    </span>`
+  str += '</div>'
+
+  str += '</div>'
+  return str
+}
+export function categoryBarTooltipFormatter (params, type) {
+  console.log(params, type)
+  let index1, index0
+  if (type === 'vertical') {
+    index0 = 0
+    index1 = 1
+  } else {
+    index0 = 1
+    index1 = 0
+  }
+  let str = '<div>'
+  str += '<div style="margin-bottom: 5px">'
+  str += params.data[index0]
+  str += '</div>'
+
+  str += '<div class="cn-chart-tooltip-box">'
+  // str += params.marker
+  str += `<span class="cn-chart-tooltip-content"> 
+       values
+    </span>`
+  str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(params.data[index1], params.data[2]).join(' ')}
+    </span>`
+  str += '</div>'
+
+  str += '</div>'
+  return str
+}