From 2b1f7a47394363e95deb4dfa0f1c67d41e747f7f Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期三, 01 二月 2023 10:56:40 +0800
Subject: [PATCH] Merge branch 'wvp-28181-2.0' into fix-269
---
web_src/src/layout/UiHeader.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 166 insertions(+), 0 deletions(-)
diff --git a/web_src/src/layout/UiHeader.vue b/web_src/src/layout/UiHeader.vue
new file mode 100644
index 0000000..fa9be3e
--- /dev/null
+++ b/web_src/src/layout/UiHeader.vue
@@ -0,0 +1,166 @@
+<template>
+ <div id="UiHeader">
+
+ <el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#001529" text-color="#fff"
+ active-text-color="#1890ff" mode="horizontal">
+
+ <el-menu-item index="/console">鎺у埗鍙�</el-menu-item>
+ <el-menu-item index="/live">鍒嗗睆鐩戞帶</el-menu-item>
+ <el-menu-item index="/deviceList">鍥芥爣璁惧</el-menu-item>
+ <el-menu-item index="/map">鐢靛瓙鍦板浘</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 v-if="editUser" index="/userManager">鐢ㄦ埛绠＄悊</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-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="openDoc">鍦ㄧ嚎鏂囨。</el-menu-item>
+ <el-menu-item >
+ <el-switch v-model="alarmNotify" inactive-text="鎶ヨ淇℃伅鎺ㄩ��" @change="alarmNotifyChannge"></el-switch>
+ </el-menu-item>
+ <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,
+ editUser: this.$cookies.get("session").roleId==1
+ };
+ },
+ created() {
+ console.log(this.$cookies.get("session"))
+ 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鎺ㄩ�丄PI璋冪敤锛屾祻瑙堝櫒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 ;
+}
+.el-menu--popup .el-menu-item .el-switch .el-switch__label {
+ color: white !important;
+}
+#UiHeader .el-switch__label.is-active{
+ color: #409EFF;
+}
+#UiHeader .el-menu-item.is-active {
+ color: #fff!important;
+ background-color: #1890ff!important;
+}
+</style>
--
Gitblit v1.8.0