|
@@ -11,15 +11,15 @@
|
|
|
<GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
|
|
<GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
|
|
|
<h3 class="text-16px">{{ item.title }}</h3>
|
|
<h3 class="text-16px">{{ item.title }}</h3>
|
|
|
<div class="flex">
|
|
<div class="flex">
|
|
|
- <CountTo :endVal="item.value" :style="{ fontSize: '34px' }"> </CountTo>
|
|
|
|
|
- <div class="ml12px mt25px"> {{ item.unit }} </div>
|
|
|
|
|
|
|
+ <CountTo :endVal="item.value" decimals="2" :style="{ fontSize: '34px' }"></CountTo>
|
|
|
|
|
+ <div class="ml12px mt25px"> {{ item.unit }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="flex justify-between pt-12px">
|
|
<div class="flex justify-between pt-12px">
|
|
|
- <Icon :icon="item.icon" :size="28"> </Icon>
|
|
|
|
|
|
|
+ <Icon :icon="item.icon" :size="28"></Icon>
|
|
|
<div class="text-18px" v-if="item.Proportion != null">
|
|
<div class="text-18px" v-if="item.Proportion != null">
|
|
|
环比:<span> {{ item.Proportion > 0 ? '+' : '' }} {{ item.Proportion }} %</span>
|
|
环比:<span> {{ item.Proportion > 0 ? '+' : '' }} {{ item.Proportion }} %</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-else> 无环比数据 </div>
|
|
|
|
|
|
|
+ <div v-else> 无环比数据</div>
|
|
|
</div>
|
|
</div>
|
|
|
</GradientBg>
|
|
</GradientBg>
|
|
|
</div>
|
|
</div>
|
|
@@ -32,7 +32,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mt24px grid gap-3" :class="[!getIsMerchant ? 'lg:grid-cols-2 sm:grid-cols-1' : '']">
|
|
<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>
|
|
<template #extra>
|
|
|
<a-radio-group v-model:value="storeBtn" button-style="solid">
|
|
<a-radio-group v-model:value="storeBtn" button-style="solid">
|
|
|
<a-radio-button :value="1">今日</a-radio-button>
|
|
<a-radio-button :value="1">今日</a-radio-button>
|
|
@@ -40,22 +40,24 @@
|
|
|
<a-radio-button :value="3">本月</a-radio-button>
|
|
<a-radio-button :value="3">本月</a-radio-button>
|
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
|
</template>
|
|
</template>
|
|
|
- <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.saleMoney }} </span>
|
|
|
|
|
- </template>
|
|
|
|
|
- <a-list-item-meta>
|
|
|
|
|
- <template #title>
|
|
|
|
|
- <span class="ml40px">{{ item.deptName }} </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>
|
|
</template>
|
|
|
- </a-list-item-meta>
|
|
|
|
|
- </a-list-item>
|
|
|
|
|
- </a-badge-ribbon>
|
|
|
|
|
- </template>
|
|
|
|
|
- </a-list>
|
|
|
|
|
|
|
+ <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-card>
|
|
</a-card>
|
|
|
<a-card :bordered="false" title="商品销量排行">
|
|
<a-card :bordered="false" title="商品销量排行">
|
|
|
<template #extra>
|
|
<template #extra>
|
|
@@ -65,19 +67,25 @@
|
|
|
<a-radio-button :value="3">本月</a-radio-button>
|
|
<a-radio-button :value="3">本月</a-radio-button>
|
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+ <div class="grid grid-cols-4 text-center font-bold mb12px">
|
|
|
|
|
+ <div class="text-left">排名</div>
|
|
|
|
|
+ <div class="text-left">商品名称</div>
|
|
|
|
|
+ <div>销量</div>
|
|
|
|
|
+ <div>销售额(元)</div>
|
|
|
|
|
+ </div>
|
|
|
<a-list item-layout="horizontal" :data-source="goodsDataList">
|
|
<a-list item-layout="horizontal" :data-source="goodsDataList">
|
|
|
<template #renderItem="{ item, index }">
|
|
<template #renderItem="{ item, index }">
|
|
|
<a-badge-ribbon placement="start" :text="index + 1" :color="index == 0 ? 'red' : index == 1 ? 'green' : index == 2 ? 'volcano' : ''">
|
|
<a-badge-ribbon placement="start" :text="index + 1" :color="index == 0 ? 'red' : index == 1 ? 'green' : index == 2 ? 'volcano' : ''">
|
|
|
<a-list-item>
|
|
<a-list-item>
|
|
|
<template #actions>
|
|
<template #actions>
|
|
|
- <span> {{ item.totalPrice }} </span>
|
|
|
|
|
|
|
+ <span class="w-56 block"> {{ item.total_price }} </span>
|
|
|
</template>
|
|
</template>
|
|
|
<a-list-item-meta>
|
|
<a-list-item-meta>
|
|
|
<template #title>
|
|
<template #title>
|
|
|
- <span class="ml40px">{{ item.shopName }} </span>
|
|
|
|
|
|
|
+ <span class="ml180px">{{ item.product_name }} </span>
|
|
|
</template>
|
|
</template>
|
|
|
</a-list-item-meta>
|
|
</a-list-item-meta>
|
|
|
- <div> {{ item.productCount }}</div>
|
|
|
|
|
|
|
+ <div> {{ item.total_quantity }}</div>
|
|
|
</a-list-item>
|
|
</a-list-item>
|
|
|
</a-badge-ribbon>
|
|
</a-badge-ribbon>
|
|
|
</template>
|
|
</template>
|
|
@@ -92,17 +100,21 @@
|
|
|
import CountTo from '/@/components/CountTo/src/CountTo.vue';
|
|
import CountTo from '/@/components/CountTo/src/CountTo.vue';
|
|
|
import { createReusableTemplate } from '@vueuse/core';
|
|
import { createReusableTemplate } from '@vueuse/core';
|
|
|
import { ref, unref, watch } from 'vue';
|
|
import { ref, unref, watch } from 'vue';
|
|
|
|
|
+
|
|
|
const { getIsMerchant } = storeToRefs(useUserStore());
|
|
const { getIsMerchant } = storeToRefs(useUserStore());
|
|
|
- import { getGoodsData, getIndexData, getStoreData } from './api';
|
|
|
|
|
|
|
+ import { getGoodsData, getIndexData, getStoreData, getChartData } from './api';
|
|
|
import { storeToRefs } from 'pinia';
|
|
import { storeToRefs } from 'pinia';
|
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
import { useUserStore } from '/@/store/modules/user';
|
|
|
|
|
+
|
|
|
const storeBtn = ref(1);
|
|
const storeBtn = ref(1);
|
|
|
const goodsBtn = ref(1);
|
|
const goodsBtn = ref(1);
|
|
|
const storeDataList = ref([]);
|
|
const storeDataList = ref([]);
|
|
|
const goodsDataList = ref([]);
|
|
const goodsDataList = ref([]);
|
|
|
|
|
+
|
|
|
interface GradientBgProps {
|
|
interface GradientBgProps {
|
|
|
gradientColor: string;
|
|
gradientColor: string;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
interface CardData {
|
|
interface CardData {
|
|
|
key: string;
|
|
key: string;
|
|
|
title: string;
|
|
title: string;
|
|
@@ -115,6 +127,7 @@
|
|
|
icon: string;
|
|
icon: string;
|
|
|
Proportion: number;
|
|
Proportion: number;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
|
|
const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();
|
|
|
const cardData = ref<CardData[]>([
|
|
const cardData = ref<CardData[]>([
|
|
|
{
|
|
{
|
|
@@ -190,36 +203,49 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
);
|
|
);
|
|
|
|
|
+
|
|
|
function getGradientColor(color: CardData['color']) {
|
|
function getGradientColor(color: CardData['color']) {
|
|
|
return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
|
|
return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
async function getDataIndex() {
|
|
async function getDataIndex() {
|
|
|
const res = await getIndexData();
|
|
const res = await getIndexData();
|
|
|
- unref(cardData)[0].value = res.saleMoney;
|
|
|
|
|
- unref(cardData)[0].Proportion = res.saleMoneyChain;
|
|
|
|
|
- unref(cardData)[1].value = res.effectiveOrderNum;
|
|
|
|
|
- unref(cardData)[1].Proportion = res.effectiveOrderNumChain;
|
|
|
|
|
- unref(cardData)[2].value = res.expectIncomeMoney;
|
|
|
|
|
- unref(cardData)[2].Proportion = res.expectIncomeMoneyChain;
|
|
|
|
|
- unref(cardData)[3].value = res.consumeNumber;
|
|
|
|
|
- unref(cardData)[3].Proportion = res.consumeNumberChain;
|
|
|
|
|
- unref(cardData)[4].value = res.addNumber;
|
|
|
|
|
- unref(cardData)[4].Proportion = res.addNumberChain;
|
|
|
|
|
- chartData.value = res.findByStatisticsChartVOList;
|
|
|
|
|
|
|
+ unref(cardData)[0].value = res.salesAmount;
|
|
|
|
|
+ unref(cardData)[0].Proportion = res.salesGrowthRate;
|
|
|
|
|
+ unref(cardData)[1].value = res.validOrderCount;
|
|
|
|
|
+ unref(cardData)[1].Proportion = res.validOrderGrowthRate;
|
|
|
|
|
+ unref(cardData)[2].value = res.expectedIncome;
|
|
|
|
|
+ unref(cardData)[2].Proportion = res.expectedIncomeGrowthRate;
|
|
|
|
|
+ unref(cardData)[3].value = res.platformConsumptionUsers;
|
|
|
|
|
+ unref(cardData)[3].Proportion = res.platformConsumptionGrowthRate;
|
|
|
|
|
+ unref(cardData)[4].value = res.newUsersCount;
|
|
|
|
|
+ unref(cardData)[4].Proportion = res.newUsersGrowthRate;
|
|
|
|
|
+ // chartData.value = res.findByStatisticsChartVOList;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
async function getStoreDataList() {
|
|
async function getStoreDataList() {
|
|
|
const res = await getStoreData({ type: storeBtn.value });
|
|
const res = await getStoreData({ type: storeBtn.value });
|
|
|
console.log(res, 'getStoreDataList');
|
|
console.log(res, 'getStoreDataList');
|
|
|
storeDataList.value = res;
|
|
storeDataList.value = res;
|
|
|
}
|
|
}
|
|
|
- getStoreDataList();
|
|
|
|
|
|
|
|
|
|
|
|
+ // 图表
|
|
|
|
|
+ async function getChartDataList() {
|
|
|
|
|
+ const res = await getChartData();
|
|
|
|
|
+ console.log(res, '--图表数据');
|
|
|
|
|
+ chartData.value = res;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ getStoreDataList();
|
|
|
getDataIndex();
|
|
getDataIndex();
|
|
|
|
|
+ getChartDataList();
|
|
|
|
|
+
|
|
|
async function getGoodsList() {
|
|
async function getGoodsList() {
|
|
|
const res = await getGoodsData({ type: goodsBtn.value });
|
|
const res = await getGoodsData({ type: goodsBtn.value });
|
|
|
console.log(res, 'getGoodsList');
|
|
console.log(res, 'getGoodsList');
|
|
|
goodsDataList.value = res;
|
|
goodsDataList.value = res;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
getGoodsList();
|
|
getGoodsList();
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|