bpass-ui/src/views/index.vue

<template>
  <div class="app-container">
    <!-- 统计数据卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="4">
        <el-card class="stat-card total-people">
          <div class="stat-item">
            <div class="stat-number">{{ statistics.totalPeople }}</div>
            <div class="stat-label">总人数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card total-entries">
          <div class="stat-item">
            <div class="stat-number">{{ statistics.totalEntries }}</div>
            <div class="stat-label">总次数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card avg-frequency">
          <div class="stat-item">
            <div class="stat-number">{{ statistics.avgFrequency }}</div>
            <div class="stat-label">平均频次</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card max-frequency">
          <div class="stat-item">
            <div class="stat-number">{{ statistics.maxFrequency }}</div>
            <div class="stat-label">最高频次</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card night-entries">
          <div class="stat-item">
            <div class="stat-number">{{ statistics.nightPeople }}</div>
            <div class="stat-label">夜间出入境人数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="stat-card holiday-entries">
          <div class="stat-item">
            <div class="stat-number">{{ statistics.holidayPeople }}</div>
            <div class="stat-label">节假日出入境人数</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>出入境频次分布</span>
            </div>
          </template>
          <div class="chart-container" ref="pieChartContainer" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>节假日出入境</span>
            </div>
          </template>
          <div class="holiday-container" style="height: 300px; overflow-y: auto; padding: 20px;">
            <div v-loading="holidayLoading" class="holiday-list">
              <div v-for="(item, index) in holidayList" :key="index" class="holiday-item">
                <div class="holiday-content">
                  <span class="holiday-name">{{ item.holidayName }}</span>
                  <span class="holiday-dates">({{ item.startDate }}至{{ item.endDate }})</span>
                  <span class="holiday-count">{{ item.inOutCount }}次</span>
                </div>
              </div>
              <div v-if="holidayList.length === 0 && holidayLoading" class="no-data">
                <span>加载中...</span>
              </div>
              <div v-if="holidayList.length === 0 && !holidayLoading" class="no-data">
                <span>暂无数据</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb20">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>夜间出入境趋势</span>
            </div>
          </template>
          <div class="chart-container" ref="nightChartContainer" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷入口 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="quick-access-card">
          <template #header>
            <div class="card-header">
              <span>快捷入口</span>
            </div>
          </template>
          <div class="quick-access-grid">
            <div class="quick-item" @click="goToPage('/anal/high')">
              <div class="quick-icon bg-blue">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="quick-text">高频出入境</div>
            </div>
            <div class="quick-item" @click="goToPage('/anal/night')">
              <div class="quick-icon bg-purple">
                <el-icon><Moon /></el-icon>
              </div>
              <div class="quick-text">夜间出入境</div>
            </div>
            <div class="quick-item" @click="goToPage('/anal/holiday')">
              <div class="quick-icon bg-green">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="quick-text">节假日出入境</div>
            </div>
            <div class="quick-item" @click="goToPage('/anal/rapid')">
              <div class="quick-icon bg-orange">
                <el-icon><Lightning /></el-icon>
              </div>
              <div class="quick-text">短期往返分析</div>
            </div>
            <div class="quick-item" @click="goToPage('/anal/low')">
              <div class="quick-icon bg-red">
                <el-icon><Document /></el-icon>
              </div>
              <div class="quick-text">低频出入境</div>
            </div>
            <div class="quick-item" @click="goToPage('/anal/overstay')">
              <div class="quick-icon bg-cyan">
                <el-icon><Timer /></el-icon>
              </div>
              <div class="quick-text">境外滞留分析</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref, reactive, toRefs, nextTick } from 'vue'
import { House, TrendCharts, Moon, Calendar, Lightning, Document, Timer } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getInOutStats, listHighFrequencyInOut, getNightInOutStats, getHolidayInOutStats } from "@/api/biz/anal";

const router = useRouter()

