ads_web/src/views/reportManage/dataCenter/components/NormalDisplay.vue

<script setup lang="ts">
import { dataCenterMetricsEnum } from '/@/views/reportManage/dataCenter/utils/enum'
import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '/@/views/reportManage/dataCenter/api'
import DataTendencyChart from '/@/views/reportManage/dataCenter/components/DateTendency/index.vue'
import {onBeforeUnmount, provide, reactive, ref} from 'vue'
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import { storeToRefs } from 'pinia'
import { useShopInfo } from '/@/stores/shopInfo'
import { usePublicData } from '/@/stores/publicData'
import Selector from "/@/views/reportManage/dataCenter/components/Selector/index.vue";
import TableSelect from "/src/views/reportManage/dataCenter/components/TableDataDisplay.vue"
import emitter from "/@/utils/emitter";
// 店铺信息
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
//公共数据
const publicData = usePublicData()
const { dateRange } = storeToRefs(publicData)

const queryParams = ref({
  profileId: profile.value.profile_id,
  dateRange,
  // parentAsin,
  // childAsin,
  // sku,
})

const dateDimension = ref('day')
provide('dateDimension', dateDimension)
emitter.on('DateTendency-dateChange', (value: string)=>{
  dateDimension.value = value
  console.log(1, dateDimension.value)
})

onBeforeUnmount(()=>{
  emitter.all.clear();
})
</script>

<template>
  <div>
    <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2">
      <Selector></Selector>
      <DateRangePicker v-model="dateRange"></DateRangePicker>
    </div>
    <el-card class="mb-1.5">
      <DataTendencyChart
        :metricEnum="dataCenterMetricsEnum"
        :query="queryParams"
        :fetchCard="getCardData"
        :fetchLine="getLineData"
        :fetch-line-month="getLineMonthData"
        :fetch-line-week="getLineWeekData"
        >
      </DataTendencyChart>
    </el-card>
  </div>
  <el-card><TableSelect></TableSelect></el-card>
</template>

<style scoped>
.custom-card-style {
  z-index: 999;
  position: sticky;
  top: 0;
}
</style>