xiaoxie
3 years ago
18 changed files with 2271 additions and 2059 deletions
@ -1,141 +0,0 @@ |
|||||
<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="/">控制台</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="报警信息推送" style="display: block float: right" @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 './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> |
|
||||
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue