Thirdparty
/
wvp-GB28181-pro
mirror of https://github.com/648540858/wvp-GB28181-pro
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

首页改造,完成cpu,内存,网络图

pull/698/head^2
648540858 2022-10-20 18:03:40 +08:00
parent 95d367702a
commit 3ffe205082
18 changed files with 711 additions and 758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java Normal file
View File

@ -0,0 +1,34 @@
package com.genersoft.iot.vmp.common;
import java.util.List;
public class SystemAllInfo {
private List<Object> cpu;
private List<Object> mem;
private List<Object> net;
public List<Object> getCpu() {
return cpu;
}
public void setCpu(List<Object> cpu) {
this.cpu = cpu;
}
public List<Object> getMem() {
return mem;
}
public void setMem(List<Object> mem) {
this.mem = mem;
}
public List<Object> getNet() {
return net;
}
public void setNet(List<Object> net) {
this.net = net;
}
}

4
src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java
View File

@ -22,14 +22,14 @@ public class SystemInfoTimerTask {
@Autowired
private IRedisCatchStorage redisCatchStorage;
@Scheduled(fixedRate = 1000) //每1秒执行一次
@Scheduled(fixedRate = 2000) //每1秒执行一次
public void execute(){
try {
double cpuInfo = SystemInfoUtils.getCpuInfo();
redisCatchStorage.addCpuInfo(cpuInfo);
double memInfo = SystemInfoUtils.getMemInfo();
redisCatchStorage.addMemInfo(memInfo);
Map<String, String> networkInterfaces = SystemInfoUtils.getNetworkInterfaces();
Map<String, Double> networkInterfaces = SystemInfoUtils.getNetworkInterfaces();
redisCatchStorage.addNetInfo(networkInterfaces);
} catch (InterruptedException e) {
logger.error("[获取系统信息失败] {}", e.getMessage());

6
src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java
View File

@ -2,6 +2,7 @@ package com.genersoft.iot.vmp.storager;
import com.alibaba.fastjson.JSONObject;
import com.genersoft.iot.vmp.common.StreamInfo;
import com.genersoft.iot.vmp.common.SystemAllInfo;
import com.genersoft.iot.vmp.gb28181.bean.*;
import com.genersoft.iot.vmp.media.zlm.dto.*;
import com.genersoft.iot.vmp.service.bean.GPSMsgInfo;
@ -196,7 +197,7 @@ public interface IRedisCatchStorage {
void addMemInfo(double memInfo);
void addNetInfo(Map<String, String> networkInterfaces);
void addNetInfo(Map<String, Double> networkInterfaces);
void sendMobilePositionMsg(JSONObject jsonObject);
@ -240,4 +241,7 @@ public interface IRedisCatchStorage {
List<SendRtpItem> querySendRTPServerByChnnelId(String channelId);
List<SendRtpItem> querySendRTPServerByStream(String stream);
SystemAllInfo getSystemInfo();
}

47
src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java
View File

@ -3,6 +3,7 @@ package com.genersoft.iot.vmp.storager.impl;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.genersoft.iot.vmp.common.StreamInfo;
import com.genersoft.iot.vmp.common.SystemAllInfo;
import com.genersoft.iot.vmp.common.SystemInfoDto;
import com.genersoft.iot.vmp.common.VideoManagerConstants;
import com.genersoft.iot.vmp.conf.UserSetting;
@ -694,12 +695,12 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
@Override
public void addCpuInfo(double cpuInfo) {
String key = VideoManagerConstants.SYSTEM_INFO_CPU_PREFIX + userSetting.getServerId();
SystemInfoDto<Double> systemInfoDto = new SystemInfoDto<>();
systemInfoDto.setTime(DateUtil.getNow());
systemInfoDto.setData(cpuInfo);
RedisUtil.lSet(key, systemInfoDto);
Map<String, String> infoMap = new HashMap<>();
infoMap.put("time", DateUtil.getNow());
infoMap.put("data", cpuInfo + "");
RedisUtil.lSet(key, infoMap);
// 每秒一个，最多只存30个
if (RedisUtil.lGetListSize(key) > 30) {
if (RedisUtil.lGetListSize(key) >= 30) {
for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) {
RedisUtil.lLeftPop(key);
}
@ -709,12 +710,12 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
@Override
public void addMemInfo(double memInfo) {
String key = VideoManagerConstants.SYSTEM_INFO_MEM_PREFIX + userSetting.getServerId();
SystemInfoDto<Double> systemInfoDto = new SystemInfoDto<>();
systemInfoDto.setTime(DateUtil.getNow());
systemInfoDto.setData(memInfo);
RedisUtil.lSet(key, systemInfoDto);
Map<String, String> infoMap = new HashMap<>();
infoMap.put("time", DateUtil.getNow());
infoMap.put("data", memInfo + "");
RedisUtil.lSet(key, infoMap);
// 每秒一个，最多只存30个
if (RedisUtil.lGetListSize(key) > 30) {
if (RedisUtil.lGetListSize(key) >= 30) {
for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) {
RedisUtil.lLeftPop(key);
}
@ -722,20 +723,34 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
}
@Override
public void addNetInfo(Map<String, String> networkInterfaces) {
public void addNetInfo(Map<String, Double> networkInterfaces) {
String key = VideoManagerConstants.SYSTEM_INFO_NET_PREFIX + userSetting.getServerId();
SystemInfoDto<Map<String, String>> systemInfoDto = new SystemInfoDto<>();
systemInfoDto.setTime(DateUtil.getNow());
systemInfoDto.setData(networkInterfaces);
RedisUtil.lSet(key, systemInfoDto);
Map<String, Object> infoMap = new HashMap<>();
infoMap.put("time", DateUtil.getNow());
for (String netKey : networkInterfaces.keySet()) {
infoMap.put(netKey, networkInterfaces.get(netKey));
}
RedisUtil.lSet(key, infoMap);
// 每秒一个，最多只存30个
if (RedisUtil.lGetListSize(key) > 30) {
if (RedisUtil.lGetListSize(key) >= 30) {
for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) {
RedisUtil.lLeftPop(key);
}
}
}
@Override
public SystemAllInfo getSystemInfo() {
String cpuKey = VideoManagerConstants.SYSTEM_INFO_CPU_PREFIX + userSetting.getServerId();
String memKey = VideoManagerConstants.SYSTEM_INFO_MEM_PREFIX + userSetting.getServerId();
String netKey = VideoManagerConstants.SYSTEM_INFO_NET_PREFIX + userSetting.getServerId();
SystemAllInfo systemAllInfo = new SystemAllInfo();
systemAllInfo.setCpu(RedisUtil.lGet(cpuKey, 0, -1));
systemAllInfo.setMem(RedisUtil.lGet(memKey, 0, -1));
systemAllInfo.setNet(RedisUtil.lGet(netKey, 0, -1));
return systemAllInfo;
}
@Override
public void sendMobilePositionMsg(JSONObject jsonObject) {
String key = VideoManagerConstants.VM_MSG_SUBSCRIBE_MOBILE_POSITION;

30
src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java
View File

@ -8,6 +8,7 @@ import oshi.hardware.NetworkIF;
import oshi.software.os.OperatingSystem;
import oshi.util.FormatUtil;
import java.text.DecimalFormat;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@ -62,21 +63,32 @@ public class SystemInfoUtils {
* 获取网络上传和下载
* @return
*/
public static Map<String,String> getNetworkInterfaces() {
public static Map<String,Double> getNetworkInterfaces() {
SystemInfo si = new SystemInfo();
HardwareAbstractionLayer hal = si.getHardware();
List<NetworkIF> networkIFs = hal.getNetworkIFs();
int i= networkIFs.size() -1;
NetworkIF net= networkIFs.get(i);
List<NetworkIF> beforeRecvNetworkIFs = hal.getNetworkIFs();
NetworkIF beforeBet= beforeRecvNetworkIFs.get(beforeRecvNetworkIFs.size() - 1);
long beforeRecv = beforeBet.getBytesRecv();
long beforeSend = beforeBet.getBytesSent();
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
throw new RuntimeException(e);
}
List<NetworkIF> afterNetworkIFs = hal.getNetworkIFs();
NetworkIF afterNet = afterNetworkIFs.get(afterNetworkIFs.size() - 1);
String in = FormatUtil.formatBytes(net.getBytesRecv());
String out = FormatUtil.formatBytes(net.getBytesSent());
HashMap<String, String> map = new HashMap<>();
map.put("in",in);
map.put("out",out);
HashMap<String, Double> map = new HashMap<>();
// 速度单位: Mbps
map.put("in",formatUnits(afterNet.getBytesRecv()-beforeRecv, 1048576L));
map.put("out",formatUnits(afterNet.getBytesSent()-beforeSend, 1048576L));
return map;
}
public static double formatUnits(long value, long prefix) {
return (double)value / (double)prefix;
}
/**
* 获取进程数
* @return

13
src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java
View File

@ -3,6 +3,7 @@ package com.genersoft.iot.vmp.vmanager.server;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.genersoft.iot.vmp.VManageBootstrap;
import com.genersoft.iot.vmp.common.SystemAllInfo;
import com.genersoft.iot.vmp.common.VersionPo;
import com.genersoft.iot.vmp.conf.SipConfig;
import com.genersoft.iot.vmp.conf.UserSetting;
@ -12,6 +13,7 @@ import com.genersoft.iot.vmp.media.zlm.ZlmHttpHookSubscribe;
import com.genersoft.iot.vmp.media.zlm.dto.IHookSubscribe;
import com.genersoft.iot.vmp.media.zlm.dto.MediaServerItem;
import com.genersoft.iot.vmp.service.IMediaServerService;
import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
import com.genersoft.iot.vmp.utils.SpringBeanFactory;
import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
import gov.nist.javax.sip.SipStackImpl;
@ -60,6 +62,9 @@ public class ServerController {
@Autowired
private ThreadPoolTaskExecutor taskExecutor;
@Autowired
private IRedisCatchStorage redisCatchStorage;
@GetMapping(value = "/media_server/list")
@ResponseBody
@ -202,4 +207,12 @@ public class ServerController {
public List<IHookSubscribe> getHooks() {
return zlmHttpHookSubscribe.getAll();
}
@GetMapping(value = "/system/info")
@ResponseBody
@Operation(summary = "获取系统信息")
public SystemAllInfo getSystemInfo() {
SystemAllInfo systemAllInfo = redisCatchStorage.getSystemInfo();
return systemAllInfo;
}
}

6
src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java
View File

@ -40,7 +40,7 @@ public class ApiDeviceController {
// private DeviceOffLineDetector offLineDetector;
/**
* 分页获取设备列表 TODO 现在直接返回，尚未实现分页
* 分页获取设备列表 现在直接返回，尚未实现分页
* @param start
* @param limit
* @param q
@ -130,11 +130,11 @@ public class ApiDeviceController {
deviceJOSNChannel.put("DeviceID", device.getDeviceId());
deviceJOSNChannel.put("DeviceName", device.getName());
deviceJOSNChannel.put("DeviceOnline", device.getOnline() == 1);
deviceJOSNChannel.put("Channel", 0); // TODO 自定义序号
deviceJOSNChannel.put("Channel", 0); // 自定义序号
deviceJOSNChannel.put("Name", deviceChannel.getName());
deviceJOSNChannel.put("Custom", false);
deviceJOSNChannel.put("CustomName", "");
deviceJOSNChannel.put("SubCount", deviceChannel.getSubCount()); // TODO ? 子节点数, SubCount > 0 表示该通道为子目录
deviceJOSNChannel.put("SubCount", deviceChannel.getSubCount()); // 子节点数, SubCount > 0 表示该通道为子目录
deviceJOSNChannel.put("SnapURL", "");
deviceJOSNChannel.put("Manufacturer ", deviceChannel.getManufacture());
deviceJOSNChannel.put("Model", deviceChannel.getModel());

10
src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java
View File

@ -57,12 +57,12 @@ public class ApiStreamController {
* @param serial 设备编号
* @param channel 通道序号 默认值: 1
* @param code 通道编号,通过 /api/v1/device/channellist 获取的 ChannelList.ID, 该参数和 channel 二选一传递即可
* @param cdn TODO 转推 CDN 地址, 形如: [rtmp|rtsp]://xxx, encodeURIComponent
* @param audio TODO 是否开启音频, 默认 开启
* @param cdn 转推 CDN 地址, 形如: [rtmp|rtsp]://xxx, encodeURIComponent
* @param audio 是否开启音频, 默认 开启
* @param transport 流传输模式， 默认 UDP
* @param checkchannelstatus TODO 是否检查通道状态, 默认 false, 表示 拉流前不检查通道状态是否在线
* @param transportmode TODO 当 transport=TCP 时有效, 指示流传输主被动模式, 默认被动
* @param timeout TODO 拉流超时(秒),
* @param checkchannelstatus 是否检查通道状态, 默认 false, 表示 拉流前不检查通道状态是否在线
* @param transportmode 当 transport=TCP 时有效, 指示流传输主被动模式, 默认被动
* @param timeout 拉流超时(秒),
* @return
*/
@RequestMapping(value = "/start")

92
web_src/package-lock.json generated
View File

@ -18,6 +18,7 @@
"ol": "^6.14.1",
"postcss-pxtorem": "^5.1.1",
"uuid": "^8.3.2",
"v-charts": "^1.19.0",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-clipboards": "^1.3.0",
@ -3938,12 +3939,31 @@
},
"node_modules/echarts": {
"version": "4.9.0",
"resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1619495447964&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"dependencies": {
"zrender": "4.3.2"
}
},
"node_modules/echarts-amap": {
"version": "1.0.0-rc.6",
"resolved": "https://registry.npmmirror.com/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
"integrity": "sha512-cYJCKoQdnkZXrGweYrveU1HruZd1c0KmsF1U8o3FtsvgR2jVL5ZUpGFjMmFtpolHOUFqxizk+s+QBLkYuOWL6Q=="
},
"node_modules/echarts-liquidfill": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
"integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ==",
"peerDependencies": {
"echarts": "^4.8.0",
"zrender": "^4.3.1"
}
},
"node_modules/echarts-wordcloud": {
"version": "1.1.3",
"resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
"integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
},
"node_modules/ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@ -7160,6 +7180,11 @@
"node": ">=0.10.0"
}
},
"node_modules/numerify": {
"version": "1.2.9",
"resolved": "https://registry.npmmirror.com/numerify/-/numerify-1.2.9.tgz",
"integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@ -13004,6 +13029,11 @@
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
"dev": true
},
"node_modules/utils-lite": {
"version": "0.1.10",
"resolved": "https://registry.npmmirror.com/utils-lite/-/utils-lite-0.1.10.tgz",
"integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
},
"node_modules/utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
@ -13021,6 +13051,22 @@
"uuid": "dist/bin/uuid"
}
},
"node_modules/v-charts": {
"version": "1.19.0",
"resolved": "https://registry.npmmirror.com/v-charts/-/v-charts-1.19.0.tgz",
"integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
"dependencies": {
"echarts-amap": "1.0.0-rc.6",
"echarts-liquidfill": "^2.0.2",
"echarts-wordcloud": "^1.1.3",
"numerify": "1.2.9",
"utils-lite": "0.1.10"
},
"peerDependencies": {
"echarts": ">3.0.0",
"vue": ">2.0.0"
}
},
"node_modules/validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
@ -17796,12 +17842,28 @@
},
"echarts": {
"version": "4.9.0",
"resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1619495447964&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
"integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
"requires": {
"zrender": "4.3.2"
}
},
"echarts-amap": {
"version": "1.0.0-rc.6",
"resolved": "https://registry.npmmirror.com/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
"integrity": "sha512-cYJCKoQdnkZXrGweYrveU1HruZd1c0KmsF1U8o3FtsvgR2jVL5ZUpGFjMmFtpolHOUFqxizk+s+QBLkYuOWL6Q=="
},
"echarts-liquidfill": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
"integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ==",
"requires": {}
},
"echarts-wordcloud": {
"version": "1.1.3",
"resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
"integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@ -20470,6 +20532,11 @@
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
"numerify": {
"version": "1.2.9",
"resolved": "https://registry.npmmirror.com/numerify/-/numerify-1.2.9.tgz",
"integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@ -25327,6 +25394,11 @@
"integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
"dev": true
},
"utils-lite": {
"version": "0.1.10",
"resolved": "https://registry.npmmirror.com/utils-lite/-/utils-lite-0.1.10.tgz",
"integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
},
"utils-merge": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
@ -25338,6 +25410,18 @@
"resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
},
"v-charts": {
"version": "1.19.0",
"resolved": "https://registry.npmmirror.com/v-charts/-/v-charts-1.19.0.tgz",
"integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
"requires": {
"echarts-amap": "1.0.0-rc.6",
"echarts-liquidfill": "^2.0.2",
"echarts-wordcloud": "^1.1.3",
"numerify": "1.2.9",
"utils-lite": "0.1.10"
}
},
"validate-npm-package-license": {
"version": "3.0.4",
"resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",

1
web_src/package.json
View File

@ -20,6 +20,7 @@
"ol": "^6.14.1",
"postcss-pxtorem": "^5.1.1",
"uuid": "^8.3.2",
"v-charts": "^1.19.0",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-clipboards": "^1.3.0",

121
web_src/src/components/console.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div id="app" style="width: 100%">
<div class="page-header">
<div class="page-title">控制台</div>
</div>
<el-row style="width: 100%">
<el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
<div class="control-cell" id="ThreadsLoad" >
<div style="width:100%; height:100%; ">
<consoleCPU ref="consoleCPU"></consoleCPU>
</div>
</div>
</el-col>
<el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
<div class="control-cell" id="WorkThreadsLoad" >
<div style="width:100%; height:100%; ">
<consoleMem ref="consoleMem"></consoleMem>
</div>
</div>
</el-col>
<el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
<div class="control-cell" id="WorkThreadsLoad" >
<div style="width:100%; height:100%; ">
<consoleNet ref="consoleNet"></consoleNet>
</div>
</div>
</el-col>
<el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
<div class="control-cell" id="WorkThreadsLoad" >
<div style="width:100%; height:100%; ">
<consoleCPU></consoleCPU>
</div>
</div>
</el-col>
<el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
<div class="control-cell" id="WorkThreadsLoad" >
<div style="width:100%; height:100%; ">
<consoleCPU></consoleCPU>
</div>
</div>
</el-col>
<el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
<div class="control-cell" id="WorkThreadsLoad" >
<div style="width:100%; height:100%; ">
<consoleCPU></consoleCPU>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import uiHeader from '../layout/UiHeader.vue'
import consoleCPU from './console/ConsoleCPU.vue'
import consoleMem from './console/ConsoleMEM.vue'
import consoleNet from './console/ConsoleNet.vue'
import echarts from 'echarts';
export default {
name: 'app',
components: {
echarts,
uiHeader,
consoleCPU,
consoleMem,
consoleNet
},
data() {
return {
timer: null
};
},
created() {
this.getSystemInfo();
this.loopForSystemInfo();
},
destroyed() {
},
methods: {
loopForSystemInfo: function (){
if (this.timer != null) {
window.clearTimeout(this.timer);
}
this.timer = setTimeout(()=>{
this.getSystemInfo();
this.timer = null;
this.loopForSystemInfo()
}, 2000)
},
getSystemInfo: function (){
this.$axios({
method: 'get',
url: `/api/server/system/info`,
}).then( (res)=> {
if (res.data.code === 0) {
this.$refs.consoleCPU.setData(res.data.data.cpu)
this.$refs.consoleMem.setData(res.data.data.mem)
this.$refs.consoleNet.setData(res.data.data.net)
}
}).catch( (error)=> {
});
}
}
};
</script>
<style>
#app {
height: 100%;
}
.control-cell {
padding-top: 10px;
padding-left: 5px;
padding-right: 10px;
height: 360px;
}
</style>

105
web_src/src/components/console/ConsoleCPU.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div id="consoleCPU" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
<ve-line :data="chartData" :extend="extend" width="100%" height="100%" :legend-visible="false"></ve-line>
</div>
</template>
<script>
import moment from "moment/moment";
export default {
name: 'consoleCPU',
data() {
return {
chartData: {
columns: ['time', 'data'],
rows: []
},
extend: {
title: {
show: true,
text: "CPU",
left: "center",
top: 20,
},
grid: {
show: true,
right: "30px",
containLabel: true,
},
xAxis: {
time: "time",
max: 'dataMax',
boundaryGap: ['20%', '20%'],
axisLabel: {
formatter:(v)=>{
return moment(v).format("HH:mm:ss");
},
showMaxLabel: true,
}
},
yAxis: {
type: 'value',
min: 0,
max: 1,
splitNumber: 6,
position: "left",
silent: true,
axisLabel: {
formatter: (v)=>{
return v*100 + "%";
},
}
},
tooltip: {
trigger: 'axis',
formatter: (data)=>{
console.log(data)
return moment(data[0].data[0]).format("HH:mm:ss") + "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
}
},
series: {
itemStyle: {
color: "#409EFF"
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#50a3f8' // 0% 处的颜色
}, {
offset: 1, color: '#69b0fa' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
}
};
},
mounted() {
// setInterval(()=>{
// // console.log(111111)
// for (let i = 0; i < this.chartData.rows.length; i++) {
// this.chartData.rows[i].销售额 += 1000;
// }
// },1000)
},
destroyed() {
},
methods: {
setData: function(data) {
this.chartData .rows = data;
}
}
};
</script>

105
web_src/src/components/console/ConsoleMEM.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div id="ConsoleMEM" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
<ve-line :data="chartData" :extend="extend" width="100%" height="100%" :legend-visible="false"></ve-line>
</div>
</template>
<script>
import moment from "moment/moment";
export default {
name: 'ConsoleMEM',
data() {
return {
chartData: {
columns: ['time', 'data'],
rows: []
},
extend: {
title: {
show: true,
text: "内存",
left: "center",
top: 20,
},
grid: {
show: true,
right: "30px",
containLabel: true,
},
xAxis: {
time: "time",
max: 'dataMax',
boundaryGap: ['20%', '20%'],
axisLabel: {
formatter:(v)=>{
return moment(v).format("HH:mm:ss");
},
showMaxLabel: true,
}
},
yAxis: {
type: 'value',
min: 0,
max: 1,
splitNumber: 6,
position: "left",
silent: true,
axisLabel: {
formatter: (v)=>{
return v*100 + "%";
},
}
},
tooltip: {
trigger: 'axis',
formatter: (data)=>{
console.log(data)
return moment(data[0].data[0]).format("HH:mm:ss") + "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
}
},
series: {
itemStyle: {
color: "#409EFF"
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#50a3f8' // 0% 处的颜色
}, {
offset: 1, color: '#69b0fa' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
}
};
},
mounted() {
// setInterval(()=>{
// // console.log(111111)
// for (let i = 0; i < this.chartData.rows.length; i++) {
// this.chartData.rows[i].销售额 += 1000;
// }
// },1000)
},
destroyed() {
},
methods: {
setData: function(data) {
this.chartData .rows = data;
}
}
};
</script>

86
web_src/src/components/console/ConsoleMediaServer.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div id="ConsoleMediaServer" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
<ve-histogram :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-histogram>
</div>
</template>
<script>
import moment from "moment/moment";
export default {
name: 'ConsoleMediaServer',
data() {
return {
chartData: {
columns: ['time', 'in', 'out'],
rows: [
]
},
chartSettings: {
area: true,
labelMap: {
'in': '下载',
'out': '上传'
},
},
extend: {
title: {
show: true,
text: "网络",
left: "center",
top: 20,
},
grid: {
show: true,
right: "30px",
containLabel: true,
},
xAxis: {
time: "time",
max: 'dataMax',
boundaryGap: ['20%', '20%'],
axisLabel: {
formatter:(v)=>{
return moment(v).format("HH:mm:ss");
},
showMaxLabel: true,
},
},
tooltip: {
trigger: 'axis',
formatter: (data)=>{
console.log(parseFloat(data[0].data[1]).toFixed(2))
console.log(parseFloat(data[1].data[1]).toFixed(2))
console.log("############")
return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
}
},
legend: {
left: "center",
bottom: "15px",
}
}
};
},
mounted() {
// setInterval(()=>{
// // console.log(111111)
// for (let i = 0; i < this.chartData.rows.length; i++) {
// this.chartData.rows[i].销售额 += 1000;
// }
// },1000)
},
destroyed() {
},
methods: {
setData: function(data) {
console.log(data)
this.chartData .rows = data;
}
}
};
</script>

85
web_src/src/components/console/ConsoleNet.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div id="ConsoleNet" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
<ve-line :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-line>
</div>
</template>
<script>
import moment from "moment/moment";
export default {
name: 'ConsoleNet',
data() {
return {
chartData: {
columns: ['time', 'in', 'out'],
rows: []
},
chartSettings: {
area: true,
labelMap: {
'in': '下载',
'out': '上传'
},
},
extend: {
title: {
show: true,
text: "网络",
left: "center",
top: 20,
},
grid: {
show: true,
right: "30px",
containLabel: true,
},
xAxis: {
time: "time",
max: 'dataMax',
boundaryGap: ['20%', '20%'],
axisLabel: {
formatter:(v)=>{
return moment(v).format("HH:mm:ss");
},
showMaxLabel: true,
},
},
tooltip: {
trigger: 'axis',
formatter: (data)=>{
console.log(parseFloat(data[0].data[1]).toFixed(2))
console.log(parseFloat(data[1].data[1]).toFixed(2))
console.log("############")
return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
}
},
legend: {
left: "center",
bottom: "15px",
}
}
};
},
mounted() {
// setInterval(()=>{
// // console.log(111111)
// for (let i = 0; i < this.chartData.rows.length; i++) {
// this.chartData.rows[i].销售额 += 1000;
// }
// },1000)
},
destroyed() {
},
methods: {
setData: function(data) {
console.log(data)
this.chartData .rows = data;
}
}
};
</script>

714
web_src/src/components/control.vue
View File

@ -1,714 +0,0 @@
<template>
<div id="app" style="width: 100%">
<div class="page-header">
<div class="page-title">控制台</div>
<div class="page-header-btn">
节点选择:
<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 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">
<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--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>
<!-- <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" style="margin-right:10px;">table1</div>
</el-col>
<el-col :span="12">
<div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div>
</el-col>
</el-row>
<el-table :data="allSessionData" style="margin-top: 1rem;">
<el-table-column prop="peer_ip" label="远端"></el-table-column>
<el-table-column prop="local_ip" label="本地"></el-table-column>
<el-table-column prop="typeid" label="类型"></el-table-column>
<el-table-column align="right">
<template v-slot:default="scope">
<el-button size="mini" icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import uiHeader from '../layout/UiHeader.vue'
import MediaServer from './service/MediaServer'
import echarts from 'echarts';
export default {
name: 'app',
components: {
echarts,
uiHeader
},
data() {
return {
tableOption: {
// legend: {},
xAxis: {},
yAxis: {},
label: {},
tooltip: {},
dataZoom: [],
series: []
},
table1Option: {
// legend: {},
xAxis: {},
yAxis: {},
label: {},
tooltip: {},
series: []
},
mChart: null,
mChart1: null,
charZoomStart: 0,
charZoomEnd: 100,
chartInterval: 0, //更新图表统计图定时任务标识
allSessionData: [],
visible: false,
wvpVisible: false,
serverConfig: {},
wvpServerConfig: {},
wvpServerVersion: {},
mediaServer: new MediaServer(),
mediaServerChoose: null,
loadCount: 0,
mediaServerList: []
};
},
mounted() {
this.initTable()
this.chartInterval = setInterval(this.updateData, 3000);
this.mediaServer.getOnlineMediaServerList((data) => {
this.mediaServerList = data.data;
if (this.mediaServerList && this.mediaServerList.length > 0) {
this.mediaServerChoose = this.mediaServerList[0].id
this.loadCount = this.mediaServerList[0].count;
this.updateData();
}
})
},
destroyed() {
clearInterval(this.chartInterval); //释放定时任务
},
methods: {
chooseMediaChange: function (val) {
this.loadCount = 0
this.initTable()
this.updateData();
},
updateData: function () {
this.getThreadsLoad();
this.getLoadCount();
this.getAllSession();
},
/**
* 获取线程状态
*/
getThreadsLoad: function () {
let that = this;
if (!!that.mediaServerChoose) {
this.$axios({
method: 'get',
url: '/zlm/' + that.mediaServerChoose + '/index/api/getThreadsLoad'
}).then(function (res) {
if (res.data.code === 0) {
that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
hour12: false
}));
that.table1Option.xAxis.data.push(new Date().toLocaleTimeString('chinese', {
hour12: false
}));
for (var i = 0; i < res.data.data.length; i++) {
if (that.tableOption.series[i] === undefined) {
let data = {
data: [],
type: 'line'
};
let data1 = {
data: [],
type: 'line'
};
data.data.push(res.data.data[i].delay);
data1.data.push(res.data.data[i].load);
that.tableOption.series.push(data);
that.table1Option.series.push(data1);
} else {
that.tableOption.series[i].data.push(res.data.data[i].delay);
that.table1Option.series[i].data.push(res.data.data[i].load);
}
}
that.tableOption.dataZoom[0].start = that.charZoomStart;
that.tableOption.dataZoom[0].end = that.charZoomEnd;
that.table1Option.dataZoom[0].start = that.charZoomStart;
that.table1Option.dataZoom[0].end = that.charZoomEnd;
//that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
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()
})
}
});
}
},
getLoadCount: function () {
let that = this;
if (!!that.mediaServerChoose) {
that.mediaServer.getMediaServer(that.mediaServerChoose, (data) => {
if (data.code == 0) {
that.loadCount = data.data.count
}
})
}
},
initTable: function () {
let that = this;
this.tableOption.xAxis = {
type: 'category',
data: [], // x轴数据
name: '时间', // x轴名称
// x轴名称样式
nameTextStyle: {
fontWeight: 300,
fontSize: 15
}
};
this.tableOption.yAxis = {
type: 'value',
name: '延迟率', // y轴名称
boundaryGap: [0, '100%'],
max: 100,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
// y轴名称样式
nameTextStyle: {
fontWeight: 300,
fontSize: 15
}
};
this.tableOption.dataZoom = [{
show: true,
start: this.charZoomStart,
end: this.charZoomEnd
}];
this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
this.myChart.setOption(this.tableOption);
this.myChart.on('dataZoom', function (event) {
if (event.batch) {
that.charZoomStart = event.batch[0].start;
that.charZoomEnd = event.batch[0].end;
} else {
that.charZoomStart = event.start;
that.charZoomEnd = event.end;
}
});
this.table1Option.xAxis = {
type: 'category',
data: [], // x轴数据
name: '时间', // x轴名称
// x轴名称样式
nameTextStyle: {
fontWeight: 300,
fontSize: 15
}
};
this.table1Option.yAxis = {
type: 'value',
name: '负载率', // y轴名称
boundaryGap: [0, '100%'],
max: 100,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %'
},
// y轴名称样式
nameTextStyle: {
fontWeight: 300,
fontSize: 15
}
};
this.table1Option.dataZoom = [{
show: true,
start: this.charZoomStart,
end: this.charZoomEnd
}];
this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
this.myChart1.setOption(this.table1Option);
this.myChart1.on('dataZoom', function (event) {
if (event.batch) {
that.charZoomStart = event.batch[0].start;
that.charZoomEnd = event.batch[0].end;
} else {
that.charZoomStart = event.start;
that.charZoomEnd = event.end;
}
});
},
getAllSession: function () {
this.allSessionData = [];
if (!!this.mediaServerChoose) {
this.$axios({
method: 'get',
url: '/zlm/' + this.mediaServerChoose + '/index/api/getAllSession'
}).then((res)=> {
res.data.data.forEach(item => {
let data = {
peer_ip: item.peer_ip,
local_ip: item.local_ip,
typeid: item.typeid,
id: item.id
};
this.allSessionData.push(data);
});
});
}
},
getServerConfig: function () {
if (!!this.mediaServerChoose) {
this.$axios({
method: 'get',
url: '/zlm/' + this.mediaServerChoose + '/index/api/getServerConfig'
}).then((res)=> {
let info = res.data.data[0];
let serverInfo = {}
for (let i = 0; i < Object.keys(info).length; i++) {
let key = Object.keys(info)[i];
let group = key.substring(0, key.indexOf("."))
let itemKey = key.substring(key.indexOf(".") + 1)
if (!serverInfo[group]) serverInfo[group] = {}
serverInfo[group][itemKey] = info[key]
}
this.serverConfig = serverInfo;
this.visible = true;
});
}
},
getWVPServerConfig: function () {
let that = this;
this.$axios({
method: 'get',
url: '/api/server/config'
}).then(function (res) {
console.log(res)
that.wvpServerConfig = res.data.data;
that.wvpVisible = true;
});
this.$axios({
method: 'get',
url: '/api/server/version'
}).then(function (res) {
console.log(res)
that.wvpServerVersion = res.data.data;
that.wvpVisible = true;
});
},
reStartServer: function () {
let that = this;
if (!!!this.mediaServerChoose) {
this.$message({
type: 'info',
message: '未选择节点'
});
return;
}
this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let that = this;
this.$axios({
method: 'get',
url: '/zlm/' + that.mediaServerChoose + '/index/api/restartServer'
}).then(function (res) {
that.getAllSession();
if (res.data.code === 0) {
that.$message({
type: 'success',
message: '操作完成'
});
}
});
});
},
deleteRow: function (index, tabledata) {
let that = this;
this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.deleteSession(tabledata[index].id);
})
.catch(() => {
console.log('id：' + JSON.stringify(tabledata[index]));
this.$message({
type: 'info',
message: '已取消删除'
});
});
console.log(JSON.stringify(tabledata[index]));
},
deleteSession: function (id) {
if (!!this.mediaServerChoose) {
this.$axios({
method: 'get',
url: '/zlm/' + this.mediaServerChoose + '/index/api/kick_session?id=' + id
}).then((res)=>{
this.getAllSession();
this.$message({
type: 'success',
message: '删除成功!'
});
});
}
},
getNameFromKey: function (key) {
let nameData = {
"waitTrack": "等待编码信息",
"interfaceAuthenticationExcludes": "不进行鉴权的接口",
"playTimeout": "点播超时时间",
"autoApplyPlay": "自动点播",
"recordPushLive": "推流录像",
"redisConfig": "自动配置redis",
"thirdPartyGBIdReg": "stream信息正则",
"savePositionHistory": "保存轨迹信息",
"interfaceAuthentication": "接口鉴权",
"serverId": "服务ID",
"logInDatebase": "日志存储进数据库",
"seniorSdp": "扩展SDP",
"password": "密码",
"port": "端口号",
"keepaliveTimeOut": "心跳超时",
"domain": "国标域",
"ip": "IP地址",
"monitorIp": "监听IP",
"alarm": "存储报警信息",
"ptzSpeed": "云台控制速度",
"id": "国标ID",
"registerTimeInterval": "注册间隔",
"artifactId": "模块名称",
"version": "版本",
"project": "工程",
"git_Revision": "GIT修订版本",
"git_BRANCH": "GIT分支",
"git_URL": "GIT地址",
"build_DATE": "构建时间",
"create_By": "作者",
"git_Revision_SHORT": "GIT修订版本（短）",
"build_Jdk": "构建用JDK",
};
console.log(key + ": " + nameData[key])
if (nameData[key]) {
return nameData[key]
} else {
return key;
}
},
getMediaKeyNameFromKey: function (key) {
let nameData = {
"waitTrack": "等待编码信息",
"interfaceAuthenticationExcludes": "不进行鉴权的接口",
"playTimeout": "点播超时时间",
"autoApplyPlay": "自动点播",
"recordPushLive": "推流录像",
"redisConfig": "自动配置redis",
"thirdPartyGBIdReg": "stream信息正则",
"savePositionHistory": "保存轨迹信息",
"interfaceAuthentication": "接口鉴权",
"serverId": "服务ID",
"logInDatebase": "日志存储进数据库",
"seniorSdp": "扩展SDP",
"password": "密码",
"port": "端口号",
"keepaliveTimeOut": "心跳超时",
"domain": "国标域",
"ip": "IP地址",
"monitorIp": "监听IP",
"alarm": "存储报警信息",
"ptzSpeed": "云台控制速度",
"id": "国标ID",
"registerTimeInterval": "注册间隔",
"artifactId": "模块名称",
"version": "版本",
"project": "工程",
"git_Revision": "GIT修订版本",
"git_BRANCH": "GIT分支",
"git_URL": "GIT地址",
"build_DATE": "构建时间",
"create_By": "作者",
"git_Revision_SHORT": "GIT修订版本（短）",
"build_Jdk": "构建用JDK",
};
console.log(key + ": " + nameData[key])
if (nameData[key]) {
return nameData[key]
} else {
return key;
}
}
}
};
</script>
<style>
#app {
height: 100%;
}
.control-table {
background-color: #ffffff;
height: 25rem;
}
.table-c {
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
.table-c td {
border-left: 1px solid #dcdcdc;
border-top: 1px solid #dcdcdc;
padding: 0.2rem;
}
.el-table {
width: 99.9% !important;
}
</style>

2
web_src/src/main.js
View File

@ -7,6 +7,7 @@ import router from './router/index.js';
import axios from 'axios';
import VueCookies from 'vue-cookies';
import echarts from 'echarts';
import VCharts from 'v-charts';
import VueClipboard from 'vue-clipboard2';
import { Notification } from 'element-ui';
@ -39,6 +40,7 @@ Vue.use(VueClipboards);
Vue.prototype.$axios = axios;
Vue.prototype.$notify = Notification;
Vue.use(Contextmenu);
Vue.use(VCharts);
axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";

8
web_src/src/router/index.js
View File

@ -2,7 +2,7 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from "../layout/index.vue"
import control from '../components/control.vue'
import console from '../components/console.vue'
import deviceList from '../components/DeviceList.vue'
import channelList from '../components/channelList.vue'
import pushVideoList from '../components/PushVideoList.vue'
@ -37,11 +37,11 @@ export default new VueRouter({
path: '/',
name: 'home',
component: Layout,
redirect: '/control',
redirect: '/console',
children: [
{
path: '/control',
component: control,
path: '/console',
component: console,
},
{
path: '/live',