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

<template>
  <view>
    <div class="part-div">
      <div>
        <a-tabs v-model:activeKey="tabData" class="a-tab-class" default-active-key="acctoun">
          <a-tab-pane key="acctoun" title="账户"></a-tab-pane>
          <a-tab-pane key="project">
            <template #title>项目</template>
          </a-tab-pane>
        </a-tabs>
      </div>
      <a-space size="large" direction="vertical" class="search-form">
        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="5">
            <a-space>
              <span>账户名称</span>
              <a-select :style="{ width: '320px' }" placeholder="全部">
                <a-option>Beijing</a-option>
                <a-option>Shanghai</a-option>
                <a-option>Guangzhou</a-option>
              </a-select>
            </a-space>
          </a-col>
          <a-col :span="5">
            <a-space>
              <span>平台</span>
              <a-select :style="{ width: '320px' }" placeholder="全部">
                <a-option>Beijing</a-option>
                <a-option>Shanghai</a-option>
                <a-option>Guangzhou</a-option>
              </a-select>
            </a-space>
          </a-col>
          <a-col :span="5">
            <a-space>
              <span>运营人员</span>
              <a-select :style="{ width: '320px' }" placeholder="全部">
                <a-option>Beijing</a-option>
                <a-option>Shanghai</a-option>
                <a-option>Guangzhou</a-option>
              </a-select>
            </a-space>
          </a-col>
        </a-row>

        <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
          <a-col :span="6">
            <a-space>
              <span>时间筛选</span>
              <a-range-picker
                showTime
                :time-picker-props="{
                  defaultValue: ['00:00:00', '00:00:00'],
                }"
                @change="onChange"
                @select="onSelect"
                style="width: 380px"
              />
            </a-space>
          </a-col>
          <a-col :span="5">
            <a-space>
              <a-button type="outline" class="search-btn" @click="handleSearch">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>搜索</template>
              </a-button>
              <a-button type="outline" class="reset-btn" @click="handleSearch">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-space>
    </div>

    <div>
      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '消耗量', popover: '消耗量' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '消耗量', popover: '消耗量' }"
          ></EchartsItem>
        </a-col>
      </a-row>
      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '点击量', popover: '点击量' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '点击率', popover: 点击率 }"
          ></EchartsItem>
        </a-col>
      </a-row>

      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '平均点击成本', popover: '平均点击成本' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '千次展现费用', popover: '千次展现费用' }"
          ></EchartsItem>
        </a-col>
      </a-row>

      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '转化数', popover: '转化数' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '转化率', popover: '转化率' }"
          ></EchartsItem>
        </a-col>
      </a-row>
      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '平均转化成本', popover: '平均转化成本' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '深度转化数', popover: '深度转化数' }"
          ></EchartsItem>
        </a-col>
      </a-row>

      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '深度转化率', popover: '深度转化率' }"
          ></EchartsItem>
        </a-col>
        <a-col :span="12">
          <EchartsItem
            :xAxisData="xhlEcharts.xAxisData"
            :seriesData="xhlEcharts.seriesData"
            :title="{ name: '投资回报率', popover: '投资回报率' }"
          ></EchartsItem>
        </a-col>
      </a-row>
    </div>
  </view>
</template>
<script setup lang="ts">
import EchartsItem from './components/echarts-item/index.vue';

const xhlEcharts = reactive({
  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>