交通流首页 实时车流量路段

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/index.vue

@@ -43,7 +43,7 @@
           <div class="event-item " origin="right">本年：<span>{{ earlyWarningEvents.year }}</span> 起</div>
         </div>
       </div>
-      <div class="box-title"><span>在途车辆统计</span></div>
+      <div class="box-title"><span>日累计车流量</span></div>
       <div class="box-content2">
         <div class="count">
           <div class="charts " ref="carStatisticsEchartBox"></div>
@@ -157,39 +157,19 @@ export default {
     },
     bindCharts(){
       const today = moment().format('YYYY-MM-DD')
+
         request({
-        url: '/business/traffic-statistics/history/realTimeTrafficFlow',
-        method: 'get',
-        params: {
-          startDate: today,
-          periodType: 4,
-          direction: 1
-        }
-      }).then(res1=>{
-        request({
-        url: '/business/traffic-statistics/history/realTimeTrafficFlow',
+        url: '/business/traffic-statistics/history/trafficFlowAtTollTypes',
         method: 'get',
         params: {
           startDate: today,
-          periodType: 4,
-          direction: 3
           }
         }).then(res3=>{
           // totalPassengerFlow 客车 typeSpecialVehicleFlow//特种车 typeTruckFlow 其他
           let total = 0, p0 = 0, p1=0,p2=0,_p0 = 0, _p1=0,_p2=0;
-          res1.data.forEach(x=>{
-            total+=(x.totalPassengerFlow+x.typeTruckFlow+x.typeSpecialVehicleFlow)
-            p0 += x.totalPassengerFlow
-            p1 += x.typeSpecialVehicleFlow
-            p2 += x.typeTruckFlow
-          })
-          res3.data.forEach(x=>{
-
-            total+=(x.totalPassengerFlow+x.typeTruckFlow+x.typeSpecialVehicleFlow)
-            p0 += x.totalPassengerFlow
-            p1 += x.typeSpecialVehicleFlow
-            p2 += x.typeTruckFlow
-          })
+            total+=(res3.data.bus +res3.data.truck)
+            p0 += res3.data.bus
+            p1 += res3.data.truck
 
           if(total > 0){
             _p0 = parseFloat((p0/total*100).toFixed(1))
@@ -216,7 +196,7 @@ export default {
           myChart3.setOption(otherStatistics);
 
         })
-      })
+
     },
     bindTrafficIncident(){
       // 预警事件

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/js/carStatistics.js

@@ -98,7 +98,7 @@ var carStatistics = {
       },
       detail: {
         formatter: function (params) {
-          return `{cn|}\n{number|${params + "%"}\n}{wcl|小客车}`;
+          return `{cn|}\n{number|${params + "%"}\n}{wcl|客车}`;
         },
         rich: {
           fontFamily: "PangMenZhengDao-Regular",

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/js/focusStatistics.js

@@ -98,7 +98,7 @@ var focusStatistics = {
       },
       detail: {
         formatter: function (params) {
-          return `{cn|}\n{number|${params + "%"}\n}{wcl|重点车辆}`;
+          return `{cn|}\n{number|${params + "%"}\n}{wcl|货车}`;
         },
         rich: {
           fontFamily: "PangMenZhengDao-Regular",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js

@@ -5,13 +5,14 @@ var options = {
     confine:true,
     trigger: "axis",
     formatter: (params) => {
-
-      let name = params[0].name.replace(/-/g, "")
-      let name1 = name+'-济南'
-      let name2 = name+'-菏泽'
+      // 获取第一个参数的名称并按 '-' 分割
+      let parts = params[0].name.split('-');
+     // let name = params[0].name.replace(/-/g, "")
+      let name1 = parts[0]+"-"+parts[1]+'-济南'
+      let name2 = parts[1]+"-"+parts[0]+'-菏泽'
       if(params[0].axisIndex === 1){
-        name1 = name+'-菏泽'
-        name2 = name+'-济南'
+        name1 = parts[0]+"-"+parts[1]+'-菏泽'
+        name2 = parts[1]+"-"+parts[0]+'-济南'
       }
       return `${name1}
       <br/>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue

@@ -78,9 +78,31 @@ export default {
         url: '/business/traffic-statistics/history/realTimeTrafficFlowHour',
         method: 'get'
       }).then(res=>{
-        const xAxis = res.data["1"].map(x=>x.name);
-        chartOptions.xAxis[0].data = xAxis;
-        chartOptions.xAxis[1].data = xAxis;
+        const data = res.data["1"];
+        const xAxis = data.map(item => {
+          const parts = item.name.split('-');
+          if (parts.length > 1) {
+            return { value: item.name, name: `${parts[0]}\n${parts.slice(1).join('-')}` };
+          } else {
+            return { value: item.name, name: item.name };
+          }
+        });
+        chartOptions.xAxis[0].data = xAxis.map(x => x.value);
+        chartOptions.xAxis[1].data = xAxis.map(x => x.value);
+
+        chartOptions.xAxis.forEach(axis => {
+          axis.axisLabel = {
+            ...axis.axisLabel,
+            formatter: function(value) {
+              const parts = value.split('-');
+              if (parts.length > 1) {
+                return `${parts[0]}\n${parts.slice(1).join('-')}`;
+              } else {
+                return value;
+              }
+            }
+          };
+        });
         // 1今年菏泽 2今年济南 3去年菏泽 4去年济南
         chartOptions.series[0].data = res.data['2'].map(x=>x.totalFlow)
         chartOptions.series[1].data = res.data['4'].map(x=>x.totalFlow)