<!-- 用电监测 -->
<script lang="ts" setup name="collect/strong">
import device from '../useHeat/page.vue'
import network from './network.vue'
import page from './page.vue'
// import device from './device.vue'
import tab from '@/views/data/collect/tab.vue'
const tablistData = ref([
  {
    id: '3',
    title: '配电网',
  },
  {
    id: '0',
    title: '分布式光伏',
  },
  // {
  //   id: '1',
  //   title: '设备监测数据',
  // },
])
const select = ref('')
const confirm = (selectp: string) => {
  select.value = selectp
}
const type = computed(() => {
  return tablistData.value.filter(item => item.title === select.value)[0]?.id || '0'
})
</script>

<template>
  <div>
    <!-- tab切换 -->
    <tab :tablist-data="tablistData" @confirm="confirm" />
    <!-- 配电网页面 -->
    <network v-if="select === '配电网'" />
    <!-- 分布式光伏 -->
    <page v-if="select === '分布式光伏'" :station-type="type" />
    <!-- 设备监测 -->
    <!-- <device v-if="select === '设备监测数据'" type="0" /> -->
    <!-- <device /> -->
  </div>
</template>

<style lang="scss" scoped>
s.normal-input {
  width: 130px !important;
}

.normal-date {
  width: 130px !important;
}

.normal-select {
  width: 130px !important;
}

:deep(.el-table__header) {
  background-color: #bbb;
}
</style>