ads_web/src/views/productCenter/productAnalysis/index.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { provide, ref } from 'vue'
import DataTable from '/@/views/productCenter/productAnalysis/components/DataTable/index.vue'
import TopParentAsin from './components/TopParentAsin/index.vue'
import TrendOverview from './components/TrendOverview/index.vue'
import SalesOverview from './components/SalesOverview/index.vue'
import CpRecommendations from './components/CpRecommendations/index.vue'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { usePublicData } from '/@/stores/publicData'
import { useShopInfo } from '/@/stores/shopInfo'

// 店铺信息
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
// 公共数据
const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)

provide('dateRange', dateRange)
provide('profile', profile)

const activeName = ref('trendOverview')
const filter1 = ref('')
const options1 = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
]

const filter2 = ref('')
const options2 = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
]

const updatedData = ref([])
provide('tableData', updatedData)

function handleUpdate(value: any) {
  updatedData.value = value
}
</script>

<template>
  <div class="outer-container">
    <TopParentAsin></TopParentAsin>
    <div class="filters">
      <DateRangePicker v-model="dateRange" style="position: absolute; right: 14px; top: 163px; z-index: 9; border-radius: 20px"></DateRangePicker>
      <!-- <div v-show="activeName == 'trendOverview'">
        <el-select v-model="filter1" placeholder="Select" style="width: 240px; margin-right: 8px">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="filter2" placeholder="Select" style="width: 240px">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div> -->
    </div>
    <div>
      <el-tabs v-model="activeName" type="border-card" class="chart-tabs">
        <el-tab-pane label="趋势总览" name="trendOverview">
          <TrendOverview @updateList="handleUpdate"></TrendOverview>
          <DataTable></DataTable>
        </el-tab-pane>
        <el-tab-pane label="广告优化" name="adOptimization">广告优化</el-tab-pane>
        <el-tab-pane label="销售概览" name="salesOverview" lazy>
          <SalesOverview></SalesOverview>
        </el-tab-pane>
        <el-tab-pane label="竞品推荐" name="cpRecommendations">
          <CpRecommendations></CpRecommendations>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped>
.outer-container {
  padding: 5px 10px 0 10px;
}
.filters {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  margin-top: 5px;
}
/* :deep(.el-tabs--border-card > .el-tabs__header) {
  background-color: transparent;
} */
:deep(.el-tabs.el-tabs--top.el-tabs--border-card.chart-tabs) {
  border-radius: 8px;
}
</style>