lilei 4 年 前
コミット
e1240524d1
2 ファイル変更159 行追加230 行削除
  1. 38 0
      src/api/cleanManage.js
  2. 121 230
      src/views/cleanManage/statisticalReport.vue

+ 38 - 0
src/api/cleanManage.js

@@ -160,3 +160,41 @@ export const getCleanReport = (params) => {
     method: 'post'
   })
 }
+
+// 各回收物类型清运数据总计
+export const findTotalGroupRubbi = (params) => {
+  const url = `cleanReport/findTotalGroupRubbishType`
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+
+// 各清运司机占比
+export const findTotalGroupUser = (params) => {
+  const url = `cleanReport/findTotalGroupUser`
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+// 清运量趋势
+export const findTotalGroupDate = (params) => {
+  const url = `cleanReport/findTotalGroupDate`
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+// 各回收物类型清运数据柱状图
+export const findTotalGroupDateAndRubbishType = (params) => {
+  const url = `cleanReport/findTotalGroupDateAndRubbishType`
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 121 - 230
src/views/cleanManage/statisticalReport.vue

@@ -63,30 +63,13 @@
       <!-- 各回收物类型数据 -->
       <a-card class="panel " title="各回收物类型清运数据">
         <a-row :gutter="24">
-          <a-col :md="4" :lg="4">
-            <a-card class="border-radius background-skyblue">
-              <div class="module-list ">
-                <p>废旧金属</p>
-                <span>{{ chartData.KX }}kg</span>
+          <a-col :md="24" :lg="24">
+            <div style="display: flex;align-items: center;">
+              <div v-for="(item,index) in qyTotalPieData" :key="index" class="module-list" :style="{background:washTypePieColor[index]}">
+                <p>{{ item.name }}</p>
+                <span>{{ item.value }} kg</span>
               </div>
-            </a-card>
-          </a-col>
-          <a-col :md="4" :lg="4">
-            <a-card class="border-radius background-greenBlue">
-              <div class="module-list ">
-                <p>废旧塑料</p>
-                <span>{{ chartData.JX }}kg</span>
-              </div>
-            </a-card>
-          </a-col>
-          <a-col :md="4" :lg="4">
-            <a-card class="border-radius background-blackGreen">
-              <div class="module-list ">
-                <p>废旧纸张</p>
-                <span>{{ chartData.DLX }}kg</span>
-              </div>
-
-            </a-card>
+            </div>
           </a-col>
         </a-row>
         <!-- 各回收物类型数据图表展示 -->
@@ -104,7 +87,7 @@
               :xAxisRotate="resize"
               :yMax="1000"
               yUnit="kg"
-              :xAxisData="XdaysData"
+              :xAxisData="XdaysData1"
               :seriesData="washTypeBarData"
               text="" />
             <span v-if="isNoData" class="noData">暂无数据</span>
@@ -118,42 +101,42 @@
               yUnit="kg"
               :yMax="1000"
               :xAxisRotate="resize"
-              :xAxisData="XdaysData"
+              :xAxisData="XdaysData1"
               :seriesData="washTypeLineData"
               text="" />
             <span v-if="isNoData" class="noData">暂无数据</span>
           </a-col>
         </a-row>
       </a-card>
-      <a-card class="panel chart-pie" title="各回收物类型占比">
-        <a-row :gutter="24">
-          <a-col span="12">
+      <a-row :gutter="24">
+        <a-col span="12">
+          <a-card class="panel chart-pie" title="各回收物类型占比">
             <chart-pie
               ref="chartPie"
               class="chartPie-box"
-              :searchData="XdaysData"
-              :value="washTypePieData"
+              :value="qyTotalPieData"
               title="清运总量(kg)"
-              :total="chartData.allOrderNum"
+              :total="totalGroupRubbiData.cleanWeight"
               :color="washTypePieColor"
               :xAxisRotate="resize"
               text="" />
-          </a-col>
-          <a-col span="12">
+          </a-card>
+        </a-col>
+        <a-col span="12">
+          <a-card class="panel chart-pie" title="各清运司机占比">
             <!-- 各清运司机占比 百分比展示 -->
             <chart-pie
               ref="serverChartPie"
               class="chartPie-box"
-              :searchData="XdaysData"
-              :value="couponChartData"
+              :value="sjTotalPieData"
               title="清运总量(台)"
-              :total="chartData.allOrderNum"
+              :total="totalGroupUserData.cleanWeight"
               :color="couponColor"
               :xAxisRotate="resize"
               text="" />
-          </a-col>
-        </a-row>
-      </a-card>
+          </a-card>
+        </a-col>
+      </a-row>
     </div>
   </div>
 </template>
@@ -163,7 +146,7 @@ import { ChartPie, ChartBar, ChartLine } from '@/components/Echarts'
 import _ from 'lodash'
 import getDate from '@/libs/getDate'
 import moment from 'moment'
-import { getCleanReport } from '@/api/cleanManage.js'
+import { findTotalGroupRubbi, findTotalGroupUser, findTotalGroupDate, findTotalGroupDateAndRubbishType } from '@/api/cleanManage.js'
 import { stationList } from '@/api/releaseRecord.js'
 export default {
   name: 'Home',
@@ -209,37 +192,29 @@ export default {
         return 0
       }
     },
-    // 各类型占比总计数据
-    washTypePieData () {
-      const data = [{
-        'name': '快速洗车',
-        'value': this.chartData.KX
-      }, {
-        'name': '精致洗车',
-        'value': this.chartData.JX
-      }, {
-        'name': '打蜡精洗',
-        'value': this.chartData.DLX
-      }]
-      return data
+    // 各回收物类型占比
+    qyTotalPieData () {
+      const list = this.totalGroupRubbiData ? this.totalGroupRubbiData.cleanReportData : []
+      const temp = []
+      list.map(item => {
+        temp.push({
+          name: item.rubbishTypeDictValue,
+          value: Number(item.cleanWeight / 1000).toFixed(2)
+        })
+      })
+      return temp
     },
-    // 洗车用券量占比数据
-    couponChartData () {
-      const data = [
-        {
-          'name': '未用券洗车量',
-          'value': this.chartData.notUseCouponOrderNum
-        },
-        {
-          'name': '用券洗车量',
-          'value': this.chartData.useCouponOrderNum
-        },
-        {
-          'name': '用券洗车量11',
-          'value': this.chartData.useCouponOrderNum
-        }
-      ]
-      return data
+    // 各清运司机占比
+    sjTotalPieData () {
+      const list = this.totalGroupUserData ? this.totalGroupUserData.cleanReportData : []
+      const temp = []
+      list.map(item => {
+        temp.push({
+          name: item.operatorName,
+          value: Number(item.cleanWeight / 1000).toFixed(2)
+        })
+      })
+      return temp
     }
   },
   data () {
@@ -248,18 +223,10 @@ export default {
       timer: false,
       form: this.$form.createForm(this, { name: 'searchForm' }),
       isNoData: false, // 是否有每天营业额及进店量数据
-      stationList: [], // 洗车网点列表
+      stationList: [], // 清运网点列表
       searchForm: {
         queryWord: null, // 时间查询条件,默认本周
-        storeIdList: [] // 已选洗车网点
-      },
-      chartData: {
-        KX: 0, // 快洗
-        JX: 0, // 精洗
-        DLX: 0, // 打蜡洗
-        allOrderNum: 0, // 洗车总量
-        useCouponOrderNum: 0, // 用券洗车量
-        notUseCouponOrderNum: 0 // 未用券洗车量
+        storeIdList: [] // 已选清运网点
       },
       // 快速删选tab
       tabList: [{
@@ -282,63 +249,38 @@ export default {
       curentType: 'thisWeek', // 当前所选时间查询类型
       beginDate: null, // 开始时间
       endDate: null, // 结束时间
-      // 洗车量图表数据
-      clearnChartData: [{
-        name: '投递量',
-        type: 'line',
-        data: []
+      // 各回收物类型占比
+      totalGroupRubbiData: {
+        cleanWeight: 0,
+        cleanReportData: []
+      },
+      // 各清运司机占比
+      totalGroupUserData: {
+        cleanWeight: 0,
+        cleanReportData: []
       },
-      {
-        name: '清运量',
-        type: 'line',
-        data: []
-      }
-      ],
-      couponColor: ['#d48265', '#ff55ff'],
       // 洗车类型数据
       currentTabChart: 'tab1', // 洗车类型详情数据与变化趋势的tab 默认展示详情数据
       XdaysData: [], // 图表X轴时间集合
-      // 洗车类型柱状图表数据
-      washTypeBarData: [{
-        name: '快速洗车',
-        type: 'bar',
-        data: []
-      },
-      {
-        name: '精致洗车',
-        type: 'bar',
-        data: []
-      },
-      {
-        name: '打蜡精洗',
-        type: 'bar',
-        data: []
-      }
-      ],
-      // 洗车类型折线图表数据
-      washTypeLineData: [{
-        name: '快速洗车',
-        type: 'line',
-        data: []
-      },
-      {
-        name: '精致洗车',
-        type: 'line',
-        data: []
-      },
-      {
-        name: '打蜡精洗',
-        type: 'line',
-        data: []
-      }
-      ],
+      XdaysData1: [],
       // 各类型占比
-      washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
-      databack: {
-        couponChartData: [],
-        washTypePieData: [],
-        chartData: {}
-      }
+      washTypePieColor: ['#ffaa00', '#ff5500', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
+      couponColor: ['#ffaa00', '#ff5500', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
+      // 清运量趋势
+      clearnChartData: [
+        {
+          name: '投递量',
+          type: 'line',
+          data: []
+        },
+        {
+          name: '清运量',
+          type: 'line',
+          data: []
+        }
+      ],
+      washTypeBarData: [],
+      washTypeLineData: []
     }
   },
   methods: {
@@ -370,11 +312,6 @@ export default {
     // 页面初始化
     pageInit () {
       this.form.resetFields()
-      this.databack = {
-        couponChartData: _.cloneDeep(this.couponChartData),
-        washTypePieData: _.cloneDeep(this.washTypePieData),
-        chartData: _.cloneDeep(this.chartData)
-      }
     },
     // 查询
     handleSearch () {
@@ -425,61 +362,56 @@ export default {
     // 根据查询条件获取所有数据
     getPageData () {
       this.XdaysData = [] // x轴置空
-      const _date = {
-        beginDate: this.beginDate,
-        endDate: this.endDate,
+      const params = {
+        beginDate: this.beginDate + ' 00:00:00',
+        endDate: this.endDate + ' 00:00:00',
         storeIdList: this.searchForm.storeIdList
       }
-      console.log(_date, '_date')
-      getCleanReport(_date).then(res => {
-        console.log(res, 'rrrrrrr')
+      // 各回收物类型占比
+      findTotalGroupRubbi(params).then(res => {
+        console.log(res, '各回收物类型占比')
         if (res.status == 200) {
-          this.chartData = res.data
-          if (res.data.dateList && res.data.dateList.length) {
-            this.isNoData = false
-            this.filterData(res.data.dateList)
-          } else {
-            this.isNoData = true
-          }
+          this.totalGroupRubbiData = res.data
         } else {
           this.isNoData = true
         }
       })
-    },
-    // 整合图表每天数据
-    filterData (data) {
-      const days = [] // 日期合集
-      const kxData = [] // 快速洗车数据
-      const jxData = [] // 精致洗车数据
-      const dlxData = [] // 打蜡洗车数据
-      const totalData = [] // 投递量数据
-      const useCouponData = [] // 清运量数据
-      data.map(item => {
-        const itemDay = item.date.split('-')
-        const month = Number(itemDay[1])
-        const day = Number(itemDay[2])
-        const time = month + '月' + day + '日'
-        days.push(time)
-        // console.log(days, 'ddddd')
-        kxData.push(item.KX)
-        jxData.push(item.JX)
-        dlxData.push(item.DLX)
-        totalData.push(item.allOrderNum)
-        useCouponData.push(item.useCouponOrderNum)
+      // 各清运司机占比
+      findTotalGroupUser(params).then(res => {
+        console.log(res, '各清运司机占比')
+        if (res.status == 200) {
+          this.totalGroupUserData = res.data
+        } else {
+          this.isNoData = true
+        }
       })
-      this.XdaysData = days
-      const washTypeData = [kxData, jxData, dlxData]
-      // 各回收物类型柱状图表数据
-      this.washTypeBarData.map((item, index) => {
-        item.data = washTypeData[index]
+      // 清运量趋势
+      findTotalGroupDate(params).then(res => {
+        console.log(res, '清运量趋势')
+        if (res.status == 200) {
+          // this.totalGroupUserData = res.data
+          const a = res.data.cleanReportData
+          const b = res.data.deliveryReportData
+          for (var key in a) {
+            this.clearnChartData[0].data.push(Number(a[key] / 1000).toFixed(2))
+          }
+          for (var key in b) {
+            this.XdaysData.push(key)
+            this.clearnChartData[1].data.push(Number(b[key] / 1000).toFixed(2))
+          }
+        } else {
+          this.isNoData = true
+        }
       })
-      // 各回收物类型折线图表数据
-      this.washTypeLineData.map((item, index) => {
-        item.data = washTypeData[index]
+      // 各回收物类型清运数据柱状图
+      findTotalGroupDateAndRubbishType(params).then(res => {
+        console.log(res, '各回收物类型清运数据柱状图')
+        if (res.status == 200) {
+          // this.totalGroupUserData = res.data
+        } else {
+          this.isNoData = true
+        }
       })
-      // 洗车量图表数据赋值
-      this.clearnChartData[0].data = totalData
-      this.clearnChartData[1].data = useCouponData
     }
   },
   beforeRouteEnter (to, from, next) {
@@ -548,7 +480,8 @@ export default {
       }
       .chartPie-box{
         height: 300px;
-        width: 100%;
+        max-width: 600px;
+        margin: 0 auto;
       }
       .panel-title {
         font-size: 18px;
@@ -570,59 +503,17 @@ export default {
           color: #2d8cf0;
         }
       }
-
-      .border-radius {
-        border-radius: 15px;
-      }
-
-      .background-blue {
-        background-color: #157edf;
-      }
-
-      .background-green {
-        background-color: #29aa4f;
-      }
-
-      .background-yellow {
-        background-color: #dbb211;
-      }
-
-      .background-pop {
-        background-color: #8544e0;
-      }
-
-      .background-black {
-        background-color: #1f2c65;
-      }
-
-      .background-pink {
-        background-color: #d23e57;
-      }
-
-      .background-skyblue {
-        background-color: #00aaff;
-      }
-
-      .background-greenBlue {
-        background-color: #1b9eaa;
-      }
-
-      .background-blackGreen {
-        background-color: #357c09;
-      }
-
-      .background-orange {
-        background-color: #d2701b;
-      }
     }
 
     .module-list {
+      color: #FFFFFF;
+      height: 100px;
+      padding: 10px;
+      border-radius: 15px;
       display: flex;
-      justify-content: center;
       align-items: center;
       flex-direction: column;
-      color: #FFFFFF;
-
+      margin: 5px;
       span {
         font-weight: 600;
         font-size: 20px;