oil-station/fuintAdmin/src/views/financialStatement/buy/tab/em.vue

<!-- 收银台订单-->
<template>
  <div class="container" >

    <div class="wgang">
      <div style="display: flex;align-items: center ">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
          <el-form-item label="">
            <el-date-picker
              v-model="queryParams.dataRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </div>
    </div>
    <div class="wit_box">
      <div class="box-gang">
        <div class="box">
          <el-tooltip class="item" effect="dark" content="总加油升数" placement="top-start">
            <div class="size-bole"  style="color: #0DC291">{{orderStatistics.addOilMl}}</div>
          </el-tooltip>
          <div class="size-hui">
            <div class="dian" style="background: #0DC291"></div>
            <div class="nei">总加油升数</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="总加油笔数" placement="top-start">
            <div class="size-bole" style="color:#00CAFF;">{{orderStatistics.addOilNum}}</div>
          </el-tooltip>

          <div class="size-hui">
            <div class="dian" style="background: #00CAFF"></div>
            <div class="nei">总加油笔数</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="订单总金额（元）" placement="top-start">
            <div class="size-bole" style="color:#F44522;" >{{orderStatistics.orderNum}}</div>
          </el-tooltip>

          <div class="size-hui">
            <div class="dian" style="background: #F44522"></div>
            <div class="nei">订单总金额（元）</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="优惠总金额（元）" placement="top-start">
            <div class="size-bole"  style="color:#FF7E00;" >{{orderStatistics.discountAmount}}</div>
          </el-tooltip>

          <div class="size-hui">
            <div class="dian" style="background: #FF7E00"></div>
            <div class="nei">优惠总金额（元）</div>
          </div>
        </div>

        <div class="box">
          <el-tooltip class="item" effect="dark" content="实收总金额（元）" placement="top-start">
            <div class="size-bole"  style="color:#E05295;" >{{orderStatistics.payAmount}}</div>
          </el-tooltip>
          <div class="size-hui">
            <div class="dian" style="background: #E05295"></div>
            <div class="nei">实收总金额（元）</div>
          </div>
        </div>
        <div class="box">
          <el-tooltip class="item" effect="dark" content="退款总金额" placement="top-start">
            <div class="size-bole"  style="color:#0047FF;" >{{orderStatistics.refMoney}}</div>
          </el-tooltip>
          <div class="size-hui">
            <div class="dian" style="background: #0047FF"></div>
            <div class="nei">退款总金额</div>
          </div>
        </div>
      </div>


      <div class="table-box">
        <el-table
          :data="orderStatisticsAllMsg"
          border
          style="width: 100%;margin-top: 15px">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="userName" align="center" label="员工姓名"> </el-table-column>
          <el-table-column prop="addOilMl" align="center" label="加油升数（元）"> </el-table-column>
          <el-table-column prop="addOilNum" align="center" label="加油笔数"> </el-table-column>
          <el-table-column prop="orderNum" align="center" label="订单金额（元）"> </el-table-column>
          <el-table-column prop="discountAmount" align="center" label="优惠金额（元）"> </el-table-column>
          <el-table-column prop="refMoney" align="center" label="退款金额（元）"> </el-table-column>
          <el-table-column prop="payAmount" align="center" label="实收金额（元）"> </el-table-column>
          <el-table-column prop="days" align="center" label="统计周期"> </el-table-column>
          <!--          <div slot="empty" class="empty">-->
          <!--            <el-empty description="暂无数据"></el-empty>-->
          <!--          </div>-->
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>

import {
  getInstituionListApi,
  getRunningWaterByDataApi,
  exportExcelOilDeptApi,
  getmyDataApi,
  getInstituionListApi2,
  getInstituionListApi19,
  getRunningWaterByDataApi21
} from "@/api/allOrder";

