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

<template>
  <div class="guidelines-data-wrap">
    <div class="part-div">
      <div>
        <a-tabs
          v-model:activeKey="tabData"
          @tab-click="onSearch"
          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'"
        :listData="listData.list"
        @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
          :total="listData.total"
          size="mini"
          show-total
          show-jumper
          show-page-size
          :current="query.page"
          :page-size="query.pageSize"
          @change="onPageChange"
          @page-size-change="onPageSizeChange"
        />
      </div>
    </div>

    <div v-if="loading === false">
      <!--    本月摘要-->
      <MonthData :overview="aiResult.overview"></MonthData>

      <!--    投放建议-->
      <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
      <!--      投放行动指南-->
      <ActionGuideDistribution :action_guide="aiResult.action_guide" :tmp="tmp"></ActionGuideDistribution>
    </div>
    <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>
    </div>
  </div>
</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,
  getPlacementGuide,
  getPlacementGuideHistory,
  savePlacementGuide,
} from '@/api/all/propertyMarketing';

const tabData = ref('placement_guide');

const query = reactive({
  platform: '',
  date_time: '',
  sort_column: '',
  sort_order: '',
  page_size: 20,
  page: 1,
});

const tmp = ref(0);

const onPageChange = (current) => {
  query.page = current;
  onSearch();
};
const onPageSizeChange = (pageSize) => {
  query.page_size = pageSize;
  onSearch();
};

const handleUpdateQuery = (payload) => {
  payload.order = payload.order === 'ascend' ? 'asc' : 'desc';
  query.sort_column = payload.column;
  query.sort_order = payload.order;
  onSearch();
};

const loading = ref(true);

const listData = reactive({
  list: [],
  total: 0,
});

const onSearch = async () => {
  let result;
  if (tabData.value === 'placement_guide') {
    result = await getPlacementGuide(query);
  } else {
    result = await getPlacementGuideHistory(query);
  }
  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();
    }
  }
};
const aiResult = reactive({
  optimization: [], //投放建议优化
  action_guide: [], //新投放建议生成
  overview: [], //新投放建议生成
});

const saveForm = reactive({
  account: [],
  plan: [],
  platform: [],
  aiResult: [],
});
const timer = ref(null);
const getSyncAiResult = async () => {
  if (listData.list.length == 0) {
    return;
  }
  const { code, data } = await getAiResult(query);
  if (code === 200) {
    // 成功或者失败清除定时任务
    if ((data.status && data.status === 3) || data.status === 2) {
      // clearInterval(timer);
    }
    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;
  // 定时任务请求接口
  timer.value = setInterval(() => {
    getSyncAiResult();
  }, 5000);
  console.log(loading.value, 'loading.value');
};

const handleSave = async () => {
  const updatedSaveForm = {
    ...saveForm,
    ai_result: aiResult,
  };
  const { code, data } = await savePlacementGuide(updatedSaveForm);
  if (code === 200) {
  }
};
onMounted(() => {
  onSearch();
});
</script>

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