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 && tabData === 'placement_guide'">
      <!--    本月摘要-->
      <MonthData :overview="aiResult.overview"></MonthData>

      <!--    投放建议-->
      <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
      <!--      投放行动指南-->
      <ActionGuideDistribution :action_guide="aiResult.action_guide" :tmp="tmp"></ActionGuideDistribution>
    </div>
    <div v-if="tabData == 'placement_guide'">
      <a-space class="down-btn">
        <a-button type="outline" @click="downPage">
          <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';
import { Message } from '@arco-design/web-vue';
import html2canvas from 'html2canvas';

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();
      if (listData.list.length != 0) {
        // 设置定时器每5秒执行一次
        timer.value = setInterval(() => {
          getSyncAiResult();
        }, 5000);
      }
    }
  }
};
const aiResult = reactive({
  optimization: [], //投放建议优化
  action_guide: [], //新投放建议生成
  overview: [], //新投放建议生成
});

// 下载当前页面

const downPage = async () => {
  await nextTick(); // 确保 DOM 更新完成
  html2canvas(document.querySelector('.guidelines-data-wrap')).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.href = imgData;
    const timestamp = new Date().getTime();
    link.download = `投放指南-${timestamp}.png`;
    link.click();
  });
};
const saveForm = reactive({
  account: [],
  plan: [],
  platform: [],
  aiResult: [],
});
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 handleSave = async () => {
  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>