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

<template>
  <div class="guidelines-data-wrap">
    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
      <div class="top flex h-64px px-24px py-10px justify-between items-center">
        <p class="text-18px font-400 lh-26px color-#211F24 title">投放信息</p>
      </div>

      <div class="container px-24px pt-12px pb-24px">
        <a-row class="grid-demo" :gutter="24">
          <a-col :span="12">
            <div class="">
              <a-space direction="vertical">
                <span>账户</span>
                <span>{{ detailData?.account }}</span>
              </a-space>
            </div>
          </a-col>

          <a-col :span="12">
            <div class="">
              <a-space direction="vertical">
                <span>计划</span>
                <span>3</span>
              </a-space>
            </div>
          </a-col>
        </a-row>
        <a-row class="grid-demo" :gutter="24" style="margin-top: 30px">
          <a-col :span="12">
            <div class="">
              <a-space direction="vertical">
                <span>平台</span>
                <span class="mr-5px" v-if="detailData.platform.length > 0" v-for="(item, index) in detailData.platform">
                  <img :src="PLATFORM_LIST[item].icon" width="19" class="mr-4px" />
                  <span>{{ PLATFORM_LIST[item].label }}</span>
                </span>
              </a-space>
            </div>
          </a-col>

          <a-col :span="12">
            <div class="">
              <a-space direction="vertical">
                <span>生成时间</span>
                <span>{{ detailData.created_at }}</span>
              </a-space>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <a-spin :loading="loading" tip="数据分析中">
      <div>
        <!--    本月摘要-->
        <MonthData></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>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from '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 { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants.ts';
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 detailData = reactive({
  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(detailData, data);
  }
};

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

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