Merge pull request '完成pc端首页数据统计接口和页面的开发' (#73) from Brunch_LPQ into main

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/controller/UserOrderController.java

@@ -5,21 +5,20 @@ import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.itmk.utils.ResultUtils;
 import com.itmk.utils.ResultVo;
-import com.itmk.web.order.entity.OrderParm;
+import com.itmk.web.order.entity.*;
-import com.itmk.web.order.entity.SendParm;
-import com.itmk.web.order.entity.UserOrder;
-import com.itmk.web.order.entity.WxOrderParm;
 import com.itmk.web.order.service.UserOrderService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.List;
+
 @RestController
 @RequestMapping("/wxapi/order")
 public class UserOrderController {
     @Autowired
     private UserOrderService userOrderService;
 
-    //下单
+    //下的
     @PostMapping("/splaceOrder")
     public ResultVo splaceOrder(@RequestBody OrderParm parm){
         userOrderService.splaceOrder(parm);
@@ -33,7 +32,7 @@ public class UserOrderController {
         return ResultUtils.success("查询成功!",orderList);
     }
 
-    //pc端查询订单
+    //查询pc订单
     @GetMapping("/getPcOrderList")
     public ResultVo getPcOrderList(WxOrderParm parm){
         IPage<UserOrder> orderList = userOrderService.getPcOrderList(parm);
@@ -59,7 +58,6 @@ public class UserOrderController {
         }
         return ResultUtils.error("更新失败!");
     }
-
     //取消订单
     @PostMapping("/cancelOrder")
     public ResultVo cancelOrder(@RequestBody SendParm parm){
@@ -79,4 +77,27 @@ public class UserOrderController {
         }
         return ResultUtils.error("取消失败!");
     }
+    //首页统计 0:日 1：月 2：年
+    @GetMapping("/getTotal")
+    public ResultVo getTotal(String type){
+        List<SunList> list = null;
+        switch (type){
+            case "1":
+                list = userOrderService.getMonths();
+                break;
+            case "2":
+                list = userOrderService.getYears();
+                break;
+            default:
+                list = userOrderService.getDays();
+        }
+        Echarts echarts = new Echarts();
+        if(list!= null && list.size() >0){
+            for (int i=0;i<list.size();i++){
+                echarts.getNames().add(list.get(i).getDays());
+                echarts.getValues().add(list.get(i).getPrice());
+            }
+        }
+        return ResultUtils.success("查询成功",echarts);
+    }
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/entity/Echarts.java

@@ -0,0 +1,13 @@
+package com.itmk.web.order.entity;
+
+import lombok.Data;
+
+import java.math.BigDecimal;
+import java.util.ArrayList;
+import java.util.List;
+
+@Data
+public class Echarts {
+    private List<String> names = new ArrayList<>();
+    private List<BigDecimal> values = new ArrayList<>();
+}

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/entity/SunList.java

@@ -0,0 +1,11 @@
+package com.itmk.web.order.entity;
+
+import lombok.Data;
+
+import java.math.BigDecimal;
+
+@Data
+public class SunList {
+    private String days;
+    private BigDecimal price;
+}

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/mapper/UserOrderMapper.java

@@ -1,7 +1,16 @@
 package com.itmk.web.order.mapper;
 
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.itmk.web.order.entity.SunList;
 import com.itmk.web.order.entity.UserOrder;
 
+import java.util.List;
+
 public interface UserOrderMapper extends BaseMapper<UserOrder> {
+    //按天查询
+    List<SunList> getDays();
+    //按月查询
+    List<SunList> getMonths();
+    //按年查询
+    List<SunList> getYears();
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/service/UserOrderService.java

@@ -3,13 +3,20 @@ package com.itmk.web.order.service;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.itmk.web.order.entity.OrderParm;
+import com.itmk.web.order.entity.SunList;
 import com.itmk.web.order.entity.UserOrder;
 import com.itmk.web.order.entity.WxOrderParm;
 
+import java.util.List;
+
 public interface UserOrderService extends IService<UserOrder> {
     void splaceOrder(OrderParm parm);
-
     IPage<UserOrder> getOrderList(WxOrderParm parm);
-
     IPage<UserOrder> getPcOrderList(WxOrderParm parm);
+    //按天查询
+    List<SunList> getDays();
+    //按月查询
+    List<SunList> getMonths();
+    //按年查询
+    List<SunList> getYears();
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/order/service/impl/UserOrderServiceImpl.java

@@ -5,10 +5,7 @@ import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.core.toolkit.StringUtils;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
-import com.itmk.web.order.entity.OrderParm;
+import com.itmk.web.order.entity.*;
-import com.itmk.web.order.entity.ParmDetail;
-import com.itmk.web.order.entity.UserOrder;
-import com.itmk.web.order.entity.WxOrderParm;
 import com.itmk.web.order.mapper.UserOrderMapper;
 import com.itmk.web.order.service.UserOrderService;
 import com.itmk.web.order_detail.entity.UserOrderDetail;
@@ -57,7 +54,8 @@ public class UserOrderServiceImpl extends ServiceImpl<UserOrderMapper, UserOrder
         //查询条件
         QueryWrapper<UserOrder> query = new QueryWrapper<>();
         query.lambda().eq(UserOrder::getOpenid,parm.getOpenid())
-                .eq(StringUtils.isNotEmpty(parm.getType()),UserOrder::getStatus,parm.getType());
+                .eq(StringUtils.isNotEmpty(parm.getType()),UserOrder::getStatus,parm.getType())
+                .orderByDesc(UserOrder::getCreateTime);
         //构造分页对象
         IPage<UserOrder> page = new Page<>(parm.getCurrentPage(),parm.getPageSize());
         //查询订单主表
@@ -77,23 +75,40 @@ public class UserOrderServiceImpl extends ServiceImpl<UserOrderMapper, UserOrder
 
     @Override
     public IPage<UserOrder> getPcOrderList(WxOrderParm parm) {
-        //查询订单
+        //查询条件
         QueryWrapper<UserOrder> query = new QueryWrapper<>();
-        query.lambda().like(StringUtils.isNotEmpty(parm.getUserName()),UserOrder::getUserName,parm.getUserName())
+        query.lambda().eq(StringUtils.isNotEmpty(parm.getType()),UserOrder::getStatus,parm.getType())
-                .eq(StringUtils.isNotEmpty(parm.getType()),UserOrder::getStatus,parm.getType())
+                .like(StringUtils.isNotEmpty(parm.getUserName()),UserOrder::getUserName,parm.getUserName())
                 .orderByDesc(UserOrder::getCreateTime);
+        //构造分页对象
         IPage<UserOrder> page = new Page<>(parm.getCurrentPage(),parm.getPageSize());
+        //查询订单主表
         IPage<UserOrder> order = this.baseMapper.selectPage(page, query);
-        //有数据，查询子订单
+        //查询子表
-        if(order.getRecords().size()>0){
+        if(order.getRecords().size() > 0){
-            for (int i = 0;i<order.getRecords().size();i++){
+            for(int i=0;i<order.getRecords().size();i++){
                 QueryWrapper<UserOrderDetail> queryWrapper = new QueryWrapper<>();
                 queryWrapper.lambda().eq(UserOrderDetail::getOrderId,order.getRecords().get(i).getOrderId());
                 List<UserOrderDetail> list = userOrderDetailService.list(queryWrapper);
+                //设置订单对应的商品
                 order.getRecords().get(i).setGoodsList(list);
             }
-
         }
         return order;
     }
+
+    @Override
+    public List<SunList> getDays() {
+        return this.baseMapper.getDays();
+    }
+
+    @Override
+    public List<SunList> getMonths() {
+        return this.baseMapper.getMonths();
+    }
+
+    @Override
+    public List<SunList> getYears() {
+        return this.baseMapper.getYears();
+    }
 }

api-interface/itmk-base-parent/itmk-base-web/src/main/resources/mapper/UserOrderMapper.xml

@@ -3,5 +3,13 @@
         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 
 <mapper namespace="com.itmk.web.user_order.mapper.UserOrderMapper">
+    <select id="getDays" resultType="com.itmk.web.user_order.entity.SunList">
+        select DATE_FORMAT(create_time,'%Y-%m-%d')days,sum(price)price  from user_order where `status` = '2' group by days order by days asc
+    </select>
+    <select id="getMonths" resultType="com.itmk.web.user_order.entity.SunList">
+        select DATE_FORMAT(create_time,'%Y-%m')days,sum(price)price  from user_order where `status` = '2' group by days order by days asc
+    </select><select id="getYears" resultType="com.itmk.web.user_order.entity.SunList">
+    select DATE_FORMAT(create_time,'%Y')days,sum(price)price  from user_order where `status` = '2' group by days order by days asc
+</select>
 
 </mapper>

order-system/src/api/order/index.ts

@@ -8,4 +8,9 @@ export const gePcOrdertListApi = (parm: OrderListParm) => {
 // 发货
 export const sendOrderApi = (orderId: string) => {
   return http.put("/wxapi/order/sendOrder", { orderId: orderId })
+}
+
+//统计
+export const getTotalApi = (type:string)=>{
+    return http.get("/wxapi/order/getTotal",{type:type})
 }

order-system/src/main.ts

@@ -35,3 +35,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // 全局注册消息弹出框组件
 app.config.globalProperties.$myconfirm = myConfirm
 
+//echarts
+import * as echarts from 'echarts'
+
+app.config.globalProperties.$echarts = echarts;

order-system/src/views/dashboard/Index.vue

@@ -1,33 +1,165 @@
 <template>
-  <div>
+  <el-form style="margin: 20px 0px" label-width="80px" size="default">
-    首页面
+    <el-form-item>
-    <!-- <el-button type="primary" size="default" @click="onShow('测试')">测试弹框组件</el-button> -->
+      <el-button style="padding: 0px 50px" @click="charts('0')">日统计</el-button>
-    
+      <el-button @click="charts('1')" style="padding: 0px 50px" type="primary" plain>月统计</el-button>
-  </div>
+      <el-button @click="charts('2')" style="padding: 0px 50px" type="success" plain>年统计</el-button>
-  <SysDialog
+    </el-form-item>
-  :title="dialog.title"
+  </el-form>
-  :visible="dialog.visible"
+  <div ref="myChart" :style="{ width: '100%', height: '400px' }"></div>
-  :width="dialog.width"
+  <div ref="myChart1" :style="{ width: '100%', height: '350px' }"></div>
-  :height="dialog.height"
-  @onClose="onClose"
-  @onConfirm="onConfirm"
-  >
-    <!-- 使用弹框组件，在插槽中传递值 -->
-    <template #content>
-      测试弹框组件
-    </template>
-  </SysDialog>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
-  import SysDialog from '@/components/SysDialog.vue';
+import { onMounted, reactive, ref } from "vue";
-
+import useInstance from "@/hooks/useInstance";
-  // import { reactive } from 'vue';
+import { getTotalApi } from '../../api/order/index'
-  import useDialog from '@/hooks/useDialog';
+const { global } = useInstance();
-  const { dialog,onClose,onConfirm,onShow } = useDialog()
+const myChart = ref<HTMLElement>();
+const myChart1 = ref<HTMLElement>();
 
+//柱状图
+const charts = async (type: string) => {
+  const echartInstance = global.$echarts.init(myChart.value);
+  const echartInstance1 = global.$echarts.init(myChart1.value);
+  let option = reactive({
+    title: {
+      text: "直方图",
+    },
+    xAxis: {
+      type: "category",
+      data: [],
+      axisLabel: {
+        //x轴文字的配置
+        show: true,
+        interval: 0, //使x轴文字显示全
+      },
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: [],
+        type: "bar",
+        itemStyle: {
+          normal: {
+            //这里是颜色
+            color: function (params: any) {
+              //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
+              var colorList = [
+                "#00A3E0",
+                "#FFA100",
+                "#ffc0cb",
+                "#CCCCCC",
+                "#BBFFAA",
+                "#749f83",
+                "#ca8622",
+                "#00A3E0",
+                "#FFA100",
+                "#ffc0cb",
+                "#CCCCCC",
+                "#BBFFAA",
+                "#749f83",
+                "#ca8622",
+                "#00A3E0",
+                "#FFA100",
+                "#ffc0cb",
+                "#CCCCCC",
+                "#BBFFAA",
+                "#749f83",
+                "#ca8622",
+                "#00A3E0",
+                "#FFA100",
+                "#ffc0cb",
+                "#CCCCCC",
+                "#BBFFAA",
+                "#749f83",
+                "#ca8622",
+                "#00A3E0",
+                "#FFA100",
+                "#ffc0cb",
+                "#CCCCCC",
+                "#BBFFAA",
+                "#749f83",
+                "#ca8622",
+                "#00A3E0",
+                "#FFA100",
+                "#ffc0cb",
+                "#CCCCCC",
+                "#BBFFAA",
+                "#749f83",
+                "#ca8622",
+              ];
+              return colorList[params.dataIndex];
+            },
+          },
+        },
+      },
+    ],
+    tooltip: {
+      // 鼠标悬浮提示框显示 X和Y 轴数据
+      trigger: "axis",
+      backgroundColor: "rgba(32, 33, 36,.7)",
+      borderColor: "rgba(32, 33, 36,0.20)",
+      borderWidth: 1,
+      textStyle: {
+        // 文字提示样式
+        color: "#fff",
+        fontSize: "12",
+      },
+    },
+  });
+  let option1 = reactive({
+    title: {
+      text: "折线图",
+    },
+    xAxis: {
+      type: "category",
+      data: [],
+      axisLabel: {
+        //x轴文字的配置
+        show: true,
+        interval: 0, //使x轴文字显示全
+      },
+    },
+    yAxis: {
+      type: "value",
+    },
+    series: [
+      {
+        data: [],
+        type: "line",
+      },
+    ],
+    tooltip: {
+      // 鼠标悬浮提示框显示 X和Y 轴数据
+      trigger: "axis",
+      backgroundColor: "rgba(32, 33, 36,.7)",
+      borderColor: "rgba(32, 33, 36,0.20)",
+      borderWidth: 1,
+      textStyle: {
+        // 文字提示样式
+        color: "#fff",
+        fontSize: "12",
+      },
+    },
+  });
+  //动态获取数据
+  let res = await getTotalApi(type)
+  if (res && res.data) {
+    console.log(res)
+    option.xAxis.data = res.data.names
+    option.series[0].data = res.data.values
+    option1.xAxis.data = res.data.names
+    option1.series[0].data = res.data.values
+  }
+  echartInstance.setOption(option);
+  echartInstance1.setOption(option1);
+};
+onMounted(() => {
+  charts('0');
+});
 </script>
 
-<style scoped>
+<style lang="scss" scoped></style>
-
-</style>