Merge pull request #443 from hotcoffie/wvp-28181-2.0

前端路由组件化，同时界面样式美化微调

web_src/src/components/CloudRecord.vue

@@ -1,15 +1,8 @@
 <template>
-	<div id="app">
+	<div id="app" style="width: 100%">
-		<el-container>
+    <div class="page-header">
-			<el-header>
+      <div class="page-title">云端录像</div>
-				<uiHeader></uiHeader>
+      <div class="page-header-btn">
-			</el-header>
-			<el-main>
-        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-          <span v-if="!recordDetail" >云端录像</span>
-          <el-page-header v-if="recordDetail"  @back="backToList" content="云端录像">
-          </el-page-header>
-          <div style="position: absolute; right: 5rem; top: 0.3rem;">
         节点选择:
         <el-select size="mini" @change="chooseMediaChange" style="width: 16rem; margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" :disabled="recordDetail">
           <el-option
@@ -19,8 +12,6 @@
             :value="item.id">
           </el-option>
         </el-select>
-          </div>
-          <div style="position: absolute; right: 1rem; top: 0.3rem;">
         <el-button v-if="!recordDetail" icon="el-icon-refresh-right" circle size="mini" :loading="loading" @click="getRecordList()"></el-button>
       </div>
     </div>
@@ -55,13 +46,12 @@
       </el-pagination>
     </div>
     <cloud-record-detail ref="cloudRecordDetail" v-if="recordDetail" :recordFile="chooseRecord" :mediaServerId="mediaServerId" :mediaServerPath="mediaServerPath" ></cloud-record-detail>
-			</el-main>
+
-		</el-container>
   </div>
 </template>
 
 <script>
-	import uiHeader from './UiHeader.vue'
+	import uiHeader from '../layout/UiHeader.vue'
 	import cloudRecordDetail from './CloudRecordDetail.vue'
   import MediaServer from './service/MediaServer'
 	export default {

web_src/src/components/CloudRecordDetail.vue

@@ -104,7 +104,7 @@
 
 <script>
   // TODO 根据查询的时间列表设置滑轨的最大值与最小值，
-	import uiHeader from './UiHeader.vue'
+	import uiHeader from '../layout/UiHeader.vue'
 	import player from './dialog/easyPlayer.vue'
   import moment  from 'moment'
 	export default {

web_src/src/components/DeviceList.vue

@@ -1,14 +1,10 @@
 <template>
-	<div id="app">
+  <div id="app" style="width: 100%">
-		<el-container>
+    <div class="page-header">
-			<el-header>
+      <div class="page-title">设备列表</div>
-				<uiHeader></uiHeader>
+      <div class="page-header-btn">
-			</el-header>
+        <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"
-			<el-main>
+                   @click="getDeviceList()"></el-button>
-				<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-					<span style="font-size: 1rem; font-weight: bold;">设备列表</span>
-					<div style="position: absolute; right: 1rem; top: 0.3rem;">
-						<el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading" @click="getDeviceList()"></el-button>
       </div>
     </div>
     <!-- <devicePlayer ref="devicePlayer"></devicePlayer> -->
@@ -57,10 +53,16 @@
 
       <el-table-column label="操作" width="450" align="center" fixed="right">
         <template slot-scope="scope">
-              <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)" @mouseover="getTooltipContent(scope.row.deviceId)">刷新</el-button>
+          <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)"
+                     @mouseover="getTooltipContent(scope.row.deviceId)">刷新
+          </el-button>
           <el-button-group>
-                <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"  type="primary" @click="showChannelList(scope.row)">通道</el-button>
+            <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"
-                <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0"  type="primary" @click="showDevicePosition(scope.row)">定位</el-button>
+                       type="primary" @click="showChannelList(scope.row)">通道
+            </el-button>
+            <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary"
+                       @click="showDevicePosition(scope.row)">定位
+            </el-button>
             <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button>
             <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
           </el-button-group>
@@ -79,15 +81,14 @@
     </el-pagination>
     <deviceEdit ref="deviceEdit"></deviceEdit>
     <syncChannelProgress ref="syncChannelProgress"></syncChannelProgress>
