wash_server_v2/admin-ui/src/views/order/statistics/bywash.vue

<template>
    <div class="app-container">
      <!-- 搜索表单 -->
      <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="日期范围" prop="dateRange">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="handleDateRangeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="门店" prop="storeId">
          <el-select v-model="queryParams.storeId" placeholder="请选择门店" clearable>
            <el-option
              v-for="store in storeOptions"
              :key="store.id"
              :label="store.name"
              :value="store.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <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>
      </el-form>
  
      <!-- 操作按钮 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="mb8">
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>收衣订单数</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.receiveOrderCount || 0" :duration="2000"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>收衣总件数</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.receiveTotalQuantity || 0" :duration="2000"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>收衣订单总金额</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.receiveTotalAmount || 0" :duration="2000" :decimals="2" prefix="¥"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>收衣未支付订单数</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.receiveUnpaidOrderCount || 0" :duration="2000"></count-to>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mb8">
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>收衣未支付订单金额</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.receiveUnpaidAmount || 0" :duration="2000" :decimals="2" prefix="¥"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>取衣订单数</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.pickupOrderCount || 0" :duration="2000"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>取衣总件数</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.pickupTotalQuantity || 0" :duration="2000"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>取衣订单总金额</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.pickupTotalAmount || 0" :duration="2000" :decimals="2" prefix="¥"></count-to>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mb8">
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>取衣已支付订单数</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.pickupPaidOrderCount || 0" :duration="2000"></count-to>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header"><span>取衣已支付订单金额</span></div>
            <div class="card-body">
              <count-to :startVal="0" :endVal="totalStatistics.pickupPaidAmount || 0" :duration="2000" :decimals="2" prefix="¥"></count-to>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 数据表格 -->
      <el-table v-loading="loading" :data="statisticsList" border>
        <el-table-column label="门店名称" align="center" prop="storeName" />
        <el-table-column label="收衣" align="center">
          <el-table-column label="订单数" prop="receiveOrderCount" align="center" />
          <el-table-column label="总件数" prop="receiveTotalQuantity" align="center" />
          <el-table-column label="订单总金额" prop="receiveTotalAmount" align="center" />
          <el-table-column label="未支付订单数" prop="receiveUnpaidOrderCount" align="center" />
          <el-table-column label="未支付订单金额" prop="receiveUnpaidAmount" align="center" />
        </el-table-column>
        <el-table-column label="取衣" align="center">
          <el-table-column label="订单数" prop="pickupOrderCount" align="center" />
          <el-table-column label="总件数" prop="pickupTotalQuantity" align="center" />
          <el-table-column label="订单总金额" prop="pickupTotalAmount" align="center" />
          <el-table-column label="已支付订单数" prop="pickupPaidOrderCount" align="center" />
          <el-table-column label="已支付订单金额" prop="pickupPaidAmount" align="center" />
        </el-table-column>
        <el-table-column label="入厂衣服数" align="center" prop="dailyInFactoryCount" />
        <el-table-column label="检查衣服数" align="center" prop="dailyCheckedCount" />
        <el-table-column label="出厂衣服数" align="center" prop="dailyOutFactoryCount" />
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import { listStatisticsByStore, getTotalStatistics, listFactoryStatisticsByStore } from '@/api/settlement/statistics'
  import { listStore } from "@/api/system/store";
  import CountTo from 'vue-count-to'
  
  export default {
    name: "FactoryStatisticsByStore",
    components: {
      CountTo
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 统计列表
        statisticsList: [],
        // 总统计数据
        totalStatistics: {},
        // 门店选项
        storeOptions: [],
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          startDate: null,
          endDate: null,
          storeId: null
        },
        // 日期选择器配置
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近半个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      };
    },
    created() {
      // 设置默认日期范围为最近半个月
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
      this.dateRange = [this.formatDate(start), this.formatDate(end)];
      this.queryParams.startDate = this.dateRange[0];
      this.queryParams.endDate = this.dateRange[1];
  
      this.getList();
      this.getStoreOptions();
    },
    methods: {
      /**
       * 格式化日期为 yyyy-MM-dd
       * @param {Date} date 日期对象
       * @returns {string} 格式化后的日期字符串
       */
      formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      /**
       * 日期范围变化处理
       * @param {Array} val 日期范围数组
       * @returns {void}
       */
      handleDateRangeChange(val) {
        if (val) {
          this.queryParams.startDate = val[0];
          this.queryParams.endDate = val[1];
        } else {
          this.queryParams.startDate = null;
          this.queryParams.endDate = null;
        }
      },
      /**
       * 查询统计列表
       * @returns {void}
       */
      getList() {
        this.loading = true;
        listFactoryStatisticsByStore(this.queryParams).then(response => {
          this.statisticsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        // 获取总统计数据
        getTotalStatistics(this.queryParams).then(response => {
          this.totalStatistics = response.data
        });
      },
      /**
       * 获取门店选项
       * @returns {void}
       */
      getStoreOptions() {
        listStore().then(response => {
          this.storeOptions = response.rows;
        });
      },
      /**
       * 搜索按钮操作
       * @returns {void}
       */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /**
       * 重置按钮操作
       * @returns {void}
       */
      resetQuery() {
        this.resetForm('queryForm');
        // 重置日期范围为最近半个月
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
        this.dateRange = [this.formatDate(start), this.formatDate(end)];
        this.queryParams.startDate = this.dateRange[0];
        this.queryParams.endDate = this.dateRange[1];
        this.handleQuery();
      },
      /**
       * 导出按钮操作
       * @returns {void}
       */
      handleExport() {
        this.$confirm('是否确认导出所有工厂门店统计数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.download('/mapi/settlement/factory/statistics/export/bystore', {
            ...this.queryParams
          }, `工厂门店报表统计_${new Date().getTime()}.xlsx`);
        });
      }
    }
  };
  </script>
  
  <style scoped>
  .mb8 {
    margin-bottom: 8px;
  }
  .card-body {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #409EFF;
  }
  </style>