Merge branch 'test' into wang

# Conflicts:
#	src/views/adManage/sb/campaigns/index.vue
#	src/views/adManage/sb/index.vue

src/components/DynamicTime/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <p>时区：{{ curTime }}</p>
+  <p style="white-space: nowrap">时区：{{ curTime }}</p>
 </template>
 
 <script lang="ts" setup>

src/components/shopSelector/index.vue

@@ -22,31 +22,17 @@ import { useShopInfo } from '/@/stores/shopInfo'
 defineOptions({
   name: 'ShopSelector'
 })
-
-const selectedRow: Ref<Profile> = ref({
-  id: 0,
-  profile_id: "",
-	account_name: "",
-	time_zone: "",
-	advertiser_id: "",
-	country_code: "",
-	currency_code: "",
-	marketplace_str_id: ""
-})
-const allShops: Ref<Profile[]> = ref([])
 const shopInfo = useShopInfo()
+const selectedRow: Ref<Profile> = ref(shopInfo.profile)
+const allShops: Ref<Profile[]> = ref([])
 
 onBeforeMount(async () => {
-  const resp = await GetList({ pageSize: 1000, query: '{-refresh_token}' })
+  const resp = await GetList({ limit: 999, query: '{-refresh_token}' })
   allShops.value = resp.data
-  selectedRow.value = allShops.value[0]
-  shopInfo.updateShopInfo(selectedRow.value)
 })
-
 const flagIcon = computed(()=> {
   return "fi fi-" + selectedRow.value.country_code.toLowerCase()
 })
-
 const changedVal = () => {
   shopInfo.updateShopInfo(selectedRow.value)
 }

src/layout/navBars/breadcrumb/user.vue

@@ -2,7 +2,8 @@
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
 		<DynamicTime></DynamicTime>
 		<ShopSelector class="layout-navbars-breadcrumb-user-icon"></ShopSelector>
-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+		<!-- 字体切换移除 -->
+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
 			</div>
@@ -13,8 +14,9 @@
 					<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
-		</el-dropdown>
-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
+		</el-dropdown> -->
+		<!-- 语言切换移除 -->
+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i
 					class="iconfont"
@@ -29,12 +31,12 @@
 					<el-dropdown-item command="zh-tw" :disabled="state.disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
-		</el-dropdown>
-		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
+		</el-dropdown> -->
+		<!-- <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
 			<el-icon :title="$t('message.user.title2')">
 				<ele-Search />
 			</el-icon>
-		</div>
+		</div> -->
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
 			<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
 		</div>

src/router/backEnd.ts

