✨ feat: 广告组合: 数据对比功能

src/views/adManage/portfolios/crud.tsx

@@ -204,6 +204,10 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
         },
         inBudget: {
           title: '是否预算内',
+					column: {
+            width: '120px',
+            align: 'left',
+          },
           form: {
             show: false,
           },

src/views/adManage/portfolios/index.vue

@@ -3,7 +3,7 @@
     <fs-page class="fs-page-custom">
       <fs-crud ref="crudRef" v-bind="crudBinding">
         <template #search-left>
-          <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-right: 15px;"></DateRangePicker>
+          <DateRangePicker v-model="dateRange" timezone="America/Los_Angeles" style="margin-right: 15px"></DateRangePicker>
         </template>
         <template #header-middle>
           <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
@@ -25,25 +25,41 @@
             </el-tab-pane>
           </el-tabs>
         </template>
+
+        <template v-for="field of Object.keys(SdBaseColumn)" #[`cell_${field}`]="scope">
+          <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="compare-switch">
+            <span>数据对比 </span>
+            <el-switch v-model="showCompare" size="small" />
+          </div>
+        </template>
       </fs-crud>
     </fs-page>
   </div>
 </template>
 
 <script lang="ts" setup name="Portfolios">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useFs } from '@fast-crud/fast-crud'
+import { ElMessage } from 'element-plus'
+import { storeToRefs } from 'pinia'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
+import DataTendencyChart from './chartComponents/dataTendency.vue'
 import { createCrudOptions } from './crud'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import DataTendencyChart from './chartComponents/dataTendency.vue'
-import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
-import { useShopInfo } from '/@/stores/shopInfo'
 import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
+import { useShopInfo } from '/@/stores/shopInfo'
 import emitter from '/@/utils/emitter'
-import { ElMessage, ElMessageBox } from 'element-plus'
-
-
+import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn.js'
+import DataCompare from '/@/components/dataCompare/index.vue'
 
 const shopInfo = useShopInfo()
 const publicData = usePublicData()
@@ -51,6 +67,7 @@ const { dateRange } = storeToRefs(publicData)
 const tabActiveName = ref('dataTendency')
 const { profile } = storeToRefs(shopInfo)
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} })
+const showCompare = ref(false)
 
 // 避免时间更改后立马刷新趋势图, 通过监听事件触发
 const updateDateRange = ref([])
@@ -58,22 +75,22 @@ const searchName = ref('')
 emitter.on('protfolios-update', (value: any) => {
   if (value.update != 1) {
     updateDateRange.value = dateRange.value
-		searchName.value = value.query.name
+    searchName.value = value.query.name
   }
 })
 
 emitter.on('protfolios-createProtfolios', (value: any) => {
-	if(value.data.msg == 'success') {
-		ElMessage.success('创建成功')
-	} else {
-		ElMessage.error('创建失败')
-	}
+  if (value.data.msg == 'success') {
+    ElMessage.success('创建成功')
+  } else {
+    ElMessage.error('创建失败')
+  }
 })
 
 const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange: updateDateRange,
-	name: searchName
+  name: searchName,
 })
 
 // 页面打开后获取列表数据
