xiaodou-ai-admin/src/pages/Iot/device/detail.vue

<template>
  <a-card>
    <a-tabs v-model:activeKey="state.tabsActive">
      <a-tab-pane
        v-for="item in tabs"
        :key="item.key"
        :tab="item.name"
      />
    </a-tabs>
    <OverView  v-if="state.tabsActive === '1'"/>
    <CloudView   v-else-if="state.tabsActive === '2'"/>
    <DeviceShadow v-else-if="state.tabsActive === '3'" />
    <MsgTrack v-else-if="state.tabsActive === '4'" />
  </a-card>
</template>

<script lang="ts" setup >
import { computed, reactive } from 'vue'
import OverView from './components/overview.vue'
import CloudView from './components/cloudview.vue'
import DeviceShadow from './components/deviceShadow.vue'
import MsgTrack from './components/msgTrack.vue'
const tabs = [
  {
    name: '概述',
    key: '1'
  },
  {
    name: '云端下发',
    key: '2'
  },
  {
    name: '设备影子',
    key: '3'
  },
  {
    name: '消息跟踪',
    key: '4'
  },
  {
    name: '子设备',
    key: '5'
  },
  {
    name: '标签',
    key: '6'
  }
]

const state = reactive({
  tabsActive: '4'
})

const domainCom = () => {
  switch (state.tabsActive) {
    case '1':
      return OverView

    case '2':

      return CloudView
    default:
      return CloudView
  }
}

console.log('domainCom:', domainCom())

</script>

<style lang="less" scoped >

</style>