首页统计接口对接和页面修改

src/api/dashboard/analysis/index.js

@@ -1,54 +0,0 @@
-import request from '@/utils/request';
-
-/**
- * 获取支付笔数数据
- */
-export async function getPayNumList() {
-  const res = await request.get(
-    'https://cdn.eleadmin.com/20200610/analysis-pay-num.json'
-  );
-  if (res.data.code === 0 && res.data.data) {
-    return res.data.data;
-  }
-  return Promise.reject(new Error(res.data.message));
-}
-
-/**
- * 获取销售量数据
- */
-export async function getSaleroomList() {
-  const res = await request.get(
-    'https://cdn.eleadmin.com/20200610/analysis-saleroom.json'
-  );
-  if (res.data.code === 0 && res.data.data) {
-    return res.data.data;
-  }
-  return Promise.reject(new Error(res.data.message));
-}
-
-/**
- * 获取最近 1 小时访问情况数据
- * @returns {Promise<Object>}
- */
-export async function getVisitHourList() {
-  const res = await request.get(
-    'https://cdn.eleadmin.com/20200610/analysis-visits.json'
-  );
-  if (res.data.code === 0 && res.data.data) {
-    return res.data.data;
-  }
-  return Promise.reject(new Error(res.data.message));
-}
-
-/**
- * 获取词云数据
- */
-export async function getWordCloudList() {
-  const res = await request.get(
-    'https://cdn.eleadmin.com/20200610/analysis-hot-search.json'
-  );
-  if (res.data.code === 0 && res.data.data) {
-    return res.data.data;
-  }
-  return Promise.reject(new Error(res.data.message));
-}

src/views/index/components/goods-stat.vue

@@ -6,7 +6,7 @@
           <el-icon size="40" color="#E6A23C"><SoldOut /></el-icon>
           <div class="flex flex-col ml-6">
             <div class="text-lg text-theme">待发货订单</div>
-            <div class="text-3xl text-theme">1245</div>
+            <div class="text-3xl text-theme">{{ detail?.waitSendOrderNum || 0 }}</div>
           </div>
         </div>
       </el-col>
@@ -15,7 +15,7 @@
           <el-icon size="40" color="#F56C6C"><Wallet /></el-icon>
           <div class="flex flex-col ml-6">
             <div class="text-lg text-theme">退款待审核</div>
-            <div class="text-3xl text-theme">1245</div>
+            <div class="text-3xl text-theme">{{ detail?.waitRefundOrderNum || 0 }}</div>
           </div>
         </div>
       </el-col>
@@ -24,7 +24,7 @@
           <el-icon size="40" color="#409EFF"><ChatDotSquare /></el-icon>
           <div class="flex flex-col ml-6">
             <div class="text-lg text-theme">待处理工单</div>
-            <div class="text-3xl text-theme">1245</div>
+            <div class="text-3xl text-theme">{{ detail?.waitHandleWorkOrderNum || 0 }}</div>
           </div>
         </div>
       </el-col>
@@ -34,4 +34,11 @@
 
 <script setup>
   import { SoldOut, Wallet, ChatDotSquare } from '@element-plus/icons-vue';
+
+  defineProps({
+    detail: {
+      type: Object,
+      default: () => ({})
+    }
+  });
 </script>

src/views/index/components/order-stat.vue

@@ -4,21 +4,21 @@
       <el-col :span="8">
         <div class="flex justify-center items-center mb-5 border-b">
           <div class="flex items-center flex-col flex-1 pb-6">
-            <div class="text-2xl text-theme">0</div>
+            <div class="text-2xl text-theme">{{ detail?.waitFirstCheckOrderNum || 0 }}</div>
             <div class="text-base text-theme">待初审订单</div>
           </div>
           <div class="flex items-center flex-col flex-1 border-l">
-            <div class="text-2xl text-theme">6</div>
+            <div class="text-2xl text-theme">{{ detail?.waitReceiveOrderNum || 0 }}</div>
             <div class="text-base text-theme">待收货订单</div>
           </div>
         </div>
         <div class="flex justify-center items-center">
           <div class="flex items-center flex-col flex-1">
