CN-229 Cyptocurrency--挖矿事件统计新图表开发

CN-230 Cyptocurrency--矿机所属单位新图表开发
2021-12-13 10:16:41 +08:00
parent 88b3cf1351
commit cbcd837031
4 changed files with 796 additions and 269 deletions
--- a/src/components/charts/ChartTableActiveIp.vue
+++ b/src/components/charts/ChartTableActiveIp.vue
@@ -22,8 +22,8 @@
      >
        <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" >
+              <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>
@@ -85,7 +85,7 @@ export default {

 <style>

-  .header__icon {
+  .active-ip__icon {
    overflow: hidden;
    position: absolute;
    top: 8px;
@@ -103,7 +103,7 @@ export default {
  .ip-green {
    color: #23BF9A;
  }
-  .content__name {
+  .active-ip__content {
    position: absolute;
    top: 7px;
    left: 35px;
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -11,9 +11,13 @@ export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
  '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
  '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
  '#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
+export const chartBarColor = [ '#0F8AB2', '#57CBAC']
 export function getChartColor (index) {
  return chartColor[index % chartColor.length]
 }
+export function getCharBartColor (index) {
+  return chartBarColor[index % chartBarColor.length]
+}
 const line = {
  tooltip: {
    appendToBody: true,
@@ -464,11 +468,116 @@ const ipOpenPortBar = {
    barCategoryGap: '10%'
  }]
 }
+const categoryBar = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    formatter: categoryVerticalFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'category',
+    axisTick: { show: false },
+    axisLine: { show: false }
+  },
+  grid: {
+    top: 20,
+    left: 10,
+    right: 25,
+    bottom: 20,
+    containLabel:true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: { show: false },
+    axisLine: { show: false }
+  },
+  color:chartColor,
+  series: [{
+    barWidth: 15,
+    data: [],
+    type: 'bar',
+    label: { show: false},
+    barCategoryGap: '10%',
+    itemStyle: {
+        color:  function(params) {
+          return getCharBartColor([params.dataIndex])
+        },
+    }
+  }]
+}
+
+const timeBar = {
+  tooltip: {
+    appendToBody: true,
+    trigger: 'axis',
+    textStyle: {
+      width: '20px',
+      overflow: 'truncate'
+    },
+    formatter: timeVerticalFormatter,
+    show: true,
+    className: 'nz-chart-tooltip',
+    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+  },
+  xAxis: {
+    type: 'time',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: {
+      interval: 0,
+      //rotate: -40, //设置日期显示样式（倾斜度）
+      formatter: function (value) {//在这里写你需要的时间格式
+        var t_date = new Date(value);
+        return [t_date.getMonth() + 1, t_date.getDate()].join('/')+ " " + [t_date.getHours(), t_date.getMinutes()].join(':');
+      }
+    }
+  },
+  grid: {
+    top: 20,
+    left: 25,
+    right: 25,
+    bottom: 20,
+    containLabel:true
+  },
+  yAxis: {
+    type: 'value',
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: {
+      formatter: function (value, index, a, b) {
+        return unitConvert(value, unitTypes.number).join(' ')
+      }
+    },
+    minInterval: 1
+  },
+  color:chartColor,
+  series: [{
+    barWidth: 15,
+    data: [],
+    type: 'bar',
+    label: { show: false},
+    barCategoryGap: '10%',
+    itemStyle: {
+      color:  function(params) {
+        return getCharBartColor([params.dataIndex])
+      },
+    }
+  }]
+}
 const typeOptionMappings = [
  { value: 11, option: line }, // 常规折线图
  { value: 12, option: lineWithStatistics }, // 带统计表格的折线图
  { value: 13, option: lineStack }, // 折线堆叠图
  { value: 22, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
+  { value: 23, option: timeBar }, // 矿机所属单位
+  { value: 24, option: categoryBar }, // 挖矿事件统计
  { value: 31, option: pieWithTable }, // 常规折线图
  { value: 33, option: ipHostedDomain }, // ip详情--托管域名
  { value: 34, option: ipHostedDomain }, // app详情--相关域名
@@ -499,6 +608,14 @@ export function getTypeCategory (type) {
    return typeCategory.TABS
  }
 }
+/* 柱状图:挖矿事件统计(time类型柱状图) */
+export function isEchartsTimeBar (type) {
+  return type == 23
+}
+/* 柱状图:矿机所属单位(category类型柱状图) */
+export function isEchartsCategoryBar (type) {
+  return type == 24
+}
 /* 饼图柱状图等 */
 export function isEcharts (type) {
  return type >= 11 && type <= 50
@@ -631,3 +748,69 @@ function axiosFormatter (params) {
  str += '</div>'
  return str
 }
+
+export function timeVerticalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[0]
+    if (i === 0) {
+      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 += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(item.data[1], item.data[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+
+export function timeHorizontalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    const tData = item.data[1]
+    if (i === 0) {
+      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 += item.marker
+    str += `<span class="cn-chart-tooltip-content"> 
+        ${item.seriesName}
+    </span>`
+    str += `<span class="cn-chart-tooltip-value">
+        ${unitConvert(item.data[0], item.data[2]).join(' ')}
+    </span>`
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+export function categoryHorizontalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.data[1]+': ' + item.data[0]
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
+export function categoryVerticalFormatter (params) {
+  let str = '<div>'
+  params.forEach((item, i) => {
+    str += '<div class="cn-chart-tooltip-box">'
+    str += item.data[0]+': ' + item.data[1]
+    str += '</div>'
+  })
+  str += '</div>'
+  return str
+}
--- a/src/components/rightBox/settings/ChartBox.vue
+++ b/src/components/rightBox/settings/ChartBox.vue
@@ -56,7 +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.cyptocurrency" :label="$t('overall.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>
@@ -131,16 +131,16 @@
 </template>

 <script>
-import rightBoxMixin from '@/mixins/rightBox'
-import { get, post, put } from '@/utils/http'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
-import { api } from '@/utils/api'
-import { VAceEditor } from 'vue3-ace-editor'
-import 'ace-builds/src-noconflict/mode-javascript'
-import 'ace-builds/src-noconflict/mode-json'
-import 'ace-builds/src-noconflict/theme-chrome'
+  import rightBoxMixin from '@/mixins/rightBox'
+  import { get, post, put } from '@/utils/http'
+  import { panelTypeAndRouteMapping } from '@/utils/constants'
+  import { api } from '@/utils/api'
+  import { VAceEditor } from 'vue3-ace-editor'
+  import 'ace-builds/src-noconflict/mode-javascript'
+  import 'ace-builds/src-noconflict/mode-json'
+  import 'ace-builds/src-noconflict/theme-chrome'

-export default {
+  export default {
    name: 'ChartBox',
    mixins: [rightBoxMixin],
    components: {
@@ -287,6 +287,14 @@ export default {
            value: 22,
            label: 'bar-2',
            remark: '开放端口'
+          }, {
+            value: 23,
+            label: 'bar-3',
+            remark: '挖矿事件统计(time类型柱状图)'
+          }, {
+            value: 24,
+            label: 'bar-4',
+            remark: '矿机所属单位(category类型柱状图)'
          },
          {
            value: 32,
@@ -324,6 +332,11 @@ export default {
            value: 84,
            label: 'list-2',
            remark: 'DNS记录'
+          },
+          {
+            value: 85,
+            label: 'list-3',
+            remark: '近期挖矿事件'
          }
        ]
      }
@@ -393,7 +406,7 @@ export default {
        // this.$set(this.editObject, 'pid', '')
      }
    }
-}
+  }
 </script>
 <style lang="scss">
  .my-editor {
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -113,7 +113,7 @@
          <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
        </template>
      </el-popover>
-      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+      <span class="header__operation-btn" @click="refresh" ><i class="cn-icon cn-icon-refresh"></i></span>
    </template>
    <template #default>
      <!-- IP详情 开放端口 -->
@@ -271,6 +271,7 @@
          </template>
        </el-select>
      </div>
+      <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
    </template>
  </chart-table-active-ip>
  <!-- 表格 -->
@@ -536,6 +537,8 @@ import {
  layoutConstant,
  isEchartsWithTable,
  isEchartsWithStatistics,
+  isEchartsTimeBar,
+  isEchartsCategoryBar,
  isMapLine,
  isMapBlock,
  isSingleValueWithEcharts,
@@ -550,7 +553,8 @@ import {
  isDomainDnsRecord,
  isAppBasicInfo,
  isAppRelatedDomain,
-  getChartColor
+  getChartColor, chartBarColor,timeVerticalFormatter,timeHorizontalFormatter,
+  categoryHorizontalFormatter,categoryVerticalFormatter, getCharBartColor
 } from '@/components/charts/chart-options'
 import ChartError from '@/components/charts/ChartError'
 import EchartsFrame from '@/components/charts/EchartsFrame'
@@ -630,7 +634,6 @@ export default {
            num: 345
          }
        ], // table的所有数据
-        currentPageData: [] // table当前页的数据
      },
      pieTableData: [],
      singleValue: {
@@ -708,7 +711,11 @@ export default {
              this.initIpHostedDomain(chartParams)
            } else if (this.isAppRelatedDomain) {
              this.initAppRelatedDomain(chartParams)
-            } else {
+            } else if (this.isEchartsTimeBar) {
+              this.initEchartsTimeBar(chartParams)
+            }else if (this.isEchartsCategoryBar) {
+              this.initEchartsCategoryBar(chartParams)
+            } else{
              this.initECharts(chartParams)
            }
          }
@@ -1646,6 +1653,328 @@ export default {
        }, 250)
      })
    },
+
+    handleTimeChartOption(chartParams,dataArray){
+      let direction = 'vertical'
+      if(chartParams.direction){
+        direction = chartParams.direction
+        if(direction=='horizontal'){//柱状图水平方向
+          this.chartOption.xAxis = {
+            axisTick: { show: false },
+            axisLine: { show: false },
+            type: 'value',
+            axisLabel: {
+              formatter: function (value, index, a, b) {
+                return unitConvert(value, unitTypes.number).join(' ')
+              }
+            },
+          }
+
+          this.chartOption.yAxis = {
+            type: 'category',
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              interval: 0,
+              //rotate: -40, //设置日期显示样式（倾斜度）
+              formatter: function (value) {//在这里写你需要的时间格式
+                return window.$dayJs.tz(Number(value)).format('M/D H:m')
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+          }
+        } else if(direction=='vertical'){//柱状图竖直方向
+          this.chartOption.yAxis = {
+            axisTick: { show: false },
+            axisLine: { show: false },
+            type: 'value',
+            axisLabel: {
+              formatter: function (value, index, a, b) {
+                return unitConvert(value, unitTypes.number).join(' ')
+              }
+            },
+            minInterval: 1
+          }
+          this.chartOption.xAxis = {
+            type: 'category',
+            axisTick: { show: false },
+            axisLine: { show: false },
+            axisLabel: {
+              interval: 0,
+              //rotate: -40, //设置日期显示样式（倾斜度）
+              formatter: function (value) {//在这里写你需要的时间格式
+                return window.$dayJs.tz(Number(value)).format('M/D H:m')
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+          }
+        }
+      }
+
+      let itemColorAlternately = false//true|false 柱体色是否轮替
+      if(chartParams.itemColorAlternately){
+        itemColorAlternately = chartParams.itemColorAlternately
+      }
+
+      this.chartOption.tooltip = {
+        ...this.chartOption.tooltip,
+        formatter: (direction=='horizontal')?timeHorizontalFormatter:timeVerticalFormatter
+      }
+
+      this.chartOption.series =  {
+        ...this.chartOption.series[0],
+        name: this.chartInfo.name,
+        data: dataArray,
+        itemStyle: {
+          color:  function(params) {
+            if(itemColorAlternately){
+              return getCharBartColor([params.dataIndex])
+            }else {
+              return getCharBartColor(0)
+            }
+          },
+        }
+      }
+    },
+
+    initEchartsTimeBar (chartParams) {
+      const queryParams = { ...this.queryTimeRange, ...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
+          }
+
+          let dataArray = []
+          if(chartParams.direction=='vertical') {//柱状图竖直方向
+            dataArray = response.data.result[0].values.map((r, i) => {
+              return  [Number(r[0]),Number(r[1]),chartParams.unitType]
+            })
+          }else if(chartParams.direction=='horizontal') {//柱状图水平方向
+            dataArray = response.data.result[0].values.map((r, i) => {
+              return  [ Number(r[1]),Number(r[0]),chartParams.unitType]
+            })
+          }
+
+          this.handleTimeChartOption(chartParams,dataArray)
+        } else {
+          this.isError = true
+          this.noData = true
+          this.errorInfo = response.msg || response.message || 'Unknown'
+
+          //产生测试数据
+          this.initTestTimeBarData(chartParams)
+        }
+        this.myChart.setOption(this.chartOption)
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
+      })
+    },
+
+    initTestTimeBarData(chartParams){
+      this.noData = false
+      let data = [[1612113120000, "9"], [1612113220000, "2"],[1612113320000, "3"], [1612113420000, "4"],[1612113520000, "1"],[1612113620000, "5"],[1612113720000, "7"],[1612113820000, "9"]]
+      let dataArray = []
+      if(chartParams.direction=='vertical') {//柱状图竖直方向
+        dataArray = data.map((r, i) => {
+          return  [r[0],Number(r[1]),chartParams.unitType]
+        })
+      }else if(chartParams.direction=='horizontal') {//柱状图水平方向
+        dataArray = data.map((r, i) => {
+          return  [ Number(r[1]),r[0],chartParams.unitType]
+        })
+      }
+
+      this.handleTimeChartOption(chartParams,dataArray)
+    },
+
+    initEchartsCategoryBar (chartParams) {
+      const queryParams = { ...this.queryTimeRange, ...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
+          }
+
+          let dataArray = []
+          if(chartParams.direction=='horizontal'){//柱状图水平方向
+            dataArray = response.data.result.map((r, i) => {return [r.num,r.name]})
+          } else if(chartParams.direction=='vertical'){//柱状图竖直方向
+            dataArray = response.data.result.map((r, i) => {return [r.name,r.num]})
+          }
+          this.handleCategoryChartOption(chartParams,dataArray)
+        } else {
+          this.isError = true
+          this.noData = true
+          this.errorInfo = response.msg || response.message || 'Unknown'
+
+          //产生测试数据
+          this.initTestCategoryBarData(chartParams)
+        }
+        this.myChart.setOption(this.chartOption)
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+          this.$nextTick(() => {
+            this.echartsResize()
+          })
+        }, 250)
+      })
+    },
+
+    handleCategoryChartOption(chartParams,dataArray){
+      let xType = 'category'
+      let yType = 'value'
+      let direction = 'vertical'
+      if(chartParams.direction){
+          direction = chartParams.direction
+          if(direction=='horizontal'){//柱状图水平方向
+            xType = 'value'
+            yType = 'category'
+          } else if(direction=='vertical'){//柱状图竖直方向
+            xType = 'category'
+            yType = 'value'
+          }
+      }
+
+      let itemColorAlternately = false//true|false 柱体色是否轮替
+      if(chartParams.itemColorAlternately){
+        itemColorAlternately = chartParams.itemColorAlternately
+      }
+
+      this.chartOption.tooltip = {
+        ...this.chartOption.tooltip,
+        formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
+      }
+      this.chartOption.xAxis = {
+        ...this.chartOption.xAxis,
+        type: xType
+      }
+      this.chartOption.yAxis = {
+        ...this.chartOption.yAxis,
+        type: yType
+      }
+      this.chartOption.series =  {
+        ...this.chartOption.series[0],
+        data: dataArray,
+        itemStyle: {
+          color:  function(params) {
+            if(itemColorAlternately){
+              return getCharBartColor([params.dataIndex])
+            }else {
+              return getCharBartColor(0)
+            }
+          },
+        }
+      }
+    },
+
+    initTestCategoryBarData(chartParams){
+      this.noData = false
+
+      let xType = 'category'
+      let yType = 'value'
+      let direction = 'vertical'
+      if(chartParams.direction){
+        direction = chartParams.direction
+        if(direction=='horizontal'){//柱状图水平方向
+          xType = 'value'
+          yType = 'category'
+        } else if(direction=='vertical'){//柱状图竖直方向
+          xType = 'category'
+          yType = 'value'
+        }
+      }
+
+      let itemColorAlternately = false//true|false 柱体色是否轮替
+      if(chartParams.itemColorAlternately){
+        itemColorAlternately = chartParams.itemColorAlternately
+      }
+
+      let dataArray = []
+      if(direction=='horizontal'){//柱状图水平方向
+        dataArray =  [
+          [240,'中国出版集团公司'],
+          [200,'中国铁路总公司'],
+          [175,'中国烟草总公司'],
+          [140,'中国邮政集团公司'],
+          [99,'中国石油天然气集团公司']
+        ]
+      } else if(direction=='vertical'){//柱状图竖直方向
+        dataArray =  [
+            ['中国出版集团公司',240],
+            ['中国铁路总公司',200],
+            ['中国烟草总公司',175],
+            ['中国邮政集团公司',140],
+            ['中国石油天然气集团公司',99]
+        ]
+      }
+
+      this.chartOption = {
+        tooltip: {
+          appendToBody: true,
+          trigger: 'axis',
+          textStyle: {
+            width: '20px',
+            overflow: 'truncate'
+          },
+          formatter: (direction=='horizontal')?categoryHorizontalFormatter:categoryVerticalFormatter,
+          show: true,
+          className: 'nz-chart-tooltip',
+          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);max-width: 300px !important'
+        },
+        xAxis:{
+          type: xType,
+          axisTick: { show: false },
+          axisLine: { show: false }
+        },
+        yAxis:{
+          type: yType,
+          axisTick: { show: false },
+          axisLine: { show: false }
+        },
+        grid: {
+          top: 20,
+          left: 10,
+          right: 25,
+          bottom: 20,
+          containLabel:true
+        },
+        color:chartBarColor,
+        series: [{
+          barWidth: 15,
+          data: dataArray,
+          type: 'bar',
+          label: {show: false},
+          barCategoryGap: '10%',
+          itemStyle: {
+            color:  function(params) {
+              if(itemColorAlternately){
+                return getCharBartColor([params.dataIndex])
+              }else {
+                return getCharBartColor(0)
+              }
+            },
+          }
+        }]
+      }
+    },
+
    initEchartsWithStatistics (chartParams) {
      const queryParams = { ...this.queryTimeRange, ...this.entity }
      get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
@@ -1959,6 +2288,8 @@ export default {
      chartActiveIpTableOrderOptions,
      chartPieTableTopOptions,
      isEcharts: isEcharts(props.chart.type),
+      isEchartsTimeBar:isEchartsTimeBar(props.chart.type),
+      isEchartsCategoryBar:isEchartsCategoryBar(props.chart.type),
      isEchartsWithTable: isEchartsWithTable(props.chart.type),
      isEchartsWithStatistics: isEchartsWithStatistics(props.chart.type),
      isSingleValue: isSingleValue(props.chart.type),