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

<template>
  <view>
    <div class="part-div">
      <div>
        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="placement_guide">
          <a-tab-pane key="placement_guide" title="投放指南"></a-tab-pane>
          <a-tab-pane key="guide_history">
            <template #title>历史投放指南</template>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!--表单组件搜索-->
      <listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
      <!--      投放指南-->
      <PlacementGuideList
        v-if="tabData === 'placement_guide'"
        :listResult="{ data: guideListData.data, total: pageInfo.total }"
      ></PlacementGuideList>
      <!--      历史指南列表-->
      <GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
    </div>

    <a-spin :loading="loading" tip="数据分析中">
      <!--    本月摘要-->
      <MonthData></MonthData>

      <!--    投放建议-->
      <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
      <!--      投放行动指南-->
      <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
    </a-spin>
    <div>
      <a-space class="down-btn">
        <a-button type="outline" @click="handleSearch">
          <template #icon>
            <icon-download />
          </template>
          <template #default>下载</template>
        </a-button>
        <a-button type="primary" @click="handleSearch">
          <template #icon>
            <icon-drive-file />
          </template>
          <template #default>保存</template>
        </a-button>
      </a-space>
    </div>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import PlacementGuideList from './components/table-data/placementGuideList.vue';
import listSearchForm from './components/table-data/listSearchForm.vue';
import GuideListHistory from './components/table-data/guideListHistory.vue';
import MonthData from './components/month-data/index.vue';
import PlacementSuggestions from './components/placement-suggestions/index.vue';
import ActionGuideDistribution from './components/action-guide-distribution';
import {
  getAiResult,
  getPlacementAccountData,
  getPlacementAccountDataList,
  getPlacementGuide,
} from '@/api/all/propertyMarketing';

const tabData = ref('placement_guide');

const query = reactive({
  platform: '',
});

const loading = ref(false);

const guideListData = reactive({
  data: [],
});
const pageInfo = reactive({
  total: 0,
  page_size: 0,
  page: 1,
});

const onSearch = async () => {
  const { code, data } = await getPlacementGuide(query);
  if (code === 200) {
    guideListData.data = data.data;
    getSyncAiResult();
  }
  console.log(guideListData, 'guideListData');
};

const aiResult = reactive({
  optimization: [], //投放建议优化
  action_guide: [], //新投放建议生成
});

const getSyncAiResult = async () => {
  const { code, data } = await getAiResult(query);
  if (code === 200) {
    // 成功或者失败清除定时任务
    if ((data.status && data.status === 3) || data.status === 2) {
      // clearInterval(timer);
      loading.value = false;
    }
    aiResult.optimization = data.result.optimization.modules;
    aiResult.action_guide = data.result?.action_guide?.modules;
  }
};
// 定时任务请求接口
// const timer = setInterval(() => {
//   getSyncAiResult();
// }, 5000);
</script>

<style lang="scss">
@import './style.scss';
</style>