From 0e984ecace82ff70be1599a4dd2cdd8f47f91c44 Mon Sep 17 00:00:00 2001
From: huangyaohui <huangyaohui@umayle.com>
Date: Fri, 20 Mar 2026 16:15:42 +0800
Subject: [PATCH] 1

---
 package-lock.json                 |  10 +
 package.json                      |   1 +
 src/views/pages/StatusMonitor.vue | 324 +++++++++++++++++++-----------
 3 files changed, 216 insertions(+), 119 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb3b1fd..0ea3f78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "axios": "^1.13.6",
         "echarts": "^6.0.0",
         "element-plus": "^2.13.5",
+        "moment": "^2.30.1",
         "vue": "^3.5.29",
         "vue-echarts": "^8.0.1",
         "vue-router": "^5.0.3"
@@ -2940,6 +2941,15 @@
         "pathe": "^2.0.1"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.1.tgz",
diff --git a/package.json b/package.json
index 6ec3199..1ab44d8 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.13.6",
     "echarts": "^6.0.0",
     "element-plus": "^2.13.5",
+    "moment": "^2.30.1",
     "vue": "^3.5.29",
     "vue-echarts": "^8.0.1",
     "vue-router": "^5.0.3"
diff --git a/src/views/pages/StatusMonitor.vue b/src/views/pages/StatusMonitor.vue
index 471ce16..1bdc734 100644
--- a/src/views/pages/StatusMonitor.vue
+++ b/src/views/pages/StatusMonitor.vue
@@ -1,10 +1,17 @@
 <script setup>
 import {ref, computed, onMounted} from 'vue'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart, BarChart } from 'echarts/charts'
-import { TooltipComponent, GridComponent, MarkAreaComponent, MarkPointComponent, LegendComponent } from 'echarts/components'
+import {use} from 'echarts/core'
+import {CanvasRenderer} from 'echarts/renderers'
+import {LineChart, BarChart} from 'echarts/charts'
+import {
+  TooltipComponent,
+  GridComponent,
+  MarkAreaComponent,
+  MarkPointComponent,
+  LegendComponent
+} from 'echarts/components'
 import VChart from 'vue-echarts'
+import moment from "moment";
 import imgAccidentPoint from '@/assets/images/home/sg.png'
 import imgStatusDmll from '@/assets/images/status/dmll.png'
 import imgStatusLdpjsd from '@/assets/images/status/ldpjsd.png'
