数据趋势图分离查询参数

src/components/DateRangePicker/index.vue

@@ -18,6 +18,12 @@
   </div>
 </template>
 
+<script lang="ts">
+import { useShopInfo } from '/@/stores/shopInfo'
+const timezoneDefault = useShopInfo().profile.time_zone
+export default {}
+</script>
+
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import dayjs, { Dayjs } from 'dayjs'
@@ -28,7 +34,7 @@ defineOptions({
 
 const props = defineProps({
   modelValue: {type: Array, required: true },
-  timezone: { type: String, required: true },
+  timezone: { type: String, default: timezoneDefault },
   popperPlacement: { type: String, default: 'bottom-start' }
 })
 

src/router/backEnd.ts

@@ -48,7 +48,13 @@ export async function initBackEndControlRoutes() {
 	// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
 	await useUserInfo().setUserInfos();
 	await useShopInfo().initShopInfo();
-	usePublicData().initData();
+	const publicData = usePublicData()
+	publicData.initData();
+	publicData.$subscribe((mutation, state) => {
+		// console.log(mutation)
+		// console.log(state.dateRange)
+		publicData.setDateRange(state.dateRange)
+	}, { detached: true })
 	// 获取路由菜单数据
 	const res = await getBackEndControlRoutes();
 

src/views/adManage/portfolios/crud.tsx

@@ -74,6 +74,13 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					// },
 				},
 			},
+			actionbar: {
+				buttons: { 
+					add: {
+						text: '新建广告组合'
+					}
+				}
+			},
 			toolbar: {
 				buttons: {
 					search: {

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

@@ -1,57 +1,57 @@
-import { request } from '/@/utils/service';
-import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { request } from '/@/utils/service'
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud'
 
-export const apiPrefix = '/api/ad_manage/spgroups/';
+export const apiPrefix = '/api/ad_manage/spcampaigndetail/spgroups/'
 export function GetList(query: UserPageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    })
+	return request({
+		url: apiPrefix + 'list/',
+		method: 'get',
+		params: query,
+	})
 }
 export function GetObj(id: number) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'get',
+	})
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	})
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	})
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	})
 }
 
 export function getCardData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "total/",
-        method: 'GET',
-        params: query
-    })
+	return request({
+		url: apiPrefix + 'total/',
+		method: 'GET',
+		params: query,
+	})
 }
 
 export function getLineData(query: UserPageQuery) {
-    return request({
-        url: apiPrefix + "daily/",
-        method: 'GET',
-        params: query
-    })
+	return request({
+		url: apiPrefix + 'daily/',
+		method: 'GET',
+		params: query,
+	})
 }

src/views/adManage/sp/adGroups/chartComponents/adGroupChart.vue

