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  :deviceId="state.deviceId" :key="state.deviceId" 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'" />
    <SubDevice @goDetail="goDetail" v-else-if="state.tabsActive === '5'" />
    <DeviceTag @goDetail="goDetail" v-else-if="state.tabsActive === '6'" />
  </a-card>
</template>

<script lang="ts" setup >
import { computed, onMounted, 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'
import SubDevice from './components/subDevice.vue'
import DeviceTag from './components/deviceTag.vue'
import { useRoute } from 'vue-router'
import { DeviceContriller } from '@/controller'
import { StateEffect } from '@codemirror/state'

const tabs = [
  {
    name: '概述',
    key: '1'
  },
  {
    name: '云端下发',
    key: '2'
  },
  {
    name: '设备影子',
    key: '3'
  },
  {
    name: '消息跟踪',
    key: '4'
  },
  {
    name: '子设备',
    key: '5'
  },
  {
    name: '标签',
    key: '6'
  }
]

const route = useRoute()
const deviceId = route.query.id as string

const state = reactive({
  tabsActive: '1',
  deviceId: deviceId
})

const goDetail = ({ id }) => {
  state.tabsActive = '1'
  state.deviceId = id
}

</script>

<style lang="less" scoped >

</style>