4dkk_mp/src/views/dashboard/analysis/index.vue

<template>
  <div class="p-4">
    <GrowCard :loading="loading" class="enter-y" :list="growCardList" />
    <div class="md:flex !my-4 enter-y">
      <lineEcharts
        class="md:w-1/2 w-full !md:mt-0 !mt-4 !md:mr-4"
        name="chartRef1"
        @change="Search"
        :propsData="echartData"
        @export="handleExport"
      />
      <lineEcharts2 name="chartRef2" class="md:w-1/2 mx-4 w-full" @export="handleExport"  @change="Search" :echartData="orderData"  />
    </div>
    <sceneEchart title="近半年场景新增趋势" class="!my-4 enter-y" @export="handleExport" @change="Search" :echartData="scenetData" />
    <!-- <SiteAnalysis class="!my-4 enter-y" :loading="loading" /> -->
    <!-- <div class="md:flex enter-y">
      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
    </div> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { userTotal, orderTotal, orderTrend,userTrend,sceneTrend, cameraExport, downExport, incrementExport } from '/@/api/statistics/index';
import GrowCard from './components/GrowCard.vue';
import SiteAnalysis from './components/SiteAnalysis.vue';
import sceneEchart from './components/orderEchart.vue';
import VisitSource from './components/VisitSource.vue';
import VisitRadar from './components/VisitRadar.vue';
import lineEcharts from './components/lineEcharts.vue';
import lineEcharts2 from './components/lineEcharts2.vue';
import SalesProductPie from './components/SalesProductPie.vue';
import { Row, Col } from 'ant-design-vue';
const loading = ref(true);
interface GrowCardItem {
  icon: string;
  title: string;
  value: number;
  unit: string;
  color: string;
  action: string;
}
const exportData = reactive({
  orderData:[],
  sceneData:[],
  cameraData:[],
})
const orderData = reactive({
    xdata:[],
    downOrder:[],
    incrementOrder:[],
    partOrder:[],
  })
const echartData = reactive({
    xData:[],
    yData:[],
  })
const scenetData = reactive({
    xdata:[],
    kjList:[],
    kkList:[],
    ssList:[],
    ssobjList:[],
    echartTypr:'bar',
  })
const SearchData = reactive({
    startTime:'',
    endTime:'',
    orderType:0,
    sceneType:0,
    userType:0,
  })
onMounted(() => {
  getData();
  getAddUser();
  getOrder()
  getSceneList()
});
const growCardList = ref<GrowCardItem[]>([]);
async function getData() {
  try {
    loading.value = true;
    const { totalUserCount, preMonthAddCount, todayAddCount, todayActiveCount } = await userTotal();
    const { preMonThPowCount, preMonThDownCount, preMonThPartCount } = await orderTotal();
    let list = [
      {
        title: '累计用户',
        // icon: 'fa6-solid:users-gear',
        icon: 'visit-count|svg',
        value: totalUserCount || 0,
        unit: '人',
        color: 'green',
        action: '年',
      },
      {
        title: '上月新增用户',
        icon: 'akar-icons:person-add',
        value: preMonthAddCount || 0,
        unit: '人',
        color: 'blue',
        action: '月',
      },
      {
        title: '今日新增用户',
        icon: 'carbon:user-role',
        value: todayAddCount || 0,
        unit: '人',
        color: 'orange',
        action: '日',
      },
      {
        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: '月',
      },
    ];
    growCardList.value = list;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
}
async function getAddUser() {
  let xdata = [], yData=[]
    const data = await userTrend({...SearchData,type:SearchData.userType});
    data.map(ele => {
      xdata.push(ele.groupKey)
      yData.push(ele.count)
    })
    echartData.xData = xdata
    echartData.yData = yData
}


async function getOrder() {
    let downlist = [],xdata = []
    loading.value = true;
    const {downOrder,incrementOrder,partOrder} = await orderTrend({...SearchData,type:SearchData.orderType});
    downOrder.map(ele => {
      xdata.push(ele.groupKey)
      downlist.push(ele.count)
    })
    orderData.xdata = xdata
    orderData.downOrder = downlist
    orderData.incrementOrder = incrementOrder.map(ele => ele.count)
    orderData.partOrder = partOrder &&partOrder.map(ele => ele.count)|| []
    loading.value = false;
  }
  async function getSceneList() {
    let downlist = [],xdata = []
    loading.value = true;
    const {kjList,kkList,ssList,ssobjList} = await sceneTrend({...SearchData,type:SearchData.sceneType});
    kjList.map(ele => {
      xdata.push(ele.groupKey)
      downlist.push(ele.count)
    })
    scenetData.xdata = xdata
    scenetData.kjList = downlist
    scenetData.kkList = kkList.map(ele => ele.count)
    scenetData.ssList = ssList &&ssList.map(ele => ele.count)|| []
    scenetData.ssobjList = ssobjList.map(ele => ele.count)|| []
    loading.value = false;
  }
  function handleExport(val){
    console.log('handleExport',val)
    let obj = {
      'user':cameraExport,
      'order':incrementExport,
      'scene':downExport,
    }
  }

  function Search(val){
    const {value,type} = val
    console.log('handleChange',value,type)
    if(type){
      switch(type){
        case 'user':
        SearchData.userType = value
        getAddUser()
        break;
        case 'order':
        SearchData.orderType = value
        getOrder()
        break;
        case 'scene':
        SearchData.sceneType = value
        getSceneList()
        break;
      }
    }
  }
</script>