@@ -98,4 +115,7 @@ onBeforeUnmount(() => {
   background-color: #f8f8f8;
   box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
 }
+.compare-switch {
+  flex: none;
+}
 </style>

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

@@ -5,17 +5,17 @@
         <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card">
           <el-tab-pane label="数据趋势" name="dataTendency">
             <DataTendencyChart
-                v-if="tabActiveName === 'dataTendency'"
-                :query="queryParams"
-                :fetchCard="getCardData"
-                :fetchLine="getLineData"
-                :fetch-line-month="getLineMonthData"
-                :fetch-line-week="getLineWeekData"
-                :fetch-line-hour="getLineHourData">
+              v-if="tabActiveName === 'dataTendency'"
+              :query="queryParams"
+              :fetchCard="getCardData"
+              :fetchLine="getLineData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+              :fetch-line-hour="getLineHourData">
             </DataTendencyChart>
           </el-tab-pane>
           <el-tab-pane label="广告结构" name="adStruct">
-            <AdStructChart v-if="tabActiveName === 'adStruct'"/>
+            <AdStructChart v-if="tabActiveName === 'adStruct'" />
           </el-tab-pane>
           <el-tab-pane label="散点视图" name="scatterView">
             <div v-if="tabActiveName === 'scatterView'">散点视图</div>
@@ -23,7 +23,7 @@
         </el-tabs>
       </template>
       <template #cell_percentTimeInBudget="scope">
-        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0"/>
+        <el-progress :percentage="scope.row.percentTimeInBudget > 0 ? scope.row.percentTimeInBudget * 100 : 0" />
       </template>
       <template #cell_campaignName="scope">
         <el-tooltip effect="dark" :content="scope.row.campaignName" placement="top">
@@ -32,25 +32,23 @@
           </el-link>
         </el-tooltip>
       </template>
-      <template #cell_MissedImpressions="scope">
-        {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }}
-      </template>
+      <template #cell_MissedImpressions="scope"> {{ scope.row.MissedImpressionsLower ?? '0' }} ~ {{ scope.row.MissedImpressionsUpper ?? '0' }} </template>
       <template #cell_MissedClicks="scope"> {{ scope.row.MissedClicksLower ?? '0' }} ~ {{ scope.row.MissedClicksUpper ?? '0' }}</template>
       <template #cell_MissedSales="scope"> {{ scope.row.MissedSalesLower ?? '0' }} ~ {{ scope.row.MissedSalesUpper ?? '0' }}</template>
 
       <template v-for="field of Object.keys(SdBaseColumn)" #[`cell_${field}`]="scope">
         <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"/>
+          :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="compare-switch">
           <span>数据对比 </span>
-          <el-switch v-model="showCompare" size="small"/>
+          <el-switch v-model="showCompare" size="small" />
         </div>
       </template>
     </fs-crud>
@@ -58,37 +56,36 @@
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref, watch} from 'vue'
-import {FsPage, useFs} from '@fast-crud/fast-crud'
-import {createCrudOptions} from './crud'
-import {useShopInfo} from '/@/stores/shopInfo'
-import {usePublicData} from '/@/stores/publicData'
-import {storeToRefs} from 'pinia'
-import {useRouter} from 'vue-router'
+import { onMounted, ref, watch } from 'vue'
+import { FsPage, useFs } from '@fast-crud/fast-crud'
+import { createCrudOptions } from './crud'
+import { useShopInfo } from '/@/stores/shopInfo'
+import { usePublicData } from '/@/stores/publicData'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
 import AdStructChart from './chartComponents/adStruct.vue'
 import DataTendencyChart from '/@/views/adManage/sd/chartComponents/dataTendency.vue'
-import {getCardData, getLineData, getLineMonthData, getLineWeekData, getLineHourData} from './api'
-import {SdBaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
+import { getCardData, getLineData, getLineMonthData, getLineWeekData, getLineHourData } from './api'
+import { SdBaseColumn } from '/@/views/adManage/utils/commonTabColumn.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 { dateRange } = storeToRefs(publicData)
+const { profile } = storeToRefs(shopInfo)
 const queryParams = ref({
   profileId: profile.value.profile_id,
-  dateRange
+  dateRange,
 })
-const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: queryParams})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()
 const showCompare = ref(false)
 
 const jumpGroup = (row: any) => {
   router.push({
     name: 'SdCampaignDetail',
-    query: {campaignId: row.campaignId, tagsViewName: row.campaignName, row: row},
+    query: { campaignId: row.campaignId, tagsViewName: row.campaignName, row: row },
   })
   console.log('row', row)
 }
@@ -97,10 +94,13 @@ onMounted(async () => {
   crudExpose.doRefresh()
 })
 
-watch(queryParams, async () => {
-  crudExpose.doRefresh()
-}, {deep: true})
-
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh()
+  },
+  { deep: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +108,7 @@ watch(queryParams, async () => {
   flex: none;
 }
 
-::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n+2):nth-child(-n+4) .cell) {
+::v-deep(.el-table__footer-wrapper td.el-table__cell:nth-child(n + 2):nth-child(-n + 4) .cell) {
   display: none;
 }