ads_web/src/views/adManage/sp/keywords/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="dataTendency">
						<MetricsCards v-model="metrics" :metric-items="options" @change="changeMetric"></MetricsCards>
						<DataTendencyChart ref="dataTendencyRef"/>
					</el-tab-pane>
					<el-tab-pane label="广告结构" name="adStruct" :lazy="true">
						<AdStructChart ref="adStructChartRef" />
					</el-tab-pane>
					<el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
				</el-tabs>
			</template>
		</fs-crud>
	</fs-page>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch,nextTick, onActivated } 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'

const tabActiveName = ref("dataTendency")
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 adStructChartRef = ref()
const dataTendencyRef = ref()

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

const resizeTabChart = () => {
	if (tabActiveName.value === "dataTendency") {
		dataTendencyRef.value.resizeChart()
	} else if (tabActiveName.value === "adStruct"){
		adStructChartRef.value.resizeChart()
	}
	// dataTendencyRef.value.resizeChart()
	// adStructChartRef.value.resizeChart()
} 
const changeTab = () => {
	nextTick(() => {
		resizeTabChart()
	})
}
const changeMetric = () => {
	console.log(metrics.value)
}
// const jumpGroup = (row: any) => {
// 	router.push({
// 		name: 'CampaignDetail',
// 		query: { id: row.id, campaignId: row.campaignId, tagsViewName: row.campaignName },
// 	})
// }
defineExpose({ resizeTabChart })
</script>

<style lang="scss">
.chart-tabs {
	margin: 5px 0;
	.el-tabs__nav {
		padding-left: 0 !important;
	}
}

</style>