|
|
@@ -9,7 +9,13 @@
|
|
|
<div class="grid xl:grid-cols-5 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
|
|
<div v-for="item in cardData" :key="item.key" :xs="24" :sm="12" :md="12" :lg="5">
|
|
|
<GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
|
|
|
- <h3 class="text-16px">{{ item.title }}</h3>
|
|
|
+ <a-tooltip>
|
|
|
+ <template #title>{{item.cardDsc}}</template>
|
|
|
+ <h3 class="text-16px">
|
|
|
+ {{ item.title }}
|
|
|
+ <Icon icon="ant-design:info-circle-outlined"></Icon>
|
|
|
+ </h3>
|
|
|
+ </a-tooltip>
|
|
|
<div class="flex">
|
|
|
<CountTo :endVal="item.value" decimals="2" :style="{ fontSize: '34px' }"></CountTo>
|
|
|
<div class="ml12px mt25px"> {{ item.unit }}</div>
|
|
|
@@ -32,7 +38,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="mt24px grid gap-3" :class="[!getIsMerchant ? 'lg:grid-cols-2 sm:grid-cols-1' : '']">
|
|
|
- <a-card :bordered="false" title="门店销售额排行" v-if="!getIsMerchant" >
|
|
|
+ <a-card :bordered="false" title="门店销售额排行" v-if="!getIsMerchant">
|
|
|
<template #extra>
|
|
|
<a-radio-group v-model:value="storeBtn" button-style="solid">
|
|
|
<a-radio-button :value="1">今日</a-radio-button>
|
|
|
@@ -40,24 +46,24 @@
|
|
|
<a-radio-button :value="3">本月</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</template>
|
|
|
-<!-- <div class="overflow-y-scroll pl-20px">-->
|
|
|
- <a-list item-layout="horizontal" :data-source="storeDataList">
|
|
|
- <template #renderItem="{ item, index }">
|
|
|
- <a-badge-ribbon placement="start" :text="index + 1" :color="index == 0 ? 'red' : index == 1 ? 'green' : index == 2 ? 'volcano' : ''">
|
|
|
- <a-list-item>
|
|
|
- <template #actions>
|
|
|
- <span> {{ item.total_price }} </span>
|
|
|
+ <!-- <div class="overflow-y-scroll pl-20px">-->
|
|
|
+ <a-list item-layout="horizontal" :data-source="storeDataList">
|
|
|
+ <template #renderItem="{ item, index }">
|
|
|
+ <a-badge-ribbon placement="start" :text="index + 1" :color="index == 0 ? 'red' : index == 1 ? 'green' : index == 2 ? 'volcano' : ''">
|
|
|
+ <a-list-item>
|
|
|
+ <template #actions>
|
|
|
+ <span> {{ item.total_price }} </span>
|
|
|
+ </template>
|
|
|
+ <a-list-item-meta>
|
|
|
+ <template #title>
|
|
|
+ <span class="ml40px">{{ item.name }} </span>
|
|
|
</template>
|
|
|
- <a-list-item-meta>
|
|
|
- <template #title>
|
|
|
- <span class="ml40px">{{ item.name }} </span>
|
|
|
- </template>
|
|
|
- </a-list-item-meta>
|
|
|
- </a-list-item>
|
|
|
- </a-badge-ribbon>
|
|
|
- </template>
|
|
|
- </a-list>
|
|
|
-<!-- </div>-->
|
|
|
+ </a-list-item-meta>
|
|
|
+ </a-list-item>
|
|
|
+ </a-badge-ribbon>
|
|
|
+ </template>
|
|
|
+ </a-list>
|
|
|
+ <!-- </div>-->
|
|
|
</a-card>
|
|
|
<a-card :bordered="false" title="商品销量排行">
|
|
|
<template #extra>
|
|
|
@@ -126,6 +132,7 @@
|
|
|
};
|
|
|
icon: string;
|
|
|
Proportion: number;
|
|
|
+ cardDsc: string;
|
|
|
}
|
|
|
|
|
|
const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
|
|
|
@@ -141,6 +148,7 @@
|
|
|
},
|
|
|
icon: 'ant-design:bar-chart-outlined',
|
|
|
Proportion: 8,
|
|
|
+ cardDsc: '',
|
|
|
},
|
|
|
{
|
|
|
key: 'turnover',
|
|
|
@@ -153,6 +161,7 @@
|
|
|
},
|
|
|
icon: 'ant-design:file-text-outlined',
|
|
|
Proportion: 8,
|
|
|
+ cardDsc: '',
|
|
|
},
|
|
|
{
|
|
|
key: 'downloadCount',
|
|
|
@@ -165,6 +174,7 @@
|
|
|
},
|
|
|
icon: 'ant-design:dollar-circle-outlined',
|
|
|
Proportion: 8,
|
|
|
+ cardDsc: '',
|
|
|
},
|
|
|
{
|
|
|
key: 'dealCount',
|
|
|
@@ -177,6 +187,7 @@
|
|
|
},
|
|
|
icon: 'ant-design:user-outlined',
|
|
|
Proportion: 8,
|
|
|
+ cardDsc: '',
|
|
|
},
|
|
|
{
|
|
|
key: 'add',
|
|
|
@@ -189,6 +200,7 @@
|
|
|
},
|
|
|
icon: 'ant-design:user-add-outlined',
|
|
|
Proportion: 8,
|
|
|
+ cardDsc: '',
|
|
|
},
|
|
|
]);
|
|
|
const chartData = ref([]);
|
|
|
@@ -212,14 +224,19 @@
|
|
|
const res = await getIndexData();
|
|
|
unref(cardData)[0].value = res.salesAmount;
|
|
|
unref(cardData)[0].Proportion = res.salesGrowthRate;
|
|
|
+ unref(cardData)[0].cardDsc = '订单实际支付金额(扣除退款)';
|
|
|
unref(cardData)[1].value = res.validOrderCount;
|
|
|
unref(cardData)[1].Proportion = res.validOrderGrowthRate;
|
|
|
+ unref(cardData)[1].cardDsc = '成功支付的订单数量(剔除未付款/已退款)';
|
|
|
unref(cardData)[2].value = res.expectedIncome;
|
|
|
unref(cardData)[2].Proportion = res.expectedIncomeGrowthRate;
|
|
|
+ unref(cardData)[2].cardDsc = '销售额中平台预计能分的钱';
|
|
|
unref(cardData)[3].value = res.platformConsumptionUsers;
|
|
|
unref(cardData)[3].Proportion = res.platformConsumptionGrowthRate;
|
|
|
+ unref(cardData)[3].cardDsc = '今日平台下订单(不去除退款)的人次';
|
|
|
unref(cardData)[4].value = res.newUsersCount;
|
|
|
unref(cardData)[4].Proportion = res.newUsersGrowthRate;
|
|
|
+ unref(cardData)[4].cardDsc = '今日平台新增的小程序用户数';
|
|
|
// chartData.value = res.findByStatisticsChartVOList;
|
|
|
}
|
|
|
|