Browse Source

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

develop
王兴琳 3 months ago
parent
commit
6b3a544a07
  1. 34
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/index.vue
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/js/carStatistics.js
  3. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/js/focusStatistics.js
  4. 21
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js
  5. 28
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue

34
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(){
//

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

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

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

@ -5,14 +5,15 @@ 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/>
${params[0].marker}${params[0].seriesName}: <span style="font-weight:bold;"> ${params[0].value} </span>
@ -48,13 +49,13 @@ var options = {
itemStyle: {
color: '#6DBBFB'
}
},{
name: "去年同期",
itemStyle: {
color: '#5FA52B'
}
},
],
},
@ -312,7 +313,7 @@ var options = {
},
},
data: [
195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21,
],
},
],

28
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)

Loading…
Cancel
Save