const holidayList = ref([]);
const holidayLoading = ref(false);

const pieChartContainer = ref(null);
const nightChartContainer = ref(null);

const statistics = ref({
  totalPeople: 0,
  totalEntries: 0,
  avgFrequency: 0,
  maxFrequency: 0,
  nightPeople: 0,
  holidayPeople: 0
});

// 直接使用当年查询，不再需要查询表单
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    year: new Date().getFullYear().toString()  // 直接使用当前年份
  }
});

const { queryParams } = toRefs(data);

/** 查询数据 */
function getList() {
  // 准备查询参数 - 直接使用当前年份
  const params = {
    year: queryParams.value.year
  };

  // 设置加载状态
  holidayLoading.value = true;

  // 并行调用所有需要的API
  Promise.all([
    getInOutStats(params),           // 基础统计
    getNightInOutStats(params),      // 夜间统计
    getHolidayInOutStats(params),    // 节假日统计
    listHighFrequencyInOut(params)   // 高频数据用于频次分布
  ]).then(responses => {
    console.log('API响应数据:', responses); // 调试信息

    // 处理基础统计信息
    const statsResponse = responses[0];
    if (statsResponse.code === 200 && statsResponse.data) {
      const stats = statsResponse.data;
      statistics.value.totalPeople = stats.totalPeople || 0;
      statistics.value.totalEntries = stats.totalCount || 0;
      statistics.value.avgFrequency = Number(stats.avgFrequency).toFixed(2) || 0;
      statistics.value.maxFrequency = stats.maxFrequency || 0;
    }

    // 处理夜间统计信息
    const nightResponse = responses[1];
    if (nightResponse.code === 200 && nightResponse.data) {
      const nightStats = nightResponse.data;
      statistics.value.nightPeople = nightStats.totalPeople || 0;
    }

    // 处理节假日统计信息
    const holidayResponse = responses[2];
    console.log('节假日统计响应:', holidayResponse); // 调试信息
    if (holidayResponse.code === 200) {
      // 节假日统计数据结构为数组，包含节假日名称、出入境次数等信息
      const holidayData = Array.isArray(holidayResponse.data) ? holidayResponse.data : [];
      console.log('节假日统计数据:', holidayData); // 调试信息

      // 计算总人数
      const totalHolidayCount = holidayData.reduce((sum, item) => sum + (item.inOutCount || 0), 0);
      statistics.value.holidayPeople = totalHolidayCount;

      // 处理节假日列表数据
      holidayList.value = holidayData.map(item => ({
        holidayName: item.holidayName,
        inOutCount: item.inOutCount,
        startDate: item.startDate,
        endDate: item.endDate
      }));
    } else {
      console.error('节假日数据获取失败:', holidayResponse);
      holidayList.value = [];
      statistics.value.holidayPeople = 0;
    }

    // 更新图表
    nextTick(() => {
      renderPieChart(params);        // 频次分布饼图
      renderNightChart(params);      // 夜间趋势图
    });
  }).catch(error => {
    console.error('获取统计数据失败:', error);
    holidayList.value = [];
    statistics.value.holidayPeople = 0;
  }).finally(() => {
    holidayLoading.value = false;
  });
}