-			</el-main>
-		</el-container>
   </div>
 </template>
 
 <script>
-	import uiHeader from './UiHeader.vue'
+import uiHeader from '../layout/UiHeader.vue'
 import deviceEdit from './dialog/deviceEdit.vue'
 import syncChannelProgress from './dialog/SyncChannelProgress.vue'
+
 export default {
   name: 'app',
   components: {

web_src/src/components/MediaServerManger.vue

@@ -1,16 +1,11 @@
 <template>
-	<div id="mediaServerManger">
+	<div id="mediaServerManger" style="width: 100%">
-		<el-container>
+    <div class="page-header">
-			<el-header>
+      <div class="page-title">节点列表</div>
-				<uiHeader></uiHeader>
+      <div class="page-header-btn">
-			</el-header>
-			<el-main id="msMain">
-        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-          <span style="font-size: 1rem; font-weight: bold;">节点列表</span>
-        </div>
-        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
         <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加节点</el-button>
       </div>
+    </div>
 
     <el-row :gutter="12">
       <el-col :span="num" v-for="item in mediaServerList" :key="item.id">
@@ -33,13 +28,11 @@
       </el-col>
     </el-row>
     <mediaServerEdit ref="mediaServerEdit" ></mediaServerEdit>
-			</el-main>
-		</el-container>
 	</div>
 </template>
 
 <script>
-	import uiHeader from './UiHeader.vue'
+	import uiHeader from '../layout/UiHeader.vue'
   import MediaServer from './service/MediaServer'
   import mediaServerEdit from './dialog/MediaServerEdit'
 	export default {

web_src/src/components/ParentPlatformList.vue

@@ -1,20 +1,16 @@
 <template>
-  <div id="app">
+  <div id="app" style="width: 100%">
-    <el-container>
+    <div class="page-header">
-      <el-header>
+      <div class="page-title">上级平台列表</div>
-        <uiHeader></uiHeader>
+      <div class="page-header-btn">
-      </el-header>
-      <el-main>
-        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-          <span style="font-size: 1rem; font-weight: bold;">上级平台列表</span>
-        </div>
-        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
         <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button>
       </div>
+    </div>
+
     <!--设备列表-->
     <el-table :data="platformList" border style="width: 100%" :height="winHeight">
       <el-table-column prop="name" label="名称" align="center"></el-table-column>
-          <el-table-column prop="serverGBId" label="平台编号" width="180" align="center"></el-table-column>
+      <el-table-column prop="serverGBId" label="平台编号" align="center"></el-table-column>
       <el-table-column label="是否启用" width="120" align="center">
         <template slot-scope="scope">
           <div slot="reference" class="name-wrapper">
@@ -72,14 +68,12 @@
     </el-pagination>
     <platformEdit ref="platformEdit" ></platformEdit>
     <chooseChannelDialog ref="chooseChannelDialog" ></chooseChannelDialog>
-      </el-main>
-    </el-container>
   </div>
 </template>
 
 <script>
 import platformEdit from './dialog/platformEdit.vue'
-import uiHeader from './UiHeader.vue'
+import uiHeader from '../layout/UiHeader.vue'
 import chooseChannelDialog from './dialog/chooseChannel.vue'
 export default {
   name: 'app',

web_src/src/components/PushVideoList.vue

@@ -1,18 +1,14 @@
 <template>
-	<div id="pushVideoList">
+  <div id="pushVideoList" style="width: 100%">
-		<el-container>
+    <div class="page-header">
-			<el-header>
+      <div class="page-title">推流列表</div>
-				<uiHeader></uiHeader>
+      <div class="page-header-btn">
-			</el-header>
+        搜索:
-			<el-main>
+        <el-input @input="getPushList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
-				<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
+                  prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
-					<span style="font-size: 1rem; font-weight: bold;">推流列表</span>
+        流媒体:
-				</div>
+        <el-select size="mini" @change="getPushList" style="margin-right: 1rem;" v-model="mediaServerId"
-        <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
+                   placeholder="请选择" default-first-option>
-
-          搜索: <el-input @input="getPushList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
-
-          流媒体: <el-select size="mini" @change="getPushList" style="margin-right: 1rem;" v-model="mediaServerId" placeholder="请选择" default-first-option>
           <el-option label="全部" value=""></el-option>
           <el-option
             v-for="item in mediaServerList"
@@ -21,20 +17,29 @@
             :value="item.id">
           </el-option>
         </el-select>
-          推流状态: <el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" placeholder="请选择" default-first-option>
+        推流状态:
+        <el-select size="mini" style="margin-right: 1rem;" @change="getPushList" v-model="pushing" placeholder="请选择"
+                   default-first-option>
           <el-option label="全部" value=""></el-option>
           <el-option label="推流进行中" value="true"></el-option>
           <el-option label="推流未进行" value="false"></el-option>
         </el-select>
-          <el-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">通道导入</el-button>
+        <el-button icon="el-icon-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">
-          <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary" >
+          通道导入
-            <a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip" download='推流通道导入.zip' >下载模板</a>
         </el-button>
-          <el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;" :disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除</el-button>
+        <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary">
+          <a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip"
+             download='推流通道导入.zip'>下载模板</a>
+        </el-button>
+        <el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;"
+                   :disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除
+        </el-button>
+      </div>
     </div>
     <devicePlayer ref="devicePlayer"></devicePlayer>
     <addStreamTOGB ref="addStreamTOGB"></addStreamTOGB>
-				<el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight" @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
+    <el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight"
+              @selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
       <el-table-column align="center" type="selection" :reserve-selection="true" width="55">
       </el-table-column>
       <el-table-column prop="name" label="名称" align="center">
@@ -63,10 +68,17 @@
       <el-table-column label="操作" width="360" align="center" fixed="right">
         <template slot-scope="scope">
           <el-button-group>
-								<el-button size="mini" icon="el-icon-video-play" v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status" @click="playPush(scope.row)">播放</el-button>
+            <el-button size="mini" icon="el-icon-video-play"
+                       v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status"
+                       @click="playPush(scope.row)">播放
+            </el-button>
             <el-button size="mini" icon="el-icon-delete" type="danger" @click="stopPush(scope.row)">移除</el-button>
-								<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId" @click="addToGB(scope.row)">加入国标</el-button>
+            <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId"
-								<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId" @click="removeFromGB(scope.row)">移出国标</el-button>
+                       @click="addToGB(scope.row)">加入国标
+            </el-button>
+            <el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId"
+                       @click="removeFromGB(scope.row)">移出国标
+            </el-button>
           </el-button-group>
         </template>
       </el-table-column>
@@ -83,8 +95,6 @@
     </el-pagination>
     <streamProxyEdit ref="streamProxyEdit"></streamProxyEdit>
     <importChannel ref="importChannel"></importChannel>
-			</el-main>
-		</el-container>
   </div>
 </template>
 
@@ -92,9 +102,10 @@
 import streamProxyEdit from './dialog/StreamProxyEdit.vue'
 import devicePlayer from './dialog/devicePlayer.vue'
 import addStreamTOGB from './dialog/addStreamTOGB.vue'
-	import uiHeader from './UiHeader.vue'
+import uiHeader from '../layout/UiHeader.vue'
 import importChannel from './dialog/importChannel.vue'
 import MediaServer from './service/MediaServer'
+
 export default {
   name: 'pushVideoList',
   components: {
@@ -123,8 +134,7 @@
       getDeviceListLoading: false
     };
   },
-		computed: {
+  computed: {},
-		},
   mounted() {
     this.initData();
     this.updateLooper = setInterval(this.getPushList, 2000);
@@ -210,7 +220,11 @@
       });
     },
     addToGB: function (row) {
-				this.$refs.addStreamTOGB.openDialog({app: row.app, stream: row.stream, mediaServerId: row.mediaServerId}, this.initData);
+      this.$refs.addStreamTOGB.openDialog({
+        app: row.app,
+        stream: row.stream,
+        mediaServerId: row.mediaServerId
+      }, this.initData);
     },
     removeFromGB: function (row) {
       let that = this;

web_src/src/components/StreamProxyList.vue

@@ -1,17 +1,12 @@
 <template>
-	<div id="streamProxyList">
+	<div id="streamProxyList" style="width: 100%">
-		<el-container>
+    <div class="page-header">
-			<el-header>
+      <div class="page-title">拉流代理列表</div>
-				<uiHeader></uiHeader>
+      <div class="page-header-btn">
-			</el-header>
-			<el-main>
-				<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-					<span style="font-size: 1rem; font-weight: bold;">拉流代理列表</span>
-				</div>
-				<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
         <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button>
         <el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">搜索ONVIF</el-button>
       </div>
+    </div>
     <devicePlayer ref="devicePlayer"></devicePlayer>
     <el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
       <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/>
@@ -108,8 +103,6 @@
     </el-pagination>
     <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
     <onvifEdit ref="onvifEdit" ></onvifEdit>
-			</el-main>
-		</el-container>
 	</div>
 </template>
 
@@ -117,7 +110,7 @@
 	import streamProxyEdit from './dialog/StreamProxyEdit.vue'
 	import onvifEdit from './dialog/onvifEdit.vue'
 	import devicePlayer from './dialog/devicePlayer.vue'
-	import uiHeader from './UiHeader.vue'
+	import uiHeader from '../layout/UiHeader.vue'
 	export default {
 		name: 'streamProxyList',
 		components: {

web_src/src/components/UiHeader.vue

@@ -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>

web_src/src/components/channelList.vue

@@ -1,29 +1,34 @@
 <template>
-<div id="channelList">
+  <div id="channelList" style="width: 100%">
-    <el-container>
+    <div class="page-header">
-        <el-header>
+      <div class="page-title">
-            <uiHeader></uiHeader>
+        <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
-        </el-header>
+          返回
-        <el-main>
+        </el-button>
-            <div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
+        通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div>
-                <span style="font-size: 1rem; font-weight: 500; ">通道列表({{parentChannelId ==0 ? deviceId:parentChannelId}})</span>
+      <div class="page-header-btn">
+      搜索:
+      <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
+                prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
 
-            </div>
+      通道类型:
-            <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
+      <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择"
-                <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">返回</el-button>
+                 default-first-option>
-                搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
-
-                通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
         <el-option label="全部" value=""></el-option>
         <el-option label="设备" value="false"></el-option>
         <el-option label="子目录" value="true"></el-option>
       </el-select>
-                在线状态: <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择" default-first-option>
+      在线状态:
+      <el-select size="mini" style="margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择"
+                 default-first-option>
         <el-option label="全部" value=""></el-option>
         <el-option label="在线" value="true"></el-option>
         <el-option label="离线" value="false"></el-option>
       </el-select>
-                <el-checkbox size="mini" style="margin-right: 1rem; float: right;" v-model="autoList" @change="autoListChange">自动刷新</el-checkbox>
+      <el-checkbox size="mini" v-model="autoList" @change="autoListChange">
+        自动刷新
+      </el-checkbox>
+    </div>
   </div>
   <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
   <!--设备列表-->
@@ -81,26 +86,31 @@
         <el-button-group>
           <!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> -->
           <el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button>
-                            <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId" @click="stopDevicePush(scope.row)">停止</el-button>
+          <el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId"
-                            <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0" @click="changeSubchannel(scope.row)">查看</el-button>
+                     @click="stopDevicePush(scope.row)">停止
-                            <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象</el-button>
+          </el-button>
+          <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0"
+                     @click="changeSubchannel(scope.row)">查看
+          </el-button>
+          <el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录象
+          </el-button>
           <!--                             <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
         </el-button-group>
       </template>
     </el-table-column>
   </el-table>
-            <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange" :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]" layout="total, sizes, prev, pager, next" :total="total">
+  <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange"
+                 :current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]"
+                 layout="total, sizes, prev, pager, next" :total="total">
   </el-pagination>
-
-        </el-main>
-    </el-container>
   </div>
 </template>
 
 <script>
 import devicePlayer from './dialog/devicePlayer.vue'
-import uiHeader from './UiHeader.vue'
+import uiHeader from '../layout/UiHeader.vue'
 import moment from "moment";
+
 export default {
   name: 'channelList',
   components: {
@@ -229,7 +239,8 @@ export default {
         } else {
           that.$message.error(res.data.msg);
         }
-            }).catch(function (e) {});
+      }).catch(function (e) {
+      });
     },
     queryRecords: function (itemData) {
       var format = moment().format("YYYY-M-D");

web_src/src/components/control.vue

@@ -1,14 +1,11 @@
 <template>
-<div id="app">
+  <div id="app" style="width: 100%">
-    <el-container>
+    <div class="page-header">
-        <el-header>
+      <div class="page-title">控制台</div>
-            <uiHeader></uiHeader>
+      <div class="page-header-btn">
-        </el-header>
+        节点选择:
-        <el-main>
+        <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"
-            <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
+                   v-model="mediaServerChoose" placeholder="请选择" default-first-option>
-                <span style="font-size: 1rem; font-weight: bold;">控制台</span>
-                <div style="position: absolute; right: 17rem; top: 0.3rem;">
-                  节点选择: <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;" v-model="mediaServerChoose" placeholder="请选择" default-first-option>
           <el-option
             v-for="item in mediaServerList"
             :key="item.id"
@@ -18,10 +15,11 @@
         </el-select>
         <span>{{ loadCount }}</span>
       </div>
-                <div style="position: absolute; right: 1rem; top: 0.3rem;">
+      <div class="page-header-btn">
         <el-popover placement="bottom" width="900" height="300" trigger="click">
           <div style="height: 600px; overflow:auto; padding: 20px">
-                          <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1" style="margin-bottom: 1rem">
+            <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"
+                             style="margin-bottom: 1rem">
               <template slot="title">
                 {{ key }}
               </template>
@@ -39,7 +37,9 @@
           <div style="height: 600px;overflow:auto; padding: 20px">
             <el-descriptions title="国标配置" border :column="1">
               <template slot="extra">
-                              <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy"  title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
+                <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"
+                           v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"
+                           @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
               </template>
               <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">
                 <template slot="label">
@@ -52,7 +52,9 @@
             <div style="margin-top: 1rem">
               <el-descriptions title="基础配置" border :column="1">
                 <template slot="extra">
-                                <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy"  title="点击拷贝" v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
+                  <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"
+                             v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"
+                             @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
                 </template>
                 <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">
                   <template slot="label">
@@ -64,7 +66,10 @@
                                         查看<i class="el-icon-arrow-down el-icon--right"></i>
                                       </span>
                       <el-dropdown-menu slot="dropdown">
-                                      <el-dropdown-item v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes" :key="key">{{value}}</el-dropdown-item>
+                        <el-dropdown-item
+                          v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"
+                          :key="key">{{ value }}
+                        </el-dropdown-item>
                       </el-dropdown-menu>
                     </el-dropdown>
                   </div>
@@ -86,7 +91,9 @@
             <div style="margin-top: 1rem">
               <el-descriptions title="版本信息" border :column="1">
                 <template slot="extra">
-                                <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy"  title="点击拷贝" v-clipboard="JSON.stringify(wvpServerVersion) || ''" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
+                  <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"
+                             v-clipboard="JSON.stringify(wvpServerVersion) || ''"
+                             @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
                 </template>
                 <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">
                   <template slot="label">
@@ -104,12 +111,123 @@
         <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>
       </div>
     </div>
-            <el-row :gutter="30">
+    <!--    <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">-->
+    <!--      <span style="font-size: 1rem; font-weight: bold;">控制台</span>-->
+    <!--      <div style="position: absolute; right: 17rem; top: 0.3rem;">-->
+    <!--        节点选择:-->
+    <!--        <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"-->
+    <!--                   v-model="mediaServerChoose" placeholder="请选择" default-first-option>-->
+    <!--          <el-option-->
+    <!--            v-for="item in mediaServerList"-->
+    <!--            :key="item.id"-->
+    <!--            :label="item.id + '( ' + item.streamIp + ' )'"-->
+    <!--            :value="item.id">-->
+    <!--          </el-option>-->
+    <!--        </el-select>-->
+    <!--        <span>{{ loadCount }}</span>-->
+    <!--      </div>-->
+    <!--      <div style="position: absolute; right: 1rem; top: 0.3rem;">-->
+    <!--        <el-popover placement="bottom" width="900" height="300" trigger="click">-->
+    <!--          <div style="height: 600px; overflow:auto; padding: 20px">-->
+    <!--            <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"-->
+    <!--                             style="margin-bottom: 1rem">-->
+    <!--              <template slot="title">-->
+    <!--                {{ key }}-->
+    <!--              </template>-->
+    <!--              <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1">-->
+    <!--                <template slot="label">-->
+    <!--                  {{ getMediaKeyNameFromKey(key1) }}-->
+    <!--                </template>-->
+    <!--                {{ value1 }}-->
+    <!--              </el-descriptions-item>-->
+    <!--            </el-descriptions>-->
+    <!--          </div>-->
+    <!--          <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">媒体服务器配置</el-button>-->
+    <!--        </el-popover>-->
+    <!--        <el-popover placement="bottom" width="900" height="300" trigger="click">-->
+    <!--          <div style="height: 600px;overflow:auto; padding: 20px">-->
+    <!--            <el-descriptions title="国标配置" border :column="1">-->
+    <!--              <template slot="extra">-->
+    <!--                <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->
+    <!--                           v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"-->
+    <!--                           @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
+    <!--              </template>-->
+    <!--              <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">-->
+    <!--                <template slot="label">-->
+    <!--                  {{ getNameFromKey(key) }}-->
+    <!--                </template>-->
+    <!--                {{ value }}-->
+    <!--              </el-descriptions-item>-->
+    <!--            </el-descriptions>-->
+
+    <!--            <div style="margin-top: 1rem">-->
+    <!--              <el-descriptions title="基础配置" border :column="1">-->
+    <!--                <template slot="extra">-->
+    <!--                  <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->
+    <!--                             v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"-->
+    <!--                             @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
+    <!--                </template>-->
+    <!--                <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">-->
+    <!--                  <template slot="label">-->
+    <!--                    {{ getNameFromKey(key) }}-->
+    <!--                  </template>-->
+    <!--                  <div v-if="key === 'interfaceAuthenticationExcludes'">-->
+    <!--                    <el-dropdown>-->
+    <!--                                      <span class="el-dropdown-link">-->
+    <!--                                        查看<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
+    <!--                                      </span>-->
+    <!--                      <el-dropdown-menu slot="dropdown">-->
+    <!--                        <el-dropdown-item-->
+    <!--                          v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"-->
+    <!--                          :key="key">{{ value }}-->
+    <!--                        </el-dropdown-item>-->
+    <!--                      </el-dropdown-menu>-->
+    <!--                    </el-dropdown>-->
+    <!--                  </div>-->
+    <!--                  <div v-if="key !== 'interfaceAuthenticationExcludes'">-->
+    <!--                    <div v-if="value === true">-->
+    <!--                      已启用-->
+    <!--                    </div>-->
+    <!--                    <div v-if="value === false">-->
+    <!--                      未启用-->
+    <!--                    </div>-->
+    <!--                    <div v-if="value !== true && value !== false">-->
+    <!--                      {{ value }}-->
+    <!--                    </div>-->
+    <!--                  </div>-->
+
+    <!--                </el-descriptions-item>-->
+    <!--              </el-descriptions>-->
+    <!--            </div>-->
+    <!--            <div style="margin-top: 1rem">-->
+    <!--              <el-descriptions title="版本信息" border :column="1">-->
+    <!--                <template slot="extra">-->
+    <!--                  <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->
+    <!--                             v-clipboard="JSON.stringify(wvpServerVersion) || ''"-->
+    <!--                             @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->
+    <!--                </template>-->
+    <!--                <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">-->
+    <!--                  <template slot="label">-->
+    <!--                    {{ getNameFromKey(key) }}-->
+    <!--                  </template>-->
+    <!--                  {{ value }}-->
+    <!--                </el-descriptions-item>-->
+    <!--              </el-descriptions>-->
+
+
+    <!--            </div>-->
+    <!--          </div>-->
+    <!--          <el-button type="primary" slot="reference" size="mini" @click="getWVPServerConfig()">信令服务器配置</el-button>-->
+    <!--        </el-popover>-->
+    <!--        <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <el-row style="width: 100%">
       <el-col :span="12">
-                    <div class="control-table" id="ThreadsLoad">table1</div>
+        <div class="control-table" id="ThreadsLoad" style="margin-right:10px;">table1</div>
       </el-col>
       <el-col :span="12">
-                    <div class="control-table" id="WorkThreadsLoad">table2</div>
+        <div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div>
       </el-col>
     </el-row>
     <el-table :data="allSessionData" style="margin-top: 1rem;">
@@ -121,23 +239,20 @@
           <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
         </template>
         <template slot-scope="scope">
-                        <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
+          <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
-
-        </el-main>
-        <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
-    </el-container>
-
   </div>
 </template>
 
 <script>
-import uiHeader from './UiHeader.vue'
+import uiHeader from '../layout/UiHeader.vue'
 import MediaServer from './service/MediaServer'
 
 import echarts from 'echarts';
+
 export default {
   name: 'app',
   components: {
@@ -181,8 +296,7 @@ export default {
     };
   },
   mounted() {
-
+    this.initTable()
-        this.initTable();
     this.chartInterval = setInterval(this.updateData, 3000);
     this.mediaServer.getOnlineMediaServerList((data) => {
       this.mediaServerList = data.data;
@@ -252,6 +366,10 @@ export default {
             that.myChart.setOption(that.tableOption, true);
             // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
             that.myChart1.setOption(that.table1Option, true);
+            that.$nextTick(() => {
+              that.myChart.resize()
+              that.myChart1.resize()
+            })
           }
         });
       }

web_src/src/components/devicePosition.vue

@@ -1,10 +1,5 @@
 <template>
     <div id="devicePosition" style="height: 100%">
-        <el-container style="height: 100%">
-            <el-header>
-                <uiHeader></uiHeader>
-            </el-header>
-            <el-main>
       <div style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
         <span style="font-size: 1rem; font-weight: 500">设备定位 ({{ parentChannelId == 0 ? deviceId : parentChannelId }})</span>
       </div>
@@ -30,14 +25,11 @@
       <div class="mapContainer" style="background-color: #ffffff; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center; height: calc(100% - 10rem);">
         <div class="baidumap" id="allmap"></div>
       </div>
-            </el-main>
-        </el-container>
     </div>
 </template>
 
 <script>
-import uiHeader from "./UiHeader.vue";
+import uiHeader from "../layout/UiHeader.vue";
-import moment from "moment";
 import geoTools from "./GeoConvertTools.js";
 export default {
     name: "devicePosition",

web_src/src/components/live.vue

@@ -1,10 +1,6 @@
 <template>
-  <div id="devicePosition" style="height: 100%">
+  <div id="devicePosition" style="height: 100%;width: 100%">
-    <el-container style="height: 100%">
+    <el-container v-loading="loading" element-loading-text="拼命加载中">
-      <el-header>
-        <uiHeader></uiHeader>
-      </el-header>
-      <el-container v-loading="loading" element-loading-text="拼命加载中" style="margin: 0 20px;">
       <el-aside width="300px" style="background-color: #ffffff">
         <div style="text-align: center;padding-top: 20px;">设备列表</div>
         <el-menu  v-loading="loading">
@@ -26,7 +22,7 @@
           <i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/>
         </el-header>
         <el-main>
-              <div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;">
+          <div style="width: 100%;height: calc( 100vh - 150px );display: flex;flex-wrap: wrap;background-color: #000;">
             <div v-for="i in spilt" :key="i" class="play-box"
                  :style="liveStyle" :class="{redborder:playerIdx == (i-1)}"
                  @click="playerIdx = (i-1)"
@@ -40,12 +36,11 @@
         </el-main>
       </el-container>
     </el-container>
-    </el-container>
   </div>
 </template>
 
 <script>
-  import uiHeader from "./UiHeader.vue";
+  import uiHeader from "../layout/UiHeader.vue";
   import player from './dialog/jessibuca.vue'
   import ChannelTree from './channelTree.vue'
 

web_src/src/components/setting/Media.vue

@@ -1,14 +1,10 @@
 <template>
-  <div id="SettingForMedia">
+  <div id="SettingForMedia" style="width: 100%">
-  <el-container>
+    <div class="page-header">
-    <el-header>
+      <div class="page-title">媒体服务</div>
-      <uiHeader></uiHeader>
-    </el-header>
-    <el-main>
-      <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-        <span style="font-size: 1rem; font-weight: bold;">媒体服务</span>
     </div>
-      <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
+    <div
+      style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
       <el-form ref="form" :rules="rules" :model="form" label-width="140px">
         <el-form-item label="IP" prop="IP">
           <el-input v-model="form.IP" clearable></el-input>
@@ -71,15 +67,12 @@
         </el-form-item>
       </el-form>
     </div>
-
-
-    </el-main>
-  </el-container>
   </div>
 </template>
 
 <script>
-import uiHeader from '../UiHeader.vue'
+import uiHeader from '../../layout/UiHeader.vue'
+
 export default {
   name: "SettingForMedia",
   components: {

web_src/src/components/setting/Sip.vue

@@ -1,14 +1,10 @@
 <template>
-  <div id="SettingForSip">
+  <div id="SettingForSip" style="width: 100%">
-  <el-container>
+    <div class="page-header">
-    <el-header>
+      <div class="page-title">国标服务</div>
-      <uiHeader></uiHeader>
-    </el-header>
-    <el-main>
-      <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-        <span style="font-size: 1rem; font-weight: bold;">国标服务</span>
     </div>
-      <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
+    <div
+      style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
       <el-form ref="form" :rules="rules" :model="form" label-width="140px">
         <el-form-item label="ip" prop="ip">
           <el-input v-model="form.ip" clearable></el-input>
@@ -36,15 +32,12 @@
         </el-form-item>
       </el-form>
     </div>
-
-
-    </el-main>
-  </el-container>
   </div>
 </template>
 
 <script>
-import uiHeader from '../UiHeader.vue'
+import uiHeader from '../../layout/UiHeader.vue'
+
 export default {
   name: "SettingForSip",
   components: {

web_src/src/components/setting/Web.vue

@@ -1,12 +1,7 @@
 <template>
-  <div id="SettingForWeb">
+  <div id="SettingForWeb" style="width: 100%">
-  <el-container>
+      <div class="page-header">
-    <el-header>
+        <div class="page-title">WEB服务</div>
-      <uiHeader></uiHeader>
-    </el-header>
-    <el-main>
-      <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
-        <span style="font-size: 1rem; font-weight: bold;">WEB服务</span>
       </div>
       <div style="width: 60%; margin:0 auto; background-color: #FFFFFF; position: relative; padding: 5rem 6.5rem; text-align: left;font-size: 14px; max-width: 400px">
         <el-form ref="form" :rules="rules" :model="form" label-width="140px">
@@ -41,15 +36,11 @@
           </el-form-item>
         </el-form>
       </div>
-
-
-    </el-main>
-  </el-container>
   </div>
 </template>
 
 <script>
-import uiHeader from '../UiHeader.vue'
+import uiHeader from '../../layout/UiHeader.vue'
 export default {
   name: "SettingForWeb",
   components: {

web_src/src/layout/UiHeader.vue

@@ -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>

web_src/src/layout/index.vue

@@ -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>

web_src/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import Layout from "../layout/index.vue"
 
 import control from '../components/control.vue'
 import deviceList from '../components/DeviceList.vue'
@@ -32,6 +33,12 @@ export default new VueRouter({
   routes: [
     {
       path: '/',
+      name: 'home',
+      component: Layout,
+      redirect: '/control',
+      children: [
+        {
+          path: '/control',
           component: control,
         },
         {
@@ -50,11 +57,6 @@ export default new VueRouter({
           path: '/streamProxyList',
           component: streamProxyList,
         },
-    {
-      path: '/login',
-      name: '登录',
-      component: login,
-    },
         {
           path: '/channelList/:deviceId/:parentChannelId/:count/:page',
           name: 'channelList',
@@ -106,4 +108,11 @@ export default new VueRouter({
           component: rtcPlayer,
         },
         ]
+    },
+    {
+      path: '/login',
+      name: '登录',
+      component: login,
+    },
+  ]
 })