4dkk_mp/src/views/statistics/order/index.vue

<template>
  <div class="p-4">
    <GrowCard :loading="loading" :list="growCardList" class="enter-y" /> 
    <orderEchart title="订单数据统计" class="!my-4 enter-y" @change="Search" :echartData="echartData" :loading="loading" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, reactive } from 'vue';
  import { orderTotal,orderTrend } from '/@/api/statistics/index';
  import { GrowCardItem } from '../data';
  import GrowCard from '../components/GrowCard.vue';
  import orderEchart from '../components/orderEchart.vue';
  const loading = ref(true);
  const growCardList = ref<GrowCardItem[]>([]);
  const echartData = reactive({
    xdata:[],
    downOrder:[],
    incrementOrder:[],
    partOrder:[],
  })
  const SearchData = reactive({
    startTime:'',
    endTime:'',
    dataType:0,
    type:2
  })
  onMounted(() => {
    getData();
    getList()
  });
  async function getList() {
    let downlist = [],xdata = []
    const {downOrder,incrementOrder,partOrder} = await orderTrend(SearchData);
    downOrder.map(ele => {
      xdata.push(ele.groupKey)
      downlist.push(ele.count)
    })
    echartData.xdata = xdata
    echartData.downOrder = downlist
    echartData.incrementOrder = incrementOrder.map(ele => ele.count)
    echartData.partOrder = partOrder &&partOrder.map(ele => ele.count)|| []
  }
  function Search(val){
    const {startTime,endTime,dataType,type} = val
    console.log('params',val)
    SearchData.startTime = startTime
    SearchData.endTime = endTime
    SearchData.dataType = dataType
    SearchData.type = type
    getList()
  }
  async function getData() {
    try {
      loading.value = true;
    const {preMonThPowCount,preMonThDownCount,preMonThPartCount} = await orderTotal();
    let list:GrowCardItem[] = [
      {
        title: '上月权益订单数',
        icon: 'fxemoji:notchedrightsemi3dot',
        value: preMonThPowCount,
        unit: '人',
        color: 'blue',
        action: '月',
      },
      {
        title: '上月下载订单数',
        icon: 'download-count|svg',
        value: preMonThDownCount,
        unit: '人',
        color: 'orange',
        action: '月',
      },
      {
        title: '上月配件订单数',
        icon: 'transaction|svg',
        value: preMonThPartCount,
        unit: '人',
        color: 'blue',
        action: '月',
      },
    ];
    loading.value = false;
    growCardList.value =list
    } catch (error) {
      loading.value = false;
    }
  }
</script>