data-marketing-platform/src/views/count/featureUsage/event/eventData.vue

<template>
	<div class="layout-padding">
		<div class="!overflow-auto pl-1">
			<!-- 顶部控制区域 -->
			<div class="mb-2 el-card p-9">
				<div class="flex items-center mb-4">
					<Title title="自定义事件" />
				</div>

				<div class="flex items-center justify-between space-x-4">
					<div class="flex items-center">
						<el-select v-model="formData.selectedChannelCompare" class="!w-[180px]" placeholder="版本选择">
							<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</div>
					<div class="flex items-center ml-2">
						<el-select v-model="formData.selectedChannelCompare" class="!w-[180px] ml-2" placeholder="全部版本">
							<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-select v-model="formData.selectedChannelCompare" class="!w-[180px] ml-2" placeholder="全部渠道">
							<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-date-picker v-model="formData.time" class="w-[200px] ml-2" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" />
					</div>
				</div>
			</div>
			<div class="el-card p-9 mt-2">
				<div class="flex justify-between items-center mb-2">
					<Title left-line title="事件统计">
						<template #default>
							<el-popover class="box-item" placement="right" trigger="hover" width="600">
								<template #reference>
									<el-icon class="ml-1" style="color: #a4b8cf"><QuestionFilled /></el-icon>
								</template>
								<template #default>
									<div class="ant-popover-inner-content">
										<div class="um-page-tips-content" style="line-height: 24px">
											<p><span class="highlight">事件消息数：</span><span>事件被触发的次数</span></p>
											<p><span class="highlight">消息数/启动次数：</span><span>平均每次启动被触发的次数</span></p>
											<p><span class="highlight">独立用户数：</span><span>每日触发事件的独立用户数（以设备为判断标准）</span></p>
											<p><span class="highlight">持续时长：</span><span>事件持续的时间长度</span></p>
										</div>
									</div>
								</template>
							</el-popover>
						</template>
					</Title>
				</div>
				<div class="flex justify-between items-center mb-2">
					<div class="flex items-center">
						<el-select v-model="formData.selectedChannelCompare" class="!w-[140px]" placeholder="全部版本">
							<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-button type="primary" class="ml-2">行业均值</el-button>
					</div>
					<el-radio-group v-model="timeGranularity">
						<el-radio-button label="day">消息数量</el-radio-button>
						<el-radio-button label="week">消息数/启动次数</el-radio-button>
						<el-radio-button label="month">独立用户数</el-radio-button>
						<el-radio-button label="xxsc">消息时长</el-radio-button>
					</el-radio-group>
				</div>
				<div class="relative">
					<div ref="lineChartRef" style="width: 100%; height: 320px"></div>
				</div>
			</div>
			<div class="el-card p-9 mt-2">
				<!-- 明细表格 -->
				<Title left-line title="事件统计明细" />
				<div class="mt-4">
					<el-table :data="pagedTableRows" border>
						<el-table-column prop="date" label="日期" align="center" min-width="140" />
						<el-table-column prop="hyyh" label="消息数量" ali gn="center" min-width="140" />
						<el-table-column prop="hyyh" label="消息数/启动次数" align="center" sortable min-width="140" />
						<el-table-column prop="hyyh" label="独立用户数" align="center" sortable min-width="140" />
						<el-table-column prop="hyyh" label="消息时长" align="center" sortable min-width="140" />
					</el-table>
					<div class="flex justify-end mt-2">
						<el-pagination
							v-model:current-page="currentPage"
							v-model:page-size="pageSize"
							background
							layout="total, prev, pager, next, sizes"
							:total="tableRows.length"
							:page-sizes="[5, 10, 20]"
						/>
					</div>
				</div>
				<!-- 趋势图表区域 -->
				<div v-if="showTrendChart" class="mt-4">
					<div class="flex justify-between items-center mb-4">
						<h3 class="text-lg font-medium">趋势分析</h3>
						<el-button type="primary" link @click="showTrendChart = false">
							<el-icon><Close /></el-icon>
							关闭
						</el-button>
					</div>
					<trend :data="trendData" series-name="消息数量" height="320px" :smooth="true" :area="false" :y-max="1200" />
				</div>

				<!-- 选择模块 -->
				<div v-if="!showTrendChart" class="flex justify-between items-center mt-4">
					<div class="flex items-center">
						<el-select v-model="formData.selectedChannelCompare" class="!w-[180px]" placeholder="版本选择">
							<el-option v-for="item in channelCompareOptions" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
						<el-popover class="box-item" placement="right" trigger="hover" width="600">
							<template #reference>
								<el-icon class="ml-1" style="color: #a4b8cf"><QuestionFilled /></el-icon>
							</template>
							<template #default>
								<div class="ant-popover-inner-content">
									<div class="um-page-tips-content" style="line-height: 24px">
										<p><span>您可以为事件设置参数，丰富自定义统计的内容，每个事件至多同时传100个参数，每个参数至多有1000个取值。</span></p>
									</div>
								</div>
							</template>
						</el-popover>
					</div>
					<div class="flex items-center">
						<el-radio-group v-model="timeGranularity">
							<el-radio-button label="day">次数分布</el-radio-button>
							<el-radio-button label="week">时长分布</el-radio-button>
						</el-radio-group>
						<el-button class="ml-2" type="primary" link>导出</el-button>
					</div>
				</div>
				<div v-if="!showTrendChart" class="mt-2">
					<el-table :data="pagedTableRows" border>
						<el-table-column prop="date" label="参数值" align="center" min-width="140" />
						<el-table-column prop="hyyh" label="消息数量" ali gn="center" min-width="140" />
						<el-table-column prop="hyyh" label="占比" align="center" sortable min-width="140" />
						<el-table-column fixed="right" label="趋势" align="center" min-width="140">
							<template #default>
								<el-button type="primary" link @click="showTrendChart = true">趋势</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="flex justify-end mt-2">
						<el-pagination
							v-model:current-page="currentPage"
							v-model:page-size="pageSize"
							background
							layout="total, prev, pager, next, sizes"
							:total="tableRows.length"
							:page-sizes="[5, 10, 20]"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, defineAsyncComponent, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { Close } from '@element-plus/icons-vue';

