feat：【antd】mp/statistics 的代码迁移

apps/web-antd/src/views/mp/statistics/chart-options.ts

@@ -1,6 +1,6 @@
 import type { MpStatisticsApi } from '#/api/mp/statistics';
 
-// 用户增减数据图表配置项
+/** 用户增减数据图表配置项 */
 export function userSummaryOption(
   data: MpStatisticsApi.UserSummary[],
   dates: string[],
@@ -39,7 +39,7 @@ export function userSummaryOption(
   };
 }
 
-// 累计用户数据图表配置项
+/** 累计用户数据图表配置项 */
 export function userCumulateOption(
   data: MpStatisticsApi.UserCumulate[],
   dates: string[],
@@ -69,7 +69,7 @@ export function userCumulateOption(
   };
 }
 
-// 消息发送概况数据图表配置项
+/** 消息发送概况数据图表配置项 */
 export function upstreamMessageOption(
   data: MpStatisticsApi.UpstreamMessage[],
   dates: string[],
@@ -109,7 +109,7 @@ export function upstreamMessageOption(
   };
 }
 
-// 接口分析况数据图表配置项
+/** 接口分析况数据图表配置项 */
 export function interfaceSummaryOption(
   data: MpStatisticsApi.InterfaceSummary[],
   dates: string[],

apps/web-antd/src/views/mp/statistics/data.ts

@@ -5,6 +5,7 @@ import { beginOfDay, endOfDay, formatDateTime } from '@vben/utils';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
+/** 关联数据 */
 let accountList: MpAccountApi.AccountSimple[] = [];
 getSimpleAccountList().then((data) => (accountList = data));
 
@@ -14,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
         options: accountList.map((item) => ({
           label: item.name,

apps/web-antd/src/views/mp/statistics/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import { ContentWrap, Page } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
@@ -16,7 +16,6 @@ import {
   getUserCumulate,
   getUserSummary,
 } from '#/api/mp/statistics';
-import { $t } from '#/locales';
 
 import {
   interfaceSummaryOption,
@@ -41,24 +40,6 @@ const interfaceSummaryRef = ref<EchartsUIType>();
 const { renderEcharts: renderInterfaceSummaryEcharts } =
   useEcharts(interfaceSummaryRef);
 
-const [QueryForm] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  handleSubmit: onSubmit,
-  layout: 'horizontal',
-  schema: useGridFormSchema(),
-  submitButtonOptions: {
-    content: $t('common.query'),
-  },
-  wrapperClass: 'grid-cols-1 md:grid-cols-2',
-});
-function onSubmit(values: Record<string, any>) {
-  getSummary(values);
-}
-
 /** 加载数据 */
 async function getSummary(values: Record<string, any>) {
   const accountId = values.accountId;
@@ -89,19 +70,19 @@ async function getSummary(values: Record<string, any>) {
     accountId,
     date: dateRange,
   });
-  renderUserSummaryEcharts(userSummaryOption(userSummaryData, dates));
+  await renderUserSummaryEcharts(userSummaryOption(userSummaryData, dates));
   // 累计用户数据
   const userCumulateData = await getUserCumulate({
     accountId,
     date: dateRange,
   });
-  renderUserCumulateEcharts(userCumulateOption(userCumulateData, dates));
+  await renderUserCumulateEcharts(userCumulateOption(userCumulateData, dates));
   // 消息发送概况数据
   const upstreamMessageData = await getUpstreamMessage({
     accountId,
     date: dateRange,
   });
-  renderUpstreamMessageEcharts(
+  await renderUpstreamMessageEcharts(
     upstreamMessageOption(upstreamMessageData, dates),
   );
   // 接口分析数据
@@ -109,16 +90,34 @@ async function getSummary(values: Record<string, any>) {
     accountId,
     date: dateRange,
   });
-  renderInterfaceSummaryEcharts(
+  await renderInterfaceSummaryEcharts(
     interfaceSummaryOption(interfaceSummaryData, dates),
   );
 }
+
+const [QueryForm, queryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
+  handleSubmit: getSummary,
+});
+
+/** 初始化 */
+onMounted(() => {
+  queryFormApi.submitForm();
+});
 </script>
 
 <template>
   <Page auto-content-height>
     <ContentWrap class="h-full w-full">
       <QueryForm />
+
       <div class="flex h-1/3 w-full gap-4">
         <Card class="h-full w-1/2" title="用户增减数据">
           <EchartsUI ref="userSummaryRef" />