Browse Source
# Conflicts: # web_src/src/components/UiHeader.vue # web_src/src/components/devicePosition.vue # web_src/src/components/live.vue # web_src/src/router/index.jspull/446/head
648540858
3 years ago
17 changed files with 2317 additions and 2129 deletions
@ -1,143 +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="/devicePosition">电子地图</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 index="/test">设备树</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