feat(property-marketing): 优化账号和计划选择组件，重构投放指南表格展示逻辑

perf: 移除冗余代码，优化空数据展示处理
style: 统一组件样式引用方式，调整表格标题显示

src/views/components/common/AccountSelect.vue

@@ -1,11 +1,5 @@
 <template>
-  <a-select
+  <a-select allow-search v-model="selectedValue" placeholder="请选择账号" allow-clear filterable @change="handleChange">
-    v-model="selectedValue"
-    placeholder="请选择账号"
-    allow-clear
-    filterable
-    @change="handleChange"
-  >
     <a-option v-for="account in filteredAccounts" :key="account.id" :value="account.id" :label="account.name">
       {{ account.name }}
     </a-option>
@@ -54,13 +48,17 @@ const fetchAccounts = async () => {
 };
 
 // 搜索处理
-const handleSearch = (value: string) => {
+const handleSearch = (value: string) => {};
-
-};
 
 // 值变化处理
 const handleChange = (value: number | string) => {
-  emit('update:modelValue', [value]);
+  let data = [];
+  if (value === '') {
+    data = [];
+  } else {
+    data = [value];
+  }
+  emit('update:modelValue', data);
 };
 
 // 初始化获取数据

src/views/components/common/PlanSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-select v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
+  <a-select allow-search v-model="selectedValue" placeholder="请选择计划" allow-clear filterable @change="handleChange">
     <a-option v-for="item in listData" :key="item.id" :value="item.id" :label="item.name">
       {{ item.name }}
     </a-option>
@@ -47,11 +47,14 @@ const fetchData = async () => {
     loading.value = false;
   }
 };
-// 搜索处理
-const handleSearch = (value: string) => {};
-
 const handleChange = (value: any) => {
-  emit('update:modelValue', [value]);
+  let data = [];
+  if (value === '') {
+    data = [];
+  } else {
+    data = [value];
+  }
+  emit('update:modelValue', data);
 };
 
 onMounted(fetchData);

src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue

@@ -10,10 +10,8 @@
       </a-popover>
     </template>
 
-    <div v-if="isChartEmpty" class="no-data">
+
-      <a-empty />
+    <div  class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
-    </div>
-    <div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
   </a-card>
 </template>
 

src/views/property-marketing/put-account/account-dashboard/index.vue

