dvcp_v2_webapp/components/layout/AiDvSummary/AiDvSummary.vue

<template>
  <div class="AiSummary">
    <component :is="type" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
  </div>
</template>

<script>
  import Summary0 from './components/Summary0'
  import Summary1 from './components/Summary1'
  import Summary2 from './components/Summary2'
  import Summary3 from './components/Summary3'
  import Summary4 from './components/Summary4'
  import Summary5 from './components/Summary5'
  import Summary6 from './components/Summary6'
  import Summary7 from './components/Summary7'
  import Summary8 from './components/Summary8'
  import Summary9 from './components/Summary9'
  import Summary10 from './components/Summary10'
  import Summary11 from './components/Summary11'

  export default {
    name: 'AiDvSummary',

    components: {
      Summary0,
      Summary1,
      Summary2,
      Summary3,
      Summary4,
      Summary5,
      Summary6,
      Summary7,
      Summary8,
      Summary9,
      Summary10,
      Summary11
    },

    props: {
      type: {
        default: 'Summary0'
      },

      data: {
        type: Array,
        default: () => []
      },

      summaryTitle: {
        type: String,
        default: ''
      },

      keys: {
        type: String,
        default: 'key'
      },

      value: {
        type: String,
        default: 'value'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AiSummary {
    width: 100%;
    height: 100%;
  }
</style>