@@ -1,224 +0,0 @@
-<template>
-  <MetricsCards v-model="metrics" :metric-items="metricItems" @change="changeMetric"></MetricsCards>
-  <div style="height: 350px;" ref="chartRef"></div>
-</template>
-
-<script lang="ts" setup>
-import { ref,onBeforeMount,onMounted,onBeforeUnmount,inject, Ref } from 'vue'
-import MetricsCards from '/@/components/MetricsCards/index.vue'
-import { useShopInfo } from '/@/stores/shopInfo'
-import * as echarts from 'echarts'
-import XEUtils from 'xe-utils'
-import { getLineData, getCardData } from '../api'
-import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
-import { buildChartOpt } from '/@/views/adManage/utils/tools.js'
-
-defineOptions({name: 'AdGroupChart'})
-
-const shopInfo = useShopInfo()
-const metrics = ref([
-  {metric: 'Impression', color: '#0085ff', 'label': '曝光量'},
-  {metric: 'Click', color: '#3fd4cf', 'label': '点击量'},
-  {metric: 'Spend', color: '#ff9500', 'label': '花费'},
-])
-const metricItems: Ref<MetricData[]> = ref([])
-let chartObj: any
-const chartRef = ref()
-const dateRange: string[] = inject('dateRange', [])
-const option: any = {
-  dataset: {
-    source: []
-  },
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      label: {
-        backgroundColor: '#6a7985'
-      }
-    }
-  },
-  legend: {
-    selected: {},  // 控制显隐
-    show: false
-  },
-  grid: {
-    top: 50, right: 150, bottom: 30, left: 55,
-  },
-  xAxis: {
-    type: 'category'
-  },
-  yAxis: [
-    {
-      id: 0,
-      type: 'value',
-      name: '曝光量',
-      splitLine: {
-        show: true // 设置显示分割线
-      },
-      axisLine: {
-        show: true,
-				lineStyle: {
-					color: '#0085ff'
-				}
-      },
-      show: true
-    },
-    {
-      id: 1,
-      type: 'value',
-      name: '点击量',
-      position: 'right',
-      splitLine: {
-        show: false
-      },
-      axisLine: {
-        show: true,
-				lineStyle: {
-					color: '#3fd4cf'
-				}
-      },
-      show: true
-    },
-    {
-      id: 2,
-      type: 'value',
-      position: 'right',
-      offset: 90,
-      name: '花费',
-      splitLine: {
-        show: false
-      },
-      axisLine: {
-        show: true,
-				lineStyle: {
-					color: '#ff9500'
-				}
-      },
-      show: true
-    }
-  ],
-  series: [
-    {
-      id: 0,
-      name: '曝光量',
-      type: 'bar',
-      encode: {
-        x: 'date',
-        y: 'Impression'
-      },
-      barWidth: '20px',
-      yAxisIndex: 0,
-      itemStyle: {
-        color: '#0085ff',
-        borderRadius: [10, 10, 0, 0],
-      }
-    },
-    {
-      id: 1,
-      name: '点击量',
-      type: 'line',
-      encode: {
-        x: 'date',
-        y: 'Click'
-      },
-      symbolSize: 6,
-      symbol: 'circle',
-      smooth: true,
-      yAxisIndex: 1,
-      itemStyle: { color: '#3fd4cf', borderColor: '#3fd4cf' },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#3fd4cf53' },
-          { offset: 1, color: '#3fd4cf03' },
-        ]),
-      },
-      emphasis: {
-        focus:'series'
-      }
-    },
-    {
-      id: 2,
-      name: '花费',
-      type: 'line',
-      encode: {
-        x: 'date',
-        y: 'Spend'
-      },
-      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' },
-        ]),
-      },
-      emphasis: {
-        focus:'series'
-      }
-    }
-  ]
-}
-onBeforeMount(async () => {
-	await getMetricItems()
-})
-onMounted(() => {
-	// initLine()
-  setTimeout(() => initLine(), 0)
-	addResize()
-})
-onBeforeUnmount(() => {
-	if(chartObj) {
-		chartObj.dispose()
-    chartObj = null
-	}
-  removeResize()
-})
-
-const getMetricItems = async () => {
-	const resp = await getCardData({start: dateRange[0], end: dateRange[1], profile: shopInfo.profile.profile_id})
-	const data = resp.data
-	XEUtils.arrayEach(spCampaignMetricsEnum, info => {
-		const tmp: MetricData = { 
-			label: info.label, 
-			value: info.value,
-			metricVal: data[info.value],
-			gapVal: data[`gap${info.value}`],
-			preVal: data[`prev${info.value}`],
-			disabled: info.initShow ? true : false
-		}
-		metricItems.value.push(tmp)
-    option.legend.selected[info.label] = false
-	})
-}
-const getDataset = async () => {
-	const resp = await getLineData({profile: shopInfo.profile.profile_id, start: dateRange[0], end: dateRange[1]})
-	return resp.data
-}
-const initLine = async () => {
-	chartObj = echarts.init(chartRef.value)
-
-	const items = await getDataset()
-	option.dataset.source = items
-  for(const info of metrics.value) {
-    option.legend.selected[info.label] = true
-  }
-	chartObj.setOption(option)
-}
-const changeMetric = () => {
-  const opt = buildChartOpt(option, metrics.value)
-  chartObj.setOption(opt)
-}
-
-const resizeChart = () => { chartObj.resize() }
-const addResize = () => { window.addEventListener('resize', resizeChart) }
-const removeResize = () => { window.removeEventListener('resize', resizeChart) }
-
-defineExpose({ resizeChart })
-</script>
-
-<style scoped>
-
-</style>

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

@@ -1,12 +1,14 @@
 import * as api from './api';
 import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { inject, nextTick, ref } from 'vue';
-import { successMessage } from '/@/utils/message';
 import { BaseColumn } from '/@/views/adManage/utils/commonTabColumn.js';
+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
+import XEUtils from 'xe-utils';
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
-		query.campaign = context.campaignId
+		const params = parseQueryParams(context.value)
+		XEUtils.assign(query, params)
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {

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

@@ -2,10 +2,14 @@
   <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-bottom: 5px;"></DateRangePicker>
+        <DateRangePicker v-model="dateRange" style="margin-bottom: 5px;"></DateRangePicker>
       </template>
       <template #header-middle>
-        <AdGroupChart />
+        <DataTendencyChart
+          :query="queryParams"
+          :fetchCard="getCardData"
+          :fetchLine="getLineData">
+        </DataTendencyChart>
       </template>
       <template #cell_adGroupName="scope">
         <el-link type="primary" :underline="false" @click="jumpAds(scope.row)">{{ scope.row.adGroupName }}</el-link>
@@ -15,15 +19,16 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, ref, onMounted } from 'vue'
+import { Ref, ref, onMounted, watch } from 'vue'
 import { useFs, FsPage } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud'
 import { useRoute, useRouter, LocationQueryValue } from 'vue-router'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
-import AdGroupChart from './chartComponents/adGroupChart.vue'
+// import AdGroupChart from './chartComponents/adGroupChart.vue'
 import { usePublicData } from '/@/stores/publicData'
-// import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
-// import { getCardData, getLineData } from './api'
+import { storeToRefs } from 'pinia'
+import DataTendencyChart from '/@/views/adManage/sp/chartComponents/dataTendency.vue'
+import { getCardData, getLineData } from './api'
 
 const publicData = usePublicData()
 const router = useRouter()
@@ -31,8 +36,12 @@ interface Props {
   campaignId: LocationQueryValue | LocationQueryValue[]
 }
 const props = defineProps<Props>()
-const dateRange: Ref<string[]> = ref(publicData.dateRange)
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { campaignId: props.campaignId } })
+const { dateRange } = storeToRefs(publicData)
+const queryParams = ref({
+  campaignId: props.campaignId,
+  dateRange
+})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 
 onMounted(() => {
 	crudExpose.doRefresh();
@@ -43,6 +52,13 @@ const jumpAds = (row: any) => {
     query: { id: row.id, adGroupId: row.adGroupId, tagsViewName: row.adGroupName }
   })
 }
+watch(
+  queryParams,
+  async () => {
+    crudExpose.doRefresh() 
+  },
+  { deep: true }
+)
 
 </script>
 

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

@@ -3,13 +3,13 @@ import {dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptions
 import {inject} from 'vue'
 import {BaseColumn} from '/@/views/adManage/utils/commonTabColumn.js'
 import {dynBidStrategyEnum} from '/@/views/adManage/utils/enum.js'
-
+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
+import XEUtils from 'xe-utils'
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
-		query["profileId"] = context.profile.value.profile_id
-		query["startDate"] = context.dateRange.value[0]
-		query["endDate"] = context.dateRange.value[1]
+		const params = parseQueryParams(context.value)
+		XEUtils.assign(query, params)
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {

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

@@ -6,6 +6,7 @@
 					<el-tab-pane label="数据趋势" name="dataTendency">
 						<DataTendencyChart
 							v-if="tabActiveName === 'dataTendency'"
+							:query="queryParams"
 							:fetchCard="getCardData"
 							:fetchLine="getLineData"
 							:fetch-line-month="getLineMonthData"
@@ -72,7 +73,11 @@ const shopInfo = useShopInfo()
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
 const { profile } = storeToRefs(shopInfo)
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { profile, dateRange } })
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange
+})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const router = useRouter()
 const showCompare = ref(false)
 
@@ -89,9 +94,9 @@ const jumpGroup = (row: any) => {
 	})
 }
 
-watch([dateRange, profile], async () => {
+watch(queryParams, async () => {
 	crudExpose.doRefresh()
-})
+}, { deep: true })
 </script>
 
 <style lang="scss" scoped>

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

@@ -11,16 +11,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref,onMounted, onBeforeUnmount, Ref, onBeforeMount, watch, computed } from 'vue'
+import { ref,onMounted, onBeforeUnmount, Ref, unref, watch, computed } from 'vue'
 import * as echarts from 'echarts'
-import { useShopInfo } from '/@/stores/shopInfo'
 import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
 import MetricsCards from '/@/components/MetricsCards/index.vue'
 import XEUtils from 'xe-utils'
-import { buildChartOpt } from '/@/views/adManage/utils/tools.js'
-import { usePublicData } from '/@/stores/publicData'
-import { storeToRefs } from 'pinia'
-import { response } from '/@/utils/tools'
+import { buildChartOpt, parseQueryParams } from '/@/views/adManage/utils/tools.js'
+
+// import { useShopInfo } from '/@/stores/shopInfo'
+// import { usePublicData } from '/@/stores/publicData'
+// import { storeToRefs } from 'pinia'
 
 defineOptions({
   name: "DataTendencyChart"
@@ -31,7 +31,7 @@ interface Props {
   fetchLine: Function,
   fetchLineMonth?: Function,
   fetchLineWeek?: Function,
-  query?: {[key: string]: any},
+  query: {[key: string]: any},
   initMetric?: ShowMetric[],
   metricEnum?: {[key: string]: string}[]
 }
@@ -44,9 +44,11 @@ const props = withDefaults(defineProps<Props>(), {
   ],
   metricEnum: () => spCampaignMetricsEnum
 })
-const publicData = usePublicData()
+
 const metrics = ref(props.initMetric)
-const shopInfo = useShopInfo()
+// const shopInfo = useShopInfo()
+// const publicData = usePublicData()
+// const { dateRange } = storeToRefs(publicData)
 const metricsItems: Ref<MetricData[]> = ref([])
 let chartObj:any
 const chartRef = ref()
@@ -183,16 +185,8 @@ const option: any = {
     }
   ]
 }
-const { dateRange } = storeToRefs(publicData)
 const loading = ref(true)
-const queryParams = computed(() => {
-  return {
-    profileId: shopInfo.profile.profile_id,
-    startDate: dateRange.value[0],
-    endDate: dateRange.value[1],
-   ...props.query
-  }
-})
+const queryParams = computed(() => parseQueryParams(props.query))
 
 onMounted(() => {
   getMetricsItems()
@@ -240,7 +234,7 @@ const initLine = async () => {
   for(const info of metrics.value) {
     option.legend.selected[info.label] = true
   }
-  console.log(option)
+  // console.log(option)
 	chartObj.setOption(option)
   loading.value = false
 }
@@ -291,8 +285,9 @@ const changeStatDim = async () => {
 }
 
 watch(
-  queryParams,
+  props.query,
   async () => {
+    // console.log("------watch-----queryParams", props.query)
     loading.value = true
     await getMetricsItems()
     const items = await getDataset()
@@ -302,10 +297,6 @@ watch(
   }
 )
 
-publicData.$subscribe((mutation, state) => {
-	publicData.setDateRange(state.dateRange)
-})
-
 const resizeChart = () => { chartObj.resize() }
 const addResize = () => { window.addEventListener('resize', resizeChart) }
 const removeResize = () => { window.removeEventListener('resize', resizeChart) }

src/views/adManage/sp/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="asj-container">
 		<div class="public-search">
-			<DateRangePicker v-model="dateRange" :timezone="shopInfo.profile.time_zone"></DateRangePicker>
+			<DateRangePicker v-model="dateRange"></DateRangePicker>
 			<el-select
 				v-model="selectedPortfolios"
 				placeholder="广告组合"
@@ -72,11 +72,6 @@ onBeforeMount(async () => {
 	portfolios.value = resp.data
 })
 
-publicData.$subscribe((mutation, state) => {
-	// console.log(mutation)
-	// console.log(state.dateRange)
-	publicData.setDateRange(state.dateRange)
-})
 </script>
 
 <style scoped></style>

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

@@ -2,12 +2,13 @@ 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'
+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
+import XEUtils from 'xe-utils'
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
-		query['profileId'] = context.profile.value.profile_id
-		query['startDate'] = context.dateRange.value[0]
-		query['endDate'] = context.dateRange.value[1]
+		const params = parseQueryParams(context.value)
+		XEUtils.assign(query, params)
 		return await api.GetList(query)
 	}
 

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

@@ -4,14 +4,15 @@
       <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"
-            :fetch-line-month="getLineMonthData"
-						:fetch-line-week="getLineWeekData"
-            :init-metric="initMetric"
-            :metric-enum="spCampaignPuchasedOtherProductsMetricsEnum">
-          </DataTendencyChart>
+						<DataTendencyChart
+              :query="queryParams"
+              :fetchCard="getCardData" 
+              :fetchLine="getLineData"
+              :fetch-line-month="getLineMonthData"
+              :fetch-line-week="getLineWeekData"
+              :init-metric="initMetric"
+              :metric-enum="spCampaignPuchasedOtherProductsMetricsEnum">
+            </DataTendencyChart>
 					</el-tab-pane>
 				</el-tabs>
       </template>
@@ -70,7 +71,11 @@ const initMetric = [
   {metric: 'TotalUnitOrderedOtherSKU', color: '#ff9500', 'label': '其它商品销量'},
 ]
 const showCompare = ref(false)
-const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { profile, dateRange } })
+const queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange
+})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 const compareDate = computed(() => {
   return getCompareDate(dateRange.value)
 })
