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

<template>
  <a-card>
    <a-spin spinning="" >
      <a-tabs v-model:activeKey="state.tabsActive">
      <a-tab-pane
        v-for="item in state.tabs"
        :key="item.key"
        :tab="item.name"
      />
      </a-tabs>
    </a-spin>

    <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'" />
    <Ota v-else-if="state.tabsActive === '7'" />
    <Live v-else-if="state.tabsActive === '8'" />
  </a-card>
</template>

<script lang="ts" setup >
import { 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 Ota from './components/ota.vue'
import Live from './components/live.vue'
import { useRoute } from 'vue-router'
import { DeviceContriller } from '@/controller'

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

const route = useRoute()

const deviceId = route.query.id as string

const state = reactive({
  tabsActive: '1',
  spinning: false,
  deviceId: deviceId,
  deviceDetail: {},
  tabs: [
    {
      name: '概述',
      key: '1'
    },
    {
      name: '云端下发',
      key: '2'
    },
    {
      name: '设备影子',
      key: '3'
    },
    {
      name: '消息跟踪',
      key: '4'
    },
    {
      name: '子设备',
      key: '5'
    },
    {
      name: '标签',
      key: '6'
    },
    {
      name: 'OTA',
      key: '7'
    },
    {
      name: 'Live',
      key: '8'
    }
  ]
})

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

const getDeviceById = async () => {
  state.spinning = true
  const deviceDetail = await DeviceContriller.byId(deviceId)
  state.deviceDetail = deviceDetail
  if (!deviceDetail.rtsUrl) {
    state.tabs.splice(7, 1)
  }
  state.spinning = false
}

onMounted(() => {
  getDeviceById()
})

</script>

<style lang="less" scoped >

</style>