首页统计2.0 添加切换按月为维度统计功能

src/api/Home/count/index.ts

 import request from '@/config/axios'
 
-export const getUsersData = async () => {
-  return await request.get({ url: `/index/count/getUsersData` })
+export const getUsersData = async (dateType) => {
+  return await request.get({
+    url: `/index/count/getUsersData`,
+    params:{
+      dateType : dateType
+    }
+  })
 }
 
-export const getOrdersData = async() => {
-  return await request.get({url:`/index/count/getOrdersData`})
+export const getOrdersData = async(dateType) => {
+  return await request.get({
+    url:`/index/count/getOrdersData`,
+    params:{
+      dateType : dateType
+    }
+  })
 }
 
-export const getApiCallsData = async() => {
-  return await request.get({url:`/index/count/getApiCallsData`})
+export const getApiCallsData = async(dateType) => {
+  return await request.get({
+    url:`/index/count/getApiCallsData`,
+    params:{
+      dateType : dateType
+    }
+  })
 }
 
 

src/views/Home/Index.vue

@@ -61,8 +61,17 @@
         <el-card shadow="never" class="mt-8px">
           <el-skeleton :loading="loading" animated>
             <el-row :gutter="20" justify="space-between">
-              <!-- 第一个图表：柱状图 -->
+              <!-- 用户统计图表 -->
               <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
+                <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
+                  <el-button
+                    @click="changeUserDateType"
+                    type="primary"
+                    size="small"
+                  >
+                    {{ userDateType === 'd' ? '切换月数据' : '切换日数据' }}
+                  </el-button>
+                </div>
                 <el-card shadow="hover" class="mb-8px">
                   <el-skeleton :loading="loading" animated>
                     <Echart :options="usersChartOption" :height="340"/>
@@ -72,6 +81,15 @@
 
 
               <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
+                <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
+                  <el-button
+                    @click="changeApiCallsDateType"
+                    type="primary"
+                    size="small"
+                  >
+                    {{ apiCallsDateType === 'd' ? '切换月数据' : '切换日数据' }}
+                  </el-button>
+                </div>
                 <el-card shadow="hover" class="mb-8px">
                   <el-skeleton :loading="loading" animated>
                     <Echart :options="apiCallChartOptions" :height="340"/>
@@ -81,6 +99,15 @@
 
               <!-- 第三个图表：折线图-->
               <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
+                  <el-button
+                    @click="changeOrderDateType"
+                    type="primary"
+                    size="small"
+                  >
+                    {{ orderDateType === 'd' ? '切换月数据' : '切换日数据' }}
+                  </el-button>
+                </div>
                 <el-card shadow="hover" class="mb-8px">
                   <el-skeleton :loading="loading" animated>
                     <Echart :options="orderChartOptions" :height="420"/>
@@ -117,6 +144,27 @@ const loading = ref(true)
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
 
+// 切换状态（d=日，m=月）
+const userDateType = ref('d');
+const apiCallsDateType = ref('d');
+const orderDateType = ref('d');
+
+const changeUserDateType = () => {
+  userDateType.value = userDateType.value === 'd' ? 'm' : 'd';
+  // 调用获取图表数据的方法，传入当前类型
+  getUsersChartData(userDateType.value);
+};
+
+const changeApiCallsDateType = () => {
+  apiCallsDateType.value = apiCallsDateType.value === 'd' ? 'm' : 'd';
+  getApiCallsChartData(apiCallsDateType.value);
+}
+
+const changeOrderDateType = () => {
+  orderDateType.value = orderDateType.value === 'd' ? 'm' : 'd';
+  getOrderChartData(orderDateType.value);
+}
+
 // 统计数据
 const totalSate = reactive<WorkplaceTotal>({
   project: 0,
@@ -153,8 +201,8 @@ const usersChartOption = ref<EChartsOption>({
 })
 
 // 用户数柱状图数据
-const getUsersChartData = async () => {
-  let responseData = await IndexCountApi.getUsersData();
+const getUsersChartData = async (userDateType) => {
+  let responseData = await IndexCountApi.getUsersData(userDateType);
 
   // 直接修改图表配置
   usersChartOption.value.xAxis!.data = responseData.map(item => t(item.countDate))
@@ -191,17 +239,8 @@ const apiCallChartOptions = ref<EChartsOption>({
 })
 
 // api调用折线图数据
-const apiCallsData = async () => {
-  let data = await IndexCountApi.getApiCallsData()
-  // 模拟接口数据
-  // const data = [
-  //   {value: 335, name: 'analysis.directAccess'},
-  //   {value: 310, name: 'analysis.mailMarketing'},
-  //   {value: 234, name: 'analysis.allianceAdvertising'},
-  //   {value: 135, name: 'analysis.videoAdvertising'},
-  //   {value: 1548, name: 'analysis.searchEngines'}
-  // ]
-
+const getApiCallsChartData = async (apiCallsDateType) => {
+  let data = await IndexCountApi.getApiCallsData(apiCallsDateType)
   // 直接修改图表配置
   apiCallChartOptions.value.xAxis!.data = data.map(item => t(item.countDate))
   apiCallChartOptions.value.series![0].data = data.map(item => item.callsCount)
@@ -287,19 +326,10 @@ const orderChartOptions = ref<EChartsOption>({
 })
 
 //订单折线图数据
-const getOrderData = async () => {
-  let ordersData = await IndexCountApi.getOrdersData();
+const getOrderChartData = async (orderDateType) => {
+  let ordersData = await IndexCountApi.getOrdersData(orderDateType);
 
-  //模拟数据
-  // const data = [
-  //   { value: 335, name: 'analysis.directAccess' },
-  //   { value: 310, name: 'analysis.mailMarketing' },
-  //   { value: 234, name: 'analysis.allianceAdvertising' },
-  //   { value: 135, name: 'analysis.videoAdvertising' },
-  //   { value: 1548, name: 'analysis.searchEngines' }
-  // ]
 
-  // 直接修改图表配置
   orderChartOptions.value.xAxis!.data = ordersData.map(item => t(item.countDate))
   orderChartOptions.value.series![0].data = ordersData.map(item => item.computeOrdersCount)
   orderChartOptions.value.series![1].data = ordersData.map(item => item.apiOrdersCount)
@@ -313,9 +343,9 @@ const getOrderData = async () => {
 const initData = async () => {
   await Promise.all([
     getCount(),
-    getUsersChartData(),
-    apiCallsData(),
-    getOrderData()
+    getUsersChartData(userDateType.value),
+    getApiCallsChartData(apiCallsDateType.value),
+    getOrderChartData(orderDateType.value)
   ])
   loading.value = false
 }