This commit is contained in:
parent
7a9dc2ef79
commit
98b011db3c
|
|
@ -2,9 +2,9 @@ NODE_ENV = 'development'
|
|||
VITE_NOW_TYPE = 'dist'
|
||||
|
||||
# Base API
|
||||
# VITE_APP_BASE_URL='http://192.168.1.231:8545'
|
||||
VITE_APP_BASE_URL='http://192.168.1.231:8545'
|
||||
# VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn'
|
||||
# VITE_APP_BASE_URL='https://multi-store.lihaink.cn'
|
||||
VITE_APP_BASE_URL='http://192.168.1.6:8545'
|
||||
# VITE_APP_BASE_URL='http://192.168.1.6:8545'
|
||||
# VITE_APP_BASE_URL='https://ceshi-multi-store.lihaink.cn'
|
||||
|
||||
|
|
|
|||
|
|
@ -38,3 +38,11 @@ export function apiGetTopTrade(params: any) {
|
|||
export function product_order(params: any) {
|
||||
return request.get({ url: '/workbench/product_order', params })
|
||||
}
|
||||
// 实时订单商品合计统计
|
||||
export function product_month_order(params: any) {
|
||||
return request.get({ url: '/workbench/product_month_order', params })
|
||||
}
|
||||
// 实时订单商品合计统计
|
||||
export function store_order_cart_info_curve(params: any) {
|
||||
return request.get({ url: '/store_order_cart_info/StoreOrderCartInfo/curve', params })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,11 +36,14 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="create_time">
|
||||
<daterange-picker
|
||||
v-model:startTime="queryParams.start_time"
|
||||
v-model:endTime="queryParams.end_time"
|
||||
<el-date-picker
|
||||
v-model="startEndTime"
|
||||
type="daterange"
|
||||
@change="resetPage"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
unlink-panels
|
||||
@change="changeStartEndTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -135,18 +138,30 @@ import feedback from '@/utils/feedback'
|
|||
import { apiStoreCategoryLists } from '@/api/store_category'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { apiSystemStoreLists } from '@/api/system_store'
|
||||
import moment from 'moment'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const detailsRef = ref(null)
|
||||
const startEndTime = ref([new Date(), new Date()])
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
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',
|
||||
is_group: '',
|
||||
store_id: ''
|
||||
})
|
||||
|
||||
const changeStartEndTime = () => {
|
||||
if (startEndTime.value[0] && startEndTime.value[1]) {
|
||||
queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'
|
||||
queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
|
||||
} else {
|
||||
queryParams.start_time = ''
|
||||
queryParams.end_time = ''
|
||||
}
|
||||
getLists()
|
||||
}
|
||||
const storeloading = ref(false)
|
||||
const storeList = ref([])
|
||||
const remoteMethod = (e = '') => {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,14 @@
|
|||
<el-card class="!border-none mb-4" shadow="never">
|
||||
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||
<el-form-item label="" prop="create_time">
|
||||
<daterange-picker
|
||||
v-model:startTime="queryParams.start_time"
|
||||
v-model:endTime="queryParams.end_time"
|
||||
<el-date-picker
|
||||
v-model="startEndTime"
|
||||
type="daterange"
|
||||
@change="resetPage"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
unlink-panels
|
||||
@change="changeStartEndTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -96,18 +99,31 @@ import feedback from '@/utils/feedback'
|
|||
import { apiStoreCategoryLists } from '@/api/store_category'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { apiSystemStoreLists } from '@/api/system_store'
|
||||
import moment from 'moment'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const detailsRef = ref(null)
|
||||
const startEndTime = ref([new Date(), new Date()])
|
||||
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
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',
|
||||
is_all: '',
|
||||
store_id: ''
|
||||
})
|
||||
|
||||
const changeStartEndTime = () => {
|
||||
if (startEndTime.value[0] && startEndTime.value[1]) {
|
||||
queryParams.start_time = moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00'
|
||||
queryParams.end_time = moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59'
|
||||
} else {
|
||||
queryParams.start_time = ''
|
||||
queryParams.end_time = ''
|
||||
}
|
||||
getLists()
|
||||
}
|
||||
const storeloading = ref(false)
|
||||
const storeList = ref([])
|
||||
const remoteMethod = (e = '') => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,316 @@
|
|||
<template>
|
||||
<div class="workbench">
|
||||
<el-card shadow="never" class=" !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">商品概况</span>
|
||||
<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" @change="getData" />
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 4] }">
|
||||
<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 class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">商品趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">商品排行</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime3" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getList" />
|
||||
<el-button type="primary" class="ml-4" @click="getList">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="sotreList">
|
||||
<el-table-column label="商品图片">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.image" fit="cover" style="width: 50px; height: 50px" :preview-teleported="true"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称" prop="store_name" min-width="250" />
|
||||
<el-table-column label="游览量" prop="visit" min-width="120" />
|
||||
<el-table-column label="访客数" prop="user" min-width="120" />
|
||||
<el-table-column label="加购件数" prop="cart" min-width="120" />
|
||||
<el-table-column label="下单件数" prop="orders" min-width="120" />
|
||||
<el-table-column label="支付件数" prop="pay" min-width="120" />
|
||||
<el-table-column label="支付金额" prop="price" min-width="120" />
|
||||
<el-table-column label="收藏数" prop="collect" min-width="120" />
|
||||
<el-table-column label="毛利率(%)" prop="profit" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.profit }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="product">
|
||||
import { apiGetBasic, apiGetTrend, apiGetProductRanking } from '@/api/workbench'
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
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.setDate(1)
|
||||
end.setMonth(end.getMonth() + 1)
|
||||
end.setDate(0)
|
||||
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: 'right',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
position: 'left',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['访问量']
|
||||
},
|
||||
itemStyle: {
|
||||
// 点的颜色。
|
||||
color: 'red'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问量',
|
||||
data: [0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
{
|
||||
name: '商品浏览量',
|
||||
type: 'browse',
|
||||
icon: 'RectangleCopy21',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '商品访客数',
|
||||
type: 'user',
|
||||
icon: 'RectangleCopy5',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '加购件数',
|
||||
type: 'cart',
|
||||
icon: 'RectangleCopy13',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '下单件数',
|
||||
type: 'order',
|
||||
icon: 'RectangleCopy12',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '支付件数',
|
||||
type: 'pay',
|
||||
icon: 'RectangleCopy15',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '支付金额',
|
||||
type: 'payPrice',
|
||||
icon: 'RectangleCopy14',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '成本金额',
|
||||
type: 'cost',
|
||||
icon: 'RectangleCopy24',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '退款金额',
|
||||
type: 'refundPrice',
|
||||
icon: 'RectangleCopy32',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '退款件数',
|
||||
type: 'refund',
|
||||
icon: 'RectangleCopy19',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '访客-支付转化率',
|
||||
type: 'payPercent',
|
||||
icon: 'RectangleCopy4',
|
||||
num: 0,
|
||||
percent: 0
|
||||
}
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
const startEndTime3 = ref([]);
|
||||
// 获取数据
|
||||
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');
|
||||
apiGetBasic({
|
||||
date: date
|
||||
}).then(res => {
|
||||
basicList.forEach((item: any) => {
|
||||
item.num = res[item.type].num;
|
||||
item.percent = res[item.type].percent;
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apiGetTrend({
|
||||
date: date
|
||||
}).then(res => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
|
||||
visitorOption.legend.data = res.series.map((item: any) => item.name);
|
||||
|
||||
// 写入从后台拿来的数据
|
||||
res.xAxis.forEach((item: any) => {
|
||||
visitorOption.xAxis.data.push(item)
|
||||
})
|
||||
visitorOption.series = res.series.map((item: any) => {
|
||||
return {
|
||||
...item,
|
||||
yAxis: item.type == 'line' ? 0 : 1
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const sotreList = ref([]);
|
||||
const getList = () => {
|
||||
let date = '';
|
||||
if (startEndTime3.value[0] && startEndTime3.value[1]) date = moment(startEndTime3.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime3.value[1]).format('YYYY/MM/DD');
|
||||
apiGetProductRanking({
|
||||
date: date
|
||||
}).then(res => {
|
||||
sotreList.value = res;
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
getData2()
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -5,80 +5,74 @@
|
|||
<span class="text-2xl">商品概况</span>
|
||||
<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" @change="getData" />
|
||||
<el-date-picker
|
||||
v-model="startEndTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
unlink-panels
|
||||
:shortcuts="shortcuts"
|
||||
@change="getData"
|
||||
/>
|
||||
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
|
||||
<div
|
||||
class="w-1/5 flex mb-6"
|
||||
v-for="(item, index) in basicList"
|
||||
:key="index"
|
||||
@click="getData2(item)"
|
||||
>
|
||||
<div class="mr-2">
|
||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 4] }">
|
||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
||||
<div class="rounded-full p-2">
|
||||
<el-image style="width: 50px; height: 50px" :src="item.image" />
|
||||
|
||||
<!-- <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 class="text-info">{{ item.store_name }}</div>
|
||||
<div class="">销量:{{ item.cart_num }}{{ item.unit_name }}</div>
|
||||
<div class="">规格:{{ item.store_info }}</div>
|
||||
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||
item.percent }}%</span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@change="changePage"
|
||||
v-if="total > 10"
|
||||
style="margin-right: 56px; margin-bottom: 11px; float: right"
|
||||
/>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">商品趋势</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<!-- <div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getData2" />
|
||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div>
|
||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="mt-4 !border-none">
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<span class="text-2xl">商品排行</span>
|
||||
<div class="flex items-center text-sm">
|
||||
<span class="mr-4">时间筛选: </span>
|
||||
<el-date-picker v-model="startEndTime3" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getList" />
|
||||
<el-button type="primary" class="ml-4" @click="getList">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-table :data="sotreList">
|
||||
<el-table-column label="商品图片">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="row.image" fit="cover" style="width: 50px; height: 50px" :preview-teleported="true"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称" prop="store_name" min-width="250" />
|
||||
<el-table-column label="游览量" prop="visit" min-width="120" />
|
||||
<el-table-column label="访客数" prop="user" min-width="120" />
|
||||
<el-table-column label="加购件数" prop="cart" min-width="120" />
|
||||
<el-table-column label="下单件数" prop="orders" min-width="120" />
|
||||
<el-table-column label="支付件数" prop="pay" min-width="120" />
|
||||
<el-table-column label="支付金额" prop="price" min-width="120" />
|
||||
<el-table-column label="收藏数" prop="collect" min-width="120" />
|
||||
<el-table-column label="毛利率(%)" prop="profit" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.profit }}%</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="product">
|
||||
import { apiGetBasic, apiGetTrend, apiGetProductRanking } from '@/api/workbench'
|
||||
import {
|
||||
store_order_cart_info_curve,
|
||||
apiGetProductRanking,
|
||||
product_month_order
|
||||
} from '@/api/workbench'
|
||||
import moment from 'moment'
|
||||
import vCharts from 'vue-echarts'
|
||||
|
||||
|
|
@ -90,7 +84,7 @@ const shortcuts = [
|
|||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '本月',
|
||||
|
|
@ -101,7 +95,7 @@ const shortcuts = [
|
|||
end.setMonth(end.getMonth() + 1)
|
||||
end.setDate(0)
|
||||
return [start, end]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '近一月',
|
||||
|
|
@ -110,7 +104,7 @@ const shortcuts = [
|
|||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 1)
|
||||
return [start, end]
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '近三月',
|
||||
|
|
@ -119,8 +113,8 @@ const shortcuts = [
|
|||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
// 表单数据
|
||||
|
|
@ -179,108 +173,35 @@ const visitorOption: any = reactive({
|
|||
|
||||
// 颜色
|
||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1']
|
||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
||||
const basicList = reactive([
|
||||
{
|
||||
name: '商品浏览量',
|
||||
type: 'browse',
|
||||
icon: 'RectangleCopy21',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '商品访客数',
|
||||
type: 'user',
|
||||
icon: 'RectangleCopy5',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '加购件数',
|
||||
type: 'cart',
|
||||
icon: 'RectangleCopy13',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '下单件数',
|
||||
type: 'order',
|
||||
icon: 'RectangleCopy12',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '支付件数',
|
||||
type: 'pay',
|
||||
icon: 'RectangleCopy15',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '支付金额',
|
||||
type: 'payPrice',
|
||||
icon: 'RectangleCopy14',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '成本金额',
|
||||
type: 'cost',
|
||||
icon: 'RectangleCopy24',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '退款金额',
|
||||
type: 'refundPrice',
|
||||
icon: 'RectangleCopy32',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '退款件数',
|
||||
type: 'refund',
|
||||
icon: 'RectangleCopy19',
|
||||
num: 0,
|
||||
percent: 0
|
||||
},
|
||||
{
|
||||
name: '访客-支付转化率',
|
||||
type: 'payPercent',
|
||||
icon: 'RectangleCopy4',
|
||||
num: 0,
|
||||
percent: 0
|
||||
}
|
||||
])
|
||||
const startEndTime = ref([new Date(), new Date()]);
|
||||
const startEndTime2 = ref([]);
|
||||
const startEndTime3 = ref([]);
|
||||
const startEndTime = ref([new Date(), new Date()])
|
||||
const basicList = ref([])
|
||||
const total = ref(0)
|
||||
const startEndTime3 = ref([])
|
||||
const queryParams = reactive({
|
||||
product_id: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
page_no: 1,
|
||||
page_size: 10
|
||||
})
|
||||
// 获取数据
|
||||
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');
|
||||
apiGetBasic({
|
||||
date: date
|
||||
}).then(res => {
|
||||
basicList.forEach((item: any) => {
|
||||
item.num = res[item.type].num;
|
||||
item.percent = res[item.type].percent;
|
||||
})
|
||||
product_month_order(queryParams).then((res) => {
|
||||
basicList.value = res.lists
|
||||
total.value = res.count
|
||||
})
|
||||
}
|
||||
|
||||
const getData2 = () => {
|
||||
let date = '';
|
||||
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
|
||||
apiGetTrend({
|
||||
date: date
|
||||
}).then(res => {
|
||||
const changePage = (e) => {
|
||||
queryParams.page_no = e
|
||||
getData()
|
||||
}
|
||||
const getData2 = (item: any) => {
|
||||
queryParams.product_id = item.product_id
|
||||
store_order_cart_info_curve(queryParams).then((res) => {
|
||||
// 清空echarts 数据
|
||||
visitorOption.xAxis.data = []
|
||||
visitorOption.series = []
|
||||
|
||||
visitorOption.legend.data = res.series.map((item: any) => item.name);
|
||||
|
||||
visitorOption.legend.data = res.series.map((item: any) => item.name)
|
||||
// 写入从后台拿来的数据
|
||||
res.xAxis.forEach((item: any) => {
|
||||
visitorOption.xAxis.data.push(item)
|
||||
|
|
@ -290,25 +211,27 @@ const getData2 = () => {
|
|||
...item,
|
||||
yAxis: item.type == 'line' ? 0 : 1
|
||||
}
|
||||
});
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const sotreList = ref([]);
|
||||
const sotreList = ref([])
|
||||
const getList = () => {
|
||||
let date = '';
|
||||
if (startEndTime3.value[0] && startEndTime3.value[1]) date = moment(startEndTime3.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime3.value[1]).format('YYYY/MM/DD');
|
||||
let date = ''
|
||||
if (startEndTime3.value[0] && startEndTime3.value[1])
|
||||
date =
|
||||
moment(startEndTime3.value[0]).format('YYYY/MM/DD') +
|
||||
'-' +
|
||||
moment(startEndTime3.value[1]).format('YYYY/MM/DD')
|
||||
apiGetProductRanking({
|
||||
date: date
|
||||
}).then(res => {
|
||||
sotreList.value = res;
|
||||
}).then((res) => {
|
||||
sotreList.value = res
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
getData2()
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue