From eac6eec9e3426df58ccd017fc2fabc51b53b8b4b Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Fri, 20 Feb 2026 08:04:46 +0800
Subject: [PATCH] feat:maidian

---
 src/api/system/index.js                       |   8 +
 src/views/index/components/TrackingCharts.vue | 350 +++++++++++
 src/views/index/index.vue                     | 558 +-----------------
 src/views/index/utils/index.js                |  19 +
 4 files changed, 381 insertions(+), 554 deletions(-)
 create mode 100644 src/views/index/components/TrackingCharts.vue
 create mode 100644 src/views/index/utils/index.js

diff --git a/src/api/system/index.js b/src/api/system/index.js
index 8002f24..67da33e 100644
--- a/src/api/system/index.js
+++ b/src/api/system/index.js
@@ -7,3 +7,11 @@ export function getDeviceList(data) {
     params: data,
   })
 }
+
+export function getTrackingLogsList(data) {
+  return request({
+    url: 'management/api/system/tracking-logs/list',
+    method: 'get',
+    params: data,
+  })
+}
diff --git a/src/views/index/components/TrackingCharts.vue b/src/views/index/components/TrackingCharts.vue
new file mode 100644
index 0000000..25a6bf6
--- /dev/null
+++ b/src/views/index/components/TrackingCharts.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="tracking-charts">
+    <el-card class="filter-card" shadow="never">
+      <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
+        <el-form-item label="App">
+          <el-select v-model="queryForm.appId" filterable>
+            <el-option v-for="(label, value) in appMap" :key="value" :label="label" :value="value">
+              <span style="float: left">{{ label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件名称">
+          <el-select v-model="queryForm.eventName" clearable filterable placeholder="全部事件">
+            <el-option v-for="(label, value) in eventNameMap" :key="value" :label="label" :value="value">
+              <span style="float: left">{{ label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ value }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件类型">
+          <el-select v-model="queryForm.eventType" clearable placeholder="全部类型">
+            <el-option v-for="(label, value) in eventTypeMap" :key="value" :label="label" :value="value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围">
+          <el-date-picker
+            v-model="queryForm.dateRange"
+            :default-time="['00:00:00', '23:59:59']"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="开始日期"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <div v-loading="loading" class="charts-container">
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>时段趋势</span></div>
+            <v-chart autoresize class="chart" :option="trendOption" />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="12">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>事件名称分布</span></div>
+            <v-chart autoresize class="chart" :option="eventNameOption" />
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>事件类型分布</span></div>
+            <v-chart autoresize class="chart" :option="eventTypeOption" />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <el-card class="chart-card" shadow="never">
+            <div slot="header"><span>页面访问排行</span></div>
+            <v-chart autoresize class="chart" :option="pageOption" />
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getTrackingLogsList } from '@/api/system'
+  import { use } from 'echarts/core'
+  import { CanvasRenderer } from 'echarts/renderers'
+  import { LineChart, PieChart, BarChart } from 'echarts/charts'
+  import { GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
+  import VChart from 'vue-echarts'
+  import dayjs from 'dayjs'
+  import { groupBy, countBy } from 'lodash'
+  import { eventNameMap, eventTypeMap, appMap } from '../utils'
+
+  use([CanvasRenderer, LineChart, PieChart, BarChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
+
+  export default {
+    name: 'TrackingCharts',
+    components: {
+      VChart,
+    },
+    data() {
+      return {
+        eventNameMap,
+        eventTypeMap,
+        appMap,
+        loading: false,
+        queryForm: {
+          appId: '69665538a49b8ae3be50fe5d',
+          eventName: '',
+          eventType: '',
+          dateRange: [],
+        },
+        pickerOptions: {
+          shortcuts: [
+            {
+              text: '今天',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setHours(0, 0, 0, 0)
+                end.setHours(23, 59, 59, 999)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '昨天',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24)
+                start.setHours(0, 0, 0, 0)
+                end.setTime(end.getTime() - 3600 * 1000 * 24)
+                end.setHours(23, 59, 59, 999)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '最近一周',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                picker.$emit('pick', [start, end])
+              },
+            },
+          ],
+        },
+        list: [],
+        trendOption: {},
+        eventNameOption: {},
+        eventTypeOption: {},
+        pageOption: {},
+      }
+    },
+    created() {
+      // 默认选中今天
+      const end = new Date()
+      const start = new Date()
+      start.setHours(0, 0, 0, 0)
+      end.setHours(23, 59, 59, 999)
+      this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
+
+      this.fetchData()
+    },
+    methods: {
+      async fetchData() {
+        this.loading = true
+        try {
+          const params = {
+            appId: this.queryForm.appId,
+            eventName: this.queryForm.eventName || undefined,
+            eventType: this.queryForm.eventType || undefined,
+            startTime: this.queryForm.dateRange ? this.queryForm.dateRange[0] : undefined,
+            endTime: this.queryForm.dateRange ? this.queryForm.dateRange[1] : undefined,
+            pageNo: 1,
+            pageSize: 10000, // 获取足够多的数据进行前端统计，或者应该依赖后端聚合接口
+          }
+
+          const { data } = await getTrackingLogsList(params)
+          this.list = data.list || []
+          this.processData()
+        } catch (error) {
+          console.error(error)
+          this.$baseMessage('获取数据失败', 'error')
+        } finally {
+          this.loading = false
+        }
+      },
+      handleQuery() {
+        this.fetchData()
+      },
+      resetQuery() {
+        this.queryForm.appId = 'wx2d5351b816654a93'
+        this.queryForm.eventName = ''
+        this.queryForm.eventType = ''
+        const end = new Date()
+        const start = new Date()
+        start.setHours(0, 0, 0, 0)
+        end.setHours(23, 59, 59, 999)
+        this.queryForm.dateRange = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')]
+        this.fetchData()
+      },
+      processData() {
+        // 1. 时段趋势
+        const logsByHour = groupBy(this.list, (item) => dayjs(item.createdAt).format('HH:00'))
+        const hours = []
+        const counts = []
+        for (let i = 0; i < 24; i++) {
+          const hour = `${String(i).padStart(2, '0')}:00`
+          hours.push(hour)
+          counts.push(logsByHour[hour] ? logsByHour[hour].length : 0)
+        }
+        this.trendOption = {
+          tooltip: {
+            trigger: 'axis',
+          },
+          xAxis: {
+            type: 'category',
+            data: hours,
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [
+            {
+              data: counts,
+              type: 'line',
+              smooth: true,
+              areaStyle: {},
+            },
+          ],
+        }
+
+        // 2. 事件名称分布
+        const eventNameCounts = countBy(this.list, 'eventName')
+        const eventNameData = Object.keys(eventNameCounts).map((key) => ({
+          name: this.eventNameMap[key] || key,
+          value: eventNameCounts[key],
+        }))
+        this.eventNameOption = {
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          series: [
+            {
+              name: '事件名称',
+              type: 'pie',
+              radius: '50%',
+              data: eventNameData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        }
+
+        // 3. 事件类型分布
+        const eventTypeCounts = countBy(this.list, 'eventType')
+        const eventTypeData = Object.keys(eventTypeCounts).map((key) => ({
+          name: this.eventTypeMap[key] || key,
+          value: eventTypeCounts[key],
+        }))
+        this.eventTypeOption = {
+          tooltip: {
+            trigger: 'item',
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+          },
+          series: [
+            {
+              name: '事件类型',
+              type: 'pie',
+              radius: '50%',
+              data: eventTypeData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)',
+                },
+              },
+            },
+          ],
+        }
+
+        // 4. 页面访问排行
+        const pageCounts = countBy(this.list, 'page')
+        // 排序并取前10
+        const sortedPages = Object.keys(pageCounts)
+          .sort((a, b) => pageCounts[b] - pageCounts[a])
+          .slice(0, 10)
+        const pageData = sortedPages.map((key) => pageCounts[key])
+
+        this.pageOption = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow',
+            },
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true,
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01],
+          },
+          yAxis: {
+            type: 'category',
+            data: sortedPages,
+          },
+          series: [
+            {
+              name: '访问次数',
+              type: 'bar',
+              data: pageData,
+            },
+          ],
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .tracking-charts {
+    padding: 20px;
+  }
+  .filter-card {
+    margin-bottom: 20px;
+  }
+  .chart-card {
+    height: 400px;
+  }
+  .chart {
+    height: 300px;
+  }
+</style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 5057561..dc50168 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,569 +1,19 @@
 <template>
   <div class="index-container">
-    <!-- <el-row :gutter="20">
-      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
-        <el-alert v-if="noticeList">
-          <div style="display: flex; align-items: center; justify-content: center">
-            <a href="https://github.com/zxwk1998/vue-admin-better" target="_blank">
-              <img
-                src="https://img.shields.io/github/stars/zxwk1998/vue-admin-better?style=flat-square&label=Stars&logo=github"
-                style="margin-right: 10px"
-              />
-            </a>
-            <p v-html="noticeList.notice"></p>
-          </div>
-        </el-alert>
-      </el-col>
-      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>访问量</span>
-          </div>
-          <vab-chart autoresize :option="fwl" />
-          <div class="bottom">
-            <span>
-              日均访问量:
-
-              {{ config1.endVal }}
-            </span>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>授权数</span>
-          </div>
-          <vab-chart autoresize :option="sqs" />
-          <div class="bottom">
-            <span>
-              总授权数:
-              {{ config2.endVal }}
-            </span>
-          </div>
-        </el-card>
-      </el-col>
-
-      <el-col v-for="(item, index) in iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
-        <router-link target="_blank" :to="item.link">
-          <el-card class="icon-panel" shadow="never">
-            <vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
-            <p>{{ item.title }}</p>
-          </el-card>
-        </router-link>
-      </el-col>
-
-      <el-col :lg="11" :md="24" :sm="24" :xl="11" :xs="24">
-        <el-card class="card" shadow="never">
-          <div slot="header">
-            <span>依赖信息</span>
-            <div style="float: right">部署时间:{{ updateTime }}</div>
-          </div>
-
-          <table class="table">
-            <tr>
-              <td>@vue/cli版本</td>
-              <td>{{ devDependencies['@vue/cli-service'] }}</td>
-              <td>vue版本</td>
-              <td>{{ dependencies['vue'] }}</td>
-            </tr>
-            <tr>
-              <td>vuex版本</td>
-              <td>{{ dependencies['vuex'] }}</td>
-              <td>vue-router版本</td>
-              <td>{{ dependencies['vue-router'] }}</td>
-            </tr>
-            <tr>
-              <td>element-ui版本</td>
-              <td>{{ dependencies['element-ui'] }}</td>
-              <td>axios版本</td>
-              <td>{{ dependencies['axios'] }}</td>
-            </tr>
-            <tr>
-              <td>eslint版本</td>
-              <td>{{ devDependencies['eslint'] }}</td>
-              <td>prettier版本</td>
-              <td>{{ devDependencies['prettier'] }}</td>
-            </tr>
-            <tr>
-              <td>sass版本</td>
-              <td>{{ devDependencies['sass'] }}</td>
-              <td>mockjs版本</td>
-              <td>{{ dependencies['mockjs'] }}</td>
-            </tr>
-            <tr>
-              <td>layouts版本</td>
-              <td>{{ dependencies['layouts'] }}</td>
-              <td>lodash版本</td>
-              <td>{{ dependencies['lodash'] }}</td>
-            </tr>
-          </table>
-          <br />
-          <el-alert :closable="false" :title="userAgent" type="info" />
-          <br />
-        </el-card>
-      </el-col>
-      <el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
-        <el-card shadow="never">
-          <div slot="header">
-            <span>其他信息</span>
-          </div>
-          <div style="text-align: center">
-            <vab-colorful-icon icon-class="vab" style="font-size: 140px" />
-            <h1 style="font-size: 30px">vue-admin-better</h1>
-          </div>
-          <div class="bottom-btn"></div>
-        </el-card>
-      </el-col>
-    </el-row> -->
+    <tracking-charts />
   </div>
 </template>
 
 <script>
-  // import VabChart from '@/plugins/echarts'
-  import { dependencies, devDependencies } from '../../../package.json'
-  import { getNoticeList } from '@/api/notice'
+  import TrackingCharts from './components/TrackingCharts'
 
   export default {
     name: 'Index',
     components: {
-      // VabChart,
+      TrackingCharts,
     },
     data() {
-      return {
-        timer: 0,
-        updateTime: process.env.VUE_APP_UPDATE_TIME,
-        nodeEnv: process.env.NODE_ENV,
-        dependencies: dependencies,
-        devDependencies: devDependencies,
-        config1: {
-          startVal: 0,
-          endVal: this.$baseLodash.random(20000, 60000),
-          decimals: 0,
-          prefix: '',
-          suffix: '',
-          separator: ',',
-          duration: 8000,
-        },
-        config2: {
-          startVal: 0,
-          endVal: this.$baseLodash.random(1000, 20000),
-          decimals: 0,
-          prefix: '',
-          suffix: '',
-          separator: ',',
-          duration: 8000,
-        },
-        config3: {
-          startVal: 0,
-          endVal: this.$baseLodash.random(1000, 20000),
-          decimals: 0,
-          prefix: '',
-          suffix: '',
-          separator: ',',
-          duration: 8000,
-        },
-
-        //访问量
-        fwl: {
-          color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
-          backgroundColor: 'rgba(252,252,252,0)',
-          grid: {
-            top: '4%',
-            left: '2%',
-            right: '4%',
-            bottom: '0%',
-            containLabel: true,
-          },
-          xAxis: [
-            {
-              type: 'category',
-              boundaryGap: false,
-              data: [],
-              axisTick: {
-                alignWithLabel: true,
-              },
-            },
-          ],
-          yAxis: [
-            {
-              type: 'value',
-            },
-          ],
-          series: [
-            {
-              name: '访问量',
-              type: 'line',
-              data: [],
-              smooth: true,
-              areaStyle: {},
-            },
-          ],
-        },
-        //授权数
-        sqs: {
-          color: ['#1890FF', '#36CBCB', '#4ECB73', '#FBD437', '#F2637B', '#975FE5'],
-          backgroundColor: 'rgba(252,252,252,0)',
-          grid: {
-            top: '4%',
-            left: '2%',
-            right: '4%',
-            bottom: '0%',
-            containLabel: true,
-          },
-          xAxis: [
-            {
-              type: 'category',
-              /*boundaryGap: false,*/
-              data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
-              axisTick: {
-                alignWithLabel: true,
-              },
-            },
-          ],
-          yAxis: [
-            {
-              type: 'value',
-            },
-          ],
-          series: [
-            {
-              name: '授权数',
-              type: 'bar',
-              barWidth: '60%',
-              data: [10, 52, 20, 33, 39, 33, 22],
-            },
-          ],
-        },
-        //词云
-        cy: {
-          grid: {
-            top: '4%',
-            left: '2%',
-            right: '4%',
-            bottom: '0%',
-          },
-          series: [
-            {
-              type: 'wordCloud',
-              gridSize: 15,
-              sizeRange: [12, 40],
-              rotationRange: [0, 0],
-              width: '100%',
-              height: '100%',
-              textStyle: {
-                normal: {
-                  color() {
-                    const arr = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#975FE5']
-                    let index = Math.floor(Math.random() * arr.length)
-                    return arr[index]
-                  },
-                },
-              },
-              data: [
-                {
-                  name: 'vue-admin-better',
-                  value: 15000,
-                },
-                {
-                  name: 'element',
-                  value: 10081,
-                },
-                {
-                  name: 'beautiful',
-                  value: 9386,
-                },
-
-                {
-                  name: 'vue',
-                  value: 6500,
-                },
-                {
-                  name: 'zxwk1998',
-                  value: 6000,
-                },
-                {
-                  name: 'good',
-                  value: 4500,
-                },
-                {
-                  name: 'success',
-                  value: 3800,
-                },
-                {
-                  name: 'never',
-                  value: 3000,
-                },
-                {
-                  name: 'boy',
-                  value: 2500,
-                },
-                {
-                  name: 'girl',
-                  value: 2300,
-                },
-                {
-                  name: 'github',
-                  value: 2000,
-                },
-                {
-                  name: 'hbuilder',
-                  value: 1900,
-                },
-                {
-                  name: 'dcloud',
-                  value: 1800,
-                },
-                {
-                  name: 'china',
-                  value: 1700,
-                },
-                {
-                  name: '1204505056',
-                  value: 1600,
-                },
-                {
-                  name: '972435319',
-                  value: 1500,
-                },
-                {
-                  name: 'young',
-                  value: 1200,
-                },
-                {
-                  name: 'old',
-                  value: 1100,
-                },
-                {
-                  name: 'vuex',
-                  value: 900,
-                },
-                {
-                  name: 'router',
-                  value: 800,
-                },
-                {
-                  name: 'money',
-                  value: 700,
-                },
-                {
-                  name: 'qingdao',
-                  value: 800,
-                },
-                {
-                  name: 'yantai',
-                  value: 9000,
-                },
-                {
-                  name: 'author is very cool',
-                  value: 9200,
-                },
-              ],
-            },
-          ],
-        },
-
-        //更新日志
-        reverse: true,
-        activities: [],
-        noticeList: [],
-        //其他信息
-        userAgent: navigator.userAgent,
-        //卡片图标
-        iconList: [
-          {
-            icon: 'video',
-            title: '视频播放器',
-            link: '/vab/player',
-            color: '#ffc069',
-          },
-          {
-            icon: 'table',
-            title: '表格',
-            link: '/vab/table/comprehensiveTable',
-            color: '#5cdbd3',
-          },
-          {
-            icon: 'laptop-code',
-            title: '源码',
-            link: 'https://github.com/zxwk1998/vue-admin-better',
-            color: '#b37feb',
-          },
-          {
-            icon: 'book',
-            title: '书籍',
-            link: '',
-            color: '#69c0ff',
-          },
-          {
-            icon: 'bullhorn',
-            title: '公告',
-            link: '',
-            color: '#ff85c0',
-          },
-          {
-            icon: 'gift',
-            title: '礼物',
-            link: '',
-            color: '#ffd666',
-          },
-
-          {
-            icon: 'balance-scale-left',
-            title: '公平的世界',
-            link: '',
-            color: '#ff9c6e',
-          },
-          {
-            icon: 'coffee',
-            title: '休息一下',
-            link: '',
-            color: '#95de64',
-          },
-        ],
-      }
-    },
-    created() {
-      this.fetchData()
-    },
-    beforeDestroy() {
-      clearInterval(this.timer)
-    },
-    mounted() {
-      let base = +new Date(2020, 1, 1)
-      let oneDay = 24 * 3600 * 1000
-      let date = []
-
-      let data = [Math.random() * 1500]
-      let now = new Date(base)
-
-      const addData = (shift) => {
-        now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
-        date.push(now)
-        data.push(this.$baseLodash.random(20000, 60000))
-
-        if (shift) {
-          date.shift()
-          data.shift()
-        }
-
-        now = new Date(+new Date(now) + oneDay)
-      }
-
-      for (let i = 1; i < 6; i++) {
-        addData()
-      }
-      addData(true)
-      this.fwl.xAxis[0].data = date
-      this.fwl.series[0].data = data
-      this.timer = setInterval(() => {
-        addData(true)
-        this.fwl.xAxis[0].data = date
-        this.fwl.series[0].data = data
-      }, 3000)
-    },
-    methods: {
-      handleClick(e) {
-        this.$baseMessage(`点击了${e.name},这里可以写跳转`)
-      },
-      handleZrClick() {},
-      handleChangeTheme() {
-        this.$baseEventBus.$emit('theme')
-      },
-      async fetchData() {
-        const res = await getNoticeList()
-        this.noticeList = res.data
-      },
+      return {}
     },
   }
 </script>
-<style lang="scss" scoped>
-  .index-container {
-    padding: 0 !important;
-    margin: 0 !important;
-    background: #f5f7f8 !important;
-
-    ::v-deep {
-      .el-alert {
-        padding: $base-padding;
-
-        &--info.is-light {
-          min-height: 82px;
-          padding: $base-padding;
-          margin-bottom: 15px;
-          color: #909399;
-          background-color: $base-color-white;
-          border: 1px solid #ebeef5;
-        }
-      }
-
-      .el-card__body {
-        .echarts {
-          width: 100%;
-          height: 115px;
-        }
-      }
-    }
-
-    .card {
-      ::v-deep {
-        .el-card__body {
-          .echarts {
-            width: 100%;
-            height: 305px;
-          }
-        }
-      }
-    }
-
-    .bottom {
-      padding-top: 20px;
-      margin-top: 5px;
-      color: #595959;
-      text-align: left;
-      border-top: 1px solid $base-border-color;
-    }
-
-    .table {
-      width: 100%;
-      color: #666;
-      border-collapse: collapse;
-      background-color: #fff;
-
-      td {
-        position: relative;
-        min-height: 20px;
-        padding: 9px 15px;
-        font-size: 14px;
-        line-height: 20px;
-        border: 1px solid #e6e6e6;
-
-        &:nth-child(odd) {
-          width: 20%;
-          text-align: right;
-          background-color: #f7f7f7;
-        }
-      }
-    }
-
-    .icon-panel {
-      height: 117px;
-      text-align: center;
-      cursor: pointer;
-
-      svg {
-        font-size: 40px;
-      }
-
-      p {
-        margin-top: 10px;
-      }
-    }
-
-    .bottom-btn {
-      button {
-        margin: 5px 10px 15px 0;
-      }
-    }
-  }
-</style>
diff --git a/src/views/index/utils/index.js b/src/views/index/utils/index.js
new file mode 100644
index 0000000..cf42d9e
--- /dev/null
+++ b/src/views/index/utils/index.js
@@ -0,0 +1,19 @@
+export const eventNameMap = {
+  card_tpl_choose: '选择祝福卡片模板',
+  card_title_choose: '选择祝福卡片标题',
+  avatar_choose_album: '选择头像相册',
+  index_function_select: '首页功能选择',
+  index_goto_make: '首页推荐跳转',
+  index_recommend_click: '首页推荐点击',
+}
+
+export const eventTypeMap = {
+  jump: '跳转',
+  click: '点击',
+  select: '选择',
+  load_more: '加载更多',
+}
+
+export const appMap = {
+  '69665538a49b8ae3be50fe5d': '新春祝福',
+}