首页统计3.0 顶部导航栏统计 当天的新增用户、新增订单、新增订单金额

src/api/Home/count/index.ts

@@ -27,4 +27,10 @@ export const getApiCallsData = async(dateType) => {
   })
   })
 }
 }
 
 
+export const getTopBarData = async () => {
+  return await request.get({
+    url:`/index/count/getTopBarData`,
+  })
+}
+
 
 

src/views/Home/Index.vue

@@ -21,31 +21,31 @@
           <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
           <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
             <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
             <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
               <div class="px-8px text-right">
               <div class="px-8px text-right">
-                <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
+                <div class="mb-16px text-14px text-gray-400">{{ '今日新增用户' }}</div>
                 <CountTo
                 <CountTo
                   class="text-20px"
                   class="text-20px"
                   :start-val="0"
                   :start-val="0"
-                  :end-val="totalSate.project"
+                  :end-val="todayData.newUsersCount"
                   :duration="2600"
                   :duration="2600"
                 />
                 />
               </div>
               </div>
               <el-divider direction="vertical"/>
               <el-divider direction="vertical"/>
               <div class="px-8px text-right">
               <div class="px-8px text-right">
-                <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
+                <div class="mb-16px text-14px text-gray-400">{{ '今日订单' }}</div>
                 <CountTo
                 <CountTo
                   class="text-20px"
                   class="text-20px"
                   :start-val="0"
                   :start-val="0"
-                  :end-val="totalSate.todo"
+                  :end-val="todayData.newOrdersCount"
                   :duration="2600"
                   :duration="2600"
                 />
                 />
               </div>
               </div>
               <el-divider direction="vertical" border-style="dashed"/>
               <el-divider direction="vertical" border-style="dashed"/>
               <div class="px-8px text-right">
               <div class="px-8px text-right">
-                <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
+                <div class="mb-16px text-14px text-gray-400">{{ '今日订单金额' }}</div>
                 <CountTo
                 <CountTo
                   class="text-20px"
                   class="text-20px"
                   :start-val="0"
                   :start-val="0"
-                  :end-val="totalSate.access"
+                  :end-val="todayData.newOrdersAmount"
                   :duration="2600"
                   :duration="2600"
                 />
                 />
               </div>
               </div>
@@ -133,6 +133,7 @@ import type {WorkplaceTotal} from './types'
 import {useRouter} from 'vue-router'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n' // 确保导入i18n
 import {useI18n} from 'vue-i18n' // 确保导入i18n
 import * as IndexCountApi from "@/api/Home/count";
 import * as IndexCountApi from "@/api/Home/count";
+import Index from "@/views/ai/music/index/index.vue";
 
 
 defineOptions({name: 'Index'})
 defineOptions({name: 'Index'})
 
 
@@ -166,10 +167,10 @@ const changeOrderDateType = () => {
 }
 }
 
 
 // 统计数据
 // 统计数据
-const totalSate = reactive<WorkplaceTotal>({
-  project: 0,
-  access: 0,
-  todo: 0
+const todayData = reactive<WorkplaceTotal>({
+  newUsersCount: 0,
+  newOrdersCount: 0,
+  newOrdersAmount: 0
 })
 })
 
 
 // 用户数柱状图配置
 // 用户数柱状图配置
@@ -329,7 +330,6 @@ const orderChartOptions = ref<EChartsOption>({
 const getOrderChartData = async (orderDateType) => {
 const getOrderChartData = async (orderDateType) => {
   let ordersData = await IndexCountApi.getOrdersData(orderDateType);
   let ordersData = await IndexCountApi.getOrdersData(orderDateType);
 
 
-
   orderChartOptions.value.xAxis!.data = ordersData.map(item => t(item.countDate))
   orderChartOptions.value.xAxis!.data = ordersData.map(item => t(item.countDate))
   orderChartOptions.value.series![0].data = ordersData.map(item => item.computeOrdersCount)
   orderChartOptions.value.series![0].data = ordersData.map(item => item.computeOrdersCount)
   orderChartOptions.value.series![1].data = ordersData.map(item => item.apiOrdersCount)
   orderChartOptions.value.series![1].data = ordersData.map(item => item.apiOrdersCount)
@@ -353,13 +353,13 @@ const initData = async () => {
 // 获取统计数
 // 获取统计数
 const getCount = async () => {
 const getCount = async () => {
   // 模拟接口数据
   // 模拟接口数据
-  const data = {
-    project: 40,
-    access: 2340,
-    todo: 10
-  }
-  Object.assign(totalSate, data)
+  // const data = {
+  //   newUsersCount: 10,
+  //   newOrdersCount: 40,
+  //   newOrdersAmount: 2340
+  // }
+  let res = await IndexCountApi.getTopBarData()
+  Object.assign(todayData, res)
 }
 }
-// 页面加载时初始化
 initData()
 initData()
 </script>
 </script>