feat(property-marketing): 重构月度数据展示组件并优化AI分析交互流程

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

@@ -11,20 +11,11 @@
     </div>
     <div class="month-data-div">
       <div style="align-self: stretch">
-        <a-space direction="vertical" v-for="(item, index) in overview">
-          <span :style="{ color: getColor(item?.highlight) }">{{ item.text }}</span>
-          <br />
+        <a-space direction="vertical">
+          <span v-for="(line, index) in formattedText" :key="index" :class="getCss(line.highlight)" >
+            {{ line.text }}
+          </span>
         </a-space>
-        <!--        <span class="month-text-black">总消耗：</span>-->
-        <!--        <span class="month-text-blue">￥52,382.16</span>-->
-        <!--        <span class="month-normal-span">，较上周期</span><span class="month-text-red">↑12.6%</span>-->
-        <!--        <span class="month-normal-span">；<br />整体ROI：</span><span class="month-text-blue">2.84</span>-->
-        <!--        <span class="month-normal-span">，属于</span><span class="month-text-red">中等偏高水平</span>-->
-        <!--        <span class="month-text-black">，较上周期 </span><span class="month-text-red">+0.45</span>-->
-        <!--        <span class="month-normal-span">；<br />主要转化来源：</span><span class="month-text-blue">抖音 46.3%</span>-->
-        <!--        <span class="month-normal-span">，CTR 2.91%；<br />优质素材表现：</span>-->
-        <!--        <span class="month-text-blue">美团酒店爆款横版1号</span>-->
-        <!--        <span class="month-normal-spanw">。CTR 3.47%，CVR 5.92%。</span>-->
       </div>
     </div>
   </div>
@@ -34,20 +25,48 @@
 import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 import { defineProps } from 'vue';
 
-const colorMap = {
-  purple: 'purple',
-  orange: 'orange',
-};
 const props = defineProps({
   overview: {
-    type: Array,
-    default: () => [],
+    type: Object,
+    default: () => ({
+      text: '',
+      parts: [],
+    }),
   },
 });
-
-const getColor = (highlight?: string) => {
-  return highlight ? colorMap[highlight] : undefined;
+const classMap = {
+  purple: 'month-text-blue',
+  black: 'month-text-black',
+  orange: 'orange',
+  red: 'month-text-red',
 };
+
+const formattedText = computed(() => {
+  console.log(props.overview, 'props.overview');
+  const { text, parts } = props.overview;
+  if (!text || !parts) return [];
+
+  // 替换占位符
+  let resultText = text;
+  parts.forEach((part) => {
+    const key = Object.keys(part)[0];
+    resultText = resultText.replace(`{${key}}`, part[key]);
+  });
+
+  // 按分号拆分并保留颜色信息
+  return resultText.split('；').map((line) => {
+    const matchedPart = parts.find((part) => line.includes(part[Object.keys(part)[0]]));
+    return {
+      text: line.trim(),
+      highlight: matchedPart?.highlight || 'black',
+    };
+  });
+});
+
+const getCss = (highlight?: string) => {
+  return highlight ? classMap[highlight] : undefined;
+};
+
 console.log(props.overview, 'overvie333');
 </script>
 <style lang="scss">

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

@@ -33,14 +33,7 @@
 
       <div class="filter-row-item flex items-center">
         <span class="label">平台</span>
-        <a-select
-          v-model="query.platform"
-          class="w-150"
-          size="medium"
-          placeholder="全部"
-          allow-clear
-          @change="handleSearch"
-        >
+        <a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
           <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
             >{{ item.label }}
           </a-option>
@@ -83,6 +76,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emits = defineEmits('onSearch', 'onReset', 'update:query');
 // 获取最近7天的日期
@@ -100,6 +97,10 @@ const localQuery = computed({
   get: () => props.query,
   set: (value) => emits('update:query', value),
 });
+
+const handleReset = () => {
+  emits('onReset');
+};
 onMounted(() => {
   localQuery.value.data_time = getLast7Days();
 });

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

@@ -61,15 +61,15 @@
 
       <template #weekConsumptionRate="{ record }">
         <a-statistic
-          :value="record.week_consumption_rate * 100"
+          :value="record.pre_total_use_amount_chain * 100"
           :value-style="{
-            color: record.week_consumption_rate > 0 ? '#F64B31' : '#25C883',
+            color: record.pre_total_use_amount_chain > 0 ? '#F64B31' : '#25C883',
             fontStyle: 'normal',
             fontSize: '14px',
           }"
         >
           <template #prefix>
-            <icon-arrow-rise v-if="record.week_consumption_rate > 0" />
+            <icon-arrow-rise v-if="record.pre_total_use_amount_chain > 0" />
             <icon-arrow-down v-else />
           </template>
           <template #suffix>%</template>
@@ -91,7 +91,7 @@ const props = defineProps({
     default: () => {
       data: [];
     },
-  },
+  }
 });
 
 const emit = defineEmits(['updateQuery']);
@@ -99,13 +99,7 @@ const emit = defineEmits(['updateQuery']);
 const handleSorterChange = (column, order) => {
   emit('updateQuery', { column, order });
 };
-const listQuery = reactive({
-  project_id: ref(''),
-  platform: ref(''),
-  page: ref(1),
-  name: ref(''),
-  page_size: ref('10'),
-});
+
 const columns = [
   {
     title: '账户名称',
@@ -139,7 +133,7 @@ const columns = [
   {
     title: '本周总消耗环比',
     titleSlotName: 'weekConsumptionRateTitle',
-    dataIndex: 'week_consumption_rate',
+    dataIndex: 'pre_total_use_amount_chain',
     width: 120,
     minWidth: 120,
     slotName: 'weekConsumptionRate',