guzijian / wvp-GB28181-pro · Commits

Commit 54704e1e6a781dc47993270318be1e828b891c16

Authored by Lawrence
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 <template> 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 </template> 52 </template>
49 53
50 <script> 54 <script>
51 -  
52 import uiHeader from './UiHeader.vue' 55 import uiHeader from './UiHeader.vue'
53 56
54 import echarts from 'echarts'; 57 import echarts from 'echarts';
55 export default { 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 </script> 327 </script>
325 328
326 <style> 329 <style>
327 #app { 330 #app {
328 - height: 100%; 331 + height: 100%;
329 } 332 }
  333 +
330 .control-table { 334 .control-table {
331 - background-color: #ffffff;  
332 - height: 25rem; 335 + background-color: #ffffff;
  336 + height: 25rem;
333 } 337 }
  338 +
334 .table-c { 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 .table-c td { 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 .el-table { 350 .el-table {
344 - width: 99.9% !important; 351 + width: 99.9% !important;
345 } 352 }
346 </style> 353 </style>