feat: mp statistics

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

@@ -1,28 +1,140 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { EchartsUIType } from '@vben/plugins/echarts';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+
+import { ContentWrap, Page } from '@vben/common-ui';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+import { addTime, betweenDay, formatDate } from '@vben/utils';
+
+import { Card, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  getInterfaceSummary,
+  getUpstreamMessage,
+  getUserCumulate,
+  getUserSummary,
+} from '#/api/mp/statistics';
+import { $t } from '#/locales';
+
+import {
+  interfaceSummaryOption,
+  upstreamMessageOption,
+  userCumulateOption,
+  userSummaryOption,
+} from './chart-options';
+import { useGridFormSchema } from './data';
+
+const userSummaryRef = ref<EchartsUIType>();
+const { renderEcharts: renderUserSummaryEcharts } = useEcharts(userSummaryRef);
+
+const userCumulateRef = ref<EchartsUIType>();
+const { renderEcharts: renderUserCumulateEcharts } =
+  useEcharts(userCumulateRef);
+
+const upstreamMessageRef = ref<EchartsUIType>();
+const { renderEcharts: renderUpstreamMessageEcharts } =
+  useEcharts(upstreamMessageRef);
+
+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;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  const dateRange = values.dateRange;
+  if (!dateRange) {
+    message.warning('请先选择时间范围');
+    return;
+  }
+  // 必须选择 7 天内，因为公众号有时间跨度限制为 7
+  if (betweenDay(dateRange[0], dateRange[1]) >= 7) {
+    message.error('时间间隔 7 天以内，请重新选择');
+    return;
+  }
+  // 处理日期
+  const days = betweenDay(dateRange[0], dateRange[1]);
+  const dates = Array.from(
+    { length: days },
+    (_, index) =>
+      formatDate(addTime(dateRange[0], index), 'YYYY-MM-DD') as string,
+  );
+
+  // 用户增减数据
+  const userSummaryData = await getUserSummary({
+    accountId,
+    date: dateRange,
+  });
+  renderUserSummaryEcharts(userSummaryOption(userSummaryData, dates));
+  // 累计用户数据
+  const userCumulateData = await getUserCumulate({
+    accountId,
+    date: dateRange,
+  });
+  renderUserCumulateEcharts(userCumulateOption(userCumulateData, dates));
+  // 消息发送概况数据
+  const upstreamMessageData = await getUpstreamMessage({
+    accountId,
+    date: dateRange,
+  });
+  renderUpstreamMessageEcharts(
+    upstreamMessageOption(upstreamMessageData, dates),
+  );
+  // 接口分析数据
+  const interfaceSummaryData = await getInterfaceSummary({
+    accountId,
+    date: dateRange,
+  });
+  renderInterfaceSummaryEcharts(
+    interfaceSummaryOption(interfaceSummaryData, dates),
+  );
+}
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/statistics/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/statistics/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <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" />
+        </Card>
+        <Card class="h-full w-1/2" title="累计用户数据">
+          <EchartsUI ref="userCumulateRef" />
+        </Card>
+      </div>
+      <div class="mt-4 flex h-1/3 w-full gap-4">
+        <Card class="h-full w-1/2" title="消息发送概况数据">
+          <EchartsUI ref="upstreamMessageRef" />
+        </Card>
+        <Card class="h-full w-1/2" title="接口分析数据">
+          <EchartsUI ref="interfaceSummaryRef" />
+        </Card>
+      </div>
+    </ContentWrap>
   </Page>
 </template>