refactor(property-marketing): 优化品牌物料列表展示

-调整操作列宽度，确保内容显示完整 - 移除冗余注释，提高代码可读性
2025-07-06 18:27:51 +08:00
parent 3350790f8d
commit 534636c69e
14 changed files with 7310 additions and 151 deletions
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@ -90,7 +90,6 @@
 import EchartsItem from './components/echarts-item/index';
 import { PLATFORM_LIST } from '../common_constants';
 import {
-  fetchPlacementAccountOperators,
  getPlacementAccountsList,
  getPlacementAccountsTrend,
  getPlacementAccountProjectsTrend,
@ -133,10 +132,7 @@ const handleTabClick = (key) => {
 };

 const getOperators = async () => {
-  const { code, data } = await fetchPlacementAccountOperators();
-  if (code === 200) {
-    operators.value = data;
-  }
+
 };

 // 获取账户名称
--- a/src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
@ -224,7 +224,14 @@
 <script setup lang="ts">
 import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';

+const props = defineProps({
+  action_guide: {
+    type: Array,
+    default: () => [],
+  },
+});
 import { getStarIcon } from '../../constants';
+import { defineProps } from 'vue';
 </script>

 <style scoped lang="scss">
--- a/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
@ -16,7 +16,7 @@
          <a-col :span="24">
            <div class="overall-strategy">
              <span class="placement-optimization-title">总体策略</span>
-              <span class="placement-optimization-str">本周建议</span>
+              <span class="placement-optimization-str">{{props.optimization?.[0]?.['content']}}</span>
            </div>
          </a-col>
        </a-row>
@ -24,19 +24,13 @@
          <a-col :span="12">
            <div class="overall-strategy">
              <span class="placement-optimization-title">预算分配</span>
-              <span class="placement-optimization-str"
-                >巨量ROI高，建议将预算提升至 ￥5,000元/日 <br />
-                聚光 ROAS明显下降，建议减少预算 30%</span
-              >
+              <span class="placement-optimization-str">{{props.optimization?.[1]?.['content']}}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="overall-strategy">
              <span class="placement-optimization-title">时段优化</span>
-              <span class="placement-optimization-str"
-                >过去7日 19:00-21:00 转化率最高，提升了12.6% <br />
-                建议设置定时投放，仅在高效时段曝光</span
-              >
+              <span class="placement-optimization-str">{{props.optimization?.[2]?.['content']}}</span>
            </div>
          </a-col>
        </a-row>
@ -44,20 +38,14 @@
          <a-col :span="12">
            <div class="overall-strategy">
              <span class="placement-optimization-title">人群包优化</span>
-              <span class="placement-optimization-str"
-                >18-24岁女性转化率最高，建议加预算 <br />
-                25-34岁男香表现较差，建议停投节省成本</span
-              >
+              <span class="placement-optimization-str">{{props.optimization?.[3]?.['content']}}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="overall-strategy">
              <span class="placement-optimization-title">素材优化</span>
-              <span class="placement-optimization-str"
-                >替换当前点击率下降的xxxxx素材<br />
-                增加同类风格素材：xxxxx素材点击率更高 <br />
-                建议优化元素：视频封面/文案/开头引导，可提升CTR</span
-              >
+              <span class="placement-optimization-str">{{props.optimization?.[4]['content']}}</span>
+
            </div>
          </a-col>
        </a-row>
@ -66,7 +54,18 @@
  </view>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+// defineProps()
+
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  optimization: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>

 <style scoped lang="scss">
@import './style.scss';
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
@ -9,7 +9,7 @@
            <a-input
              class="w-310px"
              :style="{ width: '320px' }"
-              v-model="query.names"
+              v-model="query.account_name"
              placeholder="请搜索..."
              size="medium"
              allow-clear
@ -22,12 +22,19 @@
        </a-col>
        <a-col :span="8">
          <a-space>
-            <span>项目</span>
-            <a-select :style="{ width: '320px' }" placeholder="全部">
-              <a-option>Beijing</a-option>
-              <a-option>Shanghai</a-option>
-              <a-option>Guangzhou</a-option>
-            </a-select>
+            <span>计划</span>
+            <a-input
+              class="w-310px"
+              :style="{ width: '320px' }"
+              v-model="query.plan"
+              placeholder="请搜索..."
+              size="medium"
+              allow-clear
+            >
+              <template #prefix>
+                <icon-search />
+              </template>
+            </a-input>
          </a-space>
        </a-col>
        <a-col :span="8">
@ -98,7 +105,6 @@ const props = defineProps({
 const emits = defineEmits('onSearch', 'onReset', 'update:query');

 const handleSearch = () => {
-  console.log('handleSearch');
  emits('onSearch', props.query);
 };
 </script>
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
@ -31,27 +31,32 @@
      </template>
      <template #roi>
        <a-space>
-          <span>roi</span>
+          <span>ROI</span>
          <a-popover position="tl">
            <icon-question-circle />
            <template #content>
-              <p>roi</p>
+              <p>ROI</p>
            </template>
          </a-popover>
        </a-space>
      </template>
      <template #ctr>
        <a-space>
-          <span>ctr</span>
+          <span>CTR</span>
          <a-popover position="tl">
            <icon-question-circle />
            <template #content>
-              <p>ctr</p>
+              <p>CTR</p>
            </template>
          </a-popover>
        </a-space>
      </template>

+      <template #platform="{ record }">
+        <img :src="PLATFORM_LIST[record.platform].icon" width="19" class="mr-4px" />
+        <span>{{ PLATFORM_LIST[record.platform].label }}</span>
+      </template>
+
      <template #weekConsumptionRate="{ record }">
        <a-statistic
          :value="record.week_consumption_rate * 100"
@ -69,19 +74,21 @@
        </a-statistic>
      </template>
    </a-table>
-    <div>
-      <a-pagination
-        class="account-page"
-        :total="listResult.total"
-        :size="listQuery.page_size"
-        show-total
-        show-jumper
-        show-page-size
-      />
-    </div>
+
  </view>
 </template>
 <script setup lang="ts">
+import { PLATFORM_LIST } from '../../../common_constants';
+
+defineProps({
+  listResult: {
+    type: Object,
+    default: () => {
+      total: 0;
+      data: [];
+    },
+  }
+});
 const listQuery = reactive({
  project_id: ref(''),
  platform: ref(''),
@ -93,27 +100,26 @@ const columns = [
  {
    title: '账户名称',
    dataIndex: 'account_name',
-    slotName: 'account_name',
    width: 60,
    minWidth: 60,
  },
  {
-    titleSlotName: 'project_name',
    width: 180,
    minWidth: 180,
-    title: '项目名称',
-    dataIndex: 'project_name',
+    title: '计划名称',
+    dataIndex: 'name',
  },
  {
    title: '平台',
-    dataIndex: 'platform_name',
+    dataIndex: 'platform',
    width: 120,
    minWidth: 120,
+    slotName: 'platform',
  },
  {
    title: '本周总消耗',
    titleSlotName: 'week_consumption',
-    dataIndex: 'week_consumption',
+    dataIndex: 'total_use_amount',
    width: 120,
    minWidth: 120,
  },
@ -126,52 +132,18 @@ const columns = [
    slotName: 'weekConsumptionRate',
  },
  {
-    title: 'ROI',
    titleSlotName: 'roi',
    dataIndex: 'roi',
    width: 120,
    minWidth: 120,
  },
  {
-    title: 'CTR',
    titleSlotName: 'ctr',
-    dataIndex: 'ctr',
+    dataIndex: 'click_rate',
    width: 120,
    minWidth: 120,
  },
 ];
-const listResult = reactive({
-  data: [
-    {
-      account_name: '全球旅行',
-      platform_name: '平台',
-      project_name: '项目名称',
-      week_consumption: '本周总消耗',
-      week_consumption_rate: 0.1,
-      roi: '2.6',
-      ctr: '3.1%',
-    },
-    {
-      account_name: '全球旅行',
-      platform_name: '平台',
-      project_name: '项目名称',
-      week_consumption: '本周总消耗',
-      week_consumption_rate: -0.1,
-      roi: '2.6',
-      ctr: '3.1%',
-    },
-    {
-      account_name: '全球旅行',
-      platform_name: '平台',
-      project_name: '项目名称',
-      week_consumption: '本周总消耗',
-      week_consumption_rate: -0.1,
-      roi: '2.6',
-      ctr: '3.1%',
-    },
-  ],
-  total: ref(0),
-});
 </script>

 <style lang="scss" scoped>
@ -183,6 +155,4 @@ const listResult = reactive({
    float: right;
  }
 }
-
-
 </style>
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/index.vue
@ -10,9 +10,12 @@
        </a-tabs>
      </div>
      <!--表单组件搜索-->
-      <listSearchForm v-model:query="query" @onSearch="getData"></listSearchForm>
+      <listSearchForm v-model:query="query" @onSearch="onSearch"></listSearchForm>
      <!--      投放指南-->
-      <PlacementGuideList v-if="tabData === 'placement_guide'"></PlacementGuideList>
+      <PlacementGuideList
+        v-if="tabData === 'placement_guide'"
+        :listResult="{ data: guideListData.data, total: pageInfo.total }"
+      ></PlacementGuideList>
      <!--      历史指南列表-->
      <GuideListHistory v-if="tabData === 'guide_history'"></GuideListHistory>
    </div>
@ -22,8 +25,9 @@
      <MonthData></MonthData>

      <!--    投放建议-->
-      <PlacementSuggestions></PlacementSuggestions>
-      <ActionGuideDistribution></ActionGuideDistribution>
+      <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
+      <!--      投放行动指南-->
+      <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>
    </a-spin>
    <div>
      <a-space class="down-btn">
@ -52,7 +56,6 @@ 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 FilterBlock from '@/views/property-marketing/put-account/account-data/components/filter-block/index.vue';
 import {
  getAiResult,
  getPlacementAccountData,
@ -67,31 +70,46 @@ const query = reactive({
 });

 const loading = ref(false);
-const queryResult = reactive({
-  search_key: '',
+
+const guideListData = reactive({
+  data: [],
+});
+const pageInfo = reactive({
+  total: 0,
+  page_size: 0,
+  page: 1,
 });

-const getData = async () => {
-  console.log(query, 'query');
+const onSearch = async () => {
  const { code, data } = await getPlacementGuide(query);
  if (code === 200) {
+    guideListData.data = data.data;
+    getSyncAiResult();
  }
+  console.log(guideListData, 'guideListData');
 };

+const aiResult = reactive({
+  optimization: [], //投放建议优化
+  action_guide: [], //新投放建议生成
+});
+
 const getSyncAiResult = async () => {
  const { code, data } = await getAiResult(query);
  if (code === 200) {
-    //成功或者失败清除定时任务
+    // 成功或者失败清除定时任务
    if ((data.status && data.status === 3) || data.status === 2) {
-      clearInterval(timer);
+      // clearInterval(timer);
      loading.value = false;
    }
+    aiResult.optimization = data.result.optimization.modules;
+    aiResult.action_guide = data.result?.action_guide?.modules;
  }
 };
 // 定时任务请求接口
-const timer = setInterval(() => {
-  getSyncAiResult();
-}, 5000);
+// const timer = setInterval(() => {
+//   getSyncAiResult();
+// }, 5000);
 </script>

 <style lang="scss">