351 lines
10 KiB
Vue
351 lines
10 KiB
Vue
<template>
|
|
<div class="workbench">
|
|
<el-card shadow="never" class=" !border-none">
|
|
<div class="flex justify-between items-center">
|
|
<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="开始日期"
|
|
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" />
|
|
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<div class="flex flex-wrap box-border mt-4">
|
|
<div class="box-border w-1/5" v-for="(item, index) in basicList" :key="index">
|
|
<el-card class="!border-none ml-4 mb-4 flex" :class="{ '!ml-0': index % 5 === 0 }" shadow="never">
|
|
<div class="flex">
|
|
<div class="mr-2">
|
|
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
|
|
<iconfont :iconName="item.icon" white className="text-6xl" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-info">{{ item.name }}</div>
|
|
<div class="text-6xl">{{ item.num }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</el-card>
|
|
</div>
|
|
|
|
</div>
|
|
<el-card shadow="never" class=" !border-none">
|
|
<span class="text-2xl">营业趋势</span>
|
|
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
|
</el-card>
|
|
<div class="mt-4 flex justify-center">
|
|
<el-card shadow="never" class="flex-1 !border-none">
|
|
<span class="text-2xl">交易数据</span>
|
|
<el-table :data="formData.order_list" height="500px">
|
|
<el-table-column label="头像" prop="build_area_text" show-overflow-tooltip>
|
|
<template #default="{ row }">
|
|
<el-avatar style="width: 50px; height: 50px" :src="row.avatar" />
|
|
</template>
|
|
</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:500px" :option="tradTypeOption" :autoresize="true" />
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="statistics_store">
|
|
import { apiGetUserBasic, apiGetUserTrend } from '@/api/workbench'
|
|
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 = [
|
|
{
|
|
text: '近一周',
|
|
value: () => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setDate(start.getDate() - 7)
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '近一月',
|
|
value: () => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 1)
|
|
return [start, end]
|
|
},
|
|
},
|
|
{
|
|
text: '近三月',
|
|
value: () => {
|
|
const end = new Date()
|
|
const start = new Date()
|
|
start.setMonth(start.getMonth() - 3)
|
|
return [start, end]
|
|
},
|
|
},
|
|
]
|
|
|
|
// 表单数据
|
|
const visitorOption: any = reactive({
|
|
xAxis: {
|
|
type: 'category',
|
|
data: [0],
|
|
axisLabel: {
|
|
rotate: 45,
|
|
color: '#333'
|
|
}
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '用户数量',
|
|
position: 'left',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
position: 'right',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
],
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
data: ['访问量']
|
|
},
|
|
itemStyle: {
|
|
// 点的颜色。
|
|
color: 'red'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
series: [
|
|
{
|
|
data: [],
|
|
type: 'line',
|
|
smooth: true,
|
|
name: "门店收款"
|
|
},
|
|
{
|
|
data: [],
|
|
type: 'line',
|
|
smooth: true,
|
|
name: '新增用户'
|
|
}
|
|
]
|
|
})
|
|
const circleOption: any = reactive({
|
|
tooltip: {
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
legend: {
|
|
data: []
|
|
},
|
|
series: [
|
|
{
|
|
name: "交易类型",
|
|
type: "pie",
|
|
radius: ["35%", "65%"],
|
|
center: ["50%", "60%"],
|
|
data: [],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
|
|
})
|
|
|
|
// 颜色
|
|
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
|
|
const basicList = reactive([
|
|
{
|
|
name: '门店收款金额',
|
|
type: 'receipt_amount',
|
|
icon: 'RectangleCopy',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '门店营业额',
|
|
type: 'order_amount',
|
|
icon: 'RectangleCopy49',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '门店收益金额',
|
|
type: 'income_amount',
|
|
icon: 'RectangleCopy53',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '核销订单金额',
|
|
type: 'verify_amount',
|
|
icon: 'RectangleCopy5',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '线下收银订单金额',
|
|
type: 'cashier_amount',
|
|
icon: 'RectangleCopy4',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '现金收银订单金额',
|
|
type: 'cash_amount',
|
|
icon: 'RectangleCopy7',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '余额消费金额',
|
|
type: 'balance_amount',
|
|
icon: 'RectangleCopy59',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '门店成交用户数',
|
|
type: 'user_number',
|
|
icon: 'RectangleCopy54',
|
|
num: 0,
|
|
|
|
},
|
|
{
|
|
name: '保证金',
|
|
type: 'deposit_amount',
|
|
icon: 'RectangleCopy32',
|
|
num: 0,
|
|
|
|
},
|
|
])
|
|
const startEndTime = ref([new Date(), new Date()]);
|
|
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 = '';
|
|
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];
|
|
})
|
|
|
|
// 写入从后台拿来的数据
|
|
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;
|
|
})
|
|
|
|
}
|
|
|
|
|
|
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(() => {
|
|
remoteMethod()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|