From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块
---
src/views/im/manager/statistics/components/trend-chart.vue | 145 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 145 insertions(+), 0 deletions(-)
diff --git a/src/views/im/manager/statistics/components/trend-chart.vue b/src/views/im/manager/statistics/components/trend-chart.vue
new file mode 100644
index 0000000..3d1c33b
--- /dev/null
+++ b/src/views/im/manager/statistics/components/trend-chart.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { EChartsOption, EchartsUIType } from '#/packages/effects/plugins/src/echarts';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '#/packages/effects/plugins/src/echarts';
+
+import { Card, Select } from 'ant-design-vue';
+
+import {
+ getMessageTrend,
+ getUserTrend,
+} from '#/api/im/manager/statistics';
+
+const props = defineProps<{
+ type: 'message' | 'user';
+}>();
+
+const title =
+ props.type === 'message'
+ ? '娑堟伅瓒嬪娍锛堢鑱� + 缇よ亰锛�'
+ : '鐢ㄦ埛瓒嬪娍锛堟柊澧炴敞鍐� + 鏃ユ椿锛�';
+
+const days = ref(7);
+const loading = ref(false);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 鑾峰彇鍥捐〃閰嶇疆 */
+function buildOptions(
+ dates: string[],
+ series: Record<string, number[]>,
+): EChartsOption {
+ if (props.type === 'message') {
+ return {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['绉佽亰娑堟伅', '缇よ亰娑堟伅'], top: 0 },
+ grid: { left: 24, right: 24, bottom: 16, top: 42, containLabel: true },
+ xAxis: {
+ type: 'category',
+ data: dates,
+ axisLabel: { formatter: (value: string) => value.slice(5, 10) },
+ },
+ yAxis: { type: 'value', name: '娑堟伅閲�' },
+ series: [
+ {
+ name: '绉佽亰娑堟伅',
+ type: 'line',
+ smooth: true,
+ data: series.private || [],
+ itemStyle: { color: '#2f7df6' },
+ areaStyle: { color: 'rgba(47,125,246,0.12)' },
+ },
+ {
+ name: '缇よ亰娑堟伅',
+ type: 'line',
+ smooth: true,
+ data: series.group || [],
+ itemStyle: { color: '#18a058' },
+ areaStyle: { color: 'rgba(24,160,88,0.12)' },
+ },
+ ],
+ };
+ }
+ return {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['鏂板娉ㄥ唽', '鏃ユ椿'], top: 0 },
+ grid: { left: 24, right: 32, bottom: 16, top: 42, containLabel: true },
+ xAxis: {
+ type: 'category',
+ data: dates,
+ axisLabel: { formatter: (value: string) => value.slice(5, 10) },
+ },
+ yAxis: [
+ { type: 'value', name: '鏂板娉ㄥ唽', position: 'left' },
+ { type: 'value', name: '鏃ユ椿', position: 'right' },
+ ],
+ series: [
+ {
+ name: '鏂板娉ㄥ唽',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: series.register || [],
+ itemStyle: { color: '#f59e0b' },
+ barMaxWidth: 24,
+ },
+ {
+ name: '鏃ユ椿',
+ type: 'line',
+ yAxisIndex: 1,
+ smooth: true,
+ data: series.active || [],
+ itemStyle: { color: '#ef4444' },
+ },
+ ],
+ };
+}
+
+/** 鍔犺浇鍥捐〃鏁版嵁 */
+async function loadData() {
+ loading.value = true;
+ try {
+ const data =
+ props.type === 'message'
+ ? await getMessageTrend(days.value)
+ : await getUserTrend(days.value);
+ await nextTick();
+ await renderEcharts(buildOptions(data.dates, data.series));
+ } finally {
+ loading.value = false;
+ }
+}
+
+onMounted(loadData);
+</script>
+
+<template>
+ <Card :body-style="{ padding: '12px 16px 16px' }">
+ <template #title>
+ <div class="flex items-center justify-between">
+ <span>{{ title }}</span>
+ <Select
+ v-model:value="days"
+ :options="[
+ { label: '杩� 7 澶�', value: 7 },
+ { label: '杩� 15 澶�', value: 15 },
+ { label: '杩� 30 澶�', value: 30 },
+ ]"
+ class="w-28"
+ size="small"
+ @change="loadData"
+ />
+ </div>
+ </template>
+ <div class="relative min-h-[320px]">
+ <EchartsUI ref="chartRef" height="320px" />
+ <div
+ v-if="loading"
+ class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+ >
+ 鍔犺浇涓�
+ </div>
+ </div>
+ </Card>
+</template>
--
Gitblit v1.9.3