tabs改为动态渲染

src/theme/app.scss

@@ -332,16 +332,33 @@ body,
 	position: initial !important;
 }
 
-// 最外层的tabs
-.asj-tabs > .el-tabs__header.is-top {
+.asj-tabs {
   background-color: #fff;
   position: sticky;
   top: 32px;
   z-index: 9;
   box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
+	
+	padding: 0 12px;
+	display: flex;
+	height: 40px;
+	gap: 24px;
 }
-.asj-tabs .el-tabs__nav {
-  padding-left: 10px;
+
+.asj-tab {
+	display: flex;
+	align-items: center;
+	padding: 0 4px;
+	height: 40px;
+	font-weight: 700;
+	line-height: 40px;
+	cursor: pointer;
+	border-bottom: 2px solid #fff;
+}
+
+.asj-tab.active {
+	color: #409eff;
+	border-color: #409eff
 }
 
 // 详细页里面的样式
@@ -379,6 +396,10 @@ body,
   width: 100%;
   background-color: #f8f8f8;
   box-shadow: 0px 0px 0px rgba(51,89,181,0.16);
+
+	.el-input__wrapper {
+		border-radius: 0;
+	}
 }
 
 .chart-tabs {

src/views/adManage/sp/campaigns/chartComponents/adStruct.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, inject } from "vue"
+import { onMounted, ref, inject, watch, nextTick } from "vue"
 import * as echarts from "echarts"
 import TextSelector from '/@/components/TextSelector/index.vue'
 import { getAdStructureData } from "/@/views/adManage/sp/campaigns/api"
@@ -34,7 +34,12 @@ const loading = ref(true)
 
 let dateRange = inject('dateRange')
 console.log('dateRange', dateRange.value)
-
+watch(
+    dateRange,
+    () => {
+        console.log('-------watch dateRange', dateRange.value)
+    }
+)
 // 下拉框相关
 const pieOptions = [
     {
@@ -502,8 +507,6 @@ function resizeChart() {
     pieChart.resize()
 }
 
-defineExpose({ resizeChart })
-
 </script>
 
 <style scoped>

src/views/adManage/sp/campaigns/chartComponents/dataTendency.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-loading="loading">
-    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
-    <div style="height: 350px;" ref="chartRef"></div>
-  </div>
+      <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
+      <div style="height: 350px;" ref="chartRef"></div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -23,9 +23,10 @@ defineOptions({
 
 onMounted(() => {
   getMetricsItems()
-	initLine()
 	addResize()
-});
+  // initLine()
+  setTimeout(() => { initLine() }, 0)
+})
 onBeforeUnmount(() => {
 	if(chartObj) {
 		chartObj.dispose()
@@ -239,8 +240,6 @@ const addResize = () => { window.addEventListener('resize', resizeChart) }
 const removeResize = () => { window.removeEventListener('resize', resizeChart) }
 
 
-defineExpose({resizeChart})
-
 </script>
 
 <style scoped>

src/views/adManage/sp/campaigns/index.vue

@@ -2,14 +2,16 @@
 	<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-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
 					<el-tab-pane label="数据趋势" name="dataTendency">
-						<DataTendencyChart ref="dataTendencyRef"></DataTendencyChart>
+						<DataTendencyChart v-if="tabActiveName === 'dataTendency'"></DataTendencyChart>
 					</el-tab-pane>
-					<el-tab-pane label="广告结构" name="adStruct" :lazy="true">
-						<AdStructChart ref="adStructChartRef"/>
+					<el-tab-pane label="广告结构" name="adStruct" >
+						<AdStructChart v-if="tabActiveName === 'adStruct'"/>
+					</el-tab-pane>
+					<el-tab-pane label="散点视图" name="scatterView">
+						<div v-if="tabActiveName === 'adStruct'">散点视图</div>
 					</el-tab-pane>
-					<el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
 				</el-tabs>
 			</template>
 			<template #cell_percentTimeInBudget="scope">
@@ -42,34 +44,19 @@ import DataTendencyChart from './chartComponents/dataTendency.vue'
 
 const tabActiveName = ref("dataTendency")
 const shopInfo = useShopInfo()
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { profileId: shopInfo.profile.profile_id } });
-
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { profileId: shopInfo.profile.profile_id } })
 const router = useRouter()
 
 onMounted(async () => {
 	crudExpose.doRefresh()
 })
 
-const resizeTabChart = () => {
-	if (adStructChartRef.value) adStructChartRef.value.resizeChart()
-	if (dataTendencyRef.value) dataTendencyRef.value.resizeChart()
-}
-const changeTab = () => {
-	nextTick(() => {
-		resizeTabChart()
-	})
-}
 const jumpGroup = (row: any) => {
 	router.push({
 		name: 'CampaignDetail',
 		query: { id: row.id, campaignId: row.campaignId, tagsViewName: row.campaignName },
 	})
 }
-
-
-defineExpose({ resizeTabChart })
 </script>
 
 <style lang="scss">

src/views/adManage/sp/index.vue

@@ -2,31 +2,26 @@
 	<div class="asj-container">
 		<div class="public-search">
 			<DateRangePicker v-model="dateRange" :timezone="shopInfo.profile.time_zone"></DateRangePicker>
-			<el-select v-model="selectedPortfolios" placeholder="广告组合" clearable multiple style="width: 400px;"
+			<el-select
+				v-model="selectedPortfolios"
+				placeholder="广告组合"
+				clearable
+				multiple
+				style="width: 400px"
 				collapse-tags
 				collapse-tags-tooltip
-				:max-collapse-tags="3">
+				:max-collapse-tags="3"
+			>
 				<el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
 			</el-select>
 		</div>
-		<el-tabs v-model="tabActiveName" class="asj-tabs" @tab-change="changeTab">
-			<el-tab-pane label="广告活动" name="campaigns">
-				<Campaigns ref="campaignsRef" />
-			</el-tab-pane>
-			<el-tab-pane label="关键词投放" name="keywords" :lazy="true">
-				<Keywords ref="keywordsRef" />
-			</el-tab-pane>
-            <el-tab-pane label="商品投放" name="targets" :lazy="true">
-                <Targets ref="targetsRef"/>
-            </el-tab-pane>
-			<el-tab-pane label="推广商品" :lazy="true"></el-tab-pane>
-			<el-tab-pane label="购买的其它商品" :lazy="true"></el-tab-pane>
-			<el-tab-pane label="搜索词" :lazy="true">
-			</el-tab-pane>
-			<el-tab-pane label="广告位" :lazy="true">
-			</el-tab-pane>
-			<el-tab-pane label="预算上限" :lazy="true"></el-tab-pane>
-		</el-tabs>
+
+		<div class="asj-tabs">
+			<div v-for="tab of tabs" :key="tab.name" :class="['asj-tab', { active: tabActiveName === tab.name }]" @click="tabActiveName = tab.name">
+				{{ tab.label }}
+			</div>
+		</div>
+		<component :is="tabsComponents[tabActiveName]"></component>
 	</div>
 </template>
 
@@ -39,7 +34,6 @@ import { ref, onBeforeMount, Ref, watch, provide } from 'vue'
 import { useShopInfo } from '/@/stores/shopInfo'
 import { usePublicData } from '/@/stores/publicData'
 import { GetList } from '/@/views/adManage/portfolios/api'
-import { nextTick } from 'process'
 import { storeToRefs } from 'pinia'
 import Targets from './targets/index.vue'
 
@@ -48,10 +42,17 @@ const publicData = usePublicData()
 const selectedPortfolios: Ref<string[]> = ref([])
 const portfolios: Ref<Portfolio[]> = ref([])
 const { dateRange } = storeToRefs(publicData)
-const tabActiveName = ref('campaigns')
-const campaignsRef = ref()
-const keywordsRef = ref()
-const targetsRef = ref()
+const tabActiveName = ref('Campaigns')
+const tabs = [
+	{ label: '广告活动', name: 'Campaigns' },
+	{ label: '关键词投放', name: 'Keywords' },
+	{ label: '商品投放', name: 'Targets' },
+]
+const tabsComponents: any = {
+	Campaigns,
+	Keywords,
+	Targets,
+}
 
 provide('dateRange', dateRange)
 
@@ -59,13 +60,7 @@ onBeforeMount(async () => {
 	const resp: APIResponseData = await GetList({ limit: 999 })
 	portfolios.value = resp.data
 })
-const changeTab = () => {
-    nextTick(() => {
-        campaignsRef.value.resizeTabChart()
-        keywordsRef.value.resizeTabChart()
-        targetsRef.value.resizeTabChart()
-    })
-}
+
 publicData.$subscribe((mutation, state) => {
 	// console.log(mutation)
 	// console.log(state.dateRange)
@@ -73,4 +68,4 @@ publicData.$subscribe((mutation, state) => {
 })
 </script>
 
-<style></style>
+<style scoped></style>

src/views/adManage/sp/keywords/chartComponents/adStruct.vue

@@ -388,8 +388,6 @@ function resizeChart() {
     barChart.resize()
 }
 
-defineExpose({ resizeChart })
-
 </script>
 
 <style scoped>

src/views/adManage/sp/keywords/chartComponents/dataTendency.vue

@@ -21,7 +21,7 @@ onBeforeMount(async () => {
 	await getMetricsItems()
 })
 onMounted(() => {
-	initLine()
+	setTimeout(() => { initLine() }, 0)
 	addResize()
 });
 onBeforeUnmount(() => {
@@ -200,8 +200,7 @@ const getMetricsItems = async () => {
 			value: info.value,
 			metricVal: data[info.value],
 			gapVal: data[`gap${info.value}`],
-			preVal: data[`prev${info.value}`],
-			disabled: info.initShow ? true : false
+			preVal: data[`prev${info.value}`]
 		}
 		metricsItems.value.push(tmp)
     option.legend.selected[info.label] = false
@@ -218,8 +217,6 @@ const addResize = () => { window.addEventListener('resize', resizeChart) }
 const removeResize = () => { window.removeEventListener('resize', resizeChart) }
 
 
-defineExpose({resizeChart})
-
 </script>
 
 <style scoped>

src/views/adManage/sp/keywords/index.vue

@@ -1,28 +1,27 @@
 <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">
-                        <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>
+	<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">
+					<el-tab-pane label="数据趋势" name="dataTendency">
+						<DataTendencyChart v-if="tabActiveName === 'dataTendency'" />
+					</el-tab-pane>
+					<el-tab-pane label="广告结构" name="adStruct">
+						<AdStructChart v-if="tabActiveName === 'adStruct'" />
+					</el-tab-pane>
+					<el-tab-pane label="散点视图" name="scatterView"></el-tab-pane>
+				</el-tabs>
+			</template>
+		</fs-crud>
+	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, onBeforeUnmount, watch, nextTick, onActivated, inject} from 'vue'
-import {useFs, FsPage} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
-import {useRoute, useRouter} from 'vue-router'
+import { ref, onMounted, inject } from 'vue'
+import { useFs, FsPage } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
 import DataTendencyChart from './chartComponents/dataTendency.vue'
-import {useShopInfo} from '/@/stores/shopInfo'
+import { useShopInfo } from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
 
 const tabActiveName = ref('dataTendency')
@@ -32,39 +31,17 @@ const start = dateRange.value[0]
 const end = dateRange.value[1]
 const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {profileId: shopInfo.profile.profile_id, start: start, end: end}})
 
-const route = useRoute()
-const router = useRouter()
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
-
-console.log(111, dateRange.value)
-
 onMounted(() => {
-    crudExpose.doRefresh()
+	crudExpose.doRefresh()
 })
-
-const resizeTabChart = () => {
-    if (tabActiveName.value === 'dataTendency') {
-        dataTendencyRef.value.resizeChart()
-    } else if (tabActiveName.value === 'adStruct') {
-        adStructChartRef.value.resizeChart()
-    }
-}
-const changeTab = () => {
-    nextTick(() => {
-        resizeTabChart()
-    })
-}
-defineExpose({resizeTabChart})
 </script>
 
 <style lang="scss">
 .chart-tabs {
-    margin: 5px 0;
+	margin: 5px 0;
 
-    .el-tabs__nav {
-        padding-left: 0 !important;
-    }
+	.el-tabs__nav {
+		padding-left: 0 !important;
+	}
 }
-
 </style>