/** 渲染出入境频次分布饼图 */
function renderPieChart(params) {
  if (!pieChartContainer.value) return;

  const myChart = echarts.init(pieChartContainer.value);

  // 调用后端接口获取频次分布数据
  getInOutStats(params).then(response => {
    let distributionData = [];

    if (response.code === 200 && response.data) {
      const stats = response.data;

      // 检查是否有频次分布数据
      if (stats.frequencyDistribution && typeof stats.frequencyDistribution === 'object') {
        const dist = stats.frequencyDistribution;
        distributionData = [];

        // 将对象格式转换为饼图需要的数组格式，并按区间排序
        const rangeOrder = ['1-5', '5-10', '10-20', '20-30', '30+'];

        // 先处理预定义的区间
        for (const range of rangeOrder) {
          if (dist.hasOwnProperty(range)) {
            // 根据区间范围选择颜色
            let color;
            if (range.startsWith('1-5')) color = '#5470c6';
            else if (range.startsWith('5-10')) color = '#91cc75';
            else if (range.startsWith('10-20')) color = '#fac858';
            else if (range.startsWith('20-30')) color = '#ee6666';
            else if (range.startsWith('30')) color = '#73c0de';
            else color = '#9da4b0';

            distributionData.push({
              value: dist[range],
              name: range,
              itemStyle: { color: color }
            });
          }
        }

        // 处理不在预定义区间中的其他区间
        for (const [range, count] of Object.entries(dist)) {
          if (!rangeOrder.includes(range)) {
            let color;
            if (range.startsWith('1-5')) color = '#5470c6';
            else if (range.startsWith('5-10')) color = '#91cc75';
            else if (range.startsWith('10-20')) color = '#fac858';
            else if (range.startsWith('20-30')) color = '#ee6666';
            else if (range.startsWith('30')) color = '#73c0de';
            else color = '#9da4b0';

            distributionData.push({
              value: count,
              name: range,
              itemStyle: { color: color }
            });
          }
        }
      }
    }

    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}人 ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      series: [{
        name: '人数',
        type: 'pie',
        radius: [20, 120], // 设置内外半径，形成南丁格尔图效果
        center: ['50%', '50%'],
        roseType: 'area', // 启用南丁格尔图模式
        itemStyle: {
          borderRadius: 8
        },
        label: {
          show: true,
          formatter: '{b}: {c}',
          fontSize: 10,
          position: 'outside'
        },
        data: distributionData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    myChart.setOption(option);
  }).catch(() => {
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'right'
      },
      series: [{
        name: '人数',
        type: 'pie',
        radius: [20, 120],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        label: {
          show: true,
          formatter: '{b}: {c}',
          fontSize: 10,
          position: 'outside'
        },
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    myChart.setOption(option);
  });
}

/** 渲染夜间出入境趋势图 */
function renderNightChart(params) {
  if (!nightChartContainer.value) return;

  const myChart = echarts.init(nightChartContainer.value);

  getNightInOutStats(params).then(response => {
    let xAxisData = [];
    let seriesData = [];

    if (response.code === 200 && response.data) {
      const stats = response.data;

      // 使用趋势数据
      if (stats.trendData && Array.isArray(stats.trendData)) {
        // 按年查询，显示每月趋势
        xAxisData = stats.trendData.map(item => {
          if (item.period) {
            const parts = item.period.split('-');
            if (parts.length === 2) {
              return parts[1] + '月';
            }
          }
          return '未知';
        });

        // 获取人数或次数数据
        seriesData = stats.trendData.map(item => item.inOutCount !== undefined ? item.inOutCount : 0);
      }
    }

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params) => {
          const param = params[0];
          if (param.name === '暂无数据') {
            return '暂无数据';
          }
          const date = xAxisData[param.dataIndex];
          const value = param.value;
          return `${date}<br/>夜间出入境人数：${value}`;
        }
      },
      grid: {
        show: false
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisLabel: {
          rotate: 45,
          fontSize: 12
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name: '人数',
        show: true
      },
      series: [{
        data: seriesData,
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
          color: '#73c0de',
          width: 2
        },
        itemStyle: {
          color: '#3ba272'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(115, 192, 222, 0.3)' },
            { offset: 1, color: 'rgba(115, 192, 222, 0.05)' }
          ])
        }
      }]
    };

    myChart.setOption(option);
  }).catch(() => {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        show: false
      },
      xAxis: {
        type: 'category',
        data: ['暂无数据'],
        axisLabel: {
          rotate: 45,
          fontSize: 12
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name: '人数',
        show: true
      },
      series: [{
        data: [0],
        type: 'line',
        smooth: true,
        symbol: 'emptyCircle',
        symbolSize: 6,
        lineStyle: {
          color: '#73c0de',
          width: 2
        },
        itemStyle: {
          color: '#3ba272'
        }
      }]
    };

    myChart.setOption(option);
  });
}

