|
|
@@ -0,0 +1,552 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <Breadcrumb :items="['menu.settings', 'menu.tracks']" />
|
|
|
+ <a-card class="general-card" title="监测链接管理">
|
|
|
+ <a-row>
|
|
|
+ <a-col :flex="1">
|
|
|
+ <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
|
|
|
+ label-align="left">
|
|
|
+ <a-row :gutter="16">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-form-item field="keyword" label="关键词">
|
|
|
+ <a-input v-model="formModel.keyword" placeholder="搜索 platform/scene/uniqueId"
|
|
|
+ allow-clear @press-enter="search" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-col>
|
|
|
+ <a-divider style="height: 38px" direction="vertical" />
|
|
|
+ <a-col :flex="'86px'" style="text-align: right">
|
|
|
+ <a-space direction="vertical" :size="18">
|
|
|
+ <a-button type="primary" @click="search">
|
|
|
+ <template #icon>
|
|
|
+ <icon-search />
|
|
|
+ </template>
|
|
|
+ 查询
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-divider style="margin-top: 0" />
|
|
|
+ <a-row style="margin-bottom: 16px">
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-space>
|
|
|
+ <a-button type="primary" @click="onAdd">
|
|
|
+ <template #icon>
|
|
|
+ <icon-plus />
|
|
|
+ </template>
|
|
|
+ 新增链接
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12" style="display: flex; align-items: center; justify-content: end;">
|
|
|
+ <a-tooltip content="刷新">
|
|
|
+ <div class="action-icon" @click="search"><icon-refresh size="18" /></div>
|
|
|
+ </a-tooltip>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ <a-table row-key="id" :loading="loading" :pagination="pagination" :columns="columns" :data="renderData"
|
|
|
+ :bordered="{ headerCell: true }" size="small" @page-change="onPageChange">
|
|
|
+ <template #index="{ rowIndex }">
|
|
|
+ {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
|
|
+ </template>
|
|
|
+ <template #event_type="{ record }">
|
|
|
+ <a-tag :color="record.event_type === 'expose' ? 'blue' : 'green'">
|
|
|
+ {{ record.event_type === 'expose' ? '曝光' : '点击' }}
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+ <template #platform="{ record }">
|
|
|
+ {{ getTypeName(record.platform) }}
|
|
|
+ </template>
|
|
|
+ <template #scene="{ record }">
|
|
|
+ {{ getSubTypeName(record.scene) }}
|
|
|
+ </template>
|
|
|
+ <template #path="{ record }">
|
|
|
+ <a-typography-paragraph copyable :ellipsis="{ rows: 1 }" style="margin-bottom: 0;">
|
|
|
+ {{ record.path }}
|
|
|
+ </a-typography-paragraph>
|
|
|
+ </template>
|
|
|
+ <template #time="{ record }">
|
|
|
+ <div style="color:gray;">
|
|
|
+ <div>创建：{{ dayjs(record.create_time).format('YYYY-MM-DD HH:mm') }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #operations="{ record }">
|
|
|
+ <a-space>
|
|
|
+ <a-button type="primary" size="small" @click="onViewReport(record)">
|
|
|
+ 查看报表
|
|
|
+ </a-button>
|
|
|
+ <a-button status="danger" size="small" @click="onDelete(record)">
|
|
|
+ 删除
|
|
|
+ </a-button>
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+
|
|
|
+ <!-- 新增链接弹窗 -->
|
|
|
+ <a-modal v-model:visible="addModalVisible" title="新增监测链接" @ok="handleAddSubmit" @cancel="handleAddCancel"
|
|
|
+ width="500px">
|
|
|
+ <a-form :model="addForm" layout="vertical">
|
|
|
+ <a-form-item label="事件类型" required>
|
|
|
+ <a-select v-model="addForm.event_type" placeholder="请选择事件类型">
|
|
|
+ <a-option value="expose">曝光 (expose)</a-option>
|
|
|
+ <a-option value="click">点击 (click)</a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="平台 (platform)" required>
|
|
|
+ <a-select v-model="addForm.platform" placeholder="请选择或搜索平台" allow-search allow-clear
|
|
|
+ :filter-option="filterOption">
|
|
|
+ <a-option v-for="item in platformOptions" :key="item.value" :value="item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="场景 (scene)" required>
|
|
|
+ <a-select v-model="addForm.scene" placeholder="请选择或搜索场景" allow-search allow-clear
|
|
|
+ :filter-option="filterOption">
|
|
|
+ <a-option v-for="item in sceneOptions" :key="item.value" :value="item.value">
|
|
|
+ {{ item.label }}
|
|
|
+ </a-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="唯一标识 (unique_id)">
|
|
|
+ <a-input v-model="addForm.unique_id" placeholder="可选，用于区分同一场景下的不同链接" allow-clear />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <!-- 报表弹窗 -->
|
|
|
+ <a-modal v-model:visible="reportModalVisible" title="链接报表" width="900px" :footer="false">
|
|
|
+ <a-row :gutter="16" style="margin-bottom: 16px;">
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-range-picker v-model="reportDateRange" style="width: 100%;" @change="onReportDateChange" />
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="4">
|
|
|
+ <a-button type="primary" @click="fetchReport">查询</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-descriptions :data="currentTrackInfo" :column="2" bordered size="small" style="margin-bottom: 16px;" />
|
|
|
+ <!-- 图表区域 -->
|
|
|
+ <a-spin :loading="chartLoading" style="width: 100%; margin-bottom: 16px;">
|
|
|
+ <div class="chart-title">事件趋势</div>
|
|
|
+ <Chart height="250px" :option="chartOption" />
|
|
|
+ </a-spin>
|
|
|
+ <a-table row-key="id" :loading="reportLoading" :pagination="reportPagination" :columns="reportColumns"
|
|
|
+ :data="reportData" :bordered="{ headerCell: true }" size="small" @page-change="onReportPageChange">
|
|
|
+ <template #report_date="{ record }">
|
|
|
+ {{ dayjs(record.report_date).format('YYYY-MM-DD') }}
|
|
|
+ </template>
|
|
|
+ <template #event_type="{ record }">
|
|
|
+ <a-tag :color="record.event_type === 'expose' ? 'blue' : 'green'">
|
|
|
+ {{ record.event_type === 'expose' ? '曝光' : '点击' }}
|
|
|
+ </a-tag>
|
|
|
+ </template>
|
|
|
+ <template #event_count="{ record }">
|
|
|
+ <a-tag color="arcoblue">{{ record.event_count }}</a-tag>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, ref, reactive, onMounted } from 'vue';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { graphic } from 'echarts';
|
|
|
+import useLoading from '@/hooks/loading';
|
|
|
+import { Pagination } from '@/types/global';
|
|
|
+import { Modal, Message } from '@arco-design/web-vue';
|
|
|
+import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
|
|
+import {
|
|
|
+ TrackLinkRecord, TrackReportRecord, TrackListParams, TrackReportParams,
|
|
|
+ queryTrackList, createTrack, deleteTrack, queryTrackReport
|
|
|
+} from '@/api/tracks';
|
|
|
+
|
|
|
+const { loading, setLoading } = useLoading(false);
|
|
|
+const renderData = ref<TrackLinkRecord[]>([]);
|
|
|
+
|
|
|
+const formModel = ref({
|
|
|
+ keyword: '',
|
|
|
+});
|
|
|
+
|
|
|
+const basePagination: Pagination = {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 20,
|
|
|
+};
|
|
|
+const pagination = reactive({
|
|
|
+ ...basePagination,
|
|
|
+});
|
|
|
+
|
|
|
+// 平台选项 - 来自 getTypeName
|
|
|
+const platformOptions = [
|
|
|
+ { label: '口令', value: 'kouling' },
|
|
|
+ { label: 'SDK优惠券', value: 'sdk_coupon' },
|
|
|
+ { label: '应用建议卡', value: 'app_suggest' },
|
|
|
+ { label: '购物助手', value: 'shopping_helper' },
|
|
|
+ { label: '侧边栏', value: 'sidebar' },
|
|
|
+ { label: '搜同款', value: 'search_similar' },
|
|
|
+];
|
|
|
+
|
|
|
+// 场景选项 - 来自 getSubTypeName
|
|
|
+const sceneOptions = [
|
|
|
+ { label: '口令', value: 'kouling' },
|
|
|
+ { label: '应用内优惠券', value: 'app_coupon' },
|
|
|
+ { label: '应用建议卡', value: 'app_suggest_card' },
|
|
|
+ { label: '浏览器DP', value: 'browser_dp' },
|
|
|
+ { label: '全搜', value: 'full_search' },
|
|
|
+ { label: '分页符', value: 'page_break' },
|
|
|
+ { label: '侧边栏', value: 'sidebar' },
|
|
|
+ { label: '搜同款拍一拍', value: 'search_similar_tap' },
|
|
|
+ { label: '搜同款相册', value: 'search_similar_album' },
|
|
|
+ { label: '搜同款助力栏', value: 'search_similar_assist' },
|
|
|
+ { label: '搜同款默认', value: 'search_similar_default' },
|
|
|
+ { label: '搜同款识屏', value: 'search_similar_screen' },
|
|
|
+ { label: '搜同款小布CUI拍一拍', value: 'search_similar_cui_tap' },
|
|
|
+ { label: '搜同款小布CUI客户端', value: 'search_similar_cui_client' },
|
|
|
+];
|
|
|
+
|
|
|
+// 获取平台名称
|
|
|
+const getTypeName = (platform: string) => {
|
|
|
+ const item = platformOptions.find(p => p.value === platform);
|
|
|
+ return item ? item.label : platform;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取场景名称
|
|
|
+const getSubTypeName = (scene: string) => {
|
|
|
+ const item = sceneOptions.find(s => s.value === scene);
|
|
|
+ return item ? item.label : scene;
|
|
|
+};
|
|
|
+
|
|
|
+const filterOption = (inputValue: string, option: any) => {
|
|
|
+ return option.label.toLowerCase().includes(inputValue.toLowerCase()) ||
|
|
|
+ option.value.toLowerCase().includes(inputValue.toLowerCase());
|
|
|
+};
|
|
|
+
|
|
|
+const columns = computed<TableColumnData[]>(() => [
|
|
|
+ { title: '#', slotName: 'index', width: 60 },
|
|
|
+ { title: '事件类型', slotName: 'event_type', width: 100 },
|
|
|
+ { title: '平台', slotName: 'platform', width: 120 },
|
|
|
+ { title: '场景', slotName: 'scene', width: 150 },
|
|
|
+ { title: 'UniqueId', dataIndex: 'unique_id', width: 120, ellipsis: true },
|
|
|
+ { title: '路径', slotName: 'path', width: 300 },
|
|
|
+ { title: '时间', slotName: 'time', width: 160 },
|
|
|
+ { title: '操作', slotName: 'operations', width: 160, fixed: 'right' },
|
|
|
+]);
|
|
|
+
|
|
|
+const fetchData = async (params: TrackListParams) => {
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+ const { data } = await queryTrackList(params);
|
|
|
+ if (!data) return;
|
|
|
+ renderData.value = data.list || [];
|
|
|
+ pagination.current = data.page;
|
|
|
+ pagination.total = data.count;
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const search = () => {
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ keyword: formModel.value.keyword || undefined,
|
|
|
+ getTotal: true,
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const onPageChange = (current: number) => {
|
|
|
+ fetchData({
|
|
|
+ ...basePagination,
|
|
|
+ current,
|
|
|
+ keyword: formModel.value.keyword || undefined,
|
|
|
+ getTotal: true,
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 新增链接
|
|
|
+const addModalVisible = ref(false);
|
|
|
+const addForm = ref({
|
|
|
+ event_type: 'expose',
|
|
|
+ platform: '',
|
|
|
+ scene: '',
|
|
|
+ unique_id: '',
|
|
|
+});
|
|
|
+
|
|
|
+const onAdd = () => {
|
|
|
+ addForm.value = {
|
|
|
+ event_type: 'expose',
|
|
|
+ platform: '',
|
|
|
+ scene: '',
|
|
|
+ unique_id: '',
|
|
|
+ };
|
|
|
+ addModalVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleAddSubmit = async () => {
|
|
|
+ if (!addForm.value.platform || !addForm.value.scene) {
|
|
|
+ Message.warning('请填写平台和场景');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const res: any = await createTrack(addForm.value);
|
|
|
+ if (res.success) {
|
|
|
+ Message.success(res.msg || '创建成功');
|
|
|
+ addModalVisible.value = false;
|
|
|
+ search();
|
|
|
+ } else {
|
|
|
+ Message.error(res.msg || '创建失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ Message.error('请求失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleAddCancel = () => {
|
|
|
+ addModalVisible.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+// 删除
|
|
|
+const onDelete = (record: TrackLinkRecord) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确认删除',
|
|
|
+ content: `确定要删除该监测链接吗？删除后将清理缓存数据。`,
|
|
|
+ okText: '删除',
|
|
|
+ okButtonProps: { status: 'danger' },
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk: async () => {
|
|
|
+ try {
|
|
|
+ const res: any = await deleteTrack(record.id);
|
|
|
+ if (res.success) {
|
|
|
+ Message.success(res.msg || '删除成功');
|
|
|
+ search();
|
|
|
+ } else {
|
|
|
+ Message.error(res.msg || '删除失败');
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ Message.error('删除请求失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 报表查看
|
|
|
+const reportModalVisible = ref(false);
|
|
|
+const reportLoading = ref(false);
|
|
|
+const chartLoading = ref(false);
|
|
|
+const reportData = ref<TrackReportRecord[]>([]);
|
|
|
+const currentTrack = ref<TrackLinkRecord | null>(null);
|
|
|
+const reportDateRange = ref<string[]>([
|
|
|
+ dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
|
|
|
+ dayjs().format('YYYY-MM-DD')
|
|
|
+]);
|
|
|
+
|
|
|
+// 图表数据
|
|
|
+const chartXAxis = ref<string[]>([]);
|
|
|
+const chartData = ref<number[]>([]);
|
|
|
+
|
|
|
+const chartOption = computed(() => {
|
|
|
+ return {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { type: 'line' },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ top: '10%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: chartXAxis.value,
|
|
|
+ axisLabel: { color: '#4E5969' },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: (value: number) => {
|
|
|
+ if (value >= 10000) return `${(value / 10000).toFixed(1)}w`;
|
|
|
+ if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: { type: 'dashed', color: '#E5E8EF' },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '事件数',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ data: chartData.value,
|
|
|
+ lineStyle: { width: 2, color: '#165DFF' },
|
|
|
+ itemStyle: { color: '#165DFF' },
|
|
|
+ areaStyle: {
|
|
|
+ color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: 'rgba(22, 93, 255, 0.2)' },
|
|
|
+ { offset: 1, color: 'rgba(22, 93, 255, 0)' },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+const reportPagination = reactive({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const reportColumns = computed<TableColumnData[]>(() => [
|
|
|
+ { title: '日期', slotName: 'report_date', width: 120 },
|
|
|
+ { title: '事件类型', slotName: 'event_type', width: 100 },
|
|
|
+ { title: '平台', dataIndex: 'platform', width: 100 },
|
|
|
+ { title: '场景', dataIndex: 'scene', width: 120 },
|
|
|
+ { title: 'UniqueId', dataIndex: 'unique_id', width: 120 },
|
|
|
+ { title: '事件数', slotName: 'event_count', width: 100 },
|
|
|
+]);
|
|
|
+
|
|
|
+const currentTrackInfo = computed(() => {
|
|
|
+ if (!currentTrack.value) return [];
|
|
|
+ return [
|
|
|
+ { label: '事件类型', value: currentTrack.value.event_type === 'expose' ? '曝光' : '点击' },
|
|
|
+ { label: '平台', value: getTypeName(currentTrack.value.platform) },
|
|
|
+ { label: '场景', value: getSubTypeName(currentTrack.value.scene) },
|
|
|
+ { label: 'UniqueId', value: currentTrack.value.unique_id || '-' },
|
|
|
+ ];
|
|
|
+});
|
|
|
+
|
|
|
+const onViewReport = (record: TrackLinkRecord) => {
|
|
|
+ currentTrack.value = record;
|
|
|
+ reportDateRange.value = [
|
|
|
+ dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
|
|
|
+ dayjs().format('YYYY-MM-DD')
|
|
|
+ ];
|
|
|
+ reportPagination.current = 1;
|
|
|
+ reportModalVisible.value = true;
|
|
|
+ fetchReport();
|
|
|
+ fetchChartData();
|
|
|
+};
|
|
|
+
|
|
|
+const fetchReport = async () => {
|
|
|
+ if (!currentTrack.value) return;
|
|
|
+ reportLoading.value = true;
|
|
|
+ try {
|
|
|
+ const params: TrackReportParams = {
|
|
|
+ current: reportPagination.current,
|
|
|
+ pageSize: reportPagination.pageSize,
|
|
|
+ track_link_id: currentTrack.value.id,
|
|
|
+ start: reportDateRange.value[0],
|
|
|
+ end: reportDateRange.value[1],
|
|
|
+ getTotal: true,
|
|
|
+ };
|
|
|
+ const res: any = await queryTrackReport(params);
|
|
|
+ if (res && res.data) {
|
|
|
+ reportData.value = res.data.list || [];
|
|
|
+ reportPagination.total = res.data.count || 0;
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ } finally {
|
|
|
+ reportLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const fetchChartData = async () => {
|
|
|
+ if (!currentTrack.value) return;
|
|
|
+ chartLoading.value = true;
|
|
|
+ try {
|
|
|
+ const params: TrackReportParams = {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ track_link_id: currentTrack.value.id,
|
|
|
+ start: reportDateRange.value[0],
|
|
|
+ end: reportDateRange.value[1],
|
|
|
+ getTotal: false,
|
|
|
+ };
|
|
|
+ const res: any = await queryTrackReport(params);
|
|
|
+ if (res && res.data && res.data.list) {
|
|
|
+ // 按日期聚合
|
|
|
+ const dateMap = new Map<string, number>();
|
|
|
+ const start = dayjs(reportDateRange.value[0]);
|
|
|
+ const end = dayjs(reportDateRange.value[1]);
|
|
|
+ let current = start;
|
|
|
+ while (current.isBefore(end) || current.isSame(end, 'day')) {
|
|
|
+ dateMap.set(current.format('YYYY-MM-DD'), 0);
|
|
|
+ current = current.add(1, 'day');
|
|
|
+ }
|
|
|
+
|
|
|
+ res.data.list.forEach((item: TrackReportRecord) => {
|
|
|
+ const date = dayjs(item.report_date).format('YYYY-MM-DD');
|
|
|
+ if (dateMap.has(date)) {
|
|
|
+ dateMap.set(date, (dateMap.get(date) || 0) + item.event_count);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ chartXAxis.value = [];
|
|
|
+ chartData.value = [];
|
|
|
+ const sortedDates = Array.from(dateMap.keys()).sort();
|
|
|
+ sortedDates.forEach(date => {
|
|
|
+ chartXAxis.value.push(dayjs(date).format('MM-DD'));
|
|
|
+ chartData.value.push(dateMap.get(date) || 0);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ } finally {
|
|
|
+ chartLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const onReportDateChange = () => {
|
|
|
+ reportPagination.current = 1;
|
|
|
+ fetchReport();
|
|
|
+ fetchChartData();
|
|
|
+};
|
|
|
+
|
|
|
+const onReportPageChange = (current: number) => {
|
|
|
+ reportPagination.current = current;
|
|
|
+ fetchReport();
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ search();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+export default {
|
|
|
+ name: 'Tracks',
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.container {
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.general-card) {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.action-icon {
|
|
|
+ margin-left: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--color-text-1);
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+</style>
|
dodo hold