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.
129 lines
2.4 KiB
129 lines
2.4 KiB
<template>
|
|
<div class="TrafficFlow">
|
|
<section class="content">
|
|
<Railway class="content-l" />
|
|
<div class="content-m">
|
|
<RailWayDay class="content-m-t" />
|
|
<DayTotal class="content-m-t" />
|
|
</div>
|
|
<div class="content-m">
|
|
<EventSource class="content-m-t" />
|
|
<DailyDisposal class="content-m-t" />
|
|
</div>
|
|
<div class="content-m" style="margin-right: 0">
|
|
<MonthStatistice class="content-m-t" />
|
|
<TypeAnalysis class="content-m-t" />
|
|
</div>
|
|
</section>
|
|
<section class="foot">
|
|
<EventQuery class="foot-w" />
|
|
</section>
|
|
</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";
|
|
import MonthStatistice from "./components/monthStatistics/index.vue";
|
|
import EventQuery from "./components/eventQuery";
|
|
|
|
export default {
|
|
name: "EventDetection",
|
|
components: {
|
|
Railway,
|
|
RailWayDay,
|
|
DayTotal,
|
|
EventSource,
|
|
DailyDisposal,
|
|
TypeAnalysis,
|
|
MonthStatistice,
|
|
EventQuery,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.TrafficFlow {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 6;
|
|
color: white;
|
|
|
|
.head {
|
|
width: 98%;
|
|
margin: auto;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.content {
|
|
width: 98%;
|
|
margin: auto;
|
|
display: flex;
|
|
flex: 1;
|
|
pointer-events: none;
|
|
margin-top: 19px;
|
|
|
|
> div {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.content-l {
|
|
width: calc(100% / 4 - 25px * 3);
|
|
min-width: 475px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.content-m {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
width: calc(100% / 4);
|
|
margin-right: 15px;
|
|
|
|
.content-m-t {
|
|
width: 100%;
|
|
height: 240px;
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.content-r {
|
|
width: 49.4%;
|
|
}
|
|
}
|
|
|
|
.foot {
|
|
width: 98%;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
pointer-events: none;
|
|
margin-top: 0px;
|
|
|
|
> div {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.foot-w {
|
|
width: 100%;
|
|
}
|
|
|
|
.foot-l {
|
|
width: 726px;
|
|
}
|
|
|
|
.foot-m {
|
|
width: 613px;
|
|
}
|
|
|
|
.foot-r {
|
|
width: 493px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|