/** 跳转到指定页面 */
function goToPage(path) {
  router.push(path)
}

// 页面加载时获取数据 - 直接查询当年数据
onMounted(() => {
  getList();
});

// 组件卸载时销毁图表
onUnmounted(() => {
  if (pieChartContainer.value) {
    const pieChart = echarts.getInstanceByDom(pieChartContainer.value);
    if (pieChart) pieChart.dispose();
  }

  if (nightChartContainer.value) {
    const nightChart = echarts.getInstanceByDom(nightChartContainer.value);
    if (nightChart) nightChart.dispose();
  }
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7f9;
}

.stat-card {
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.stat-card.total-people {
  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  color: #1890ff;
}

.stat-card.total-entries {
  background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  color: #52c41a;
}

.stat-card.avg-frequency {
  background: linear-gradient(135deg, #fffbe6 0%, #fff5a0 100%);
  color: #faad14;
}

.stat-card.max-frequency {
  background: linear-gradient(135deg, #fff2f0 0%, #ffccc7 100%);
  color: #f5222d;
}

.stat-card.night-entries {
  background: linear-gradient(135deg, #f0f9ff 0%, #c0e8ff 100%);
  color: #409eff;
}

.stat-card.holiday-entries {
  background: linear-gradient(135deg, #fff0f5 0%, #ffd6e7 100%);
  color: #f759ab;
}

.stat-item {
  width: 100%;
  padding: 10px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
}

.chart-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

.chart-header {
  font-weight: 600;
  font-size: 16px;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.table-container {
  width: 100%;
  padding: 0 20px 20px 20px;
}

.holiday-container {
  width: 100%;
}

.holiday-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.holiday-item {
  padding: 12px 16px;
  border: 1px solid #c0e8ff;
  border-radius: 6px;
  background-color: #f0f9ff;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(192, 232, 255, 0.3);
}

.holiday-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #c0c4cc;
  transform: translateY(-2px);
}

.holiday-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.holiday-name {
  font-weight: 600;
  font-size: 14px;
  color: #1890ff;
  margin-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.holiday-dates {
  font-size: 12px;
  color: #52c41a;
  margin-right: 12px;
  white-space: nowrap;
}

.holiday-count {
  font-weight: 600;
  font-size: 14px;
  color: #f5222d;
  margin-left: auto;
  white-space: nowrap;
}

.no-data {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-style: italic;
}

.data-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-header {
  font-weight: 600;
  font-size: 16px;
}

.quick-access-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.quick-item {
  text-align: center;
  cursor: pointer;
  padding: 20px 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: #fafafa;
}

.quick-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.quick-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  border-radius: 10px;
  font-size: 24px;
  color: white;
}

.bg-blue {
  background: linear-gradient(135deg, #409eff 0%, #4a9eff 100%);
}

.bg-purple {
  background: linear-gradient(135deg, #7265e3 0%, #7a6de3 100%);
}

.bg-green {
  background: linear-gradient(135deg, #20c997 0%, #26d19c 100%);
}

.bg-orange {
  background: linear-gradient(135deg, #f56c6c 0%, #f67878 100%);
}

.bg-red {
  background: linear-gradient(135deg, #e6a23c 0%, #eca742 100%);
}

.bg-cyan {
  background: linear-gradient(135deg, #17b3a3 0%, #19c0b2 100%);
}

.quick-text {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.mb20 {
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .quick-access-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .quick-access-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .el-col-4 {
    width: 50%;
    margin-bottom: 15px;
  }

  .el-col-12 {
    width: 100%;
  }

  .el-row {
    margin-bottom: 15px;
  }
}
</style>