首页统计4.0 改为按年、月、日统计

src/views/Home/Index.vue

@@ -64,13 +64,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="changeUserDateType"
-                    type="primary"
+                  <el-radio-group
+                    v-model="userDateType"
+                    @change="handleUserDateTypeChange"
                     size="small"
                   >
-                    {{ userDateType === 'd' ? '切换月数据' : '切换日数据' }}
-                  </el-button>
+                    <el-radio label="d">日数据（近7天）</el-radio>
+                    <el-radio label="m">月数据（近30天）</el-radio>
+                    <el-radio label="y">年数据（近12个月）</el-radio>
+                  </el-radio-group>
                 </div>
                 <el-card shadow="hover" class="mb-8px">
                   <el-skeleton :loading="loading" animated>
@@ -82,13 +84,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"
+                  <el-radio-group
+                    v-model="apiCallsDateType"
+                    @change="handleApiCallsDateTypeChange"
                     size="small"
                   >
-                    {{ apiCallsDateType === 'd' ? '切换月数据' : '切换日数据' }}
-                  </el-button>
+                    <el-radio label="d">日数据（近7天）</el-radio>
+                    <el-radio label="m">月数据（近30天）</el-radio>
+                    <el-radio label="y">年数据（近12个月）</el-radio>
+                  </el-radio-group>
                 </div>
                 <el-card shadow="hover" class="mb-8px">
                   <el-skeleton :loading="loading" animated>
@@ -100,13 +104,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"
+                  <el-radio-group
+                    v-model="orderDateType"
+                    @change="handleOrderDateDateTypeChange"
                     size="small"
                   >
-                    {{ orderDateType === 'd' ? '切换月数据' : '切换日数据' }}
-                  </el-button>
+                    <el-radio label="d">日数据（近7天）</el-radio>
+                    <el-radio label="m">月数据（近30天）</el-radio>
+                    <el-radio label="y">年数据（近12个月）</el-radio>
+                  </el-radio-group>
                 </div>
                 <el-card shadow="hover" class="mb-8px">
                   <el-skeleton :loading="loading" animated>
@@ -125,7 +131,7 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive} from 'vue'
+import {reactive, ref} from 'vue'
 import {EChartsOption} from 'echarts'
 
 import {useUserStore} from '@/store/modules/user'
@@ -150,19 +156,16 @@ const userDateType = ref('d');
 const apiCallsDateType = ref('d');
 const orderDateType = ref('d');
 
-const changeUserDateType = () => {
-  userDateType.value = userDateType.value === 'd' ? 'm' : 'd';
-  // 调用获取图表数据的方法，传入当前类型
+const handleUserDateTypeChange = () => {
   getUsersChartData(userDateType.value);
+  // loading.value = true;
 };
 
-const changeApiCallsDateType = () => {
-  apiCallsDateType.value = apiCallsDateType.value === 'd' ? 'm' : 'd';
+const handleApiCallsDateTypeChange = () => {
   getApiCallsChartData(apiCallsDateType.value);
 }
 
-const changeOrderDateType = () => {
-  orderDateType.value = orderDateType.value === 'd' ? 'm' : 'd';
+const handleOrderDateDateTypeChange = () => {
   getOrderChartData(orderDateType.value);
 }
 
@@ -304,7 +307,7 @@ const orderChartOptions = ref<EChartsOption>({
       data: [], // 算力金额数据
       type: 'line',
       smooth: false,
-      itemStyle: { color: '#94D274' }, // 浅绿（和算力订单数颜色呼应）
+      itemStyle: {color: '#94D274'}, // 浅绿（和算力订单数颜色呼应）
       yAxisIndex: 1 // 关键：绑右侧金额轴
     },
     {
@@ -312,7 +315,7 @@ const orderChartOptions = ref<EChartsOption>({
       data: [], // API金额数据
       type: 'line',
       smooth: false,
-      itemStyle: { color: '#7CB6FF' }, // 浅蓝（和API订单数颜色呼应）
+      itemStyle: {color: '#7CB6FF'}, // 浅蓝（和API订单数颜色呼应）
       yAxisIndex: 1 // 绑右侧金额轴
     },
     {
@@ -320,7 +323,7 @@ const orderChartOptions = ref<EChartsOption>({
       data: [], // 总金额数据
       type: 'line',
       smooth: false,
-      itemStyle: { color: '#FFC53D' }, // 浅黄（和总订单数颜色呼应）
+      itemStyle: {color: '#FFC53D'}, // 浅黄（和总订单数颜色呼应）
       yAxisIndex: 1 // 绑右侧金额轴
     }
   ]