-            <div class="text-2xl text-theme">1245</div>
+            <div class="text-2xl text-theme">{{ detail?.waitCheckOrderNum || 0 }}</div>
             <div class="text-base text-theme">待审核订单</div>
           </div>
           <div class="flex items-center flex-col flex-1 border-l">
-            <div class="text-2xl text-theme">1245</div>
+            <div class="text-2xl text-theme">{{ detail?.waitPayOrderNum || 0 }}</div>
             <div class="text-base text-theme">待付款订单</div>
           </div>
         </div>
@@ -27,21 +27,21 @@
       <el-col :span="8">
         <div class="flex justify-center items-center mb-5 border-b">
           <div class="flex items-center flex-col flex-1 pb-6">
-            <div class="text-2xl text-theme">0</div>
+            <div class="text-2xl text-theme">{{ detail?.stockWarnNum || 0 }}</div>
             <div class="text-base text-theme">库存预警</div>
           </div>
           <div class="flex items-center flex-col flex-1 border-l">
-            <div class="text-2xl text-theme">6</div>
+            <div class="text-2xl text-theme">{{ detail?.stockFullNum || 0 }}</div>
             <div class="text-base text-theme">库存已满</div>
           </div>
         </div>
         <div class="flex justify-center items-center">
           <div class="flex items-center flex-col flex-1">
-            <div class="text-2xl text-theme">1245</div>
+            <div class="text-2xl text-theme">{{ detail?.noFirstCheckNum || 0 }}</div>
             <div class="text-base text-theme">24小时未初审</div>
           </div>
           <div class="flex items-center flex-col flex-1 border-l">
-            <div class="text-2xl text-theme">1245</div>
+            <div class="text-2xl text-theme">{{ detail?.recyclePriceAbnormalNum || 0 }}</div>
             <div class="text-base text-theme">回收价>出售价（中等）</div>
           </div>
         </div>
@@ -50,4 +50,11 @@
   </ele-card>
 </template>
 
-<script setup></script>
+<script setup>
+defineProps({
+  detail: {
+    type: Object,
+    default: () => ({})
+  }
+});
+</script>

src/views/index/components/sale-card.vue

@@ -9,11 +9,10 @@
         class="hidden-xs-only"
         style="display: flex; align-items: center; margin: 16px 0"
       >
-        <el-radio-group v-model="saleSearch.dateType">
-          <el-radio-button label="1">今天</el-radio-button>
-          <el-radio-button label="2">本周</el-radio-button>
-          <el-radio-button label="3">本月</el-radio-button>
-          <el-radio-button label="4">本年</el-radio-button>
+        <el-radio-group v-model="saleSearch.dateType" @change="updateDateRange">
+          <el-radio-button label="2">近7日</el-radio-button>
+          <el-radio-button label="3">近15日</el-radio-button>
+          <el-radio-button label="4">近一年</el-radio-button>
         </el-radio-group>
         <div class="hidden-md-and-down" style="width: 320px; margin-left: 12px">
           <el-date-picker
@@ -41,7 +40,7 @@
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, watch, getCurrentInstance } from 'vue';
   import { EleMessage } from 'ele-admin-plus/es';
   import { use } from 'echarts/core';
   import { CanvasRenderer } from 'echarts/renderers';
@@ -49,7 +48,8 @@
   import { GridComponent, TooltipComponent } from 'echarts/components';
   import VChart from 'vue-echarts';
   import { useEcharts } from '@/utils/use-echarts';
-  import { getSaleroomList } from '@/api/dashboard/analysis';
+  import dayjs from 'dayjs';
+  const { proxy } = getCurrentInstance();
 
   use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);
 
@@ -60,43 +60,84 @@
   /** 销售额柱状图配置 */
   const saleChartOption = reactive({});
 
-  /** 销售量趋势数据 */
-  const saleroomData1 = ref([]);
-
-  /** 访问量趋势数据 */
-  const saleroomData2 = ref([]);
+  /** 订单数据 */
+  const orderData = ref([]);
 
   /** 销售量搜索参数 */
   const saleSearch = reactive({
-    type: 'saleroom',
-    dateType: '1',
-    datetime: ['2022-01-01 10:44', '2022-01-03 13:00']
+    dateType: '2',
+    datetime: []
   });
 
