national-motion-web/src/views/report/statisticst/index.vue

<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-tabs v-model:activeKey="activeKey" animated @change="tabChange">
        <a-tab-pane key="bar" tab="柱状图">
          <a-row>
            <a-col :span="10">
              <a-radio-group v-model:value="barType" @change="statisticst">
                <a-radio-button value="year">按年统计</a-radio-button>
                <a-radio-button value="month">按月统计</a-radio-button>
                <a-radio-button value="category">按类别统计</a-radio-button>
                <a-radio-button value="cabinet">按柜号统计</a-radio-button>
              </a-radio-group>
            </a-col>
          </a-row>
          <Bar :chartData="dataSource" height="50vh"></Bar>
        </a-tab-pane>
        <a-tab-pane key="pie" tab="饼状图" force-render>
          <a-row :gutter="24">
            <a-col :span="10">
              <a-radio-group v-model:value="pieType" @change="statisticst">
                <a-radio-button value="year">按年统计</a-radio-button>
                <a-radio-button value="month">按月统计</a-radio-button>
                <a-radio-button value="category">按类别统计</a-radio-button>
                <a-radio-button value="cabinet">按柜号统计</a-radio-button>
              </a-radio-group>
            </a-col>
            <Pie :chartData="dataSource" height="40vh"></Pie>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { defHttp } from '/@/utils/http/axios';
  import { ref, unref, reactive } from 'vue';
  import Bar from '/@/components/chart/Bar.vue';
  import Pie from '/@/components/chart/Pie.vue';

  const activeKey = ref('bar');
  const barType = ref('year');
  const pieType = ref('year');
  const dataSource = ref([]);
  const url = reactive({
    getYearCountInfo: '/mock/api/report/getYearCountInfo',
    getMonthCountInfo: '/mock/api/report/getMonthCountInfo',
    getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
    getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo',
  });

  async function loadDate(url, type, params) {
    const res = await defHttp.get({ url, params }, { isTransformResponse: false, errorMessageMode: 'none' });
    if (res.success) {
      dataSource.value = [];
      switch (type) {
        case 'year':
          getYearCountSource(res.result);
          break;
        case 'month':
          getMonthCountSource(res.result);
          break;
        case 'category':
          getCategoryCountSource(res.result);
          break;
        case 'cabinet':
          getCabinetCountSource(res.result);
          break;
        default:
          break;
      }
    }
  }
  function getYearCountSource(data) {
    for (let i = 0; i < data.length; i++) {
      dataSource.value.push({
        name: `${data[i].year}年`,
        value: data[i].yearcount,
      });
    }
  }
  function getMonthCountSource(data) {
    for (let i = 0; i < data.length; i++) {
      dataSource.value.push({
        name: `${data[i].month}`,
        value: data[i].monthcount,
      });
    }
  }
  function getCategoryCountSource(data) {
    for (let i = 0; i < data.length; i++) {
      dataSource.value.push({
        name: `${data[i].classifyname}`,
        value: data[i].cntrnocount,
      });
    }
  }
  function getCabinetCountSource(data) {
    for (let i = 0; i < data.length; i++) {
      dataSource.value.push({
        name: `${data[i].cabinetname}`,
        value: data[i].cabinetcocunt,
      });
    }
  }
  // 选择统计类别
  function statisticst(e) {
    if (unref(activeKey) === 'pie') {
      loadDate(getUrl(unref(pieType)), unref(pieType), {});
    } else {
      loadDate(getUrl(unref(barType)), unref(barType), {});
    }
  }

  function getUrl(type) {
    if (type === 'year') {
      return url.getYearCountInfo;
    }
    if (type === 'month') {
      return url.getMonthCountInfo;
    }
    if (type === 'category') {
      return url.getCntrNoCountInfo;
    }
    if (type === 'cabinet') {
      return url.getCabinetCountInfo;
    }
  }
  //tab切换
  function tabChange(key) {
    console.log('切换的key:', key);
  }
  loadDate(url.getYearCountInfo, 'year', {});
</script>