|
|
@ -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> |
|
|
|