济菏高速业务端
 
 
 
 
 

91 lines
2.0 KiB

<template>
<div class="TrafficFlow">
<section class="row_01">
<Railway class="content-l" />
<div class="content_r_g">
<RailWayDay class="content_r_unit" />
<DayTotal class="content_r_unit" />
</div>
<div class="content_r_g">
<EventSource class="content_r_unit" />
<DailyDisposal class="content_r_unit" />
</div>
<div class="content_r_g" style="margin-right: 0">
<MonthStatistice class="content_r_unit" />
<TypeAnalysis class="content_r_unit" />
</div>
</section>
<EventQuery class="row_02" />
</div>
</template>
<script>
import Railway from "./components/railway/index.vue";
import RailWayDay from "./components/railwayDay/index.vue";
import DayTotal from "./components/dayTotal/index.vue";
import EventSource from "./components/eventSource/index.vue";
import DailyDisposal from "./components/dailyDisposal/index.vue";
import TypeAnalysis from "./components/typeAnalysis/index.vue";
import MonthStatistice from "./components/monthStatistics/index.vue";
import EventQuery from "./components/eventQuery/index.vue";
export default {
name: "EventDetection",
components: {
Railway,
RailWayDay,
DayTotal,
EventSource,
DailyDisposal,
TypeAnalysis,
MonthStatistice,
EventQuery,
},
};
</script>
<style lang="scss" scoped>
.TrafficFlow {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
padding:8px 16px 16px;
.row_01 {
flex-basis: 55%; margin-bottom: 15px;
display: flex; align-items: stretch;
pointer-events: none;
> div {
pointer-events: auto;
}
.content-l {
flex-basis: 25%;
margin-right: 15px;
}
.content_r_g {
display: flex;
flex-direction: column;
flex-basis: 25%;
margin-right: 15px;
.content_r_unit {
width: 100%;
flex-basis: 50%;
margin-bottom: 15px;
&:last-child{ margin-bottom: 0;}
}
}
}
.row_02 {
flex: 1;
// pointer-events: none;
}
}
</style>