济菏高速业务端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

349 lines
12 KiB

<template>
<div class="dashboard-editor-container">
<el-row style="margin-bottom: 5px;">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-col :span="5">
<el-select @change="getAnalysisData" v-model="queryParams.tunnelId" placeholder="请选择隧道" size="small">
<el-option
v-for="item in tunnelList"
:key="item.tunnelId"
:label="item.tunnelName"
:value="item.tunnelId"
/>
</el-select>
</el-col>
<el-col :span="10">
<el-radio-group v-model="queryParams.holes" @change="getAnalysisData">
<el-radio style="margin-right: 5px;" border key="" label="">全部</el-radio>
<el-radio style="margin-right: 5px;" border key="1" label="1">上行</el-radio>
<el-radio border key="2" label="2">下行</el-radio>
</el-radio-group>
</el-col>
</el-form>
</el-row>
<el-row :gutter="16">
<el-col :lg="12">
<div class="card-style">
<div class="card-title">
<div style="float: left;padding-top: 10px;">
<span>年度车流量统计</span>
</div>
</div>
<div class="card-line"></div>
<div class="chart-wrapper" style="height: calc(100% - 50px);">
<bar-chart v-bind:yearData="yearData" />
</div>
</div>
</el-col>
<el-col :lg="12">
<div class="card-style">
<div class="card-title">
<div style="float: left;padding-top: 10px;">
<span>季度车流量统计</span>
</div>
<div style="float: right;margin-right: 10px;">
<el-date-picker type="year" value-format="yyyy-MM-dd HH:mm:ss" v-model="datePickerJd" placeholder="请选择年份" key='year'>
</el-date-picker>&nbsp;
<el-button type="primary" @click="examTimesClick('quarter')">确定</el-button>
</div>
</div>
<div class="card-line"></div>
<div class="chart-wrapper" style="height: calc(100% - 50px);">
<jd-chart v-bind:jdData="jdData" />
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :lg="12">
<div class="card-style">
<div class="card-title">
<div style="float: left;padding-top: 10px;">
<span>月度车流量统计</span>
</div>
<div style="float: right;margin-right: 10px;">
<el-date-picker type="year" value-format="yyyy-MM-dd HH:mm:ss" v-model="datePickerMonth" placeholder="请选择年份">
</el-date-picker>&nbsp;
<el-button type="primary" @click="examTimesClick('month')">确定</el-button>
</div>
</div>
<div class="card-line"></div>
<div class="chart-wrapper" style="height: calc(100% - 50px);">
<month-chart v-bind:monthData="monthData" :datePickerMonth="datePickerMonth"/>
</div>
</div>
</el-col>
<el-col :lg="12">
<div class="card-style">
<div class="card-title">
<div style="float: left;padding-top: 10px;">
<span>日车流量统计</span>
</div>
<div style="float: right;margin-right: 10px;">
<el-date-picker type="month" value-format="yyyy-MM-dd HH:mm:ss" v-model="datePickerDay" placeholder="请选择日期">
</el-date-picker>&nbsp;
<el-button type="primary" @click="examTimesClick('day')">确定</el-button>
</div>
</div>
<div class="card-line"></div>
<div class="chart-wrapper" style="height: calc(100% - 50px);">
<day-chart v-bind:dayData="dayData" :datePickerDay="datePickerDay"/>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :lg="12">
<div class="card-style">
<div class="card-title">
<div style="float: left;padding-top: 10px;">
<span>日内车流量统计</span>
</div>
<div style="float: right;margin-right: 10px;">
<el-date-picker v-model="datePickerHour" placeholder="请选择日期" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>&nbsp;
<el-button type="primary" @click="examTimesClick('hour')">确定</el-button>
</div>
</div>
<div class="card-line"></div>
<div class="chart-wrapper" style="height: calc(100% - 50px);">
<oneday-chart v-bind:dayData="onedayData"/>
</div>
</div>
</el-col>
<el-col :lg="12">
<div class="card-style">
<div class="card-title">
<div style="float: left;padding-top: 10px;">
<span>时段车流量统计</span>
</div>
<div style="float: right;margin-right: 10px;">
<el-date-picker
v-model="timePickerDay"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
unlink-panels
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
></el-date-picker>
<el-button type="primary" @click="examTimesClick('time')">确定</el-button>
</div>
</div>
<div class="card-line"></div>
<div class="chart-wrapper" style="height: calc(100% - 50px);">
<time-chart v-bind:dayData="timeData" :timePickerDay="timePickerDay"/>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { analysisData ,analysisDataByTime } from "@/api/system/trafficStatistics/api.js";
import { listTunnels } from "@/api/equipment/tunnel/api.js";
import LineChart from '../../tunnel/trafficFlowAnalysis/LineChart';
import BarChart from '../../tunnel/trafficFlowAnalysis/BarChart';
import MonthChart from '../../tunnel/trafficFlowAnalysis/MonthChart';
import DayChart from '../../tunnel/trafficFlowAnalysis/DayChart';
import OnedayChart from '../../tunnel/trafficFlowAnalysis/OnedayChart';
import JdChart from '../../tunnel/trafficFlowAnalysis/JdChart';
import TimeChart from '../../tunnel/trafficFlowAnalysis/TimeChart';
import moment from "moment";
export default {
name: "TrafficFlowAnalysis",
components: {
LineChart,
BarChart,
MonthChart,
DayChart,
JdChart,
OnedayChart,
TimeChart
},
data() {
return {
queryParams:{
tunnelId:null,
holes:""
},
tunnelList:[],
yearData:[],
monthData:[],
dayData:[],
jdData:[],
onedayData:[],
timeData:[],
datePickerJd:new Date(),
datePickerMonth:new Date(),
datePickerDay:new Date(),
timePickerDay:[],
datePickerHour:'',
pickerOptions:{
onPick: (obj) => {
this.pickerMinDate = new Date(obj.minDate).getTime();
},
disabledDate:(time)=> {
if (this.pickerMinDate) {
const day1 = 366 * 24 * 3600 * 1000
let maxTime = this.pickerMinDate + day1
let minTime = this.pickerMinDate - day1
return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()+0 * 24 * 3600 * 1000
}else{
return time.getTime() > Date.now()+0 * 24 * 3600 * 1000
}
},
}
};
},
created() {
this.getTunnelList();
},
methods: {
// 获取分析数据
getAnalysisData(){
this.datePickerJd = new Date()
this.datePickerMonth= new Date()
this.datePickerDay = new Date()
this.timePickerDay = []
this.datePickerHour = new Date()
let times = moment(new Date()).format("YYYY-MM-DD")
let yesTime = Date.parse(new Date())-172800000
let yesTimes = moment(new Date(yesTime)).format("YYYY-MM-DD")
this.timePickerDay.push(yesTimes)
this.timePickerDay.push(times)
analysisData(this.queryParams.tunnelId,this.queryParams.holes).then(response => {
if(response.code == 200){
this.yearData = response.data.yearData;
this.monthData = response.data.monthData;
// 1个月的天
this.dayData = response.data.dayData;
this.jdData = response.data.quarterData;
// 1天的时段
this.onedayData = response.data.hourData;
// 多个天的时段
this.timeData = response.data.timeData;
}
});
},
// 获取隧道
getTunnelList(){
listTunnels().then(response => {
this.tunnelList = response.rows
this.queryParams.tunnelId = this.tunnelList[0].tunnelId;
this.getAnalysisData();
});
},
//
formatDate(time) {
var date=new Date(parseInt(time));
var year=date.getFullYear();
var mon = date.getMonth()+1;
var day = date.getDate();
return year+'/'+mon+'/'+day;
},
// 日期变更
examTimesClick(key){
// debugger
// 季度
var dateRange = [];
if(key == 'quarter'){
dateRange = [this.datePickerJd,new Date()]
}
// 月度
else if(key == 'month'){
dateRange = [this.datePickerMonth,new Date()]
}
// 天
else if(key == 'day'){
dateRange = [this.datePickerDay,new Date()]
}
// 时段
else if(key == 'time'){
dateRange.push(this.timePickerDay[0]+" 00:00:00")
dateRange.push(this.timePickerDay[1]+" 23:59:59")
// dateRange = this.timePickerDay
console.log(dateRange,"dateRange")
}
else if(key == 'hour'){
dateRange = [this.datePickerHour,new Date()]
}
var json = {
eqDirection:key,
tunnelId:this.queryParams.tunnelId,
holes:this.queryParams.holes
}
analysisDataByTime(this.addDateRange(json, dateRange)).then(response => {
if(response.code == 200){
if(key == 'quarter'){
this.jdData = response.data;
}
// 月度
else if(key == 'month'){
this.monthData = response.data;
}
// 天
else if(key == 'day'){
this.dayData = response.data;
}
// 时段
else if(key == 'time'){
this.timeData = response.data;
}
else if(key == 'hour'){
this.onedayData = response.data;
}
}
});
}
}
};
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 16px;
padding-top: 5px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 16px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
.card-style{
background-color: #fff;
margin-bottom: 2vh;
min-height: 200px;
}
.card-title{
padding-left: 20px;
padding-right: 10px;
height: 50px;
padding-top: 5px;
font-size:17px;
}
.card-line{
border-top: 1px #DDDDDD solid;
margin-left: 20px;
margin-right: 20px;
}
</style>