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

<template>
  <div class="guidelines-data-wrap">
    <div class="part-div">
      <div>
        <Tabs
          v-model:activeKey="tabData"
          @change="onSearch"
          class="a-tab-class ignore-export"
          defaultActiveKey="placement_guide"
          size="large"
        >
          <TabPane key="placement_guide" tab="投放指南"></TabPane>
          <TabPane key="guide_history" tab="历史指南列表"></TabPane>
        </Tabs>
      </div>
      <!--表单组件搜索-->
      <listSearchForm
        class="ignore-export"
        @onReset="handleReset"
        v-model:query="query"
        @onSearch="handleSearch"
        :disabled="loading"
      ></listSearchForm>

      <component
        :is="currentComponent"
        :listData="tabData === 'placement_guide' ? placementGuideList : guideHistoryList"
        @onSearch="onSearch"
        @updateQuery="handleUpdateQuery"
      />
      <a-spin v-if="loading" tip="AI分析中" />

      <div v-if="listData.total > 0" class="pagination-box flex justify-end ignore-export">
         <Pagination
          :total="listData.total"
          size="small"
          :showTotal="(total: number) => `共 ${total} 条`"
          showSizeChanger
          showQuickJumper
          :current="query.page"
          :pageSize="query.page_size"
          @change="onPageChange"
        />
      </div>
    </div>

    <!--    投放建议-->
    <MonthData v-if="tabData == 'placement_guide'" :overview="aiResult.overview"></MonthData>
    <PlacementSuggestions
      v-if="tabData == 'placement_guide'"
      :optimization="aiResult.optimization"
    ></PlacementSuggestions>

    <div v-if="tabData == 'placement_guide'" class="ignore-export">
      <Space class="down-btn">
        <Button type="primary" ghost :loading="exportLoading" @click="downPage">
          <template #icon>
            <icon-download class="mr-8px"/>
          </template>
          <template #default>下载</template>
        </Button>
        <Button type="primary" @click="handleSave">
          <template #icon>
            <icon-drive-file class="mr-8px"/>
          </template>
          <template #default>保存</template>
        </Button>
      </Space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Button, Tabs, Space, Pagination } from 'ant-design-vue';
const { TabPane } = Tabs;
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 {
  getAiResult,
  getPlacementGuide,
  getPlacementGuideHistory,
  savePlacementGuide,
} from '@/api/all/propertyMarketing';
import { Message } from '@arco-design/web-vue';
import { AiResultStatus, generatePDF } from '@/views/property-marketing/put-account/investment-guidelines/constants';
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';

const tabData = ref('placement_guide');

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

const currentComponent = computed(() => {
  return tabData.value === 'placement_guide' ? PlacementGuideList : GuideListHistory;
});
const onPageChange = (current: number, pageSize: number) => {
  query.page = current;
  query.page_size = pageSize;
  onSearch();
};
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;
  loading.value = false;
  onSearch();
};

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

const onSearch = async () => {
  let result;
  if (tabData.value === 'placement_guide') {
    result = await getPlacementGuide(query);
    console.log(1);

    placementGuideList.value = result?.data?.data || [];
  } else {
    result = await getPlacementGuideHistory(query);
    guideHistoryList.value = result?.data?.data || [];
  }
  listData.total = result.data.total;
  isGetAi.value = true;
};

const handleSearch = async () => {
  await onSearch();
  if (placementGuideList.value.length > 0 && isGetAi.value) {
    loading.value = true;
    syncGetAiResult();
    startTask();
  }
};

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

// 下载当前页面
const downPage = async () => {
  try {
    let fileUrl = saveForm.file_url;
    exportLoading.value = true;
    if (saveForm.file_url === '') {
      fileUrl = await uploadPdf('投放指南.pdf', '.guidelines-data-wrap');
    }
    console.log(fileUrl, 'fileUrl');
    const link = document.createElement('a');
    link.href = fileUrl;
    link.download = '投放指南.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    exportLoading.value = false;
  } catch (error) {
    Message.error(error.message);
    exportLoading.value = false;
  }
};

const saveForm = reactive({
  account: [],
  plan: [],
  platform: [],
  aiResult: [],
  code: '',
  file_url: '',
});
const timerRef = ref<number | null>(null);
const startTask = () => {
  if (timerRef.value !== null) return;
  timerRef.value = setInterval(async () => {
    syncGetAiResult();
  }, 5000);
};

const syncGetAiResult = async () => {
  try {
    const { code, data } = await getAiResult(query);
    saveForm.file_url = '';
    console.log('定时任务执行结果:', data);
    if (data.ai_result_status === AiResultStatus.SUCCESS || data.ai_result_status === AiResultStatus.FAILED) {
      stopTask();
    }
    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?.content_blocks[0] || [];
    } else if (data.ai_result_status === AiResultStatus.FAILED) {
      Message.error('AI分析失败');
      aiError();
    }
    saveForm.code = data?.code;
  } catch (error) {
    aiError();
  }
};

// ai 检测失败执行方法
const aiError = () => {
  aiResult.optimization = [];
  aiResult.action_guide = [];
  aiResult.overview = [];
  stopTask();
};

const handleReset = () => {
  console.log('handleReset');
  query.page = 1;
  query.page_size = 20;
  query.platform = '';
  query.sort_column = '';
  query.sort_order = '';
  query.platform = undefined;
  query.date_time = [];
  onSearch();
};
const stopTask = () => {
  loading.value = false;
  if (timerRef.value !== null) {
    clearInterval(timerRef.value); // 清除定时器
    timerRef.value = null; // 重置引用
    console.log('定时器已停止');
  }
};
onUnmounted(() => {
  stopTask();
});
const handleSave = async () => {
  await uploadPdf();
  const updatedSaveForm = {
    ...saveForm,
    ai_result: aiResult,
  };
  const { code, message, data } = await savePlacementGuide(updatedSaveForm);
  if (code === 200) {
    Message.success(message);
  }
};

onMounted(() => {
  onSearch();
});
</script>

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