ads_web/src/views/adManage/sb/index.vue

<template>
    <div class="asj-container">
        <div class="public-search">
            <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" @change="changeDateRange"></DateRangePicker>
            <el-select v-model="portfolios" placeholder="广告组合"></el-select>
        </div>
        <div>
            <el-tabs class="asj-tabs" @tab-change="changeTab">
                <el-tab-pane label="广告活动">
                    <campaigns ref="campaignsRef"/>
                </el-tab-pane>
                <el-tab-pane label="关键词" :lazy="true">
                    <!--<keywords ref="keywordsRef"/>-->
                </el-tab-pane>
                <el-tab-pane label="商品投放" :lazy="true">

                </el-tab-pane>
                <el-tab-pane label="搜索词" :lazy="true">
                    <!--<SearchTerm ref="searchTermRef"/>-->
                </el-tab-pane>
                <el-tab-pane label="广告位" :lazy="true">
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script lang="ts" setup>
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import campaigns from './campaigns/index.vue'
import keywords from './keywords/index.vue'
import SearchTerm from './searchTerms/index.vue'
import {provide, reactive, ref} from 'vue'
import {nextTick} from 'process'

const portfolios = ref([])
const dateRange = ref([])

function changeDateRange(val: string[]) {
    console.log(val)
}

const campaignsRef = ref()
const keywordsRef = ref()

function changeTab() {
    nextTick(() => {
        campaignsRef.value.resizeTabChart()
        keywordsRef.value.resizeTabChart()
    })
}

// 提供柱线图数据

let barLineData = reactive({
    xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
    barData: [12, 13.4, 12.5, 16, 14.5, 15.6, 12.3],
    yData1: [18, 13, 10, 8, 9, 10, 14.2],
    yData2: [14, 15, 12, 16, 15, 13, 14.5]
})
provide('barLineData', barLineData)

// 提供饼图和柱状图的数据
let pieBarChartData = reactive({
    xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
    barData: [[10, 16, 28, 21, 30], [6, 12, 17, 21, 25]],
    pieData: [{ value: 1048, name: 'Search Engine' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }]
})
provide('pieBarChartData', pieBarChartData)

</script>

<style>
.public-search {
    display: flex;
    gap: 3px;
    padding-bottom: 3px;
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background-color: #f8f8f8;
    box-shadow: 0 0 0 rgba(51, 89, 181, 0.16);
}
</style>