freight-web/src/PagesStatistics/supplierRanking.vue

<template>
  <view class="layout-box">
    <view class="filter">
      <u-input
        v-model="state.startTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择开始时间"
      ></u-input>
      <text>-</text>
      <u-input
        v-model="state.endTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择结束时间"
      ></u-input>
      <u-icon
        name="arrow-down"
        @click="handleDialog('showTime', true)"
      ></u-icon>

      <text class="btn" @click="handleDialog('showFilter', true)"
        >收货产品</text
      >
    </view>
  </view>

  <view v-if="state.x.length > 0">
    <c-echarts :option="getOptions(state.x, state.y)" :height="'90vh'" />
  </view>
  <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
  </u-empty>

  <!-- 时间弹框 -->
  <TimeDialog
    ref="timeDialog"
    :show="showDialog.showTime"
    @handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
    @changeTime="changeTime"
  />
  <!-- 单据弹框 -->
  <view>
    <ProductTypeDialog
      :show="showDialog.showFilter"
      @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
      :isShipment="false"
      @changeProduct="changeProduct"
    />
  </view>
</template>
<script setup lang="ts">
import TimeDialog from "./components/TimeDialog.vue";
import CEcharts from "./Echarts/echarts.vue";
import ProductTypeDialog from "./components/ProductTypeDialog.vue";
import { ReceiveApi } from "@/services";
import { formatDate, getCurrentMonthStartAndEnd } from "@/utils";
import _ from "underscore";
const getOptions = (x: Array<any>, y: Array<any>) => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    grid: {
      left: "10px",
      right: "20px",
      top: "10px",
      bottom: "30px",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: y,
      axisLabel: {
        // inside: true,
        // color: '#fff'
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#83bff6",
        },
      },
    },
    series: [
      {
        data: x,
        type: "bar",
        areaStyle: {
          show: true,
        },
        barWidth: 24,
      },
    ],
    color: ["#00D2E3"],
  };
};
const changeProduct = (obj: any) => {
  state.productId = obj.productId;
  getList();
};
const showDialog = <
  {
    [key: string]: boolean;
  }
>reactive({
  showTime: false,
  showFilter: false,
});
const handleDialog = (key: string, v: boolean) => {
  showDialog[key] = v;
};
const state = reactive<{
  startTime: string;
  endTime: string;
  scaleStatus: number;
  userId: number;
  productId: number;
  x: Array<any>;
  y: Array<any>;
}>({
  startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
  endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
  scaleStatus: -1,
  userId: -1,
  productId: -1,
  x: [],
  y: [],
});

const changeTime = (obj: any) => {
  state.startTime = obj.startTime;
  state.endTime = obj.endTime;
  getList();
};

const getList = () => {
  let params: any = {
    startTime: state.startTime + " 00:00:00",
    endTime: state.endTime + " 23:59:59",
  };
  if (state.scaleStatus > -1) {
    params.scaleStatus = state.scaleStatus;
  }
  if (state.userId > -1) {
    params.userId = state.userId;
  }
  if (state.productId > -1) {
    params.productId = state.productId;
  }
  ReceiveApi.OrderInRanking(params).then((res: any) => {
    if (res.code === 200) {
      state.y = _.pluck(res.data, "userName");
      state.x = _.pluck(res.data, "totalAmount");
    }
  });
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.layout-box {
  margin: 35.9rpx 25.64rpx;
  .filter {
    display: flex;
    align-items: center;
    justify-items: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #000000;
    ::v-deep .u-input {
      padding: 0rpx 16.03rpx !important;
      input {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx !important;
        color: #000000;
      }
    }
    text {
      margin: 0px 5rpx;
    }
    .status {
      margin-left: 40rpx;
    }
    .btn {
      color: $u-primary;
      margin-left: 40rpx;
      margin-right: 0rpx;
    }
  }
}
</style>