From 54e2a4eafc5765b9fb5feffb1b80474071d6b626 Mon Sep 17 00:00:00 2001
From: huxin <huxin@123.com>
Date: Fri, 30 May 2025 21:41:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=AD=A6=E4=BF=A1=E6=81=AF=E8=8E=B7?=
 =?UTF-8?q?=E5=8F=96=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/Largepassenger/index.vue | 829 ++++++++++++++++++
 1 file changed, 829 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/Largepassenger/index.vue

diff --git a/Dkl-vue3-ui-DP/src/views/system/Largepassenger/index.vue b/Dkl-vue3-ui-DP/src/views/system/Largepassenger/index.vue
new file mode 100644
index 0000000..8009fa6
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/Largepassenger/index.vue
@@ -0,0 +1,829 @@
+<template>
+  <div class="app-container">
+      <div class="dashboard-container">
+    <!-- 数据概览卡片 -->
+    <div class="overview-cards">
+      <el-card shadow="hover" v-for="card in overviewData" :key="card.title">
+        <div class="card-content">
+          <div class="card-icon" :style="{ backgroundColor: card.color }">
+            <i :class="card.icon"></i>
+          </div>
+          <div class="card-info">
+            <div class="card-title">{{ card.title }}</div>
+            <div class="card-value">{{ card.value }}</div>
+            <div class="card-trend" :class="card.trend >= 0 ? 'up' : 'down'">
+              <i :class="card.trend >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
+              {{ Math.abs(card.trend) }}%
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 客流趋势图表 -->
+    <el-card shadow="hover" class="chart-card">
+      <template #header>
+        <div class="card-header">
+          <span>客流趋势分析</span>
+          <el-select v-model="trendTimeRange" size="small" style="width: 120px">
+            <el-option label="近7天" value="7"></el-option>
+            <el-option label="近30天" value="30"></el-option>
+            <el-option label="近90天" value="90"></el-option>
+          </el-select>
+        </div>
+      </template>
+      <div ref="trendChart" style="height: 300px;"></div>
+    </el-card>
+
+    <!-- 区域分布和排名 -->
+    <div class="row">
+      <el-card shadow="hover" class="chart-card half">
+        <template #header>
+          <div class="card-header">
+            <span>区域客流分布</span>
+          </div>
+        </template>
+        <div ref="distributionChart" style="height: 350px;"></div>
+      </el-card>
+
+      <el-card shadow="hover" class="chart-card half">
+        <template #header>
+          <div class="card-header">
+            <span>热门区域排名</span>
+          </div>
+        </template>
+        <div class="ranking-list">
+          <div class="ranking-item" v-for="(item, index) in rankingData" :key="item.region">
+            <div class="rank" :class="getRankClass(index + 1)">
+              {{ index + 1 }}
+            </div>
+            <div class="region">{{ item.region }}</div>
+            <div class="count">{{ item.count }}人</div>
+            <el-progress 
+              :percentage="item.percentage" 
+              :show-text="false" 
+              :stroke-width="8"
+              :color="getProgressColor(index + 1)"
+            />
+          </div>
+        </div>
+      </el-card>
+    </div>
+
+
+    <!-- 详情对话框 -->
+    <el-dialog v-model="detailVisible" :title="currentDetail.pointName" width="60%">
+      <div class="detail-content">
+        <div class="detail-row">
+          <div class="detail-label">区域:</div>
+          <div class="detail-value">{{ currentDetail.region }}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">日期:</div>
+          <div class="detail-value">{{ currentDetail.date }}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">客流总量:</div>
+          <div class="detail-value">{{ currentDetail.totalCount }}人</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">高峰时段:</div>
+          <div class="detail-value">{{ currentDetail.peakHour }}</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">最大密度:</div>
+          <div class="detail-value">{{ currentDetail.maxDensity }}人/㎡</div>
+        </div>
+        <div class="detail-row">
+          <div class="detail-label">预警状态:</div>
+          <div class="detail-value">
+            <el-tag :type="currentDetail.warning === '无' ? 'success' : 'danger'">
+              {{ currentDetail.warning }}
+            </el-tag>
+          </div>
+        </div>
+        <div class="detail-chart">
+          <div ref="hourlyChart" style="height: 300px;"></div>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+  </div>
+  </div>
+
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import * as echarts from 'echarts';
+import { useResizeObserver } from '@vueuse/core';
+
+// 数据概览卡片
+const overviewData = ref([
+  {
+    title: '今日客流总量',
+    value: '24,568',
+    trend: 12.5,
+    icon: 'el-icon-user-solid',
+    color: '#409EFF'
+  },
+  {
+    title: '当前在园人数',
+    value: '8,742',
+    trend: 5.3,
+    icon: 'el-icon-location-information',
+    color: '#67C23A'
+  },
+  {
+    title: '预警监测点',
+    value: '6',
+    trend: -3.2,
+    icon: 'el-icon-warning',
+    color: '#E6A23C'
+  },
+  {
+    title: '最大密度区域',
+    value: '3.2人/㎡',
+    trend: 8.7,
+    icon: 'el-icon-data-line',
+    color: '#F56C6C'
+  }
+]);
+
+// 客流趋势图表
+const trendTimeRange = ref('7');
+const trendChart = ref(null);
+let trendChartInstance = null;
+
+// 区域分布图表
+const distributionChart = ref(null);
+let distributionChartInstance = null;
+
+// 热门区域排名
+const rankingData = ref([
+  { region: '中心广场', count: 12560, percentage: 100 },
+  { region: '东门入口', count: 9820, percentage: 78 },
+  { region: '水上乐园', count: 8760, percentage: 70 },
+  { region: '儿童游乐区', count: 7540, percentage: 60 },
+  { region: '美食街', count: 6530, percentage: 52 },
+  { region: '北门入口', count: 5420, percentage: 43 },
+  { region: '停车场', count: 4320, percentage: 34 },
+  { region: '西门入口', count: 3210, percentage: 26 }
+]);
+
+// 表格数据
+const dateRange = ref([new Date(2023, 5, 1), new Date(2023, 5, 7)]);
+const tableData = ref([]);
+const tableLoading = ref(false);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const totalItems = ref(50);
+
+// 详情对话框
+const detailVisible = ref(false);
+const currentDetail = ref({});
+const hourlyChart = ref(null);
+let hourlyChartInstance = null;
+
+// 初始化表格数据
+const initTableData = () => {
+  const mockData = [];
+  const regions = ['中心广场', '东门入口', '水上乐园', '儿童游乐区', '美食街', '北门入口', '西门入口'];
+  const points = [
+    '广场主入口', '广场中心区', '广场东侧', '广场西侧', 
+    '东门安检口', '东门售票处', '水上乐园入口', '儿童区滑梯',
+    '美食街中段', '北门停车场', '西门安检口'
+  ];
+  
+  for (let i = 0; i < 50; i++) {
+    const region = regions[Math.floor(Math.random() * regions.length)];
+    const date = new Date(2023, 5, Math.floor(i / 7) + 1);
+    
+    mockData.push({
+      id: i + 1,
+      date: `${date.getMonth() + 1}月${date.getDate()}日`,
+      region,
+      pointName: points[Math.floor(Math.random() * points.length)],
+      peakHour: `${Math.floor(Math.random() * 5) + 10}:00-${Math.floor(Math.random() * 5) + 15}:00`,
+      totalCount: Math.floor(Math.random() * 5000) + 2000,
+      maxDensity: (Math.random() * 2 + 1).toFixed(1),
+      warning: Math.random() > 0.8 ? '拥挤预警' : '无'
+    });
+  }
+  
+  tableData.value = mockData;
+};
+
+// 获取密度类型
+const getDensityType = (density) => {
+  const d = parseFloat(density);
+  if (d < 1.5) return 'success';
+  if (d < 2.5) return 'warning';
+  return 'danger';
+};
+
+// 获取排名样式
+const getRankClass = (rank) => {
+  if (rank === 1) return 'gold';
+  if (rank === 2) return 'silver';
+  if (rank === 3) return 'bronze';
+  return '';
+};
+
+// 获取进度条颜色
+const getProgressColor = (rank) => {
+  if (rank === 1) return '#ffd700';
+  if (rank === 2) return '#c0c0c0';
+  if (rank === 3) return '#cd7f32';
+  return '#409EFF';
+};
+
+// 显示详情
+const showDetail = (row) => {
+  currentDetail.value = row;
+  detailVisible.value = true;
+  
+  nextTick(() => {
+    initHourlyChart();
+  });
+};
+
+// 初始化趋势图表
+const initTrendChart = () => {
+  if (!trendChart.value) return;
+  
+  trendChartInstance = echarts.init(trendChart.value);
+  
+  const days = parseInt(trendTimeRange.value);
+  const dates = [];
+  const data1 = []; // 客流总量
+  const data2 = []; // 最大密度
+  
+  for (let i = 0; i < days; i++) {
+    dates.push(`${days - i}天前`);
+    data1.push(Math.floor(Math.random() * 20000) + 10000);
+    data2.push((Math.random() * 3 + 1).toFixed(1));
+  }
+  
+  dates.reverse();
+  data1.reverse();
+  data2.reverse();
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      data: ['客流总量', '最大密度'],
+      textStyle: {
+        color: '#606266'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: dates,
+      axisLine: {
+        lineStyle: {
+          color: '#DCDFE6'
+        }
+      },
+      axisLabel: {
+        color: '#606266'
+      }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '客流总量',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#DCDFE6'
+          }
+        },
+        axisLabel: {
+          formatter: '{value}',
+          color: '#606266'
+        },
+        splitLine: {
+          lineStyle: {
+            color: ['#EBEEF5']
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '最大密度',
+        min: 0,
+        max: 5,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#DCDFE6'
+          }
+        },
+        axisLabel: {
+          formatter: '{value}人/㎡',
+          color: '#606266'
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      {
+        name: '客流总量',
+        type: 'line',
+        smooth: true,
+        lineStyle: {
+          width: 3,
+          color: '#409EFF'
+        },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(64, 158, 255, 0.5)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(64, 158, 255, 0.1)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: data1
+      },
+      {
+        name: '最大密度',
+        type: 'line',
+        yAxisIndex: 1,
+        smooth: true,
+        lineStyle: {
+          width: 3,
+          color: '#E6A23C'
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: data2
+      }
+    ]
+  };
+  
+  trendChartInstance.setOption(option);
+};
+
+// 初始化区域分布图表
+const initDistributionChart = () => {
+  if (!distributionChart.value) return;
+  
+  distributionChartInstance = echarts.init(distributionChart.value);
+  
+  const regions = ['新城区', '碑林区', '莲湖区', '灞桥区', '未央区', '雁塔区', '长安区'];
+  const types = ['重点场所', '安保力量', '交通枢纽', '景区'];
+  
+  const seriesData = types.map((type, index) => {
+    return {
+      name: type,
+      type: 'bar',
+      stack: 'total',
+      emphasis: {
+        focus: 'series'
+      },
+      data: regions.map(() => Math.floor(Math.random() * 10) + 2),
+      itemStyle: {
+        color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'][index]
+      }
+    };
+  });
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: types,
+      textStyle: {
+        color: '#606266'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: regions,
+      axisLine: {
+        lineStyle: {
+          color: '#DCDFE6'
+        }
+      },
+      axisLabel: {
+        color: '#606266',
+        interval: 0,
+        rotate: 30
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '数量',
+      axisLine: {
+        lineStyle: {
+          color: '#DCDFE6'
+        }
+      },
+      axisLabel: {
+        color: '#606266'
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#EBEEF5']
+        }
+      }
+    },
+    series: seriesData
+  };
+  
+  distributionChartInstance.setOption(option);
+  
+  // 添加点击事件
+  distributionChartInstance.on('click', (params) => {
+    console.log('点击了:', params);
+    // 这里可以添加点击后的逻辑，比如筛选表格数据
+  });
+};
+
+// 初始化小时客流图表
+const initHourlyChart = () => {
+  if (!hourlyChart.value) return;
+  
+  hourlyChartInstance = echarts.init(hourlyChart.value);
+  
+  const hours = [];
+  const counts = [];
+  
+  for (let i = 8; i <= 20; i++) {
+    hours.push(`${i}:00`);
+    counts.push(Math.floor(Math.random() * 500) + (i === 12 || i === 18 ? 800 : 200));
+  }
+  
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: hours,
+      axisLine: {
+        lineStyle: {
+          color: '#DCDFE6'
+        }
+      },
+      axisLabel: {
+        color: '#606266'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '客流量',
+      axisLine: {
+        lineStyle: {
+          color: '#DCDFE6'
+        }
+      },
+      axisLabel: {
+        color: '#606266'
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#EBEEF5']
+        }
+      }
+    },
+    series: [
+      {
+        name: '客流量',
+        type: 'bar',
+        data: counts,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#83bff6' },
+            { offset: 0.5, color: '#188df0' },
+            { offset: 1, color: '#188df0' }
+          ])
+        },
+        emphasis: {
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#2378f7' },
+              { offset: 0.7, color: '#2378f7' },
+              { offset: 1, color: '#83bff6' }
+            ])
+          }
+        }
+      }
+    ]
+  };
+  
+  hourlyChartInstance.setOption(option);
+};
+
+// 获取表格数据
+const fetchTableData = () => {
+  tableLoading.value = true;
+  setTimeout(() => {
+    tableLoading.value = false;
+  }, 500);
+};
+
+// 分页变化
+const handlePageChange = (val) => {
+  currentPage.value = val;
+  fetchTableData();
+};
+
+// 初始化所有图表
+const initAllCharts = () => {
+  initTrendChart();
+  initDistributionChart();
+};
+
+// 监听时间范围变化
+watch(trendTimeRange, () => {
+  initTrendChart();
+});
+
+// 监听窗口大小变化
+useResizeObserver(trendChart, () => {
+  trendChartInstance && trendChartInstance.resize();
+});
+
+useResizeObserver(distributionChart, () => {
+  distributionChartInstance && distributionChartInstance.resize();
+});
+
+useResizeObserver(hourlyChart, () => {
+  hourlyChartInstance && hourlyChartInstance.resize();
+});
+
+// 组件挂载时初始化
+onMounted(() => {
+  initTableData();
+  initAllCharts();
+});
+
+// 组件卸载时销毁图表
+onBeforeUnmount(() => {
+  trendChartInstance && trendChartInstance.dispose();
+  distributionChartInstance && distributionChartInstance.dispose();
+  hourlyChartInstance && hourlyChartInstance.dispose();
+});
+</script>
+
+<style scoped lang="scss">
+.dashboard-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+}
+
+.overview-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 20px;
+  
+  .el-card {
+    border-radius: 8px;
+    border: none;
+    
+    :deep(.el-card__body) {
+      padding: 20px;
+    }
+  }
+  
+  .card-content {
+    display: flex;
+    align-items: center;
+    
+    .card-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 15px;
+      
+      i {
+        font-size: 24px;
+        color: white;
+      }
+    }
+    
+    .card-info {
+      flex: 1;
+      
+      .card-title {
+        font-size: 14px;
+        color: #909399;
+        margin-bottom: 5px;
+      }
+      
+      .card-value {
+        font-size: 22px;
+        font-weight: bold;
+        color: #303133;
+        margin-bottom: 5px;
+      }
+      
+      .card-trend {
+        font-size: 12px;
+        
+        &.up {
+          color: #67C23A;
+        }
+        
+        &.down {
+          color: #F56C6C;
+        }
+      }
+    }
+  }
+}
+
+.chart-card {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  border: none;
+  
+  :deep(.el-card__header) {
+    border-bottom: none;
+    padding: 16px 20px;
+  }
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    span {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+    }
+  }
+}
+
+.row {
+  display: flex;
+  gap: 20px;
+  
+  .half {
+    flex: 1;
+  }
+}
+
+.ranking-list {
+  .ranking-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #EBEEF5;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .rank {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 12px;
+      font-size: 12px;
+      color: white;
+      font-weight: bold;
+      
+      &.gold {
+        background-color: #ffd700;
+      }
+      
+      &.silver {
+        background-color: #c0c0c0;
+      }
+      
+      &.bronze {
+        background-color: #cd7f32;
+      }
+      
+      &:not(.gold):not(.silver):not(.bronze) {
+        background-color: #409EFF;
+      }
+    }
+    
+    .region {
+      flex: 1;
+      font-size: 14px;
+      color: #303133;
+    }
+    
+    .count {
+      width: 80px;
+      text-align: right;
+      font-size: 14px;
+      color: #606266;
+      margin-right: 12px;
+    }
+    
+    :deep(.el-progress) {
+      width: 120px;
+    }
+  }
+}
+
+.table-card {
+  border-radius: 8px;
+  border: none;
+  
+  :deep(.el-card__header) {
+    border-bottom: none;
+    padding: 16px 20px;
+  }
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    span {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+    }
+  }
+  
+  .pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.detail-content {
+  .detail-row {
+    display: flex;
+    margin-bottom: 16px;
+    
+    .detail-label {
+      width: 100px;
+      font-weight: bold;
+      color: #606266;
+    }
+    
+    .detail-value {
+      flex: 1;
+      color: #303133;
+    }
+  }
+  
+  .detail-chart {
+    margin-top: 30px;
+  }
+}
+</style>
\ No newline at end of file