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

2025-07-10 14:12:39 +08:00
parent 7b21aa3060
commit 9698500884
5 changed files with 276 additions and 129 deletions
--- a/src/views/components/common/PlanSelect.vue
+++ b/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>
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
@ -1,141 +1,158 @@
 <template>
-  <div>
-    <a-card :bordered="false" class="echart-item-card">
-      <template #title>
-        <span class="a-card-title">{{ title.name }}</span>
-        <a-popover position="tl">
-          <icon-question-circle />
-          <template #content>
-            <p style="margin: 0">{{ title.popover }}</p>
-          </template>
-        </a-popover>
-      </template>
-      <div ref="chart" style="width: 100%; height: 450px"></div>
-    </a-card>
-  </div>
+  <a-card :bordered="false" class="chart-container" ref="chartContainer">
+    <template #title>
+      <span class="a-card-title">{{ title.name }}</span>
+      <a-popover position="tl">
+        <icon-question-circle />
+        <template #content>
+          <p style="margin: 0">{{ title.popover }}</p>
+        </template>
+      </a-popover>
+    </template>
+
+    <div v-if="isChartEmpty" class="no-data">
+      <a-empty />
+    </div>
+    <div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
+  </a-card>
 </template>

-<script setup lang="ts">
-import { defineProps, onMounted } from 'vue';
+<script setup>
+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: {
-    type: Object,
-    default: {
-      name: '',
-      popover: '',
-    },
-  },
-  xAxisData: {
-    type: Array,
-    default: [],
-  },
-  seriesData: {
-    type: Array,
-    default: [],
+  chartData: Object,
+  title: Object,
+  height: {
+    type: Number,
+    default: 300,
  },
 });

-const chart = ref<HTMLElement | null>(null);
-let chartInstance: echarts.ECharts | null = null;
+const chartEl = ref(null);
+const chartContainer = ref(null);
+let chartInstance = null;

-const xAxisData = props.xAxisData;
-const seriesData = props.seriesData;
+const isChartEmpty = computed(() => isEmpty(props.chartData?.series_data));

+console.log(isChartEmpty, 'isChartEmpty');
+// 初始化图表
 const initChart = () => {
-  if (!chart.value) return;
-  // 如果已有实例，就不重复初始化
-
-  chartInstance = echarts.init(chart.value);
-
+  if (!chartEl.value) return;
+  chartInstance = echarts.init(chartEl.value);
+  updateChart();
+};
+// 更新图表数据
+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',
-      orient: 'horizontal',
-      top: 10, // 将图例位置调整到顶部
-      itemWidth: 10,
-      itemHeight: 10,
-      pageButtonItemGap: 5,
-      pageButtonStyle: { color: '#666' },
-      textStyle: { color: '#666' },
-      data: seriesData,
+      data: series_data.map((item) => item.name),
    },
    grid: {
-      top: 80, // 调整图表内容位置，避免与图例重叠
-      left: 40,
-      right: 40,
-      bottom: 40,
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      top: '15%',
+      containLabel: true,
    },
    xAxis: {
      type: 'category',
-      data: xAxisData,
-      axisLabel: { color: '#666' },
+      boundaryGap: false,
+      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],
-  async () => {
-    await nextTick();
-    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 表示合并
+// 响应式调整大小
+const resizeChart = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
 };

+// 初始化
 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>
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/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">
-            <span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
+          <div class="filter-row-item flex items-center" v-if="accountType == 2">
+            <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
-              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>
@ -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-col v-for="(chart, index) in chartConfigs" :key="index" :span="12">
-          <EchartsItem
-            :key="chart.dataKey"
-            :xAxisData="xhlEcharts?.[chart.dataKey]?.date"
-            :seriesData="xhlEcharts?.[chart.dataKey]?.series_data"
-            :title="{ name: chart.title.name, popover: chart.title.popover }"
-          ></EchartsItem>
+      <a-row :gutter="[24, 24]">
+        <a-col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
+          <div>
+            <EchartsItem
+              :chartData="{ date: chart.date, series_data: chart.series_data }"
+              :title="{ name: chart.title.name, popover: chart.title.popover }"
+            />
+          </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([]);
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/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({