11

src/views/pages/StatusMonitor.vue

@@ -100,19 +100,13 @@ const accidentImpactDataBySection = {
 
 // 事故影响下交通流变化趋势：默认展示“速度”
 const accidentImpactMetric = ref('speed')
-
-const timePoints = [
-  '00:00',
-  '04:00',
-  '08:00',
-  '12:00',
-  '16:00',
-  '20:00',
-  '24:00',
-]
-
-const congestionData = [45, 30, 75, 40, 70, 55, 35]
-const speedData = [65, 70, 45, 55, 50, 60, 68]
+const congestionDataAxis = ref([])
+const speedDataAxis = ref([])
+const timePoints = computed(() => {
+  return accidentImpactMetric.value === 'speed' ? speedDataAxis.value : congestionDataAxis.value
+})
+const congestionData = ref([])
+const speedData = ref([])
 
 // 示范区域近七日交通流量对比（单位：pcu/h）
 const demoAreaLast7Days = ref([])
@@ -532,7 +526,7 @@ const demoAreaHistoryTrendOption = computed(() => {
 const trendOption = computed(() => {
   const isCongestion = activeTrendMetric.value === 'congestion'
   const seriesName = isCongestion ? '拥堵指数' : '平均速度'
-  const data = isCongestion ? congestionData : speedData
+  const data = isCongestion ? congestionData.value : speedData.value
 
   return {
     backgroundColor: 'transparent',
@@ -565,7 +559,7 @@ const trendOption = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: timePoints,
+      data: timePoints.value,
       boundaryGap: false,
       axisLine: {
         lineStyle: {
@@ -1179,7 +1173,13 @@ const getPageData = async () => {
       trafficStatus.value.travelTimeIndex = item.data
     }
   })
-  // 111
+  // 趋势统计
+  const trendStatisticsCongestionIndex = data['trend_statistics']?.congestion_index?.items || []
+  const trendStatisticsAverageSpeed = data['trend_statistics']?.average_speed?.items || []
+  congestionDataAxis.value = trendStatisticsCongestionIndex.map(item => item.project)
+  congestionData.value = trendStatisticsCongestionIndex.map(item => item.data)
+  speedDataAxis.value = trendStatisticsAverageSpeed.map(item => item.project)
+  speedData.value = trendStatisticsAverageSpeed.map(item => item.data)
 }
 
 onMounted(() => {