@@ -27,22 +34,22 @@ use([
 const activeTrendMetric = ref('speed')
 
 const statusMonitorOverviewCards = [
-  { label: '路段平均速度', value: '32', unit: '(km/h)', icon: imgStatusLdpjsd },
-  { label: '断面流量', value: '1200', unit: '(车次/h)', icon: imgStatusDmll },
-  { label: '事故点核心车速', value: '10', unit: '(km/h)', icon: imgStatusYxcs },
-  { label: '影响区车辆数', value: '580', unit: '(辆)', icon: imgStatusYxqcl },
+  {label: '路段平均速度', value: '32', unit: '(km/h)', icon: imgStatusLdpjsd},
+  {label: '断面流量', value: '1200', unit: '(车次/h)', icon: imgStatusDmll},
+  {label: '事故点核心车速', value: '10', unit: '(km/h)', icon: imgStatusYxcs},
+  {label: '影响区车辆数', value: '580', unit: '(辆)', icon: imgStatusYxqcl},
 ]
 
 // 事故影响下交通流变化趋势：下拉选择项（绑定图表）
 const accidentImpactSection = ref('A-001')
 const accidentImpactSectionOptions = [
-  { value: 'A-001', label: 'A-001' },
-  { value: 'A-002', label: 'A-002' },
+  {value: 'A-001', label: 'A-001'},
+  {value: 'A-002', label: 'A-002'},
 ]
 
 // 示范区域近七日交通流量对比：下拉选择（当前仅“全选”）
 const demoAreaFlowFilter = ref('all')
-const demoAreaFlowFilterOptions = [{ value: 'all', label: '全选' }]
+const demoAreaFlowFilterOptions = [{value: 'all', label: '全选'}]
 
 // 示范区域历史交通流趋势：时间范围切换
 const demoAreaHistoryRange = ref('7d') // '7d' | '1d'
@@ -91,21 +98,13 @@ const congestionData = [45, 30, 75, 40, 70, 55, 35]
 const speedData = [65, 70, 45, 55, 50, 60, 68]
 
 // 示范区域近七日交通流量对比（单位：pcu/h）
-const demoAreaLast7Days = [
-  '03-06',
-  '03-07',
-  '03-08',
-  '03-09',
-  '03-10',
-  '03-11',
-  '03-12',
-]
+const demoAreaLast7Days = ref([])
 // 按截图大致还原的数据分布（早峰/晚峰/全时段）
-const demoAreaFlowData = {
-  morning: [4300, 3700, 2400, 6800, 3500, 3100, 5800],
-  evening: [5100, 3300, 3900, 4900, 2800, 5300, 4200],
-  all: [6400, 5400, 5000, 7500, 4800, 7200, 6700],
-}
+const demoAreaFlowData = ref({
+  morning: [],
+  evening: [],
+  all: [],
+})
 
 const last7DaysFlowOption = computed(() => {
   const axisTextColor = '#64748b'
@@ -123,8 +122,8 @@ const last7DaysFlowOption = computed(() => {
     x2: 0,
     y2: 1,
     colorStops: [
-      { offset: 0, color: `rgba(${hexToRgb(baseColor)}, ${topAlpha})` },
-      { offset: 1, color: `rgba(${hexToRgb(baseColor)}, ${bottomAlpha})` },
+      {offset: 0, color: `rgba(${hexToRgb(baseColor)}, ${topAlpha})`},
+      {offset: 1, color: `rgba(${hexToRgb(baseColor)}, ${bottomAlpha})`},
     ],
   })
 
@@ -144,17 +143,17 @@ const last7DaysFlowOption = computed(() => {
     },
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'shadow' },
+      axisPointer: {type: 'shadow'},
       padding: [5, 10],
       formatter: (params) => {
         if (!params?.length) return ''
         const title = params[0].axisValue
         const lines = params
-          .map(p => `${p.marker}${p.seriesName}：${formatNumber(p.data)} pcu/h`)
-          .join('<br/>')
+            .map(p => `${p.marker}${p.seriesName}：${formatNumber(p.data)} pcu/h`)
+            .join('<br/>')
         return `${title}<br/>${lines}`
       },
-      textStyle: { fontSize: 11 },
+      textStyle: {fontSize: 11},
     },
     grid: {
       left: 56,
@@ -164,9 +163,9 @@ const last7DaysFlowOption = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: demoAreaLast7Days,
-      axisLine: { lineStyle: { color: '#cbd5e1' } },
-      axisTick: { show: false },
+      data: demoAreaLast7Days.value,
+      axisLine: {lineStyle: {color: '#cbd5e1'}},
+      axisTick: {show: false},
       axisLabel: {
         color: axisTextColor,
         fontSize: 12,
@@ -185,8 +184,8 @@ const last7DaysFlowOption = computed(() => {
       min: 0,
       max: 8000,
       interval: 2000,
-      axisLine: { show: false },
-      axisTick: { show: false },
+      axisLine: {show: false},
+      axisTick: {show: false},
       axisLabel: {
         color: axisTextColor,
         fontSize: 12,
@@ -204,7 +203,7 @@ const last7DaysFlowOption = computed(() => {
       {
         name: '早峰',
         type: 'bar',
-        data: demoAreaFlowData.morning,
+        data: demoAreaFlowData.value.morning,
         barWidth: 10,
         barGap: '40%',
         itemStyle: {
@@ -215,7 +214,7 @@ const last7DaysFlowOption = computed(() => {
       {
         name: '晚峰',
         type: 'bar',
-        data: demoAreaFlowData.evening,
+        data: demoAreaFlowData.value.evening,
         barWidth: 10,
         itemStyle: {
           color: gradient(seriesColor.evening),
@@ -225,7 +224,7 @@ const last7DaysFlowOption = computed(() => {
       {
         name: '全时段',
         type: 'bar',
-        data: demoAreaFlowData.all,
+        data: demoAreaFlowData.value.all,
         barWidth: 10,
         itemStyle: {
           color: gradient(seriesColor.all),
@@ -237,12 +236,12 @@ const last7DaysFlowOption = computed(() => {
 })
 
 // 事故影响量化指标对比（柱状对比）
-const impactCompareAxis = ['类目一', '类目二', '类目三', '类目四']
+const impactCompareAxis = ref([])
 // 按截图大致还原的占位数据（可后续接入接口替换）
-const impactCompareData = {
-  data1: [72, 92, 38, 88], // 数据一（绿色）
-  data2: [86, 66, 82, 54], // 数据二（蓝色）
-}
+const impactCompareData = ref({
+  data1: [0, 0, 0, 0], // 数据一（绿色）
+  data2: [0, 0, 0, 0], // 数据二（蓝色）
+})
 
 const accidentImpactCompareOption = computed(() => {
   const axisTextColor = '#64748b'
@@ -255,8 +254,8 @@ const accidentImpactCompareOption = computed(() => {
     x2: 0,
     y2: 1,
     colorStops: [
-      { offset: 0, color: `rgba(${hexToRgb(baseColor)}, ${topAlpha})` },
-      { offset: 1, color: `rgba(${hexToRgb(baseColor)}, ${bottomAlpha})` },
+      {offset: 0, color: `rgba(${hexToRgb(baseColor)}, ${topAlpha})`},
+      {offset: 1, color: `rgba(${hexToRgb(baseColor)}, ${bottomAlpha})`},
     ],
   })
 
@@ -276,7 +275,7 @@ const accidentImpactCompareOption = computed(() => {
     },
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'shadow' },
+      axisPointer: {type: 'shadow'},
       padding: [5, 10],
       formatter: (params) => {
         if (!params?.length) return ''
@@ -284,7 +283,7 @@ const accidentImpactCompareOption = computed(() => {
         const lines = params.map(p => `${p.marker}${p.seriesName}：${p.data}`).join('<br/>')
         return `${title}<br/>${lines}`
       },
-      textStyle: { fontSize: 11 },
+      textStyle: {fontSize: 11},
     },
     grid: {
       left: 10,
@@ -295,9 +294,9 @@ const accidentImpactCompareOption = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: impactCompareAxis,
-      axisLine: { lineStyle: { color: '#cbd5e1' } },
-      axisTick: { show: false },
+      data: impactCompareAxis.value,
+      axisLine: {lineStyle: {color: '#cbd5e1'}},
+      axisTick: {show: false},
       axisLabel: {
         color: axisTextColor,
         fontSize: 12,
@@ -306,12 +305,9 @@ const accidentImpactCompareOption = computed(() => {
     },
     yAxis: {
       type: 'value',
-      min: 0,
-      max: 100,
-      interval: 25,
-      axisLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: { show: true },
+      axisLine: {show: false},
+      axisTick: {show: false},
+      axisLabel: {show: true},
       splitLine: {
         show: true,
         lineStyle: {
@@ -324,7 +320,7 @@ const accidentImpactCompareOption = computed(() => {
       {
         name: '数据一',
         type: 'bar',
-        data: impactCompareData.data1,
+        data: impactCompareData.value.data1,
         barWidth: 12,
         itemStyle: {
           color: gradient('#1FEC90', 0.95, 0.15),
@@ -334,7 +330,7 @@ const accidentImpactCompareOption = computed(() => {
       {
         name: '数据二',
         type: 'bar',
-        data: impactCompareData.data2,
+        data: impactCompareData.value.data2,
         barWidth: 12,
         itemStyle: {
           color: gradient('#2563eb', 0.95, 0.15),
@@ -371,7 +367,7 @@ const demoAreaHistorySummary = {
 const demoAreaLast1Day = timePoints
 
 const demoAreaHistoryAxis = computed(() => {
-  return demoAreaHistoryRange.value === '1d' ? demoAreaLast1Day : demoAreaLast7Days
+  return demoAreaHistoryRange.value === '1d' ? demoAreaLast1Day : demoAreaLast7Days.value
 })
 
 // 按截图走势大致还原：左轴车流量(pcu/h) 0-5000，右轴平均车速(km/h) 0-100
@@ -410,14 +406,14 @@ const demoAreaHistoryTrendOption = computed(() => {
         if (!params?.length) return ''
         const title = params[0].axisValue
         const lines = params
-          .map((p) => {
-            const unit = p.seriesName === '平均车速' ? ' km/h' : ' pcu/h'
-            return `${p.marker}${p.seriesName}：${formatNumber(p.data)}${unit}`
-          })
-          .join('<br/>')
+            .map((p) => {
+              const unit = p.seriesName === '平均车速' ? ' km/h' : ' pcu/h'
+              return `${p.marker}${p.seriesName}：${formatNumber(p.data)}${unit}`
+            })
+            .join('<br/>')
         return `${title}<br/>${lines}`
       },
-      textStyle: { fontSize: 11 },
+      textStyle: {fontSize: 11},
     },
     grid: {
       left: 56,
@@ -436,14 +432,14 @@ const demoAreaHistoryTrendOption = computed(() => {
         color: axisTextColor,
         fontSize: 12,
       },
-      axisLine: { lineStyle: { color: '#cbd5e1' } },
-      axisTick: { show: false },
+      axisLine: {lineStyle: {color: '#cbd5e1'}},
+      axisTick: {show: false},
       axisLabel: {
         color: axisTextColor,
         fontSize: 12,
         margin: 12,
       },
-      splitLine: { show: false },
+      splitLine: {show: false},
     },
     yAxis: [
       {
@@ -458,8 +454,8 @@ const demoAreaHistoryTrendOption = computed(() => {
         min: 0,
         max: 5000,
         interval: 1000,
-        axisLine: { show: false },
-        axisTick: { show: false },
+        axisLine: {show: false},
+        axisTick: {show: false},
         axisLabel: {
           color: axisTextColor,
           fontSize: 12,
@@ -485,13 +481,13 @@ const demoAreaHistoryTrendOption = computed(() => {
         min: 0,
         max: 100,
         interval: 20,
-        axisLine: { show: false },
-        axisTick: { show: false },
+        axisLine: {show: false},
+        axisTick: {show: false},
         axisLabel: {
           color: axisTextColor,
           fontSize: 12,
         },
-        splitLine: { show: false },
+        splitLine: {show: false},
       },
     ],
     series: [
@@ -504,7 +500,7 @@ const demoAreaHistoryTrendOption = computed(() => {
         symbol: 'circle',
         symbolSize: 4,
         showSymbol: false,
-        lineStyle: { color: '#2563eb', width: 2 },
+        lineStyle: {color: '#2563eb', width: 2},
       },
       {
         name: '平均车速',
@@ -515,7 +511,7 @@ const demoAreaHistoryTrendOption = computed(() => {
         symbol: 'circle',
         symbolSize: 4,
         showSymbol: false,
-        lineStyle: { color: '#22c55e', width: 2 },
+        lineStyle: {color: '#22c55e', width: 2},
       },
     ],
   }
@@ -619,8 +615,8 @@ const trendOption = computed(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(249, 115, 22, 0.35)' },
-              { offset: 1, color: 'rgba(249, 115, 22, 0.02)' },
+              {offset: 0, color: 'rgba(249, 115, 22, 0.35)'},
+              {offset: 1, color: 'rgba(249, 115, 22, 0.02)'},
             ],
           },
         },
@@ -667,10 +663,10 @@ const accidentImpactOption = computed(() => {
   const minVal = Math.min(...baseData)
   const maxVal = Math.max(...baseData)
   const yAxisRange = (() => {
-    if (metric === 'speed') return { min: 0, max: 100, interval: 25, name: '(km/h)' }
+    if (metric === 'speed') return {min: 0, max: 100, interval: 25, name: '(km/h)'}
     if (metric === 'dropRate') {
       const max = Math.min(100, Math.ceil(Math.max(0, maxVal) / 10) * 10)
-      return { min: 0, max: max || 10, interval: 25, name: '(%)' }
+      return {min: 0, max: max || 10, interval: 25, name: '(%)'}
     }
     // diff
     const pad = 5
@@ -678,7 +674,7 @@ const accidentImpactOption = computed(() => {
     const max = Math.ceil((maxVal + pad) / 10) * 10
     const span = max - min
     const interval = span <= 20 ? 5 : span <= 50 ? 10 : 20
-    return { min, max, interval, name: '(km/h)' }
+    return {min, max, interval, name: '(km/h)'}
   })()
 
   const accidentMarkPoint = {
@@ -687,12 +683,12 @@ const accidentImpactOption = computed(() => {
     symbolOffset: [0, -10],
     symbolKeepAspect: true,
     silent: true,
-    label: { show: false },
+    label: {show: false},
     data: [
       (() => {
         const idx = accidentTimeAxis.indexOf('0')
         const y = idx >= 0 ? baseData[idx] : baseData[0]
-        return { name: '事故发生', xAxis: '0', yAxis: y ?? 0 }
+        return {name: '事故发生', xAxis: '0', yAxis: y ?? 0}
       })(),
     ],
     tooltip: {
@@ -707,12 +703,12 @@ const accidentImpactOption = computed(() => {
         if (!params || !params.length) return ''
         const time = params[0].axisValue
         const lines = params
-          .map(p => `${p.marker}${p.seriesName}：${p.data} ${unit}`)
-          .join('<br/>')
+            .map(p => `${p.marker}${p.seriesName}：${p.data} ${unit}`)
+            .join('<br/>')
         const label =
-          time === '0'
-            ? '（事故发生时刻）'
-            : (Number(time) < 0 ? '（事故前）' : '（事故后）')
+            time === '0'
+                ? '（事故发生时刻）'
+                : (Number(time) < 0 ? '（事故前）' : '（事故后）')
         return `距离事故发生 ${time} min ${label}<br/>${lines}`
       },
       axisPointer: {
@@ -832,8 +828,8 @@ const accidentImpactOption = computed(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(249, 115, 22, 0.35)' },
-              { offset: 1, color: 'rgba(249, 115, 22, 0.02)' },
+              {offset: 0, color: 'rgba(249, 115, 22, 0.35)'},
+              {offset: 1, color: 'rgba(249, 115, 22, 0.02)'},
             ],
           },
         },
@@ -865,8 +861,8 @@ const accidentImpactOption = computed(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(248, 113, 113, 0.35)' },
-              { offset: 1, color: 'rgba(248, 113, 113, 0.02)' },
+              {offset: 0, color: 'rgba(248, 113, 113, 0.35)'},
+              {offset: 1, color: 'rgba(248, 113, 113, 0.02)'},
             ],
           },
         },
@@ -888,7 +884,7 @@ const accidentImpactOption = computed(() => {
                   padding: [-18, 0],
                 },
               },
-              { xAxis: '30' },
+              {xAxis: '30'},
             ],
             [
               // 逐步恢复期
@@ -904,7 +900,7 @@ const accidentImpactOption = computed(() => {
                   padding: [-18, 0],
                 },
               },
-              { xAxis: '60' },
+              {xAxis: '60'},
             ],
           ],
         },
@@ -934,8 +930,8 @@ const accidentImpactOption = computed(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: 'rgba(34, 197, 94, 0.35)' },
-              { offset: 1, color: 'rgba(34, 197, 94, 0.02)' },
+              {offset: 0, color: 'rgba(34, 197, 94, 0.35)'},
+              {offset: 1, color: 'rgba(34, 197, 94, 0.02)'},
             ],
           },
         },
@@ -949,6 +945,97 @@ const getPageData = async () => {
   const res = await api.getPageData('status')
   const data = JSON.parse(res.data)
   console.log("🚀 ~ getPageData ~ data: ", data);
+  // 事故影响量化指标对比
+  const dataOne = data['accident_impact_quantified_comparison']?.data_one?.items || []
+  const dataTwo = data['accident_impact_quantified_comparison']?.data_two?.items || []
+  const categoryOrder = []
+  dataOne.forEach(item => {
+    if (!categoryOrder.includes(item.project)) {
+      categoryOrder.push(item.project)
+    }
+  })
+  dataTwo.forEach(item => {
+    if (!categoryOrder.includes(item.project)) {
+      categoryOrder.push(item.project)
+    }
+  })
+  impactCompareAxis.value = categoryOrder
+  const categoryIndexMap = {}
+  categoryOrder.forEach((cat, idx) => {
+    categoryIndexMap[cat] = idx
+    impactCompareData.value.data1[idx] = 0
+    impactCompareData.value.data2[idx] = 0
+  })
+  dataOne.forEach(item => {
+    const index = categoryIndexMap[item.project]
+    if (index !== undefined) {
+      impactCompareData.value.data1[index] = item.data ?? 0
+    }
+  })
+  dataTwo.forEach(item => {
+    const index = categoryIndexMap[item.project]
+    if (index !== undefined) {
+      impactCompareData.value.data2[index] = item.data ?? 0
+    }
+  })
+  // 示范区域近七日交通流量对比
+  const morningPeak = data['demo_area_7day_volume_comparison']?.morning_peak?.items || []
+  const eveningPeak = data['demo_area_7day_volume_comparison']?.evening_peak?.items || []
+  const allDay = data['demo_area_7day_volume_comparison']?.all_day?.items || []
+  const dateOrder = []
+  morningPeak.forEach(item => {
+    const dateStr = moment(item.project).format('MM/DD')
+    if (!dateOrder.includes(dateStr)) {
+      dateOrder.push(dateStr)
+    }
+  })
+  eveningPeak.forEach(item => {
+    const dateStr = moment(item.project).format('MM/DD')
+    if (!dateOrder.includes(dateStr)) {
+      dateOrder.push(dateStr)
+    }
+  })
+  allDay.forEach(item => {
+    const dateStr = moment(item.project).format('MM/DD')
+    if (!dateOrder.includes(dateStr)) {
+      dateOrder.push(dateStr)
+    }
+  })
+  demoAreaLast7Days.value = dateOrder
+  const dateIndexMap = {}
+  dateOrder.forEach((date, idx) => {
+    dateIndexMap[date] = idx
+  })
+  demoAreaFlowData.value.morning = dateOrder.map(() => 0)
+  demoAreaFlowData.value.evening = dateOrder.map(() => 0)
+  demoAreaFlowData.value.all = dateOrder.map(() => 0)
+  morningPeak.forEach(item => {
+    const dateStr = moment(item.project).format('MM/DD')
+    const index = dateIndexMap[dateStr]
+    if (index !== undefined) {
+      demoAreaFlowData.value.morning[index] = item.data ?? 0
+    }
+  })
+  eveningPeak.forEach(item => {
+    const dateStr = moment(item.project).format('MM/DD')
+    const index = dateIndexMap[dateStr]
+    if (index !== undefined) {
+      demoAreaFlowData.value.evening[index] = item.data ?? 0
+    }
+  })
+  allDay.forEach(item => {
+    const dateStr = moment(item.project).format('MM/DD')
+    const index = dateIndexMap[dateStr]
+    if (index !== undefined) {
+      demoAreaFlowData.value.all[index] = item.data ?? 0
+    }
+  })
+  // 示范区域历史交通流趋势
+
+  // 111
+  // 111
+  // 111
+  // 111
 }
 
 onMounted(() => {
@@ -959,14 +1046,14 @@ onMounted(() => {
 <template>
   <div class="status-monitor-page">
     <div class="status-monitor-map-wrap">
-      <MapPage :hide-accident-panels="true" :show-ztjc-overlays="true" :show-accident-overlays="true" />
+      <MapPage :hide-accident-panels="true" :show-ztjc-overlays="true" :show-accident-overlays="true"/>
     </div>
     <div class="status-monitor-content">
       <div class="status-monitor-overview">
         <div v-for="item in statusMonitorOverviewCards" :key="item.label" class="overview-item">
           <div class="overview-icon-wrap">
             <div class="overview-icon-ring">
-              <img :src="item.icon" alt="" class="overview-icon" />
+              <img :src="item.icon" alt="" class="overview-icon"/>
             </div>
           </div>
           <div class="overview-text">
@@ -1080,18 +1167,18 @@ onMounted(() => {
             <h3>趋势统计</h3>
             <div class="trend-tabs">
               <div class="trend-tab" :class="{ 'trend-tab-active': activeTrendMetric === 'congestion' }"
-                @click="activeTrendMetric = 'congestion'">
+                   @click="activeTrendMetric = 'congestion'">
                 拥堵指数
               </div>
               <div class="trend-tab" :class="{ 'trend-tab-active': activeTrendMetric === 'speed' }"
-                @click="activeTrendMetric = 'speed'">
+                   @click="activeTrendMetric = 'speed'">
                 平均速度
               </div>
             </div>
           </div>
           <div class="card-body trend-card-body">
             <div class="trend-chart-wrap">
-              <v-chart class="trend-chart" :option="trendOption" autoresize />
+              <v-chart class="trend-chart" :option="trendOption" autoresize/>
             </div>
           </div>
         </div>
@@ -1100,15 +1187,15 @@ onMounted(() => {
             <h3>事故影响下交通流变化趋势</h3>
             <div class="accident-impact-actions">
               <el-select v-model="accidentImpactSection" class="accident-impact-select"
-                popper-class="status-monitor-select-popper" :teleported="false" style="width: 90px;">
+                         popper-class="status-monitor-select-popper" :teleported="false" style="width: 90px;">
                 <el-option v-for="opt in accidentImpactSectionOptions" :key="opt.value" :label="opt.label"
-                  :value="opt.value" />
+                           :value="opt.value"/>
               </el-select>
             </div>
           </div>
           <div class="card-body trend-card-body">
             <div class="trend-chart-wrap">
-              <v-chart class="trend-chart" :option="accidentImpactOption" autoresize />
+              <v-chart class="trend-chart" :option="accidentImpactOption" autoresize/>
             </div>
           </div>
         </div>
@@ -1121,15 +1208,15 @@ onMounted(() => {
             <h3>示范区域近七日交通流量对比</h3>
             <div class="demo-flow-actions">
               <el-select v-model="demoAreaFlowFilter" class="accident-impact-select demo-flow-select"
-                popper-class="status-monitor-select-popper" :teleported="false" style="width: 68px;">
+                         popper-class="status-monitor-select-popper" :teleported="false" style="width: 68px;">
                 <el-option v-for="opt in demoAreaFlowFilterOptions" :key="opt.value" :label="opt.label"
-                  :value="opt.value" />
+                           :value="opt.value"/>
               </el-select>
             </div>
           </div>
           <div class="card-body chart-card-body">
             <div class="chart-wrap">
-              <v-chart class="chart" :option="last7DaysFlowOption" autoresize />
+              <v-chart class="chart" :option="last7DaysFlowOption" autoresize/>
             </div>
           </div>
         </div>
@@ -1139,7 +1226,7 @@ onMounted(() => {
           </div>
           <div class="card-body chart-card-body">
             <div class="chart-wrap">
-              <v-chart class="chart" :option="accidentImpactCompareOption" autoresize />
+              <v-chart class="chart" :option="accidentImpactCompareOption" autoresize/>
             </div>
           </div>
         </div>
@@ -1148,11 +1235,11 @@ onMounted(() => {
             <h3>示范区域历史交通流趋势</h3>
             <div class="trend-tabs">
               <div class="trend-tab" :class="{ 'trend-tab-active': demoAreaHistoryRange === '7d' }"
-                @click="demoAreaHistoryRange = '7d'">
+                   @click="demoAreaHistoryRange = '7d'">
                 近七日
               </div>
               <div class="trend-tab" :class="{ 'trend-tab-active': demoAreaHistoryRange === '1d' }"
-                @click="demoAreaHistoryRange = '1d'">
+                   @click="demoAreaHistoryRange = '1d'">
                 近一日
               </div>
             </div>
@@ -1182,7 +1269,7 @@ onMounted(() => {
             </div>
 
             <div class="demo-history-chart-wrap">
-              <v-chart class="chart" :option="demoAreaHistoryTrendOption" autoresize />
+              <v-chart class="chart" :option="demoAreaHistoryTrendOption" autoresize/>
             </div>
           </div>
         </div>
@@ -1232,7 +1319,7 @@ onMounted(() => {
   background: linear-gradient(180deg,
       rgba(185, 220, 255, 0.5) 0%,
       rgba(222, 234, 246, 0) 100%),
-    #fafdff;
+  #fafdff;
   box-shadow: 0 0 8px rgba(97, 112, 146, 0.6);
   border-radius: 8px;
   border: 1px solid rgba(45, 103, 237, 0.3);
@@ -1355,7 +1442,7 @@ onMounted(() => {
   background: linear-gradient(180deg,
       rgba(185, 220, 255, 0.5) 0%,
       rgba(222, 234, 246, 0) 100%),
-    #fafdff;
+  #fafdff;
   box-shadow: 0 0 8px rgba(97, 112, 146, 0.6);
   border-radius: 8px;
   border: 1px solid rgba(45, 103, 237, 0.3);
@@ -1387,7 +1474,6 @@ onMounted(() => {
 }
 
 
-
 .card-header h3 {
   margin: 0;
   margin-left: 25px;
@@ -1516,7 +1602,7 @@ onMounted(() => {
   height: 56px;
   border-radius: 6px;
   background: linear-gradient(180deg, rgba(185, 220, 255, 0.65) 0%, rgba(222, 234, 246, 0) 100%),
-    rgba(245, 248, 255, 0.9);
+  rgba(245, 248, 255, 0.9);
   box-shadow: inset 0 0 0 1px rgba(45, 103, 237, 0.16);
   display: flex;
   flex-direction: column;
@@ -1624,7 +1710,7 @@ onMounted(() => {
   background: #2d67ed;
   color: #ffffff;
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06),
-    0 4px 8px rgba(37, 99, 235, 0.35);
+  0 4px 8px rgba(37, 99, 235, 0.35);
   border-radius: 4px 0px 0px 4px;
 }
 
@@ -1640,7 +1726,7 @@ onMounted(() => {
   transition: all 0.2s ease;
 }
 
-.trend-tab+.trend-tab {
+.trend-tab + .trend-tab {
   margin-left: 2px;
 }
 
@@ -1648,7 +1734,7 @@ onMounted(() => {
   background: #2d67ed;
   color: #ffffff;
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06),
-    0 4px 8px rgba(37, 99, 235, 0.35);
+  0 4px 8px rgba(37, 99, 235, 0.35);
 }
 
 .trend-card-body {
@@ -1708,7 +1794,7 @@ onMounted(() => {
   border-radius: 2px;
 }
 
-.overall-row+.overall-row {
+.overall-row + .overall-row {
   margin-top: 4px;
 }