@@ -76,7 +76,6 @@
 import EchartsItem from './components/echarts-item/index';
 import { PLATFORM_LIST } from '../common_constants';
 import {
-  getPlacementAccountsList,
   getPlacementAccountsTrend,
   getPlacementAccountProjectsTrend,
   fetchAccountOperators,
@@ -96,7 +95,6 @@ const getOperators = async () => {
   }
 };
 const query = reactive({
-  names: '',
   platform: '',
   operator_id: '',
   data_time: [],
@@ -137,7 +135,6 @@ const handleSearch = async () => {
     getAccountProjectsTrend();
   }
 };
-// 定义图表配置
 const chartConfigs = ref([
   {
     dataKey: 'total_use_amount',
@@ -224,25 +221,17 @@ const chartConfigs = ref([
     series_data: [],
   },
 ]);
-const handleReset = async () => {};
+const handleReset = async () => {
+  query.platform = '';
+  query.operator_id = '';
+  query.ids = [];
+  query.placement_account_id = [];
+  handleSearch();
+};
 
 const operators = ref([]);
-const accountList = ref([]);
-const handleTabClick = (key) => {
-  handleSearch();
-};
-
-// 获取账户名称
-const getAccountList = async () => {
-  const { code, data } = await getPlacementAccountsList(query);
-  if (code === 200) {
-    accountList.value = data;
-  }
-};
-
 onMounted(() => {
   handleSearch();
-  getAccountList();
   getOperators();
 });
 </script>

src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="part-div">
     <div class="part-div-header">
-      <span class="">总体摘要</span>
+      <span class="part-div-header-title">总体摘要</span>
       <a-popover position="tl">
         <icon-question-circle />
         <template #content>
@@ -69,5 +69,4 @@ const getCss = (highlight?: string) => {
 </script>
 <style lang="scss">
 @import './style.scss';
-
 </style>

src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue

@@ -5,29 +5,14 @@
       <div class="filter-row-item flex items-center">
         <span class="label">账户名称</span>
         <a-space size="medium" class="w-240px">
-          <a-input v-model="query.account_name" placeholder="请搜索..." size="medium" allow-clear>
+          <AccountSelect v-model="query.placement_account_id"></AccountSelect>
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
         </a-space>
       </div>
 
       <div class="filter-row-item flex items-center">
         <span class="label">计划</span>
         <a-space size="medium" class="w-240px">
-          <a-input
+          <PlanSelect v-model="query.placement_account_project_id"></PlanSelect>
-            class="w-310px"
-            :style="{ width: '320px' }"
-            v-model="query.plan"
-            placeholder="请搜索..."
-            size="medium"
-            allow-clear
-          >
-            <template #prefix>
-              <icon-search />
-            </template>
-          </a-input>
         </a-space>
       </div>
 
@@ -50,7 +35,7 @@
       </div>
 
       <div class="filter-row-item flex items-center">
-        <a-button class="w-84px search-btn mr-12px" :disabled="disabled"  size="medium" @click="handleSearch">
+        <a-button class="w-84px search-btn mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
           <template #icon>
             <icon-search />
           </template>
@@ -70,6 +55,8 @@
 <script setup lang="ts">
 import { defineEmits, defineProps } from 'vue';
 import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import AccountSelect from '@/views/components/common/AccountSelect.vue';
+import PlanSelect from '@/views/components/common/PlanSelect.vue';
 
 const props = defineProps({
   query: {

src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue

@@ -7,7 +7,7 @@
       :pagination="false"
       @sorter-change="handleSorterChange"
     >
-      <template #week_consumption>
+      <template #total_use_amount_label>
         <a-space>
           <span>本周总消耗</span>
           <a-popover position="tl">
@@ -18,7 +18,7 @@
           </a-popover>
         </a-space>
       </template>
-      <template #weekConsumptionRateTitle>
+      <template #pre_total_use_amount_chain_title>
         <a-space>
           <span>本周总消耗环比</span>
           <a-popover position="tl">
@@ -53,12 +53,22 @@
       </template>
 
       <template #platform="{ record }">
-        <a-space size="medium" v-if="record.platform">
+        <div class="field-row">
-
+          <img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
-        </a-space>
+          <span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
+        </div>
+      </template>
+      <template #total_use_amount="{ record }">
+        <a-space>￥{{ record.total_use_amount }}</a-space>
       </template>
 
-      <template #weekConsumptionRate="{ record }">
+      <template #total_use_amoun2="{ record }">
+        <div class="field-row">
+          <img :src="PLATFORM_LIST.find((v) => v.value === record.platform)?.icon" width="15" height="15" />
+          <span class="label ml-5px">{{ PLATFORM_LIST.find((v) => v.value === record.platform)?.label }}</span>
+        </div>
+      </template>
+      <template #pre_total_use_amount_chain="{ record }">
         <a-statistic
           :value="record.pre_total_use_amount_chain * 100"
           :value-style="{
@@ -90,7 +100,7 @@ const props = defineProps({
     default: () => {
       data: [];
     },
-  }
+  },
 });
 
 const emit = defineEmits(['updateQuery']);
@@ -121,8 +131,9 @@ const columns = [
   },
   {
     title: '本周总消耗',
-    titleSlotName: 'week_consumption',
+    titleSlotName: 'total_use_amount_label',
     dataIndex: 'total_use_amount',
+    slotName: 'total_use_amount',
     width: 120,
     minWidth: 120,
     sortable: {
@@ -131,11 +142,11 @@ const columns = [
   },
   {
     title: '本周总消耗环比',
-    titleSlotName: 'weekConsumptionRateTitle',
+    titleSlotName: 'pre_total_use_amount_chain_title',
     dataIndex: 'pre_total_use_amount_chain',
     width: 120,
     minWidth: 120,
-    slotName: 'weekConsumptionRate',
+    slotName: 'pre_total_use_amount_chain',
     sortable: {
       sortDirections: ['ascend', 'descend'],
     },

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

@@ -14,7 +14,6 @@
           </a-tab-pane>
         </a-tabs>
       </div>
-      <!--表单组件搜索-->
       <listSearchForm
         class="ignore-export"
         @onReset="handleReset"
@@ -54,8 +53,6 @@
         <MonthData :overview="aiResult.overview"></MonthData>
         <!--    投放建议-->
         <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
-        <!--      投放行动指南-->
-        <!--        <ActionGuideDistribution :action_guide="aiResult.action_guide"></ActionGuideDistribution>-->
       </div>
     </a-spin>
     <div v-if="tabData == 'placement_guide'" class="ignore-export">
@@ -98,9 +95,9 @@ const tabData = ref('placement_guide');
 
 const query = reactive({
   platform: '',
-  account_name: '',
-  plan: '',
   date_time: [],
+  placement_account_id: [],
+  placement_account_project_id: [],
   sort_column: '',
   sort_order: '',
   page_size: 20,