1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套
2.全局页面样式优化，如滚动条、标题栏等
This commit is contained in:
xiaoxie
151
web_src/src/layout/UiHeader.vue
Normal file
151
web_src/src/layout/UiHeader.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div id="UiHeader">
|
||||
<el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#545c64" text-color="#fff"
|
||||
active-text-color="#ffd04b" mode="horizontal">
|
||||
<el-menu-item index="/control">控制台</el-menu-item>
|
||||
<el-menu-item index="/live">实时监控</el-menu-item>
|
||||
<el-menu-item index="/deviceList">国标设备</el-menu-item>
|
||||
<el-menu-item index="/pushVideoList">推流列表</el-menu-item>
|
||||
<el-menu-item index="/streamProxyList">拉流代理</el-menu-item>
|
||||
<el-menu-item index="/cloudRecord">云端录像</el-menu-item>
|
||||
<el-menu-item index="/mediaServerManger">节点管理</el-menu-item>
|
||||
<el-menu-item index="/parentPlatformList/15/1">国标级联</el-menu-item>
|
||||
<el-menu-item @click="openDoc">在线文档</el-menu-item>
|
||||
<!-- <el-submenu index="/setting">-->
|
||||
<!-- <template slot="title">系统设置</template>-->
|
||||
<!-- <el-menu-item index="/setting/web">WEB服务</el-menu-item>-->
|
||||
<!-- <el-menu-item index="/setting/sip">国标服务</el-menu-item>-->
|
||||
<!-- <el-menu-item index="/setting/media">媒体服务</el-menu-item>-->
|
||||
<!-- </el-submenu>-->
|
||||
<el-switch v-model="alarmNotify" active-text="报警信息推送" @change="alarmNotifyChannge"></el-switch>
|
||||
<!-- <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>-->
|
||||
<el-submenu index="" style="float: right;">
|
||||
<template slot="title">欢迎，{{ this.$cookies.get("session").username }}</template>
|
||||
<el-menu-item @click="changePassword">修改密码</el-menu-item>
|
||||
<el-menu-item @click="loginout">注销</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
<changePasswordDialog ref="changePasswordDialog"></changePasswordDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import changePasswordDialog from '../components/dialog/changePassword.vue'
|
||||
|
||||
export default {
|
||||
name: "UiHeader",
|
||||
components: {Notification, changePasswordDialog},
|
||||
data() {
|
||||
return {
|
||||
alarmNotify: false,
|
||||
sseSource: null,
|
||||
activeIndex: this.$route.path,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.$route.path.startsWith("/channelList")) {
|
||||
this.activeIndex = "/deviceList"
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
||||
// window.addEventListener('unload', e => this.unloadHandler(e))
|
||||
this.alarmNotify = this.getAlarmSwitchStatus() === "true";
|
||||
this.sseControl();
|
||||
},
|
||||
methods: {
|
||||
loginout() {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: "/api/user/logout"
|
||||
}).then((res) => {
|
||||
// 删除cookie，回到登录页面
|
||||
this.$cookies.remove("session");
|
||||
this.$router.push('/login');
|
||||
this.sseSource.close();
|
||||
}).catch((error) => {
|
||||
console.error("登出失败")
|
||||
console.error(error)
|
||||
});
|
||||
},
|
||||
changePassword() {
|
||||
this.$refs.changePasswordDialog.openDialog()
|
||||
},
|
||||
openDoc() {
|
||||
console.log(process.env.BASE_API)
|
||||
window.open(!!process.env.BASE_API ? process.env.BASE_API + "/doc.html" : "/doc.html")
|
||||
},
|
||||
beforeunloadHandler() {
|
||||
this.sseSource.close();
|
||||
},
|
||||
alarmNotifyChannge() {
|
||||
this.setAlarmSwitchStatus()
|
||||
this.sseControl()
|
||||
},
|
||||
sseControl() {
|
||||
let that = this;
|
||||
if (this.alarmNotify) {
|
||||
console.log("申请SSE推送API调用，浏览器ID: " + this.$browserId);
|
||||
this.sseSource = new EventSource('/api/emit?browserId=' + this.$browserId);
|
||||
this.sseSource.addEventListener('message', function (evt) {
|
||||
that.$notify({
|
||||
title: '收到报警信息',
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: evt.data,
|
||||
type: 'warning'
|
||||
});
|
||||
console.log("收到信息：" + evt.data);
|
||||
});
|
||||
this.sseSource.addEventListener('open', function (e) {
|
||||
console.log("SSE连接打开.");
|
||||
}, false);
|
||||
this.sseSource.addEventListener('error', function (e) {
|
||||
if (e.target.readyState == EventSource.CLOSED) {
|
||||
console.log("SSE连接关闭");
|
||||
} else {
|
||||
console.log(e.target.readyState);
|
||||
}
|
||||
}, false);
|
||||
} else {
|
||||
if (this.sseSource != null) {
|
||||
this.sseSource.removeEventListener('open', null);
|
||||
this.sseSource.removeEventListener('message', null);
|
||||
this.sseSource.removeEventListener('error', null);
|
||||
this.sseSource.close();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
getAlarmSwitchStatus() {
|
||||
if (localStorage.getItem("alarmSwitchStatus") == null) {
|
||||
localStorage.setItem("alarmSwitchStatus", false);
|
||||
}
|
||||
return localStorage.getItem("alarmSwitchStatus");
|
||||
},
|
||||
setAlarmSwitchStatus() {
|
||||
localStorage.setItem("alarmSwitchStatus", this.alarmNotify);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
|
||||
if (this.sseSource != null) {
|
||||
this.sseSource.removeEventListener('open', null);
|
||||
this.sseSource.removeEventListener('message', null);
|
||||
this.sseSource.removeEventListener('error', null);
|
||||
this.sseSource.close();
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
#UiHeader .el-switch__label {
|
||||
color: white;
|
||||
}
|
||||
#UiHeader .el-switch__label.is-active{
|
||||
color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
90
web_src/src/layout/index.vue
Normal file
90
web_src/src/layout/index.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<el-container style="height: 100%">
|
||||
<el-header>
|
||||
<ui-header/>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-container>
|
||||
<transition name="fade">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</el-container>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiHeader from "./UiHeader.vue";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
uiHeader
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 4px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #c8c8c8;
|
||||
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
/*定义标题栏*/
|
||||
.page-header {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page-header-btn {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.el-main {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fade-enter {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-leave-to {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity .5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-to,
|
||||
.fade-leave {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user