cyber-narrator-cn-ui/src/views/charts2/ChartList.vue

<template>
  <div class="chart-list" ref="layoutBox">
    <grid-layout
        id="gridLayout"
        ref="layout"
        v-model:layout="layout"
        :col-num="24"
        :is-draggable="!panelLock"
        :is-resizable="!panelLock"
        :margin="[20, 20]"
        :row-height="40"
        :vertical-compact="true"
        :use-css-transforms="false"
    >
      <grid-item v-for="item in layout"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i"
                 :key="item.i">
        <!-- npm-tab特殊处理 -->
        <template v-if="panelType === panelTypeAndRouteMapping.networkAppPerformance">
          <chart
            v-if="item.type === typeMapping.npm.npmTabs || item.params.tabIndex === npmTabIndex"
            :id="item.id"
            :chart="item"
            @npmTabChange="npmTabChange"
          ></chart>
        </template>
        <chart
            v-else
            :id="item.id"
            :chart="item"
        ></chart>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import _ from 'lodash'
import Chart from '@/views/charts2/Chart'
import { panelTypeAndRouteMapping } from '@/utils/constants'
import { typeMapping } from '@/views/charts2/chart-tools'
export default {
  name: 'ChartList',
  props: {
    timeFilter: Object,
    panelType: Number,
    chartList: Array,
    panelLock: Boolean,
    entity: Object
  },
  data () {
    return {
      panelTypeAndRouteMapping,
      typeMapping,
      layout: [],
      npmTabIndex: 0
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Chart
  },
  watch: {
    chartList (n) {
      if (!_.isEmpty(n)) {
        this.layout = [...n]
      }
    }
  },
  methods: {
    npmTabChange (index) {
      this.npmTabIndex = parseInt(index)
    }
  }
}
</script>

<style scoped>

</style>