From 3bf971dca1758a4f990915233c86888754c66873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=8F?= <1978476055@qq.com>
Date: Tue, 9 Jul 2024 18:20:29 +0800
Subject: [PATCH] 1

---
 .env.development                              |   4 +-
 src/api/home.js                               |   6 +
 src/router/index.js                           |   6 +
 .../daily-statistics/components/DayData.vue   | 358 ++++++++++++++++++
 src/views/daily-statistics/index.vue          | 124 ++++++
 src/views/product/productExamine/index.vue    |   1 +
 6 files changed, 497 insertions(+), 2 deletions(-)
 create mode 100644 src/views/daily-statistics/components/DayData.vue
 create mode 100644 src/views/daily-statistics/index.vue

diff --git a/.env.development b/.env.development
index 2d88d40..e47a783 100644
--- a/.env.development
+++ b/.env.development
@@ -3,11 +3,11 @@ ENV = 'development'
 # http://192.168.1.43:8324/admin
 # http://mer.crmeb.net/admin
 # base api
-VUE_APP_BASE_API = 'http://192.168.1.18:8080'
+VUE_APP_BASE_API = 'http://192.168.1.12:8080'
 # VUE_APP_BASE_API = 'https://api.tropjoin.com/'
 
 # socket 连接地址
-VUE_APP_WS_URL = 'ws://http://192.168.1.18:8080'
+VUE_APP_WS_URL = 'ws://http://192.168.1.12:8080'
 # VUE_APP_WS_URL = 'ws://https://api.tropjoin.com/'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
diff --git a/src/api/home.js b/src/api/home.js
index 11528c6..76b7577 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -12,6 +12,12 @@ export function statisticsApi() {
 export function statisticsOrderApi() {
   return request.get('statistics/order')
 }
+/**
+ * @description 每日统计
+ */
+export function statisticsDayApi(data) {
+  return request.get('statistics/day', data)
+}
 /**
  * @description 当日订单数
  */
diff --git a/src/router/index.js b/src/router/index.js
index 9c0e4ff..9e9429d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -72,6 +72,12 @@ export const constantRoutes = [
         component: () => import("@/views/user-consumption/index"),
         name: "user-consumption",
         meta: { title: "用户消费统计" }
+      },
+      {
+        path: `${roterPre}/daily-statistics`,
+        component: () => import("@/views/daily-statistics/index"),
+        name: "daily-statistics",
+        meta: { title: "每日统计" }
       }
     ]
   },
