feat(property-marketing): 重构AI分析结果处理逻辑并优化页面交互

refactor(property-marketing): 拆分投放指南和历史指南组件逻辑 feat(property-marketing): 添加AI检测结果状态枚举 perf(property-marketing): 优化定时任务处理逻辑和错误处理 style(property-marketing): 调整页面样式和布局结构
2025-07-08 16:55:03 +08:00
parent 1b72fcae2f
commit 67e1051138
9 changed files with 157 additions and 114 deletions
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@ -147,6 +147,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
          requiresAuth: true,
          hideInMenu: true,
          roles: ['*'],
+          activeMenu: 'PutAccountInvestmentGuidelines',
        },
        component: () => import('@/views/property-marketing/put-account/investment-guidelines/detail'),
      },
--- a/src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
@ -170,7 +170,6 @@ const getSubmoduleContent = (moduleName: string, submoduleName: string) => {
  const content = [];
  if (module) {
    const content = Object.values(module.content);
-    console.log(content, 'content');
    return content;
  }
  return [];
--- a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
@ -5,7 +5,7 @@
      <a-popover position="tl">
        <icon-question-circle />
        <template #content>
-          <p style="margin: 0">本月摘要。</p>
+          <p style="margin: 0">本月摘要2。</p>
        </template>
      </a-popover>
    </div>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
@ -104,7 +104,7 @@ const downloadDetailAsImage = (id) => {
 };
 const deleteData = async (id) => {
  const { code, message } = await deleteHistorylog(id);
-  if (code === 200) {
+  if (code == 200) {
    Message.success(message);
    emits('onSearch');
    console.log('onsearch')
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
@ -0,0 +1,51 @@
+.container {
+  :deep(.arco-input-wrapper),
+  :deep(.arco-select-view-single),
+  :deep(.arco-select-view-multiple),
+  :deep(.arco-picker) {
+    border-radius: 4px;
+    border-color: #d7d7d9;
+    background-color: #fff;
+    &:focus-within,
+    &.arco-input-focus {
+      background-color: var(--color-bg-2);
+      border-color: rgb(var(--primary-6));
+      box-shadow: 0 0 0 0 var(--color-primary-light-2);
+    }
+  }
+
+  :deep(.search-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+    color: #6d4cfe;
+  }
+
+  :deep(.reset-btn) {
+    border-radius: 4px;
+    border: 1px solid var(--BG-500, #b1b2b5);
+    background: var(--BG-white, #fff);
+  }
+
+  .filter-row {
+    .filter-row-item {
+      &:not(:last-child) {
+        margin-right: 24px;
+      }
+
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: 'PuHuiTi-Regular';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        flex-shrink: 0;
+        line-height: 22px; /* 157.143% */
+      }
+
+      :deep(.arco-space-item) {
+        width: 100%;
+      }
+    }
+  }
+}
--- a/src/views/property-marketing/put-account/investment-guidelines/constants.ts
+++ b/src/views/property-marketing/put-account/investment-guidelines/constants.ts
@ -19,3 +19,11 @@ export function getStarIcon(score: number): string {
      return top1; // 默认返回最高分图标
  }
 }
+
+// ai检测结果状态
+export enum AiResultStatus {
+  WAIT = 0, // 待执行
+  PENDING = 1, // 处理中
+  FAILED = 2, // 失败
+  SUCCESS = 3, // 成功
+}
--- a/src/views/property-marketing/put-account/investment-guidelines/detail.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
@ -49,33 +49,13 @@
        </a-row>
      </div>
    </div>
-
-    <a-spin :loading="loading" tip="数据分析中">
    <div>
-        <!--    本月摘要-->
-        <MonthData></MonthData>
+      <MonthData :overview="aiResult.overview"></MonthData>

-        <!--        &lt;!&ndash;    投放建议&ndash;&gt;-->
-        <PlacementSuggestions :optimization="detailData?.ai_result?.optimization?.modules"></PlacementSuggestions>
-        <!--        &lt;!&ndash;      投放行动指南&ndash;&gt;-->
-        <ActionGuideDistribution :action_guide="detailData?.ai_result.action_guide?.modules"></ActionGuideDistribution>
-      </div>
-    </a-spin>
-    <div>
-      <a-space class="down-btn">
-        <a-button type="outline" @click="onSearch">
-          <template #icon>
-            <icon-download />
-          </template>
-          <template #default>下载</template>
-        </a-button>
-        <a-button type="primary" @click="handleSave">
-          <template #icon>
-            <icon-drive-file />
-          </template>
-          <template #default>保存</template>
-        </a-button>
-      </a-space>
+      <!--    投放建议-->
+      <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
+      <!--      投放行动指南-->
+      <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
    </div>
  </div>
 </template>
@ -90,54 +70,31 @@ import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_con
 import { getPlacementGuideDetail } from '@/api/all/propertyMarketing';
 import { useRoute } from 'vue-router';

-const tabData = ref('placement_guide');
-
-const query = reactive({
-  platform: '',
-  date_time: '',
-  sort_column: '',
-  sort_order: '',
-  page_size: 20,
-  page: 1,
-});
-
-const handleUpdateQuery = (payload) => {
-  payload.order = payload.order === 'ascend' ? 'asc' : 'desc';
-  query.sort_column = payload.column;
-  query.sort_order = payload.order;
-};
-
-const loading = ref(false);
-
-const saveForm = reactive({
-  account: [],
-  plan: [],
-  platform: [],
+const aiResult = reactive({
+  optimization: [], // 投放建议优化
+  action_guide: [], // 新投放建议生成
+  overview: [], // 新投放建议生成
 });

 const detailData = reactive({
+  created_at: '',
+  account: '',
  platform: [],
-  ai_result: {},
 });
-
 const route = useRoute();
 const id = route.params.id;
 const getDetail = async () => {
  const { code, data } = await getPlacementGuideDetail(id);
-  console.log(data, 'data');
-  console.log(code, 'code');
  if (code === 200) {
+    Object.assign(aiResult, data.ai_result);
    Object.assign(detailData, data);
+    console.log(aiResult, 'aiResult');
  }
 };

 onMounted(() => {
  getDetail();
 });
-// 定时任务请求接口
-// const timer = setInterval(() => {
-//   getSyncAiResult();
-// }, 5000);
 </script>

 <style lang="scss">
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/index.vue
@ -16,14 +16,13 @@
      </div>
      <!--表单组件搜索-->
      <listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
-      <!--      投放指南-->
-      <PlacementGuideList
-        v-if="tabData === 'placement_guide'"
-        :listData="listData.list"
+
+      <component
+        :is="currentComponent"
+        :listData="tabData === 'placement_guide' ? placementGuideList : guideHistoryList"
+        @onSearch="onSearch"
        @updateQuery="handleUpdateQuery"
-      ></PlacementGuideList>
-      <!--      历史指南列表-->
-      <GuideListHistory v-if="tabData === 'guide_history'" :listData="listData.list"></GuideListHistory>
+      />

      <div v-if="listData.total > 0" class="pagination-box flex justify-end">
        <a-pagination
@ -40,14 +39,16 @@
      </div>
    </div>

-    <div v-if="loading === false && tabData === 'placement_guide'">
+    <div v-if="tabData === 'placement_guide'">
+      <a-spin :loading="loading" tip="AI分析中">
        <!--    本月摘要-->
        <MonthData :overview="aiResult.overview"></MonthData>

        <!--    投放建议-->
        <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
        <!--      投放行动指南-->
-      <ActionGuideDistribution :action_guide="aiResult.action_guide" :tmp="tmp"></ActionGuideDistribution>
+        <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
+      </a-spin>
    </div>
    <div v-if="tabData == 'placement_guide'">
      <a-space class="down-btn">
@ -84,6 +85,7 @@ import {
 } from '@/api/all/propertyMarketing';
 import { Message } from '@arco-design/web-vue';
 import html2canvas from 'html2canvas';
+import { AiResultStatus } from '@/views/property-marketing/put-account/investment-guidelines/constants';

 const tabData = ref('placement_guide');

@ -96,8 +98,9 @@ const query = reactive({
  page: 1,
 });

-const tmp = ref(0);
-
+const currentComponent = computed(() => {
+  return tabData.value === 'placement_guide' ? PlacementGuideList : GuideListHistory;
+});
 const onPageChange = (current) => {
  query.page = current;
  onSearch();
@ -114,47 +117,41 @@ const handleUpdateQuery = (payload) => {
  onSearch();
 };

-const loading = ref(true);
+const loading = ref(false);

 const listData = reactive({
-  list: [],
  total: 0,
+  list: [],
 });
+const placementGuideList = ref([]); // 投放指南数据
+const guideHistoryList = ref([]); // 历史投放指南数据

 const onSearch = async () => {
  let result;
  if (tabData.value === 'placement_guide') {
    result = await getPlacementGuide(query);
+    placementGuideList.value = result?.data?.data || [];
  } else {
    result = await getPlacementGuideHistory(query);
+    guideHistoryList.value = result?.data?.data || [];
  }
-  const { code, data } = result;
-  console.log(data, 'data');
-  if (code === 200) {
-    listData.list = data.data;
-    listData.total = data.total;
-    if (tabData.value === 'placement_guide') {
-      getSyncAiResult();
-      if (listData.list.length != 0) {
-        // 设置定时器每5秒执行一次
-        timer.value = setInterval(() => {
-          getSyncAiResult();
-        }, 5000);
-      }
-    }
+  listData.total = result.data.total;
+  if (placementGuideList.value.length > 0) {
+    loading.value = true;
+    startTask();
  }
 };
 const aiResult = reactive({
-  optimization: [], //投放建议优化
-  action_guide: [], //新投放建议生成
-  overview: [], //新投放建议生成
+  optimization: [], // 投放建议优化
+  action_guide: [], // 新投放建议生成
+  overview: [], // 新投放建议生成
 });

 // 下载当前页面

 const downPage = async () => {
  await nextTick(); // 确保 DOM 更新完成
-  html2canvas(document.querySelector('.guidelines-data-wrap')).then(canvas => {
+  html2canvas(document.querySelector('.guidelines-data-wrap')).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = imgData;
@ -168,26 +165,44 @@ const saveForm = reactive({
  plan: [],
  platform: [],
  aiResult: [],
+  code: '',
 });
-const timer = ref<number | null>(null); // 定时器引用
-const getSyncAiResult = async () => {
-  if (listData.list.length == 0) {
-    return;
-  }
-  const { code, data } = await getAiResult(query);
-  if (code === 200) {
-    // 成功或者失败清除定时任务
-    if ((data.ai_result_status && data.ai_result_status === 3) || data.ai_result_status === 2) {
-      clearInterval(timer.value);
-    }
-    aiResult.optimization = data.result.optimization.modules;
-    aiResult.action_guide = data.result?.action_guide?.modules;
-    aiResult.overview = data.result?.overview?.content_blocks;
-    Object.assign(saveForm, data);
-  }
-  loading.value = false;
-};
+const timerRef = ref<number | null>(null);

+const startTask = () => {
+  if (timerRef.value !== null) return;
+  timerRef.value = setInterval(async () => {
+    try {
+      const { code, data } = await getAiResult(query);
+      console.log('定时任务执行结果:', data);
+      if (data.ai_result_status === AiResultStatus.SUCCESS || data.ai_result_status === AiResultStatus.FAILED) {
+        stopTask();
+        console.log('任务已完成，定时器已关闭');
+      }
+      if (data.ai_result_status === AiResultStatus.SUCCESS) {
+        loading.value = false;
+        aiResult.optimization = data.result?.optimization?.modules || [];
+        aiResult.action_guide = data.result?.action_guide?.modules || [];
+        aiResult.overview = data.result?.overview || [];
+      }
+      saveForm.code = data?.code;
+      console.log(aiResult, 'aiResult');
+    } catch (error) {
+      console.error('定时任务执行出错:', error);
+      stopTask();
+    }
+  }, 5000);
+};
+const stopTask = () => {
+  if (timerRef.value !== null) {
+    clearInterval(timerRef.value); // 清除定时器
+    timerRef.value = null; // 重置引用
+    console.log('定时器已停止');
+  }
+};
+onUnmounted(() => {
+  stopTask();
+});
 const handleSave = async () => {
  const updatedSaveForm = {
    ...saveForm,
--- a/src/views/property-marketing/put-account/investment-guidelines/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/style.scss
@ -1,3 +1,15 @@
+
+.table-wrap {
+  width: 100%;
+  .pagination-box {
+    display: flex;
+    width: 100%;
+    padding: 16px 24px;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+
 .part-div {
  width: 100%;
  background: var(--BG-white, white);