新增品牌推广SB-Detail页面; 修改Detail-head页面

src/theme/app.scss

@@ -417,22 +417,22 @@ body,
   box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
   z-index: 10;
   top: 0;
-  height: 80px;
-  margin-bottom: 3px;
+  height: 95px;
+  margin-bottom: -1px;
   display: flex;
   flex-direction: column;
 }
 
 .asj-detail-info {
   margin: 5px;
-  display: flex;
-  flex-direction: row;
+  //display: flex;
+  //flex-direction: row;
   gap: 30px;
 }
 
 .asj-detail-tabs > .el-tabs__header.is-top {
   position: sticky;
-  top: 80px;
+  top: 95px;
   z-index: 10;
   border-top: 1px solid #aeafb0;
 }

src/views/adManage/ad-overview/daily/crud.tsx

@@ -46,7 +46,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         fixedHeight: false
       },
       actionbar: {
-        show: true,
+        show: false,
         buttons: {
           add: {
             show: false
@@ -101,6 +101,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '花费',
           column: {
             align: 'center',
+            width: 100,
             sortable: true,
             border: '0.5px solid #ddd',
 
@@ -123,6 +124,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '销售额',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -153,6 +155,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: 'ACOS',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -172,6 +175,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: 'ROAS',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -231,6 +235,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '点击量',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -250,6 +255,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '点击率',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -269,6 +275,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '订单数',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -299,6 +306,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '销量',
           column: {
             align: 'center',
+            width: 100,
             sortable: true,
             renderHeader() {
               return (
@@ -329,6 +337,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '曝光量',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -348,6 +357,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '转化率',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (

src/views/adManage/ad-overview/daily/index.vue

@@ -95,14 +95,14 @@ const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   dateRange,
-  profileId: profile.value.profileId,
+  profileId: profile.value.profile_id,
   campaignType: selectedPortfolios.value
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()
 const showCompare = ref(false)
 
-
+console.log(111, profile.value.profile_id)
 onMounted(async () => {
   crudExpose.doRefresh()
 })

src/views/adManage/ad-overview/monthly/crud.tsx

@@ -43,7 +43,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         fixedHeight: false
       },
       actionbar: {
-        show: true,
+        show: false,
         buttons: {
           add: {
             show: false
@@ -98,6 +98,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '花费',
           column: {
             align: 'center',
+            width: 100,
             sortable: true,
             border: '0.5px solid #ddd',
 
@@ -120,6 +121,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '销售额',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -150,6 +152,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: 'ACOS',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -169,6 +172,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: 'ROAS',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -228,6 +232,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '点击量',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -247,6 +252,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '点击率',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -266,6 +272,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '订单数',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -296,6 +303,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '销量',
           column: {
             align: 'center',
+            width: 100,
             sortable: true,
             renderHeader() {
               return (
@@ -326,6 +334,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '曝光量',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -345,6 +354,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '转化率',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (

src/views/adManage/ad-overview/monthly/index.vue

@@ -95,7 +95,7 @@ const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   dateRange,
-  profileId: profile.value.profileId,
+  profileId: profile.value.profile_id,
   campaignType: selectedPortfolios.value
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })

src/views/adManage/ad-overview/weekly/crud.tsx

@@ -85,7 +85,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
         Name: {
           title: '日期',
           column: {
-            width: 100,
+            width: 130,
             align: 'left',
             fixed: 'left',
             // border: '0.5px solid #ddd',
@@ -98,6 +98,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '花费',
           column: {
             align: 'center',
+            width: 100,
             sortable: true,
             border: '0.5px solid #ddd',
 
@@ -120,6 +121,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '销售额',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -150,6 +152,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: 'ACOS',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -169,6 +172,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: 'ROAS',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -228,6 +232,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '点击量',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -247,6 +252,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '点击率',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -266,6 +272,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '订单数',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -296,6 +303,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '销量',
           column: {
             align: 'center',
+            width: 100,
             sortable: true,
             renderHeader() {
               return (
@@ -326,6 +334,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '曝光量',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (
@@ -345,6 +354,7 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
           title: '转化率',
           column: {
             align: 'center',
+            width: 130,
             sortable: true,
             renderHeader() {
               return (

src/views/adManage/ad-overview/weekly/index.vue

@@ -95,7 +95,7 @@ const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   dateRange,
-  profileId: profile.value.profileId,
+  profileId: profile.value.profile_id,
   campaignType: selectedPortfolios.value
 })
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/ads/api.ts

@@ -1,7 +1,7 @@
 import { request } from '/@/utils/service';
 import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
-export const apiPrefix = '/api/ad_manage/spgroupdetail/';
+export const apiPrefix = '/api/ad_manage/sbgroupdetail/';
 export function GetList(query: UserPageQuery) {
     return request({
         url: apiPrefix + 'ads/list/',
@@ -48,7 +48,7 @@ export function getCardData(query: UserPageQuery) {
         params: query
     })
   }
-  
+
   export function getLineData(query: UserPageQuery) {
     query["dateRangeType"] = "D"
     return request({

src/views/adManage/sb/campaigns/campaignDetail/adGroups/adGroupDetail/api.ts

@@ -1,7 +1,7 @@
 import { request } from '/@/utils/service'
 import { LocationQueryValue } from 'vue-router'
 
-export const apiPrefix = '/api/ad_manage/spgroupdetail/'
+export const apiPrefix = '/api/ad_manage/sbgroupdetail/'
 
 export function GetObj(adGroupId: LocationQueryValue | LocationQueryValue[]) {
 	return request({
@@ -9,4 +9,4 @@ export function GetObj(adGroupId: LocationQueryValue | LocationQueryValue[]) {
 		method: 'get',
 		params: { adGroupId },
 	})
-}
+}

src/views/adManage/sb/campaigns/campaignDetail/adGroups/api.ts

@@ -1,7 +1,7 @@
 import { request } from '/@/utils/service'
 import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud'
 
-export const apiPrefix = '/api/ad_manage/spcampaigndetail/spgroups/'
+export const apiPrefix = '/api/ad_manage/sbcampaigndetail/sbgroups/'
 export function GetList(query: UserPageQuery) {
 	return request({
 		url: apiPrefix + 'list/',

src/views/adManage/sb/campaigns/campaignDetail/adGroups/crud.tsx

@@ -28,7 +28,16 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 	return {
 		crudOptions: {
 			table: {
-				height: 750
+				height: 750,
+				headerCellStyle: {
+					backgroundColor: '#f6f7fa', // 直接设置背景颜色
+					height: '20px',
+					// border: '0.5px solid #ddd',
+				},
+				cellStyle: {
+					border: 'none',
+					borderBottom: '0.5px solid #ddd',
+				},
 			},
 			container: {
         fixedHeight: false
@@ -88,26 +97,26 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						rules: [{required: true, message:'必填项'}]
 					}
         },
-				targetingType: {
+				creative_type: {
 					title: '投放类型',
 					type: 'dict-select',
 					column: {
 						align: 'center',
-						width: '110px'
+						width: '130px'
 					},
 					dict: dict({
 						data: [
-							{ label: '自动定向', value: 'automatic' },
-							{ label: '商品定向', value: 'product' },
-							{ label: '关键词投放', value: 'keyword' }
+							{ label: '商品集', value: 'PRODUCT_COLLECTION' },
+							{ label: '品牌视频', value: 'BRAND_VIDEO' },
+							{ label: '视频', value: 'VIDEO' }
 						]
 					})
 				},
 				state: {
-					title: '状态'
-				},
-				defaultBid: {
-					title: '默认竞价'
+					title: '状态',
+					column: {
+						width: 100
+					}
 				},
 				...BaseColumn
 			}

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

@@ -12,7 +12,11 @@
         </DataTendencyChart>
       </template>
       <template #cell_adGroupName="scope">
-        <el-link type="primary" :underline="false" @click="jumpAds(scope.row)">{{ scope.row.adGroupName }}</el-link>
+        <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
+          <el-link type="primary" :underline="false" @click="jumpAds(scope.row)">
+            <div class="en-text">{{ scope.row.adGroupName }}</div>
+          </el-link>
+        </el-tooltip>
       </template>
 		</fs-crud>
 	</fs-page>
@@ -54,8 +58,7 @@ const jumpAds = (row: any) => {
 watch(
   queryParams,
   async () => {
-
-    crudExpose.doRefresh() 
+    crudExpose.doRefresh()
   },
   { deep: true }
 )
@@ -63,5 +66,16 @@ watch(
 </script>
 
 <style scoped>
-
-</style>
+.en-text {
+  max-width: 100%;
+  font-size: 13px;
+  font-weight: 420;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+</style>

src/views/adManage/sb/campaigns/campaignDetail/api.ts

@@ -3,7 +3,7 @@ import { LocationQueryValue } from 'vue-router'
 // import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 // import XEUtils from 'xe-utils';
 
-export const apiPrefix = '/api/ad_manage/spcampaigndetail/'
+export const apiPrefix = '/api/ad_manage/sbcampaigndetail/'
 
 export function GetObj(campaignId: LocationQueryValue | LocationQueryValue[]) {
 	return request({

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

@@ -5,12 +5,12 @@
         <span> {{ campaignInfo.campaignName }}</span>
       </span>
       <div class="asj-detail-info">
-        <span>状态：{{ campaignInfo.state }} ({{ campaignInfo.servingStatus }})</span>
-        <span>预算：{{ profile.currency_symbol + campaignInfo.budget }} | {{ campaignInfo.budgetType }}</span>
-        <span>投放类型：{{ campaignInfo.targetingType }}</span>
-        <span>投放日期：{{ campaignInfo.startDate }} ~ {{ campaignInfo.endDate ?? '无结束日期' }}</span>
-        <span>广告组合：{{ campaignInfo?.portfolioName }}</span>
-        <span>竞价策略：{{ getEnumLabel(dynBidStrategyEnum, campaignInfo.dynBidStrategy) }}</span>
+        <span style="color: rgb(177, 177, 177)">状态:</span> <el-button type="success" round plain size="small" style="margin-top: -3px">{{ dynStatusEnum[campaignInfo.state] }}</el-button><!--({{ campaignInfo.servingStatus }})-->
+        <span class="head-span">预算:</span> <span>{{ profile.currency_symbol + campaignInfo.budget }} | {{ campaignInfo.budgetType }}</span>
+        <!-- <span>投放类型：{{ campaignInfo.targetingType }}</span> -->
+        <span class="head-span">投放日期:</span> <span>{{ campaignInfo.startDate }} ~ {{ campaignInfo.endDate ?? '无结束日期' }}</span>
+        <span class="head-span">广告组合:</span> <span>{{ campaignInfo?.portfolioName }}</span>
+        <span class="head-span">竞价:</span> <span>{{ getEnumLabel(dynBidOptimizationEnum, campaignInfo.bidOptimization) }}</span>
       </div>
     </div>
     <el-tabs type="border-card" class="asj-detail-tabs" v-model="tabActiveName">
@@ -35,18 +35,18 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeMount, Ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import {onMounted, ref, Ref} from 'vue'
+import {useRoute} from 'vue-router'
 import AdGroups from './adGroups/index.vue'
 import Placement from './placement/index.vue'
 import Budget from './budget/index.vue'
-import { getEnumLabel } from '/@/views/adManage/utils/tools.js'
-import { dynBidStrategyEnum, spCampaignServingStatusEnum } from '/@/views/adManage/utils/enum.js'
-import { useShopInfo } from '/@/stores/shopInfo'
+import {getEnumLabel} from '/@/views/adManage/utils/tools.js'
+import {dynBidOptimizationEnum, dynStatusEnum} from '/@/views/adManage/utils/enum.js'
+import {useShopInfo} from '/@/stores/shopInfo'
 // import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
+import {storeToRefs} from 'pinia'
 
-import { GetObj } from './api'
+import {GetObj} from './api'
 
 const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)
@@ -61,6 +61,10 @@ onMounted(async () => {
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
+.head-span {
+  color: rgb(177, 177, 177);
+  margin-left: 40px;
+}
 </style>

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

@@ -63,7 +63,6 @@ onMounted(async () => {
   setTimeout(() => {
     resizeChart()
   }, 0)
-
   await initPieBarData()
   initChart()
 })

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

@@ -67,7 +67,7 @@ import {useRouter} from 'vue-router'
 import AdStructChart from './chartComponents/adStruct.vue'
 import DataTendencyChart from '/@/views/adManage/sb/chartComponents/dataTendency.vue'
 import {getCardData, getLineData, getLineMonthData, getLineWeekData} from './api'
-import {createMul, SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
+import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
 import DataCompare from '/@/components/dataCompare/index.vue'
 
 const tabActiveName = ref('dataTendency')
@@ -85,16 +85,16 @@ const showCompare = ref(false)
 
 const jumpGroup = (row: any) => {
 	router.push({
-		name: 'CampaignDetail',
+		name: 'SbCampaignDetail',
 		query: { campaignId: row.campaignId, tagsViewName: row.campaignName },
 	})
 }
 
-onMounted( () => {
+onMounted( async () => {
   crudExpose.doRefresh()
 })
 
-watch(queryParams, () => {
+watch(queryParams, async () => {
 	crudExpose.doRefresh()
 }, { deep: true })
 

src/views/adManage/sb/placement/chartComponents/adStruct.vue

@@ -16,16 +16,17 @@
 </template>
 
 <script setup>
-import { onMounted, ref, inject, computed, watch } from "vue"
+import { computed, onMounted, ref, watch } from "vue"
 import * as echarts from "echarts"
 import TextSelector from '/@/components/TextSelector/index.vue'
 import { getAdStructureData } from "/@/views/adManage/sp/placement/api"
 import { createDisabledOptions } from '../../../utils/dropdowndisable'
-import { barOptionsMap } from "/@/views/adManage/utils/enum"
+import { barOptions1, barOptions2, barOptionsMap } from "/@/views/adManage/utils/enum"
 import { useShopInfo } from '/@/stores/shopInfo'
 import { usePublicData } from "/@/stores/publicData"
 import { storeToRefs } from 'pinia'
 
+
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
@@ -36,166 +37,7 @@ const bar = ref()
 const loading = ref(true)
 
 // 下拉框相关
-const barOptions1 = [
-  {
-    value: 'ACOS',
-    label: 'ACOS',
-  },
-  {
-    value: 'ROAS',
-    label: 'ROAS',
-  },
-  {
-    value: 'Spend',
-    label: '花费',
-    units: '$',
-  },
-  {
-    value: 'TotalSales',
-    label: '销售额',
-  },
-  {
-    value: 'TotalPurchases',
-    label: '订单数',
-  },
-  {
-    value: 'TotalUnitOrdered',
-    label: '销量',
-  },
-  {
-    value: 'CPC',
-    label: '点击成本'
-  },
-  {
-    value: 'CPA',
-    label: '订单成本'
-  },
-  {
-    value: 'Impression',
-    label: '曝光量',
-  },
-  {
-    value: 'Click',
-    label: '点击量',
-  },
-  {
-    value: 'qwe',
-    label: '点击率'
-  },
-  {
-    value: '转化率',
-    label: '转化率'
-  },
-  {
-    value: 'TotalSalesSameSKU',
-    label: '推广商品销售额'
-  },
-  {
-    value: 'TotalSalesOtherSKU',
-    label: '其他商品销售额'
-  },
-  {
-    value: 'TotalPurchasesSameSKU',
-    label: '推广商品订单数'
-  },
-  {
-    value: 'TotalPurchasesOtherSKU',
-    label: '其他商品订单数'
-  },
-  {
-    value: 'TotalUnitOrderedSameSKU',
-    label: '推广商品销量'
-  },
-  {
-    value: 'TotalUnitOrderedOtherSKU',
-    label: '其他商品销量'
-  },
-  {
-    value: 'TopOfSearchImpressionShare',
-    label: '搜索结果顶部展示份额'
-  },
-]
 let barModelValue1 = ref(barOptions1[0].value)
-
-const barOptions2 = [
-  {
-    value: 'ACOS',
-    label: 'ACOS',
-  },
-  {
-    value: 'ROAS',
-    label: 'ROAS',
-  },
-  {
-    value: 'Spend',
-    label: '花费',
-    units: '$',
-  },
-  {
-    value: 'TotalSales',
-    label: '销售额',
-  },
-  {
-    value: 'TotalPurchases',
-    label: '订单数',
-  },
-  {
-    value: 'TotalUnitOrdered',
-    label: '销量',
-  },
-  {
-    value: 'CPC',
-    label: '点击成本'
-  },
-  {
-    value: 'CPA',
-    label: '订单成本'
-  },
-  {
-    value: 'Impression',
-    label: '曝光量',
-  },
-  {
-    value: 'Click',
-    label: '点击量',
-  },
-  {
-    value: 'qwe',
-    label: '点击率'
-  },
-  {
-    value: '转化率',
-    label: '转化率'
-  },
-  {
-    value: 'TotalSalesSameSKU',
-    label: '推广商品销售额'
-  },
-  {
-    value: 'TotalSalesOtherSKU',
-    label: '其他商品销售额'
-  },
-  {
-    value: 'TotalPurchasesSameSKU',
-    label: '推广商品订单数'
-  },
-  {
-    value: 'TotalPurchasesOtherSKU',
-    label: '其他商品订单数'
-  },
-  {
-    value: 'TotalUnitOrderedSameSKU',
-    label: '推广商品销量'
-  },
-  {
-    value: 'TotalUnitOrderedOtherSKU',
-    label: '其他商品销量'
-  },
-  {
-    value: 'TopOfSearchImpressionShare',
-    label: '搜索结果顶部展示份额'
-  },
-]
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
@@ -205,7 +47,7 @@ onMounted(async () => {
   setTimeout(() => {
     resizeChart()
   }, 0)
-
+  console.log(1111)
   await initBarData()
   initChart()
 })
@@ -245,9 +87,9 @@ async function initBarData() {
     'loose-match': '广泛匹配',
     'substitutes': '同类商品',
     'complements': '关联商品',
-    'top': '搜索结果顶部(首页)',
-    'rest_of_search': '搜索结果的其余位置',
-    'product_page': '商品页面'
+    'top': '首页',
+    'rest_of_search': '其他页面',
+    'product_page': '产品页面'
   }
   xAxisMapList = xAxisList.map(item => classificationMap[item])
   loading.value = false

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

@@ -13,8 +13,8 @@
                 :fetchLine="getLineData">
             </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" :lazy="true"></el-tab-pane>
         </el-tabs>
@@ -56,14 +56,14 @@
 </template>
 
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, watch} from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import {FsPage, useFs} from '@fast-crud/fast-crud'
 import {createCrudOptions} from './crud'
-import {useRoute, useRouter} from 'vue-router'
+import {useRouter} from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sb/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../campaigns/api'
+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '../campaigns/api'
 import {usePublicData} from '/@/stores/publicData'
 import {storeToRefs} from 'pinia'
 import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn'
@@ -93,10 +93,7 @@ onMounted(() => {
   crudExpose.doRefresh()
 })
 
-
-
-
-watch(queryParams, async () => {
+watch(queryParams, () => {
   crudExpose.doRefresh()
 }, { deep: true })
 

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

@@ -13,10 +13,10 @@
                 :fetchLine="getLineData">
             </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" :lazy="true"></el-tab-pane>
+          <el-tab-pane label="散点视图" name="scatterView"></el-tab-pane>
         </el-tabs>
       </template>
       <template #cell_percentTimeInBudget="scope">

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

@@ -28,7 +28,16 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 	return {
 		crudOptions: {
 			table: {
-				height: 750
+				height: 750,
+				headerCellStyle: {
+					backgroundColor: '#f6f7fa', // 直接设置背景颜色
+					height: '20px',
+					// border: '0.5px solid #ddd',
+				},
+				cellStyle: {
+					border: 'none',
+					borderBottom: '0.5px solid #ddd',
+				},
 			},
 			container: {
         fixedHeight: false
@@ -104,10 +113,16 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					})
 				},
 				state: {
-					title: '状态'
+					title: '状态',
+					column: {
+						width: 100
+					}
 				},
 				defaultBid: {
-					title: '默认竞价'
+					title: '默认竞价',
+					column: {
+						width: 100
+					}
 				},
 				...BaseColumn
 			}

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

@@ -1,25 +1,23 @@
 <template>
-    <div v-loading="loading">
-        <el-row :gutter="5">
-            <el-col :span="9">
-                <div>
-                    <TextSelector v-model="modelValue" :options="computedPieOptions" @change="changePie" style="margin-top: 5px"/>
-                </div>
-                <div ref="pie" style="height: 400px;"></div>
-            </el-col>
-            <el-col :span="15">
-                <div style="margin-left: 40%">
-                    <span style="background: #3a83f7; width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
-                    <TextSelector v-model="barModelValue1" :options="computedBarOptions1" @change="changeBarOne"
-                                  style="margin-top: 5px; margin-left: 8px;"/>
-                    <span style="background: #f19a37; width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
-                    <TextSelector v-model="barModelValue2" :options="computedBarOptions2" @change="changeBarTwo"
-                                  style="margin-top: 5px; margin-left: 8px;"/>
-                </div>
-                <div ref="bar" style="height: 400px;"></div>
-            </el-col>
-        </el-row>
-    </div>
+  <div v-loading="loading">
+    <el-row :gutter="5">
+      <el-col :span="9">
+        <div>
+          <TextSelector v-model="modelValue" :options="computedPieOptions" @change="changePie" style="margin-top: 5px"/>
+        </div>
+        <div ref="pie" style="height: 400px;"></div>
+      </el-col>
+      <el-col :span="15">
+        <div style="margin-left: 40%">
+          <span style="background: #3a83f7; width: 18px; height: 10px; margin-top: 8px; display: inline-block; border-radius: 3px;"></span>
+          <TextSelector v-model="barModelValue1" :options="computedBarOptions1" @change="changeBarOne" style="margin-top: 5px; margin-left: 8px;"/>
+          <span style="background: #f19a37; width: 18px; height: 10px; margin-top: 8px; margin-left: 20px; display: inline-block; border-radius: 3px;"></span>
+          <TextSelector v-model="barModelValue2" :options="computedBarOptions2" @change="changeBarTwo" style="margin-top: 5px; margin-left: 8px;"/>
+        </div>
+        <div ref="bar" style="height: 400px;"></div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup>
@@ -31,6 +29,7 @@ import { createDisabledOptions } from '../../../utils/dropdowndisable'
 import { barOptionsMap, metricMap } from '/@/views/adManage/utils/enum'
 import { useShopInfo } from '/@/stores/shopInfo'
 
+
 const shopInfo = useShopInfo()
 let pieChart = ref()
 let barChart = ref()
@@ -42,221 +41,219 @@ const dateRange = inject('dateRange')
 
 // 下拉框相关
 const pieOptions = [
-    {
-        value: 'Spend',
-        label: '花费',
-    },
-    {
-        value: 'TotalSales',
-        label: '销售额',
-    },
-    {
-        value: 'TotalPurchases',
-        label: '订单数',
-    },
-    {
-        value: 'TotalUnitOrdered',
-        label: '销量',
-    },
-    {
-        value: 'Impression',
-        label: '曝光量',
-    },
-    {
-        value: 'Click',
-        label: '点击量',
-    },
+  {
+    value: 'Spend',
+    label: '花费',
+  },
+  {
+    value: 'TotalSales',
+    label: '销售额',
+  },
+  {
+    value: 'TotalPurchases',
+    label: '订单数',
+  },
+  {
+    value: 'TotalUnitOrdered',
+    label: '销量',
+  },
+  {
+    value: 'Impression',
+    label: '曝光量',
+  },
+  {
+    value: 'Click',
+    label: '点击量',
+  },
 ]
 let modelValue = ref(pieOptions[0].value)
 
 const barOptions1 = [
-    {
-        value: 'ACOS',
-        label: 'ACOS',
-    },
-    {
-        value: 'ROAS',
-        label: 'ROAS',
-    },
-    {
-        value: 'Spend',
-        label: '花费',
-        units: '$',
-    },
-    {
-        value: 'TotalSales',
-        label: '销售额',
-    },
-    {
-        value: 'TotalPurchases',
-        label: '订单数',
-    },
-    {
-        value: 'TotalUnitOrdered',
-        label: '销量',
-    },
-    {
-        value: 'CPC',
-        label: '点击成本'
-    },
-    {
-        value: 'CPA',
-        label: '订单成本'
-    },
-    {
-        value: 'Impression',
-        label: '曝光量',
-    },
-    {
-        value: 'Click',
-        label: '点击量',
-    },
-    {
-        value: 'qwe',
-        label: '点击率'
-    },
-    {
-        value: '转化率',
-        label: '转化率'
-    },
-    {
-        value: 'TotalSalesSameSKU',
-        label: '推广商品销售额'
-    },
-    {
-        value: 'TotalSalesOtherSKU',
-        label: '其他商品销售额'
-    },
-    {
-        value: 'TotalPurchasesSameSKU',
-        label: '推广商品订单数'
-    },
-    {
-        value: 'TotalPurchasesOtherSKU',
-        label: '其他商品订单数'
-    },
-    {
-        value: 'TotalUnitOrderedSameSKU',
-        label: '推广商品销量'
-    },
-    {
-        value: 'TotalUnitOrderedOtherSKU',
-        label: '其他商品销量'
-    },
-    {
-        value: 'TopOfSearchImpressionShare',
-        label: '搜索结果顶部展示份额'
-    },
+  {
+    value: 'ACOS',
+    label: 'ACOS',
+  },
+  {
+    value: 'ROAS',
+    label: 'ROAS',
+  },
+  {
+    value: 'Spend',
+    label: '花费',
+    units: '$',
+  },
+  {
+    value: 'TotalSales',
+    label: '销售额',
+  },
+  {
+    value: 'TotalPurchases',
+    label: '订单数',
+  },
+  {
+    value: 'TotalUnitOrdered',
+    label: '销量',
+  },
+  {
+    value: 'CPC',
+    label: '点击成本'
+  },
+  {
+    value: 'CPA',
+    label: '订单成本'
+  },
+  {
+    value: 'Impression',
+    label: '曝光量',
+  },
+  {
+    value: 'Click',
+    label: '点击量',
+  },
+  {
+    value: 'qwe',
+    label: '点击率'
+  },
+  {
+    value: '转化率',
+    label: '转化率'
+  },
+  {
+    value: 'TotalSalesSameSKU',
+    label: '推广商品销售额'
+  },
+  {
+    value: 'TotalSalesOtherSKU',
+    label: '其他商品销售额'
+  },
+  {
+    value: 'TotalPurchasesSameSKU',
+    label: '推广商品订单数'
+  },
+  {
+    value: 'TotalPurchasesOtherSKU',
+    label: '其他商品订单数'
+  },
+  {
+    value: 'TotalUnitOrderedSameSKU',
+    label: '推广商品销量'
+  },
+  {
+    value: 'TotalUnitOrderedOtherSKU',
+    label: '其他商品销量'
+  },
+  {
+    value: 'TopOfSearchImpressionShare',
+    label: '搜索结果顶部展示份额'
+  },
 ]
 let barModelValue1 = ref(barOptions1[0].value)
 
 const barOptions2 = [
-    {
-        value: 'ACOS',
-        label: 'ACOS',
-    },
-    {
-        value: 'ROAS',
-        label: 'ROAS',
-    },
-    {
-        value: 'Spend',
-        label: '花费',
-        units: '$',
-    },
-    {
-        value: 'TotalSales',
-        label: '销售额',
-    },
-    {
-        value: 'TotalPurchases',
-        label: '订单数',
-    },
-    {
-        value: 'TotalUnitOrdered',
-        label: '销量',
-    },
-    {
-        value: 'CPC',
-        label: '点击成本'
-    },
-    {
-        value: 'CPA',
-        label: '订单成本'
-    },
-    {
-        value: 'Impression',
-        label: '曝光量',
-    },
-    {
-        value: 'Click',
-        label: '点击量',
-    },
-    {
-        value: 'qwe',
-        label: '点击率'
-    },
-    {
-        value: '转化率',
-        label: '转化率'
-    },
-    {
-        value: 'TotalSalesSameSKU',
-        label: '推广商品销售额'
-    },
-    {
-        value: 'TotalSalesOtherSKU',
-        label: '其他商品销售额'
-    },
-    {
-        value: 'TotalPurchasesSameSKU',
-        label: '推广商品订单数'
-    },
-    {
-        value: 'TotalPurchasesOtherSKU',
-        label: '其他商品订单数'
-    },
-    {
-        value: 'TotalUnitOrderedSameSKU',
-        label: '推广商品销量'
-    },
-    {
-        value: 'TotalUnitOrderedOtherSKU',
-        label: '其他商品销量'
-    },
-    {
-        value: 'TopOfSearchImpressionShare',
-        label: '搜索结果顶部展示份额'
-    },
+  {
+    value: 'ACOS',
+    label: 'ACOS',
+  },
+  {
+    value: 'ROAS',
+    label: 'ROAS',
+  },
+  {
+    value: 'Spend',
+    label: '花费',
+    units: '$',
+  },
+  {
+    value: 'TotalSales',
+    label: '销售额',
+  },
+  {
+    value: 'TotalPurchases',
+    label: '订单数',
+  },
+  {
+    value: 'TotalUnitOrdered',
+    label: '销量',
+  },
+  {
+    value: 'CPC',
+    label: '点击成本'
+  },
+  {
+    value: 'CPA',
+    label: '订单成本'
+  },
+  {
+    value: 'Impression',
+    label: '曝光量',
+  },
+  {
+    value: 'Click',
+    label: '点击量',
+  },
+  {
+    value: 'qwe',
+    label: '点击率'
+  },
+  {
+    value: '转化率',
+    label: '转化率'
+  },
+  {
+    value: 'TotalSalesSameSKU',
+    label: '推广商品销售额'
+  },
+  {
+    value: 'TotalSalesOtherSKU',
+    label: '其他商品销售额'
+  },
+  {
+    value: 'TotalPurchasesSameSKU',
+    label: '推广商品订单数'
+  },
+  {
+    value: 'TotalPurchasesOtherSKU',
+    label: '其他商品订单数'
+  },
+  {
+    value: 'TotalUnitOrderedSameSKU',
+    label: '推广商品销量'
+  },
+  {
+    value: 'TotalUnitOrderedOtherSKU',
+    label: '其他商品销量'
+  },
+  {
+    value: 'TopOfSearchImpressionShare',
+    label: '搜索结果顶部展示份额'
+  },
 ]
 let barModelValue2 = ref(barOptions2[2].value)
 
 onMounted(async () => {
-    barChart = echarts.init(bar.value)
-    pieChart = echarts.init(pie.value)
+  barChart = echarts.init(bar.value)
+  pieChart = echarts.init(pie.value)
 
-    window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
-    setTimeout(() => {
-        resizeChart()
-    }, 0)
-
-    await initPieBarData()
-    initChart()
+  window.addEventListener('resize', resizeChart)  // 监听窗口大小变化，调整图表大小
+  setTimeout(() => {
+    resizeChart()
+  }, 0)
+  await initPieBarData()
+  initChart()
 })
 
 // 获取总数据
-let allData = null
+let allData
 
 async function setAdStructureData() {
-    allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
-    console.log('allData.data', allData.data)
-    return allData.data
+  allData = await getAdStructureData({ startDate: dateRange.value[0], endDate: dateRange.value[1], profileId: shopInfo.profile.profile_id })
+  return allData.data
 }
 
 // 饼图总数据和柱状图总数据
-let pieData = null
-let barData = null
-let pieBarData = null
+let pieData
+let barData
+let pieBarData
 // 柱状图初始数据
 let ACOSList
 let SpendList
@@ -264,30 +261,30 @@ let xAxisList
 let xAxisMapList
 
 async function initPieBarData() {
-    pieBarData = await setAdStructureData()
-    pieData = [
-        { value: pieBarData.pie_data[0].Spend, name: '自动' },
-        { value: pieBarData.pie_data[1].Spend, name: '手动' },
-    ]
-    barData = pieBarData.line_data
-    // 柱状图初始化数据
-    ACOSList = barData.map(item => item.ACOS)
-    SpendList = barData.map(item => item.Spend)
-    // 将x轴映射为中文
-    xAxisList = barData.map(item => item.Classification)
-    const classificationMap = {
-        'BROAD': '关键词-广泛',
-        'category': '品类',
-        'EXACT': '关键词-精准',
-        'asin': '商品',
-        'PHRASE': '关键词-词组',
-        'close-match': '紧密匹配',
-        'loose-match': '广泛匹配',
-        'substitutes': '同类商品',
-        'complements': '关联商品'
-    }
-    xAxisMapList = xAxisList.map(item => classificationMap[item])
-    loading.value = false
+  pieBarData = await setAdStructureData()
+  pieData = [
+    { value: pieBarData.pie_data[0].Spend, name: '自动' },
+    { value: pieBarData.pie_data[1].Spend, name: '手动' },
+  ]
+  barData = pieBarData.line_data
+  // 柱状图初始化数据
+  ACOSList = barData.map(item => item.ACOS)
+  SpendList = barData.map(item => item.Spend)
+  // 将x轴映射为中文
+  xAxisList = barData.map(item => item.Classification)
+  const classificationMap = {
+    'BROAD': '关键词-广泛',
+    'category': '品类',
+    'EXACT': '关键词-精准',
+    'asin': '商品',
+    'PHRASE': '关键词-词组',
+    'close-match': '紧密匹配',
+    'loose-match': '广泛匹配',
+    'substitutes': '同类商品',
+    'complements': '关联商品'
+  }
+  xAxisMapList = xAxisList.map(item => classificationMap[item])
+  loading.value = false
 }
 
 // 重置图像
@@ -297,63 +294,63 @@ let option2
 
 // 点击下拉框后重新渲染饼图
 function changePie(newValue) {
-    modelValue.value = newValue
-    flag.value = modelValue.value
-    option2.series[0].data = [
-        { value: pieBarData.pie_data[0][flag.value], name: '自动' },
-        { value: pieBarData.pie_data[1][flag.value], name: '手动' },
-    ]
-    pieChart.setOption(option2)
+  modelValue.value = newValue
+  flag.value = modelValue.value
+  option2.series[0].data = [
+    { value: pieBarData.pie_data[0][flag.value], name: '自动' },
+    { value: pieBarData.pie_data[1][flag.value], name: '手动' },
+  ]
+  pieChart.setOption(option2)
 }
 
 // 点击下拉框后重新渲染柱状图
 function changeBarOne(newValue) {
-    barModelValue1.value = newValue
-    updateBarChart()
+  barModelValue1.value = newValue
+  updateBarChart()
 }
 
 function changeBarTwo(newValue) {
-    barModelValue2.value = newValue
-    updateBarChart()
+  barModelValue2.value = newValue
+  updateBarChart()
 }
 
 function updateBarChart() {
-    const barValues1 = barData.map(item => item[barModelValue1.value])
-    const barValues2 = barData.map(item => item[barModelValue2.value])
+  const barValues1 = barData.map(item => item[barModelValue1.value])
+  const barValues2 = barData.map(item => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 // 监听时间变化重新渲染表格
 watch(dateRange, async () => {
-    if (dateRange.value) {
-        loading.value = true
-        const resp = await setAdStructureData()
-        updatePieChartData(resp)
-        updateBarChartData(resp)
-        loading.value = false
-    }
+  if (dateRange.value) {
+    loading.value = true
+    const resp = await setAdStructureData()
+    updatePieChartData(resp)
+    updateBarChartData(resp)
+    loading.value = false
+  }
 })
 
 // 根据新数据和当前下拉框选择更新 饼图数据
 function updatePieChartData(resp) {
-    option2.series[0].data = [
-        { value: resp.pie_data[0][modelValue.value], name: '自动' },
-        { value: resp.pie_data[1][modelValue.value], name: '手动' },
-    ]
-    pieChart.setOption(option2)
+  option2.series[0].data = [
+    { value: resp.pie_data[0][modelValue.value], name: '自动' },
+    { value: resp.pie_data[1][modelValue.value], name: '手动' },
+  ]
+  pieChart.setOption(option2)
 }
 
 // 根据新数据和当前下拉框选择更新 柱状图数据
 function updateBarChartData(resp) {
-    const barValues1 = resp.line_data.map(item => item[barModelValue1.value])
-    const barValues2 = resp.line_data.map(item => item[barModelValue2.value])
+  const barValues1 = resp.line_data.map(item => item[barModelValue1.value])
+  const barValues2 = resp.line_data.map(item => item[barModelValue2.value])
 
-    option.series[0].data = barValues1
-    option.series[1].data = barValues2
-    barChart.setOption(option)
+  option.series[0].data = barValues1
+  option.series[1].data = barValues2
+  barChart.setOption(option)
 }
 
 const computedBarOptions1 = computed(() => createDisabledOptions(barOptions1, barModelValue2.value, barModelValue1.value))
@@ -362,159 +359,159 @@ const computedPieOptions = computed(() => createDisabledOptions(pieOptions, mode
 
 // 初始化图表
 function initChart() {
-    // 柱状图配置
-    option = {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-            },
-            rich: {
-                b: {
-                    color: '#4C5058',
-                    fontSize: 15,
-                    fontWeight: 'bold',
-                    lineHeight: 33
-                },
-            }
+  // 柱状图配置
+  option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      rich: {
+        b: {
+          color: '#4C5058',
+          fontSize: 15,
+          fontWeight: 'bold',
+          lineHeight: 33
         },
-        toolbox: {
-            feature: {
-                saveAsImage: { yAxisIndex: 'none' }
-            }
+      }
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: { yAxisIndex: 'none' }
+      }
+    },
+    grid: { top: 55, right: 60, bottom: 55, left: 55, },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: true,
+        data: xAxisMapList,
+        axisLabel: {
+          rotate: -30, // 将标签旋转
+          fontSize: 13
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        // name: '数据1',
+        // axisLabel: {
+        //     formatter: '{value} %'
+        // },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3a83f7' // 第一个 Y 轴的颜色
+          }
+        }
+      },
+      {
+        type: 'value',
+        // name: '数据2',
+        splitLine: {
+          show: false
         },
-        grid: { top: 55, right: 60, bottom: 55, left: 55, },
-        xAxis: [
-            {
-                type: 'category',
-                boundaryGap: true,
-                data: xAxisMapList,
-                axisLabel: {
-                    rotate: -30, // 将标签旋转
-                    fontSize: 13
-                }
-            }
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                // name: '数据1',
-                // axisLabel: {
-                //     formatter: '{value} %'
-                // },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#3a83f7' // 第一个 Y 轴的颜色
-                    }
-                }
-            },
-            {
-                type: 'value',
-                // name: '数据2',
-                splitLine: {
-                    show: false
-                },
-                // axisLabel: {
-                //     formatter: '{value} 单位2'
-                // },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: '#f19a37' // 第一个 Y 轴的颜色
-                    }
-                }
-            }
-        ],
-        series: [
-            {
-                name: barOptionsMap[barModelValue1.value],
-                type: 'bar',
-                barWidth: '15%',
-                data: ACOSList,
-                yAxisIndex: 0,
-                itemStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        { offset: 0, color: '#3a83f7' },
-                        { offset: 1, color: 'rgb(111, 209, 206)' },
-                    ]),
-                    // 柱状图圆角
-                    borderRadius: [6, 6, 6, 6],
-                },
-            },
-            {
-                name: barOptionsMap[barModelValue2.value],
-                type: 'bar',
-                barWidth: '15%',
-                data: SpendList,
-                yAxisIndex: 1,
-                itemStyle: {
-                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        { offset: 0, color: '#f19a37' },
-                        { offset: 1, color: 'rgb(234,207,135)' },
-                    ]),
-                    // 柱状图圆角
-                    borderRadius: [6, 6, 6, 6],
-                },
+        // axisLabel: {
+        //     formatter: '{value} 单位2'
+        // },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#f19a37' // 第一个 Y 轴的颜色
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: barOptionsMap[barModelValue1.value],
+        type: 'bar',
+        barWidth: '15%',
+        data: ACOSList,
+        yAxisIndex: 0,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#3a83f7' },
+            { offset: 1, color: 'rgb(111, 209, 206)' },
+          ]),
+          // 柱状图圆角
+          borderRadius: [6, 6, 6, 6],
+        },
+      },
+      {
+        name: barOptionsMap[barModelValue2.value],
+        type: 'bar',
+        barWidth: '15%',
+        data: SpendList,
+        yAxisIndex: 1,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#f19a37' },
+            { offset: 1, color: 'rgb(234,207,135)' },
+          ]),
+          // 柱状图圆角
+          borderRadius: [6, 6, 6, 6],
+        },
+      },
+    ],
+  }
+  barChart.setOption(option)
+  // 饼图配置
+  option2 = {
+    tooltip: {
+      show: false,
+      trigger: 'item',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['20%', '45%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          // borderRadius: 10,
+          borderWidth: 1, // 设置边框的宽度
+          borderColor: '#fff', // 将边框颜色设置为白色或图表背景颜色
+        },
+        emphasis: {
+          label: {
+            show: true,
+            // fontSize: 40,
+            fontWeight: 'bold',
+          }
+        },
+        label: {
+          show: true,
+          position: 'outside', // 标签显示在外侧
+          // formatter: `{b}\n{b|${metricMap[modelValue.value]}:{c}}\n{d}%`, // 标签文本格式器
+          formatter: (params) => {
+            return params.name + '\n' + '{b|' + metricMap[modelValue.value] + ':}' + '{b|' + params.data.value + '}' + '\n' + params.percent + '%'
+          },
+          rich: {
+            b: {
+              color: '#4C5058',
+              fontSize: 15,
+              fontWeight: 'bold',
+              lineHeight: 33
             },
-        ],
-    }
-    barChart.setOption(option)
-    // 饼图配置
-    option2 = {
-        tooltip: {
-            show: false,
-            trigger: 'item',
+          }
         },
-        series: [
-            {
-                type: 'pie',
-                radius: ['20%', '45%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    // borderRadius: 10,
-                    borderWidth: 1, // 设置边框的宽度
-                    borderColor: '#fff', // 将边框颜色设置为白色或图表背景颜色
-                },
-                emphasis: {
-                    label: {
-                        show: true,
-                        // fontSize: 40,
-                        fontWeight: 'bold',
-                    }
-                },
-                label: {
-                    show: true,
-                    position: 'outside', // 标签显示在外侧
-                    // formatter: `{b}\n{b|${metricMap[modelValue.value]}:{c}}\n{d}%`, // 标签文本格式器
-                    formatter: (params) => {
-                        return params.name + '\n' + '{b|' + metricMap[modelValue.value] + ':}' + '{b|' + params.data.value + '}' + '\n' + params.percent + '%'
-                    },
-                    rich: {
-                        b: {
-                            color: '#4C5058',
-                            fontSize: 15,
-                            fontWeight: 'bold',
-                            lineHeight: 33
-                        },
-                    }
-                },
-                labelLine: {
-                    normal: {
-                        show: true
-                    }
-                },
-                data: pieData
-            }
-        ]
-    }
-    pieChart.setOption(option2)
-    resizeChart()
+        labelLine: {
+          normal: {
+            show: true
+          }
+        },
+        data: pieData
+      }
+    ]
+  }
+  pieChart.setOption(option2)
+  resizeChart()
 }
 
 function resizeChart() {
-    barChart.resize()
-    pieChart.resize()
+  barChart.resize()
+  pieChart.resize()
 }
 
 defineExpose({ resizeChart })

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

@@ -82,20 +82,21 @@ const queryParams = ref({
 const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
 const router = useRouter()
 const showCompare = ref(false)
-
-onMounted(async () => {
-  crudExpose.doRefresh()
-})
 const jumpGroup = (row: any) => {
   router.push({
-    name: 'CampaignDetail',
+    name: 'SpCampaignDetail',
     query: {campaignId: row.campaignId, tagsViewName: row.campaignName},
   })
 }
 
+onMounted(async () => {
+  crudExpose.doRefresh()
+})
+
 watch(queryParams, async () => {
   crudExpose.doRefresh()
 }, {deep: true})
+
 </script>
 
 <style lang="scss" scoped>
@@ -106,9 +107,11 @@ watch(queryParams, async () => {
 ::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+3):nth-child(-n+10) .cell) {
   display: none;
 }
+
 ::v-deep(.el-table--border .el-table__footer-wrapper) {
   border: none;
 }
+
 .en-text {
   max-width: 100%;
   font-size: 13px;

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

@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { ref,onMounted, onBeforeUnmount, Ref, unref, watch, computed } from 'vue'
 import * as echarts from 'echarts'
-import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
+import {sbCampaignMetricsEnum, spCampaignMetricsEnum} from '/@/views/adManage/utils/enum.js'
 import MetricsCards from '/@/components/MetricsCards/index.vue'
 import XEUtils from 'xe-utils'
 import { buildChartOpt, parseQueryParams } from '/@/views/adManage/utils/tools.js'
@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
     {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
     {metric: 'Spend', color: '#ff9500', 'label': '花费'},
   ],
-  metricEnum: () => spCampaignMetricsEnum
+  metricEnum: () => sbCampaignMetricsEnum
 })
 
 const metrics = ref(props.initMetric)

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

@@ -31,7 +31,6 @@ const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
 let barChart = ref()
-const pie = ref()
 const bar = ref()
 const loading = ref(true)
 
@@ -205,7 +204,6 @@ onMounted(async () => {
   setTimeout(() => {
     resizeChart()
   }, 0)
-
   await initBarData()
   initChart()
 })

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

@@ -164,7 +164,6 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
             align: 'right',
             width: '100px',
             formatter: (row) => {
-              console.log(row.value)
               if (row.value != null) {
                 return row.value
               } else {

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

@@ -13,8 +13,8 @@
                 :fetchLine="getLineData">
             </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" :lazy="true"></el-tab-pane>
         </el-tabs>
@@ -56,14 +56,14 @@
 </template>
 
 <script lang="ts" setup>
-import {nextTick, onMounted, ref, watch} from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import {FsPage, useFs} from '@fast-crud/fast-crud'
 import {createCrudOptions} from './crud'
-import {useRoute, useRouter} from 'vue-router'
+import {useRouter} from 'vue-router'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
 import AdStructChart from './chartComponents/adStruct.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../campaigns/api'
+import {getCardData, getLineData, getLineMonthData, getLineWeekData} from '../campaigns/api'
 import {usePublicData} from '/@/stores/publicData'
 import {storeToRefs} from 'pinia'
 import {SbBaseColumn} from '/@/views/adManage/utils/commonTabColumn'
@@ -89,13 +89,10 @@ const jumpGroup = (row: any) => {
   })
 }
 
-onMounted(() => {
+onMounted(async () => {
   crudExpose.doRefresh()
 })
 
-
-
-
 watch(queryParams, async () => {
   crudExpose.doRefresh()
 }, { deep: true })

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

@@ -14,7 +14,7 @@
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct" :lazy="true">
-            <AdStructChart ref="adStructChartRef"/>
+            <AdStructChart v-if="tabActiveName === 'adStruct'"/>
           </el-tab-pane>
           <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
         </el-tabs>
@@ -85,8 +85,6 @@ const queryParams = ref({
 const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
 const route = useRoute()
 const router = useRouter()
-const adStructChartRef = ref()
-const dataTendencyRef = ref()
 const showCompare = ref(false)
 const jumpGroup = (row: any) => {
   router.push({
@@ -99,20 +97,6 @@ onMounted(() => {
   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})
-
 watch(queryParams, async () => {
   crudExpose.doRefresh()
 }, {deep: true})

src/views/adManage/utils/commonTabColumn.tsx

@@ -18,7 +18,6 @@ export const BaseColumn = {
         )
       },
       formatter: (row) => {
-        console.log(row.value)
         if (row.value != null) {
           return row.value
         } else {
@@ -364,7 +363,6 @@ export const SbBaseColumn = {
       )
       },
       formatter: (row) => {
-        console.log(row.value)
         if (row.value != null) {
           return row.value
         } else {
@@ -675,7 +673,6 @@ export const SbBaseColumn = {
       )
       },
       formatter: (row) => {
-        console.log(row.value)
         if (row.value != null) {
           return row.value
         } else {

src/views/adManage/utils/enum.ts

@@ -19,6 +19,47 @@ export const spCampaignMetricsEnum = [
   {label: '其它商品销量', value: 'TotalUnitOrderedOtherSKU'},
 ]
 
+export const sbCampaignMetricsEnum = [
+  {label: '曝光量', value: 'Impression'},
+  {label: '点击量', value: 'Click'},
+  {label: '花费', value: 'Spend'},
+  {label: '订单量', value: 'TotalPurchases'},
+  {label: '销售额', value: 'TotalSales'},
+  {label: '销量', value: 'TotalUnitOrdered'},
+  {label: '点击率', value: 'CTR'},
+  {label: '点击成本', value: 'CPC'},
+  {label: '转化率', value: 'PurchasesRate'},
+  {label: 'ACOS', value: 'ACOS'},
+  {label: 'ROAS', value: 'ROAS'},
+  {label: '订单成本', value: 'CPA'},
+  {label: '推广商品销售额', value: 'TotalSalesSameSKU'},
+  {label: '其它商品销售额', value: 'TotalSalesOtherSKU'},
+  {label: '推广商品订单量', value: 'TotalPurchasesSameSKU'},
+  {label: '其它商品订单量', value: 'TotalPurchasesOtherSKU'},
+  {label: '推广商品销量', value: 'TotalUnitOrderedSameSKU'},
+  {label: '其它商品销量', value: 'TotalUnitOrderedOtherSKU'},
+  {label: '详情页浏览次数', value: 'DPV'},
+  {label: '详情页浏览率', value: 'DPVR'},
+  {label: '新客订单数', value: 'NTBOrder'},
+  {label: '新客订单占比', value: 'NTBOrderRate'},
+  {label: '新客销售额', value: 'NTBSales'},
+  {label: '新客销售占比', value: 'NTBSalesRate'},
+  {label: '新客销量', value: 'NTBUnitOrdered'},
+  {label: '新客销量占比', value: 'NTBUnitOrderedRate'},
+  {label: '浏览点击率', value: 'VCTR'},
+  {label: '可见曝光率', value: 'VIR'},
+  {label: '浏览率', value: 'VTR'},
+  {label: '播放5秒或完成数占比', value: 'Video5SecondViewRate'},
+  {label: '播放5秒或完成数', value: 'Video5SecondViews'},
+  {label: '视频播放25%', value: 'VideoFirstQuartileViews'},
+  {label: '视频播放50%', value: 'VideoMidpointViews'},
+  {label: '视频播放75%', value: 'VideoThirdQuartileViews'},
+  {label: '视频播放100%', value: 'VideoCompleteViews'},
+  {label: '视频取消静音数', value: 'VideoUnmutes'},
+  {label: '可见曝光量', value: 'ViewableImpression'},
+]
+
+
 export const spCampaignPuchasedOtherProductsMetricsEnum = [
   {label: '其它商品订单数', value: 'TotalPurchasesOtherSKU'},
   {label: '其它商品销售额', value: 'TotalSalesOtherSKU'},
@@ -34,6 +75,17 @@ export const dynBidStrategyEnum = [
   {label: '固定竞价', value: 'MANUAL', color: 'warning'}
 ]
 
+export const dynBidOptimizationEnum = [
+  {label: '自动竞价', value: 1, color: 'success'},
+  {label: '自定义竞价', value: 0, color: 'warning'}
+]
+
+export const dynStatusEnum = {
+    'ENABLED' : '投放中',
+    'DISABLED' : '禁用'
+  }
+
+
 export const spCampaignPlacementEnum = [
   {label: '搜索结果顶部', value: 'top'},
   {label: '商品页面', value: 'product_page'},