From b1100b962583ed41dc3bed69087ca52cc032d641 Mon Sep 17 00:00:00 2001 From: huangyaohui Date: Fri, 20 Mar 2026 17:14:19 +0800 Subject: [PATCH] 1 --- src/views/pages/StatusMonitor.vue | 136 ++++++++++++++++++++++++------ 1 file changed, 111 insertions(+), 25 deletions(-) diff --git a/src/views/pages/StatusMonitor.vue b/src/views/pages/StatusMonitor.vue index 1bdc734..f5d0d69 100644 --- a/src/views/pages/StatusMonitor.vue +++ b/src/views/pages/StatusMonitor.vue @@ -358,29 +358,24 @@ function formatNumber(val) { } // 示范区域历史交通流趋势（双轴折线图：车流量 + 平均车速） -const demoAreaHistorySummary = { - avgSpeed: 50, - congestionIndex: 0.54, - peakFlow: 2120, -} - -const demoAreaLast1Day = timePoints - -const demoAreaHistoryAxis = computed(() => { - return demoAreaHistoryRange.value === '1d' ? demoAreaLast1Day : demoAreaLast7Days.value +const demoAreaHistorySummary = ref({ + avgSpeed: '', + congestionIndex: '', + peakFlow: '', +}) +const demoAreaHistoryAxis7d = ref([]) +const demoAreaHistoryAxis1d = ref([]) +const demoAreaHistoryAxis = computed(() => { + return demoAreaHistoryRange.value === '1d' ? demoAreaHistoryAxis1d.value : demoAreaHistoryAxis7d.value +}) +const demoAreaHistorySeries7d = ref({ + flow: [], + speed: [], +}) +const demoAreaHistorySeries1d = ref({ + flow: [], + speed: [], }) - -// 按截图走势大致还原：左轴车流量(pcu/h) 0-5000，右轴平均车速(km/h) 0-100 -const demoAreaHistorySeries7d = { - flow: [2000, 3400, 4000, 2800, 3400, 2400, 4300], - speed: [40, 60, 45, 55, 50, 55, 35], -} - -const demoAreaHistorySeries1d = { - flow: [1600, 2100, 4200, 3800, 3200, 2600, 1900], - speed: [62, 58, 42, 46, 50, 55, 60], -} - const demoAreaHistoryTrendOption = computed(() => { const axisTextColor = '#64748b' const gridLineColor = '#e5e7eb' @@ -495,7 +490,7 @@ const demoAreaHistoryTrendOption = computed(() => { name: '车流量', type: 'line', smooth: true, - data: demoAreaHistoryRange.value === '1d' ? demoAreaHistorySeries1d.flow : demoAreaHistorySeries7d.flow, + data: demoAreaHistoryRange.value === '1d' ? demoAreaHistorySeries1d.value.flow : demoAreaHistorySeries7d.value.flow, yAxisIndex: 0, symbol: 'circle', symbolSize: 4, @@ -506,7 +501,7 @@ const demoAreaHistoryTrendOption = computed(() => { name: '平均车速', type: 'line', smooth: true, - data: demoAreaHistoryRange.value === '1d' ? demoAreaHistorySeries1d.speed : demoAreaHistorySeries7d.speed, + data: demoAreaHistoryRange.value === '1d' ? demoAreaHistorySeries1d.value.speed : demoAreaHistorySeries7d.value.speed, yAxisIndex: 1, symbol: 'circle', symbolSize: 4, @@ -1031,7 +1026,98 @@ const getPageData = async () => { } }) // 示范区域历史交通流趋势 - + const historicalTopDisplay = data['demo_area_historical_trend']?.top_display?.items || [] + const historicalTopDisplayDay = data['demo_area_historical_trend']?.top_display_day?.items || [] + const trafficVolume = data['demo_area_historical_trend']?.traffic_volume?.items || [] + const trafficVolumeDay = data['demo_area_historical_trend']?.traffic_volume_day?.items || [] + const averageSpeed = data['demo_area_historical_trend']?.average_speed?.items || [] + const averageSpeedDay = data['demo_area_historical_trend']?.average_speed_day?.items || [] + historicalTopDisplay.forEach(item => { + if (item.project === '平均车速') { + demoAreaHistorySummary.value.avgSpeed = item.data + } else if (item.project === '拥堵指数') { + demoAreaHistorySummary.value.congestionIndex = item.data + } else if (item.project === '峰值流量') { + demoAreaHistorySummary.value.peakFlow = item.data + } + }) + historicalTopDisplayDay.forEach(item => { + if (item.project === '平均车速') { + demoAreaHistorySummary.value.avgSpeed = item.data + } else if (item.project === '拥堵指数') { + demoAreaHistorySummary.value.congestionIndex = item.data + } else if (item.project === '峰值流量') { + demoAreaHistorySummary.value.peakFlow = item.data + } + }) + const axis7dOrder = [] + trafficVolume.forEach(item => { + const dateStr = moment(item.project).format('MM/DD') + if (!axis7dOrder.includes(dateStr)) { + axis7dOrder.push(dateStr) + } + }) + averageSpeed.forEach(item => { + const dateStr = moment(item.project).format('MM/DD') + if (!axis7dOrder.includes(dateStr)) { + axis7dOrder.push(dateStr) + } + }) + demoAreaHistoryAxis7d.value = axis7dOrder + const axis7dIndexMap = {} + axis7dOrder.forEach((date, idx) => { + axis7dIndexMap[date] = idx + }) + demoAreaHistorySeries7d.value.flow = axis7dOrder.map(() => 0) + demoAreaHistorySeries7d.value.speed = axis7dOrder.map(() => 0) + trafficVolume.forEach(item => { + const dateStr = moment(item.project).format('MM/DD') + const index = axis7dIndexMap[dateStr] + if (index !== undefined) { + demoAreaHistorySeries7d.value.flow[index] = item.data ?? 0 + } + }) + averageSpeed.forEach(item => { + const dateStr = moment(item.project).format('MM/DD') + const index = axis7dIndexMap[dateStr] + if (index !== undefined) { + demoAreaHistorySeries7d.value.speed[index] = item.data ?? 0 + } + }) + const axis1dOrder = [] + trafficVolumeDay.forEach(item => { + const timeStr = item.project + if (!axis1dOrder.includes(timeStr)) { + axis1dOrder.push(timeStr) + } + }) + averageSpeedDay.forEach(item => { + const timeStr = item.project + if (!axis1dOrder.includes(timeStr)) { + axis1dOrder.push(timeStr) + } + }) + demoAreaHistoryAxis1d.value = axis1dOrder + const axis1dIndexMap = {} + axis1dOrder.forEach((time, idx) => { + axis1dIndexMap[time] = idx + }) + demoAreaHistorySeries1d.value.flow = axis1dOrder.map(() => 0) + demoAreaHistorySeries1d.value.speed = axis1dOrder.map(() => 0) + trafficVolumeDay.forEach(item => { + const timeStr = item.project + const index = axis1dIndexMap[timeStr] + if (index !== undefined) { + demoAreaHistorySeries1d.value.flow[index] = item.data ?? 0 + } + }) + averageSpeedDay.forEach(item => { + const timeStr = item.project + const index = axis1dIndexMap[timeStr] + if (index !== undefined) { + demoAreaHistorySeries1d.value.speed[index] = item.data ?? 0 + } + }) // 111 // 111 // 111