<template>
|
<div class="panoramic-view">
|
<div class="top-nav">
|
<div class="logo">
|
<div class="icon"></div>
|
<a class="title">长春全景追踪</a>
|
</div>
|
<el-menu
|
:default-active="actMenuIndex"
|
class="el-menu-demo"
|
mode="horizontal"
|
@select="checkMenu"
|
>
|
<el-menu-item index="0">历史记录查询</el-menu-item>
|
<el-menu-item index="1">位置标定</el-menu-item>
|
<el-menu-item index="2">轨迹图</el-menu-item>
|
<el-menu-item index="3">关联摄像机</el-menu-item>
|
</el-menu>
|
</div>
|
<div class="act-view">
|
<template v-if="actMenuIndex=='0'">
|
<History />
|
</template>
|
<template v-if="actMenuIndex=='1'">
|
<label-mark></label-mark>
|
</template>
|
<template v-if="actMenuIndex=='2'">
|
<trace-plot ref="tracePlot"></trace-plot>
|
</template>
|
<template v-if="actMenuIndex=='3'">
|
<relate-camera></relate-camera>
|
</template>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LabelMark from '../components/LabelMark';
|
import TracePlot from '../components/TracePlot';
|
import RelateCamera from '../components/RelateCamera';
|
import History from '../components/History';
|
export default {
|
components: { LabelMark, TracePlot, RelateCamera, History },
|
data() {
|
return {
|
actMenuIndex: '0',
|
}
|
},
|
methods: {
|
checkMenu(key, keyPath) {
|
this.actMenuIndex = key;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.panoramic-view {
|
min-width: 1399px;
|
overflow: hidden;
|
height: 100%;
|
.top-nav {
|
display: flex;
|
background: rgba(28, 26, 96, 1);
|
.logo {
|
width: 310px;
|
display: flex;
|
align-items: center;
|
.icon {
|
width: 50px;
|
}
|
.title {
|
text-decoration: none;
|
margin-left: 10px;
|
font-size: 17px;
|
color: #fff;
|
letter-spacing: 5px;
|
}
|
}
|
.el-menu--horizontal {
|
border-bottom: 0;
|
background: rgba(28, 26, 96, 1);
|
}
|
.el-menu--horizontal > .el-menu-item {
|
border-bottom: 0;
|
color: #fff;
|
&:hover {
|
color: #fff;
|
background: rgb(24, 35, 182);
|
}
|
}
|
.el-menu--horizontal > .el-menu-item.is-active {
|
//border-bottom: 0;
|
background-color: rgba(61, 73, 225, 1);
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
