<template>
|
<div class="main-view">
|
<div class="view-left">
|
<left-nav :isCollapse="isCollapse" @menuChange="menuChange"></left-nav>
|
</div>
|
<div class="view-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>
|
|
<!-- <el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
|
<el-breadcrumb-item v-if="breadcrumb2">{{
|
breadcrumb2
|
}}</el-breadcrumb-item>
|
</el-breadcrumb> -->
|
|
<div class="container">
|
<!-- 首页 -->
|
<GuideIndex
|
@breadcrumb2Update="breadcrumb2Update"
|
ref="GuideIndex"
|
v-if="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",
|
breadcrumb: "首页",
|
breadcrumb2: "数据统计分析",
|
};
|
},
|
mounted() {
|
// this.actPage = 'guideIndex';
|
},
|
methods: {
|
markNav() {
|
sessionStorage.setItem("actPage", this.actPage);
|
this.menuChange(this.actPage);
|
},
|
toggleCollapse() {
|
this.isCollapse = !this.isCollapse;
|
//通知当前活动页table(如果有) doLayout
|
},
|
menuChange(path) {
|
console.log(path);
|
switch (path) {
|
case "guideIndex":
|
this.breadcrumb = "首页";
|
this.breadcrumb2 = "数据统计分析";
|
break;
|
case "searchForVideoAnalyze":
|
this.breadcrumb = "视频分析检索";
|
this.breadcrumb2 = "";
|
break;
|
case "memberManage":
|
this.breadcrumb = "人员管理";
|
this.breadcrumb2 = "";
|
break;
|
case "taskManage":
|
this.breadcrumb = "任务管理";
|
this.breadcrumb2 = "";
|
break;
|
case "configManage":
|
this.breadcrumb = "配置管理";
|
this.breadcrumb2 = "";
|
break;
|
case "transferMemo":
|
this.breadcrumb = "转储管理";
|
this.breadcrumb2 = "视频转储记录";
|
break;
|
case "transferDeviceManage":
|
this.breadcrumb = "转储管理";
|
this.breadcrumb2 = "转储设备管理";
|
break;
|
case "lkgManage":
|
this.breadcrumb = "转储管理";
|
this.breadcrumb2 = "lkg数据管理";
|
break;
|
case "taskscreen":
|
this.breadcrumb = "可视化大屏";
|
this.breadcrumb2 = "任务大屏";
|
break;
|
case "hiddendangerscreen":
|
this.breadcrumb = "可视化大屏";
|
this.breadcrumb2 = "隐患大屏";
|
break;
|
}
|
|
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;
|
},
|
breadcrumbUpdate(val) {
|
this.breadcrumb = val;
|
},
|
breadcrumb2Update(val) {
|
this.breadcrumb2 = val;
|
},
|
},
|
};
|
</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 {
|
height: 100%;
|
display: flex;
|
background: #f0f2f5;
|
.view-left {
|
z-index: 2;
|
box-shadow: 4px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
}
|
.view-right {
|
flex: 1;
|
overflow: hidden;
|
.top {
|
position: relative;
|
.collapse-trigger {
|
position: absolute;
|
left: 20px;
|
top: 23px;
|
font-size: 20px;
|
cursor: pointer;
|
}
|
}
|
.el-breadcrumb {
|
margin: 25px 0 25px 30px;
|
}
|
.container {
|
margin: 0 0 0 30px;
|
padding: 30px 0;
|
|
padding-right: 30px;
|
box-sizing: border-box;
|
height: calc(100vh - 58px);
|
overflow-y: auto;
|
}
|
}
|
}
|
</style>
|
|
<style>
|
* {
|
box-sizing: border-box;
|
}
|
</style>
|
