first

src/App.vue

@@ -10,7 +10,7 @@
 				</el-menu>
 			</el-header>
 			<el-main><router-view></router-view></el-main>
-			<el-footer style="position: absolute; bottom: 0; width: 100%;">Binsso-MediaKit v1</el-footer>
+			<!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
 		</el-container>
 	</div>
 </template>
@@ -30,12 +30,9 @@ body,
 	background-color: #e9eef3;
 	height: 100%;
 }
-#app {
-	margin: 0 0;
-}
 .el-header,
 .el-footer {
-	background-color: #b3c0d1;
+	/* background-color: #b3c0d1; */
 	color: #333;
 	text-align: center;
 	line-height: 60px;
@@ -44,5 +41,6 @@ body,
 	background-color: #e9eef3;
 	color: #333;
 	text-align: center;
+	padding-top: 0px !important;
 }
 </style>

src/components/control.vue

@@ -28,6 +28,18 @@
 
 			<el-table-column align="right">
 				<template slot="header" slot-scope="scope">
+					<el-dropdown>
+						<el-button type="primary" size="small" style="margin-right: 1rem;">
+							分类筛选
+							<i class="el-icon-arrow-down el-icon--right"></i>
+						</el-button>
+						<el-dropdown-menu slot="dropdown">
+							<el-dropdown-item>全部</el-dropdown-item>
+							<el-dropdown-item>Http</el-dropdown-item>
+							<el-dropdown-item>RTMP</el-dropdown-item>
+							<el-dropdown-item>RTP</el-dropdown-item>
+						</el-dropdown-menu>
+					</el-dropdown>
 					<el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
 				</template>
 				<template slot-scope="scope">
@@ -65,24 +77,27 @@ export default {
 			},
 			mChart: null,
 			mChart1: null,
-			chartInterval: 0,//更新图表统计图定时任务标识
+			chartInterval: 0, //更新图表统计图定时任务标识
 			allSessionData: [],
 			visible: false,
 			serverConfig: {}
 		};
 	},
-	mounted(){
+	mounted() {
 		this.getAllSession();
 		this.initTable();
 		this.chartInterval = setInterval(this.updateData, 3000);
 	},
 	destroyed() {
-		clearInterval(this.chartInterval);//释放定时任务
+		clearInterval(this.chartInterval); //释放定时任务
 	},
 	methods: {
 		updateData: function() {
 			this.getThreadsLoad();
 		},
+		/**
+		 * 获取线程状态
+		 */
 		getThreadsLoad: function() {
 			let that = this;
 			this.$axios({
@@ -151,7 +166,6 @@ export default {
 			};
 			this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
 			this.myChart.setOption(this.tableOption);
-
 			this.table1Option.xAxis = {
 				type: 'category',
 				data: [], // x轴数据
@@ -181,7 +195,7 @@ export default {
 			this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
 			this.myChart1.setOption(this.table1Option);
 		},
-
+		
 		getAllSession: function() {
 			let that = this;
 			that.allSessionData = [];

src/components/videoList.vue

@@ -80,7 +80,7 @@ export default {
 			});
 		},
 		showVideoInfo: function(videoData) {
-			let msg = '所属应用：' + videoData.app + '\n' + '数据流类型：' + videoData.schema + '\n' + '流名称：' + videoData.stream + '\n';
+			let msg = '所属应用：' + videoData.app  + ' 数据流类型：' + videoData.schema + ' 流名称：' + videoData.stream +' 观看人数：'+videoData.readerCount;
 			this.$alert(msg, '视频信息', {
 				confirmButtonText: '确定'
 			});