cyber-narrator-cn-ui/src/views/charts/PanelChart.vue

<template>
  <!-- chart外层箱子 -->
  <div :class="{'panel-chart--fullscreen': isFullscreen, 'panel-chart--title-chart': isTitle}" class="panel-chart" :id="isFullscreen ? ('chart-screen-' + chartInfo.id ) : ('chart-local-' + chartInfo.id)">
    <!-- title和工具栏，支持浮动 -->
    <chart-header
        v-if="!isFullscreen && showHeader"
        :is-error="isError"
        :error-info="errorInfo"
        :chart-data="chartData"
        :chart-info="chartInfo"
        @loadMore="loadMore"
        @refresh="refresh"
        @showFullscreen="showFullscreen"
    ></chart-header>
    <!-- chart -->
    <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
    <chart
        ref="chart"
        v-if="(!isGroup || !chartInfo.param.collapse) && !isTitle"
        :chart-data="chartData"
        :chart-info="chartInfo"
        :query-params="queryParams"
        :panel-lock="panelLock"
        :is-error="isError"
        :loading="loading"
        :is-fullscreen="isFullscreen"
        @showLoading="showLoading"
    ></chart>
  </div>
</template>

<script>
import ChartHeader from './ChartHeader'
import Chart from '@/views/charts/Chart2'
import {
  isEcharts,
  isSingleValue,
  isTable,
  isActiveIpTable,
  isTitle,
  isMap,
  isEchartsWithTable,
  isEchartsWithStatistics,
  isEchartsTimeBar,
  isEchartsCategoryBar,
  isMapLine,
  isMapBlock,
  isSingleValueWithEcharts,
  isSingleValueWithEchartsTemp,
  isRelationShip,
  isTabs,
  isGroup,
  isSankey,
  isIpBasicInfo,
  isIpOpenPort,
  isIpHostedDomain,
  isDomainWhois,
  isDomainDnsRecord,
  isCryptocurrencyEventList,
  isAppBasicInfo,
  isAppRelatedDomain,
  isBlock
} from './charts/tools'
import { tableTitleMapping } from '@/components/charts/chart-table-title'
import { replaceUrlPlaceholder } from '@/utils/tools'
import { getNowTime, getSecond } from '@/utils/date-util'
import { chartPieTableTopOptions, chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
import { get } from '@/utils/http'
import { ref } from 'vue'

export default {
  name: 'PanelChart',
  components: {
    ChartHeader,
    Chart
  },
  props: {
    chartInfo: Object, // 其中的param json串已转化为对象
    timeFilter: Object, // 时间范围
    isFullscreen: Boolean,
    panelLock: Boolean,
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      chartData: null, // 图表要渲染的数据，请求接口得到，传入chart组件，chart组件内除特别情况(多级)外不做查询
      loading: false,
      isError: false, // 接口响应是否报错
      errorInfo: '', // 接口具体错误信息
      queryTimeRange: { // 实际查询接口时使用的时间
        startTime: '',
        endTime: ''
      },
      queryParams: {},
      standaloneTimeRange: { // 单个图表刷新时，重新获取时间范围，且不影响到其他图表
        use: false,
        startTime: '',
        endTime: ''
      },
      orderPieTable: chartPieTableTopOptions[0].value,
      // 挖矿右下角图
      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的所有数据
      },
      table: {
        pageSize: chartTableDefaultPageSize,
        limit: chartTableTopOptions[0], // top-n
        orderBy: 'sessions'
      }
    }
  },
  computed: {
    headerH () {
      return this.$store.getters.getHeaderH
    },
    headerHPadding () {
      return this.$store.getters.getHeaderHPadding
    }
  },
  methods: {
    /* 参数 extraParams 额外请求参数，isRefresh 是否是刷新 */
    getChartData (url, extraParams = {}, isRefresh) {
      this.loading = true
      this.standaloneTimeRange.use = !!isRefresh
      try {
        // 单个图表刷新时，使用单独的时间
        if (this.standaloneTimeRange.use) {
          this.queryTimeRange = { startTime: getSecond(this.standaloneTimeRange.startTime), endTime: getSecond(this.standaloneTimeRange.endTime) }
        } else if (this.timeFilter) {
          this.queryTimeRange = { startTime: getSecond(this.timeFilter.startTime), endTime: getSecond(this.timeFilter.endTime) }
        } else {
          this.queryTimeRange = { startTime: getSecond(this.chartTimeFilter.startTime), endTime: getSecond(this.chartTimeFilter.endTime) }
        }
        const chartParams = this.chartInfo.params
        // 接口查询参数
        this.queryParams = {
          ...this.handleQueryParams(),
          ...this.queryTimeRange,
          ...this.entity,
          ...extraParams
        }
        const requestUrl = url || chartParams.url
        if (requestUrl) {
          get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
            if (response.code === 200) {
              this.chartData = response.data.result
              this.isError = false
            } else {
              this.isError = true
              this.noData = true
              this.errorInfo = response.msg || response.message || 'Unknown'
            }
          })
        }
      } catch (e) {
        console.error(e)
      } finally {
        setTimeout(() => {
          this.loading = false
        }, 200)
      }
    },
    handleQueryParams () {
      const params = {}
      if (this.isEchartsWithTable) {
        params.limit = 10
        params.order = this.orderPieTable
      } else if (this.isRelationShip) {
        params.limit = 5
      } else if (this.isActiveIpTable) {
        params.order = this.activeIpTable.orderBy
      } else if (this.isTable) {
        params.limit = this.table.limit
        params.order = this.table.orderBy
      }
      return params
    },
    resize () {
      this.$refs.chart.resize()
    },
    refresh () {
      const myEndTime = window.$dayJs.tz().valueOf()
      const myStartTime = myEndTime - this.chartTimeFilter.dateRangeValue * 60 * 1000
      this.standaloneTimeRange.use = true
      this.standaloneTimeRange.startTime = myStartTime
      this.standaloneTimeRange.endTime = myEndTime
      this.getChartData(null, {}, true)
    },
    showFullscreen (show) {
      this.$emit('showFullscreen', show, this.chartInfo)
    },
    loadMore () {
      this.$nextTick(() => {
        this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
      })
    },
    getDataKey (r) {
      let key = ''
      let labelText = ''
      if (r.establishLatency || r.establishLatency === 0) {
        key = 'establishLatency'
        labelText = this.$t('networkAppPerformance.tripTime')
      } else if (r.httpResponseLatency || r.httpResponseLatency === 0) {
        key = 'httpResponseLatency'
        labelText = this.$t('networkAppPerformance.httpResponse')
      } else if (r.sslConLatency || r.sslConLatency === 0) {
        key = 'sslConLatency'
        labelText = this.$t('networkAppPerformance.sslResponse')
      } else if (r.sequenceGapLossPercent || r.sequenceGapLossPercent === 0) {
        key = 'sequenceGapLossPercent'
        labelText = this.$t('networkAppPerformance.packetLossRate')
      } else if (r.pktRetransPercent || r.pktRetransPercent === 0) {
        key = 'pktRetransPercent'
        labelText = this.$t('networkAppPerformance.retransmissionRate')
      } else if (r.sessions || r.sessions === 0) {
        key = 'sessions'
        labelText = this.$t('overall.sessions')
      }
      return { key, labelText }
    },
    getTableTitle (data) {
      if (data.length > 0) {
        const dataColumns = Object.keys(data[0]) // 返回数据的字段
        const columns = dataColumns.map(c => tableTitleMapping[c]) // 展示字段
        const keys = ['clientIp', 'serverIp', 'ip', 'appId', 'app', 'appName', 'domain']
        return columns.sort((a, b) => {
          if (keys.indexOf(a.prop) > -1) {
            return -1
          } else if (keys.indexOf(b.prop) > -1) {
            return 1
          } else {
            return 0
          }
        })
      } else {
        return []
      }
    },
    showLoading (show) {
      this.loading = show
    }
  },
  mounted () {
    this.getChartData()
  },
  setup (props) {
    const dateRangeValue = 60
    const { startTime, endTime } = getNowTime(dateRangeValue)
    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
    return {
      chartTimeFilter,
      isEcharts: isEcharts(props.chartInfo.type),
      isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
      isEchartsCategoryBar: isEchartsCategoryBar(props.chartInfo.type),
      isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
      isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
      isSingleValue: isSingleValue(props.chartInfo.type),
      isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(props.chartInfo.type),
      isRelationShip: isRelationShip(props.chartInfo.type),
      isTable: isTable(props.chartInfo.type),
      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
      isMap: isMap(props.chartInfo.type),
      isTitle: isTitle(props.chartInfo.type),
      isMapLine: isMapLine(props.chartInfo.type),
      isMapBlock: isMapBlock(props.chartInfo.type),
      isTabs: isTabs(props.chartInfo.type),
      isGroup: isGroup(props.chartInfo.type),
      isBlock: isBlock(props.chartInfo.type),
      isSankey: isSankey(props.chartInfo.type),
      isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
      isIpHostedDomain: isIpHostedDomain(props.chartInfo.type),
      isIpOpenPort: isIpOpenPort(props.chartInfo.type),
      isDomainWhois: isDomainWhois(props.chartInfo.type),
      isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
      isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),
      isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type)
    }
  }
}
</script>