Browse Source

一类交调站页面修改

develop
lau572 3 months ago
parent
commit
a8ce3521dd
  1. 13
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js
  2. 288
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue
  3. 84
      ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js

13
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/data.js

@ -86,22 +86,19 @@ export const searchFormList = [
label: "方向:",
key: "direction",
type: "RadioGroup",
required: true,
isAlone: true,
default:'',
default:'1',
options: {
activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
options: [
{
key: "1",
label: "菏泽",
},
{
key: "3",
label: "济南",
label: "分方向",
},
{
key: "",
label: "向",
key: "2",
label: "不分方向",
}
],
},

288
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/index.vue

@ -33,7 +33,11 @@
<InputSearch ref="searchComp" style="width: 402px" :formList="searchFormList" @handleSearch="handleSearch" />
</div>
<div class="bodyTable">
<Table v-if="queryForm.dataType == '1'" style="width:85vw" :data="tableData" height="90%" >
<div style="height: 40%;" >
<div id="tableChart" style="height: 95%;width: 100%"></div>
</div>
<!--车流量 不分方向-->
<Table v-if="queryForm.dataType == '1' && queryForm.direction == '2'" style="width:85vw" :data="tableData" :key="tableKey" height="50%" >
<ElTableColumn prop="time" align="center" min-width="140" label="时间"></ElTableColumn>
<ElTableColumn prop="trafficNumberOfInAndSmall" align="center" label="中小客车" />
<ElTableColumn prop="busTrafficVolume" align="center" label="大客车" />
@ -46,7 +50,54 @@
<ElTableColumn prop="tractorTrafficVolume" align="center" label="拖拉机" />
<ElTableColumn prop="trafficVolume" align="center" label="合计" />
</Table>
<Table v-else style="width:85vw" :data="tableData" v-loading="loading" height="90%" >
<!--车流量 分方向-->
<Table v-if="queryForm.dataType == '1' && queryForm.direction == '1'" style="width:85vw" :data="tableData" :key="tableKey" height="50%" >
<ElTableColumn prop="time" align="center" min-width="140" label="时间"></ElTableColumn>
<ElTableColumn align="center" label="中小客车" >
<ElTableColumn prop="trafficNumberOfInAndSmallHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="trafficNumberOfInAndSmallJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="大客车" >
<ElTableColumn prop="busTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="busTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="小型货车" >
<ElTableColumn prop="trafficVolumeOfSmallTrucksHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="trafficVolumeOfSmallTrucksJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="中型货车" >
<ElTableColumn prop="mediumTruckTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="mediumTruckTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="大型货车" >
<ElTableColumn prop="largeTruckTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="largeTruckTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="特大型货车" >
<ElTableColumn prop="extraLargeTrucksTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="extraLargeTrucksTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="集装箱车" >
<ElTableColumn prop="containerTruckTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="containerTruckTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="摩托车" >
<ElTableColumn prop="motorcycleTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="motorcycleTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="拖拉机" >
<ElTableColumn prop="tractorTrafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="tractorTrafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
<ElTableColumn align="center" label="合计" >
<ElTableColumn prop="trafficVolumeHZ" align="center" label="菏泽" ></ElTableColumn>
<ElTableColumn prop="trafficVolumeJN" align="center" label="济南" ></ElTableColumn>
</ElTableColumn>
</Table>
<!--车速 不分方向-->
<Table v-if="queryForm.dataType == '2' && queryForm.direction == '2'" style="width:85vw" :data="tableData" :key="tableKey" v-loading="loading" height="50%" >
<ElTableColumn prop="time" align="center" min-width="140" label="时间"></ElTableColumn>
<ElTableColumn prop="inAndSmallAverageVehicleSpeed" align="center" label="中小客车" />
<ElTableColumn prop="averageSpeedOfBus" align="center" label="大客车" />
@ -59,6 +110,60 @@
<ElTableColumn prop="averageSpeedOfTractor" align="center" label="拖拉机" />
<ElTableColumn prop="avgSpeed" align="center" label="车速平均" />
</Table>
<!--车速 分方向-->
<Table v-if="queryForm.dataType == '2' && queryForm.direction == '1'" style="width:85vw" :data="tableData" :key="tableKey" v-loading="loading" height="50%" >
<ElTableColumn prop="time" align="center" min-width="140" label="时间"></ElTableColumn>
<ElTableColumn align="center" label="中小客车" >
<ElTableColumn prop="inAndSmallAverageVehicleSpeedHZ" align="center" label="菏泽" />
<ElTableColumn prop="inAndSmallAverageVehicleSpeedJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="大客车" >
<ElTableColumn prop="averageSpeedOfBusHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfBusJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="小型货车" >
<ElTableColumn prop="smallTrucksAverageVehicleSpeedHZ" align="center" label="菏泽" />
<ElTableColumn prop="smallTrucksAverageVehicleSpeedJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="中型货车" >
<ElTableColumn prop="averageSpeedOfMediumSizeTrucksHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfMediumSizeTrucksJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="大型货车" >
<ElTableColumn prop="averageSpeedOfLargeTrucksHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfLargeTrucksJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="特大型货车" >
<ElTableColumn prop="averageSpeedOfExtraLargeTrucksHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfExtraLargeTrucksJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="集装箱车" >
<ElTableColumn prop="averageSpeedOfContainerTruckHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfContainerTruckJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="摩托车" >
<ElTableColumn prop="averageSpeedOfMotorcycleHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfMotorcycleJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="拖拉机" >
<ElTableColumn prop="averageSpeedOfTractorHZ" align="center" label="菏泽" />
<ElTableColumn prop="averageSpeedOfTractorJN" align="center" label="济南" />
</ElTableColumn>
<ElTableColumn align="center" label="车速平均" >
<ElTableColumn prop="avgSpeedHZ" align="center" label="菏泽" />
<ElTableColumn prop="avgSpeedJN" align="center" label="济南" />
</ElTableColumn>
</Table>
</div>
</div>
</div>
@ -144,6 +249,7 @@
import * as echarts from "echarts";
import chartOptions from "./charts";
import { Loading } from 'element-ui';
import tableChartsOptions from "./tableCharts";
export default {
@ -165,21 +271,11 @@
devItem:{},
queryForm:{
iotDeviceId:'',
direction:'',
direction:'1',
date:moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
type:'1',
dataType:'1',
},
typeOptions:[
{value:"1",label:"日"},
{value:"2",label:"月"},
{value:"3",label:"年"},
],
directionOptions:[
{value:"1",label:"菏泽"},
{value:"3",label:"济南"},
{value:"",label:"双向"},
],
modelVisible:false,
loading:false,
deviceList: [],
@ -195,6 +291,7 @@
},
realTimeTableData:[],
realTimeDataList:[],
tableKey:null,
};
},
created(){
@ -232,9 +329,121 @@
}).then(res => {
if (res.code == 200) {
this.tableData = res.data
this.tableKey = Math.random()
this.initTableCharts()
}
})
},
initTableCharts(){
if(!this.myTableChart){
this.myTableChart = echarts.init(document.getElementById("tableChart"));
}
tableChartsOptions.series = []
if( this.tableData && this.tableData.length > 0){
let dataList = []
//
if (this.queryForm.dataType == '1'){
tableChartsOptions.yAxis[0].name = '流量'
dataList = this.tableData.slice(0,this.tableData.length - 3);
tableChartsOptions.xAxis.data = dataList.map(item => item.time.slice(item.time.length - 2,item.time.length))
if (this.queryForm.direction == '1'){
tableChartsOptions.series = [
{
name: "菏泽",
type: "line",
selectedMode: false,
itemStyle: {
barBorderRadius: [10, 10, 10, 10], //
// lenged
opacity: 1,
color: '#02A0F8',
},
data: dataList.map(item => item.trafficVolumeHZ),
},
{
name: "济南",
type: "line",
selectedMode: false,
itemStyle: {
// lenged
barBorderRadius: [10, 10, 10, 10], //
opacity: 1,
color: '#E4BB53'
},
data: dataList.map(item => item.trafficVolumeJN),
},
]
} else {
tableChartsOptions.series = [
{
name: "车流量",
type: "line",
selectedMode: false,
itemStyle: {
barBorderRadius: [10, 10, 10, 10], //
// lenged
opacity: 1,
color: '#02A0F8',
},
data: dataList.map(item => item.trafficVolume),
},
]
}
} else {
tableChartsOptions.yAxis[0].name = '车速'
dataList = this.tableData.slice(0,this.tableData.length - 1);
tableChartsOptions.xAxis.data = dataList.map(item => item.time.slice(item.time.length - 2,item.time.length))
if (this.queryForm.direction == '1'){
tableChartsOptions.series = [
{
name: "菏泽",
type: "line",
selectedMode: false,
itemStyle: {
barBorderRadius: [10, 10, 10, 10], //
// lenged
opacity: 1,
color: '#02A0F8',
},
data: dataList.map(item => item.avgSpeedHZ),
},
{
name: "济南",
type: "line",
selectedMode: false,
itemStyle: {
// lenged
barBorderRadius: [10, 10, 10, 10], //
opacity: 1,
color: '#E4BB53'
},
data: dataList.map(item => item.avgSpeedJN),
},
]
} else {
tableChartsOptions.series = [
{
name: "车速",
type: "line",
selectedMode: false,
itemStyle: {
barBorderRadius: [10, 10, 10, 10], //
// lenged
opacity: 1,
color: '#02A0F8',
},
data: dataList.map(item => item.avgSpeed),
},
]
}
}
}
this.myTableChart.setOption(tableChartsOptions,{ notMerge: true });
},
visibleClose(){
this.modelVisible = false
if (this.myChart) {
@ -244,7 +453,6 @@
},
formatTime(timestamp) {
return moment(timestamp).format('HH:mm');
},
realTimeData(){
@ -437,4 +645,56 @@
display: flex;
}
::v-deep .el-table .el-table__header-wrapper th {
background-color: #064258 !important;
color: #00d1ff;
border-color: #064258 !important;
border: 0px !important;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
}
::v-deep .el-table {
border: 0px !important;
background-color: transparent;
font-size: 12px !important;
}
::v-deep .el-table__body-wrapper {
background-color: #064258;
color: #fff;
}
::v-deep .el-table .el-table__cell {
height: 47px;
padding-left: 15px;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
}
::v-deep .el-table tr:hover td {
background: #1b2528 !important;
color: #00d1ff;
height: 47px;
}
::v-deep .el-table tr:nth-child(odd) td {
background-color: #13272f;
border: 0px !important;
}
::v-deep .el-table tr:nth-child(even) td {
border: 0px !important;
}
::v-deep .el-table tr {
background-color: #133242 !important;
border-collapse: 0;
border: 0px !important;
background-color: transparent !important;
}
</style>

84
ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSurvey/comprehensiveQuery/tableCharts.js

@ -0,0 +1,84 @@
import * as echarts from "echarts";
let options = {
tooltip: {
show: true,
trigger: "axis",
},
grid: {
left: "15px",
right: "10px",
top: "50px",
bottom: "0px",
containLabel: true,
},
xAxis: {
data: [],
show: true,
axisTick: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLine: {
lineStyle: {
color: "#2A6278",
},
},
axisLabel: {
align: "center",
rotate: "1",
margin: 10,
textStyle: {
fontSize: 12,
color: "#E5E7E8",
},
},
},
yAxis: [
{
name: "",
nameTextStyle: {
color: "#E5E7E8",
fomtSize: 10,
},
axisLine: {
lineStyle: {
color: "#1C82C5",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#2A6278",
type: "solid",
},
},
axisLabel: {
show: true,
color: "#E5E7E8",
textStyle: {
fontSize: 12,
},
},
axisTick: {
show: false,
},
},
],
legend: {
itemHeight: 8,
itemWidth: 8,
top: "0",
right: "2%",
textStyle: {
color: "#fff",
},
},
series: [
],
};
export default options;
Loading…
Cancel
Save