1

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