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

<template>
    <fs-page class="fs-page-custom">
        <fs-crud ref="crudRef" v-bind="crudBinding">
            <template #header-middle>
                <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
                    <el-tab-pane label="数据趋势" name="barLine">
                        <MetricsCards v-model="metrics" :metric-items="options" @change="changeMetric"></MetricsCards>
                        <div style="display: flex; justify-content: flex-end">
                            <el-button-group class="ml-4" style="margin-top: 10px; margin-right: 30px">
                                <el-button type="primary" @click="changeChartData">日</el-button>
                                <el-button type="primary" @click="changeChartData">周</el-button>
                                <el-button type="primary" @click="changeChartData">月</el-button>
                            </el-button-group>
                        </div>
                        <BarLineChart ref="barLineRef" :barLineData="barLineData"/>
                    </el-tab-pane>
                    <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
                </el-tabs>
            </template>
        </fs-crud>
    </fs-page>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch, nextTick, onActivated, reactive} from 'vue'
import {useFs, FsPage} from '@fast-crud/fast-crud'
import {createCrudOptions} from './crud'
import {useRoute, useRouter} from 'vue-router'
import MetricsCards from '/@/components/MetricsCards/index.vue'
import AdStructChart from '/@/views/adManage/sp/campaigns/chartComponents/adStruct.vue'
import DataTendencyChart from '/@/views/adManage/sp/campaigns/chartComponents/dataTendency.vue'
import BarLineChart from '/@/components/echartsComponents/BarLineChart.vue'
import PieBarChart from '/@/components/echartsComponents/PieBarChart.vue'
import BarChart from "/@/components/echartsComponents/BarChart.vue"

const tabActiveName = ref('barLine')
const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {}})

const metrics = ref([{metric: 'ACOS', color: 'blue'}])
const options = ref([
    {label: 'ACOS', value: 'ACOS', metricVal: '18.00%', preVal: '20.15%', gapVal: '-2.00%', disabled: true},
    {label: '点击量', value: 'clicks', metricVal: '19.00%', preVal: '20.15%', gapVal: '-1.00%', disabled: true},
    {label: '曝光量', value: 'impression', metricVal: '20.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
    {label: '转化率1', value: 'rate1', metricVal: '1.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
    {label: '转化率2', value: 'rate2', metricVal: '2.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
    {label: '转化率3', value: 'rate3', metricVal: '3.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
    {label: '转化率4', value: 'rate4', metricVal: '4.00%', preVal: '15.00%', gapVal: '5.00%'},
    {label: '转化率5', value: 'rate5', metricVal: '5.00%', preVal: '15.00%', gapVal: '5.00%'},
    {label: '转化率6', value: 'rate6', metricVal: '6.00%', preVal: '15.00%', gapVal: '5.00%'},
])
const route = useRoute()
const router = useRouter()
const barLineRef = ref()

const 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]
})

onMounted(() => {
    crudExpose.doRefresh()
})

const resizeTabChart = () => {
    if (tabActiveName.value === 'barLine') {
        barLineRef.value.resizeChart()
    } else if (tabActiveName.value === 'bar') {
        // BarChartRef.value.resizeChart()
    }
}
const changeTab = () => {
    nextTick(() => {
        resizeTabChart()
    })
}
const changeMetric = () => {
    console.log(metrics.value)
}

// todo 发送请求获取数据切换图表
function changeChartData() {
    updateData({
        xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
        barData: [10, 13.4, 12, 14, 20, 14, 11.1],
        yData1: [7, 2, 4, 8, 4, 15, 10],
        yData2: [15, 10, 12, 14, 12, 10, 12.5]
    });
}

function updateData(newData) {
    // 更新响应式数据
    Object.assign(barLineData, newData)
    // 然后更新图表
    barLineRef.value.updateChart()
}

defineExpose({resizeTabChart})

</script>

<style lang="scss">
.chart-tabs {
    margin: 5px 0;

    .el-tabs__nav {
        padding-left: 0 !important;
    }
}

</style>