canrd-outside / order-erp-front · Files

<template>
  <div style="margin-bottom: 30px">
    <span v-if="role === ROLE.ADMIN">
      <span style="font-size: 18px; margin-right: 10px">客户编码</span>
      <a-select
        v-model:value="value1"
        show-search
        placeholder="请选择"
        style="width: 200px"
        :options="customerCodeOptions"
        :filter-option="filterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChangeBusiness"
        mode="multiple"
      />
      <span style="right: 10px"
        ><a-button
          type="default"
          @click="clearData"
          :style="{ marginLeft: '100px', borderRadius: '5px 5px 5px 5px' }"
        >
          重置
        </a-button>
        <a-button
          :style="{ marginLeft: '20px', borderRadius: '5px 5px 5px 5px' }"
          shape="default"
          type="primary"
          @click="updateData"
          >查询</a-button
        ></span
      ></span
    >
    <div style="position: fixed; top: 80px; right: 70px">
      <a-radio-group
        v-model:value="periodChange"
        class="custom-radio-group"
        :style="{ marginLeft: '100px' }"
      >
        <a-radio-button value="MONTH" @click="handlePeriodChange('MONTH')">月</a-radio-button>
        <a-radio-button value="QUARTER" @click="handlePeriodChange('QUARTER')">季度</a-radio-button>
        <a-radio-button value="YEAR" @click="handlePeriodChange('YEAR')">年</a-radio-button>
      </a-radio-group>
    </div></div
  >
  <div v-if="role !== ROLE.ADMIN" style="margin-bottom: 60px"></div>
  <div ref="chartRef" :style="{ height: '400px', width }"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>
