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

<template>
  <div class="p-4">
    <GrowCard :loading="loading" :list="growCardList" class="enter-y" />
    <sceneEchart
      title="订单数据统计"
      class="!my-4 enter-y"
      @change="Search"
      :echartData="echartData"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { orderTotal, sceneTrend } from '/@/api/statistics/index';
import { GrowCardItem } from '../data';
import GrowCard from '../components/GrowCard.vue';
import sceneEchart from '../components/sceneEchart.vue';
const loading = ref(true);
const growCardList = ref<GrowCardItem[]>([]);
const echartData = reactive({
  xdata: [],
  kjList:[],
  kkList:[],
  ssList:[],
  ssobjList:[],
});
const SearchData = reactive({
  startTime: '',
  endTime: '',
  dataType: 0,
  type: 2,
});
onMounted(() => {
  getData();
  getList();
});
async function getList() {
  let downlist = [],
    xdata = [];
  const {kjList,kkList,ssList,ssobjList} = await sceneTrend(SearchData);
  kjList.map((ele) => {
    xdata.push(ele.groupKey);
    downlist.push(ele.count);
  });
  echartData.xdata = xdata;
  echartData.kjList = downlist
  echartData.kkList = kkList.map(ele => ele.count)
  echartData.ssList = ssList &&ssList.map(ele => ele.count)|| []
  echartData.ssobjList = ssobjList.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 = type;
  SearchData.type = dataType;
  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>