<!-- 用电监测 -->
<script lang="ts" setup name="collect/strong">
import network from './network.vue'
import page from './page.vue'
import tab from '@/views/data/collect/tab.vue'
const tablistData = ref([
  {
    id: '1',
    title: '配电网',
  },
  {
    id: '2',
    title: '分布式光伏',
  },
  {
    id: '3',
    title: '楼宇',
  },
  {
    id: '4',
    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 || '2'
})
</script>

<template>
  <div>
    <!-- tab切换 -->
    <tab :tablist-data="tablistData" @confirm="confirm" />
    <network v-if="select === '配电网'" />
    <page v-else :type="type" />
  </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>