营销数据的裂变分析页面

src/views/marketing/ipMrakup/fission/index.vue

@@ -49,18 +49,29 @@
             <!-- Metrics Cards -->
             <div class="metrics-cards">
                 <el-row :gutter="20" class="metrics-row">
-                    <el-col v-for="(item, index) in metricsCardsData" :key="index" class="metric-col">
+                    <el-col
+                        v-for="(item, index) in metricsCardsData"
+                        :key="index"
+                        class="metric-col"
+                    >
                         <el-card shadow="never" class="metric-card">
                             <div class="metric-title">{{ item.title }}</div>
-                            <div class="metric-date">{{ displayDateRange }}</div>
+                            <div class="metric-date">{{
+                                displayDateRange
+                            }}</div>
                             <div class="metric-value-container">
                                 <div class="metric-label">合计</div>
                                 <div class="metric-value">{{ item.value }}</div>
                             </div>
                             <div class="metric-comparison">
                                 环比 {{ item.change }}%
-                                <template v-if="parseFloat(item.change) > 0"><span class="arrow-up">↑</span></template>
-                                <template v-else-if="parseFloat(item.change) < 0"><span class="arrow-down">↓</span></template>
+                                <template v-if="parseFloat(item.change) > 0"
+                                    ><span class="arrow-up">↑</span></template
+                                >
+                                <template
+                                    v-else-if="parseFloat(item.change) < 0"
+                                    ><span class="arrow-down">↓</span></template
+                                >
                             </div>
                         </el-card>
                     </el-col>
@@ -70,7 +81,11 @@
             <!-- Numbers Cards -->
             <div class="number-metrics">
                 <el-row :gutter="20">
-                    <el-col :span="4" v-for="(item, index) in numberMetricsData" :key="index">
+                    <el-col
+                        :span="4"
+                        v-for="(item, index) in numberMetricsData"
+                        :key="index"
+                    >
                         <el-card shadow="hover" class="number-card">
                             <div class="number-value">{{ item.value }}</div>
                             <div class="number-label">{{ item.label }}</div>
@@ -95,22 +110,22 @@
     import request from '@/utils/request';
     import { ElMessage } from 'element-plus';
 
-    // State
+    // 状态变量
     const activePeriod = ref('7d');
     const chartRef = ref(null);
     let chart = null;
-    // Track if custom date range is used
+    // 跟踪是否使用自定义日期范围
     const isCustomDateRange = ref(false);
-    // Initialize dateRange with 7 days range
+    // 使用7天范围初始化日期范围
     const dateRange = ref([
         dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
         dayjs().format('YYYY-MM-DD')
     ]);
 
-    // API data
+    // API数据
     const statisticData = ref(null);
 
-    // Metrics computed from API response
+    // 从API响应计算的指标
     const metrics = computed(() => {
         if (!statisticData.value) {
             return {
@@ -129,10 +144,10 @@
 
         const data = statisticData.value.data;
 
-        // Helper function to format comparison values consistently
+        // 辅助函数，用于一致地格式化比较值
         const formatComparison = (value) => {
             if (value === null || value === undefined) return '0';
-            // Remove % if present and return just the number as string
+            // 如果存在%则移除，仅返回数字字符串
             return String(value).replace('%', '');
         };
 
@@ -217,7 +232,7 @@
         ];
     });
 
-    // Chart data
+    // 图表数据
     const chartData = computed(() => {
         if (!statisticData.value || !statisticData.value.data.chartList) {
             return {
@@ -245,7 +260,7 @@
         }
     });
 
-    // Method to update date range based on period
+    // 根据时间段更新日期范围的方法
     const updateDateRangeByPeriod = (period) => {
         isCustomDateRange.value = false;
 
@@ -282,14 +297,14 @@
         }
     };
 
-    // Method to handle period change button clicks
+    // 处理时间段变更按钮点击的方法
     const changePeriod = (period) => {
         activePeriod.value = period;
         updateDateRangeByPeriod(period);
         fetchData();
     };
 
-    // Handle date picker change
+    // 处理日期选择器变更
     const handleDateRangeChange = () => {
         isCustomDateRange.value = true;
         activePeriod.value = '';
@@ -303,8 +318,10 @@
             startDate = dayjs(dateRange.value[0]).format('YYYY-MM-DD 00:00:00');
             endDate = dayjs(dateRange.value[1]).format('YYYY-MM-DD 23:59:59');
         } else {
-            // Fallback if dateRange is not an array
-            startDate = dayjs().subtract(7, 'day').format('YYYY-MM-DD 00:00:00');
+            // 如果dateRange不是数组，使用默认值
+            startDate = dayjs()
+                .subtract(7, 'day')
+                .format('YYYY-MM-DD 00:00:00');
             endDate = dayjs().format('YYYY-MM-DD 23:59:59');
         }
 
@@ -391,7 +408,7 @@
         if (chartRef.value) {
             chart = echarts.init(chartRef.value);
 
-            // Initialize with empty data, will be updated after API call
+            // 使用空数据初始化，API调用后更新
             const option = {
                 tooltip: {
                     trigger: 'axis',
@@ -435,12 +452,12 @@
 
             chart.setOption(option);
 
-            // Handle resize
+            // 处理窗口大小调整
             window.addEventListener('resize', () => {
                 chart.resize();
             });
 
-            // Use ResizeObserver to detect and respond to size changes of the chart container
+            // 使用ResizeObserver检测并响应图表容器大小变化
             const resizeObserver = new ResizeObserver(() => {
                 chart.resize();
             });
@@ -449,14 +466,14 @@
         }
     };
 
-    // Method to manually resize chart - can be called from parent components
+    // 手动调整图表大小的方法 - 可从父组件调用
     const resizeChart = () => {
         if (chart) {
             chart.resize();
         }
     };
 
-    // Watch for changes in dateRange to update activePeriod
+    // 监听dateRange变化以更新activePeriod
     watch(dateRange, (newValue) => {
         if (isCustomDateRange.value) {
             activePeriod.value = '';
@@ -469,13 +486,13 @@
         updateDateRangeByPeriod('7d');
         fetchData();
         
-        // Force a resize after component is mounted
+        // 在组件挂载后强制调整大小
         setTimeout(() => {
             resizeChart();
         }, 300);
     });
 
-    // Expose the resizeChart method to parent components
+    // 向父组件暴露resizeChart方法
     defineExpose({
         resizeChart
     });
@@ -492,11 +509,11 @@
     }
 
     .arrow-up {
-        color: #67C23A; /* Element Plus success color (green) */
+        color: #67c23a; /* Element Plus 成功颜色（绿色） */
     }
 
     .arrow-down {
-        color: #F56C6C; /* Element Plus danger color (red) */
+        color: #f56c6c; /* Element Plus 危险颜色（红色） */
     }
 
     .date-period-selector {