gxwebsoft/yunxinwei-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
messi
2024-08-21 12:55:18 +08:00
parent b5e5a19b69
commit 26a8ce42ab
10 changed files with 934 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/views/system/dashboard/components/sale-card.vue Normal file
View File

@@ -0,0 +1,248 @@
<template>
<a-card :bordered="false" :body-style="{ padding: 0 }">
<a-tabs
size="large"
v-model:activeKey="saleSearch.type"
class="monitor-card-tabs"
@change="onSaleTypeChange"
>
<a-tab-pane tab="商品销售排行(全门店)" key="saleroom" />
<a-tab-pane tab="用户消费排行(全门店)" />
<template #rightExtra>
<a-space
size="middle"
:class="[
'analysis-tabs-extra',
{ 'hidden-lg-and-down': styleResponsive }
]"
>
<a-radio-group v-model:value="saleSearch.dateType">
<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-button value="4">本年</a-radio-button>
</a-radio-group>
<div style="width: 300px">
<a-range-picker
value-format="YYYY-MM-DD"
v-model:value="saleSearch.datetime"
/>
</div>
</a-space>
</template>
</a-tabs>
<div style="padding-bottom: 10px">
<a-row :gutter="16">
<a-col
v-bind="
styleResponsive ? { lg: 17, md: 15, sm: 24, xs: 24 } : { span: 17 }
"
>
<div v-if="saleSearch.type === 'saleroom'" class="demo-monitor-title">
销售量趋势
</div>
<div v-else class="demo-monitor-title">访问量趋势</div>
<v-chart
ref="saleChartRef"
:option="saleChartOption"
style="height: 320px"
/>
</a-col>
<a-col
v-bind="
styleResponsive ? { lg: 7, md: 9, sm: 24, xs: 24 } : { span: 7 }
"
>
<div v-if="saleSearch.type === 'saleroom'">
<div class="demo-monitor-title">门店销售额排名</div>
<div
v-for="(item, index) in saleroomRankData"
:key="index"
class="demo-monitor-rank-item ele-cell"
>
<ele-tag
shape="circle"
:color="index < 3 ? '#314659' : ''"
style="border: none"
>
{{ index + 1 }}
</ele-tag>
<div class="ele-cell-content ele-elip">{{ item.name }}</div>
<div class="ele-text-secondary">{{ item.value }}</div>
</div>
</div>
<div v-else>
<div class="demo-monitor-title">门店访问量排名</div>
<div
v-for="(item, index) in visitsRankData"
:key="index"
class="demo-monitor-rank-item ele-cell"
>
<ele-tag
shape="circle"
:color="index < 3 ? '#314659' : ''"
style="border: none"
>
{{ index + 1 }}
</ele-tag>
<div class="ele-cell-content ele-elip">{{ item.name }}</div>
<div class="ele-text-secondary">{{ item.value }}</div>
</div>
</div>
</a-col>
</a-row>
</div>
</a-card>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue/es';
import { use } from 'echarts/core';
import type { EChartsCoreOption } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import { getSaleroomList } from '@/api/dashboard/analysis';
import type { SaleroomData } from '@/api/dashboard/analysis/model';
import useEcharts from '@/utils/use-echarts';
use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
//
const saleChartRef = ref<InstanceType<typeof VChart> | null>(null);
useEcharts([saleChartRef]);
// 销售额柱状图配置
const saleChartOption: EChartsCoreOption = reactive({});
// 门店销售排名数据
const saleroomRankData = ref([
{ name: '工专路 1 号店', value: '323,234' },
{ name: '工专路 2 号店', value: '323,234' },
{ name: '工专路 3 号店', value: '323,234' },
{ name: '工专路 4 号店', value: '323,234' },
{ name: '工专路 5 号店', value: '323,234' },
{ name: '工专路 6 号店', value: '323,234' },
{ name: '工专路 7 号店', value: '323,234' }
]);
// 门店访问排名数据
const visitsRankData = ref([
{ name: '工专路 1 号店', value: '323,234' },
{ name: '工专路 2 号店', value: '323,234' },
{ name: '工专路 3 号店', value: '323,234' },
{ name: '工专路 4 号店', value: '323,234' },
{ name: '工专路 5 号店', value: '323,234' },
{ name: '工专路 6 号店', value: '323,234' },
{ name: '工专路 7 号店', value: '323,234' }
]);
// 销售量趋势数据
const saleroomData1 = ref<SaleroomData[]>([]);
// 访问量趋势数据
const saleroomData2 = ref<SaleroomData[]>([]);
interface SaleSearchType {
type: string;
dateType: string;
datetime: [string, string];
}
// 销售量搜索参数
const saleSearch = reactive<SaleSearchType>({
type: 'saleroom',
dateType: '1',
datetime: ['2022-01-08', '2022-02-12']
});
/* 获取销售量数据 */
const getSaleroomData = () => {
getSaleroomList()
.then((data) => {
saleroomData1.value = data.list1;
saleroomData2.value = data.list2;
onSaleTypeChange();
})
.catch((e) => {
message.error(e.message);
});
};
/* 销售量tab选择改变事件 */
const onSaleTypeChange = () => {
if (saleSearch.type === 'saleroom') {
Object.assign(saleChartOption, {
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'category',
data: saleroomData1.value.map((d) => d.month)
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
type: 'bar',
data: saleroomData1.value.map((d) => d.value)
}
]
});
} else {
Object.assign(saleChartOption, {
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'category',
data: saleroomData2.value.map((d) => d.month)
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
type: 'bar',
data: saleroomData2.value.map((d) => d.value)
}
]
});
}
};
getSaleroomData();
</script>
<style lang="less" scoped>
.monitor-card-tabs :deep(.ant-tabs-nav) {
padding: 0 16px;
}
.demo-monitor-title {
padding: 6px 20px;
}
.demo-monitor-rank-item {
padding: 0 20px;
margin-top: 18px;
}
</style>