mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

一类交调站页面修改

develop
lau572 4 months ago
parent
6b3a544a07
commit
a8ce3521dd
3 changed files with 363 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

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

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

@ -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;
Write Preview
Loading…
Cancel
Save