freight-web/src/PagesStatistics/businessOverview.vue

<template>
  <view class="c-layout">
    <StatisticCard :list="list" />
    <!-- {{ list }} -->
    <view class="card-box">
      <view class="c-tab">
        <text
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: currentTab === item.id }"
          @click="handleTab(item)"
        >
          {{ item.name }}
        </text>
      </view>
      <view class="c-grid">
        <view v-if="currentTab === 5" class="time"
          >{{ state.startTime.split(" ")[0] }} -
          {{ state.endTime.split(" ")[0] }}</view
        >
        <view class="box">
          <view v-for="(item, index) in gridList1" :key="index">
            <text v-if="item.name">{{ item.name }}：</text
            ><text
              >{{ item.isBefore ? item.unit : "" }} {{ formatMoney(item.num) }}
              {{ item.isBefore ? "" : item.unit }}
            </text>
          </view>
        </view>

        <view class="box">
          <view v-for="(item, index) in gridList2" :key="index">
            <text v-if="item.name">{{ item.name }}：</text
            ><text :class="item.isHighLight ? 'highLight' : ''"
              >{{ item.isBefore ? item.unit : "" }} {{ formatMoney(item.num) }}
              {{ item.isBefore ? "" : item.unit }}
            </text>
          </view>
        </view>

        <view class="box">
          <view v-for="(item, index) in gridList3" :key="index">
            <text>{{ item.name }}：</text
            ><text :class="item.isHighLight ? 'highLight' : ''"
              >{{ item.isBefore ? item.unit : "" }} {{ formatMoney(item.num) }}
              {{ item.isBefore ? "" : item.unit }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <TimeRangeFilter
    :show="isShowTimeDialog"
    @handleDialog="handleDialog"
    @handleOk="handleOk"
  />
</template>
<script setup lang="ts">
import StatisticCard from "@/components/StatisticCard/index.vue";
import TimeRangeFilter from "./components/TimeRangeFilter.vue";
import { FinanceApi, ReceiveApi, ShipmentApi } from "@/services";
import { formatMoney, timeRange } from "@/utils";
const list = reactive([
  {
    num: 0,
    name: "客户应收款总额",
  },
  {
    num: 0,
    name: "供应商应付款总额",
  },
]);

const currentTab = ref(3);
const tabList = reactive([
  {
    id: 2,
    name: "昨日",
  },
  {
    id: 3,
    name: "本月",
  },
  {
    id: 4,
    name: "本年",
  },
  {
    id: 5,
    name: "自定义",
  },
]);
const handleTab = (item: any) => {
  if (item.id === 5) {
    handleDialog(true);
  } else {
    currentTab.value = item.id;
    getOverview();
  }
};
const handleOk = (v: any) => {
  state.startTime = v.startTime;
  state.endTime = v.endTime;
  currentTab.value = 5;
  getOverview();
};
const randomNum = (index: number) => {
  return Math.floor(Math.random() * (10000 - 1 + 1)) + 1 + index;
};

const gridList1 = reactive([
  {
    name: "总收入",
    enName: "totalIncome",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "出货收入",
    enName: "totalShipment",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "其他收入",
    enName: "totalOther",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {},
  {
    name: "总支出",
    enName: "totalExpenditure",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "收货支出",
    enName: "totalReap",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "其他支出",
    enName: "totalOther",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "杂费支出",
    enName: "totalIncidentals",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "运费支出",
    enName: "totalFreight",
    num: "",
    unit: "￥",
    isBefore: true,
  },
]);
const gridList2 = reactive([
  {
    name: "出货实收金额",
    enName: "actualReceived",
    num: "",
    unit: "￥",
    isBefore: true,
    isHighLight: true,
  },
  {
    name: "出货应收金额",
    enName: "receivable",
    num: "",
    unit: "￥",
    isBefore: true,
    isHighLight: true,
  },
  {
    name: "出货笔数",
    enName: "orderOutNum",
    num: "2",
    isHighLight: true,
  },
  {
    name: "",
    num: "",
  },
  {
    name: "出货总重量",
    enName: "outTotalWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "出货净重（客户）",
    enName: "customerTotalWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "出货重量(已结)",
    enName: "payOutTotalWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算总重量",
    enName: "totalSettlement",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "出货重量(未结)",
    enName: "unPayOutTotalWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算重量(已结)",
    enName: "payTotalSettlement",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "净重误差",
    enName: "netError",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "结算总量(未结)",
    enName: "unPayTotalSettlement",
    num: "",
    unit: "KG",
    isBefore: false,
  },
]);
const gridList3 = reactive([
  {
    name: "收货总重量",
    enName: "payTotalWeight",
    num: "",
    unit: "KG",
    isBefore: false,
    isHighLight: true,
  },
  {
    name: "收货笔数",
    enName: "orderInNum",
    num: "",
    unit: "",
    isBefore: false,
    isHighLight: true,
  },
  {
    name: "收货重量(已付)",
    enName: "paymentTotalPrice",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "收货实付金额",
    enName: "totalWeight",
    num: "",
    unit: "￥",
    isBefore: true,
  },
  {
    name: "收货重量(未付)",
    enName: "unPayTotalWeight",
    num: "",
    unit: "KG",
    isBefore: false,
  },
  {
    name: "收货应付金额",
    enName: "unPaymentTotalPrice",
    num: "",
    unit: "￥",
    isBefore: true,
  },
]);

const isShowTimeDialog = ref(false);
const handleDialog = (v: boolean) => {
  isShowTimeDialog.value = v;
};
const state = reactive({
  startTime: "",
  endTime: "",
});

const getReceiveOverView = () => {
  ReceiveApi.getOverview({
    startTime: state.startTime,
    endTime: state.endTime,
  }).then((res: any) => {
    if (res.code === 200) {
      gridList3.map((item) => {
        item.num = res.data[item.enName as string];
      });
    }
  });
};

const getShipmentOverView = () => {
  ShipmentApi.getOverview({
    startTime: state.startTime,
    endTime: state.endTime,
  }).then((res: any) => {
    if (res.code === 200) {
      gridList2.map((item) => {
        item.num = res.data[item.enName as string];
      });
    }
  });
};

const getPaymentCount = () => {
  FinanceApi.getPaymentCount({
    startTime: state.startTime,
    endTime: state.endTime,
  }).then((res: any) => {
    if (res.code === 200) {
      gridList1.map((item) => {
        if (Object.keys(res.data).includes(item.enName + "")) {
          item.num = res.data[item.enName as string];
        }
      });
    }
  });
};

const getRevenueCount = () => {
  FinanceApi.getRevenueCount({
    startTime: state.startTime,
    endTime: state.endTime,
  }).then((res: any) => {
    if (res.code === 200) {
      gridList1.map((item) => {
        if (Object.keys(res.data).includes(item.enName + "")) {
          item.num = res.data[item.enName as string];
        }
      });
    }
  });
};

const getOverview = () => {
  if (currentTab.value < 5) {
    const range = timeRange(currentTab.value);
    state.startTime = range.startTime + " 00:00:00";
    state.endTime = range.endTime + " 23:59:59";
  } else if (currentTab.value === 5) {
    state.startTime = state.startTime + " 00:00:00";
    state.endTime = state.endTime + " 23:59:59";
  }
  getReceiveOverView();
  getShipmentOverView();
  getPaymentCount();
  getRevenueCount();
};

// 获取客户/供应商应收应付总额
const getTotal = () => {
  ReceiveApi.getTotal().then((res: any) => {
    if (res.code === 200) {
      const { unPayCustomerTotal, unPaySupplierTotal } = res.data;
      list[0].num = unPayCustomerTotal;
      list[1].num = unPaySupplierTotal;
    }
  });
};
onMounted(() => {
  getTotal();
  getOverview();
});
</script>
<style lang="scss" scoped>
.card-box {
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin-top: 25rpx;
  .c-tab {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 41rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
    text {
      padding: 16rpx;
    }
    .active {
      color: $u-primary;
      border-bottom: 5rpx solid $u-primary;
      border-radius: 5rpx;
    }
  }
  .c-grid {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    .time {
      margin-top: 30rpx;
      margin-right: 30rpx;
      text-align: right;
      font-size: 26rpx;
      font-weight: bold;
    }
    .box {
      padding: 30rpx;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      flex: 1;
      .highLight {
        color: rgba(236, 15, 62, 1);
      }
      > view {
        line-height: 50rpx;
      }
    }
    .box + .box {
      border-top: 18rpx solid #f8f8f8;
    }
  }
}
</style>