This commit is contained in:
parent
7a9dc2ef79
commit
98b011db3c
|
@ -2,9 +2,9 @@ NODE_ENV = 'development'
|
||||||
VITE_NOW_TYPE = 'dist'
|
VITE_NOW_TYPE = 'dist'
|
||||||
|
|
||||||
# Base API
|
# 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://test-multi-store.lihaink.cn'
|
||||||
# VITE_APP_BASE_URL='https://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'
|
# 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) {
|
export function product_order(params: any) {
|
||||||
return request.get({ url: '/workbench/product_order', params })
|
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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="" prop="create_time">
|
<el-form-item label="" prop="create_time">
|
||||||
<daterange-picker
|
<el-date-picker
|
||||||
v-model:startTime="queryParams.start_time"
|
v-model="startEndTime"
|
||||||
v-model:endTime="queryParams.end_time"
|
|
||||||
type="daterange"
|
type="daterange"
|
||||||
@change="resetPage"
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
unlink-panels
|
||||||
|
@change="changeStartEndTime"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
|
@ -135,18 +138,30 @@ import feedback from '@/utils/feedback'
|
||||||
import { apiStoreCategoryLists } from '@/api/store_category'
|
import { apiStoreCategoryLists } from '@/api/store_category'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { apiSystemStoreLists } from '@/api/system_store'
|
import { apiSystemStoreLists } from '@/api/system_store'
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const detailsRef = ref(null)
|
const detailsRef = ref(null)
|
||||||
|
const startEndTime = ref([new Date(), new Date()])
|
||||||
|
|
||||||
// 查询条件
|
// 查询条件
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
start_time: '',
|
start_time: moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00',
|
||||||
end_time: '',
|
end_time: moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59',
|
||||||
is_group: '',
|
is_group: '',
|
||||||
store_id: ''
|
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 storeloading = ref(false)
|
||||||
const storeList = ref([])
|
const storeList = ref([])
|
||||||
const remoteMethod = (e = '') => {
|
const remoteMethod = (e = '') => {
|
||||||
|
|
|
@ -3,11 +3,14 @@
|
||||||
<el-card class="!border-none mb-4" shadow="never">
|
<el-card class="!border-none mb-4" shadow="never">
|
||||||
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||||
<el-form-item label="" prop="create_time">
|
<el-form-item label="" prop="create_time">
|
||||||
<daterange-picker
|
<el-date-picker
|
||||||
v-model:startTime="queryParams.start_time"
|
v-model="startEndTime"
|
||||||
v-model:endTime="queryParams.end_time"
|
|
||||||
type="daterange"
|
type="daterange"
|
||||||
@change="resetPage"
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
unlink-panels
|
||||||
|
@change="changeStartEndTime"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
|
@ -96,18 +99,31 @@ import feedback from '@/utils/feedback'
|
||||||
import { apiStoreCategoryLists } from '@/api/store_category'
|
import { apiStoreCategoryLists } from '@/api/store_category'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { apiSystemStoreLists } from '@/api/system_store'
|
import { apiSystemStoreLists } from '@/api/system_store'
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const detailsRef = ref(null)
|
const detailsRef = ref(null)
|
||||||
|
const startEndTime = ref([new Date(), new Date()])
|
||||||
|
|
||||||
// 查询条件
|
// 查询条件
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
start_time: '',
|
start_time: moment(startEndTime.value[0]).format('YYYY-MM-DD') + ' 00:00:00',
|
||||||
end_time: '',
|
end_time: moment(startEndTime.value[1]).format('YYYY-MM-DD') + ' 23:59:59',
|
||||||
is_all: '',
|
is_all: '',
|
||||||
store_id: ''
|
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 storeloading = ref(false)
|
||||||
const storeList = ref([])
|
const storeList = ref([])
|
||||||
const remoteMethod = (e = '') => {
|
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>
|
|
@ -1,84 +1,78 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="workbench">
|
<div class="workbench">
|
||||||
<el-card shadow="never" class=" !border-none">
|
<el-card shadow="never" class="!border-none">
|
||||||
<div class="mb-6 flex justify-between items-center">
|
<div class="mb-6 flex justify-between items-center">
|
||||||
<span class="text-2xl">商品概况</span>
|
<span class="text-2xl">商品概况</span>
|
||||||
<div class="flex items-center text-sm">
|
<div class="flex items-center text-sm">
|
||||||
<span class="mr-4">时间筛选: </span>
|
<span class="mr-4">时间筛选: </span>
|
||||||
<el-date-picker v-model="startEndTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
<el-date-picker
|
||||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getData" />
|
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>
|
<el-button type="primary" class="ml-4" @click="getData">查询</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap">
|
<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="mr-2">
|
||||||
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 4] }">
|
<div class="rounded-full p-2">
|
||||||
<iconfont :iconName="item.icon" white className="text-6xl" />
|
<el-image style="width: 50px; height: 50px" :src="item.image" />
|
||||||
|
|
||||||
|
<!-- <iconfont :iconName="item.icon" white className="text-6xl" /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="text-info">{{ item.name }}</div>
|
<div class="text-info">{{ item.store_name }}</div>
|
||||||
<div class="text-6xl">{{ item.num }}</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'">{{
|
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
|
||||||
item.percent }}%</span></div> -->
|
item.percent }}%</span></div> -->
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<el-card shadow="never" class="mt-4 !border-none">
|
<el-card shadow="never" class="mt-4 !border-none">
|
||||||
<div class="mb-6 flex justify-between items-center">
|
<div class="mb-6 flex justify-between items-center">
|
||||||
<span class="text-2xl">商品趋势</span>
|
<span class="text-2xl">商品趋势</span>
|
||||||
<div class="flex items-center text-sm">
|
<!-- <div class="flex items-center text-sm">
|
||||||
<span class="mr-4">时间筛选: </span>
|
<span class="mr-4">时间筛选: </span>
|
||||||
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
|
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||||
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getData2" />
|
end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts" @change="getData2" />
|
||||||
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="product">
|
<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 moment from 'moment'
|
||||||
import vCharts from 'vue-echarts'
|
import vCharts from 'vue-echarts'
|
||||||
|
|
||||||
|
@ -90,7 +84,7 @@ const shortcuts = [
|
||||||
const start = new Date()
|
const start = new Date()
|
||||||
start.setDate(start.getDate() - 7)
|
start.setDate(start.getDate() - 7)
|
||||||
return [start, end]
|
return [start, end]
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '本月',
|
text: '本月',
|
||||||
|
@ -101,7 +95,7 @@ const shortcuts = [
|
||||||
end.setMonth(end.getMonth() + 1)
|
end.setMonth(end.getMonth() + 1)
|
||||||
end.setDate(0)
|
end.setDate(0)
|
||||||
return [start, end]
|
return [start, end]
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '近一月',
|
text: '近一月',
|
||||||
|
@ -110,7 +104,7 @@ const shortcuts = [
|
||||||
const start = new Date()
|
const start = new Date()
|
||||||
start.setMonth(start.getMonth() - 1)
|
start.setMonth(start.getMonth() - 1)
|
||||||
return [start, end]
|
return [start, end]
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '近三月',
|
text: '近三月',
|
||||||
|
@ -119,8 +113,8 @@ const shortcuts = [
|
||||||
const start = new Date()
|
const start = new Date()
|
||||||
start.setMonth(start.getMonth() - 3)
|
start.setMonth(start.getMonth() - 3)
|
||||||
return [start, end]
|
return [start, end]
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
|
@ -179,108 +173,35 @@ const visitorOption: any = reactive({
|
||||||
|
|
||||||
// 颜色
|
// 颜色
|
||||||
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1']
|
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1']
|
||||||
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
|
const startEndTime = ref([new Date(), new Date()])
|
||||||
const basicList = reactive([
|
const basicList = ref([])
|
||||||
{
|
const total = ref(0)
|
||||||
name: '商品浏览量',
|
const startEndTime3 = ref([])
|
||||||
type: 'browse',
|
const queryParams = reactive({
|
||||||
icon: 'RectangleCopy21',
|
product_id: '',
|
||||||
num: 0,
|
start_time: '',
|
||||||
percent: 0
|
end_time: '',
|
||||||
},
|
page_no: 1,
|
||||||
{
|
page_size: 10
|
||||||
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 = () => {
|
const getData = () => {
|
||||||
let date = '';
|
product_month_order(queryParams).then((res) => {
|
||||||
if (startEndTime.value[0] && startEndTime.value[1]) date = moment(startEndTime.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime.value[1]).format('YYYY/MM/DD');
|
basicList.value = res.lists
|
||||||
apiGetBasic({
|
total.value = res.count
|
||||||
date: date
|
|
||||||
}).then(res => {
|
|
||||||
basicList.forEach((item: any) => {
|
|
||||||
item.num = res[item.type].num;
|
|
||||||
item.percent = res[item.type].percent;
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const changePage = (e) => {
|
||||||
const getData2 = () => {
|
queryParams.page_no = e
|
||||||
let date = '';
|
getData()
|
||||||
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({
|
const getData2 = (item: any) => {
|
||||||
date: date
|
queryParams.product_id = item.product_id
|
||||||
}).then(res => {
|
store_order_cart_info_curve(queryParams).then((res) => {
|
||||||
// 清空echarts 数据
|
// 清空echarts 数据
|
||||||
visitorOption.xAxis.data = []
|
visitorOption.xAxis.data = []
|
||||||
visitorOption.series = []
|
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) => {
|
res.xAxis.forEach((item: any) => {
|
||||||
visitorOption.xAxis.data.push(item)
|
visitorOption.xAxis.data.push(item)
|
||||||
|
@ -290,25 +211,27 @@ const getData2 = () => {
|
||||||
...item,
|
...item,
|
||||||
yAxis: item.type == 'line' ? 0 : 1
|
yAxis: item.type == 'line' ? 0 : 1
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const sotreList = ref([]);
|
const sotreList = ref([])
|
||||||
const getList = () => {
|
const getList = () => {
|
||||||
let date = '';
|
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');
|
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({
|
apiGetProductRanking({
|
||||||
date: date
|
date: date
|
||||||
}).then(res => {
|
}).then((res) => {
|
||||||
sotreList.value = res;
|
sotreList.value = res
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getData()
|
getData()
|
||||||
getData2()
|
|
||||||
getList()
|
getList()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue