feat(property-marketing): 重构月度数据展示组件并优化AI分析交互流程

src/views/property-marketing/put-account/investment-guidelines/index.vue

@@ -15,7 +15,12 @@
         </a-tabs>
       </div>
       <!--表单组件搜索-->
-      <listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
+      <listSearchForm
+        @onReset="handleReset"
+        v-model:query="query"
+        @onSearch="onSearch"
+        :disabled="loading"
+      ></listSearchForm>
 
       <component
         :is="currentComponent"
@@ -38,14 +43,17 @@
         />
       </div>
     </div>
+    <a-spin v-if="tabData === 'placement_guide'" :loading="loading" tip="AI分析中...."  wrapperClassName="custom-spin-wrapper">
+      <div  >
 
-    <div v-if="tabData === 'placement_guide'">
-      <MonthData :overview="aiResult.overview"></MonthData>
-      <!--    投放建议-->
-      <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
-      <!--      投放行动指南-->
-      <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
-    </div>
+        <MonthData :overview="aiResult.overview"></MonthData>
+        <!--    投放建议-->
+        <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
+        <!--      投放行动指南-->
+        <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
+      </div>
+
+    </a-spin>
     <div v-if="tabData == 'placement_guide'">
       <a-space class="down-btn">
         <a-button type="outline" @click="downPage">
@@ -87,7 +95,9 @@ const tabData = ref('placement_guide');
 
 const query = reactive({
   platform: '',
-  date_time: '',
+  account_name: '',
+  plan: '',
+  date_time: [],
   sort_column: '',
   sort_order: '',
   page_size: 20,
@@ -105,11 +115,12 @@ const onPageSizeChange = (pageSize) => {
   query.page_size = pageSize;
   onSearch();
 };
-
+const isGetAi = ref(true); // 是否获取AI数据
 const handleUpdateQuery = (payload) => {
   payload.order = payload.order === 'ascend' ? 'asc' : 'desc';
   query.sort_column = payload.column;
   query.sort_order = payload.order;
+  isGetAi.value = false;
   onSearch();
 };
 
@@ -134,8 +145,11 @@ const onSearch = async () => {
   listData.total = result.data.total;
   if (placementGuideList.value.length > 0) {
     loading.value = true;
-    startTask();
+    if (isGetAi.value) {
+      startTask();
+    }
   }
+  isGetAi.value = true;
 };
 const aiResult = reactive({
   optimization: [], // 投放建议优化
@@ -144,7 +158,6 @@ const aiResult = reactive({
 });
 
 // 下载当前页面
-
 const downPage = async () => {
   await nextTick(); // 确保 DOM 更新完成
   html2canvas(document.querySelector('.guidelines-data-wrap')).then((canvas) => {
@@ -164,10 +177,7 @@ const saveForm = reactive({
   code: '',
 });
 const timerRef = ref<number | null>(null);
-
 const startTask = () => {
-  //todo 暂时注释
-  return;
   if (timerRef.value !== null) return;
   timerRef.value = setInterval(async () => {
     try {
@@ -181,7 +191,7 @@ const startTask = () => {
         loading.value = false;
         aiResult.optimization = data.result?.optimization?.modules || [];
         aiResult.action_guide = data.result?.action_guide?.modules || [];
-        aiResult.overview = data.result?.overview || [];
+        aiResult.overview = data.result?.overview?.content_blocks[0] || [];
       }
       saveForm.code = data?.code;
       console.log(aiResult, 'aiResult');
@@ -191,7 +201,21 @@ const startTask = () => {
     }
   }, 5000);
 };
+
+const handleReset = () => {
+  console.log('handleReset');
+  query.page = 1;
+  query.page_size = 20;
+  query.account_name = '';
+  query.platform = '';
+  query.sort_column = '';
+  query.sort_order = '';
+  query.platform = '';
+  query.date_time = [];
+  onSearch();
+};
 const stopTask = () => {
+  loading.value = false;
   if (timerRef.value !== null) {
     clearInterval(timerRef.value); // 清除定时器
     timerRef.value = null; // 重置引用
@@ -218,4 +242,8 @@ onMounted(() => {
 
 <style lang="scss">
 @import './style.scss';
+.custom-spin-wrapper {
+  display: block;
+  width: 100%;
+}
 </style>