银川 1.联调产品维护页面 2.添加IM即时通讯模块

gaoluyang

2026-06-29 27cd042df9aca0383a49f3514bc21958dd890912

 src/views/im/manager/statistics/index.vue

对比新文件
@@ -0,0 +1,45 @@
<script lang="ts" setup>
import type { ImManagerStatisticsApi } from '#/api/im/manager/statistics';

import { onMounted, ref } from 'vue';

import { Page } from '#/packages/effects/common-ui/src';

import { getStatisticsOverview } from '#/api/im/manager/statistics';

import {
  DistributionChart,
  OverviewCards,
  TrendChart,
} from './components';

defineOptions({ name: 'ImManagerStatistics' });

const overview = ref<ImManagerStatisticsApi.Overview>();

/** 鍔犺浇姒傝鏁版嵁 */
async function loadOverview() {
  overview.value = await getStatisticsOverview();
}

onMounted(loadOverview);
</script>

<template>
  <Page auto-content-height>
    <div class="space-y-4">
      <OverviewCards v-if="overview" :overview="overview" />

      <div class="grid grid-cols-2 gap-4 max-xl:grid-cols-1">
        <TrendChart type="message" />
        <TrendChart type="user" />
      </div>

      <div class="grid grid-cols-3 gap-4 max-2xl:grid-cols-2 max-xl:grid-cols-1">
        <DistributionChart type="messageType" />
        <DistributionChart type="groupSize" />
        <DistributionChart type="topSenders" />
      </div>
    </div>
  </Page>
</template>