<template>
|
<div class="main-view">
|
<div class="view-left">
|
<left-nav :isCollapse="isCollapse" @menuChange="menuChange"></left-nav>
|
</div>
|
<div class="right">
|
<div class="top">
|
<div class="collapse-trigger" @click="toggleCollapse">
|
<i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
|
</div>
|
<top-nav></top-nav>
|
</div>
|
<div class="container">
|
<!-- 首页 -->
|
<GuideIndex ref="GuideIndex" v-show="actPage=='guideIndex'"></GuideIndex>
|
|
<searchForVideoAnalyze v-if="actPage=='searchForVideoAnalyze'"></searchForVideoAnalyze>
|
<memberManage v-if="actPage=='memberManage'"></memberManage>
|
<taskManage v-if="actPage=='taskManage'"></taskManage>
|
<transferMemo v-if="actPage=='transferMemo'"></transferMemo>
|
<transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage>
|
<configManage v-if="actPage=='configManage'"></configManage>
|
<lkg v-if="actPage=='lkgManage'"></lkg>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Lkg from '../components/lkgManage'
|
import TopNav from '../components/topNav';
|
import LeftNav from '../components/leftNav';
|
import GuideIndex from '../components/guideIndex';
|
import TaskManage from '../components/taskManage';
|
import TransferMemo from '../components/transferMemo';
|
import ConfigManage from '../components/configManage';
|
import MemberManage from '../components/memberManage';
|
import TransferDeviceManage from '../components/transferDeviceManage';
|
import SearchForVideoAnalyze from '../components/searchForVideoAnalyze';
|
|
export default {
|
components: {
|
Lkg,
|
LeftNav,
|
TopNav,
|
SearchForVideoAnalyze,
|
MemberManage,
|
TaskManage,
|
TransferMemo,
|
TransferDeviceManage,
|
ConfigManage,
|
GuideIndex
|
},
|
data() {
|
return {
|
isCollapse: false,
|
actPage: 'guideIndex',
|
}
|
},
|
mounted() {
|
// this.actPage = 'guideIndex';
|
},
|
methods: {
|
markNav() {
|
sessionStorage.setItem('actPage', this.actPage);
|
this.menuChange(this.actPage);
|
},
|
toggleCollapse() {
|
this.isCollapse = !this.isCollapse;
|
//通知当前活动页table(如果有) doLayout
|
},
|
menuChange(path) {
|
if (path=='guideIndex') {
|
this.$refs.GuideIndex.refreshShoubiNum()
|
}
|
if (path == 'taskscreen') {
|
//window.location.href = window.location.href+'taskscreen/index.html'
|
window.open(window.location.href + 'taskscreen/index.html', '_blank')
|
} else if (path == 'hiddendangerscreen') {
|
//window.location.href = window.location.href+'hiddendangerscreen/index.html'
|
window.open(window.location.href + 'hiddendangerscreen/index.html', '_blank')
|
}
|
this.actPage = path;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.flex-box {
|
display: flex;
|
> label {
|
padding-right: 10px;
|
}
|
}
|
.flex-end {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.el-button--primary.is-disabled,
|
.el-button--primary.is-disabled:hover,
|
.el-button--primary.is-disabled:focus,
|
.el-button--primary.is-disabled:active {
|
color: #ffffff;
|
background-color: #9eb4f0 !important;
|
border-color: #9eb4f0 !important;
|
}
|
.table-area {
|
margin-bottom: 20px;
|
.el-table {
|
border: 1px solid #ddd;
|
thead {
|
color: #111 !important;
|
th {
|
background: #f4f4f4;
|
}
|
}
|
.operation {
|
span {
|
font-size: 14px;
|
color: #1a99ff;
|
padding-right: 10px;
|
}
|
}
|
}
|
}
|
.el-table.thbg {
|
border: 1px solid #dedede;
|
margin: 10px 0;
|
th {
|
background: #f5f5f5;
|
color: #333;
|
}
|
.operation {
|
cursor: pointer;
|
display: flex;
|
span {
|
padding: 0 3px;
|
color: #0096fa;
|
}
|
i[class^="el-icon"] {
|
padding: 3px;
|
font-size: 16px;
|
color: #0096fa;
|
}
|
}
|
}
|
.main-view {
|
display: flex;
|
background: #f0f2f5;
|
.view-left {
|
z-index: 2;
|
box-shadow: 4px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
}
|
.right {
|
// flex: 1;
|
width: 100%;
|
|
.top {
|
position: relative;
|
.collapse-trigger {
|
position: absolute;
|
left: 20px;
|
top: 23px;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
}
|
.container {
|
background: #F4F6F9;
|
box-sizing: border-box;
|
height: calc(100vh - 84px);
|
overflow-y: auto;
|
}
|
}
|
}
|
</style>
|
