Преглед на файлове

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
首页图表接口对接

1004749546@qq.com преди 4 години
родител
ревизия
c4a161d1bd
променени са 2 файла, в които са добавени 72 реда и са изтрити 48 реда
  1. 9 0
      src/api/report-charts.js
  2. 63 48
      src/views/Home.vue

+ 9 - 0
src/api/report-charts.js

@@ -0,0 +1,9 @@
+import { axios } from '@/utils/request'
+// 获取列表数据
+export const getOrderstatistics = params => {
+  return axios({
+    url: 'order/statistics',
+    data: params,
+    method: 'POST'
+  })
+}

+ 63 - 48
src/views/Home.vue

@@ -76,7 +76,7 @@
           <a-col :md="4" :lg="4">
             <a-card class="border-radius background-skyblue">
               <div class="module-list ">
-                <span>{{ carData.dayTotalCar }}</span>
+                <span>{{ chartData.KX.toFixed(2) }}</span>
                 <p>快速洗车</p>
               </div>
             </a-card>
@@ -84,7 +84,7 @@
           <a-col :md="4" :lg="4">
             <a-card class="border-radius background-greenBlue">
               <div class="module-list ">
-                <span>{{ carData.dayWashCar }}</span>
+                <span>{{ chartData.JX.toFixed(2) }}</span>
                 <p>精致洗车</p>
               </div>
             </a-card>
@@ -92,7 +92,7 @@
           <a-col :md="4" :lg="4">
             <a-card class="border-radius background-blackGreen">
               <div class="module-list ">
-                <span>{{ carData.dayCheckCar }}</span>
+                <span>{{ chartData.DLX.toFixed(2) }}</span>
                 <p>打蜡精洗</p>
               </div>
 
@@ -146,7 +146,7 @@
                 :searchData="XdaysData"
                 :value="washTypePieData"
                 title="洗车总量(台)"
-                :total="washCarsTotal"
+                :total="chartData.allOrderNum.toFixed(2)"
                 :color="washTypePieColor"
                 :xAxisRotate="resize"
                 text="" />
@@ -161,7 +161,7 @@
                 :searchData="XdaysData"
                 :value="couponChartData"
                 title="洗车总量(台)"
-                :total="washCarsTotal"
+                :total="chartData.allOrderNum.toFixed(2)"
                 :color="couponColor"
                 :xAxisRotate="resize"
                 text="" />
@@ -182,6 +182,10 @@ import {
 import _ from 'lodash'
 import getDate from '@/libs/getDate'
 import moment from 'moment'
+import { getOrderstatistics } from '@/api/report-charts.js'
+import {
+  storeList
+} from '@/api/order.js'
 export default {
   name: 'Home',
   components: {
@@ -212,6 +216,31 @@ export default {
       } else {
         return 0
       }
+    },
+    // 各类型占比总计数据
+    washTypePieData () {
+      const data = [{
+        'name': '快速洗车',
+        'value': this.chartData.KX.toFixed(2)
+      }, {
+        'name': '精致洗车',
+        'value': this.chartData.JX.toFixed(2)
+      }, {
+        'name': '打蜡精洗',
+        'value': this.chartData.DLX.toFixed(2)
+      }]
+      return data
+    },
+    // 洗车用券量占比数据
+    couponChartData () {
+      const data = [{
+        'name': '未用券洗车量',
+        'value': this.chartData.notUseCouponOrderNum.toFixed(2)
+      }, {
+        'name': '用券洗车量',
+        'value': this.chartData.useCouponOrderNum.toFixed(2)
+      }]
+      return data
     }
   },
   // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
@@ -235,6 +264,14 @@ export default {
         queryWord: null, // 时间查询条件,默认本周
         storeIds: [] // 已选洗车网点
       },
+      chartData: {
+        KX: 0, // 快洗
+        JX: 0, // 精洗
+        DLX: 0, // 打蜡洗
+        allOrderNum: 0, // 洗车总量
+        useCouponOrderNum: 0, // 用券洗车量
+        notUseCouponOrderNum: 0 // 未用券洗车量
+      },
       // 快速删选tab
       tabList: [{
         name: '今天',
@@ -268,53 +305,28 @@ export default {
         data: []
       }
       ],
-      // 洗车用券量占比
-      couponChartData: [{
-        'name': '未用券洗车量',
-        'value': 0
-      }, {
-        'name': '用券洗车量',
-        'value': 0
-      }],
-      washCarsTotal: 0, // 洗车总量
       couponColor: ['#d48265', '#ff55ff'],
       // 洗车类型数据
       currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
-      carData: {
-        dayTotalCar: 0, // 进店量
-        dayWashCar: 0, // 洗车量
-        dayCheckCar: 0 // 检测量
-      },
       XdaysData: [], // 图表X轴时间集合
-      // 进店量,检测量 数据
+      // 洗车类型数据
       washTypeChartData: [{
-        name: '进店量',
+        name: '',
         type: 'bar',
         data: []
       },
       {
-        name: '检测量',
+        name: '',
         type: 'bar',
         data: []
       }
       ],
       // 各类型占比
       washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
-      washTypePieData: [{
-        'name': '快速洗车',
-        'value': 0
-      }, {
-        'name': '精致洗车',
-        'value': 0
-      }, {
-        'name': '打蜡精洗',
-        'value': 0
-      }],
-      dayBundleSaleIncome: 0, // 套餐销售额
       databack: {
         couponChartData: [],
         washTypePieData: [],
-        carData: {}
+        chartData: {}
       }
     }
   },
@@ -333,10 +345,10 @@ export default {
     },
     // 查询洗车网点
     getListStore () {
-      // listStore().then(res => {
-      //   console.log(res)
-      //   this.storesList = res.data ? res.data : []
-      // })
+      storeList({ pageNo: 1, pageSize: 1000 }).then(res => {
+        console.log(res)
+        this.storesList = res.data.list ? res.data.list : []
+      })
     },
     // 页面初始化
     pageInit () {
@@ -344,11 +356,8 @@ export default {
       this.databack = {
         couponChartData: _.cloneDeep(this.couponChartData),
         washTypePieData: _.cloneDeep(this.washTypePieData),
-        carData: _.cloneDeep(this.carData)
+        chartData: _.cloneDeep(this.chartData)
       }
-      this.dayBundleSaleIncome = 0
-      this.washCarsTotal = 0
-      this.payCost = 0
     },
     // 查询
     handleSearch () {
@@ -397,17 +406,23 @@ export default {
         endDate: this.endDate
       }
       console.log(_date, '_date')
-      // this.getAmount(_date)
-      // this.getServerData(_date)
-      // this.getBundelData(_date)
-      // this.getChartData(_date)
-      // this.getPayData(_date)
+      getOrderstatistics(_date).then(res => {
+        console.log(res, 'rrrrrrr')
+        if (res.status == 200) {
+          this.chartData = res.data
+          this.filterData()
+        }
+      })
+    },
+    // 整合图表数据
+    filterData () {
+
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
       vm.pageInit()
-      vm.getListStore()
+      vm.getListStore() // 获取网点列表
       vm.curentType = 'thisWeek'
       vm.getCurentSearchTime()
     })