数据对比组件进一步封装

src/components/dataCompare/index.vue

@@ -1,33 +1,40 @@
 <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>
+  <p>{{ props.value }}</p>
+  <el-popover
+    effect="dark"
+    :width="260">
+    <template #reference>
+      <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>
-    <span>{{ props.gapVal ? (props.gapVal * 100).toFixed(2) + '%' : ''}}</span>
-  </p>
+    <p>对比周期：{{ compareDate[0] }} ~ {{ compareDate[1] }}</p>
+    <p>对比值：{{ props.prevVal }}</p>
+  </el-popover>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, Prop } from 'vue'
+import { getCompareDate } from '/@/views/adManage/utils/tools.js'
 
-const props = defineProps({
-  field: {
-    type: String,
-    reqeuired: true
-  },
-  value: {
-    type: Number,
-  },
-  gapVal: {
-    type: Number,
-  },
-  showCompare: {
-    type: Boolean,
-    default: false
-  }
+interface Props {
+  field: string,
+  value: number,
+  prevVal: number,
+  gapVal: number,
+  dateRange: string[],
+  showCompare: boolean
+}
+
+const props = defineProps<Props>()
+const compareDate = computed(() => {
+  return getCompareDate(props.dateRange)
 })
 
 const colorClass = computed(() => {

src/views/adManage/sp/campaigns/campaignDetail/adGroups/adGroupDetail/ads/index.vue

@@ -23,7 +23,7 @@ import {createCrudOptions} from './crud'
 import {useRoute, useRouter} from 'vue-router'
 // import DataTendencyChart from './chartComponents/dataTendency.vue'
 import {useShopInfo} from '/@/stores/shopInfo'
-import AdStructChart from './chartComponents/adStruct.vue'
+// import AdStructChart from './chartComponents/adStruct.vue'
 
 const tabActiveName = ref('dataTendency')
 const shopInfo = useShopInfo()

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

@@ -13,7 +13,7 @@
     </div>
     <el-tabs type="border-card" class="asj-detail-tabs">
       <el-tab-pane label="商品推广">
-        <Ads />
+        <!-- <Ads /> -->
       </el-tab-pane>
       <el-tab-pane label="定向"></el-tab-pane>
       <el-tab-pane label="否定投放"></el-tab-pane>
@@ -26,7 +26,7 @@
 import { Ref, ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { GetObj } from '../api'
-import Ads from '/@/views/adManage/sp/ads/index.vue'
+// import Ads from '/@/views/adManage/sp/ads/index.vue'
 
 const router = useRouter()
 const route = useRoute()

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

@@ -2,7 +2,7 @@
   <fs-page class="fs-page-custom">
     <fs-crud ref="crudRef" v-bind="crudBinding">
       <template #search-left>
-        <DateRangePicker v-model="dateRange" style="margin-bottom: 5px;"></DateRangePicker>
+        <DateRangePicker v-model="dateRange"></DateRangePicker>
       </template>
       <template #header-middle>
         <DataTendencyChart

src/views/adManage/sp/campaigns/campaignDetail/placement/api.ts

@@ -2,7 +2,7 @@ import { request } from '/@/utils/service';
 import { UserPageQuery } from '@fast-crud/fast-crud';
 
 
-export const apiPrefix = '/api/ad_manage/spcampaigns/stat_placement/'
+export const apiPrefix = '/api/ad_manage/spcampaigndetail/placement/'
 export function GetList(query: UserPageQuery) {
     return request({
         url: apiPrefix,

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

@@ -2,6 +2,7 @@ import * as api from './api'
 import { UserPageQuery, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud'
 import { inject } from 'vue'
 import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import { spCampaignPlacementEnum } from '/@/views/adManage/utils/enum'
 import XEUtils from 'xe-utils'
 
 
@@ -57,13 +58,19 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
         show: false
       },
 			columns: {
-        placementClassification: {
+        placement: {
           title: '广告位',
           column: {
             width: '200px',
-						fixed: 'left'
+						fixed: 'left',
+						formatter({ value, row, index }){
+								return XEUtils.find(spCampaignPlacementEnum, (item) => item.value === value).label
+						}
           }
         },
+				bidAdjustment: {
+					title: '竞价调整'
+				},
         ...BaseColumn
 			}
 		}

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

@@ -5,22 +5,13 @@
         <DateRangePicker v-model="dateRange"></DateRangePicker>
       </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>
-            <p :class="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>
-          </template>
-          <p>对比周期：{{ placementData.compare_date[0] }} ~ {{ placementData.compare_date[1] }}</p>
-          <p>对比值：{{ scope.row[`prev${field}`] }}</p>
-        </el-popover>
+        <DataCompare
+          :field="field" 
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]" 
+          :date-range="dateRange"
+          :show-compare="showCompare"/>
       </template>
       <template #toolbar-left>
         <div>
@@ -37,35 +28,33 @@ import { ref, onMounted, Ref, watch } from 'vue'
 import { useFs, FsPage } from '@fast-crud/fast-crud'
 import { createCrudOptions } from './crud'
 import { usePublicData } from '/@/stores/publicData'
-import { useShopInfo } from '/@/stores/shopInfo'
+import { storeToRefs } from 'pinia'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { GetList } from './api'
 import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
 import { LocationQueryValue } from 'vue-router'
+import DataCompare from '/@/components/dataCompare/index.vue'
 
 defineOptions({
   name: "Placement"
 })
 const publicData = usePublicData()
-const shopInfo = useShopInfo()
-const dateRange: Ref<string[]> = ref(publicData.dateRange)
+const { dateRange } = storeToRefs(publicData)
 interface Props {
   campaignId: LocationQueryValue | LocationQueryValue[]
 }
 const props = defineProps<Props>()
 const loading = ref(true)
-const placementData = ref({items: [], compare_date: []})
 
 const showCompare = ref(false)
 const fetchData = async () => {
   loading.value = true
   const resp = await GetList({ 
     campaignId: props.campaignId,
-    date__gte: dateRange.value[0],
-    date__lte: dateRange.value[1]
+    startDate: dateRange.value[0],
+    endDate: dateRange.value[1]
   })
-  placementData.value = resp.data
-  crudExpose.setTableData(placementData.value.items)
+  crudExpose.setTableData(resp.data)
   loading.value = false
 }
 

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

@@ -34,14 +34,13 @@
 			<template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }} </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>
+				<DataCompare
+          :field="field" 
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]" 
+          :date-range="dateRange"
+          :show-compare="showCompare"/>
 			</template>
 			<template #toolbar-left>
 				<div class="campare-switch">

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

@@ -25,16 +25,13 @@
       </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>
+        <DataCompare
+          :field="field" 
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]" 
+          :date-range="dateRange"
+          :show-compare="showCompare"/>
       </template>
       <template #toolbar-left>
         <div class="campare-switch">

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

@@ -20,16 +20,13 @@
         
       </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>
+        <DataCompare
+          :field="field" 
+          :value="scope.row[field]"
+          :prev-val="scope.row[`prev${field}`]"
+          :gap-val="scope.row[`gap${field}`]" 
+          :date-range="dateRange"
+          :show-compare="showCompare"/>
       </template>
       <template #toolbar-left>
         <div class="campare-switch">

src/views/adManage/utils/enum.ts

@@ -34,6 +34,12 @@ export const dynBidStrategyEnum = [
     {label: '固定竞价', value: 'MANUAL', color: 'warning'}
 ]
 
+export const spCampaignPlacementEnum = [
+  { label: '搜索结果顶部', value: 'top' },
+  { label: '商品页面', value: 'product_page' },
+  { label: '搜索结果的其余位置', value: 'rest_of_search' },
+]
+
 export const metricMap = {
   'Spend': '花费',
   'TotalSales': '销售额',