197 lines
7.2 KiB
Plaintext
197 lines
7.2 KiB
Plaintext
<template>
|
|
<div class="console">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
|
|
<a-card size="small" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<img src="~@/assets/images/visits.svg" class="top-card-img" />
|
|
<div class="pt-2">访问量</div>
|
|
</div>
|
|
<div>
|
|
<a-typography-text type="secondary">周</a-typography-text>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<a-typography-title :level="2" class="mb-0">
|
|
<CountTo :startVal="1" :endVal="3232" class="text-3xl" />
|
|
</a-typography-title>
|
|
<div>
|
|
<a-tag color="#18a058" round size="small"> +10% </a-tag>
|
|
<ArrowUpOutlined style="color: #18a058" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
|
|
<a-card size="small" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<img src="~@/assets/images/sale.svg" class="top-card-img" />
|
|
<div class="pt-2">销售额</div>
|
|
</div>
|
|
<div>
|
|
<a-typography-text type="secondary">周</a-typography-text>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<a-typography-title :level="2" class="mb-0">
|
|
<CountTo
|
|
prefix="￥"
|
|
:startVal="1"
|
|
:endVal="7856"
|
|
class="text-3xl"
|
|
/>
|
|
</a-typography-title>
|
|
<div>
|
|
<a-tag color="#d03050" type="error" round size="small"> -20% </a-tag>
|
|
<ArrowDownOutlined style="color: #d03050" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
|
|
<a-card size="small" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<img src="~@/assets/images/order_count.svg" class="top-card-img" />
|
|
<div class="pt-2">订单量</div>
|
|
</div>
|
|
<div>
|
|
<a-typography-text type="secondary">周</a-typography-text>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<a-typography-title :level="2" class="mb-0">
|
|
<CountTo :startVal="1" :endVal="9323" class="text-3xl" />
|
|
</a-typography-title>
|
|
<div>
|
|
<a-tag color="#18a058" type="success" round size="small"> +35% </a-tag>
|
|
<ArrowUpOutlined style="color: #18a058" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
|
|
<a-card size="small" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<div class="flex justify-between">
|
|
<div>
|
|
<img src="~@/assets/images/volume.svg" class="top-card-img" />
|
|
<div class="pt-2">成交额</div>
|
|
</div>
|
|
<div>
|
|
<a-typography-text type="secondary">月</a-typography-text>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<a-typography-title :level="2" class="mb-0">
|
|
<CountTo prefix="￥" :startVal="1" :endVal="9853" class="text-3xl" />
|
|
</a-typography-title>
|
|
<div>
|
|
<a-tag color="#d03050" type="error" round size="small"> -5% </a-tag>
|
|
<ArrowDownOutlined style="color: #d03050" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="[16, 16]" class="mt-4">
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
<a-card title="访问量" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<NewVisitAmount />
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
<a-card title="区域排行" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<AreaRanking />
|
|
</template>
|
|
<!-- <div class="-mt-6">
|
|
<a-space justify="space-around">
|
|
<a-statistic label="搜索引擎" value="45.8%" />
|
|
<a-statistic label="直接访问" value="35.5%" />
|
|
<a-statistic label="邮件营销" value="25.56%" />
|
|
</a-space>
|
|
</div> -->
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row :gutter="[16, 16]" class="mt-4">
|
|
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
<a-card title="销售额" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<Percent />
|
|
</template>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
<a-card title="访问来源" :bordered="false" hoverable>
|
|
<a-skeleton v-if="loading" :width="100" size="medium" />
|
|
<template v-else>
|
|
<VisitSource />
|
|
</template>
|
|
<!-- <div class="-mt-6">
|
|
<a-space justify="space-around">
|
|
<a-statistic label="搜索引擎" value="45.8%" />
|
|
<a-statistic label="直接访问" value="35.5%" />
|
|
<a-statistic label="邮件营销" value="25.56%" />
|
|
</a-space>
|
|
</div> -->
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
|
|
import NewVisitAmount from './components/NewVisitAmount.vue';
|
|
import VisitSource from './components/VisitSource.vue';
|
|
import Percent from './components/Percent.vue';
|
|
import AreaRanking from './components/AreaRanking.vue';
|
|
import { getConsoleInfo } from '@/api/dashboard/console';
|
|
import { CountTo } from '@/components/CountTo/index';
|
|
|
|
const loading = ref<boolean>(true);
|
|
const visits = ref<TypeVisits>();
|
|
const saleroom = ref<TypeSaleroom>();
|
|
const orderLarge = ref<TypeOrderLarge>();
|
|
const volume = ref<TypeOrderLarge>();
|
|
|
|
onMounted(async () => {
|
|
// const res: TypeConsole = await getConsoleInfo();
|
|
// visits.value = res.visits;
|
|
// saleroom.value = res.saleroom;
|
|
// orderLarge.value = res.orderLarge;
|
|
// volume.value = res.volume;
|
|
loading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.top-card-img {
|
|
width: 32px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|