修复BUG

api/oms-api/src/main/java/cn/qihangerp/oms/controller/ReportController.java

@@ -20,7 +20,7 @@ import java.util.Map;
 
 @AllArgsConstructor
 @RestController
-@RequestMapping("/api/oms-api/report")
+@RequestMapping("/report")
 public class ReportController extends BaseController {
     private final OOrderService orderService;
     private final OOrderItemService orderItemService;

vue/src/api/report/report.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 首页今日销售统计
+export function todayDaily(query) {
+  return request({
+    url: '/api/oms-api/report/todayDaily',
+    method: 'get',
+    params: query
+  })
+}
+
+// 销售统计
+export function salesDaily(query) {
+  return request({
+    url: '/api/oms-api/report/salesDaily',
+    method: 'get',
+    params: query
+  })
+}
+
+
+export function salesTopSku(query) {
+  return request({
+    url: '/api/oms-api/report/salesTopSku',
+    method: 'get',
+    params: query
+  })
+}

vue/src/views/dashboard/LineChart.vue

@@ -61,10 +61,11 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.setOptions(this.chartData)
     },
-    setOptions({ expectedData, actualData } = {}) {
+    setOptions({date,salesVolume,salesOrder } = {}) {
       this.chart.setOption({
         xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: date,
           boundaryGap: false,
           axisTick: {
             show: false
@@ -90,10 +91,11 @@ export default {
           }
         },
         legend: {
-          data: ['expected', 'actual']
+          data: [ '销售额','订单统计']
         },
-        series: [{
+        series: [
-          name: 'expected', itemStyle: {
+          {
+          name: '销售额', itemStyle: {
             normal: {
               color: '#FF005A',
               lineStyle: {
@@ -104,12 +106,12 @@ export default {
           },
           smooth: true,
           type: 'line',
-          data: expectedData,
+          data: salesVolume,
           animationDuration: 2800,
           animationEasing: 'cubicInOut'
         },
         {
-          name: 'actual',
+          name: '订单统计',
           smooth: true,
           type: 'line',
           itemStyle: {
@@ -124,7 +126,7 @@ export default {
               }
             }
           },
-          data: actualData,
+          data: salesOrder,
           animationDuration: 2800,
           animationEasing: 'quadraticOut'
         }]

vue/src/views/dashboard/PanelGroup.vue

@@ -1,19 +1,5 @@
 <template>
   <el-row :gutter="40" class="panel-group">
-
-    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
-      <div class="card-panel" @click="handleSetLineChartData('messages')">
-        <div class="card-panel-icon-wrapper icon-message">
-          <svg-icon icon-class="stock" class-name="card-panel-icon" /> 
-        </div>
-        <div class="card-panel-description">
-          <div class="card-panel-text">
-            库存
-          </div>
-          <count-to :start-val="0" :end-val="1212" :duration="3000" class="card-panel-num" />
-        </div>
-      </div>
-    </el-col>
     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('purchases')">
         <div class="card-panel-icon-wrapper icon-money">
@@ -21,9 +7,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            销售额
+            今日销售额
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="chartData.salesVolume" :duration="3200" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -34,12 +20,26 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            订单
+            今日订单量
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="chartData.orderCount" :duration="3600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="handleSetLineChartData('messages')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="stock" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            当前库存
+          </div>
+          <count-to :start-val="0" :end-val="chartData.inventory" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+
         <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
       <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
         <div class="card-panel-icon-wrapper icon-people">
@@ -47,9 +47,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            服务客户
+            店铺
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="chartData.shopCount" :duration="2600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -58,12 +58,28 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import * as echarts from "echarts";
 
 export default {
   components: {
     CountTo
   },
+  props: {
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted() {
+    // 获取统计
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
   methods: {
+    initChart() {
+
+    },
     handleSetLineChartData(type) {
       this.$emit('handleSetLineChartData', type)
     }

vue/src/views/dashboard/PieChart.vue

@@ -21,6 +21,10 @@ export default {
     height: {
       type: String,
       default: '300px'
+    },
+    chartData: {
+      type: Object,
+      required: true
     }
   },
   data() {
@@ -28,6 +32,14 @@ export default {
       chart: null
     }
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
   mounted() {
     this.$nextTick(() => {
       this.initChart()
@@ -43,7 +55,9 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
-
+      this.setOptions(this.chartData)
+    },
+    setOptions({date} = {}) {
       this.chart.setOption({
         tooltip: {
           trigger: 'item',
@@ -52,22 +66,16 @@ export default {
         legend: {
           left: 'center',
           bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+          // data: this.chartData.name
         },
         series: [
           {
-            name: 'WEEKLY WRITE ARTICLES',
+            name: '周销量占比',
             type: 'pie',
             roseType: 'radius',
             radius: [15, 95],
             center: ['50%', '38%'],
-            data: [
+            data: this.chartData.data,
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
             animationEasing: 'cubicInOut',
             animationDuration: 2600
           }

vue/src/views/index.vue

@@ -1,29 +1,48 @@
 <template>
   <div class="dashboard-editor-container">
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+    <panel-group :chart-data="report" @handleSetLineChartData="handleSetLineChartData" />
 
-<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-<!--      <line-chart :chart-data="lineChartData" />-->
+      <line-chart :chart-data="lineChartData" />
+    </el-row>
+<!--    <el-row>-->
+<!--      <el-table-->
+<!--        :data="tableData"-->
+<!--        style="width: 100%">-->
+<!--        <el-table-column-->
+<!--          prop="date"-->
+<!--          label="日期"-->
+<!--          width="180">-->
+<!--        </el-table-column>-->
+<!--        <el-table-column-->
+<!--          prop="name"-->
+<!--          label="姓名"-->
+<!--          width="180">-->
+<!--        </el-table-column>-->
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          label="地址">-->
+<!--        </el-table-column>-->
+<!--      </el-table>-->
 <!--    </el-row>-->
-
+    <el-row :gutter="32">
-<!--    <el-row :gutter="32">-->
 <!--      <el-col :xs="24" :sm="24" :lg="8">-->
 <!--        <div class="chart-wrapper">-->
 <!--          <raddar-chart />-->
 <!--        </div>-->
 <!--      </el-col>-->
-<!--      <el-col :xs="24" :sm="24" :lg="8">-->
+      <el-col :xs="24" :sm="24" :lg="24">
-<!--        <div class="chart-wrapper">-->
+        <div class="chart-wrapper">
-<!--          <pie-chart />-->
+          <pie-chart :chart-data="skuTopData" />
-<!--        </div>-->
+        </div>
-<!--      </el-col>-->
+      </el-col>
-<!--      <el-col :xs="24" :sm="24" :lg="8">-->
+<!--      <el-col :xs="24" :sm="24" :lg="12">-->
 <!--        <div class="chart-wrapper">-->
 <!--          <bar-chart />-->
 <!--        </div>-->
 <!--      </el-col>-->
-<!--    </el-row>-->
+    </el-row>
 
 
   </div>
@@ -35,23 +54,28 @@ import LineChart from './dashboard/LineChart'
 import RaddarChart from './dashboard/RaddarChart'
 import PieChart from './dashboard/PieChart'
 import BarChart from './dashboard/BarChart'
-
+import { todayDaily,salesDaily,salesTopSku } from "@/api/report/report";
 const lineChartData = {
-  newVisitis: {
+  // newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
+  //   expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
+  //   actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
+  // },
-  messages: {
+  // messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
+  //   expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
+  //   actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
+  // },
-  purchases: {
+  // purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
+  //   expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
+  //   actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
+  // },
-  shoppings: {
+  // shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
+  //   expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
+  //   actualData: [120, 82, 91, 154, 162, 140, 130]
+  // }
+  salesDaily: {
+    date:['09-15','09-16','09-17','09-18','09-19','09-20','09-21'],
+    salesVolume: [130, 140, 141, 142, 145, 150, 160],
+    salesOrder: [120, 82, 91, 154, 162, 140, 130]
   }
 }
 
@@ -66,12 +90,53 @@ export default {
   },
   data() {
     return {
-      lineChartData: lineChartData.newVisitis
+      lineChartData: {
+        date:[],
+        salesVolume:[],
+        salesOrder:[]
+      },
+      skuTopData:{
+        data:[
+          // { value: 320, name: 'AAA' },
+          // { value: 240, name: 'BBB' },
+          // { value: 149, name: 'CC' },
+          // { value: 100, name: 'DD' },
+          // { value: 59, name: 'DEEE' }
+        ]
+      },
+      report:{
+        inventory:50,
+        salesVolume:5989.98,
+        orderCount:302,
+        shopCount:8
+      }
     }
   },
+  mounted() {
+    // 加载统计
+    todayDaily().then(resp=>{
+
+      this.report = resp.data
+    })
+    salesDaily().then(resp=>{
+
+      this.lineChartData.date=[]
+      this.lineChartData.salesVolume =[]
+      this.lineChartData.salesOrder =[]
+      resp.data.forEach(x=>{
+        this.lineChartData.date.push(x.date)
+        this.lineChartData.salesVolume.push(x.amount)
+        this.lineChartData.salesOrder.push(x.count)
+      })
+    })
+    salesTopSku().then(resp=>{
+      console.log("=====",resp.data)
+      this.skuTopData.data= resp.data
+    })
+  },
   methods: {
     handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+      // this.lineChartData = lineChartData[type]
     }
   }
 }