完成搜索词和购买其它商品

src/components/dataCompare/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <p :class="colorClass" v-show="props.showCompare">
+    <template v-if="props.gapVal">
+      <el-icon>
+        <Top v-if="props.gapVal > 0"/>
+        <Bottom v-if="props.gapVal < 0"/>
+      </el-icon>
+    </template>
+    <span>{{ props.gapVal ? (props.gapVal * 100).toFixed(2) + '%' : ''}}</span>
+  </p>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  field: {
+    type: String,
+    reqeuired: true
+  },
+  value: {
+    type: Number,
+  },
+  gapVal: {
+    type: Number,
+  },
+  showCompare: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const colorClass = computed(() => {
+  if (props.gapVal) {
+    return props.gapVal > 0 ? 'green' :'red'
+  }
+  return ''
+})
+
+</script>
+
+<style scoped>
+.green {
+  color: rgb(24, 172, 54)
+}
+.red {  
+  color: red;
+}
+</style>

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

@@ -10,7 +10,7 @@
 						<AdStructChart v-if="tabActiveName === 'adStruct'"/>
 					</el-tab-pane>
 					<el-tab-pane label="散点视图" name="scatterView">
-						<div v-if="tabActiveName === 'adStruct'">散点视图</div>
+						<div v-if="tabActiveName === 'scatterView'">散点视图</div>
 					</el-tab-pane>
 				</el-tabs>
 			</template>
@@ -36,15 +36,9 @@
           effect="dark"
           :width="260">
           <template #reference>
-            <p :style="{color: scope.row[`gap${field}`] > 0 ? 'green' : 'red'}" v-show="showCompare">
-              <el-icon v-show="scope.row[field]">
-                <Top v-if="scope.row[`gap${field}`] > 0"/>
-                <Bottom v-else/>
-              </el-icon>
-              <span>{{ scope.row[`gap${field}`] }}</span>
-            </p>
+            <DataCompare :field="field" :value="scope.row[field]" :gapVal="scope.row[`gap${field}`]" :showCompare="showCompare"/>
           </template>
-          <p>对比周期：</p>
+          <p>对比周期：{{ compareDate[0] }} ~ {{ compareDate[1] }}</p>
           <p>对比值：{{ scope.row[`prev${field}`] }}</p>
         </el-popover>
       </template>
@@ -60,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, Ref, watch, onBeforeMount} from 'vue'
+import {ref, onMounted, computed, watch, onBeforeMount} from 'vue'
 import { useFs, FsPage } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import { useShopInfo } from '/@/stores/shopInfo'
@@ -68,10 +62,11 @@ import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
 import AdStructChart from './chartComponents/adStruct.vue'
-// import DataTendencyChart from './chartComponents/dataTendency.vue'
 import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
 import { getCardData, getLineData } from './api'
 import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import DataCompare from '/@/components/dataCompare/index.vue'
+import { getCompareDate } from '/@/views/adManage/utils/tools.js'
 
 const tabActiveName = ref("dataTendency")
 const shopInfo = useShopInfo()
@@ -85,7 +80,9 @@ const showCompare = ref(false)
 onMounted(async () => {
 	crudExpose.doRefresh()
 })
