改为24小时制显示 (54704e1e) | Commits | guzijian / wvp-GB28181-pro

Browse Code »

Commit 54704e1e6a781dc47993270318be1e828b891c16

Authored by Lawrence 2020-11-09 18:42:59 +0800

1 parent 574f2247

改为24小时制显示

Inline Side-by-side

Showing 1 changed file with 325 additions and 318 deletions

web_src/src/components/control.vue

View file @54704e1

1	1	<template>
2		- <div id="app">
3		- <el-container>
4		- <el-header>
5		- <uiHeader></uiHeader>
6		- </el-header>
7		- <el-main>
8		- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
9		- <span style="font-size: 1rem; font-weight: bold;">控制台</span>
10		- <div style="position: absolute; right: 1rem; top: 0.3rem;">
11		- <el-popover placement="bottom" width="750" height="300" trigger="click">
12		- <div style="height: 600px;overflow:auto;">
13		- <table class="table-c" cellspacing="0">
14		- <tr v-for="(value, key, index) in serverConfig">
15		- <td style="width: 18rem; text-align: right;">{{ key }}</td>
16		- <td style="width: 33rem; text-align:left">{{ value }}</td>
17		- </tr>
18		- </table>
19		- </div>
20		- <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button>
21		- </el-popover>
22		- <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button>
23		- </div>
24		- </div>
25		- <el-row :gutter="30">
26		- <el-col :span="12"><div class="control-table" id="ThreadsLoad">table1</div></el-col>
27		- <el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
28		- </el-row>
29		- <el-table :data="allSessionData" style="margin-top: 1rem;">
30		- <el-table-column prop="peer_ip" label="远端"></el-table-column>
31		- <el-table-column prop="local_ip" label="本地"></el-table-column>
32		- <el-table-column prop="typeid" label="类型"></el-table-column>
33		- <el-table-column align="right">
34		- <template slot="header" slot-scope="scope">
35		- <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
36		- </template>
37		- <template slot-scope="scope">
38		- <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
39		- </template>
40		- </el-table-column>
41		- </el-table>
	2	+<div id="app">
	3	+ <el-container>
	4	+ <el-header>
	5	+ <uiHeader></uiHeader>
	6	+ </el-header>
	7	+ <el-main>
	8	+ <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
	9	+ <span style="font-size: 1rem; font-weight: bold;">控制台</span>
	10	+ <div style="position: absolute; right: 1rem; top: 0.3rem;">
	11	+ <el-popover placement="bottom" width="750" height="300" trigger="click">
	12	+ <div style="height: 600px;overflow:auto;">
	13	+ <table class="table-c" cellspacing="0">
	14	+ <tr v-for="(value, key, index) in serverConfig">
	15	+ <td style="width: 18rem; text-align: right;">{{ key }}</td>
	16	+ <td style="width: 33rem; text-align:left">{{ value }}</td>
	17	+ </tr>
	18	+ </table>
	19	+ </div>
	20	+ <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button>
	21	+ </el-popover>
	22	+ <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button>
	23	+ </div>
	24	+ </div>
	25	+ <el-row :gutter="30">
	26	+ <el-col :span="12">
	27	+ <div class="control-table" id="ThreadsLoad">table1</div>
	28	+ </el-col>
	29	+ <el-col :span="12">
	30	+ <div class="control-table" id="WorkThreadsLoad">table2</div>
	31	+ </el-col>
	32	+ </el-row>
	33	+ <el-table :data="allSessionData" style="margin-top: 1rem;">
	34	+ <el-table-column prop="peer_ip" label="远端"></el-table-column>
	35	+ <el-table-column prop="local_ip" label="本地"></el-table-column>
	36	+ <el-table-column prop="typeid" label="类型"></el-table-column>
	37	+ <el-table-column align="right">
	38	+ <template slot="header" slot-scope="scope">
	39	+ <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
	40	+ </template>
	41	+ <template slot-scope="scope">
	42	+ <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
	43	+ </template>
	44	+ </el-table-column>
	45	+ </el-table>
42	46
43		- </el-main>
44		- <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
45		- </el-container>
	47	+ </el-main>
	48	+ <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
	49	+ </el-container>
46	50
47		- </div>
	51	+</div>