export default {
  name: "runningWater-oilDepot",
  data(){
    return{
      loading:false,
      // 员工列表
      staffList:[],
      // 日期范围
      dateRange: [],
      beginTime:"",
      endTime:"",
      // 是否为当天时间
      isSysDate:false,
      // 收银台订单列表
      orderList:[],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        beginTime:"",
        endTime:"",
        deptType:"3",
        dataRange:[]

      },
      orderStatistics:{
        addOilMl:'0',
        addOilNum:'0',
        orderNum:'0',
        discountAmount:'0',
        refMoney:'0',
        payAmount:'0',
      },
      orderStatisticsAllMsg:{
        days:'',
        userName:'',
        addOilMl:'0',
        addOilNum:'0',
        orderNum:'0',
        discountAmount:'0',
        refMoney:'0',
        payAmount:'0',
      },
      total:0,
      timeDifference:1,
    }
  },
  async created() {
    let start = new Date();
    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)
    start.setMilliseconds(0)
    let year = start.getFullYear();  // 获取年份
    let month = String(start.getMonth() + 1).padStart(2, '0');  // 获取月份，月份从0开始所以要+1
    let date = String(start.getDate()).padStart(2, '0');  // 获取日期
    this.queryParams.dataRange = [ year+'-'+month+'-'+date, year+'-'+month+'-'+date];
    this.isSysDate = true
    await this.getDeptList();
    this.getList();
    this.getOrderStatistics()

  },
  methods:{
    getDays(){

      this.timeDifferenceMilliseconds = this.endTime - this.beginTime;
      this.timeDifference = timeDifferenceMilliseconds / (1000 * 60 * 60 * 24);
      console.log("timeDifference",this.timeDifference)

    },
    exportExcelCashier() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      exportExcelOilDeptApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        this.$download.saveAs(blob,'油站流水订单统计.xLsx')
      })
    },
    // 获取订单统计信息

    getOrderStatistics() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      getRunningWaterByDataApi21(this.addDateRange(this.queryParams, dateRange)).then(res=>{
        this.orderStatistics = res.data
      })
    },
    async getDeptList() {
      await getmyDataApi(this.addDateRange(this.queryParams)).then( response => {
        this.queryParams.deptId = response.data.deptId;
      })
    },

    // 获取列表信息
    getList(val){
      getInstituionListApi19(this.queryParams).then( response => {
        this.orderStatisticsAllMsg = response.data.records;
        this.total = response.data.total;
        this.isSysDate = false
      })

    },

    // 搜索按钮操作
    async handleQuery() {
      this.queryParams.page = 1;
      await this.getDeptList();
      this.getList();
    },
    // 重置按钮操作

    async resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        page: 1,
        pageSize: 10,
        deptType:"3",

      }
      let start = new Date();
      start.setHours(0)
      start.setMinutes(0)
      start.setSeconds(0)
      start.setMilliseconds(0)
      let year = start.getFullYear();  // 获取年份
      let month = String(start.getMonth() + 1).padStart(2, '0');  // 获取月份，月份从0开始所以要+1
      let date = String(start.getDate()).padStart(2, '0');  // 获取日期
      this.queryParams.dataRange = [ year+'-'+month+'-'+date, year+'-'+month+'-'+date];
      this.isSysDate = true
      await this.getDeptList()
      this.handleQuery();
    },
  }
}
</script>

<style scoped lang="scss">
.container{
  background: #f4f5f9;
  box-sizing: border-box;
  padding-bottom: 10px;
}
.app-top{
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: 10px;
}
.clearfix{
  width: 100%;

}
.box-card{
  width: 100%;
  margin-bottom: 15px;
}
.card-chan{
  width: 99%;
  background: #fff;

  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}

.box-gang{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box{
  padding: 5px;
  padding-left: 20px;
  width: 275px;
  height: 60px;
  background:#fff;
  border-radius: 10px;
  border: 1px solid #FF9655;
  margin-right: 15px;
}
.el-form--inline .el-form-item {
  margin-right: 44px;
  margin-bottom: 0px;
}
.size-hui{
  display: flex;
  align-items: center;
  //width: 200px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 13px;
  color: #888888;
  //line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;

}
.size-bole{
  height: 31px;
  //font-family: YouSheBiaoTiHei;
  font-weight: 600;
  font-size: 24px;
  color: #555555;
  //line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.wgang{
  width: 99%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;

}
.table-box{
  width: 100%;
  height: 58vh;
  overflow: auto;
}
.wit_box{
  width: 99%;
  background: #FFFFFF;
  margin: 5px auto;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 4px;
  height: 78vh;
}
.pagination-box{
  width: 100%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-app-sou{
  width: 20%;
}
.tk{
  text-align: center;
  color: grey;
  margin: 10px 0;
}
.icon-img{
  //margin-left: 110px;
  width: 100%;
  height: 20px;
  margin-right: 5px;
  img{
    float: right;
    //width: 100%;
    width: 20px;
    height: 100%;
  }
}
.dian{
  width: 6px;
  height: 6px;
  border-radius: 8px;
  margin-right: 5px;
}
</style>