oil-station/fuintAdmin_zt/src/views/financialStatement/dai_yunyingfenxi/tab/paym.vue

<!-- 收银台订单-->
<template>
  <div style="padding-top: 20px; padding-right: 40px; background: #f6f8f9;">
    <el-card class="box-card" style="margin-top: 0px;" shadow="never">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px" >
        <div class="d-s" style="margin-bottom: 15px;justify-content: space-between">
          <div class="d-s">
            <div class="anniu-h" :class="{ 'anniu-act': index == timeIndex }" v-for="(item,index) in timeList"
                 :key="index" @click="editColor(index)">
              {{ item }}
            </div>
            <el-date-picker
              v-model="value2"
              type="datetimerange"
              style="height: 32px"
              range-separator="至"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :disabled="disabled"
              @click="handleQuery">
            </el-date-picker>
            <div style="margin-left: 15px;margin-top: 17px">
              <el-form-item label="" prop="deptId" style="width: 180px">
                <el-select
                  v-model="queryParams.deptId"
                  clearable
                  placeholder="所属机构"
                >
                  <el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.deptId">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>

          <el-form-item class="" style="float: right;margin-top: 17px;">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div class="wrap-boxs">
        <div class="k_" id="k_1">
          <div class="size_">交易金额汇总数（万元）/交易笔数</div>
          <div class="title_">{{ orderStatistics.payMoney?orderStatistics.payMoney/10000:0 }}/{{ orderStatistics.count }}</div>
        </div>
        <div class="k_" id="k_2" v-for="item in orderStatistics.fenxiByDaili2ByData">
          <div class="size_">{{ item.paymentChannel }}交易金额（万元）</div>
          <div class="title_">{{ item.payMoneyChannel?item.payMoneyChannel/10000:0 }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="min-height: 500px;" shadow="never">
      <div class="table-box">
        <el-table
          :data="orderList"
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column align="center" prop="storeName" label="机构名称"></el-table-column>
          <el-table-column align="center" prop="parentName" label="所属机构"></el-table-column>
          <el-table-column align="center" prop="payMoney" label="累计交易金额"></el-table-column>
          <el-table-column align="center" prop="count" label="累计交易笔数"></el-table-column>
          <el-table-column align="center" label="支付通道交易信息：金额（万元），笔数（万笔），占比（%）">
            <template>
              <el-table-column align="center" prop="fuYouAmount" label="富友交易金额">
                <template slot-scope="scope">
                  <span>{{scope.row.fuYouAmount/100000 || 0}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="fuYouCount" label="富友交易笔数">
                <template slot-scope="scope">
                  <span>{{scope.row.fuYouCount/1000 || 0}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="fuYouAmount" label="富友交易占比">
                <template slot-scope="scope">
                  <span>{{(scope.row.fuYouAmount/(scope.row.payMoney)).toFixed(2) || 0}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="laKaLaAmount" label="拉卡拉交易金额">
                <template slot-scope="scope">
                  <span>{{scope.row.laKaLaAmount/100000 || 0}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="laKaLaCount" label="拉卡拉交易笔数">
                <template slot-scope="scope">
                  <span>{{scope.row.laKaLaCount/1000 || 0}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="count92" label="拉卡拉交易占比">
                <template slot-scope="scope">
                  <span>{{(scope.row.laKaLaAmount/(scope.row.payMoney)).toFixed(2) || 0}}</span>
                </template>
              </el-table-column>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="date" label="统计日期">
            <template>
                            {{this.value2[0]}} 至 {{this.value2[1]}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-card>

  </div>
</template>

<script>

import {
  exportExcelTradingApi, getFenxiByDailiApi, getFenxiByDailiByDataApi,
  getRunningWaterByTissueApi,
  getTissueByDataApi,
  getTradingPageApi
} from "@/api/allOrder";
import {getFenXiOilOrderDataApi, getFenXiOilOrderListApi} from "@/api/financialStatement/yunyingfenxi";
import {parseTime} from "@/utils/fuint";

export default {
  name: "dai_yunyingfenxi-paym",
  data() {
    return {
      radio1: "油号选错",
      loading: false,
      dialogVisible: false,
      // 员工列表
      staffList: [],
      ordersInfo: {},
      // 日期范围
      dateRange: [],
      beginTime: "",
      endTime: "",
      // 是否为当天时间
      isSysDate: false,
      // 收银台订单列表
      orderList: [],
      deptList: [],


      timeList: [
        "今日",
        "近一周",
        "近一月",
        "近一年",
        "自定义",
      ],
      timeIndex: 0,
      disabled:true,
      value2: [],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        beginTime: "",
        endTime: "",
        orderNo: "",
        status: "",
        payType: "",
        payChannel: "",
        deptType: "3",
        storeId: "",
        deptId: "",
      },
      orderStatistics: {
        count: '0',

        payMoney: '0',
        fenxiByDaili2ByData: [
          {
            paymentChannel:'富友',
            payMoneyChannel:'0'
          },
          {
            paymentChannel:'拉卡拉',
            payMoneyChannel:'0'
          },
        ]
      },
      total: 0,
    }
  },
  created() {
    let start = new Date();
    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)
    start.setMilliseconds(0)
    this.dateRange = [start, new Date()];
    this.beginTime = start
    this.endTime = new Date()
    this.isSysDate = true
    let start1 = new Date();
    start1.setHours(0)
    start1.setMinutes(0)
    start1.setSeconds(0)
    start1.setMilliseconds(0)
    this.value2 = [parseTime(start1), parseTime(new Date())];
    this.getList();
    this.getDeptList();

  },
  methods: {
    editColor(index) {
      this.timeIndex = index
      this.disabled = true
      if (this.timeList[index] == '今日') {
        let start = new Date();
        start.setHours(0)
        start.setMinutes(0)
        start.setSeconds(0)
        start.setMilliseconds(0)
        this.value2 = [start, new Date()];
      } else if (this.timeList[index] == '近一周') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
        this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
      } else if (this.timeList[index] == '近一月') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
        this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
      } else if (this.timeList[index] == '近一年') {
        let nowDate = new Date();
        let oneWeekAgo = new Date(nowDate.getFullYear() - 1, nowDate.getMonth(), nowDate.getDate())
        this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
      }else if (this.timeList[index]=='自定义'){
        this.disabled = false
      }
      this.handleQuery()
    },
    getDeptList() {
      getRunningWaterByTissueApi(this.addDateRange(this.queryParams)).then(response => {
        this.deptList = response.data.records;
      })
    },
    exportExcelCashier() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      exportExcelTradingApi(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())
      }
      getFenxiByDailiByDataApi(this.addDateRange(this.queryParams, this.value2)).then(res => {
        this.orderStatistics = res.data
        if(this.orderStatistics.
          fenxiByDaili2ByData.length==0) {
          this.orderStatistics.fenxiByDaili2ByData = [{
              paymentChannel:'交易',
              payMoneyChannel:'0'
            },
            {
              paymentChannel:'富友',
              payMoneyChannel:'0'
            },
            {
              paymentChannel:'拉卡拉',
              payMoneyChannel:'0'
            }
          ]
        }
        console.log("res.data1111", res.data)
      })
    },


    // 获取列表信息
    getList(val) {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      getFenxiByDailiApi(this.addDateRange(this.queryParams, this.value2)).then(response => {
        this.orderList = response.data.records;
        this.total = response.data.total;
        this.isSysDate = false
      })
      this.getOrderStatistics()
    },
    getOrdersInfo(data) {
      this.dialogVisible = true;
      this.ordersInfo = data
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime = ""
      this.endTime = ""
      let start1 = new Date();
      start1.setHours(0)
      start1.setMinutes(0)
      start1.setSeconds(0)
      start1.setMilliseconds(0)
      this.value2 = [parseTime(start1), parseTime(new Date())];
      this.timeIndex = 0
      this.handleQuery();
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  margin: 0px 20px 20px 20px;
  border: none;
  box-shadow: none;
}

.el-form--inline .el-form-item {
  margin-right: 20px;
}

.table-box {
  width: 100%;
  height: 45vh;
  overflow: auto;
}

.wrap-boxs {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.k_ {
  width: 240px;
  height: 75px;
  margin-right: 20px;
  box-sizing: border-box;
  padding: 15px 10px;
  padding-top: 5px;
  color: #333333;
}

.size_ {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-bottom: 20px;
}

.title_ {
  font-weight: 600;
  font-size: 24px;
  color: #333333;
}

#k_1 {
  background: url("../imgs/k1.png");
  background-repeat: no-repeat; /* 禁止背景图片重复 */
  background-size:100% 100%;
  box-sizing: border-box;
}

#k_2 {
  background: url("../imgs/k2.png");
  background-repeat: no-repeat; /* 禁止背景图片重复 */
  background-size:100% 100%;
  box-sizing: border-box;
}

#k_3 {
  background: url("../imgs/k3.png");
  background-size: cover; /* 背景图片铺满盒子 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}

#k_4 {
  background: url("../imgs/k4.png");
  background-size: cover; /* 背景图片铺满盒子 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}

#k_5 {
  background: url("../imgs/k5.png");
  background-size: cover; /* 背景图片铺满盒子 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}

#k_6 {
  background: url("../imgs/k6.png");
  background-size: cover; /* 背景图片铺满盒子 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}

#k_7 {
  background: url("../imgs/k7.png");
  background-size: cover; /* 背景图片铺满盒子 */
  background-repeat: no-repeat; /* 禁止背景图片重复 */
}

.d-s {
  display: flex;
  align-items: center;
}

.anniu-h {
  width: 80px;
  height: 26px;
  background: #FAFAFA;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777777;
  margin-right: 20px;
}

.anniu-act {
  background: #FF9655 !important;
  border: 1px solid #FF9655 !important;
  color: #fff;

}

</style>