weipengfei
/
moreShopAdmin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
weipengfei 2024-06-20 17:34:40 +08:00
parent 0eb25cb482
commit 439400f2d9
3 changed files with 147 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/system_store.ts
View File

@ -64,3 +64,8 @@ export function apiSystemStoreStatisticsOrderChart(params: any) {
export function apiSystemStoreStatisticsStore(params: any) {
return request.get({ url: '/system_store/SystemStoreStatistics/store', params })
}
// 门店交易统计
export function apiWorkbenchStoreIndex(params: any) {
return request.get({ url: '/workbench/store_index', params })
}

46
src/views/finance/store_finance_flow/index.vue
View File

@ -4,17 +4,17 @@
<el-form class="mb-[-16px]" :model="queryParams" inline>
<el-form-item label="门店" prop="store_id">
<!-- <el-input class="w-[280px]" v-model="queryParams.store_name" clearable placeholder="请输入门店id" /> -->
<el-select v-model="queryParams.store_id" filterable remote reserve-keyword
placeholder="输入门店名称搜索" remote-show-suffix :remote-method="remoteMethod" :loading="storeloading"
style="width: 240px" @change="resetPage">
<el-select v-model="queryParams.store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px"
@change="resetPage">
<el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="用户" prop="uid">
<!-- <el-input class="w-[280px]" v-model="queryParams.uid" clearable placeholder="请输入用户id" /> -->
<el-select v-model="queryParams.user_id" filterable remote reserve-keyword
placeholder="输入用户名称搜索" remote-show-suffix :remote-method="remoteMethodUser" :loading="userloading"
style="width: 240px" @change="resetPage">
<el-select v-model="queryParams.user_id" filterable remote reserve-keyword placeholder="输入用户名称搜索"
remote-show-suffix :remote-method="remoteMethodUser" :loading="userloading" style="width: 240px"
@change="resetPage">
<el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
</el-select>
</el-form-item>
@ -32,15 +32,15 @@
<template #icon>
<icon name="el-icon-Plus" />
</template>
新增
</el-button>
<el-button v-perms="['store_finance_flow.store_finance_flow/delete']" :disabled="!selectData.length"
新增
</el-button>
<el-button v-perms="['store_finance_flow.store_finance_flow/delete']" :disabled="!selectData.length"
@click="handleDelete(selectData)">
删除
</el-button> -->
</el-button> -->
<div>
<el-table :data="pager.lists" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table :data="pager.lists" @selection-change="handleSelectionChange" row-key="id" :tree-props="{ children: 'list' }">
<el-table-column label="ID" prop="id" min-width="100" show-overflow-tooltip />
<el-table-column label="交易单号" prop="order_sn" min-width="120" show-overflow-tooltip />
<el-table-column label="交易时间" prop="create_time" min-width="120" show-overflow-tooltip />
<el-table-column label="金额" prop="number" min-width="100" show-overflow-tooltip>
@ -51,7 +51,7 @@
</el-table-column>
<el-table-column label="门店名称" prop="store_name" show-overflow-tooltip />
<el-table-column label="用户" prop="nickname" min-width="80" show-overflow-tooltip />
<el-table-column label="交易类型" prop="financial_type_name" show-overflow-tooltip />
<el-table-column label="收益/扣除" prop="financial_type_name" show-overflow-tooltip />
<el-table-column label="支付方式" prop="pay_type_name" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" show-overflow-tooltip />
@ -131,39 +131,39 @@ getLists()
const storeloading = ref(false);
const storeList = ref([]);
const remoteMethod = (e:string='') => {
const remoteMethod = (e: string = '') => {
storeloading.value = true;
apiSystemStoreLists({
name: e,
page_size: 50
}).then(res => {
storeList.value = res.lists;
setTimeout(()=>{
setTimeout(() => {
storeloading.value = false;
},300)
}, 300)
}).catch(err => {
setTimeout(()=>{
setTimeout(() => {
storeloading.value = false;
},300)
}, 300)
})
}
const userloading = ref(false);
const userList = ref([]);
const remoteMethodUser = (e:string='') => {
const remoteMethodUser = (e: string = '') => {
storeloading.value = true;
apiUserLists({
nickname: e,
page_size: 50
}).then(res => {
userList.value = res.lists;
setTimeout(()=>{
setTimeout(() => {
storeloading.value = false;
},300)
}, 300)
}).catch(err => {
setTimeout(()=>{
setTimeout(() => {
storeloading.value = false;
},300)
}, 300)
})
}
</script>

207
src/views/store/statistics/index.vue
View File

@ -2,7 +2,15 @@
<div class="workbench">
<el-card shadow="never" class=" !border-none">
<div class="flex justify-between items-center">
<span class="text-2xl">运营概况</span>
<div class="flex items-center">
<span class="text-2xl mr-4">运营概况</span>
<el-select v-model="store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px"
@change="getData">
<el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<span class="ml-4 text-info text-[12px]">点击左侧切换门店</span>
</div>
<div class="flex items-center text-sm">
<span class="mr-4">时间筛选: </span>
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
@ -37,48 +45,32 @@
<div class="mt-4 flex justify-center">
<el-card shadow="never" class="flex-1 !border-none">
<span class="text-2xl">交易数据</span>
<el-table :data="orderList" class="mt-4" height="280">
<el-table-column prop="avatar" label="头像" min-width="55">
<el-table :data="formData.order_list" height="500px">
<el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
<template #default="{ row }">
<el-avatar :size="40" :src="row.avatar" />
<el-avatar style="width: 50px; height: 50px" :src="row.avatar" />
</template>
</el-table-column>
<el-table-column prop="nickname" label="用户名称" />
<el-table-column prop="order_id" label="订单号" min-width="200" />
<el-table-column prop="pay_price" label="交易金额" />
<el-table-column prop="pay_time" label="成交时间">
</el-table-column>
<el-table-column label="用户名称" prop="nickname" show-overflow-tooltip />
<el-table-column label="订单号" prop="order_id" show-overflow-tooltip />
<el-table-column label="交易金额" prop="pay_price" show-overflow-tooltip />
<el-table-column label="成交时间" prop="pay_time" show-overflow-tooltip />
</el-table>
</el-card>
<el-card shadow="never" class="w-[500px] !border-none ml-4">
<span class="text-2xl">交易类型</span>
<v-charts style="height: 300px" :option="circleOption" :autoresize="true" />
<v-charts style="height:500px" :option="tradTypeOption" :autoresize="true" />
</el-card>
</div>
<!-- <el-card shadow="never" class="mt-4 !border-none">
<span class="text-2xl">门店业绩</span>
<el-table :data="storeList" class="mt-4">
<el-table-column prop="avatar" label="logo" min-width="55">
<template #default="{ row }">
<el-avatar :size="40" :src="row.avatar" />
</template>
</el-table-column>
<el-table-column prop="name" label="门店名称" />
<el-table-column prop="store_price" label="门店实际收款"/>
<el-table-column prop="store_order_price" label="门店商品销售额" />
<el-table-column prop="store_product_count" label="门店商品销量" />
<el-table-column prop="store_user_count" label="门店新增用户数" />
</el-table>
</el-card> -->
</div>
</template>
<script lang="ts" setup name="statistics_store">
import { apiGetUserBasic, apiGetUserTrend } from '@/api/workbench'
import { apiSystemStoreStatisticsHeader, apiSystemStoreStatisticsOperate, apiSystemStoreStatisticsOrderChart, apiSystemStoreStatisticsStore } from '@/api/system_store'
import { apiSystemStoreStatisticsHeader, apiSystemStoreStatisticsOperate, apiSystemStoreStatisticsOrderChart, apiSystemStoreStatisticsStore, apiWorkbenchStoreIndex } from '@/api/system_store'
import moment from 'moment'
import vCharts from 'vue-echarts'
import { apiSystemStoreLists } from '@/api/system_store'
const shortcuts = [
{
@ -156,10 +148,16 @@ const visitorOption: any = reactive({
},
series: [
{
name: '访问量',
data: [0],
data: [],
type: 'line',
smooth: true
smooth: true,
name: "门店收款"
},
{
data: [],
type: 'line',
smooth: true,
name: '新增用户'
}
]
})
@ -188,128 +186,157 @@ const circleOption: any = reactive({
],
})
const orderList: any = ref([])
const storeList: any = ref([])
// 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
const basicList = reactive([
{
name: '门店订单金额',
type: 'store_income',
name: '门店收款金额',
type: 'receipt_amount',
icon: 'RectangleCopy',
num: 0,
},
{
name: '余额消耗金额',
type: 'store_use_yue',
name: '门店营业额',
type: 'order_amount',
icon: 'RectangleCopy49',
num: 0,
},
{
name: '用户充值金额',
type: 'recharge_price',
name: '门店收益金额',
type: 'income_amount',
icon: 'RectangleCopy53',
num: 0,
},
{
name: '收银订单金额',
type: 'cashier_order_price',
name: '核销订单金额',
type: 'verify_amount',
icon: 'RectangleCopy5',
num: 0,
},
{
name: '付费会员金额',
type: 'vip_price',
name: '线下收银订单金额',
type: 'cashier_amount',
icon: 'RectangleCopy4',
num: 0,
},
{
name: '分配订单金额',
type: 'store_income',
name: '现金收银订单金额',
type: 'cash_amount',
icon: 'RectangleCopy7',
num: 0,
},
{
name: '核销订单金额',
type: 'store_writeoff_order_price',
name: '余额消费金额',
type: 'balance_amount',
icon: 'RectangleCopy59',
num: 0,
},
{
name: '门店新增用户数',
type: 'store_user_count',
icon: 'RectangleCopy15',
num: 0,
},
{
name: '门店成交用户数',
type: 'store_pay_user_count',
type: 'user_number',
icon: 'RectangleCopy54',
num: 0,
},
// {
// name: '微信会员卡激活数',
// type: 'card_count',
// icon: 'RectangleCopy7',
// num: 0,
// },
])
const startEndTime = ref(['', '']);
const store_id = ref('');
const formData = ref({});
const tradTypeOption = reactive(
{
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '线上收银订单' },
{ value: 735, name: '现金收银订单' },
{ value: 580, name: '核销订单' },
{ value: 484, name: '充值订单' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
)
// 获取数据
const getData = () => {
let date = '';
if (startEndTime.value[0] && startEndTime.value[1]) date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
apiSystemStoreStatisticsHeader({
date: date
let start_time, end_time;
if (startEndTime.value[0] && startEndTime.value[1]) {
date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
start_time = moment(startEndTime.value[0]).format('YYYY/MM/DD') + ' 00:00:00';
end_time = moment(startEndTime.value[1]).format('YYYY/MM/DD') + ' 23:59:59'
}
apiWorkbenchStoreIndex({
start_time: start_time,
end_time: end_time,
store_id: store_id.value
}).then(res => {
basicList.forEach((item: any) => {
item.num = res[item.type];
})
})
apiSystemStoreStatisticsOperate({
date: date
}).then(res => {
// 清空echarts 数据
visitorOption.xAxis.data = []
visitorOption.series = []
visitorOption.legend.data = res.series.map((item: any) => item.name);
// 写入从后台拿来的数据
visitorOption.xAxis.data = res.xAxis;
visitorOption.series = res.series.map((item: any) => {
if (item.name == '新增用户数') item.yAxisIndex = 0;
return item;
});
visitorOption.xAxis.data = res.statistics.range
visitorOption.series[0].data = res.statistics.data.order_amount
visitorOption.series[1].data = res.statistics.data.user_number
formData.value = res;
tradTypeOption.series[0].data = res.pay_type;
})
apiSystemStoreStatisticsOrderChart({
date: date
}).then(res => {
circleOption.legend.data = res.bing_xdata;
// 写入从后台拿来的数据
circleOption.series[0].data = res.bing_data;
orderList.value = res.order_list;
})
// apiSystemStoreStatisticsStore({
// date: date
// }).then(res => {
// storeList.value = res;
// })
}
const storeloading = ref(false);
const storeList = ref([]);
const remoteMethod = (e: string = '') => {
storeloading.value = true;
apiSystemStoreLists({
name: e,
page_size: 50
}).then(res => {
storeList.value = res.lists;
if (store_id.value === '') {
const index = Math.floor(Math.random() * res.lists.length)
store_id.value = res.lists[index].id;
getData();
}
setTimeout(() => {
storeloading.value = false;
}, 300)
}).catch(err => {
setTimeout(() => {
storeloading.value = false;
}, 300)
})
}
onMounted(() => {
getData()
remoteMethod()
})
</script>