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">
            <span class="label">{{ accountType == 1 ? '账号名称' : '计划名称' }}</span>
            <a-space size="medium" class="w-240px">
              <a-input v-model="query.names" placeholder="请搜索..." size="medium" allow-clear @change="handleSearch">
                <template #prefix>
                  <icon-search />
                </template>
              </a-input>
            </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-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-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
              <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name"
                >{{ item.name }}
              </a-option>
            </a-select>
          </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 size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
            </a-space>
          </div>
          <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
            <template #icon>
              <icon-search />
            </template>
            <template #default>搜索</template>
          </a-button>
          <a-button class="w-84px reset-btn" 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">
      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.consumption_volume.xAxisData"
            :seriesData="xhlEcharts.consumption_volume.seriesData"
            :title="{ name: '消耗量', popover: '消耗量' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.click_count.xAxisData"
            :seriesData="xhlEcharts.click_count.seriesData"
            :title="{ name: '消耗量', popover: '消耗量' }"
          ></EchartsItem>
        </a-col>
      </a-row>

    </div>
  </div>
</template>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index';
import { PLATFORM_LIST } from '../common_constants';
import {
  getPlacementAccountsList,
  getPlacementAccountsTrend,
  getPlacementAccountProjectsTrend,
} from '@/api/all/propertyMarketing';

const accountType = ref('1');

const query = reactive({
  names: '',
  platform: '',
  operator_id: '',
});
const getPlacementAccounts = async () => {
  const { code, data } = await getPlacementAccountsTrend(query);
  if (code === 200) {
    accountList.value = data;
  }
};

const handleSearch = async () => {
  getPlacementAccounts();
};
const handleReset = async () => {};
// 投放账号计划数据-趋势
const getPlacementAccountProjects = async () => {
  const { code, data } = await getPlacementAccountProjectsTrend(query);
  if (code === 200) {
    accountList.value = data;
  }
};
const operators = ref([]);
const accountList = ref([]);
const handleTabClick = (key) => {
  console.log(key, 'key');
  if (key == 1) {
    getAccountList();
  } else if (key == 2) {
    getPlacementAccountProjects();
  }
};

const getOperators = async () => {

};

// 获取账户名称
const getAccountList = async () => {
  const { code, data } = await getPlacementAccountsList(query);
  if (code === 200) {
    accountList.value = data;
  }
};

onMounted(() => {
  getPlacementAccounts();
  getAccountList();
  getOperators();
});
const xhlEcharts = reactive({
  consumption_volume: {
    label: '消耗量',
    key: 'consumption_volume',
    xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
    seriesData: [
      {
        name: '本地推-小庭院推广计划',
        type: 'line',
        data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
        color: '#7b68ee',
        emphasis: { focus: 'series' },
      },
      {
        name: '全球旅行小助手推广',
        type: 'line',
        data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
        color: '#32c5ff',
        emphasis: { focus: 'series' },
      },
      {
        name: '定向旅居推广顶级套餐',
        type: 'line',
        data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
        color: '#feb62f',
        emphasis: { focus: 'series' },
      },
      {
        name: '城市探索者特惠活动',
        type: 'line',
        data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
        color: '#ff7d00',
        emphasis: { focus: 'series' },
      },
      {
        name: '高端民宿精选推荐',
        type: 'line',
        data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
        color: '#f5222d',
        emphasis: { focus: 'series' },
      },
      {
        name: '美食探店达人计划',
        type: 'line',
        data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
        color: '#722ed1',
        emphasis: { focus: 'series' },
      },
      {
        name: '户外探险装备推荐',
        type: 'line',
        data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
        color: '#13c2c2',
        emphasis: { focus: 'series' },
      },
    ],

  },
  click_count: {
    label: '点击量',
    key: 'click_count',
    xAxisData: ['06-05', '06-06', '06-07', '06-08', '06-09', '06-10', '06-11'],
    seriesData: [
      {
        name: '本地推-小庭院推广计划',
        type: 'line',
        data: [30000, 40000, 25000, 20000, 29019, 29019, 29019],
        color: '#7b68ee',
        emphasis: { focus: 'series' },
      },
      {
        name: '全球旅行小助手推广',
        type: 'line',
        data: [25000, 27000, 23000, 20000, 29019, 29019, 29019],
        color: '#32c5ff',
        emphasis: { focus: 'series' },
      },
      {
        name: '定向旅居推广顶级套餐',
        type: 'line',
        data: [10000, 5000, 12000, 15000, 29019, 29019, 29019],
        color: '#feb62f',
        emphasis: { focus: 'series' },
      },
      {
        name: '城市探索者特惠活动',
        type: 'line',
        data: [15000, 18000, 12000, 16000, 20000, 22000, 24000],
        color: '#ff7d00',
        emphasis: { focus: 'series' },
      },
      {
        name: '高端民宿精选推荐',
        type: 'line',
        data: [22000, 20000, 25000, 23000, 21000, 19000, 22000],
        color: '#f5222d',
        emphasis: { focus: 'series' },
      },
      {
        name: '美食探店达人计划',
        type: 'line',
        data: [18000, 19000, 17000, 16000, 18000, 20000, 21000],
        color: '#722ed1',
        emphasis: { focus: 'series' },
      },
      {
        name: '户外探险装备推荐',
        type: 'line',
        data: [12000, 14000, 13000, 15000, 17000, 16000, 18000],
        color: '#13c2c2',
        emphasis: { focus: 'series' },
      },
    ],
  },
});
</script>

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