feat(property-marketing): 新增投放指南详情页功能

refactor(property-marketing): 优化评分图标映射逻辑
feat(property-marketing): 实现投放指南历史记录操作功能
perf(property-marketing): 优化图表数据更新逻辑
feat(property-marketing): 添加时间筛选功能 实现保存投放指南功能
- 优化页面样式和布局

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

@@ -0,0 +1,145 @@
+<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>