cyber-narrator-cn-ui/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue

<template>
  <div class="performance-event">
    <div class="performance-event-title"><i class="cn-icon cn-icon-a-NetworkPerformanceEvent"></i>{{$t('network.networkPerEvent')}}</div>
    <div class="performance-event-value">
      <div class="performance-event-pie">
        <chart-no-data v-if="isNoData"></chart-no-data>
        <div class="chart-drawing" id="chart1" v-else></div>
      </div>
      <div class="performance-event-pie-hr"></div>
      <div class="performance-event-pie">
        <chart-no-data v-if="isNoData2"></chart-no-data>
        <div class="chart-drawing" id="chart2" v-else></div>
      </div>
    </div>
    <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
  </div>
</template>

<script>
import { pieChartOption1, pieChartOption2 } from '@/views/charts2/charts/options/echartOption.js'
import * as echarts from 'echarts'
import { shallowRef } from 'vue'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
import ChartNoData from '@/views/charts/charts/ChartNoData'
export default {
  name: 'NetworkOverviewPerformanceEvent',
  setup () {
    return {
      myChart: shallowRef(null),
      myChart2: shallowRef(null)
    }
  },
  props: {
    timeFilter: Object
  },
  components: {
    ChartNoData
  },
  data () {
    return {
      timer: null,
      isNoData: false,
      isNoData2: false
    }
  },
  methods: {
    init () {
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime)
      }
      const dom = document.getElementById('chart1')
      const dom2 = document.getElementById('chart2')
      if (dom) {
        this.myChart = echarts.init(dom)
        this.chartOption = pieChartOption1
        get(api.netWorkOverview.eventSeverity, params).then(res => {
          if (res.code === 200) {
            // res.data.result.length = 0
            if (res.data.result.length === 0) {
              this.isNoData = true
              return
            }
            res.data.result = res.data.result.map(t => {
              return {
                name: t.eventSeverity,
                value: t.count
              }
            })
            if (res.data.result.length <= 0) {
              this.chartOption.legend.show = false
            } else {
              this.chartOption.legend.show = true
            }
            this.chartOption.series[0].data = res.data.result
            this.myChart.setOption(this.chartOption)
          }
        })
      }
      if (dom2) {
        this.myChart2 = echarts.init(dom2)
        this.chartOption2 = pieChartOption2
        get(api.netWorkOverview.eventType, params).then(res => {
          if (res.code === 200) {
            // res.data.result.length = 0
            if (res.data.result.length === 0) {
              this.isNoData2 = true
              return
            }
            res.data.result = res.data.result.map(t => {
              return {
                name: t.eventType,
                value: t.count
              }
            })
            if (res.data.result.length <= 0) {
              this.chartOption2.legend.show = false
            } else {
              this.chartOption2.legend.show = true
            }
            this.chartOption2.series[0].data = res.data.result
            this.myChart2.setOption(this.chartOption2)
          }
        })
      }
    },
    resize () {
      this.myChart.resize()
      this.myChart2.resize()
    }
  },
  mounted () {
    this.timer = setTimeout(() => {
      this.init()
    }, 100)
    window.addEventListener('resize', this.resize)
  },
  beforeUnmount () {
    clearTimeout(this.timer)
  }
}
</script>