diff --git a/src/views/daily-statistics/components/DayData.vue b/src/views/daily-statistics/components/DayData.vue
new file mode 100644
index 0000000..62d2f4e
--- /dev/null
+++ b/src/views/daily-statistics/components/DayData.vue
@@ -0,0 +1,358 @@
+<template>
+    <div class="box-card statistics">
+        <el-tabs stretch v-model="activeName">
+            <el-tab-pane label="用户分析图" name="first">
+                <echarts-from v-if="activeName=='first'" ref="optionUserData" :option-data="optionUserData" :styles="style" height="100%" width="100%" />
+            </el-tab-pane>
+            <el-tab-pane label="订单数量分析图" name="second">
+                <echarts-from v-if="activeName=='second'" ref="optionOrderData" :option-data="optionOrderData" :styles="style" height="100%" width="100%" />
+            </el-tab-pane>
+            <el-tab-pane label="订单金额分析图" name="third">
+                <echarts-from v-if="activeName=='third'" ref="optionOrderNumber" :option-data="optionOrderNumber" :styles="style" height="100%" width="100%" />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+    </template>
+    
+    <script>
+    import echartsFrom from '@/components/echarts/index'
+    import { roterPre } from '@/settings'
+    export default {
+        name: 'DayData',
+        components: {
+            echartsFrom
+        },
+        props:{
+            tableData: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data() {
+          return {
+            statisticsData: [],
+            roterPre: roterPre,
+            optionUserData:{},
+            optionOrderData:{},
+            optionOrderNumber:{},
+            newUserList:[],
+            order_amount:[],
+            order_coupon:[],
+            refund_amount:[],
+            pay_count:[],
+            order_count:[],
+            userList:[],
+            timer:[],
+            listLoading:true,
+            activeName:'first',
+            style:{
+                height: '360px'
+            }
+          }
+        },
+        watch:{
+            tableData(){
+                this.getList()
+            }
+        },
+        methods: {
+            getLine(newUserList,userList,timer){
+                const seriesData = [
+                        {
+                            name: "新增用户(人)",
+                            type: "line",
+                            stack: "用户量",
+                            itemStyle: {
+                            normal: {
+                                color: "#5AD8A6",
+                                lineStyle: {
+                                color: "#5AD8A6"
+                                }
+                            }
+                            },
+                            data: newUserList,
+                            smooth: false
+                        },
+                        {
+                            name: "累计用户(人)",
+                            type: "line",
+                            stack: "用户量",
+                            yAxisIndex: 1,
+                            itemStyle: {
+                            normal: {
+                                color: "#5B8FF9",
+                                lineStyle: {
+                                color: "#5B8FF9"
+                                }
+                            }
+                            },
+                            data: userList,
+                            smooth: false
+                        }
+                        ];
+                        this.optionUserData = {
+                        tooltip: {
+                            trigger: "axis",
+                            axisPointer: {
+                            type: "cross",
+                            label: {
+                                backgroundColor: "#6a7985"
+                            }
+                            }
+                        },
+                        legend: {
+                            data: ["新增用户(人)", "累计用户(人)"],
+                            orient: "vertical",
+                            x:'right',
+                            y:'center',
+                            align:'left'
+                        },
+                        grid: {
+                            top:'8%',
+                            left: "2%",
+                            right: "8%",
+                            bottom: "3%",
+                            containLabel: true
+                        },
+                        axisLine: {
+                            show: false
+                        },
+                        xAxis: [
+                            {
+                            type: "category",
+                            boundaryGap: false,
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                alignWithLabel: true,
+                                lineStyle: {
+                                color: "#D7DDE4"
+                                }
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                interval: 0,
+                                rotate: 50,
+                                textStyle: {
+                                color: "#7F8B9C"
+                                }
+                            },
+                            data: Array.from(new Set(timer))
+                            }
+                        ],
+                        yAxis: [
+                            {
+                            type: "value",
+                            inverse: false,
+                            },
+                            {
+                            type: "value",
+                            splitLine: {
+                                show: false
+                            }
+                            }
+                        ],
+                            series: seriesData
+                        };
+            },
+            getOrderLine(order_amount,order_coupon,refund_amount,timer){
+                this.optionOrderData = {
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                        }
+                    },
+                    legend: {
+                        data: ['实付订单金额(含运费/元)', '抵扣券使用数量', '退订单退款金额(元)'],
+                        orient: "vertical",
+                            x:'right',
+                            y:'center',
+                            align:'left'
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '12%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: [
+                            {
+                            type: "category",
+                            boundaryGap: false,
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                alignWithLabel: true,
+                                lineStyle: {
+                                color: "#D7DDE4"
+                                }
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                interval: 0,
+                                rotate: 50,
+                                textStyle: {
+                                color: "#7F8B9C"
+                                }
+                            },
+                            data: Array.from(new Set(timer))
+                            }
+                        ],
+                    yAxis: [
+                        {
+                        type: 'value'
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '实付订单金额(含运费/元)',
+                            type: 'line',
+                            stack: 'Total',
+                            areaStyle: {},
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            data: order_amount
+                        },
+                        {
+                            name: '抵扣券使用数量',
+                            type: 'line',
+                            stack: 'Total',
+                            areaStyle: {},
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            data: order_coupon
+                        },
+                        {
+                            name: '退订单退款金额(元)',
+                            type: 'line',
+                            stack: 'Total',
+                            label: {
+                                show: true,
+                                position: 'top'
+                            },
+                            areaStyle: {},
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            data: refund_amount
+                        }
+                    ]
+                    };
+            },
+            getBar(order_count,pay_count,timer){
+                this.optionOrderNumber = {
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                        type: 'cross',
+                        label: {
+                            backgroundColor: '#6a7985'
+                        }
+                        }
+                    },
+                    legend: {
+                        data: ['支付人数(人)', '支付订单数(单)'],
+                        orient: "vertical",
+                            x:'right',
+                            y:'center',
+                            align:'left'
+                    },
+                    xAxis: [
+                            {
+                            type: "category",
+                            boundaryGap: false,
+                            axisLine: {
+                                show: false
+                            },
+                            axisTick: {
+                                alignWithLabel: true,
+                                lineStyle: {
+                                color: "#D7DDE4"
+                                }
+                            },
+                            splitLine: {
+                                show: false
+                            },
+                            axisLabel: {
+                                interval: 0,
+                                rotate: 50,
+                                textStyle: {
+                                color: "#7F8B9C"
+                                }
+                            },
+                            data: Array.from(new Set(timer))
+                            }
+                        ],
+                    yAxis: [
+                        {
+                        type: 'value'
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '支付人数(人)',
+                            type: 'bar',
+                            barGap: 0,
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            data: order_count
+                        },
+                        {
+                            name: '支付订单数(单)',
+                            type: 'bar',
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            data: pay_count
+                        }
+                        ]
+                    }
+            },
+            getList(){
+                this.newUserList= []
+                this.userList= []
+                this.timer= []
+                this.order_coupon= []
+                this.refund_amount= []
+                this.order_count= []
+                this.pay_count= []
+                this.order_amount = []//订单金额
+                this.tableData.map(item => {
+                    this.newUserList.push(item.reg_count);
+                    this.userList.push(item.user_count);
+                    this.timer.push(item.date);
+                    this.order_amount.push(item.order_amount) //订单金额
+                    this.order_coupon.push(item.order_coupon) //优惠券
+                    this.refund_amount.push(item.refund_amount) //退款
+                    this.order_count.push(item.order_count)
+                    this.pay_count.push(item.pay_count)
+                });
+                this.getLine(this.newUserList,this.userList,this.timer);
+                this.getOrderLine(this.order_amount,this.order_coupon,this.refund_amount,this.timer);
+                this.getBar(this.order_count,this.pay_count,this.timer)
+            }
+        }
+    }
+    </script>
+    
+    <style lang="scss" scoped>
+    .statistics {
+      min-width: 700px;
+      margin-top: 0;
+      background: #fff;
+    }
+    </style>
+    
\ No newline at end of file
diff --git a/src/views/daily-statistics/index.vue b/src/views/daily-statistics/index.vue
new file mode 100644
index 0000000..bc3bc10
--- /dev/null
+++ b/src/views/daily-statistics/index.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="divBox" style="background: #F0F2F5;">
+    <DayData :tableData="tableData.data" class="mb15" />
+    <el-card>
+        <el-form size="small" inline :model="tableFrom" ref="searchForm" label-width="85px">
+        <el-form-item label="时间选择：">
+          <el-date-picker
+            v-model="timeVal"
+            value-format="yyyy/MM/dd"
+            format="yyyy/MM/dd"
+            size="small"
+            type="daterange"
+            placement="bottom-end"
+            placeholder="自定义时间"
+            style="width: 280px;"
+            :picker-options="pickerOptions"
+            @change="onchangeTime"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="getList(1)">搜索</el-button>
+          <el-button size="small" @click="searchReset()">重置</el-button> 
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="listLoading"
+        :data="tableData.data"
+        size="small"
+        class="table"
+        align="center"
+      >
+        <el-table-column label="id" min-width="130" prop="id"></el-table-column>
+        <el-table-column label="新增用户(人)" min-width="130" prop="reg_count"></el-table-column>
+        <el-table-column label="累计用户(人)" min-width="130" prop="user_count"></el-table-column>
+        <el-table-column label="支付人数(人)" min-width="130" prop="pay_count"></el-table-column>
+        <el-table-column label="支付订单数(单)" min-width="130" prop="order_count"></el-table-column>
+        <el-table-column label="实付订单金额(含运费/元)" min-width="130" prop="order_amount"></el-table-column>
+        <el-table-column label="抵扣券使用数量" min-width="130" prop="order_coupon"></el-table-column>
+        <el-table-column label="退订单退款金额(元)" min-width="130" prop="refund_amount"></el-table-column>
+      </el-table>
+      <div class="block">
+        <el-pagination
+          background
+          :page-size="tableFrom.limit"
+          :current-page="tableFrom.page"
+          layout="total, prev, pager, next, jumper"
+          :total="tableData.total"
+          @size-change="handleSizeChange"
+          @current-change="pageChange"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import DayData from './components/DayData'
+import {statisticsDayApi} from '@/api/home'
+import timeOptions from '@/utils/timeOptions';
+export default {
+    name: 'dailyStatistics',
+    components: { DayData },
+    data() {
+        return {
+            listLoading: true,
+            timeVal: [],
+            pickerOptions: timeOptions,
+            tableData:{},
+            tableFrom: {
+                date: "",
+                page: 1,
+                limit: 30,
+            }
+        }
+    },
+    mounted() {
+        this.getList()
+    },
+    methods: {
+            // 具体日期
+        onchangeTime(e) {
+        this.timeVal = e;
+        console.log(e);
+        this.tableFrom.date = e ? this.timeVal.join("-") : "";
+        this.tableFrom.page = 1;
+        this.getList(1);
+        },
+            /**重置 */
+        searchReset(){
+            this.timeVal = []
+            this.tableFrom.date = ""
+            this.$refs.searchForm.resetFields()
+            this.getList(1)
+        },
+        // 列表
+        getList(num) {
+            this.listLoading = true;
+            this.tableFrom.page = num ? num : this.tableFrom.page;
+            statisticsDayApi(this.tableFrom)
+                .then((res) => {
+                this.tableData.data = res.data.list;
+                this.tableData.total = res.data.count;
+                this.listLoading = false;
+                })
+                .catch((res) => {
+                this.$message.error(res.message);
+                this.listLoading = false;
+                });
+        },
+        pageChange(page) {
+            this.tableFrom.page = page;
+            this.getList('');
+        },
+        handleSizeChange(val) {
+            this.tableFrom.limit = val;
+            this.getList('');
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/product/productExamine/index.vue b/src/views/product/productExamine/index.vue
index 88fe3a5..bba41f5 100644
--- a/src/views/product/productExamine/index.vue
+++ b/src/views/product/productExamine/index.vue
@@ -434,6 +434,7 @@
         </el-table-column>
         <el-table-column prop="rank" label="排序" min-width="60" />
         <el-table-column prop="sales" label="销量" min-width="70" />
+        <el-table-column prop="browse" label="浏览量" min-width="70" />
         <el-table-column prop="stock" label="库存" min-width="70" />
         <el-table-column key="8" label="操作" min-width="260" fixed="right">
           <template slot-scope="scope">