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.
100 lines
2.3 KiB
100 lines
2.3 KiB
<template>
|
|
<div class="TrafficFlow fl-col">
|
|
<!-- 交通路网状况 -->
|
|
<Traffic class="row_01" />
|
|
<section class="row_02" style="flex-direction: column;">
|
|
<Search />
|
|
<section class="chartPanel">
|
|
<section class="panel">
|
|
<div class="title"><div class="icon"></div>全路段车流量状况分析</div>
|
|
<Flow></Flow>
|
|
</section>
|
|
<section class="panel" style="margin:0px 20px;">
|
|
<div class="title"><div class="icon"></div>车流量时段分析</div>
|
|
<Timer></Timer>
|
|
</section>
|
|
<section class="panel">
|
|
<div class="title"><div class="icon"></div>断面车流量排名</div>
|
|
<Section></Section>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
<section class="row_02">
|
|
<section class="chartPanel">
|
|
<section class="panel" style="margin-right:20px;">
|
|
<div class="title"><div class="icon"></div>全路段双向实时车流量</div>
|
|
<Real></Real>
|
|
</section>
|
|
<section class="panel">
|
|
<div class="title"><div class="icon"></div>收费站出入口实时车流量</div>
|
|
<Fee></Fee>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Search from "./search/index.vue";
|
|
import Traffic from "./components/traffic/index.vue";
|
|
import Flow from "./flow/index.vue";
|
|
import Timer from "./timer/index.vue";
|
|
import Section from "./section/index.vue";
|
|
import Real from "./real/index.vue";
|
|
import Fee from "./fee/index.vue";
|
|
|
|
export default {
|
|
name: "TrafficFlow",
|
|
components: {
|
|
Traffic,
|
|
Search,
|
|
Flow,
|
|
Timer,
|
|
Section,
|
|
Real,
|
|
Fee
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.TrafficFlow {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 14px;
|
|
|
|
.row_01 {
|
|
height: 160px;
|
|
}
|
|
|
|
.row_02 {
|
|
padding:10px;
|
|
background-color: #132d38;
|
|
// --keep-ratio: scaleX(1);
|
|
flex: 1;
|
|
margin-top: 14px;
|
|
display: flex;
|
|
}
|
|
.chartPanel{
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
.panel{
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title{
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
.icon {
|
|
width: 5px;
|
|
height: 16px;
|
|
background-color: #3DE8FF;
|
|
margin-right: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
</style>
|
|
|