48	52	</template>
49	53
50	54	<script>
51		-
52	55	import uiHeader from './UiHeader.vue'
53	56
54	57	import echarts from 'echarts';
55	58	export default {
56		- name: 'app',
57		- components: {
58		- echarts,
59		- uiHeader
60		- },
61		- data() {
62		- return {
63		- tableOption: {
64		- // legend: {},
65		- xAxis: {},
66		- yAxis: {},
67		- label: {},
68		- tooltip: {},
69		- dataZoom: [],
70		- series: []
71		- },
72		- table1Option: {
73		- // legend: {},
74		- xAxis: {},
75		- yAxis: {},
76		- label: {},
77		- tooltip: {},
78		- series: []
79		- },
80		- mChart: null,
81		- mChart1: null,
82		- charZoomStart: 0,
83		- charZoomEnd: 100,
84		- chartInterval: 0, //更新图表统计图定时任务标识
85		- allSessionData: [],
86		- visible: false,
87		- serverConfig: {}
88		- };
89		- },
90		- mounted() {
91		- this.getAllSession();
92		- this.initTable();
93		- this.updateData();
94		- this.chartInterval = setInterval(this.updateData, 3000);
95		- },
96		- destroyed() {
97		- clearInterval(this.chartInterval); //释放定时任务
98		- },
99		- methods: {
100		- updateData: function() {
101		- this.getThreadsLoad();
102		- },
103		- /**
104		- * 获取线程状态
105		- */
106		- getThreadsLoad: function() {
107		- let that = this;
108		- this.$axios({
109		- method: 'get',
110		- url: '/zlm/index/api/getThreadsLoad'
111		- }).then(function(res) {
112		- if (res.data.code == 0) {
113		- that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
114		- that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());
	59	+ name: 'app',
	60	+ components: {
	61	+ echarts,
	62	+ uiHeader
	63	+ },
	64	+ data() {
	65	+ return {
	66	+ tableOption: {
	67	+ // legend: {},
	68	+ xAxis: {},
	69	+ yAxis: {},
	70	+ label: {},
	71	+ tooltip: {},
	72	+ dataZoom: [],
	73	+ series: []
	74	+ },
	75	+ table1Option: {
	76	+ // legend: {},
	77	+ xAxis: {},
	78	+ yAxis: {},
	79	+ label: {},
	80	+ tooltip: {},
	81	+ series: []
	82	+ },
	83	+ mChart: null,
	84	+ mChart1: null,
	85	+ charZoomStart: 0,
	86	+ charZoomEnd: 100,
	87	+ chartInterval: 0, //更新图表统计图定时任务标识
	88	+ allSessionData: [],
	89	+ visible: false,
	90	+ serverConfig: {}
	91	+ };
	92	+ },
	93	+ mounted() {
	94	+ this.getAllSession();
	95	+ this.initTable();
	96	+ this.updateData();
	97	+ this.chartInterval = setInterval(this.updateData, 3000);
	98	+ },
	99	+ destroyed() {
	100	+ clearInterval(this.chartInterval); //释放定时任务
	101	+ },
	102	+ methods: {
	103	+ updateData: function () {
	104	+ this.getThreadsLoad();
	105	+ },
	106	+ /**
	107	+ * 获取线程状态
	108	+ */
	109	+ getThreadsLoad: function () {
	110	+ let that = this;
	111	+ this.$axios({
	112	+ method: 'get',
	113	+ url: '/zlm/index/api/getThreadsLoad'
	114	+ }).then(function (res) {
	115	+ if (res.data.code == 0) {
	116	+ that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
	117	+ hour12: false
	118	+ }));
	119	+ that.table1Option.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
	120	+ hour12: false
	121	+ }));
115	122
116		- for (var i = 0; i < res.data.data.length; i++) {
117		- if (that.tableOption.series[i] === undefined) {
118		- let data = {
119		- data: [],
120		- type: 'line'
121		- };
122		- let data1 = {
123		- data: [],
124		- type: 'line'
125		- };
126		- data.data.push(res.data.data[i].delay);
127		- data1.data.push(res.data.data[i].load);
128		- that.tableOption.series.push(data);
129		- that.table1Option.series.push(data1);
130		- } else {
131		- that.tableOption.series[i].data.push(res.data.data[i].delay);
132		- that.table1Option.series[i].data.push(res.data.data[i].load);
133		- }
134		- }
135		- that.tableOption.dataZoom[0].start = that.charZoomStart;
136		- that.tableOption.dataZoom[0].end = that.charZoomEnd;
137		- that.table1Option.dataZoom[0].start = that.charZoomStart;
138		- that.table1Option.dataZoom[0].end = that.charZoomEnd;
139		- //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
140		- that.myChart.setOption(that.tableOption, true);
141		- // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
142		- that.myChart1.setOption(that.table1Option, true);
143		- }
144		- });
145		- },
146		- initTable: function() {
147		- let that = this;
148		- this.tableOption.xAxis = {
149		- type: 'category',
150		- data: [], // x轴数据
151		- name: '时间', // x轴名称
152		- // x轴名称样式
153		- nameTextStyle: {
154		- fontWeight: 300,
155		- fontSize: 15
156		- }
157		- };
158		- this.tableOption.yAxis = {
159		- type: 'value',
160		- name: '延迟率', // y轴名称
161		- boundaryGap: [0, '100%'],
162		- max: 100,
163		- axisLabel: {
164		- show: true,
165		- interval: 'auto',
166		- formatter: '{value} %'
167		- },
168		- // y轴名称样式
169		- nameTextStyle: {
170		- fontWeight: 300,
171		- fontSize: 15
172		- }
173		- };
174		- this.tableOption.dataZoom = [
175		- {
176		- show: true,
177		- start: this.charZoomStart,
178		- end: this.charZoomEnd
179		- }
180		- ];
181		- this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
182		- this.myChart.setOption(this.tableOption);
183		- this.myChart.on('dataZoom', function(event) {
184		- if (event.batch) {
185		- that.charZoomStart = event.batch[0].start;
186		- that.charZoomEnd = event.batch[0].end;
187		- } else {
188		- that.charZoomStart = event.start;
189		- that.charZoomEnd = event.end;
190		- }
191		- });
	123	+ for (var i = 0; i < res.data.data.length; i++) {
	124	+ if (that.tableOption.series[i] === undefined) {
	125	+ let data = {
	126	+ data: [],
	127	+ type: 'line'
	128	+ };
	129	+ let data1 = {
	130	+ data: [],
	131	+ type: 'line'
	132	+ };
	133	+ data.data.push(res.data.data[i].delay);
	134	+ data1.data.push(res.data.data[i].load);
	135	+ that.tableOption.series.push(data);
	136	+ that.table1Option.series.push(data1);
	137	+ } else {
	138	+ that.tableOption.series[i].data.push(res.data.data[i].delay);
	139	+ that.table1Option.series[i].data.push(res.data.data[i].load);
	140	+ }
	141	+ }
	142	+ that.tableOption.dataZoom[0].start = that.charZoomStart;
	143	+ that.tableOption.dataZoom[0].end = that.charZoomEnd;
	144	+ that.table1Option.dataZoom[0].start = that.charZoomStart;
	145	+ that.table1Option.dataZoom[0].end = that.charZoomEnd;
	146	+ //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
	147	+ that.myChart.setOption(that.tableOption, true);
	148	+ // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
	149	+ that.myChart1.setOption(that.table1Option, true);
	150	+ }
	151	+ });
	152	+ },
	153	+ initTable: function () {
	154	+ let that = this;
	155	+ this.tableOption.xAxis = {
	156	+ type: 'category',
	157	+ data: [], // x轴数据
	158	+ name: '时间', // x轴名称
	159	+ // x轴名称样式
	160	+ nameTextStyle: {
	161	+ fontWeight: 300,
	162	+ fontSize: 15
	163	+ }
	164	+ };
	165	+ this.tableOption.yAxis = {
	166	+ type: 'value',
	167	+ name: '延迟率', // y轴名称
	168	+ boundaryGap: [0, '100%'],
	169	+ max: 100,
	170	+ axisLabel: {
	171	+ show: true,
	172	+ interval: 'auto',
	173	+ formatter: '{value} %'
	174	+ },
	175	+ // y轴名称样式
	176	+ nameTextStyle: {
	177	+ fontWeight: 300,
	178	+ fontSize: 15
	179	+ }
	180	+ };
	181	+ this.tableOption.dataZoom = [{
	182	+ show: true,
	183	+ start: this.charZoomStart,
	184	+ end: this.charZoomEnd
	185	+ }];
	186	+ this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
	187	+ this.myChart.setOption(this.tableOption);
	188	+ this.myChart.on('dataZoom', function (event) {
	189	+ if (event.batch) {
	190	+ that.charZoomStart = event.batch[0].start;
	191	+ that.charZoomEnd = event.batch[0].end;
	192	+ } else {
	193	+ that.charZoomStart = event.start;
	194	+ that.charZoomEnd = event.end;
	195	+ }
	196	+ });
192	197
193		- this.table1Option.xAxis = {
194		- type: 'category',
195		- data: [], // x轴数据
196		- name: '时间', // x轴名称
197		- // x轴名称样式
198		- nameTextStyle: {
199		- fontWeight: 300,
200		- fontSize: 15
201		- }
202		- };
203		- this.table1Option.yAxis = {
204		- type: 'value',
205		- name: '负载率', // y轴名称
206		- boundaryGap: [0, '100%'],
207		- max: 100,
208		- axisLabel: {
209		- show: true,
210		- interval: 'auto',
211		- formatter: '{value} %'
212		- },
213		- // y轴名称样式
214		- nameTextStyle: {
215		- fontWeight: 300,
216		- fontSize: 15
217		- }
218		- };
219		- this.table1Option.dataZoom = [
220		- {
221		- show: true,
222		- start: this.charZoomStart,
223		- end: this.charZoomEnd
224		- }
225		- ];
226		- this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
227		- this.myChart1.setOption(this.table1Option);
228		- this.myChart1.on('dataZoom', function(event) {
229		- if (event.batch) {
230		- that.charZoomStart = event.batch[0].start;
231		- that.charZoomEnd = event.batch[0].end;
232		- } else {
233		- that.charZoomStart = event.start;
234		- that.charZoomEnd = event.end;
235		- }
236		- });
237		- },
	198	+ this.table1Option.xAxis = {
	199	+ type: 'category',
	200	+ data: [], // x轴数据
	201	+ name: '时间', // x轴名称
	202	+ // x轴名称样式
	203	+ nameTextStyle: {
	204	+ fontWeight: 300,
	205	+ fontSize: 15
	206	+ }
	207	+ };
	208	+ this.table1Option.yAxis = {
	209	+ type: 'value',
	210	+ name: '负载率', // y轴名称
	211	+ boundaryGap: [0, '100%'],
	212	+ max: 100,
	213	+ axisLabel: {
	214	+ show: true,
	215	+ interval: 'auto',
	216	+ formatter: '{value} %'
	217	+ },
	218	+ // y轴名称样式
	219	+ nameTextStyle: {
	220	+ fontWeight: 300,
	221	+ fontSize: 15
	222	+ }
	223	+ };
	224	+ this.table1Option.dataZoom = [{
	225	+ show: true,
	226	+ start: this.charZoomStart,
	227	+ end: this.charZoomEnd
	228	+ }];
	229	+ this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
	230	+ this.myChart1.setOption(this.table1Option);
	231	+ this.myChart1.on('dataZoom', function (event) {
	232	+ if (event.batch) {
	233	+ that.charZoomStart = event.batch[0].start;
	234	+ that.charZoomEnd = event.batch[0].end;
	235	+ } else {
	236	+ that.charZoomStart = event.start;
	237	+ that.charZoomEnd = event.end;
	238	+ }
	239	+ });
	240	+ },