const Title = defineAsyncComponent(() => import('/@/components/Title/index.vue'));
const Trend = defineAsyncComponent(() => import('./component/trend.vue'));
interface TableRow {
	date: string;
	newUsers: number;
	ratio: string;
}
const formData = ref<Record<string, any>>({
	selectedChannelCompare: '',
});
const channelCompareOptions = [
	{ label: '全部版本', value: '' },
	{ label: '1.0', value: '1.0' },
	{ label: '2.0', value: '2.0' },
];

// 图表相关
const timeGranularity = ref<'hour' | 'day' | 'week' | 'month'>('week');
const lineChartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

const lineChartData = ref<Array<{ x: string; value: number }>>([
	{ x: '2025-07-01', value: 900 },
	{ x: '2025-07-08', value: 1000 },
	{ x: '2025-07-15', value: 1100 },
	{ x: '2025-07-22', value: 1000 },
	{ x: '2025-07-29', value: 600 },
	{ x: '2025-08-05', value: 300 },
	{ x: '2025-08-12', value: 250 },
	{ x: '2025-08-19', value: 200 },
	{ x: '2025-08-26', value: 650 },
	{ x: '2025-09-02', value: 950 },
	{ x: '2025-09-09', value: 900 },
	{ x: '2025-09-16', value: 120 },
]);

function initLineChart(): void {
	if (!lineChartRef.value) return;
	if (chartInstance) chartInstance.dispose();
	chartInstance = echarts.init(lineChartRef.value);
	const option: echarts.EChartsOption = {
		tooltip: { trigger: 'axis' },
		grid: { left: 40, right: 20, top: 20, bottom: 30 },
		xAxis: {
			type: 'category',
			data: lineChartData.value.map((d) => d.x),
			axisLine: { lineStyle: { color: '#e5e7eb' } },
			axisLabel: { color: '#6b7280' },
			axisTick: { alignWithLabel: true },
		},
		yAxis: {
			type: 'value',
			axisLine: { show: false },
			splitLine: { lineStyle: { color: '#f3f4f6' } },
			axisLabel: { color: '#6b7280' },
		},
		series: [
			{
				name: '新增人数',
				type: 'line',
				smooth: true,
				showSymbol: true,
				symbolSize: 6,
				itemStyle: { color: '#409EFF' },
				lineStyle: { color: '#409EFF' },
				data: lineChartData.value.map((d) => d.value),
			},
		],
	};
	chartInstance.setOption(option);
}

onMounted(() => {
	initLineChart();
});

watch(timeGranularity, () => {
	// 静态页面：仅重新渲染
	initLineChart();
});

// 表格相关（静态数据）
const tableRows = ref<TableRow[]>(
	Array.from({ length: 42 }).map((_, idx) => ({
		date: `2025-08-${String(11).padStart(2, '0')}`,
		newUsers: 727,
		hyyh: '123' + idx,
		ratio: '97.45%',
	}))
);

const currentPage = ref(1);
const pageSize = ref(5);
const pagedTableRows = computed(() => {
	const startIndex = (currentPage.value - 1) * pageSize.value;

	return tableRows.value.slice(startIndex, startIndex + pageSize.value);
});

// 趋势图表相关
const showTrendChart = ref(false);
const trendData = ref([
	{ date: '2025-07-30', value: 860 },
	{ date: '2025-07-30', value: 1100 },
	{ date: '2025-07-30', value: 1000 },
	{ date: '2025-07-30', value: 920 },
	{ date: '2025-07-30', value: 600 },
	{ date: '2025-07-30', value: 250 },
	{ date: '2025-07-30', value: 200 },
	{ date: '2025-07-30', value: 620 },
	{ date: '2025-07-30', value: 1050 },
	{ date: '2025-07-30', value: 1000 },
	{ date: '2025-07-30', value: 70 },
]);
</script>

<style lang="scss" scoped>
.el-card {
	background: white;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
:deep(.el-tabs__item.is-top.is-active) {
	color: #167af0;
	background-color: #e8f2fe;
}

.el-radio-button__inner {
	border-radius: 4px;
}

.el-radio-button:first-child .el-radio-button__inner {
	border-radius: 4px 0 0 4px;
}

.el-radio-button:last-child .el-radio-button__inner {
	border-radius: 0 4px 4px 0;
}
</style>