-
+const compareDate = computed(() => {
+  return getCompareDate(dateRange.value)
+})
 const jumpGroup = (row: any) => {
 	router.push({
 		name: 'CampaignDetail',

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

@@ -23,16 +23,21 @@ defineOptions({
 interface Props {
   fetchCard: Function,
   fetchLine: Function,
-  query?: {[key: string]: any}
+  query?: {[key: string]: any},
+  initMetric?: ShowMetric[],
+  metricEnum?: {[key: string]: string}[]
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  initMetric: () => [
+    {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
+    {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
+    {metric: 'Spend', color: '#ff9500', 'label': '花费'},
+  ],
+  metricEnum: () => spCampaignMetricsEnum
+})
 const publicData = usePublicData()
-const metrics = ref([
-  {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
-  {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
-  {metric: 'Spend', color: '#ff9500', 'label': '花费'},
-])
+const metrics = ref(props.initMetric)
 const shopInfo = useShopInfo()
 const metricsItems: Ref<MetricData[]> = ref([])
 let chartObj:any
@@ -63,22 +68,20 @@ const option: any = {
     {
       id: 0,
       type: 'value',
-      name: '曝光量',
+      name: '',
       splitLine: {
         show: true // 设置显示分割线
       },
       axisLine: {
         show: true,
-				lineStyle: {
-					color: '#0085ff'
-				}
+				lineStyle: { color: '' }
       },
       show: true
     },
     {
       id: 1,
       type: 'value',
-      name: '点击量',
+      name: '',
       position: 'right',
       splitLine: {
         show: false
@@ -86,7 +89,7 @@ const option: any = {
       axisLine: {
         show: true,
 				lineStyle: {
-					color: '#3fd4cf'
+					color: ''
 				}
       },
       show: true
@@ -96,14 +99,14 @@ const option: any = {
       type: 'value',
       position: 'right',
       offset: 90,
-      name: '花费',
+      name: '',
       splitLine: {
         show: false
       },
       axisLine: {
         show: true,
 				lineStyle: {
-					color: '#ff9500'
+					color: ''
 				}
       },
       show: true
@@ -112,37 +115,40 @@ const option: any = {
   series: [
     {
       id: 0,
-      name: '曝光量',
+      name: '',
       type: 'bar',
       encode: {
         x: 'date',
-        y: 'Impression'
+        y: ''
       },
       barWidth: '20px',
       yAxisIndex: 0,
       itemStyle: {
-        color: '#0085ff',
+        color: '',
         borderRadius: [6, 6, 6, 6],
       }
     },
     {
       id: 1,
-      name: '点击量',
+      name: '',
       type: 'line',
       encode: {
         x: 'date',
-        y: 'Click'
+        y: ''
       },
       symbolSize: 6,
       symbol: 'circle',
       smooth: true,
       yAxisIndex: 1,
-      itemStyle: { color: '#3fd4cf', borderColor: '#3fd4cf' },
+      itemStyle: { 
+        // color: '#ff9500', 
+        // borderColor: '#ff9500'
+      },
       areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#3fd4cf53' },
-          { offset: 1, color: '#3fd4cf03' },
-        ]),
+        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //   { offset: 0, color: '#3fd4cf53' },
+        //   { offset: 1, color: '#3fd4cf03' },
+        // ]),
       },
       emphasis: {
         focus:'series'
@@ -150,23 +156,18 @@ const option: any = {
     },
     {
       id: 2,
-      name: '花费',
+      name: '',
       type: 'line',
       encode: {
         x: 'date',
-        y: 'Spend'
+        y: ''
       },
       symbolSize: 6,
       symbol: 'circle',
       smooth: true,
       yAxisIndex: 2,
-      itemStyle: { color: '#ff9500', borderColor: '#ff9500' },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#ff950053' },
-          { offset: 1, color: '#ff950003' },
-        ]),
-      },
+      itemStyle: {},
+      areaStyle: {},
       emphasis: {
         focus:'series'
       }
@@ -202,12 +203,35 @@ const initLine = async () => {
 	chartObj = echarts.init(chartRef.value)
 	const items = await getDataset()
 	option.dataset.source = items
+
+  XEUtils.arrayEach(option.series, (info:any, index) => {
+    const color = metrics.value[index].color
+    info.name = metrics.value[index].label
+    info.encode.y = metrics.value[index].metric
+    if (info.type === 'bar') {
+      info.itemStyle.color = color
+    } else {
+      info.itemStyle = { color: color, borderColor: color }
+      info.areaStyle = {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: color + '53' },
+          { offset: 1, color: color + '03' },
+        ])
+      }
+    }
+  })
+  XEUtils.arrayEach(option.yAxis, (info:any, index) => {
+    info.name = metrics.value[index].label
+    info.axisLine.lineStyle.color = metrics.value[index].color
+  })
+  
   XEUtils.arrayEach(metricsItems.value, info => {
     option.legend.selected[info.label] = false
   })
   for(const info of metrics.value) {
     option.legend.selected[info.label] = true
   }
+  console.log(option)
 	chartObj.setOption(option)
   loading.value = false
 }
@@ -219,7 +243,7 @@ const getMetricsItems = async () => {
 	const resp = await props.fetchCard(queryParams.value)
 	const data = resp.data
   metricsItems.value.length = 0
-	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
+	XEUtils.arrayEach(props.metricEnum, info => {
 		const tmp:MetricData = {
 			label: info.label,
 			value: info.value,

src/views/adManage/sp/index.vue

@@ -32,13 +32,12 @@ import { usePublicData } from '/@/stores/publicData'
 import { storeToRefs } from 'pinia'
 import { GetList } from '/@/views/adManage/portfolios/api'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import { recentDaysRange } from '/@/views/adManage/utils/tools'
 import Campaigns from './campaigns/index.vue'
 import Keywords from './keywords/index.vue'
 import Targets from './targets/index.vue'
 import SearchTerm from './searchTerm/index.vue'
 import AdvertisedProducts from './advertisedProducts/index.vue'
-import PurchasedOtherProducts from './purchasedProducts/index.vue'
+import PurchasedOtherProducts from './purchasedOtherProducts/index.vue'
 import Placement from './placement/index.vue'
 
 const shopInfo = useShopInfo()

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

@@ -0,0 +1,28 @@
+import { request } from '/@/utils/service'
+import { UserPageQuery } from '@fast-crud/fast-crud'
+
+export const apiPrefix = '/api/ad_manage/spotherproducts/'
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	})
+}
+
+export function getCardData(query: UserPageQuery) {
+  return request({
+      url: apiPrefix + "total/",
+      method: 'GET',
+      params: query
+  })
+}
+
+export function getLineData(query: UserPageQuery) {
+  return request({
+      url: apiPrefix + "daily/",
+      method: 'GET',
+      params: query
+  })
+}
+

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

@@ -0,0 +1,88 @@
+import * as api from './api'
+import { dict, UserPageQuery, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
+import { inject } from 'vue'
+import { SpCampaignPuchasedOtherProductsColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		query["profile"] = context.profile.value.profile_id
+		query["start"] = context.dateRange.value[0]
+		query["end"] = context.dateRange.value[1]
+		return await api.GetList(query);
+	};
+
+	//权限判定
+	const hasPermissions = inject('$hasPermissions');
+
+	return {
+		crudOptions: {
+			table: {
+				height: 800
+			},
+			container: {
+        fixedHeight: false
+      },
+			actionbar: {
+				show: false
+			},
+			search: {
+				show: false
+			},
+			toolbar: {
+        buttons: {
+					search: {
+						show: true
+					},
+					compact: {
+						show: false
+					}
+				}
+			},
+			request: {
+				pageRequest
+			},
+			rowHandle: {
+				show: false
+			},
+			columns: {
+        adProduct: {
+          title: '推广商品',
+					column: {
+            width: '250px'
+          }
+        },
+        purchasedProduct: {
+          title: '购买的其它商品'
+        },
+        state: {
+          title: '状态'
+        },
+        campaignName: {
+          title: '广告活动',
+          column: {
+            width: '200px'
+          },
+					search: {
+						show: true,
+						component: {
+							props: {
+								clearable: true
+							}
+						}
+					},
+					form: {
+						rules: [{required: true, message:'必填项'}]
+					}
+        },
+        adGroup: {
+          title: '广告组'
+        },
+        matchType: {
+          title: '定向'
+        },
+				...SpCampaignPuchasedOtherProductsColumn
+			}
+		}
+	}
+}

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

@@ -1,9 +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">
+					<el-tab-pane label="数据趋势" name="dataTendency">
+						<DataTendencyChart 
+            :fetchCard="getCardData" 
+            :fetchLine="getLineData"
+            :init-metric="initMetric"
+            :metric-enum="spCampaignPuchasedOtherProductsMetricsEnum">
+          </DataTendencyChart>
+					</el-tab-pane>
+				</el-tabs>
+      </template>
+      <template #cell_adProduct="scope">
+        <p>{{ scope.row.advertisedAsin }}</p>
+        <p>{{ scope.row.advertisedSku }}</p>
+      </template>
+      <template #cell_purchasedProduct="scope">
+        <p>{{ scope.row.purchasedAsin }}</p>
+      </template>
 
+      <template v-for="field of Object.keys(SpCampaignPuchasedOtherProductsColumn)" #[`cell_${field}`]="scope">
+        <p>{{ scope.row[field] }}</p>
+        <el-popover
+          effect="dark"
+          :width="260">
+          <template #reference>
+            <DataCompare :field="field" :value="scope.row[field]" :gapVal="scope.row[`gap${field}`]" :showCompare="showCompare"/>
+          </template>
+          <p>对比周期：{{ compareDate[0] }} ~ {{ compareDate[1] }}</p>
+          <p>对比值：{{ scope.row[`prev${field}`] }}</p>
+        </el-popover>
+      </template>
+      <template #toolbar-left>
+        <div class="campare-switch">
+          <span>数据对比 </span>
+          <el-switch v-model="showCompare" size="small" />
+        </div>
+      </template>
+		</fs-crud>
+	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted, computed, watch } from 'vue'
+import { useFs, FsPage } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud'
+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
+import { getCardData, getLineData } from './api'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { spCampaignPuchasedOtherProductsMetricsEnum } from '/@/views/adManage/utils/enum.js'
+import { SpCampaignPuchasedOtherProductsColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import { getCompareDate } from '/@/views/adManage/utils/tools.js'
+import DataCompare from '/@/components/dataCompare/index.vue'
+
+const tabActiveName = ref("dataTendency")
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
+const initMetric = [
+  {metric: 'TotalPurchasesOtherSKU', color: '#0085ff', 'label': '其它商品订单数'},
+  {metric: 'TotalSalesOtherSKU', color: '#3fd4cf', 'label': '其它商品销售额'},
+  {metric: 'TotalUnitOrderedOtherSKU', color: '#ff9500', 'label': '其它商品销量'},
+]
+const showCompare = ref(false)
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { profile, dateRange } })
+const compareDate = computed(() => {
+  return getCompareDate(dateRange.value)
+})
+
+onMounted(async () => {
+	crudExpose.doRefresh()
+})
+watch(
+	[dateRange, profile], 
+	async () => {
+		crudExpose.doRefresh()
+	}
+)
 
 </script>
 

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

@@ -0,0 +1,27 @@
+import { request } from '/@/utils/service'
+import { UserPageQuery } from '@fast-crud/fast-crud'
+
+export const apiPrefix = '/api/ad_manage/spsearchterms/'
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	})
+}
+
+export function getCardData(query: UserPageQuery) {
+  return request({
+      url: apiPrefix + "total/",
+      method: 'GET',
+      params: query
+  })
+}
+
+export function getLineData(query: UserPageQuery) {
+  return request({
+      url: apiPrefix + "daily/",
+      method: 'GET',
+      params: query
+  })
+}

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

@@ -0,0 +1,66 @@
+import * as api from './api'
+import { dict, UserPageQuery, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
+import { inject } from 'vue'
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+
+
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		query["profile"] = context.profile.value.profile_id
+		query["start"] = context.dateRange.value[0]
+		query["end"] = context.dateRange.value[1]
+		return await api.GetList(query);
+	};
+
+	//权限判定
+	const hasPermissions = inject('$hasPermissions');
+
+	return {
+		crudOptions: {
+			table: {
+				height: 800,
+				rowKey: (row:any) => row.keywordId + row.searchTerm
+			},
+			container: {
+        fixedHeight: false
+      },
+			actionbar: {
+				show: false
+			},
+			search: {
+				show: false
+			},
+			toolbar: {
+        buttons: {
+					search: {
+						show: true
+					},
+					compact: {
+						show: false
+					}
+				}
+			},
+			request: {
+				pageRequest
+			},
+			rowHandle: {
+				show: false
+			},
+			columns: {
+        searchTerm: {
+					title: '搜索词'
+				},
+				matchType: {
+					title: '定向'
+				},
+				campaignName: {
+					title: '广告活动'
+				},
+				adGroupName: {
+					title: '广告组'
+				},
+				...BaseColumn
+			}
+		}
+	}
+}

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

@@ -1,9 +1,72 @@
 <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">
+					<el-tab-pane label="数据趋势" name="dataTendency">
+						<DataTendencyChart v-if="tabActiveName === 'dataTendency'" :fetchCard="getCardData" :fetchLine="getLineData"></DataTendencyChart>
+					</el-tab-pane>
+					<el-tab-pane label="散点视图" name="scatterView">
+						<div v-if="tabActiveName === 'scatterView'">敬请期待...</div>
+					</el-tab-pane>
+				</el-tabs>
+        
+      </template>
+      <template v-for="field of Object.keys(BaseColumn)" #[`cell_${field}`]="scope">
+        <p>{{ scope.row[field] }}</p>
+        <el-popover
+          effect="dark"
+          :width="260">
+          <template #reference>
+            <DataCompare :field="field" :value="scope.row[field]" :gapVal="scope.row[`gap${field}`]" :showCompare="showCompare"/>
+          </template>
+          <p>对比周期：{{ compareDate[0] }} ~ {{ compareDate[1] }}</p>
+          <p>对比值：{{ scope.row[`prev${field}`] }}</p>
+        </el-popover>
+      </template>
+      <template #toolbar-left>
+        <div class="campare-switch">
+          <span>数据对比 </span>
+          <el-switch v-model="showCompare" size="small" />
+        </div>
+      </template>
+		</fs-crud>
+	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
+import { useFs, FsPage } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud'
+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
+import { getCardData, getLineData } from './api'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import { getCompareDate } from '/@/views/adManage/utils/tools.js'
+import DataCompare from '/@/components/dataCompare/index.vue'
+
+const tabActiveName = ref("dataTendency")
+const shopInfo = useShopInfo()
+const publicData = usePublicData()
+const { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
+const showCompare = ref(false)
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { profile, dateRange } })
+
+const compareDate = computed(() => {
+  return getCompareDate(dateRange.value)
+})
+onMounted(async () => {
+	crudExpose.doRefresh()
+})
+watch(
+	[dateRange, profile], 
+	async () => {
+		crudExpose.doRefresh()
+	}
+)
 
 </script>
 

src/views/adManage/utils/commonTabColumn.ts

@@ -109,3 +109,59 @@ export const BaseColumn = {
   }
 }
 
+export const SpCampaignPuchasedOtherProductsColumn = {
+  TotalPurchasesOtherSKU: {
+    title: '其它商品订单数',
+    form: {
+      show: false
+    },
+    column:{
+      align: 'right'
+    }
+  },
+  TotalUnitOrderedOtherSKU: {
+    title: '其它商品销量',
+    form: {
+      show: false
+    },
+    column:{
+      align: 'right'
+    }
+  },
+  TotalSalesOtherSKU: {
+    title: '其它商品销售额',
+    form: {
+      show: false
+    },
+    column:{
+      align: 'right'
+    }
+  },
+  PurchasesOtherSKURate: {
+    title: '其它商品订单数占比',
+    form: {
+      show: false
+    },
+    column:{
+      align: 'right'
+    }
+  },
+  UnitOrderedOtherSKURate: {
+    title: '其它商品销量占比',
+    form: {
+      show: false
+    },
+    column:{
+      align: 'right'
+    }
+  },
+  SalesOtherSKURate: {
+    title: '其它商品销售额占比',
+    form: {
+      show: false
+    },
+    column:{
+      align: 'right'
+    }
+  }
+}

src/views/adManage/utils/enum.ts

@@ -19,6 +19,15 @@ export const spCampaignMetricsEnum = [
   {label: '其它商品销量', value: 'TotalUnitOrderedOtherSKU'},
 ]
 
+export const spCampaignPuchasedOtherProductsMetricsEnum = [
+  {label: '其它商品订单数', value: 'TotalPurchasesOtherSKU'},
+  {label: '其它商品销售额', value: 'TotalSalesOtherSKU'},
+  {label: '其它商品销量', value: 'TotalUnitOrderedOtherSKU'},
+  {label: '其它商品订单数占比', value: 'PurchasesOtherSKURate'},
+  {label: '其它商品销售额占比', value: 'SalesOtherSKURate'},
+  {label: '其它商品销量占比', value: 'UnitOrderedOtherSKURate'},
+]
+
 export const dynBidStrategyEnum = [
   { label: '动态竞价-仅降低', value: 'LEGACY_FOR_SALES', color: '' },
   { label: '动态竞价-提高和降低', value: 'AUTO_FOR_SALES', color: 'success' },

src/views/adManage/utils/tools.ts

@@ -1,4 +1,5 @@
 import dayjs, { Dayjs } from 'dayjs'
+import { computed } from 'vue'
 import XEUtils from 'xe-utils'
 
 export function recentDaysRange(timezone: string, days: number):string[] {
@@ -39,3 +40,12 @@ export function buildChartOpt(option:any, metrics: any[]) {
     }
     return opt
 }
+
+export function getCompareDate(dateRange: string[]) {
+    const start = dayjs(dateRange[0])
+    const end = dayjs(dateRange[1])
+    const days = end.diff(start, 'day')
+    const preEnd = start.subtract(1, 'day')
+    const preStart = preEnd.subtract(days, 'day')
+    return [preStart.format("YYYY-MM-DD"), preEnd.format("YYYY-MM-DD")]
+}