238	241
239		- getAllSession: function() {
240		- let that = this;
241		- that.allSessionData = [];
242		- console.log("地址："+'/zlm/index/api/getAllSession');
243		- this.$axios({
244		- method: 'get',
245		- url: '/zlm/index/api/getAllSession'
246		- }).then(function(res) {
247		- res.data.data.forEach(item => {
248		- let data = {
249		- peer_ip: item.peer_ip,
250		- local_ip: item.local_ip,
251		- typeid: item.typeid,
252		- id: item.id
253		- };
254		- that.allSessionData.push(data);
255		- });
256		- });
257		- },
258		- getServerConfig: function() {
259		- let that = this;
260		- this.$axios({
261		- method: 'get',
262		- url: '/zlm/index/api/getServerConfig'
263		- }).then(function(res) {
264		- that.serverConfig = res.data.data[0];
265		- that.visible = true;
266		- });
267		- },
268		- reStartServer: function() {
269		- let that = this;
270		- this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
271		- confirmButtonText: '确定',
272		- cancelButtonText: '取消',
273		- type: 'warning'
274		- }).then(() => {
275		- let that = this;
276		- this.$axios({
277		- method: 'get',
278		- url: '/zlm/index/api/restartServer'
279		- }).then(function(res) {
280		- that.getAllSession();
281		- if (res.data.code == 0) {
282		- that.$message({
283		- type: 'success',
284		- message: '操作完成'
285		- });
286		- }
287		- });
288		- });
289		- },
290		- deleteRow: function(index, tabledata) {
291		- let that = this;
292		- this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
293		- confirmButtonText: '确定',
294		- cancelButtonText: '取消',
295		- type: 'warning'
296		- })
297		- .then(() => {
298		- that.deleteSession(tabledata[index].id);
299		- })
300		- .catch(() => {
301		- console.log('id：' + JSON.stringify(tabledata[index]));
302		- this.$message({
303		- type: 'info',
304		- message: '已取消删除'
305		- });
306		- });
307		- console.log(JSON.stringify(tabledata[index]));
308		- },
309		- deleteSession: function(id) {
310		- let that = this;
311		- this.$axios({
312		- method: 'get',
313		- url: '/zlm/index/api/kick_session&id=' + id
314		- }).then(function(res) {
315		- that.getAllSession();
316		- that.$message({
317		- type: 'success',
318		- message: '删除成功!'
319		- });
320		- });
321		- }
322		- }
	242	+ getAllSession: function () {
	243	+ let that = this;
	244	+ that.allSessionData = [];
	245	+ console.log("地址：" + '/zlm/index/api/getAllSession');
	246	+ this.$axios({
	247	+ method: 'get',
	248	+ url: '/zlm/index/api/getAllSession'
	249	+ }).then(function (res) {
	250	+ res.data.data.forEach(item => {
	251	+ let data = {
	252	+ peer_ip: item.peer_ip,
	253	+ local_ip: item.local_ip,
	254	+ typeid: item.typeid,
	255	+ id: item.id
	256	+ };
	257	+ that.allSessionData.push(data);
	258	+ });
	259	+ });
	260	+ },
	261	+ getServerConfig: function () {
	262	+ let that = this;
	263	+ this.$axios({
	264	+ method: 'get',
	265	+ url: '/zlm/index/api/getServerConfig'
	266	+ }).then(function (res) {
	267	+ that.serverConfig = res.data.data[0];
	268	+ that.visible = true;
	269	+ });
	270	+ },
	271	+ reStartServer: function () {
	272	+ let that = this;
	273	+ this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
	274	+ confirmButtonText: '确定',
	275	+ cancelButtonText: '取消',
	276	+ type: 'warning'
	277	+ }).then(() => {
	278	+ let that = this;
	279	+ this.$axios({
	280	+ method: 'get',
	281	+ url: '/zlm/index/api/restartServer'
	282	+ }).then(function (res) {
	283	+ that.getAllSession();
	284	+ if (res.data.code == 0) {
	285	+ that.$message({
	286	+ type: 'success',
	287	+ message: '操作完成'
	288	+ });
	289	+ }
	290	+ });
	291	+ });
	292	+ },
	293	+ deleteRow: function (index, tabledata) {
	294	+ let that = this;
	295	+ this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
	296	+ confirmButtonText: '确定',
	297	+ cancelButtonText: '取消',
	298	+ type: 'warning'
	299	+ })
	300	+ .then(() => {
	301	+ that.deleteSession(tabledata[index].id);
	302	+ })
	303	+ .catch(() => {
	304	+ console.log('id：' + JSON.stringify(tabledata[index]));
	305	+ this.$message({
	306	+ type: 'info',
	307	+ message: '已取消删除'
	308	+ });
	309	+ });
	310	+ console.log(JSON.stringify(tabledata[index]));
	311	+ },
	312	+ deleteSession: function (id) {
	313	+ let that = this;
	314	+ this.$axios({
	315	+ method: 'get',
	316	+ url: '/zlm/index/api/kick_session&id=' + id
	317	+ }).then(function (res) {
	318	+ that.getAllSession();
	319	+ that.$message({
	320	+ type: 'success',
	321	+ message: '删除成功!'
	322	+ });
	323	+ });
	324	+ }
	325	+ }
323	326	};
324	327	</script>
325	328
326	329	<style>
327	330	#app {
328		- height: 100%;
	331	+ height: 100%;
329	332	}
	333	+
330	334	.control-table {
331		- background-color: #ffffff;
332		- height: 25rem;
	335	+ background-color: #ffffff;
	336	+ height: 25rem;
333	337	}
	338	+
334	339	.table-c {
335		- border-right: 1px solid #dcdcdc;
336		- border-bottom: 1px solid #dcdcdc;
	340	+ border-right: 1px solid #dcdcdc;
	341	+ border-bottom: 1px solid #dcdcdc;
337	342	}
	343	+
338	344	.table-c td {
339		- border-left: 1px solid #dcdcdc;
340		- border-top: 1px solid #dcdcdc;
341		- padding: 0.2rem;
	345	+ border-left: 1px solid #dcdcdc;
	346	+ border-top: 1px solid #dcdcdc;
	347	+ padding: 0.2rem;
342	348	}
	349	+
343	350	.el-table {
344		- width: 99.9% !important;
	351	+ width: 99.9% !important;
345	352	}
346	353	</style>
...	...

guzijian / wvp-GB28181-pro · Commits

GitLab

改为24小时制显示