feat:平均对话时长模块

src/views/index/LeftCenter.vue

@@ -30,15 +30,11 @@ const getChartData = () => {
     timeFilter: selectedTimeFilter.value
   }).then(res => {
     if (res.success) {
-      // 假设API返回的数据格式是 {dates: [], values: []}
-      // chartData.value = res.data;
       initChart();
     } else {
-      // 如果API调用失败，使用模拟数据
       initChart();
     }
   }).catch(() => {
-    // 如果发生错误，使用模拟数据
     initChart();
   });
 };
@@ -55,10 +51,10 @@ const initChart = () => {
   
   const option = {
     grid: {
-      top: '10%',
+      top: '15%',
-      left: '8%',
+      left: '0',
       right: '5%',
-      bottom: '15%',
+      bottom: '0',
       containLabel: true
     },
     xAxis: {
@@ -178,15 +174,13 @@ const onUnmounted = () => {
 .average-duration {
   width: 100%;
   height: 100%;
-  display: flex;
+  position: relative;
-  flex-direction: column;
-  background-color: #fff;
-  border-radius: 10px;
-  padding: 15px;
-  box-sizing: border-box;
 }
 
 .chart-header {
+  position: absolute;
+  right: 0;
+  top: -35px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -214,7 +208,7 @@ const onUnmounted = () => {
     
     .filter-item {
       .filter-select {
-        width: 120px;
+        width: 100px;
         
         :deep(.el-input__wrapper) {
           background-color: #f5f7fa;
@@ -231,7 +225,7 @@ const onUnmounted = () => {
 }
 
 .chart-container {
-  flex: 1;
   width: 100%;
+  height: 100%;
 }
 </style> 

src/views/index/components/LeftCenter.vue

@@ -1,188 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import { studentDistribution } from "@/api";
-
-const chartRef = ref<HTMLElement | null>(null);
-let chart: echarts.ECharts | null = null;
-
-// 数据
-const chartData = ref({
-  years: [] as string[],
-  values: [] as number[],
-  totalCount: 0,
-  growthRate: 0
-});
-
-// 获取数据
-const getChartData = () => {
-  studentDistribution().then(res => {
-    if (res.success) {
-      chartData.value = res.data;
-      initChart();
-    }
-  });
-};
-
-const initChart = () => {
-  if (!chartRef.value) return;
-  
-  chart = echarts.init(chartRef.value);
-  
-  const option = {
-    grid: {
-      top: '15%',
-      left: '3%',
-      right: '4%',
-      bottom: '10%',
-      containLabel: true
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    xAxis: {
-      type: 'category',
-      data: chartData.value.years,
-      axisLine: {
-        lineStyle: {
-          color: '#E0E0E0'
-        }
-      },
-      axisLabel: {
-        color: '#999999'
-      }
-    },
-    yAxis: {
-      type: 'value',
-      splitLine: {
-        lineStyle: {
-          type: 'dashed',
-          color: '#E0E0E0'
-        }
-      },
-      axisLabel: {
-        color: '#999999'
-      }
-    },
-    series: [
-      {
-        name: '学生人数',
-        type: 'line',
-        data: chartData.value.values,
-        smooth: true,
-        showSymbol: true,
-        symbolSize: 8,
-        itemStyle: {
-          color: '#4B96FF'
-        },
-        areaStyle: {
-          color: {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: 'rgba(75, 150, 255, 0.3)'
-              },
-              {
-                offset: 1,
-                color: 'rgba(75, 150, 255, 0.1)'
-              }
-            ]
-          }
-        }
-      }
-    ]
-  };
-  
-  chart.setOption(option);
-};
-
-// 监听窗口大小变化，重绘图表
-const handleResize = () => {
-  if (chart) {
-    chart.resize();
-  }
-};
-
-onMounted(() => {
-  getChartData();
-  window.addEventListener('resize', handleResize);
-});
-
-// 组件卸载时移除事件监听
-const onUnmounted = () => {
-  window.removeEventListener('resize', handleResize);
-  if (chart) {
-    chart.dispose();
-    chart = null;
-  }
-};
-</script>
-
-<template>
-  <div class="student-distribution">
-    <div class="chart-container" ref="chartRef"></div>
-    <div class="chart-info">
-      <div class="info-item">
-        <div class="info-label">总考生数量</div>
-        <div class="info-value">{{ chartData.totalCount.toLocaleString() }}</div>
-      </div>
-      <div class="info-item">
-        <div class="info-label">同比增长</div>
-        <div class="info-value increase">+{{ chartData.growthRate }}%</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.student-distribution {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.chart-container {
-  flex: 1;
-  width: 100%;
-}
-
-.chart-info {
-  display: flex;
-  justify-content: space-around;
-  margin-top: 10px;
-  padding: 10px 0;
-  
-  .info-item {
-    text-align: center;
-    
-    .info-label {
-      font-size: 14px;
-      color: #666;
-      margin-bottom: 5px;
-    }
-    
-    .info-value {
-      font-size: 20px;
-      font-weight: bold;
-      color: #333;
-      
-      &.increase {
-        color: #52c41a;
-      }
-      
-      &.decrease {
-        color: #f5222d;
-      }
-    }
-  }
-}
-</style> 

src/views/index/index.vue

@@ -88,7 +88,7 @@ const RightBottom = defineAsyncComponent(() => import("./components/RightBottom.
   display: flex;
   flex-direction: column;
   width: 25%;
-  gap: 20px;
+  gap: 10px;
 }
 
 .center-content {