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

<template>
  <div class="account-dashboard-wrap">
    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
      <a-tabs v-model:activeKey="accountType" @tab-click="handleTabClick">
        <a-tab-pane key="1" title="账户"></a-tab-pane>
        <a-tab-pane key="2" title="计划"></a-tab-pane>
      </a-tabs>

      <div class="container px-24px">
        <div class="filter-row flex mb-20px">
          <div class="filter-row-item flex items-center" v-if="accountType == 2">
            <span class="label">计划名称</span>
            <a-space size="medium" class="w-240px">
              <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>
              <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label"
                >{{ item.label }}
              </a-option>
            </a-select>
          </div>

          <div class="filter-row-item flex items-center">
            <span class="label">运营人员</span>
            <a-space class="w-160px">
              <OperatorSelect v-model="query.operator_id" :options="operators" />
            </a-space>
          </div>
        </div>
        <div class="filter-row flex">
          <div class="filter-row-item flex items-center">
            <span class="label">时间筛选</span>
            <a-space class="w-240px">
              <a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
            </a-space>
          </div>
          <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
            <template #icon>
              <icon-search />
            </template>
            <template #default>搜索</template>
          </a-button>
          <a-button size="medium" @click="handleReset">
            <template #icon>
              <icon-refresh />
            </template>
            <template #default>重置</template>
          </a-button>
        </div>
      </div>
    </div>
    <div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
      <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>
  </div>
</template>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index';
import { PLATFORM_LIST } from '@/utils/platform';
import {
  getPlacementAccountsTrend,
  getPlacementAccountProjectsTrend,
  fetchAccountOperators,
} 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);

const onLoading = ref(true);

const getOperators = async () => {
  const { code, data } = await fetchAccountOperators();
  if (code === 200) {
    operators.value = data;
  }
};
const query = reactive({
  platform: '',
  operator_id: '',
  data_time: [],
  ids: [],
  placement_account_id: [],
});
const getAccountsTrends = async () => {
  const { code, data } = await getPlacementAccountsTrend(query);
  if (code === 200) {
    mergeChartData(data);
  }
  onLoading.value = false;
};

const handleTabClick = (value) => {
  accountType.value = value;
  handleSearch();
};
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) {
    mergeChartData(data);
  }
  onLoading.value = false;
};

const handleSearch = async () => {
  if (accountType.value == 1) {
    getAccountsTrends();
  } else if (accountType.value == 2) {
    getAccountProjectsTrend();
  }
};
const chartConfigs = ref([
  {
    dataKey: 'total_use_amount',
    title: { name: '消耗量', popover: '广告投放期间已使用的预算总额，代表该账户的实际广告花费。' },
    date: [],
    series_data: [],
  },
  {
    dataKey: 'show_number',
    title: { name: '展示量', popover: '广告被用户看到的总次数，是衡量广告曝光覆盖的核心指标。' },
    date: [],
    series_data: [],
  },
  {
    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），= 消耗量 ÷ 点击量。 ',
      date: [],
      series_data: [],
    },
  },
  {
    dataKey: 'thousand_show_cost',
    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 () => {
  query.platform = '';
  query.operator_id = '';
  query.ids = [];
  query.placement_account_id = [];
  handleSearch();
};

const operators = ref([]);
onMounted(() => {
  handleSearch();
  getOperators();
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>