@@ -2,6 +2,7 @@ import { RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import pinia from '/@/stores/index';
 import { useUserInfo } from '/@/stores/userInfo';
+import { useShopInfo } from '/@/stores/shopInfo';
 import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
 import { Session } from '/@/utils/storage';
 import { NextLoading } from '/@/utils/loading';
@@ -36,6 +37,8 @@ const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...lay
  * @method setFilterMenuAndCacheTagsViewRoutes 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
  */
 export async function initBackEndControlRoutes() {
+	console.log("--------initBackEndControlRoutes------------")
+
 	// 界面 loading 动画开始执行
 	if (window.nextLoading === undefined) NextLoading.start();
 	// 无 token 停止执行下一步
@@ -43,6 +46,7 @@ export async function initBackEndControlRoutes() {
 	// 触发初始化用户信息 pinia
 	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
 	await useUserInfo().setUserInfos();
+	await useShopInfo().initShopInfo();
 	// 获取路由菜单数据
 	const res = await getBackEndControlRoutes();
 

src/stores/shopInfo.ts

@@ -29,21 +29,23 @@ export const useShopInfo = defineStore('shopInfo', () => {
     Session.set('shopInfo', profile.value);
   }
 
-  async function reqShopInfo(id: number) {
+  async function reqShopInfo() {
     return request({
-      url: '/api/adManage/profiles/' + id + '/',
-      method: 'GET'
+      url: '/api/ad_manage/profiles/',
+      method: 'GET',
+      params: { limit: 1 }
     })
   }
 
-  async function setShopInfo(id: number) {
-    if (Session.get('shopInfo')) {
-      profile.value = Session.get('shopInfo');
+  async function initShopInfo() {
+    const data = Session.get('shopInfo')
+    if (data?.profile_id) {
+      profile.value = data
     } else {
-      let resp: any = await reqShopInfo(id);
-      updateShopInfo(resp.data)
+      const resp: any = await reqShopInfo();
+      updateShopInfo(resp.data[0])
     }
   }
 
-  return { profile, updateShopInfo }
+  return { profile, updateShopInfo, initShopInfo }
 })

src/theme/app.scss

@@ -332,25 +332,51 @@ body,
 	position: initial !important;
 }
 
-.asj-header {
+// 最外层的tabs
+.asj-tabs > .el-tabs__header.is-top {
+  background-color: #fff;
+  position: sticky;
+  top: 32px;
+  z-index: 9;
+  box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
+}
+.asj-tabs .el-tabs__nav {
+  padding-left: 10px;
+}
+
+// 详细页里面的样式
+.asj-detail-header {
   position: sticky;
   background-color: #fff;
   box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
   z-index: 10;
-  top: 1px;
+  top: 0;
   height: 80px;
   margin-bottom: 3px;
   display: flex;
   flex-direction: column;
 }
-.asj-info {
+.asj-detail-info {
   margin: 5px;
   display: flex;
   flex-direction: row;
   gap: 30px;
 }
-.asj-tabs > .el-tabs__header.is-top {
+.asj-detail-tabs > .el-tabs__header.is-top {
+  position: sticky;
+  top: 80px;
+  z-index: 10;
+}
+
+// 顶层公共搜索样式
+.public-search {
+  display: flex;
+  gap: 3px;
+  padding-bottom: 3px;
   position: sticky;
-  top: 82px;
+  top: 0;
   z-index: 10;
+  width: 100%;
+  background-color: #f8f8f8;
+  box-shadow: 0px 0px 0px rgba(51,89,181,0.16);
 }

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

@@ -2,30 +2,23 @@
     <fs-page class="fs-page-custom">
         <fs-crud ref="crudRef" v-bind="crudBinding">
             <template #header-middle>
-                <el-card style="height: 680px;margin-bottom: 5px;" shadow="hover">
-
-                    <!--<line-chart :chartData="chartData"/>-->
-                    <el-tabs type="border-card" @click="clickFn">
-                        <el-tab-pane label="数据趋势">
-                            <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">日</el-button>
-                                    <el-button type="primary">周</el-button>
-                                    <el-button type="primary">月</el-button>
-                                </el-button-group>
-                            </div>
-                            <BarLineChart ref="barLine" :barLineData="barLineData"/>
-                        </el-tab-pane>
-                        <el-tab-pane label="广告结构">
-                            <PieBarChart ref="pieBar"/>
-                        </el-tab-pane>
-                        <el-tab-pane label="散点透视">
-                            <ScatterChart ref="scatter" :scatterData="scatterData"/>
-                        </el-tab-pane>
-                    </el-tabs>
-                </el-card>
-
+                <el-tabs type="border-card" @click="clickFn" class="chart-tabs">
+                    <el-tab-pane label="数据趋势">
+                        <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">日</el-button>
+                                <el-button type="primary">周</el-button>
+                                <el-button type="primary">月</el-button>
+                            </el-button-group>
+                        </div>
+                        <BarLineChart ref="barLine" :barLineData="barLineData"/>
+                    </el-tab-pane>
+                    <el-tab-pane label="广告结构">
+                        <PieBarChart ref="pieBar"/>
+                    </el-tab-pane>
+                    <el-tab-pane label="散点透视"><ScatterChart ref="scatter"/></el-tab-pane>
+                </el-tabs>
             </template>
         </fs-crud>
     </fs-page>

src/views/adManage/sb/index.vue

@@ -1,11 +1,11 @@
 <template>
-    <div class="ads-container">
+    <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="topTabs">
+            <el-tabs class="asj-tabs">
                 <el-tab-pane label="广告活动">
                     <campaigns></campaigns>
                 </el-tab-pane>
@@ -32,33 +32,16 @@ function changeDateRange(val: string[]) {
 
 </script>
 
-<style scoped>
-    .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);
-    }
-
-    ::v-deep(.el-tabs__header) {
-
-        background-color: #fff;
-        position: sticky;
-        box-shadow: 0 0 12px rgba(51, 89, 181, 0.16);
-    }
-
-    ::v-deep(.topTabs>.el-tabs__header .el-tabs__nav-scroll){
-        margin-left: 10px;
-    }
-
-    ::v-deep(.topTabs>.el-tabs__header.is-top) {
-        position: sticky;
-        top: 35px;
-        z-index: 10;
-    }
+<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>

src/views/adManage/sp/adGroups/adGroupDetail/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="asj-container">
-    <div class="asj-header">
+    <div class="asj-detail-header">
       <span style="font-size: x-large; font-weight: bold; color: #0f1111;margin: 5px;"> 
         <span> {{ adGroupInfo.adGroupName }} </span>
       </span>
-      <div class="asj-info">
+      <div class="asj-detail-info">
         <span>状态：{{ adGroupInfo.state }}</span>
         <span>投放类型：</span>
         <span>默认竞价：{{ adGroupInfo.defaultBid }}</span>
         <span>投放日期：</span>
       </div>
     </div>
-    <el-tabs type="border-card" class="asj-tabs">
+    <el-tabs type="border-card" class="asj-detail-tabs">
       <el-tab-pane label="商品推广">
         <Ads />
       </el-tab-pane>

src/views/adManage/sp/adGroups/crud.tsx

@@ -25,7 +25,9 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 
 	return {
 		crudOptions: {
-			table: {},
+			table: {
+				height: 750
+			},
 			container: {
         fixedHeight: false
       },

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

@@ -1,10 +1,10 @@
 <template>
   <div class="asj-container">
-    <div class="asj-header">
+    <div class="asj-detail-header">
       <span style="font-size: x-large; font-weight: bold; color: #0f1111;margin: 5px;"> 
         <span> {{ campaignInfo.campaignName }}</span>
       </span>
-      <div class="asj-info">
+      <div class="asj-detail-info">
         <span>状态：{{ campaignInfo.state }}</span>
         <span>预算：${{ campaignInfo.budget }}</span>
         <span>投放类型：{{ campaignInfo.targetingType }}</span>
@@ -13,7 +13,7 @@
         <span>竞价策略：{{ campaignInfo.dynBidStrategy }}</span>
       </div>
     </div>
-    <el-tabs type="border-card" class="asj-tabs">
+    <el-tabs type="border-card" class="asj-detail-tabs">
       <el-tab-pane label="广告组">
         <AdGroups :campaignId="route.query.campaignId"></AdGroups>
       </el-tab-pane>

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

@@ -7,10 +7,10 @@
 						<MetricsCards v-model="metrics" :metric-items="options" @change="changeMetric"></MetricsCards>
 						<DataTendencyChart ref="dataTendencyRef"></DataTendencyChart>
 					</el-tab-pane>
-					<el-tab-pane label="广告结构" name="adStruct">
+					<el-tab-pane label="广告结构" name="adStruct" :lazy="true">
 						<AdStructChart ref="adStructChartRef"/>
 					</el-tab-pane>
-					<el-tab-pane label="散点视图" name="s"></el-tab-pane>
+					<el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
 				</el-tabs>
 			</template>
 			<template #cell_campaignName="scope">
@@ -54,10 +54,13 @@ onMounted(() => {
 	crudExpose.doRefresh();
 })
 
+const resizeTabChart = () => {
+	adStructChartRef.value.resizeChart()
+	dataTendencyRef.value.resizeChart()
+}
 const changeTab = () => {
 	nextTick(() => {
-		adStructChartRef.value.resizeChart()
-		dataTendencyRef.value.resizeChart()
+		resizeTabChart()
 	})
 }
 const changeMetric = () => {
@@ -69,6 +72,8 @@ const jumpGroup = (row: any) => {
 		query: { id: row.id, campaignId: row.campaignId, tagsViewName: row.campaignName },
 	})
 }
+
+defineExpose({ resizeTabChart })
 </script>
 
 <style lang="scss">

src/views/adManage/sp/index.vue

@@ -6,25 +6,29 @@
         <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
       </el-select>
     </div>
-    <el-tabs v-model="tabActiveName" class="ad-tabs">
+    <el-tabs v-model="tabActiveName" class="asj-tabs" @tab-change="changeTab">
       <el-tab-pane label="广告活动" name="campaigns">
-        <campaigns></campaigns>
+        <Campaigns ref="campaignsRef"/>
       </el-tab-pane>
-      <el-tab-pane label="关键词投放"></el-tab-pane>
-      <el-tab-pane label="商品投放"></el-tab-pane>
-      <el-tab-pane label="搜索词"></el-tab-pane>
-      <el-tab-pane label="广告位"></el-tab-pane>
+      <el-tab-pane label="关键词投放" name="keywords" :lazy="true">
+        <Keywords ref="keywordsRef"/>
+      </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>
 </template>
 
 <script lang="ts" setup>
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import campaigns from './campaigns/index.vue'
+import Campaigns from './campaigns/index.vue'
+import Keywords from './keywords/index.vue'
 import { recentDaysRange } from '/@/views/adManage/utils/tools'
 import { ref, onBeforeMount, Ref } from 'vue'
 import { useShopInfo } from '/@/stores/shopInfo'
 import { GetList } from '/@/views/adManage/portfolios/api'
+import { nextTick } from 'process'
 
 
 const shopInfo = useShopInfo()
@@ -32,48 +36,25 @@ const selectedPortfolios: Ref<string[]> = ref([])
 const portfolios: Ref<Portfolio[]> = ref([])
 const dateRange: Ref<string[]> = ref([])
 const tabActiveName = ref("campaigns")
+const keywordsRef = ref()
+const campaignsRef = ref()
 
 onBeforeMount(async () => {
+  console.log(shopInfo.profile)
   dateRange.value = recentDaysRange(shopInfo.profile.time_zone, 7)
 
   const resp:APIResponseData = await GetList({ limit: 999 })
   portfolios.value = resp.data
 })
+const changeTab = () => {
+  nextTick(() => {
+    campaignsRef.value.resizeTabChart()
+    keywordsRef.value.resizeTabChart()
+  })
+}
 
 </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: 0px 0px 0px rgba(51,89,181,0.16);
-}
-
-.ad-tabs > .el-tabs__header.is-top {
-  background-color: #fff;
-  position: sticky;
-  top: 32px;
-  z-index: 9;
-  box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
-}
-.ad-tabs .el-tabs__nav {
-  padding-left: 10px;
-}
-/* :deep(.el-tabs__header.is-top ) {
-  background-color: #fff;
-  position: sticky;
-  top: 32px;
-  z-index: 9;
-  box-shadow: 0px 0px 12px rgba(51,89,181,0.16);
-} */
 
-/* :deep(.el-tabs__nav) {
-  padding-left: 10px;
-} */
 </style>

src/views/adManage/sp/keywords/api.ts

@@ -0,0 +1,42 @@
+import { request } from '/@/utils/service';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import XEUtils from 'xe-utils';
+
+export const apiPrefix = '/api/ad_manage/spkeywords/';
+export function GetList(query: UserPageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        params: query,
+    })
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id + "/",
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}

src/views/adManage/sp/keywords/crud.tsx

@@ -0,0 +1,114 @@
+import * as api from './api'
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
+import { inject, nextTick, ref } from 'vue'
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
+
+	//权限判定
+	const hasPermissions = inject('$hasPermissions');
+
+	return {
+		crudOptions: {
+			table: {
+				height: 600
+			},
+			container: {
+        fixedHeight: false
+      },
+			actionbar: {
+				show: true,
+				buttons: {
+					add: {
+						show: false
+					}
+				}
+			},
+			search: {
+				show: false
+			},
+			toolbar: {
+        buttons: {
+					search: {
+						show: true
+					},
+					compact: {
+						show: false
+					}
+				}
+			},
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				fixed: 'right',
+				width: 80,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+            text: null
+						// show: hasPermissions('dictionary:Update'),
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+            text: null
+						// show: hasPermissions('dictionary:Delete'),
+					},
+				},
+			},
+			columns: {
+        keywordText: {
+          title: '关键词'
+        },
+				matchType: {
+					title: '匹配类型',
+					type: 'dict-select',
+					search: {
+						show: true
+					},
+					dict: dict({
+						data: [
+							{ value: 'BROAD', label: '广泛匹配' },
+							{ value: 'PHRASE', label: '词组匹配' },
+							{ value: 'EXACT', label: '精准匹配' },
+						]
+					})
+				},
+				state: {
+					title: '状态'
+				},
+				bid: {
+					title: '出价'
+				},
+				"campaign": {
+					title: '广告活动'
+				},
+				"adGroup": {
+					title: '广告组'
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,87 @@
+<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>