1

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",

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"

src/views/pages/StatusMonitor.vue

@@ -3,8 +3,15 @@ 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 {
+  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'
@@ -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 = [
+const demoAreaLast7Days = ref([])
-  '03-06',
-  '03-07',
-  '03-08',
-  '03-09',
-  '03-10',
-  '03-11',
-  '03-12',
-]
 // 按截图大致还原的数据分布（早峰/晚峰/全时段）
-const demoAreaFlowData = {
+const demoAreaFlowData = ref({
-  morning: [4300, 3700, 2400, 6800, 3500, 3100, 5800],
+  morning: [],
-  evening: [5100, 3300, 3900, 4900, 2800, 5300, 4200],
+  evening: [],
-  all: [6400, 5400, 5000, 7500, 4800, 7200, 6700],
+  all: [],
-}
+})
 
 const last7DaysFlowOption = computed(() => {
   const axisTextColor = '#64748b'
@@ -164,7 +163,7 @@ const last7DaysFlowOption = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: demoAreaLast7Days,
+      data: demoAreaLast7Days.value,
       axisLine: {lineStyle: {color: '#cbd5e1'}},
       axisTick: {show: false},
       axisLabel: {
@@ -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 = {
+const impactCompareData = ref({
-  data1: [72, 92, 38, 88], // 数据一（绿色）
+  data1: [0, 0, 0, 0], // 数据一（绿色）
-  data2: [86, 66, 82, 54], // 数据二（蓝色）
+  data2: [0, 0, 0, 0], // 数据二（蓝色）
-}
+})
 
 const accidentImpactCompareOption = computed(() => {
   const axisTextColor = '#64748b'
@@ -295,7 +294,7 @@ const accidentImpactCompareOption = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: impactCompareAxis,
+      data: impactCompareAxis.value,
       axisLine: {lineStyle: {color: '#cbd5e1'}},
       axisTick: {show: false},
       axisLabel: {
@@ -306,9 +305,6 @@ const accidentImpactCompareOption = computed(() => {
     },
     yAxis: {
       type: 'value',
-      min: 0,
-      max: 100,
-      interval: 25,
       axisLine: {show: false},
       axisTick: {show: false},
       axisLabel: {show: true},
@@ -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
@@ -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(() => {
@@ -1387,7 +1474,6 @@ onMounted(() => {
 }
 
 
-
 .card-header h3 {
   margin: 0;
   margin-left: 25px;