@@ -78,12 +83,9 @@ const compareDate = computed(() => {
 onMounted(async () => {
 	crudExpose.doRefresh()
 })
-watch(
-	[dateRange, profile], 
-	async () => {
-		crudExpose.doRefresh()
-	}
-)
+watch(queryParams, async () => {
+	crudExpose.doRefresh()
+}, { deep: true })
 
 </script>
 

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

@@ -2,12 +2,13 @@ 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'
+import { parseQueryParams } from '/@/views/adManage/utils/tools.js'
+import XEUtils from 'xe-utils'
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
-		query['profileId'] = context.profile.value.profile_id
-		query['startDate'] = context.dateRange.value[0]
-		query['endDate'] = context.dateRange.value[1]
+		const params = parseQueryParams(context.value)
+		XEUtils.assign(query, params)
 		return await api.GetList(query)
 	}
 

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

@@ -6,6 +6,7 @@
 					<el-tab-pane label="数据趋势" name="dataTendency">
 						<DataTendencyChart
 							v-if="tabActiveName === 'dataTendency'"
+              :query="queryParams"
 							:fetch-card="getCardData"
 							:fetch-line="getLineData"
 							:fetch-line-month="getLineMonthData"
@@ -59,7 +60,11 @@ 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 queryParams = ref({
+  profileId: profile.value.profile_id,
+  dateRange
+})
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: queryParams })
 
 const compareDate = computed(() => {
   return getCompareDate(dateRange.value)
@@ -68,10 +73,11 @@ onMounted(async () => {
 	crudExpose.doRefresh()
 })
 watch(
-	[dateRange, profile], 
+	queryParams, 
 	async () => {
 		crudExpose.doRefresh()
-	}
+	},
+  { deep: true }
 )
 
 </script>

src/views/adManage/utils/tools.ts

@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from 'dayjs'
-import { computed } from 'vue'
+import { unref } from 'vue'
 import XEUtils from 'xe-utils'
 
 export function recentDaysRange(timezone: string, days: number):string[] {
@@ -49,3 +49,17 @@ export function getCompareDate(dateRange: string[]) {
     const preStart = preEnd.subtract(days, 'day')
     return [preStart.format("YYYY-MM-DD"), preEnd.format("YYYY-MM-DD")]
 }
+
+export function parseQueryParams(body: any) {
+    const ret:any = {}
+    for (const key in body) {
+      const val = unref(body[key])
+      if (key === 'dateRange') {
+        ret["startDate"] = val[0]
+        ret["endDate"] = val[1]
+      } else {
+        ret[key] = val
+      }
+    }
+    return ret
+}