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"
      />
      <span style="font-size: 18px; margin-left: 50px; margin-right: 10px">客户编码</span>
      <a-select
        v-model:value="value2"
        show-search
        placeholder="请选择"
        style="width: 200px"
        :options="businessPersonOptions"
        :filter-option="filterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChangeCustomer"
      />
      <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 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;
    businessPersonIn.value = value2.value;
  }
  function clearData() {
    customerCodeIn.value = null;
    businessPersonIn.value = null;
    value1.value = null;
    value2.value = null;
  }

  watchEffect(async () => {
    // const data1 = dataStore?.getCustomerChartData1 || {};
    const data2 = await getCustomerSalesData({
      businessPersonIn: businessPersonIn.value,
      customerCodeIn: customerCodeIn.value,
      period: periodChange.value,
    });
    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>