From 98b011db3c89d50f6fa452178e68216d87242267 Mon Sep 17 00:00:00 2001
From: mkm <727897186@qq.com>
Date: Sat, 3 Aug 2024 18:04:37 +0800
Subject: [PATCH] 1

---
 .env.development                              |   4 +-
 src/api/workbench.ts                          |   8 +
 .../order/store_order_cart_info/index.vue     |  29 +-
 src/views/statistics/order_product/index.vue  |  28 +-
 src/views/statistics/product/index copy.vue   | 316 ++++++++++++++++++
 src/views/statistics/product/index.vue        | 229 +++++--------
 6 files changed, 446 insertions(+), 168 deletions(-)
 create mode 100644 src/views/statistics/product/index copy.vue

diff --git a/.env.development b/.env.development
index 4dea79e61..7fd25d497 100644
--- a/.env.development
+++ b/.env.development
@@ -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'
 
diff --git a/src/api/workbench.ts b/src/api/workbench.ts
index 99a9e203b..3ccd0a194 100644
--- a/src/api/workbench.ts
+++ b/src/api/workbench.ts
@@ -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 })
+}
diff --git a/src/views/order/store_order_cart_info/index.vue b/src/views/order/store_order_cart_info/index.vue
index e15490846..0b332413f 100644
--- a/src/views/order/store_order_cart_info/index.vue
+++ b/src/views/order/store_order_cart_info/index.vue
@@ -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 = '') => {
diff --git a/src/views/statistics/order_product/index.vue b/src/views/statistics/order_product/index.vue
index cdf699e6c..b02c96bb3 100644
--- a/src/views/statistics/order_product/index.vue
+++ b/src/views/statistics/order_product/index.vue
@@ -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 = '') => {
diff --git a/src/views/statistics/product/index copy.vue b/src/views/statistics/product/index copy.vue
new file mode 100644
index 000000000..39b1baa58
--- /dev/null
+++ b/src/views/statistics/product/index copy.vue	
@@ -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>
diff --git a/src/views/statistics/product/index.vue b/src/views/statistics/product/index.vue
index 39b1baa58..0d41af4ce 100644
--- a/src/views/statistics/product/index.vue
+++ b/src/views/statistics/product/index.vue
@@ -1,84 +1,78 @@
 <template>
     <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">
                 <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>