<script lang="ts" setup>
  import { computed, onMounted, ref, Ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { useDataStoreWithOut } from '/@/store/modules/data';
  import { businessPersonIn, customerCodeIn, useUserStoreWithOut } from '@/store/modules/user';

  //biaoji
  import type { SelectProps } from 'ant-design-vue';
  import { getCustomerSalesData } from '/@/api/project/global';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { useOrderInfo } from '/@/hooks/component/order';
  import { ROLE } from '/@/views/project/order/type.d';

  const userStore = useUserStoreWithOut();
  const user = userStore.getUserInfo;
  const role = computed(() => {
    return user?.roleSmallVO?.code;
  });
  const orderStore = useOrderStoreWithOut();
  onMounted(async () => {
    await orderStore.getDict();
  });
  const { customerCode: customerCodeOptions, businessPerson: businessPersonOptions } =
    useOrderInfo(orderStore);

  const periodChange = ref('MONTH');
  const searchCustomerCode = ref();
  // const businessPersonInChange = ref();
  const businessPersonInChange: string[] = [];
  const customerCodeInChange: string[] = [];
  const handleChangeBusiness = (value: string) => {
    if (businessPersonInChange.length === 0) {
      // 如果数组为空，直接将 value 值放入数组
      businessPersonInChange.push(value);
    } else {
      // 如果数组不为空，清空数组再将 value 值放入数组
      businessPersonInChange.length = 0; // 也可以使用 array.splice(0, array.length);
      businessPersonInChange.push(value);
    }
    // console.log(`5656selected ${businessPersonInChange}`);
  };
  const handleChangeCustomer = (value: string) => {
    if (customerCodeInChange.length === 0) {
      // 如果数组为空，直接将 value 值放入数组
      customerCodeInChange.push(value);
    } else {
      // 如果数组不为空，清空数组再将 value 值放入数组
      customerCodeInChange.length = 0; // 也可以使用 array.splice(0, array.length);
      customerCodeInChange.push(value);
    }
    // console.log(`5656selected ${customerCodeInChange}`);
  };
  const handleBlur = () => {};
  const handleFocus = () => {};
  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const value1 = ref();
  const value2 = ref();

  function handlePeriodChange(value) {
    periodChange.value = value;
  }
  //biaoji

  defineProps({
    ...basicProps,
  });
  const dataStore = useDataStoreWithOut();

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  function updateData() {
    customerCodeIn.value = value1.value;
  }
  function clearData() {
    customerCodeIn.value = [];
    value1.value = [];
    value2.value = null;
  }

  watchEffect(async () => {
    // // const data1 = dataStore?.getCustomerChartData1 || {};
    // // 如果有选择的 customerCode 值
    // const customerCodeParams = customerCodeIn.value
    //   ? customerCodeIn.value.map((code) => `customerCodeIn=${encodeURIComponent(code)}`).join('&')
    //   : '';

    // // 拼接请求的完整 URL
    // const baseURL = '/basic-api/order/erp/index/totalSalesStatistics';
    // const periodParam = `period=${periodChange.value}`;
    // const fullURL = `${baseURL}?${customerCodeParams}&${periodParam}`;

    // // // 发送请求
    // // const data2 = await fetch(fullURL)
    // //   .then((response) => response.json())
    // //   .catch((error) => {
    // //     console.error('Error fetching sales data:', error);
    // //     return {};
    // //   });
    // const data2 = await getCustomerSalesData({
    //   customerCodeIn: customerCodeIn.value,
    //   period: periodChange.value,
    // });
    // const data2 = await getCustomerSalesData(
    //   {
    //     period: periodChange.value,
    //   },
    //   customerCodeParams,
    // );
    // 构造请求参数
    const customerCodeParams = customerCodeIn.value
      ? customerCodeIn.value.map((code) => `customerCodeIn=${encodeURIComponent(code)}`).join('&')
      : '';

    // 构造完整请求 URL
    const baseURL = '/basic-api/order/erp/index/salesStatusEveryCustomer';
    const periodParam = `period=${encodeURIComponent(periodChange.value)}`;
    const fullURL = `${baseURL}?${customerCodeParams}&${periodParam}`;

    // 使用 fetch 或其他请求库发送请求
    const response = await fetch(fullURL);
    const res = await response.json();
    const data2 = res.data;

    const x = [],
      y = [],
      z = [];
    for (const key in data2) {
      x.push(key);
      y.push(data2[key].salesAmount);
      z.push(data2[key].target);
    }
    const customerChartData1 = { x, y, z };
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      legend: {
        data: ['销售额', '销售目标'],
      },
      grid: { left: '1%', right: '1%', top: '10  %', bottom: 0, containLabel: true },
      xAxis: {
        type: 'category',
        data: customerChartData1?.x,
      },
      yAxis: {
        type: 'value',
        // // max: 8000,
        // splitNumber: 4,
      },
      series: [
        {
          name: '销售额',
          data: customerChartData1?.y,
          type: 'bar',
          barMaxWidth: 80,
        },
        {
          name: '销售目标',
          smooth: true,
          data: customerChartData1?.z,
          type: 'line',
          areaStyle: {
            color: 'rgba(255, 255, 255, 0)',
          },
          itemStyle: {
            color: 'rgba(124, 205, 214)',
          },
        },
      ],
    });
  });
</script>
<style scoped>
  .custom-radio-group .ant-radio-button-wrapper {
    background-color: white; /* 未选中按钮的背景颜色为白色 */
    color: #1684fc; /* 未选中按钮的文字颜色为 #1684fc */
    border-color: #1684fc; /* 未选中按钮的边框颜色 */
  }

  .custom-radio-group .ant-radio-button-wrapper-checked {
    background-color: #1684fc; /* 选中按钮的背景颜色为 #1684fc */
    color: white; /* 选中按钮的文字颜色为白色 */
    border-color: #1684fc; /* 选中按钮的边框颜色 */
  }

  .custom-radio-group .ant-radio-button-wrapper-checked:hover {
    background-color: #1684fc; /* 悬停在选中按钮时保持相同的背景颜色 */
    color: white; /* 悬停在选中按钮时保持文字为白色 */
  }

  .custom-radio-group .ant-radio-button-wrapper:hover {
    border-color: #1684fc; /* 悬停在未选中按钮时的边框颜色 */
  }

  .custom-radio-group .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked):hover {
    color: #1684fc; /* 悬停在未选中按钮时文字颜色为 #1684fc */
  }
</style>