-  /** 获取销售量数据 */
-  const getSaleroomData = () => {
-    getSaleroomList()
-      .then((data) => {
-        saleroomData1.value = data.list1;
-        onSaleTypeChange();
+  /** 更新时间范围 */
+  const updateDateRange = (type) => {
+    console.log(type, 'type');
+    const now = dayjs();
+    let start, end;
+
+    switch (type) {
+      case '2': // 近7日
+        start = now.subtract(6, 'day').startOf('day');
+        end = now.endOf('day');
+        break;
+      case '3': // 近15日
+        start = now.subtract(14, 'day').startOf('day');
+        end = now.endOf('day');
+        break;
+      case '4': // 近一年
+        start = now.subtract(1, 'year').startOf('day');
+        end = now.endOf('day');
+        break;
+    }
+
+    saleSearch.datetime = [
+      start.format('YYYY-MM-DD HH:mm'),
+      end.format('YYYY-MM-DD HH:mm')
+    ];
+  };
+
+  /** 获取订单数据 */
+  const getOrderData = async () => {
+    const [startTime, endTime] = saleSearch.datetime;
+    proxy.$http
+      .get('/order/orderstat/orderNumStat', {
+        params: { startTime, endTime }
       })
-      .catch((e) => {
-        EleMessage.error(e.message);
+      .then((res) => {
+        if (res.data.code === 200) {
+          orderData.value = res.data.data;
+          updateChartOption();
+        } else {
+          EleMessage.error(res.data.msg || '获取订单数据失败');
+        }
       });
   };
 
-  getSaleroomData();
+  /** 更新图表配置 */
+  const updateChartOption = () => {
+    const dates = orderData.value.map((item) => item.date);
+    const values = orderData.value.map((item) => item.orderNum);
 
-  /** 销售量tab选择改变事件 */
-  const onSaleTypeChange = () => {
     Object.assign(saleChartOption, {
       tooltip: {
-        trigger: 'axis'
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
       },
       xAxis: [
         {
           type: 'category',
-          data: saleroomData1.value.map((d) => d.month)
+          data: dates,
+          axisTick: {
+            alignWithLabel: true
+          }
         }
       ],
       yAxis: [
@@ -106,12 +147,27 @@
       ],
       series: [
         {
+          name: '订单数量',
           type: 'bar',
-          data: saleroomData1.value.map((d) => d.value)
+          barWidth: '40px',
+          data: values
         }
       ]
     });
   };
+
+  // 监听日期范围变化
+  watch(
+    () => saleSearch.datetime,
+    (newDatetime) => {
+      if (newDatetime && newDatetime.length === 2) {
+        getOrderData();
+      }
+    }
+  );
+
+  // 初始化
+  updateDateRange('2');
 </script>
 
 <style lang="scss" scoped>

src/views/index/index.vue

@@ -1,21 +1,42 @@
 <template>
   <ele-page class="workplace-page">
-    <goodsStat />
-    <orderStat />
+    <goodsStat :detail="orderStatInfo" />
+    <orderStat :detail="orderStatInfo" />
     <saleCard />
   </ele-page>
 </template>
 
 <script setup>
-  import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-  import { ElMessageBox } from 'element-plus/es';
+  import {
+    ref,
+    computed,
+    onMounted,
+    onBeforeUnmount,
+    getCurrentInstance
+  } from 'vue';
   import { EleMessage } from 'ele-admin-plus/es';
-  import { PlusCircleOutlined, UndoOutlined } from '@/components/icons';
   import goodsStat from '@/views/index/components/goods-stat.vue';
   import orderStat from '@/views/index/components/order-stat.vue';
   import saleCard from '@/views/index/components/sale-card.vue';
 
-  onMounted(() => {});
+  const { proxy } = getCurrentInstance();
+  const orderStatInfo = ref({});
+
+  // 获取订单统计信息
+  const getOrderStatInfo = async () => {
+    proxy.$http.get('/order/orderstat/getTopPageOrderStatInfo').then((res) => {
+      console.log(res,'x');
+      if (res.data.code === 200) {
+        orderStatInfo.value = res.data.data;
+      } else {
+        EleMessage.error(res.data.msg || '获取订单统计信息失败');
+      }
+    });
+  };
+
+  onMounted(() => {
+    getOrderStatInfo();
+  });
 
   onBeforeUnmount(() => {});
 </script>