feat(property-marketing): 重构仪表盘图表组件，新增计划选择组件并优化数据展示逻辑

src/api/all/propertyMarketing.ts

@@ -322,6 +322,11 @@ export const getPlacementAccountsList = (params = {}) => {
   return Http.get('/v1/placement-accounts/list', params);
 };
 
+// 投放账号计划
+export const getplacementAccountProjectsLlist = (params = {}) => {
+  return Http.get('/v1/placement-account-projects/list', params);
+};
+
 // 投放账号-同步数据
 export const postPlacementAccountsSync = (id: string) => {
   return Http.post(`/v1/placement-accounts/${id}/sync-data`);

src/views/components/common/PlanSelect.vue

@@ -0,0 +1,58 @@
+<template>
+  <a-select 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>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { getplacementAccountProjectsLlist } from '@/api/all/propertyMarketing';
+
+interface Account {
+  id: number;
+  name: string;
+}
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 响应式数据
+const selectedValue = ref(props.modelValue);
+const allAccounts = ref<Account[]>([]);
+const listData = ref<Account[]>([]);
+const loading = ref(false);
+const searchKeyword = ref('');
+
+const fetchData = async () => {
+  try {
+    loading.value = true;
+    const { code, data } = await getplacementAccountProjectsLlist({
+      names: searchKeyword.value,
+    });
+    if (code === 200) {
+      allAccounts.value = data;
+      listData.value = data;
+    }
+  } catch (error) {
+    console.error('获取账号列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+// 搜索处理
+const handleSearch = (value: string) => {};
+
+const handleChange = (value: any) => {
+  emit('update:modelValue', [value]);
+};
+
+onMounted(fetchData);
+</script>

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

@@ -1,141 +1,158 @@
 <template>
-  <div>
+  <a-card :bordered="false" class="chart-container" ref="chartContainer">
-    <a-card :bordered="false" class="echart-item-card">
+    <template #title>
-      <template #title>
+      <span class="a-card-title">{{ title.name }}</span>
-        <span class="a-card-title">{{ title.name }}</span>
+      <a-popover position="tl">
-        <a-popover position="tl">
+        <icon-question-circle />
-          <icon-question-circle />
+        <template #content>
-          <template #content>
+          <p style="margin: 0">{{ title.popover }}</p>
-            <p style="margin: 0">{{ title.popover }}</p>
+        </template>
-          </template>
+      </a-popover>
-        </a-popover>
+    </template>
-      </template>
+
-      <div ref="chart" style="width: 100%; height: 450px"></div>
+    <div v-if="isChartEmpty" class="no-data">
-    </a-card>
+      <a-empty />
-  </div>
+    </div>
+    <div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
+  </a-card>
 </template>
 
-<script setup lang="ts">
+<script setup>
-import { defineProps, onMounted } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts';
-import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
 
 const props = defineProps({
-  title: {
+  chartData: Object,
-    type: Object,
+  title: Object,
-    default: {
+  height: {
-      name: '',
+    type: Number,
-      popover: '',
+    default: 300,
-    },
-  },
-  xAxisData: {
-    type: Array,
-    default: [],
-  },
-  seriesData: {
-    type: Array,
-    default: [],
   },
 });
 
-const chart = ref<HTMLElement | null>(null);
+const chartEl = ref(null);
-let chartInstance: echarts.ECharts | null = null;
+const chartContainer = ref(null);
+let chartInstance = null;
 
-const xAxisData = props.xAxisData;
+const isChartEmpty = computed(() => isEmpty(props.chartData?.series_data));
-const seriesData = props.seriesData;
 
+console.log(isChartEmpty, 'isChartEmpty');
+// 初始化图表
 const initChart = () => {
-  if (!chart.value) return;
+  if (!chartEl.value) return;
-  // 如果已有实例，就不重复初始化
+  chartInstance = echarts.init(chartEl.value);
-
+  updateChart();
-  chartInstance = echarts.init(chart.value);
+};
-
+// 更新图表数据
+const updateChart = () => {
+  if (!chartInstance) return;
+  const { date, series_data } = props.chartData;
   const option = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'cross' },
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      borderColor: '#ccc',
-      borderWidth: 1,
-      textStyle: { color: '#333' },
     },
     legend: {
-      type: 'scroll',
+      data: series_data.map((item) => item.name),
-      orient: 'horizontal',
-      top: 10, // 将图例位置调整到顶部
-      itemWidth: 10,
-      itemHeight: 10,
-      pageButtonItemGap: 5,
-      pageButtonStyle: { color: '#666' },
-      textStyle: { color: '#666' },
-      data: seriesData,
     },
     grid: {
-      top: 80, // 调整图表内容位置，避免与图例重叠
+      left: '3%',
-      left: 40,
+      right: '4%',
-      right: 40,
+      bottom: '15%',
-      bottom: 40,
+      top: '15%',
+      containLabel: true,
     },
     xAxis: {
       type: 'category',
-      data: xAxisData,
+      boundaryGap: false,
-      axisLabel: { color: '#666' },
+      data: date,
     },
     yAxis: {
       type: 'value',
-      axisLabel: { color: '#666' },
-      splitLine: { lineStyle: { type: 'dashed', color: '#eee' } },
     },
-    series: seriesData,
+    series: series_data.map((series) => ({
+      name: series.name,
+      type: 'line',
+      data: series.data,
+      itemStyle: {
+        color: series.color,
+      },
+      smooth: true,
+      symbolSize: 6,
+    })),
   };
 
-  chartInstance.setOption(option);
+  chartInstance.setOption(option, { notMerge: true });
 };
 
-watch(
+// 响应式调整大小
-  () => [props.xAxisData, props.seriesData],
+const resizeChart = () => {
-  async () => {
+  if (chartInstance) {
-    await nextTick();
+    chartInstance.resize();
-    updateChart();
+  }
-  },
-  { deep: true },
-);
-
-const updateChart = () => {
-  if (!chartInstance) return;
-
-  const option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: { type: 'cross' },
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      borderColor: '#ccc',
-      borderWidth: 1,
-      textStyle: { color: '#333' },
-    },
-    legend: {
-      data: props.seriesData,
-    },
-    xAxis: {
-      data: props.xAxisData,
-    },
-    series: props.seriesData,
-  };
-
-  chartInstance.setOption(option, true); // 第二个参数为 true 表示合并
 };
 
+// 初始化
 onMounted(() => {
   initChart();
+  window.addEventListener('resize', resizeChart);
 });
+
+// 清理
 onBeforeUnmount(() => {
   if (chartInstance) {
     chartInstance.dispose();
     chartInstance = null;
   }
+  window.removeEventListener('resize', resizeChart);
+});
+
+// 监听数据变化
+
+watchEffect(() => {
+  JSON.stringify(props.chartData); // 强制深度监听
+  initChart();
 });
 </script>
 
 <style scoped lang="scss">
-@import './style.scss';
+.chart-container {
+  position: relative;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 15px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  background: #fff;
+  margin-bottom: 20px;
+  width: 100%;
+  height: 50%;
+
+  border-radius: 10px;
+  margin-bottom: 24px;
+
+  :deep(.arco-card-header) {
+    border-bottom: none !important;
+  }
+
+  .a-card-title {
+    color: var(--Text-1, #211f24);
+    font-size: 16px;
+    font-family: PuHuiTi-Medium;
+    font-weight: 400;
+    line-height: 24px;
+    word-wrap: break-word;
+  }
+}
+
+.chart-title {
+  position: absolute;
+  top: 10px;
+  left: 20px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+}
+
+.chart {
+  width: 100%;
+}
 </style>

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

@@ -8,22 +8,21 @@
 
       <div class="container px-24px">
         <div class="filter-row flex mb-20px">
-          <div class="filter-row-item flex items-center">
+          <div class="filter-row-item flex items-center" v-if="accountType == 2">
-            <span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
+            <span class="label">计划名称</span>
             <a-space size="medium" class="w-240px">
-              <AccountSelect v-model="query.ids"></AccountSelect>
+              <PlanSelect v-model="query.ids"></PlanSelect>
+            </a-space>
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">账号名称</span>
+            <a-space size="medium" class="w-240px">
+              <AccountSelect v-model="query.placement_account_id"></AccountSelect>
             </a-space>
           </div>
           <div class="filter-row-item flex items-center">
             <span class="label">平台</span>
-            <a-select
+            <a-select v-model="query.platform" class="w-150" size="medium" placeholder="全部" allow-clear>
-              v-model="query.platform"
-              class="w-150"
-              size="medium"
-              placeholder="全部"
-              allow-clear
-              @change="handleSearch"
-            >
               <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
                 >{{ item.label }}
               </a-option>
@@ -60,14 +59,14 @@
       </div>
     </div>
     <div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
-      <a-row class="grid-demo" :gutter="24">
+      <a-row :gutter="[24, 24]">
-        <a-col v-for="(chart, index) in chartConfigs" :key="index" :span="12">
+        <a-col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
-          <EchartsItem
+          <div>
-            :key="chart.dataKey"
+            <EchartsItem
-            :xAxisData="xhlEcharts?.[chart.dataKey]?.date"
+              :chartData="{ date: chart.date, series_data: chart.series_data }"
-            :seriesData="xhlEcharts?.[chart.dataKey]?.series_data"
+              :title="{ name: chart.title.name, popover: chart.title.popover }"
-            :title="{ name: chart.title.name, popover: chart.title.popover }"
+            />
-          ></EchartsItem>
+          </div>
         </a-col>
       </a-row>
     </div>
@@ -84,6 +83,7 @@ import {
 } from '@/api/all/propertyMarketing';
 import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
 import AccountSelect from '@/views/components/common/AccountSelect.vue';
+import PlanSelect from '@/views/components/common/PlanSelect.vue';
 
 const accountType = ref(1);
 
@@ -100,20 +100,32 @@ const query = reactive({
   platform: '',
   operator_id: '',
   data_time: [],
+  ids: [],
+  placement_account_id: [],
 });
-const xhlEcharts = reactive({});
 const getAccountsTrends = async () => {
   const { code, data } = await getPlacementAccountsTrend(query);
   if (code === 200) {
-    Object.assign(xhlEcharts, data);
+    mergeChartData(data);
   }
   onLoading.value = false;
 };
 
+const mergeChartData = (apiResponse) => {
+  console.log(apiResponse, 'apiResponse');
+  chartConfigs.value = chartConfigs.value.map((config) => {
+    const apiItem = apiResponse[config.dataKey] || {};
+    return {
+      ...config,
+      date: Array.isArray(apiItem.date) ? [...apiItem.date] : [],
+      series_data: Array.isArray(apiItem.series_data) ? [...apiItem.series_data] : [],
+    };
+  });
+};
 const getAccountProjectsTrend = async () => {
   const { code, data } = await getPlacementAccountProjectsTrend(query);
   if (code === 200) {
-    Object.assign(xhlEcharts, data);
+    mergeChartData(data);
   }
   onLoading.value = false;
 };
@@ -126,37 +138,92 @@ const handleSearch = async () => {
   }
 };
 // 定义图表配置
-const chartConfigs = [
+const chartConfigs = ref([
   {
     dataKey: 'total_use_amount',
     title: { name: '消耗量', popover: '广告投放期间已使用的预算总额，代表该账户的实际广告花费。' },
+    date: [],
+    series_data: [],
   },
   {
-    dataKey: 'avg_conversion_cost',
+    dataKey: 'show_number',
     title: { name: '展示量', popover: '广告被用户看到的总次数，是衡量广告曝光覆盖的核心指标。' },
+    date: [],
+    series_data: [],
   },
-  { dataKey: 'click_number', title: { name: '点击量', popover: '用户点击广告的次数，表示广告对用户产生了实际吸引。' } },
+  {
+    dataKey: 'click_number',
+    title: { name: '点击量', popover: '用户点击广告的次数，表示广告对用户产生了实际吸引。' },
+    date: [],
+    series_data: [],
+  },
+
   {
     dataKey: 'click_rate',
     title: { name: '点击率', popover: '点击率（CTR）= 点击量 ÷ 展示量，衡量广告吸引力与内容质量。' },
+    date: [],
+    series_data: [],
   },
   {
     dataKey: 'avg_click_cost',
-    title: { name: '平均点击成本', popover: '每次点击广告的平均花费（CPC），= 消耗量 ÷ 点击量。' },
+    title: {
+      name: '平均点击成本',
+      popover: '每次点击广告的平均花费（CPC），= 消耗量 ÷ 点击量。 ',
+      date: [],
+      series_data: [],
+    },
   },
   {
     dataKey: 'thousand_show_cost',
-    title: { name: '千次展示成本', popover: '每千次展示带来的平均成本（CPM），= 消耗量 ÷ 展示量 × 1000。' },
+    title: { name: '千次展现费用', popover: '每千次展示带来的平均成本（CPM），= 消耗量 ÷ 展示量 × 1000。' },
+    date: [],
+    series_data: [],
   },
   {
     dataKey: 'conversion_number',
     title: { name: '转化数', popover: '用户完成设定行为（如注册、下单）的总次数，衡量广告实际效果。' },
+    date: [],
+    series_data: [],
   },
+
   {
     dataKey: 'conversion_rate',
     title: { name: '转化率', popover: '转化率（CVR）= 转化数 ÷ 点击量，代表广告引导行为转化的能力。' },
+    date: [],
+    series_data: [],
   },
-];
+  {
+    dataKey: 'avg_conversion_cost',
+    title: { name: '平均转化成本', popover: '每次转化所花费的平均广告费用（CPA），= 消耗量 ÷ 转化数。' },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'deep_conversion_number',
+    title: {
+      name: '深度转化数',
+      popover: '完成更高价值行为（如支付、留资等）的用户数量，是衡量广告质量的进阶指标。',
+    },
+    date: [],
+    series_data: [],
+  },
+  {
+    dataKey: 'deep_conversion_rate',
+    title: {
+      name: '深度转化率',
+      popover: '深度转化率 = 深度转化数 ÷ 点击量，用于评估优质转化的效率。',
+    },
+    date: [],
+    series_data: [],
+  },
+
+  {
+    dataKey: 'roi',
+    title: { name: '投资回报率', popover: 'ROI = 收益 ÷ 投入，衡量广告投放的整体经济回报情况。' },
+    date: [],
+    series_data: [],
+  },
+]);
 const handleReset = async () => {};
 
 const operators = ref([]);

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

@@ -142,16 +142,16 @@ const onSearch = async () => {
   if (tabData.value === 'placement_guide') {
     result = await getPlacementGuide(query);
     placementGuideList.value = result?.data?.data || [];
+    if (placementGuideList.value.length > 0 && isGetAi.value) {
+      loading.value = true;
+      syncGetAiResult();
+      startTask();
+    }
   } else {
     result = await getPlacementGuideHistory(query);
     guideHistoryList.value = result?.data?.data || [];
   }
   listData.total = result.data.total;
-  if (placementGuideList.value.length > 0 && isGetAi.value) {
-    loading.value = true;
-    syncGetAiResult();
-    startTask();
-  }
   isGetAi.value = true;
 };
 const aiResult = reactive({