yunxinwei-vue/src/views/system/dashboard/components/sale-card.vue

<template>
  <a-card :bordered="false" :body-style="{ padding: 0 }">
    <a-tabs
      size="large"
      v-model:activeKey="saleSearch.type"
      class="monitor-card-tabs"
      @change="onSaleTypeChange"
    >
      <a-tab-pane tab="消费统计(全门店)" key="saleroom" />
<!--      <a-tab-pane tab="用户消费排行(全门店)" />-->
<!--      <template #rightExtra>-->
<!--        <a-space-->
<!--          size="middle"-->
<!--          :class="[-->
<!--            'analysis-tabs-extra',-->
<!--            { 'hidden-lg-and-down': styleResponsive }-->
<!--          ]"-->
<!--        >-->
<!--          <a-radio-group v-model:value="saleSearch.dateType">-->
<!--            <a-radio-button value="1">今天</a-radio-button>-->
<!--            <a-radio-button value="2">本周</a-radio-button>-->
<!--            <a-radio-button value="3">本月</a-radio-button>-->
<!--            <a-radio-button value="4">本年</a-radio-button>-->
<!--          </a-radio-group>-->
<!--          <div style="width: 300px">-->
<!--            <a-range-picker-->
<!--              value-format="YYYY-MM-DD"-->
<!--              v-model:value="saleSearch.datetime"-->
<!--            />-->
<!--          </div>-->
<!--        </a-space>-->
<!--      </template>-->
    </a-tabs>
    <div style="padding-bottom: 10px">
      <a-row :gutter="16">
        <a-col
          v-bind="
            styleResponsive ? { lg: 17, md: 15, sm: 24, xs: 24 } : { span: 17 }
          "
        >
          <div v-if="saleSearch.type === 'saleroom'" class="demo-monitor-title">
            销售量趋势
          </div>

          <v-chart
            ref="saleChartRef"
            :option="saleChartOption"
            style="height: 320px"
          />
        </a-col>

      </a-row>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { use } from 'echarts/core';
  import type { EChartsCoreOption } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import { GridComponent, TooltipComponent } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import { getSaleroomList } from '@/api/dashboard/analysis';
  import type { SaleroomData } from '@/api/dashboard/analysis/model';
  import useEcharts from '@/utils/use-echarts';

  use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);

  //
  const saleChartRef = ref<InstanceType<typeof VChart> | null>(null);

  useEcharts([saleChartRef]);

  // 销售额柱状图配置
  const saleChartOption: EChartsCoreOption = reactive({});

  // 门店销售排名数据
  const saleroomRankData = ref([
    { name: '工专路 1 号店', value: '323,234' },
    { name: '工专路 2 号店', value: '323,234' },
    { name: '工专路 3 号店', value: '323,234' },
    { name: '工专路 4 号店', value: '323,234' },
    { name: '工专路 5 号店', value: '323,234' },
    { name: '工专路 6 号店', value: '323,234' },
    { name: '工专路 7 号店', value: '323,234' }
  ]);

  // 门店访问排名数据
  const visitsRankData = ref([
    { name: '工专路 1 号店', value: '323,234' },
    { name: '工专路 2 号店', value: '323,234' },
    { name: '工专路 3 号店', value: '323,234' },
    { name: '工专路 4 号店', value: '323,234' },
    { name: '工专路 5 号店', value: '323,234' },
    { name: '工专路 6 号店', value: '323,234' },
    { name: '工专路 7 号店', value: '323,234' }
  ]);

  // 销售量趋势数据
  const saleroomData1 = ref<SaleroomData[]>([]);

  // 访问量趋势数据
  const saleroomData2 = ref<SaleroomData[]>([]);

  interface SaleSearchType {
    type: string;
    dateType: string;
    datetime: [string, string];
  }

  // 销售量搜索参数
  const saleSearch = reactive<SaleSearchType>({
    type: 'saleroom',
    dateType: '1',
    datetime: ['2022-01-08', '2022-02-12']
  });

  /* 获取销售量数据 */
  const getSaleroomData = () => {
    getSaleroomList()
      .then((data) => {
        saleroomData1.value = data.orderStatisticsList;
        saleroomData2.value = data.salesAmountStatisticsList;
        onSaleTypeChange();
      })
      .catch((e) => {
        message.error(e.message);
      });
  };

  /* 销售量tab选择改变事件 */
  const onSaleTypeChange = () => {
    if (saleSearch.type === 'saleroom') {
      Object.assign(saleChartOption, {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: saleroomData1.value.map((d) => d.startStatisticsDate)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            data: saleroomData1.value.map((d) => d.dailyNewOrders)
          }
        ]
      });
    } else {
      Object.assign(saleChartOption, {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            data: saleroomData2.value.map((d) => d.startStatisticsDate)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            data: saleroomData2.value.map((d) => d.dailySale)
          }
        ]
      });
    }
  };

  getSaleroomData();
</script>

<style lang="less" scoped>
  .monitor-card-tabs :deep(.ant-tabs-nav) {
    padding: 0 16px;
  }

  .demo-monitor-title {
    padding: 6px 20px;
  }

  .demo-monitor-rank-item {
    padding: 0 20px;
    margin-top: 18px;
  }
</style>