|
@@ -31,50 +31,55 @@
|
|
|
</a-card>
|
|
|
</div>
|
|
|
|
|
|
- <div class="mt24px grid lg:grid-cols-2 sm:grid-cols-1 gap-3">
|
|
|
- <a-card :bordered="false" title="门店销售额排行">
|
|
|
+ <div class="mt24px grid gap-3" :class="[!getIsMerchant ? 'lg:grid-cols-2 sm:grid-cols-1' : '']">
|
|
|
+ <a-card :bordered="false" title="门店销售额排行" v-if="!getIsMerchant">
|
|
|
<template #extra>
|
|
|
<a-radio-group v-model:value="storeBtn" button-style="solid">
|
|
|
- <a-radio-button ::value="0">今日</a-radio-button>
|
|
|
- <a-radio-button :value="1">本周</a-radio-button>
|
|
|
- <a-radio-button :value="2">本月</a-radio-button>
|
|
|
+ <a-radio-button :value="1">今日</a-radio-button>
|
|
|
+ <a-radio-button :value="2">本周</a-radio-button>
|
|
|
+ <a-radio-button :value="3">本月</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</template>
|
|
|
- <a-list item-layout="horizontal" :data-source="data">
|
|
|
- <template #renderItem="{ item }">
|
|
|
- <a-list-item>
|
|
|
- <a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">
|
|
|
- <template #title>
|
|
|
- <a href="https://www.antdv.com/">{{ item.title }}</a>
|
|
|
+ <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>
|
|
|
- <template #avatar>
|
|
|
- <a-avatar src="https://joeschmoe.io/api/v1/random" />
|
|
|
- </template>
|
|
|
- </a-list-item-meta>
|
|
|
- </a-list-item>
|
|
|
+ <a-list-item-meta>
|
|
|
+ <template #title>
|
|
|
+ <span class="ml40px">{{ item.deptName }} </span>
|
|
|
+ </template>
|
|
|
+ </a-list-item-meta>
|
|
|
+ </a-list-item>
|
|
|
+ </a-badge-ribbon>
|
|
|
</template>
|
|
|
</a-list>
|
|
|
</a-card>
|
|
|
<a-card :bordered="false" title="商品销量排行">
|
|
|
<template #extra>
|
|
|
<a-radio-group v-model:value="goodsBtn" button-style="solid">
|
|
|
- <a-radio-button ::value="0">今日</a-radio-button>
|
|
|
- <a-radio-button :value="1">本周</a-radio-button>
|
|
|
- <a-radio-button :value="2">本月</a-radio-button>
|
|
|
+ <a-radio-button :value="1">今日</a-radio-button>
|
|
|
+ <a-radio-button :value="2">本周</a-radio-button>
|
|
|
+ <a-radio-button :value="3">本月</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</template>
|
|
|
- <a-list item-layout="horizontal" :data-source="data">
|
|
|
- <template #renderItem="{ item }">
|
|
|
- <a-list-item>
|
|
|
- <a-list-item-meta description="Ant Design, a design language for background applications, is refined by Ant UED Team">
|
|
|
- <template #title>
|
|
|
- <a href="https://www.antdv.com/">{{ item.title }}</a>
|
|
|
- </template>
|
|
|
- <template #avatar>
|
|
|
- <a-avatar src="https://joeschmoe.io/api/v1/random" />
|
|
|
+ <a-list item-layout="horizontal" :data-source="goodsDataList">
|
|
|
+ <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.totalPrice }} </span>
|
|
|
</template>
|
|
|
- </a-list-item-meta>
|
|
|
- </a-list-item>
|
|
|
+ <a-list-item-meta>
|
|
|
+ <template #title>
|
|
|
+ <span class="ml40px">{{ item.shopName }} </span>
|
|
|
+ </template>
|
|
|
+ </a-list-item-meta>
|
|
|
+ <div> {{ item.productCount }}</div>
|
|
|
+ </a-list-item>
|
|
|
+ </a-badge-ribbon>
|
|
|
</template>
|
|
|
</a-list>
|
|
|
</a-card>
|
|
@@ -86,10 +91,15 @@
|
|
|
import Line from './components/Line.vue';
|
|
|
import CountTo from '/@/components/CountTo/src/CountTo.vue';
|
|
|
import { createReusableTemplate } from '@vueuse/core';
|
|
|
- import { ref, unref } from 'vue';
|
|
|
- import { getIndexData } from './api';
|
|
|
- const storeBtn = ref(0);
|
|
|
- const goodsBtn = ref(0);
|
|
|
+ import { ref, unref, watch } from 'vue';
|
|
|
+ const { getIsMerchant } = storeToRefs(useUserStore());
|
|
|
+ import { getGoodsData, getIndexData, getStoreData } from './api';
|
|
|
+ import { storeToRefs } from 'pinia';
|
|
|
+ import { useUserStore } from '/@/store/modules/user';
|
|
|
+ const storeBtn = ref(1);
|
|
|
+ const goodsBtn = ref(1);
|
|
|
+ const storeDataList = ref([]);
|
|
|
+ const goodsDataList = ref([]);
|
|
|
interface GradientBgProps {
|
|
|
gradientColor: string;
|
|
|
}
|
|
@@ -169,6 +179,17 @@
|
|
|
},
|
|
|
]);
|
|
|
const chartData = ref([]);
|
|
|
+ watch(
|
|
|
+ () => [storeBtn.value, goodsBtn.value],
|
|
|
+ (newValue, old) => {
|
|
|
+ if (newValue[0] != old[0]) {
|
|
|
+ getStoreDataList();
|
|
|
+ }
|
|
|
+ if (newValue[1] != old[1]) {
|
|
|
+ getGoodsList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
function getGradientColor(color: CardData['color']) {
|
|
|
return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
|
|
|
}
|
|
@@ -185,10 +206,21 @@
|
|
|
unref(cardData)[4].value = res.addNumber;
|
|
|
unref(cardData)[4].Proportion = res.addNumberChain;
|
|
|
chartData.value = res.findByStatisticsChartVOList;
|
|
|
- console.log(unref(cardData), '获取数据');
|
|
|
}
|
|
|
+ async function getStoreDataList() {
|
|
|
+ const res = await getStoreData({ type: storeBtn.value });
|
|
|
+ console.log(res, 'getStoreDataList');
|
|
|
+ storeDataList.value = res;
|
|
|
+ }
|
|
|
+ getStoreDataList();
|
|
|
|
|
|
getDataIndex();
|
|
|
+ async function getGoodsList() {
|
|
|
+ const res = await getGoodsData({ type: goodsBtn.value });
|
|
|
+ console.log(res, 'getGoodsList');
|
|
|
+ goodsDataList.value = res;
|
|
|
+ }
|
|
|
+ getGoodsList();
|
|
|
</script>
|
|
|
|
|
|
<style scoped></style>
|