ads_web/src/views/adManage/ad-overview/index.vue

<template>
  <div class="asj-container">
    <div class="overview-top">
      <div v-for="tab of tabs" :key="tab.name" :class="['asj-tab', { active: tabActiveName === tab.name }]" @click="tabActiveName = tab.name">
        {{ tab.label }}
      </div>
    </div>
    <component :is="tabsComponents[tabActiveName]"></component>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, provide, Ref, ref} from 'vue'
import {usePublicData} from '/@/stores/publicData'
import {storeToRefs} from 'pinia'
import {GetAllPortfolios} from '/@/views/adManage/portfolios/api'
import Total from './total/index.vue'
import Hour from '/@/views/adManage/ad-overview/hourly/index.vue'
import Daily from '/@/views/adManage/ad-overview/daily/index.vue'
import Weekly from '/@/views/adManage/ad-overview/weekly/index.vue'
import Monthly from '/@/views/adManage/ad-overview/monthly/index.vue'

// const shopInfo = useShopInfo()
const publicData = usePublicData()
const selectedPortfolios: Ref<string[]> = ref([])
const portfolios: Ref<Portfolio[]> = ref([])
const { dateRange } = storeToRefs(publicData)
const tabActiveName = ref('Total')
const tabs = [
  { label: '总览', name: 'Total' },
  { label: '按小时', name: 'Hour' },
  { label: '按日', name: 'Daily' },
  { label: '按周', name: 'Weekly' },
  { label: '按月', name: 'Monthly' },
]
const tabsComponents: any = {
  Total,
  Hour,
  Daily,
  Weekly,
  Monthly,
}

provide('dateRange', dateRange)

onBeforeMount(async () => {
  const resp: APIResponseData = await GetAllPortfolios()
  portfolios.value = resp.data
})

</script>

<style scoped>
::v-deep(.el-table .el-table__header-wrapper .cell) {
  border-right: 1px solid rgb(218, 221, 223);
}
</style>