chenrui 4 år sedan
förälder
incheckning
1aff1ba6eb

+ 19 - 1
src/api/cleanManage.js

@@ -103,6 +103,16 @@ export const getDriverList = params => {
   })
 }
 
+// 清运司机  全部
+export const driverQueryList = (params) => {
+  const url = `driver/queryDriverList`
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+
 // // 改变权限状态接口
 // export const updateEnableStatus = params => {
 //   return axios({
@@ -139,4 +149,12 @@ export const driverDetails = (params) => {
     method: 'get'
   })
 }
-
+// 清运管理  统计报表
+export const getCleanReport = (params) => {
+  const url = `cleanReport/getReport`
+  return axios.request({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 1 - 1
src/api/releaseRecord.js

@@ -30,7 +30,7 @@ export const getDeliveryLogTotal = (params) => {
   })
 }
 
-// 网点名称
+// 网点列表
 export const stationList = params => {
   return axios.request({
     url: `/station/queryList`,

+ 4 - 4
src/config/router.config.js

@@ -286,8 +286,8 @@ export const asyncRouterMap = [{
 	  component: PageView,
 	  meta: {
 	    title: '清运管理',
-	    icon: 'car',
-      permission: 'M_driverManage'
+	    icon: 'car'
+      // permission: 'M_driverManage'
 	  },
 	  children: [{
 	    path: '/cleanManage/statisticalReport',
@@ -306,8 +306,8 @@ export const asyncRouterMap = [{
 	      '@/views/cleanManage/driverManage.vue'),
 	    meta: {
 	      title: '司机管理',
-	      icon: 'contacts',
-        permission: 'M_driverManage_list'
+	      icon: 'contacts'
+        // permission: 'M_driverManage_list'
 	    }
 	  },
 	  {

+ 18 - 12
src/views/cleanManage/cleanModal.vue

@@ -10,7 +10,7 @@
             :showSearch="true"
             option-filter-prop="children"
             :filter-option="filterOption">
-            <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
+            <a-select-option v-for="item in optionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
           </a-select>
         </a-form-model-item>
         <a-form-model-item label="备注">
@@ -35,31 +35,29 @@
 </template>
 
 <script>
-import { stationList } from '@/api/releaseRecord.js'
+import { driverQueryList } from '@/api/cleanManage.js'
 export default {
   name: 'CleanModal',
   props: {
-    visible: {
+    openModal: {
       type: Boolean,
       default: false
     },
-    id: {
+    clernId: {
       type: [Number, String],
       default: ''
     }
   },
   data () {
     return {
-      // 司机数据
-      optionData: [],
-      isShow: this.visible,
-      // 查询参数
+      optionData: [], // 司机列表数据
+      isShow: this.openModal,
       queryParam: {
         stationNo: undefined,
         remarks: ''
       },
       // 校验规则
-      rules: { stationNo: [{ required: true, message: '请输入司机姓名', trigger: 'blur' }] }
+      rules: { stationNo: [{ required: true, message: '请选择清运司机', trigger: ['blur', 'change'] }] }
     }
   },
   methods: {
@@ -68,10 +66,12 @@ export default {
         option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       )
     },
-    getStationList () {
-      stationList().then(res => {
+    getDriverList () {
+      driverQueryList({ loginFlag: 1 }).then(res => {
         if (res.status == 200) {
           this.optionData = res.data || []
+        } else {
+          this.optionData = []
         }
       })
     },
@@ -110,7 +110,7 @@ export default {
     }
   },
   watch: {
-    visible (newValue, oldValue) {
+    openModal (newValue, oldValue) {
       this.isShow = newValue
     },
     isShow (val) {
@@ -121,6 +121,12 @@ export default {
           this.$refs.ruleForm.resetFields()
         })
       }
+    },
+    clernId (newValue, oldValue) {
+      console.log(this.isShow, newValue)
+      if (this.isShow && newValue) {
+        this.getDriverList()
+      }
     }
   }
 }

+ 112 - 75
src/views/cleanManage/notCleanNetwork.vue

@@ -12,7 +12,7 @@
           <a-col :xs="24" :sm="12" :md="6" :lg="5">
             <a-form-model-item label="最后清运时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-range-picker
-                id="netWorkCleanRecord-time"
+                id="notCleanNetwork-time"
                 v-model="time"
                 style="width: 100%;"
                 :format="dateFormat"
@@ -24,7 +24,7 @@
           <a-col :xs="24" :sm="12" :md="6" :lg="5">
             <a-form-model-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-select
-                id="netWorkCleanRecord-stationNo"
+                id="notCleanNetwork-stationNo"
                 placeholder="请选择网点名称"
                 allowClear
                 v-model="queryParam.stationNo"
@@ -37,37 +37,37 @@
           </a-col>
           <a-col :xs="24" :sm="12" :md="6" :lg="5">
             <a-form-model-item label="设备编号" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-              <a-input allowClear placeholder="请输入设备编号" v-model.trim="queryParam.srcDeviceCode" id="netWorkCleanRecord-stationNo"/>
+              <a-input allowClear placeholder="请输入设备编号" v-model.trim="queryParam.srcDeviceCode" id="notCleanNetwork-stationNo"/>
             </a-form-model-item>
           </a-col>
-          <!-- <a-col :xs="24" :sm="12" :md="6" :lg="5">
+          <a-col :xs="24" :sm="12" :md="6" :lg="5">
             <a-form-model-item label="排序规则" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
-              <v-select code="ENABLE_FLAG" v-model="queryParam.loginFlag" allowClear placeholder="请选择操作人" id="netWorkCleanRecord-stationNo" ></v-select>
+              <v-select code="WAIT_CLEAN_SORT_RULE" v-model="queryParam.orderType" allowClear placeholder="请选择" id="notCleanNetwork-stationNo" ></v-select>
             </a-form-model-item>
-          </a-col> -->
+          </a-col>
           <a-col :xs="24" :sm="12" :md="6" :lg="4">
-            <a-button type="primary" @click="$refs.table.refresh(true)" id="netWorkCleanRecord-refresh" style="margin: 4px 10px 0 20px">查询</a-button>
-            <a-button type="" @click="reset" id="netWorkCleanRecord-reset" style="margin-top: 4px">重置</a-button>
+            <a-button type="primary" @click="$refs.table.refresh(true)" id="notCleanNetwork-refresh" style="margin: 4px 10px 0 20px">查询</a-button>
+            <a-button type="" @click="reset" id="notCleanNetwork-reset" style="margin-top: 4px">重置</a-button>
           </a-col>
         </a-row>
         <a-row :gutter="24">
           <a-col :xs="24" :sm="12" :md="6" :lg="5">
-            <a-form-model-item prop="provinceName" label="所属区域:" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
-              <a-select id="rubbishTotal-provinceName" allowClear v-model="queryParam.provinceName" @change="getCityList" placeholder="请选择省">
+            <a-form-model-item prop="provinceCode" label="所属区域:" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
+              <a-select id="notCleanNetwork-provinceCode" allowClear v-model="queryParam.provinceCode" @change="getCityList" placeholder="请选择省">
                 <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-model-item>
           </a-col>
           <a-col :xs="24" :sm="12" :md="6" :lg="5">
-            <a-form-model-item prop="cityName" label=" " :colon="false" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
-              <a-select allowClear id="rubbishTotal-cityName" v-model="queryParam.cityName" @change="getAreaList" placeholder="请选择市">
+            <a-form-model-item prop="cityCode" label=" " :colon="false" :label-col="{ span:8 }" :wrapper-col="{ span:16}">
+              <a-select allowClear id="notCleanNetwork-cityCode" v-model="queryParam.cityCode" @change="getAreaList" placeholder="请选择市">
                 <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-model-item>
           </a-col>
           <a-col :xs="24" :sm="12" :md="6" :lg="5">
-            <a-form-model-item prop="districtName" label=" " :colon="false" :label-col="{ span:8}" :wrapper-col="{ span:16}">
-              <a-select allowClear id="rubbishTotal-districtName" v-model="queryParam.districtName" placeholder="请选择区/县">
+            <a-form-model-item prop="districtCode" label=" " :colon="false" :label-col="{ span:8}" :wrapper-col="{ span:16}">
+              <a-select allowClear id="notCleanNetwork-districtCode" v-model="queryParam.districtCode" placeholder="请选择区/县">
                 <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
               </a-select>
             </a-form-model-item>
@@ -77,16 +77,10 @@
     </div>
     <!-- 合计 -->
     <a-alert type="info" showIcon style="margin-bottom:15px">
-      <div class="ftext" slot="message">总计<span> {{ }} </span>条,可回收垃圾总计<span> {{ }} </span>kg。  其中,废旧衣物<span> {{ }} </span>kg,废旧纸张<span> {{ }} </span>kg,废旧金属<span> {{ }} </span>kg,废旧塑料<span> {{ }} </span>kg,废旧金属/塑料<span> {{ }} </span>kg,废旧玻璃<span> {{ }} </span>kg,可回收物<span> {{ }} </span>kg</div>
+      <div class="ftext" slot="message">总计<span> {{ orderTotal }} </span>条,可回收垃圾总计<span> {{ recyclableWasteTotal }} </span>kg。  其中,废旧衣物<span> {{ wasteClothes }} </span>kg,废旧纸张<span> {{ wastePaper }} </span>kg,废旧金属<span> {{ wasteMetal }} </span>kg,废旧塑料<span> {{ wastePlastics }} </span>kg,废旧金属/塑料<span> {{ wasteMetalPlastic }} </span>kg,废旧玻璃<span> {{ wasteGlass }} </span>kg,可回收物<span> {{ recyclable }} </span>kg</div>
     </a-alert>
     <!-- 列表 -->
-    <s-table
-      ref="table"
-      :rowKey="(record) => record.id"
-      :columns="columns"
-      :data="loadData"
-      bordered
-    >
+    <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered >
       <template slot="customTitle">
         <a-tooltip placement="top">
           <template slot="title">
@@ -96,13 +90,41 @@
           <a-icon type="question-circle" :style="{ color: '#1890FF' }" />
         </a-tooltip>
       </template>
+      <!-- 废旧衣物 -->
+      <template slot="clothes" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.clothes ? 'red' : '' }">{{ record.clothes || 0 }}</span>
+      </template>
+      <!-- 废旧纸张 -->
+      <template slot="paper" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.paper ? 'red' : '' }">{{ record.paper || 0 }}</span>
+      </template>
+      <!-- 废旧塑料 -->
+      <template slot="plastic" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.plastic ? 'red' : '' }">{{ record.plastic || 0 }}</span>
+      </template>
+      <!-- 废旧金属 -->
+      <template slot="metal" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.metal ? 'red' : '' }">{{ record.metal || 0 }}</span>
+      </template>
+      <!-- 废旧金属/塑料 -->
+      <template slot="metPla" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.metPla ? 'red' : '' }">{{ record.metPla || 0 }}</span>
+      </template>
+      <!-- 废旧玻璃 -->
+      <template slot="glass" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.glass ? 'red' : '' }">{{ record.glass || 0 }}</span>
+      </template>
+      <!-- 可回收物 -->
+      <template slot="recycling" slot-scope="text,record">
+        <span :style="{ color: record.maxVal==record.recycling ? 'red' : '' }">{{ record.recycling || 0 }}</span>
+      </template>
       <!-- 操作 -->
       <span slot="action" slot-scope="text,record">
         <a-button type="primary" @click="handleDetail(record)">立即清运</a-button>
       </span>
     </s-table>
     <!-- 清运弹窗 -->
-    <cleanModal :id="itemId" :visible="isOpenModal" @close="isOpenModal=false"></cleanModal>
+    <cleanModal :clernId="clernId" :openModal="isOpenModal" @close="closeCleanModal"></cleanModal>
   </a-card>
 </template>
 
@@ -114,61 +136,62 @@ import { getProvince, getCityByPro, getDistrictByCity } from '@/api/station'
 import cleanModal from './cleanModal.vue'
 import moment from 'moment'
 export default {
-  components: {
-    STable,
-    VSelect,
-    cleanModal
-  },
+  components: { STable, VSelect, cleanModal },
   data () {
     return {
       formItemLayout: {
-        labelCol: {
-          span: 8
-        },
-        wrapperCol: {
-          span: 16
-        }
+        labelCol: { span: 8 },
+        wrapperCol: { span: 16 }
       },
       isOpenModal: false, // 默认弹窗关闭
-      itemId: '', // 行id
-      // 查询参数
+      clernId: null, // 当前待清运记录id
+      orderTotal: '', //  总计条数
+      recyclableWasteTotal: '', //  可回收垃圾总计
+      wasteClothes: '', //  废旧衣物总计
+      wastePaper: '', //  废旧纸张总计
+      wasteMetal: '', //  废旧金属总计
+      wastePlastics: '', //  废旧塑料总计
+      wasteMetalPlastic: '', //  废旧金属/塑料总计
+      wasteGlass: '', //  废旧玻璃总计
+      recyclable: '', //  可回收物总计
       queryParam: {
         srcDeviceCode: undefined, // 设备编号
         stationName: '', // 网点名称
-        // login: '', // 状态
+        orderType: 'max', // 排序规则
         beginDate: null, // 开始时间
         endDate: null, // 结束时间
-        provinceName: undefined, //  省
-        districtName: undefined, // 市
+        provinceCode: undefined, //  省
+        cityCode: undefined, // 市
         districtCode: undefined // 区
       },
-      // 网点名称数据
-      optionData: [],
+      optionData: [], // 网点列表数据
       addrProvinceList: [], //  省下拉
       addrCityList: [], //  市下拉
       addrDistrictList: [], //  区下拉
       // 将默认当天时间日期回显在时间选择框中
       time: [],
       dateFormat: 'YYYY-MM-DD', // 日期格式
-      columns: [{ title: '网点名称', dataIndex: 'no', width: 100, align: 'center' },
+      columns: [
+        { title: '网点名称', dataIndex: 'stationName', width: 100, align: 'center' },
         { title: '设备编号', dataIndex: 'srcDeviceCode', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
         { slots: { title: 'customTitle' },
           children: [
-            { title: '废旧衣物', dataIndex: 'clothes', width: 100, align: 'center', customRender: (text) => { return text || 0 } },
-            { title: '废旧纸张', dataIndex: 'paper', width: 100, align: 'center', customRender: (text) => { return text || 0 } },
-            { title: '废旧塑料', dataIndex: 'plastic', width: 100, align: 'center', customRender: (text) => { return text || 0 } },
-            { title: '废旧金属', dataIndex: 'metal', width: 100, align: 'center', customRender: (text) => { return text || 0 } },
-            { title: '废旧金属/塑料', dataIndex: 'metPla', width: 100, align: 'center', customRender: (text) => { return text || 0 } },
-            { title: '废旧玻璃', dataIndex: 'glass', width: 100, align: 'center', customRender: (text) => { return text || 0 } },
-            { title: '可回收物', dataIndex: 'recycling', width: 100, align: 'center', customRender: (text) => { return text || 0 } }
+            { title: '废旧衣物', scopedSlots: { customRender: 'clothes' }, width: 100, align: 'center' },
+            { title: '废旧纸张', scopedSlots: { customRender: 'paper' }, width: 100, align: 'center' },
+            { title: '废旧塑料', scopedSlots: { customRender: 'plastic' }, width: 100, align: 'center' },
+            { title: '废旧金属', scopedSlots: { customRender: 'metal' }, width: 100, align: 'center' },
+            { title: '废旧金属/塑料', scopedSlots: { customRender: 'metPla' }, width: 100, align: 'center' },
+            { title: '废旧玻璃', scopedSlots: { customRender: 'glass' }, width: 100, align: 'center' },
+            { title: '可回收物', scopedSlots: { customRender: 'recycling' }, width: 100, align: 'center' }
           ]
         },
         { title: '可回收垃圾小计(kg)', dataIndex: 'totalWeight', width: 100, align: 'center' },
         { title: '最后清运时间', dataIndex: 'lastCleanDate', width: 100, align: 'center', customRender: (text) => { return text || '--' } },
-        { title: '操作', dataIndex: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' } }],
+        { title: '操作', dataIndex: 'action', width: 100, align: 'center', scopedSlots: { customRender: 'action' } }
+      ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        const searchData = Object.assign(parameter, this.queryParam, { orderType: 'max' })
+        const searchData = Object.assign(parameter, this.queryParam)
         if (this.time && this.time.length) {
           searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
           searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD')
@@ -176,20 +199,30 @@ export default {
           searchData.beginDate = null
           searchData.endDate = null
         }
-        return netWorkCleanRecordList({pageNo:1,pageSize:10}).then(res => {
+        return netWorkCleanRecordList(searchData).then(res => {
           if (res.status == 200) {
-            const no = (res.data.pageNo - 1) * res.data.pageSize
             for (let i = 0; i < res.data.list.length; i++) {
               const _item = res.data.list[i]
-              _item.no = no + i + 1
-              if (_item.cleanWeight != null || 0) {
-                _item.cleanWeight = (_item.cleanWeight / 1000).toFixed(2)
-              }
+              //  找出可回收垃圾库存量最大的值
+              const arr = [_item.clothes, _item.paper, _item.plastic, _item.metal, _item.metPla, _item.glass, _item.recycling]
+              const maxVal = Math.max(...arr)
+              _item.maxVal = maxVal
+              // const obj = [
+              //   { 'clothes': _item.clothes },
+              //   { 'paper': _item.paper },
+              //   { 'plastic': _item.plastic },
+              //   { 'metal': _item.metal },
+              //   { 'metPla': _item.metPla },
+              //   { 'glass': _item.glass },
+              //   { 'recycling': _item.recycling }
+              // ]
+              // Object.keys(obj).forEach(key => {
+              //   if (obj[key] == maxVal) {
+              //     _item.maxName = key
+              //   }
+              // })
             }
-            this.totalNum = res.data.count
             return res.data
-          } else {
-            this.totalNum = 0
           }
         })
       }
@@ -198,7 +231,6 @@ export default {
   mounted () {
     this.getStationList()
     this.getProvinceList()
-    this.queryParam.loginFlag = '1'
   },
   methods: {
     // 不可选日期
@@ -217,14 +249,21 @@ export default {
         option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       )
     },
-    // 获取合作商数据
+    // 获取网点数据
     getStationList () {
       stationList().then(res => {
         if (res.status == 200) {
           this.optionData = res.data || []
+        } else {
+          this.optionData = []
         }
       })
     },
+    //  关闭清运弹框
+    closeCleanModal () {
+      this.clernId = null
+      this.isOpenModal = false
+    },
     // 获取省列表
     getProvinceList () {
       getProvince().then(res => {
@@ -244,9 +283,7 @@ export default {
       this.getCityListRequest(val)
     },
     getCityListRequest (val) {
-      getCityByPro({
-        id: val
-      }).then(res => {
+      getCityByPro({ id: val }).then(res => {
         if (res.status == 200) {
           this.addrCityList = res.data || []
         } else {
@@ -261,9 +298,7 @@ export default {
       this.getAreaListRequest(val)
     },
     getAreaListRequest (val) {
-      getDistrictByCity({
-        id: val
-      }).then(res => {
+      getDistrictByCity({ id: val }).then(res => {
         if (res.status == 200) {
           this.addrDistrictList = res.data || []
         } else {
@@ -273,17 +308,19 @@ export default {
     },
     // 重置
     reset () {
-      this.queryParam = {
-        stationNo: undefined,
-        phone: '',
-        loginFlag: '',
-        beginDate: null,
-        endDate: null
-      }
+      this.queryParam.srcDeviceCode = undefined
+      this.queryParam.stationName = ''
+      this.queryParam.orderType = ''
+      this.queryParam.beginDate = null
+      this.queryParam.endDate = null
+      this.queryParam.provinceCode = undefined
+      this.queryParam.cityCode = undefined
+      this.queryParam.districtCode = undefined
       this.time = []
     },
     // 查看清运详情
     handleDetail (record) {
+      this.clernId = '11'
       this.isOpenModal = true
     }
   }

+ 631 - 1
src/views/cleanManage/statisticalReport.vue

@@ -1,8 +1,638 @@
 <template>
+  <div class="home">
+    <div class="report-page">
+      <!-- 查询条件 -->
+      <a-row>
+        <a-card class="search-panel">
+          <div class="toolsBar">
+            <a-form ref="searchForm" :model="searchForm" layout="inline">
+              <a-form-item props="queryWord" label="统计区间">
+                <a-range-picker
+                  style="width: 220px;"
+                  @change="dateChange"
+                  v-model.trim="searchForm.queryWord"
+                  :disabledDate="disabledDate"
+                />
+              </a-form-item>
+              <a-form-item props="storeIds" label="清运网点">
+                <a-select
+                  allowClear
+                  mode="multiple"
+                  placeholder="选择网点"
+                  v-model="searchForm.storeIdList"
+                  style="width: 200px"
+                  option-filter-prop="children"
+                  :filter-option="filterOption">
+                  <a-select-option :disabled="!isStationAll&&searchForm.storeIdList.length>0" value="all" key="all">全部</a-select-option>
+                  <a-select-option :disabled="isStationAll" v-for="item in stationList" :value="item.stationNo" :key="item.id">
+                    {{ item.name }}
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+              <a-form-item>
+                <a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
+                <a-button type="" style="margin-left: 10px;" @click="handleReset()">重置</a-button>
+              </a-form-item>
+              <a-form-item>
+                快捷筛选:
+                <span
+                  :class="['searchItem',curentType==item.type?'active':'']"
+                  v-for="(item,index) in tabList"
+                  :key="index"
+                  @click="getCurentSearchTime(item)">{{ item.name }}</span>
+              </a-form-item>
+            </a-form>
+          </div>
+        </a-card>
+      </a-row>
+      <!-- 清运量数据 -->
+      <a-card class="panel" title="清运量趋势">
+        <!-- 清运量趋势图表展示 -->
+        <chart-line
+          style="height: 300px;"
+          color="#6C6FBE"
+          ref="chartLine"
+          :yMax="5000"
+          yUnit="kg"
+          :xAxisRotate="resize"
+          :xAxisData="XdaysData"
+          :seriesData="clearnChartData"
+          text="" />
+        <span v-if="isNoData" class="noData">暂无数据</span>
+      </a-card>
+      <!-- 各回收物类型数据 -->
+      <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>
+              </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>
+          </a-col>
+        </a-row>
+        <!-- 各回收物类型数据图表展示 -->
+        <a-row :gutter="24">
+          <a-col class="tab-card">
+            <span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
+            <span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
+          </a-col>
+          <!-- 详情数据 -->
+          <a-col span="24" v-if="currentTabChart=='tab1'">
+            <chart-bar
+              ref="ChartBar"
+              style="height: 300px;"
+              color="#6C6FBE"
+              :xAxisRotate="resize"
+              :yMax="1000"
+              yUnit="kg"
+              :xAxisData="XdaysData"
+              :seriesData="washTypeBarData"
+              text="" />
+            <span v-if="isNoData" class="noData">暂无数据</span>
+          </a-col>
+          <!-- 变化趋势 -->
+          <a-col span="24" v-if="currentTabChart=='tab2'">
+            <chart-line
+              ref="ChartLine"
+              style="height: 300px;"
+              color="#6C6FBE"
+              yUnit="kg"
+              :yMax="1000"
+              :xAxisRotate="resize"
+              :xAxisData="XdaysData"
+              :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">
+            <chart-pie
+              ref="chartPie"
+              class="chartPie-box"
+              :searchData="XdaysData"
+              :value="washTypePieData"
+              title="清运总量(kg)"
+              :total="chartData.allOrderNum"
+              :color="washTypePieColor"
+              :xAxisRotate="resize"
+              text="" />
+          </a-col>
+          <a-col span="12">
+            <!-- 各清运司机占比 百分比展示 -->
+            <chart-pie
+              ref="serverChartPie"
+              class="chartPie-box"
+              :searchData="XdaysData"
+              :value="couponChartData"
+              title="清运总量(台)"
+              :total="chartData.allOrderNum"
+              :color="couponColor"
+              :xAxisRotate="resize"
+              text="" />
+          </a-col>
+        </a-row>
+      </a-card>
+    </div>
+  </div>
 </template>
 
 <script>
+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 { stationList } from '@/api/releaseRecord.js'
+export default {
+  name: 'Home',
+  components: {
+    ChartPie,
+    ChartBar,
+    ChartLine
+  },
+  watch: {
+    screenWidth (val) {
+      // 为了避免频繁触发resize函数,使用定时器
+      if (!this.timer) {
+        this.screenWidth = val
+        this.timer = true
+        const that = this
+        setTimeout(function () {
+          // that.screenWidth = that.$store.state.canvasWidth
+          console.log(that.screenWidth)
+          that.timer = false
+        }, 400)
+      }
+    }
+  },
+  computed: {
+    isStationAll () { //  是否选择全部网点
+      let boolean
+      if (this.searchForm.storeIdList.length > 0) {
+        if (this.searchForm.storeIdList.indexOf('all') >= 0) {
+          boolean = true
+        } else {
+          boolean = false
+        }
+      } else {
+        boolean = false
+      }
+      return boolean
+    },
+    resize () {
+      console.log(this.screenWidth, 'this.screenWidth')
+      if (this.screenWidth < 1640) {
+        return 40
+      } else {
+        return 0
+      }
+    },
+    // 各类型占比总计数据
+    washTypePieData () {
+      const data = [{
+        'name': '快速洗车',
+        'value': this.chartData.KX
+      }, {
+        'name': '精致洗车',
+        'value': this.chartData.JX
+      }, {
+        'name': '打蜡精洗',
+        'value': this.chartData.DLX
+      }]
+      return data
+    },
+    // 洗车用券量占比数据
+    couponChartData () {
+      const data = [
+        {
+          'name': '未用券洗车量',
+          'value': this.chartData.notUseCouponOrderNum
+        },
+        {
+          'name': '用券洗车量',
+          'value': this.chartData.useCouponOrderNum
+        },
+        {
+          'name': '用券洗车量11',
+          'value': this.chartData.useCouponOrderNum
+        }
+      ]
+      return data
+    }
+  },
+  data () {
+    return {
+      screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
+      timer: false,
+      form: this.$form.createForm(this, { name: 'searchForm' }),
+      isNoData: false, // 是否有每天营业额及进店量数据
+      stationList: [], // 洗车网点列表
+      searchForm: {
+        queryWord: null, // 时间查询条件,默认本周
+        storeIdList: [] // 已选洗车网点
+      },
+      chartData: {
+        KX: 0, // 快洗
+        JX: 0, // 精洗
+        DLX: 0, // 打蜡洗
+        allOrderNum: 0, // 洗车总量
+        useCouponOrderNum: 0, // 用券洗车量
+        notUseCouponOrderNum: 0 // 未用券洗车量
+      },
+      // 快速删选tab
+      tabList: [{
+        name: '今天',
+        type: 'today'
+      },
+      {
+        name: '本周',
+        type: 'thisWeek'
+      },
+      {
+        name: '上周',
+        type: 'lastWeek'
+      },
+      {
+        name: '本月',
+        type: 'thisMonth'
+      }
+      ],
+      curentType: 'thisWeek', // 当前所选时间查询类型
+      beginDate: null, // 开始时间
+      endDate: null, // 结束时间
+      // 洗车量图表数据
+      clearnChartData: [{
+        name: '投递量',
+        type: 'line',
+        data: []
+      },
+      {
+        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: []
+      }
+      ],
+      // 各类型占比
+      washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
+      databack: {
+        couponChartData: [],
+        washTypePieData: [],
+        chartData: {}
+      }
+    }
+  },
+  methods: {
+    moment,
+    // 时间改变
+    dateChange (dates) {
+      console.log(dates, this.searchForm.queryWord, 'dddddd')
+      this.curentType = ''
+    },
+    // 不可选日期
+    disabledDate (date) {
+      return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 查询网点列表
+    getListStation () {
+      stationList().then(res => {
+        if (res.status == 200) {
+          this.stationList = res.data || []
+        } else {
+          this.stationList = []
+        }
+      })
+    },
+    // 页面初始化
+    pageInit () {
+      this.form.resetFields()
+      this.databack = {
+        couponChartData: _.cloneDeep(this.couponChartData),
+        washTypePieData: _.cloneDeep(this.washTypePieData),
+        chartData: _.cloneDeep(this.chartData)
+      }
+    },
+    // 查询
+    handleSearch () {
+      this.showChart = false
+      if (this.searchForm.queryWord != ',' && this.searchForm.queryWord.length) {
+        const searchTime = this.searchForm.queryWord.toString().split(',')
+        this.beginDate = this.exitTime(searchTime[0])
+        this.endDate = this.exitTime(searchTime[1])
+        this.getPageData()
+      } else {
+        this.$message.error('请选择统计区间')
+      }
+    },
+    // 重置
+    handleReset () {
+      this.searchForm.storeIdList = []
+      this.curentType = 'thisWeek'
+      this.getCurentSearchTime()
+    },
+    // 格式化时间
+    exitTime (time) {
+      const D = new Date(time)
+      const RES_DATE = D.getFullYear() + '-' + this.p((D.getMonth() + 1)) + '-' + this.p(D.getDate())
+      return RES_DATE
+    },
+    // p为不够10添加0的函数
+    p (s) {
+      return s < 10 ? '0' + s : s
+    },
+    // 获取快速查询时间 并 赋值到时间选择框中
+    getCurentSearchTime (item) {
+      this.curentType = item ? item.type : this.curentType
+      const quickType = {
+        lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
+        thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
+        lastWeek: [moment(getDate.getLastWeekDays().starttime), moment(getDate.getLastWeekDays().endtime)],
+        thisWeek: [moment(getDate.getCurrWeekDays().starttime), moment(getDate.getCurrWeekDays().endtime)],
+        yesterday: [moment(getDate.getYesterday().starttime), moment(getDate.getYesterday().endtime)],
+        today: [moment(getDate.getToday().starttime), moment(getDate.getToday().endtime)]
+      }
+      console.log(quickType[this.curentType])
+      this.searchForm.queryWord = quickType[this.curentType]
+      this.beginDate = quickType[this.curentType][0].format('YYYY-MM-DD')
+      this.endDate = quickType[this.curentType][1].format('YYYY-MM-DD')
+      console.log(this.searchForm.queryWord, '1111111')
+      this.getPageData()
+    },
+    // 根据查询条件获取所有数据
+    getPageData () {
+      this.XdaysData = [] // x轴置空
+      const _date = {
+        beginDate: this.beginDate,
+        endDate: this.endDate,
+        storeIdList: this.searchForm.storeIdList
+      }
+      console.log(_date, '_date')
+      getCleanReport(_date).then(res => {
+        console.log(res, 'rrrrrrr')
+        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
+          }
+        } 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)
+      })
+      this.XdaysData = days
+      const washTypeData = [kxData, jxData, dlxData]
+      // 各回收物类型柱状图表数据
+      this.washTypeBarData.map((item, index) => {
+        item.data = washTypeData[index]
+      })
+      // 各回收物类型折线图表数据
+      this.washTypeLineData.map((item, index) => {
+        item.data = washTypeData[index]
+      })
+      // 洗车量图表数据赋值
+      this.clearnChartData[0].data = totalData
+      this.clearnChartData[1].data = useCouponData
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.pageInit()
+      vm.getListStation() // 获取网点列表
+      vm.curentType = 'thisWeek'
+      vm.getCurentSearchTime()
+    })
+  },
+  // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
+  mounted () {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth
+        that.screenWidth = window.screenWidth
+      })()
+    }
+  }
+}
 </script>
+<style lang="less" scoped>
+  .home{
+    width: 100%;
+  }
+  .report-page {
+    margin-top: 10px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    .search-panel {
+      .ivu-card-body>div {
+        display: inline-block;
+        margin-right: 20px;
+      }
+
+      .desc {
+        color: #999;
+      }
+
+      .searchItem {
+        padding: 8px 20px;
+        border: 1px dashed #EEEEEE;
+        margin: 0 5px;
+        border-radius: 5px;
+      }
+
+      .active {
+        background-color: #ff9900;
+        color: #fff;
+        border: none;
+      }
+    }
+
+    .panel {
+      margin-top: 10px;
+      background-color: #FFFFFF;
+
+      .noData {
+        background-color: rgba(50, 50, 50, 0.7);
+        color: #fff;
+        padding: 15px 30px;
+        position: absolute;
+        top: 40%;
+        left: 40%;
+      }
+      .chartPie-box{
+        height: 300px;
+        width: 100%;
+      }
+      .panel-title {
+        font-size: 18px;
+        color: #333;
+        padding-bottom: 5px;
+      }
+
+      .tab-card {
+        float: right;
+
+        .tab-card-item {
+          padding: 5px 10px;
+          border: 1px solid #eee;
+          cursor: pointer;
+        }
+
+        .checked-item {
+          border-color: #2d8cf0;
+          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 {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      color: #FFFFFF;
+
+      span {
+        font-weight: 600;
+        font-size: 20px;
+      }
+    }
+
+    .module-icon {
+      width: 52px;
+      height: 54px;
 
-<style>
+    }
+  }
 </style>