guzijian / wvp-GB28181-pro · Commits

Commit 3ffe2050827482ba83a1c15afbf346275be86187

Authored by 648540858
1 parent 95d36770

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

Inline Side-by-side
Showing 18 changed files with 711 additions and 758 deletions
src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java 0 → 100644
  View file @3ffe205
  1 +package com.genersoft.iot.vmp.common;
  2 +
  3 +import java.util.List;
  4 +
  5 +public class SystemAllInfo {
  6 +
  7 + private List<Object> cpu;
  8 + private List<Object> mem;
  9 + private List<Object> net;
  10 +
  11 + public List<Object> getCpu() {
  12 + return cpu;
  13 + }
  14 +
  15 + public void setCpu(List<Object> cpu) {
  16 + this.cpu = cpu;
  17 + }
  18 +
  19 + public List<Object> getMem() {
  20 + return mem;
  21 + }
  22 +
  23 + public void setMem(List<Object> mem) {
  24 + this.mem = mem;
  25 + }
  26 +
  27 + public List<Object> getNet() {
  28 + return net;
  29 + }
  30 +
  31 + public void setNet(List<Object> net) {
  32 + this.net = net;
  33 + }
  34 +}
src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java
  View file @3ffe205
@@ -22,14 +22,14 @@ public class SystemInfoTimerTask { @@ -22,14 +22,14 @@ public class SystemInfoTimerTask {
22 @Autowired 22 @Autowired
23 private IRedisCatchStorage redisCatchStorage; 23 private IRedisCatchStorage redisCatchStorage;
24 24
25 - @Scheduled(fixedRate = 1000) //每1秒执行一次 25 + @Scheduled(fixedRate = 2000) //每1秒执行一次
26 public void execute(){ 26 public void execute(){
27 try { 27 try {
28 double cpuInfo = SystemInfoUtils.getCpuInfo(); 28 double cpuInfo = SystemInfoUtils.getCpuInfo();
29 redisCatchStorage.addCpuInfo(cpuInfo); 29 redisCatchStorage.addCpuInfo(cpuInfo);
30 double memInfo = SystemInfoUtils.getMemInfo(); 30 double memInfo = SystemInfoUtils.getMemInfo();
31 redisCatchStorage.addMemInfo(memInfo); 31 redisCatchStorage.addMemInfo(memInfo);
32 - Map<String, String> networkInterfaces = SystemInfoUtils.getNetworkInterfaces(); 32 + Map<String, Double> networkInterfaces = SystemInfoUtils.getNetworkInterfaces();
33 redisCatchStorage.addNetInfo(networkInterfaces); 33 redisCatchStorage.addNetInfo(networkInterfaces);
34 } catch (InterruptedException e) { 34 } catch (InterruptedException e) {
35 logger.error("[获取系统信息失败] {}", e.getMessage()); 35 logger.error("[获取系统信息失败] {}", e.getMessage());
src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java
  View file @3ffe205
@@ -2,6 +2,7 @@ package com.genersoft.iot.vmp.storager; @@ -2,6 +2,7 @@ package com.genersoft.iot.vmp.storager;
2 2
3 import com.alibaba.fastjson.JSONObject; 3 import com.alibaba.fastjson.JSONObject;
4 import com.genersoft.iot.vmp.common.StreamInfo; 4 import com.genersoft.iot.vmp.common.StreamInfo;
  5 +import com.genersoft.iot.vmp.common.SystemAllInfo;
5 import com.genersoft.iot.vmp.gb28181.bean.*; 6 import com.genersoft.iot.vmp.gb28181.bean.*;
6 import com.genersoft.iot.vmp.media.zlm.dto.*; 7 import com.genersoft.iot.vmp.media.zlm.dto.*;
7 import com.genersoft.iot.vmp.service.bean.GPSMsgInfo; 8 import com.genersoft.iot.vmp.service.bean.GPSMsgInfo;
@@ -196,7 +197,7 @@ public interface IRedisCatchStorage { @@ -196,7 +197,7 @@ public interface IRedisCatchStorage {
196 197
197 void addMemInfo(double memInfo); 198 void addMemInfo(double memInfo);
198 199
199 - void addNetInfo(Map<String, String> networkInterfaces); 200 + void addNetInfo(Map<String, Double> networkInterfaces);
200 201
201 void sendMobilePositionMsg(JSONObject jsonObject); 202 void sendMobilePositionMsg(JSONObject jsonObject);
202 203
@@ -240,4 +241,7 @@ public interface IRedisCatchStorage { @@ -240,4 +241,7 @@ public interface IRedisCatchStorage {
240 List<SendRtpItem> querySendRTPServerByChnnelId(String channelId); 241 List<SendRtpItem> querySendRTPServerByChnnelId(String channelId);
241 242
242 List<SendRtpItem> querySendRTPServerByStream(String stream); 243 List<SendRtpItem> querySendRTPServerByStream(String stream);
  244 +
  245 + SystemAllInfo getSystemInfo();
  246 +
243 } 247 }
src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java
  View file @3ffe205
@@ -3,6 +3,7 @@ package com.genersoft.iot.vmp.storager.impl; @@ -3,6 +3,7 @@ package com.genersoft.iot.vmp.storager.impl;
3 import com.alibaba.fastjson.JSON; 3 import com.alibaba.fastjson.JSON;
4 import com.alibaba.fastjson.JSONObject; 4 import com.alibaba.fastjson.JSONObject;
5 import com.genersoft.iot.vmp.common.StreamInfo; 5 import com.genersoft.iot.vmp.common.StreamInfo;
  6 +import com.genersoft.iot.vmp.common.SystemAllInfo;
6 import com.genersoft.iot.vmp.common.SystemInfoDto; 7 import com.genersoft.iot.vmp.common.SystemInfoDto;
7 import com.genersoft.iot.vmp.common.VideoManagerConstants; 8 import com.genersoft.iot.vmp.common.VideoManagerConstants;
8 import com.genersoft.iot.vmp.conf.UserSetting; 9 import com.genersoft.iot.vmp.conf.UserSetting;
@@ -694,12 +695,12 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage { @@ -694,12 +695,12 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
694 @Override 695 @Override
695 public void addCpuInfo(double cpuInfo) { 696 public void addCpuInfo(double cpuInfo) {
696 String key = VideoManagerConstants.SYSTEM_INFO_CPU_PREFIX + userSetting.getServerId(); 697 String key = VideoManagerConstants.SYSTEM_INFO_CPU_PREFIX + userSetting.getServerId();
697 - SystemInfoDto<Double> systemInfoDto = new SystemInfoDto<>();  
698 - systemInfoDto.setTime(DateUtil.getNow());  
699 - systemInfoDto.setData(cpuInfo);  
700 - RedisUtil.lSet(key, systemInfoDto); 698 + Map<String, String> infoMap = new HashMap<>();
  699 + infoMap.put("time", DateUtil.getNow());
  700 + infoMap.put("data", cpuInfo + "");
  701 + RedisUtil.lSet(key, infoMap);
701 // 每秒一个，最多只存30个 702 // 每秒一个，最多只存30个
702 - if (RedisUtil.lGetListSize(key) > 30) { 703 + if (RedisUtil.lGetListSize(key) >= 30) {
703 for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) { 704 for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) {
704 RedisUtil.lLeftPop(key); 705 RedisUtil.lLeftPop(key);
705 } 706 }
@@ -709,12 +710,12 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage { @@ -709,12 +710,12 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
709 @Override 710 @Override
710 public void addMemInfo(double memInfo) { 711 public void addMemInfo(double memInfo) {
711 String key = VideoManagerConstants.SYSTEM_INFO_MEM_PREFIX + userSetting.getServerId(); 712 String key = VideoManagerConstants.SYSTEM_INFO_MEM_PREFIX + userSetting.getServerId();
712 - SystemInfoDto<Double> systemInfoDto = new SystemInfoDto<>();  
713 - systemInfoDto.setTime(DateUtil.getNow());  
714 - systemInfoDto.setData(memInfo);  
715 - RedisUtil.lSet(key, systemInfoDto); 713 + Map<String, String> infoMap = new HashMap<>();
  714 + infoMap.put("time", DateUtil.getNow());
  715 + infoMap.put("data", memInfo + "");
  716 + RedisUtil.lSet(key, infoMap);
716 // 每秒一个，最多只存30个 717 // 每秒一个，最多只存30个
717 - if (RedisUtil.lGetListSize(key) > 30) { 718 + if (RedisUtil.lGetListSize(key) >= 30) {
718 for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) { 719 for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) {
719 RedisUtil.lLeftPop(key); 720 RedisUtil.lLeftPop(key);
720 } 721 }
@@ -722,14 +723,16 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage { @@ -722,14 +723,16 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
722 } 723 }
723 724
724 @Override 725 @Override
725 - public void addNetInfo(Map<String, String> networkInterfaces) { 726 + public void addNetInfo(Map<String, Double> networkInterfaces) {
726 String key = VideoManagerConstants.SYSTEM_INFO_NET_PREFIX + userSetting.getServerId(); 727 String key = VideoManagerConstants.SYSTEM_INFO_NET_PREFIX + userSetting.getServerId();
727 - SystemInfoDto<Map<String, String>> systemInfoDto = new SystemInfoDto<>();  
728 - systemInfoDto.setTime(DateUtil.getNow());  
729 - systemInfoDto.setData(networkInterfaces);  
730 - RedisUtil.lSet(key, systemInfoDto); 728 + Map<String, Object> infoMap = new HashMap<>();
  729 + infoMap.put("time", DateUtil.getNow());
  730 + for (String netKey : networkInterfaces.keySet()) {
  731 + infoMap.put(netKey, networkInterfaces.get(netKey));
  732 + }
  733 + RedisUtil.lSet(key, infoMap);
731 // 每秒一个，最多只存30个 734 // 每秒一个，最多只存30个
732 - if (RedisUtil.lGetListSize(key) > 30) { 735 + if (RedisUtil.lGetListSize(key) >= 30) {
733 for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) { 736 for (int i = 0; i < RedisUtil.lGetListSize(key) - 30; i++) {
734 RedisUtil.lLeftPop(key); 737 RedisUtil.lLeftPop(key);
735 } 738 }
@@ -737,6 +740,18 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage { @@ -737,6 +740,18 @@ public class RedisCatchStorageImpl implements IRedisCatchStorage {
737 } 740 }
738 741
739 @Override 742 @Override
  743 + public SystemAllInfo getSystemInfo() {
  744 + String cpuKey = VideoManagerConstants.SYSTEM_INFO_CPU_PREFIX + userSetting.getServerId();
  745 + String memKey = VideoManagerConstants.SYSTEM_INFO_MEM_PREFIX + userSetting.getServerId();
  746 + String netKey = VideoManagerConstants.SYSTEM_INFO_NET_PREFIX + userSetting.getServerId();
  747 + SystemAllInfo systemAllInfo = new SystemAllInfo();
  748 + systemAllInfo.setCpu(RedisUtil.lGet(cpuKey, 0, -1));
  749 + systemAllInfo.setMem(RedisUtil.lGet(memKey, 0, -1));
  750 + systemAllInfo.setNet(RedisUtil.lGet(netKey, 0, -1));
  751 + return systemAllInfo;
  752 + }
  753 +
  754 + @Override
740 public void sendMobilePositionMsg(JSONObject jsonObject) { 755 public void sendMobilePositionMsg(JSONObject jsonObject) {
741 String key = VideoManagerConstants.VM_MSG_SUBSCRIBE_MOBILE_POSITION; 756 String key = VideoManagerConstants.VM_MSG_SUBSCRIBE_MOBILE_POSITION;
742 logger.info("[redis发送通知] 移动位置 {}: {}", key, jsonObject.toString()); 757 logger.info("[redis发送通知] 移动位置 {}: {}", key, jsonObject.toString());
src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java
  View file @3ffe205
@@ -8,6 +8,7 @@ import oshi.hardware.NetworkIF; @@ -8,6 +8,7 @@ import oshi.hardware.NetworkIF;
8 import oshi.software.os.OperatingSystem; 8 import oshi.software.os.OperatingSystem;
9 import oshi.util.FormatUtil; 9 import oshi.util.FormatUtil;
10 10
  11 +import java.text.DecimalFormat;
11 import java.util.HashMap; 12 import java.util.HashMap;
12 import java.util.List; 13 import java.util.List;
13 import java.util.Map; 14 import java.util.Map;
@@ -62,21 +63,32 @@ public class SystemInfoUtils { @@ -62,21 +63,32 @@ public class SystemInfoUtils {
62 * 获取网络上传和下载 63 * 获取网络上传和下载
63 * @return 64 * @return
64 */ 65 */
65 - public static Map<String,String> getNetworkInterfaces() { 66 + public static Map<String,Double> getNetworkInterfaces() {
66 SystemInfo si = new SystemInfo(); 67 SystemInfo si = new SystemInfo();
67 HardwareAbstractionLayer hal = si.getHardware(); 68 HardwareAbstractionLayer hal = si.getHardware();
68 - List<NetworkIF> networkIFs = hal.getNetworkIFs();  
69 - int i= networkIFs.size() -1;  
70 - NetworkIF net= networkIFs.get(i); 69 + List<NetworkIF> beforeRecvNetworkIFs = hal.getNetworkIFs();
  70 + NetworkIF beforeBet= beforeRecvNetworkIFs.get(beforeRecvNetworkIFs.size() - 1);
  71 + long beforeRecv = beforeBet.getBytesRecv();
  72 + long beforeSend = beforeBet.getBytesSent();
  73 + try {
  74 + Thread.sleep(1000);
  75 + } catch (InterruptedException e) {
  76 + throw new RuntimeException(e);
  77 + }
  78 + List<NetworkIF> afterNetworkIFs = hal.getNetworkIFs();
  79 + NetworkIF afterNet = afterNetworkIFs.get(afterNetworkIFs.size() - 1);
71 80
72 - String in = FormatUtil.formatBytes(net.getBytesRecv());  
73 - String out = FormatUtil.formatBytes(net.getBytesSent());  
74 - HashMap<String, String> map = new HashMap<>();  
75 - map.put("in",in);  
76 - map.put("out",out); 81 + HashMap<String, Double> map = new HashMap<>();
  82 + // 速度单位: Mbps
  83 + map.put("in",formatUnits(afterNet.getBytesRecv()-beforeRecv, 1048576L));
  84 + map.put("out",formatUnits(afterNet.getBytesSent()-beforeSend, 1048576L));
77 return map; 85 return map;
78 } 86 }
79 87
  88 + public static double formatUnits(long value, long prefix) {
  89 + return (double)value / (double)prefix;
  90 + }
  91 +
80 /** 92 /**
81 * 获取进程数 93 * 获取进程数
82 * @return 94 * @return
src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java
  View file @3ffe205
@@ -3,6 +3,7 @@ package com.genersoft.iot.vmp.vmanager.server; @@ -3,6 +3,7 @@ package com.genersoft.iot.vmp.vmanager.server;
3 import com.alibaba.fastjson.JSON; 3 import com.alibaba.fastjson.JSON;
4 import com.alibaba.fastjson.JSONObject; 4 import com.alibaba.fastjson.JSONObject;
5 import com.genersoft.iot.vmp.VManageBootstrap; 5 import com.genersoft.iot.vmp.VManageBootstrap;
  6 +import com.genersoft.iot.vmp.common.SystemAllInfo;
6 import com.genersoft.iot.vmp.common.VersionPo; 7 import com.genersoft.iot.vmp.common.VersionPo;
7 import com.genersoft.iot.vmp.conf.SipConfig; 8 import com.genersoft.iot.vmp.conf.SipConfig;
8 import com.genersoft.iot.vmp.conf.UserSetting; 9 import com.genersoft.iot.vmp.conf.UserSetting;
@@ -12,6 +13,7 @@ import com.genersoft.iot.vmp.media.zlm.ZlmHttpHookSubscribe; @@ -12,6 +13,7 @@ import com.genersoft.iot.vmp.media.zlm.ZlmHttpHookSubscribe;
12 import com.genersoft.iot.vmp.media.zlm.dto.IHookSubscribe; 13 import com.genersoft.iot.vmp.media.zlm.dto.IHookSubscribe;
13 import com.genersoft.iot.vmp.media.zlm.dto.MediaServerItem; 14 import com.genersoft.iot.vmp.media.zlm.dto.MediaServerItem;
14 import com.genersoft.iot.vmp.service.IMediaServerService; 15 import com.genersoft.iot.vmp.service.IMediaServerService;
  16 +import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
15 import com.genersoft.iot.vmp.utils.SpringBeanFactory; 17 import com.genersoft.iot.vmp.utils.SpringBeanFactory;
16 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode; 18 import com.genersoft.iot.vmp.vmanager.bean.ErrorCode;
17 import gov.nist.javax.sip.SipStackImpl; 19 import gov.nist.javax.sip.SipStackImpl;
@@ -60,6 +62,9 @@ public class ServerController { @@ -60,6 +62,9 @@ public class ServerController {
60 @Autowired 62 @Autowired
61 private ThreadPoolTaskExecutor taskExecutor; 63 private ThreadPoolTaskExecutor taskExecutor;
62 64
  65 + @Autowired
  66 + private IRedisCatchStorage redisCatchStorage;
  67 +
63 68
64 @GetMapping(value = "/media_server/list") 69 @GetMapping(value = "/media_server/list")
65 @ResponseBody 70 @ResponseBody
@@ -202,4 +207,12 @@ public class ServerController { @@ -202,4 +207,12 @@ public class ServerController {
202 public List<IHookSubscribe> getHooks() { 207 public List<IHookSubscribe> getHooks() {
203 return zlmHttpHookSubscribe.getAll(); 208 return zlmHttpHookSubscribe.getAll();
204 } 209 }
  210 +
  211 + @GetMapping(value = "/system/info")
  212 + @ResponseBody
  213 + @Operation(summary = "获取系统信息")
  214 + public SystemAllInfo getSystemInfo() {
  215 + SystemAllInfo systemAllInfo = redisCatchStorage.getSystemInfo();
  216 + return systemAllInfo;
  217 + }
205 } 218 }
src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java
  View file @3ffe205
@@ -40,7 +40,7 @@ public class ApiDeviceController { @@ -40,7 +40,7 @@ public class ApiDeviceController {
40 // private DeviceOffLineDetector offLineDetector; 40 // private DeviceOffLineDetector offLineDetector;
41 41
42 /** 42 /**
43 - * 分页获取设备列表 TODO 现在直接返回，尚未实现分页 43 + * 分页获取设备列表 现在直接返回，尚未实现分页
44 * @param start 44 * @param start
45 * @param limit 45 * @param limit
46 * @param q 46 * @param q
@@ -130,11 +130,11 @@ public class ApiDeviceController { @@ -130,11 +130,11 @@ public class ApiDeviceController {
130 deviceJOSNChannel.put("DeviceID", device.getDeviceId()); 130 deviceJOSNChannel.put("DeviceID", device.getDeviceId());
131 deviceJOSNChannel.put("DeviceName", device.getName()); 131 deviceJOSNChannel.put("DeviceName", device.getName());
132 deviceJOSNChannel.put("DeviceOnline", device.getOnline() == 1); 132 deviceJOSNChannel.put("DeviceOnline", device.getOnline() == 1);
133 - deviceJOSNChannel.put("Channel", 0); // TODO 自定义序号 133 + deviceJOSNChannel.put("Channel", 0); // 自定义序号
134 deviceJOSNChannel.put("Name", deviceChannel.getName()); 134 deviceJOSNChannel.put("Name", deviceChannel.getName());
135 deviceJOSNChannel.put("Custom", false); 135 deviceJOSNChannel.put("Custom", false);
136 deviceJOSNChannel.put("CustomName", ""); 136 deviceJOSNChannel.put("CustomName", "");
137 - deviceJOSNChannel.put("SubCount", deviceChannel.getSubCount()); // TODO ? 子节点数, SubCount > 0 表示该通道为子目录 137 + deviceJOSNChannel.put("SubCount", deviceChannel.getSubCount()); // 子节点数, SubCount > 0 表示该通道为子目录
138 deviceJOSNChannel.put("SnapURL", ""); 138 deviceJOSNChannel.put("SnapURL", "");
139 deviceJOSNChannel.put("Manufacturer ", deviceChannel.getManufacture()); 139 deviceJOSNChannel.put("Manufacturer ", deviceChannel.getManufacture());
140 deviceJOSNChannel.put("Model", deviceChannel.getModel()); 140 deviceJOSNChannel.put("Model", deviceChannel.getModel());
src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java
  View file @3ffe205
@@ -57,12 +57,12 @@ public class ApiStreamController { @@ -57,12 +57,12 @@ public class ApiStreamController {
57 * @param serial 设备编号 57 * @param serial 设备编号
58 * @param channel 通道序号 默认值: 1 58 * @param channel 通道序号 默认值: 1
59 * @param code 通道编号,通过 /api/v1/device/channellist 获取的 ChannelList.ID, 该参数和 channel 二选一传递即可 59 * @param code 通道编号,通过 /api/v1/device/channellist 获取的 ChannelList.ID, 该参数和 channel 二选一传递即可
60 - * @param cdn TODO 转推 CDN 地址, 形如: [rtmp|rtsp]://xxx, encodeURIComponent  
61 - * @param audio TODO 是否开启音频, 默认 开启 60 + * @param cdn 转推 CDN 地址, 形如: [rtmp|rtsp]://xxx, encodeURIComponent
  61 + * @param audio 是否开启音频, 默认 开启
62 * @param transport 流传输模式， 默认 UDP 62 * @param transport 流传输模式， 默认 UDP
63 - * @param checkchannelstatus TODO 是否检查通道状态, 默认 false, 表示 拉流前不检查通道状态是否在线  
64 - * @param transportmode TODO 当 transport=TCP 时有效, 指示流传输主被动模式, 默认被动  
65 - * @param timeout TODO 拉流超时(秒), 63 + * @param checkchannelstatus 是否检查通道状态, 默认 false, 表示 拉流前不检查通道状态是否在线
  64 + * @param transportmode 当 transport=TCP 时有效, 指示流传输主被动模式, 默认被动
  65 + * @param timeout 拉流超时(秒),
66 * @return 66 * @return
67 */ 67 */
68 @RequestMapping(value = "/start") 68 @RequestMapping(value = "/start")
web_src/package-lock.json
  View file @3ffe205
@@ -18,6 +18,7 @@ @@ -18,6 +18,7 @@
18 "ol": "^6.14.1", 18 "ol": "^6.14.1",
19 "postcss-pxtorem": "^5.1.1", 19 "postcss-pxtorem": "^5.1.1",
20 "uuid": "^8.3.2", 20 "uuid": "^8.3.2",
  21 + "v-charts": "^1.19.0",
21 "vue": "^2.6.11", 22 "vue": "^2.6.11",
22 "vue-clipboard2": "^0.3.1", 23 "vue-clipboard2": "^0.3.1",
23 "vue-clipboards": "^1.3.0", 24 "vue-clipboards": "^1.3.0",
@@ -3938,12 +3939,31 @@ @@ -3938,12 +3939,31 @@
3938 }, 3939 },
3939 "node_modules/echarts": { 3940 "node_modules/echarts": {
3940 "version": "4.9.0", 3941 "version": "4.9.0",
3941 - "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",  
3942 - "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=", 3942 + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
  3943 + "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
3943 "dependencies": { 3944 "dependencies": {
3944 "zrender": "4.3.2" 3945 "zrender": "4.3.2"
3945 } 3946 }
3946 }, 3947 },
  3948 + "node_modules/echarts-amap": {
  3949 + "version": "1.0.0-rc.6",
  3950 + "resolved": "https://registry.npmmirror.com/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
  3951 + "integrity": "sha512-cYJCKoQdnkZXrGweYrveU1HruZd1c0KmsF1U8o3FtsvgR2jVL5ZUpGFjMmFtpolHOUFqxizk+s+QBLkYuOWL6Q=="
  3952 + },
  3953 + "node_modules/echarts-liquidfill": {
  3954 + "version": "2.0.6",
  3955 + "resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
  3956 + "integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ==",
  3957 + "peerDependencies": {
  3958 + "echarts": "^4.8.0",
  3959 + "zrender": "^4.3.1"
  3960 + }
  3961 + },
  3962 + "node_modules/echarts-wordcloud": {
  3963 + "version": "1.1.3",
  3964 + "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
  3965 + "integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
  3966 + },
3947 "node_modules/ee-first": { 3967 "node_modules/ee-first": {
3948 "version": "1.1.1", 3968 "version": "1.1.1",
3949 "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", 3969 "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -7160,6 +7180,11 @@ @@ -7160,6 +7180,11 @@
7160 "node": ">=0.10.0" 7180 "node": ">=0.10.0"
7161 } 7181 }
7162 }, 7182 },
  7183 + "node_modules/numerify": {
  7184 + "version": "1.2.9",
  7185 + "resolved": "https://registry.npmmirror.com/numerify/-/numerify-1.2.9.tgz",
  7186 + "integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
  7187 + },
7163 "node_modules/object-assign": { 7188 "node_modules/object-assign": {
7164 "version": "4.1.1", 7189 "version": "4.1.1",
7165 "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", 7190 "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@@ -13004,6 +13029,11 @@ @@ -13004,6 +13029,11 @@
13004 "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=", 13029 "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
13005 "dev": true 13030 "dev": true
13006 }, 13031 },
  13032 + "node_modules/utils-lite": {
  13033 + "version": "0.1.10",
  13034 + "resolved": "https://registry.npmmirror.com/utils-lite/-/utils-lite-0.1.10.tgz",
  13035 + "integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
  13036 + },
13007 "node_modules/utils-merge": { 13037 "node_modules/utils-merge": {
13008 "version": "1.0.1", 13038 "version": "1.0.1",
13009 "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz", 13039 "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
@@ -13021,6 +13051,22 @@ @@ -13021,6 +13051,22 @@
13021 "uuid": "dist/bin/uuid" 13051 "uuid": "dist/bin/uuid"
13022 } 13052 }
13023 }, 13053 },
  13054 + "node_modules/v-charts": {
  13055 + "version": "1.19.0",
  13056 + "resolved": "https://registry.npmmirror.com/v-charts/-/v-charts-1.19.0.tgz",
  13057 + "integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
  13058 + "dependencies": {
  13059 + "echarts-amap": "1.0.0-rc.6",
  13060 + "echarts-liquidfill": "^2.0.2",
  13061 + "echarts-wordcloud": "^1.1.3",
  13062 + "numerify": "1.2.9",
  13063 + "utils-lite": "0.1.10"
  13064 + },
  13065 + "peerDependencies": {
  13066 + "echarts": ">3.0.0",
  13067 + "vue": ">2.0.0"
  13068 + }
  13069 + },
13024 "node_modules/validate-npm-package-license": { 13070 "node_modules/validate-npm-package-license": {
13025 "version": "3.0.4", 13071 "version": "3.0.4",
13026 "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz", 13072 "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
@@ -17796,12 +17842,28 @@ @@ -17796,12 +17842,28 @@
17796 }, 17842 },
17797 "echarts": { 17843 "echarts": {
17798 "version": "4.9.0", 17844 "version": "4.9.0",
17799 - "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",  
17800 - "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=", 17845 + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
  17846 + "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
17801 "requires": { 17847 "requires": {
17802 "zrender": "4.3.2" 17848 "zrender": "4.3.2"
17803 } 17849 }
17804 }, 17850 },
  17851 + "echarts-amap": {
  17852 + "version": "1.0.0-rc.6",
  17853 + "resolved": "https://registry.npmmirror.com/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
  17854 + "integrity": "sha512-cYJCKoQdnkZXrGweYrveU1HruZd1c0KmsF1U8o3FtsvgR2jVL5ZUpGFjMmFtpolHOUFqxizk+s+QBLkYuOWL6Q=="
  17855 + },
  17856 + "echarts-liquidfill": {
  17857 + "version": "2.0.6",
  17858 + "resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-2.0.6.tgz",
  17859 + "integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ==",
  17860 + "requires": {}
  17861 + },
  17862 + "echarts-wordcloud": {
  17863 + "version": "1.1.3",
  17864 + "resolved": "https://registry.npmmirror.com/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
  17865 + "integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
  17866 + },
17805 "ee-first": { 17867 "ee-first": {
17806 "version": "1.1.1", 17868 "version": "1.1.1",
17807 "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", 17869 "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -20470,6 +20532,11 @@ @@ -20470,6 +20532,11 @@
20470 "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", 20532 "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
20471 "dev": true 20533 "dev": true
20472 }, 20534 },
  20535 + "numerify": {
  20536 + "version": "1.2.9",
  20537 + "resolved": "https://registry.npmmirror.com/numerify/-/numerify-1.2.9.tgz",
  20538 + "integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
  20539 + },
20473 "object-assign": { 20540 "object-assign": {
20474 "version": "4.1.1", 20541 "version": "4.1.1",
20475 "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", 20542 "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
@@ -25327,6 +25394,11 @@ @@ -25327,6 +25394,11 @@
25327 "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=", 25394 "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
25328 "dev": true 25395 "dev": true
25329 }, 25396 },
  25397 + "utils-lite": {
  25398 + "version": "0.1.10",
  25399 + "resolved": "https://registry.npmmirror.com/utils-lite/-/utils-lite-0.1.10.tgz",
  25400 + "integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
  25401 + },
25330 "utils-merge": { 25402 "utils-merge": {
25331 "version": "1.0.1", 25403 "version": "1.0.1",
25332 "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz", 25404 "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
@@ -25338,6 +25410,18 @@ @@ -25338,6 +25410,18 @@
25338 "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz", 25410 "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
25339 "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" 25411 "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
25340 }, 25412 },
  25413 + "v-charts": {
  25414 + "version": "1.19.0",
  25415 + "resolved": "https://registry.npmmirror.com/v-charts/-/v-charts-1.19.0.tgz",
  25416 + "integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
  25417 + "requires": {
  25418 + "echarts-amap": "1.0.0-rc.6",
  25419 + "echarts-liquidfill": "^2.0.2",
  25420 + "echarts-wordcloud": "^1.1.3",
  25421 + "numerify": "1.2.9",
  25422 + "utils-lite": "0.1.10"
  25423 + }
  25424 + },
25341 "validate-npm-package-license": { 25425 "validate-npm-package-license": {
25342 "version": "3.0.4", 25426 "version": "3.0.4",
25343 "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz", 25427 "resolved": "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz",
web_src/package.json
  View file @3ffe205
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 "ol": "^6.14.1", 20 "ol": "^6.14.1",
21 "postcss-pxtorem": "^5.1.1", 21 "postcss-pxtorem": "^5.1.1",
22 "uuid": "^8.3.2", 22 "uuid": "^8.3.2",
  23 + "v-charts": "^1.19.0",
23 "vue": "^2.6.11", 24 "vue": "^2.6.11",
24 "vue-clipboard2": "^0.3.1", 25 "vue-clipboard2": "^0.3.1",
25 "vue-clipboards": "^1.3.0", 26 "vue-clipboards": "^1.3.0",
web_src/src/components/console.vue 0 → 100644
  View file @3ffe205
  1 +<template>
  2 + <div id="app" style="width: 100%">
  3 + <div class="page-header">
  4 + <div class="page-title">控制台</div>
  5 + </div>
  6 + <el-row style="width: 100%">
  7 + <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
  8 + <div class="control-cell" id="ThreadsLoad" >
  9 + <div style="width:100%; height:100%; ">
  10 + <consoleCPU ref="consoleCPU"></consoleCPU>
  11 + </div>
  12 + </div>
  13 + </el-col>
  14 + <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
  15 + <div class="control-cell" id="WorkThreadsLoad" >
  16 + <div style="width:100%; height:100%; ">
  17 + <consoleMem ref="consoleMem"></consoleMem>
  18 + </div>
  19 + </div>
  20 + </el-col>
  21 + <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
  22 + <div class="control-cell" id="WorkThreadsLoad" >
  23 + <div style="width:100%; height:100%; ">
  24 + <consoleNet ref="consoleNet"></consoleNet>
  25 + </div>
  26 + </div>
  27 + </el-col>
  28 + <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
  29 + <div class="control-cell" id="WorkThreadsLoad" >
  30 + <div style="width:100%; height:100%; ">
  31 + <consoleCPU></consoleCPU>
  32 + </div>
  33 + </div>
  34 + </el-col>
  35 + <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
  36 + <div class="control-cell" id="WorkThreadsLoad" >
  37 + <div style="width:100%; height:100%; ">
  38 + <consoleCPU></consoleCPU>
  39 + </div>
  40 + </div>
  41 + </el-col>
  42 + <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
  43 + <div class="control-cell" id="WorkThreadsLoad" >
  44 + <div style="width:100%; height:100%; ">
  45 + <consoleCPU></consoleCPU>
  46 + </div>
  47 + </div>
  48 + </el-col>
  49 +
  50 +
  51 + </el-row>
  52 + </div>
  53 +</template>
  54 +
  55 +<script>
  56 +import uiHeader from '../layout/UiHeader.vue'
  57 +import consoleCPU from './console/ConsoleCPU.vue'
  58 +import consoleMem from './console/ConsoleMEM.vue'
  59 +import consoleNet from './console/ConsoleNet.vue'
  60 +
  61 +import echarts from 'echarts';
  62 +
  63 +export default {
  64 + name: 'app',
  65 + components: {
  66 + echarts,
  67 + uiHeader,
  68 + consoleCPU,
  69 + consoleMem,
  70 + consoleNet
  71 + },
  72 + data() {
  73 + return {
  74 + timer: null
  75 + };
  76 + },
  77 + created() {
  78 + this.getSystemInfo();
  79 + this.loopForSystemInfo();
  80 + },
  81 + destroyed() {
  82 + },
  83 + methods: {
  84 + loopForSystemInfo: function (){
  85 + if (this.timer != null) {
  86 + window.clearTimeout(this.timer);
  87 + }
  88 + this.timer = setTimeout(()=>{
  89 + this.getSystemInfo();
  90 + this.timer = null;
  91 + this.loopForSystemInfo()
  92 + }, 2000)
  93 + },
  94 + getSystemInfo: function (){
  95 + this.$axios({
  96 + method: 'get',
  97 + url: `/api/server/system/info`,
  98 + }).then( (res)=> {
  99 + if (res.data.code === 0) {
  100 + this.$refs.consoleCPU.setData(res.data.data.cpu)
  101 + this.$refs.consoleMem.setData(res.data.data.mem)
  102 + this.$refs.consoleNet.setData(res.data.data.net)
  103 + }
  104 + }).catch( (error)=> {
  105 + });
  106 + }
  107 + }
  108 +};
  109 +</script>
  110 +
  111 +<style>
  112 +#app {
  113 + height: 100%;
  114 +}
  115 +.control-cell {
  116 + padding-top: 10px;
  117 + padding-left: 5px;
  118 + padding-right: 10px;
  119 + height: 360px;
  120 +}
  121 +</style>
web_src/src/components/console/ConsoleCPU.vue 0 → 100644
  View file @3ffe205
  1 +<template>
  2 + <div id="consoleCPU" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
  3 + <ve-line :data="chartData" :extend="extend" width="100%" height="100%" :legend-visible="false"></ve-line>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +
  9 +
  10 +import moment from "moment/moment";
  11 +
  12 +export default {
  13 + name: 'consoleCPU',
  14 + data() {
  15 + return {
  16 + chartData: {
  17 + columns: ['time', 'data'],
  18 + rows: []
  19 + },
  20 +
  21 + extend: {
  22 + title: {
  23 + show: true,
  24 + text: "CPU",
  25 + left: "center",
  26 + top: 20,
  27 +
  28 + },
  29 + grid: {
  30 + show: true,
  31 + right: "30px",
  32 + containLabel: true,
  33 + },
  34 + xAxis: {
  35 + time: "time",
  36 + max: 'dataMax',
  37 + boundaryGap: ['20%', '20%'],
  38 + axisLabel: {
  39 + formatter:(v)=>{
  40 + return moment(v).format("HH:mm:ss");
  41 + },
  42 + showMaxLabel: true,
  43 + }
  44 + },
  45 + yAxis: {
  46 + type: 'value',
  47 + min: 0,
  48 + max: 1,
  49 + splitNumber: 6,
  50 + position: "left",
  51 + silent: true,
  52 + axisLabel: {
  53 + formatter: (v)=>{
  54 + return v*100 + "%";
  55 + },
  56 + }
  57 + },
  58 + tooltip: {
  59 + trigger: 'axis',
  60 + formatter: (data)=>{
  61 + console.log(data)
  62 + return moment(data[0].data[0]).format("HH:mm:ss") + "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
  63 + }
  64 + },
  65 + series: {
  66 + itemStyle: {
  67 + color: "#409EFF"
  68 + },
  69 + areaStyle: {
  70 + color: {
  71 + type: 'linear',
  72 + x: 0,
  73 + y: 0,
  74 + x2: 0,
  75 + y2: 1,
  76 + colorStops: [{
  77 + offset: 0, color: '#50a3f8' // 0% 处的颜色
  78 + }, {
  79 + offset: 1, color: '#69b0fa' // 100% 处的颜色
  80 + }],
  81 + global: false // 缺省为 false
  82 + }
  83 + }
  84 + }
  85 + }
  86 + };
  87 + },
  88 + mounted() {
  89 + // setInterval(()=>{
  90 + // // console.log(111111)
  91 + // for (let i = 0; i < this.chartData.rows.length; i++) {
  92 + // this.chartData.rows[i].销售额 += 1000;
  93 + // }
  94 + // },1000)
  95 + },
  96 + destroyed() {
  97 + },
  98 + methods: {
  99 + setData: function(data) {
  100 + this.chartData .rows = data;
  101 + }
  102 +
  103 + }
  104 +};
  105 +</script>
web_src/src/components/console/ConsoleMEM.vue 0 → 100644
  View file @3ffe205
  1 +<template>
  2 + <div id="ConsoleMEM" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
  3 + <ve-line :data="chartData" :extend="extend" width="100%" height="100%" :legend-visible="false"></ve-line>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +
  9 +
  10 +import moment from "moment/moment";
  11 +
  12 +export default {
  13 + name: 'ConsoleMEM',
  14 + data() {
  15 + return {
  16 + chartData: {
  17 + columns: ['time', 'data'],
  18 + rows: []
  19 + },
  20 +
  21 + extend: {
  22 + title: {
  23 + show: true,
  24 + text: "内存",
  25 + left: "center",
  26 + top: 20,
  27 +
  28 + },
  29 + grid: {
  30 + show: true,
  31 + right: "30px",
  32 + containLabel: true,
  33 + },
  34 + xAxis: {
  35 + time: "time",
  36 + max: 'dataMax',
  37 + boundaryGap: ['20%', '20%'],
  38 + axisLabel: {
  39 + formatter:(v)=>{
  40 + return moment(v).format("HH:mm:ss");
  41 + },
  42 + showMaxLabel: true,
  43 + }
  44 + },
  45 + yAxis: {
  46 + type: 'value',
  47 + min: 0,
  48 + max: 1,
  49 + splitNumber: 6,
  50 + position: "left",
  51 + silent: true,
  52 + axisLabel: {
  53 + formatter: (v)=>{
  54 + return v*100 + "%";
  55 + },
  56 + }
  57 + },
  58 + tooltip: {
  59 + trigger: 'axis',
  60 + formatter: (data)=>{
  61 + console.log(data)
  62 + return moment(data[0].data[0]).format("HH:mm:ss") + "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
  63 + }
  64 + },
  65 + series: {
  66 + itemStyle: {
  67 + color: "#409EFF"
  68 + },
  69 + areaStyle: {
  70 + color: {
  71 + type: 'linear',
  72 + x: 0,
  73 + y: 0,
  74 + x2: 0,
  75 + y2: 1,
  76 + colorStops: [{
  77 + offset: 0, color: '#50a3f8' // 0% 处的颜色
  78 + }, {
  79 + offset: 1, color: '#69b0fa' // 100% 处的颜色
  80 + }],
  81 + global: false // 缺省为 false
  82 + }
  83 + }
  84 + }
  85 + }
  86 + };
  87 + },
  88 + mounted() {
  89 + // setInterval(()=>{
  90 + // // console.log(111111)
  91 + // for (let i = 0; i < this.chartData.rows.length; i++) {
  92 + // this.chartData.rows[i].销售额 += 1000;
  93 + // }
  94 + // },1000)
  95 + },
  96 + destroyed() {
  97 + },
  98 + methods: {
  99 + setData: function(data) {
  100 + this.chartData .rows = data;
  101 + }
  102 +
  103 + }
  104 +};
  105 +</script>
web_src/src/components/console/ConsoleMediaServer.vue 0 → 100644
  View file @3ffe205
  1 +<template>
  2 + <div id="ConsoleMediaServer" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
  3 + <ve-histogram :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-histogram>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +
  9 +
  10 +import moment from "moment/moment";
  11 +
  12 +export default {
  13 + name: 'ConsoleMediaServer',
  14 + data() {
  15 + return {
  16 + chartData: {
  17 + columns: ['time', 'in', 'out'],
  18 + rows: [
  19 + ]
  20 + },
  21 + chartSettings: {
  22 + area: true,
  23 + labelMap: {
  24 + 'in': '下载',
  25 + 'out': '上传'
  26 + },
  27 + },
  28 + extend: {
  29 + title: {
  30 + show: true,
  31 + text: "网络",
  32 + left: "center",
  33 + top: 20,
  34 +
  35 + },
  36 + grid: {
  37 + show: true,
  38 + right: "30px",
  39 + containLabel: true,
  40 + },
  41 + xAxis: {
  42 + time: "time",
  43 + max: 'dataMax',
  44 + boundaryGap: ['20%', '20%'],
  45 + axisLabel: {
  46 + formatter:(v)=>{
  47 + return moment(v).format("HH:mm:ss");
  48 + },
  49 + showMaxLabel: true,
  50 + },
  51 + },
  52 + tooltip: {
  53 + trigger: 'axis',
  54 + formatter: (data)=>{
  55 + console.log(parseFloat(data[0].data[1]).toFixed(2))
  56 + console.log(parseFloat(data[1].data[1]).toFixed(2))
  57 + console.log("############")
  58 + return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
  59 + }
  60 + },
  61 + legend: {
  62 + left: "center",
  63 + bottom: "15px",
  64 + }
  65 + }
  66 + };
  67 + },
  68 + mounted() {
  69 + // setInterval(()=>{
  70 + // // console.log(111111)
  71 + // for (let i = 0; i < this.chartData.rows.length; i++) {
  72 + // this.chartData.rows[i].销售额 += 1000;
  73 + // }
  74 + // },1000)
  75 + },
  76 + destroyed() {
  77 + },
  78 + methods: {
  79 + setData: function(data) {
  80 + console.log(data)
  81 + this.chartData .rows = data;
  82 + }
  83 +
  84 + }
  85 +};
  86 +</script>
web_src/src/components/console/ConsoleNet.vue 0 → 100644
  View file @3ffe205
  1 +<template>
  2 + <div id="ConsoleNet" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
  3 + <ve-line :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-line>
  4 + </div>
  5 +</template>
  6 +
  7 +<script>
  8 +
  9 +
  10 +import moment from "moment/moment";
  11 +
  12 +export default {
  13 + name: 'ConsoleNet',
  14 + data() {
  15 + return {
  16 + chartData: {
  17 + columns: ['time', 'in', 'out'],
  18 + rows: []
  19 + },
  20 + chartSettings: {
  21 + area: true,
  22 + labelMap: {
  23 + 'in': '下载',
  24 + 'out': '上传'
  25 + },
  26 + },
  27 + extend: {
  28 + title: {
  29 + show: true,
  30 + text: "网络",
  31 + left: "center",
  32 + top: 20,
  33 +
  34 + },
  35 + grid: {
  36 + show: true,
  37 + right: "30px",
  38 + containLabel: true,
  39 + },
  40 + xAxis: {
  41 + time: "time",
  42 + max: 'dataMax',
  43 + boundaryGap: ['20%', '20%'],
  44 + axisLabel: {
  45 + formatter:(v)=>{
  46 + return moment(v).format("HH:mm:ss");
  47 + },
  48 + showMaxLabel: true,
  49 + },
  50 + },
  51 + tooltip: {
  52 + trigger: 'axis',
  53 + formatter: (data)=>{
  54 + console.log(parseFloat(data[0].data[1]).toFixed(2))
  55 + console.log(parseFloat(data[1].data[1]).toFixed(2))
  56 + console.log("############")
  57 + return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
  58 + }
  59 + },
  60 + legend: {
  61 + left: "center",
  62 + bottom: "15px",
  63 + }
  64 + }
  65 + };
  66 + },
  67 + mounted() {
  68 + // setInterval(()=>{
  69 + // // console.log(111111)
  70 + // for (let i = 0; i < this.chartData.rows.length; i++) {
  71 + // this.chartData.rows[i].销售额 += 1000;
  72 + // }
  73 + // },1000)
  74 + },
  75 + destroyed() {
  76 + },
  77 + methods: {
  78 + setData: function(data) {
  79 + console.log(data)
  80 + this.chartData .rows = data;
  81 + }
  82 +
  83 + }
  84 +};
  85 +</script>
web_src/src/components/control.vue deleted 100644 → 0
  View file @95d3677
1 -<template>  
2 - <div id="app" style="width: 100%">  
3 - <div class="page-header">  
4 - <div class="page-title">控制台</div>  
5 - <div class="page-header-btn">  
6 - 节点选择:  
7 - <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"  
8 - v-model="mediaServerChoose" placeholder="请选择" default-first-option>  
9 - <el-option  
10 - v-for="item in mediaServerList"  
11 - :key="item.id"  
12 - :label="item.id + '( ' + item.streamIp + ' )'"  
13 - :value="item.id">  
14 - </el-option>  
15 - </el-select>  
16 - <span>{{ loadCount }}</span>  
17 - </div>  
18 - <div class="page-header-btn">  
19 - <el-popover placement="bottom" width="900" height="300" trigger="click">  
20 - <div style="height: 600px; overflow:auto; padding: 20px">  
21 - <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"  
22 - style="margin-bottom: 1rem">  
23 - <template slot="title">  
24 - {{ key }}  
25 - </template>  
26 - <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1">  
27 - <template slot="label">  
28 - {{ getMediaKeyNameFromKey(key1) }}  
29 - </template>  
30 - {{ value1 }}  
31 - </el-descriptions-item>  
32 - </el-descriptions>  
33 - </div>  
34 - <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">媒体服务器配置</el-button>  
35 - </el-popover>  
36 - <el-popover placement="bottom" width="900" height="300" trigger="click">  
37 - <div style="height: 600px;overflow:auto; padding: 20px">  
38 - <el-descriptions title="国标配置" border :column="1">  
39 - <template slot="extra">  
40 - <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"  
41 - v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"  
42 - @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>  
43 - </template>  
44 - <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">  
45 - <template slot="label">  
46 - {{ getNameFromKey(key) }}  
47 - </template>  
48 - {{ value }}  
49 - </el-descriptions-item>  
50 - </el-descriptions>  
51 -  
52 - <div style="margin-top: 1rem">  
53 - <el-descriptions title="基础配置" border :column="1">  
54 - <template slot="extra">  
55 - <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"  
56 - v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"  
57 - @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>  
58 - </template>  
59 - <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">  
60 - <template slot="label">  
61 - {{ getNameFromKey(key) }}  
62 - </template>  
63 - <div v-if="key === 'interfaceAuthenticationExcludes'">  
64 - <el-dropdown>  
65 - <span class="el-dropdown-link">  
66 - 查看<i class="el-icon-arrow-down el-icon--right"></i>  
67 - </span>  
68 - <el-dropdown-menu slot="dropdown">  
69 - <el-dropdown-item  
70 - v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"  
71 - :key="key">{{ value }}  
72 - </el-dropdown-item>  
73 - </el-dropdown-menu>  
74 - </el-dropdown>  
75 - </div>  
76 - <div v-if="key !== 'interfaceAuthenticationExcludes'">  
77 - <div v-if="value === true">  
78 - 已启用  
79 - </div>  
80 - <div v-if="value === false">  
81 - 未启用  
82 - </div>  
83 - <div v-if="value !== true && value !== false">  
84 - {{ value }}  
85 - </div>  
86 - </div>  
87 -  
88 - </el-descriptions-item>  
89 - </el-descriptions>  
90 - </div>  
91 - <div style="margin-top: 1rem">  
92 - <el-descriptions title="版本信息" border :column="1">  
93 - <template slot="extra">  
94 - <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"  
95 - v-clipboard="JSON.stringify(wvpServerVersion) || ''"  
96 - @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>  
97 - </template>  
98 - <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">  
99 - <template slot="label">  
100 - {{ getNameFromKey(key) }}  
101 - </template>  
102 - {{ value }}  
103 - </el-descriptions-item>  
104 - </el-descriptions>  
105 -  
106 -  
107 - </div>  
108 - </div>  
109 - <el-button type="primary" slot="reference" size="mini" @click="getWVPServerConfig()">信令服务器配置</el-button>  
110 - </el-popover>  
111 - <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>  
112 - </div>  
113 - </div>  
114 - <!-- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">-->  
115 - <!-- <span style="font-size: 1rem; font-weight: bold;">控制台</span>-->  
116 - <!-- <div style="position: absolute; right: 17rem; top: 0.3rem;">-->  
117 - <!-- 节点选择:-->  
118 - <!-- <el-select size="mini" @change="chooseMediaChange" style="width: 18rem; margin-right: 8rem;"-->  
119 - <!-- v-model="mediaServerChoose" placeholder="请选择" default-first-option>-->  
120 - <!-- <el-option-->  
121 - <!-- v-for="item in mediaServerList"-->  
122 - <!-- :key="item.id"-->  
123 - <!-- :label="item.id + '( ' + item.streamIp + ' )'"-->  
124 - <!-- :value="item.id">-->  
125 - <!-- </el-option>-->  
126 - <!-- </el-select>-->  
127 - <!-- <span>{{ loadCount }}</span>-->  
128 - <!-- </div>-->  
129 - <!-- <div style="position: absolute; right: 1rem; top: 0.3rem;">-->  
130 - <!-- <el-popover placement="bottom" width="900" height="300" trigger="click">-->  
131 - <!-- <div style="height: 600px; overflow:auto; padding: 20px">-->  
132 - <!-- <el-descriptions v-for="(value, key, index) in serverConfig" :key="key" border :column="1"-->  
133 - <!-- style="margin-bottom: 1rem">-->  
134 - <!-- <template slot="title">-->  
135 - <!-- {{ key }}-->  
136 - <!-- </template>-->  
137 - <!-- <el-descriptions-item v-for="(value1, key1, index1) in serverConfig[key]" :key="key1">-->  
138 - <!-- <template slot="label">-->  
139 - <!-- {{ getMediaKeyNameFromKey(key1) }}-->  
140 - <!-- </template>-->  
141 - <!-- {{ value1 }}-->  
142 - <!-- </el-descriptions-item>-->  
143 - <!-- </el-descriptions>-->  
144 - <!-- </div>-->  
145 - <!-- <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">媒体服务器配置</el-button>-->  
146 - <!-- </el-popover>-->  
147 - <!-- <el-popover placement="bottom" width="900" height="300" trigger="click">-->  
148 - <!-- <div style="height: 600px;overflow:auto; padding: 20px">-->  
149 - <!-- <el-descriptions title="国标配置" border :column="1">-->  
150 - <!-- <template slot="extra">-->  
151 - <!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->  
152 - <!-- v-clipboard="JSON.stringify(wvpServerConfig.sip)|| ''"-->  
153 - <!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->  
154 - <!-- </template>-->  
155 - <!-- <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.sip" :key="key">-->  
156 - <!-- <template slot="label">-->  
157 - <!-- {{ getNameFromKey(key) }}-->  
158 - <!-- </template>-->  
159 - <!-- {{ value }}-->  
160 - <!-- </el-descriptions-item>-->  
161 - <!-- </el-descriptions>-->  
162 -  
163 - <!-- <div style="margin-top: 1rem">-->  
164 - <!-- <el-descriptions title="基础配置" border :column="1">-->  
165 - <!-- <template slot="extra">-->  
166 - <!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->  
167 - <!-- v-clipboard="JSON.stringify(wvpServerConfig.base)|| ''"-->  
168 - <!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->  
169 - <!-- </template>-->  
170 - <!-- <el-descriptions-item v-for="(value, key, index) in wvpServerConfig.base" :key="key">-->  
171 - <!-- <template slot="label">-->  
172 - <!-- {{ getNameFromKey(key) }}-->  
173 - <!-- </template>-->  
174 - <!-- <div v-if="key === 'interfaceAuthenticationExcludes'">-->  
175 - <!-- <el-dropdown>-->  
176 - <!-- <span class="el-dropdown-link">-->  
177 - <!-- 查看<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->  
178 - <!-- </span>-->  
179 - <!-- <el-dropdown-menu slot="dropdown">-->  
180 - <!-- <el-dropdown-item-->  
181 - <!-- v-for="(value, key, index) in wvpServerConfig.base.interfaceAuthenticationExcludes"-->  
182 - <!-- :key="key">{{ value }}-->  
183 - <!-- </el-dropdown-item>-->  
184 - <!-- </el-dropdown-menu>-->  
185 - <!-- </el-dropdown>-->  
186 - <!-- </div>-->  
187 - <!-- <div v-if="key !== 'interfaceAuthenticationExcludes'">-->  
188 - <!-- <div v-if="value === true">-->  
189 - <!-- 已启用-->  
190 - <!-- </div>-->  
191 - <!-- <div v-if="value === false">-->  
192 - <!-- 未启用-->  
193 - <!-- </div>-->  
194 - <!-- <div v-if="value !== true && value !== false">-->  
195 - <!-- {{ value }}-->  
196 - <!-- </div>-->  
197 - <!-- </div>-->  
198 -  
199 - <!-- </el-descriptions-item>-->  
200 - <!-- </el-descriptions>-->  
201 - <!-- </div>-->  
202 - <!-- <div style="margin-top: 1rem">-->  
203 - <!-- <el-descriptions title="版本信息" border :column="1">-->  
204 - <!-- <template slot="extra">-->  
205 - <!-- <el-button style="float: right;" type="primary" size="mini" icon="el-icon-document-copy" title="点击拷贝"-->  
206 - <!-- v-clipboard="JSON.stringify(wvpServerVersion) || ''"-->  
207 - <!-- @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>-->  
208 - <!-- </template>-->  
209 - <!-- <el-descriptions-item v-for="(value, key, index) in wvpServerVersion" :key="key">-->  
210 - <!-- <template slot="label">-->  
211 - <!-- {{ getNameFromKey(key) }}-->  
212 - <!-- </template>-->  
213 - <!-- {{ value }}-->  
214 - <!-- </el-descriptions-item>-->  
215 - <!-- </el-descriptions>-->  
216 -  
217 -  
218 - <!-- </div>-->  
219 - <!-- </div>-->  
220 - <!-- <el-button type="primary" slot="reference" size="mini" @click="getWVPServerConfig()">信令服务器配置</el-button>-->  
221 - <!-- </el-popover>-->  
222 - <!-- <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启媒体服务器</el-button>-->  
223 - <!-- </div>-->  
224 - <!-- </div>-->  
225 - <el-row style="width: 100%">  
226 - <el-col :span="12">  
227 - <div class="control-table" id="ThreadsLoad" style="margin-right:10px;">table1</div>  
228 - </el-col>  
229 - <el-col :span="12">  
230 - <div class="control-table" id="WorkThreadsLoad" style="margin-left:10px;">table2</div>  
231 - </el-col>  
232 - </el-row>  
233 - <el-table :data="allSessionData" style="margin-top: 1rem;">  
234 - <el-table-column prop="peer_ip" label="远端"></el-table-column>  
235 - <el-table-column prop="local_ip" label="本地"></el-table-column>  
236 - <el-table-column prop="typeid" label="类型"></el-table-column>  
237 - <el-table-column align="right">  
238 - <template v-slot:default="scope">  
239 - <el-button size="mini" icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>  
240 - <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除  
241 - </el-button>  
242 - </template>  
243 - </el-table-column>  
244 - </el-table>  
245 - </div>  
246 -</template>  
247 -  
248 -<script>  
249 -import uiHeader from '../layout/UiHeader.vue'  
250 -import MediaServer from './service/MediaServer'  
251 -  
252 -import echarts from 'echarts';  
253 -  
254 -export default {  
255 - name: 'app',  
256 - components: {  
257 - echarts,  
258 - uiHeader  
259 - },  
260 - data() {  
261 - return {  
262 - tableOption: {  
263 - // legend: {},  
264 - xAxis: {},  
265 - yAxis: {},  
266 - label: {},  
267 - tooltip: {},  
268 - dataZoom: [],  
269 - series: []  
270 - },  
271 - table1Option: {  
272 - // legend: {},  
273 - xAxis: {},  
274 - yAxis: {},  
275 - label: {},  
276 - tooltip: {},  
277 - series: []  
278 - },  
279 - mChart: null,  
280 - mChart1: null,  
281 - charZoomStart: 0,  
282 - charZoomEnd: 100,  
283 - chartInterval: 0, //更新图表统计图定时任务标识  
284 - allSessionData: [],  
285 - visible: false,  
286 - wvpVisible: false,  
287 - serverConfig: {},  
288 - wvpServerConfig: {},  
289 - wvpServerVersion: {},  
290 - mediaServer: new MediaServer(),  
291 - mediaServerChoose: null,  
292 - loadCount: 0,  
293 - mediaServerList: []  
294 - };  
295 - },  
296 - mounted() {  
297 - this.initTable()  
298 - this.chartInterval = setInterval(this.updateData, 3000);  
299 - this.mediaServer.getOnlineMediaServerList((data) => {  
300 - this.mediaServerList = data.data;  
301 - if (this.mediaServerList && this.mediaServerList.length > 0) {  
302 - this.mediaServerChoose = this.mediaServerList[0].id  
303 - this.loadCount = this.mediaServerList[0].count;  
304 - this.updateData();  
305 - }  
306 - })  
307 - },  
308 - destroyed() {  
309 - clearInterval(this.chartInterval); //释放定时任务  
310 - },  
311 - methods: {  
312 - chooseMediaChange: function (val) {  
313 - this.loadCount = 0  
314 - this.initTable()  
315 - this.updateData();  
316 - },  
317 - updateData: function () {  
318 - this.getThreadsLoad();  
319 - this.getLoadCount();  
320 - this.getAllSession();  
321 - },  
322 - /**  
323 - * 获取线程状态  
324 - */  
325 - getThreadsLoad: function () {  
326 - let that = this;  
327 - if (!!that.mediaServerChoose) {  
328 - this.$axios({  
329 - method: 'get',  
330 - url: '/zlm/' + that.mediaServerChoose + '/index/api/getThreadsLoad'  
331 - }).then(function (res) {  
332 - if (res.data.code === 0) {  
333 - that.tableOption.xAxis.data.push(new Date().toLocaleTimeString('chinese', {  
334 - hour12: false  
335 - }));  
336 - that.table1Option.xAxis.data.push(new Date().toLocaleTimeString('chinese', {  
337 - hour12: false  
338 - }));  
339 -  
340 - for (var i = 0; i < res.data.data.length; i++) {  
341 - if (that.tableOption.series[i] === undefined) {  
342 - let data = {  
343 - data: [],  
344 - type: 'line'  
345 - };  
346 - let data1 = {  
347 - data: [],  
348 - type: 'line'  
349 - };  
350 - data.data.push(res.data.data[i].delay);  
351 - data1.data.push(res.data.data[i].load);  
352 - that.tableOption.series.push(data);  
353 - that.table1Option.series.push(data1);  
354 - } else {  
355 - that.tableOption.series[i].data.push(res.data.data[i].delay);  
356 - that.table1Option.series[i].data.push(res.data.data[i].load);  
357 - }  
358 - }  
359 - that.tableOption.dataZoom[0].start = that.charZoomStart;  
360 - that.tableOption.dataZoom[0].end = that.charZoomEnd;  
361 - that.table1Option.dataZoom[0].start = that.charZoomStart;  
362 - that.table1Option.dataZoom[0].end = that.charZoomEnd;  
363 - //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));  
364 - that.myChart.setOption(that.tableOption, true);  
365 - // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));  
366 - that.myChart1.setOption(that.table1Option, true);  
367 - that.$nextTick(() => {  
368 - that.myChart.resize()  
369 - that.myChart1.resize()  
370 - })  
371 - }  
372 - });  
373 - }  
374 -  
375 - },  
376 - getLoadCount: function () {  
377 - let that = this;  
378 - if (!!that.mediaServerChoose) {  
379 - that.mediaServer.getMediaServer(that.mediaServerChoose, (data) => {  
380 - if (data.code == 0) {  
381 - that.loadCount = data.data.count  
382 - }  
383 - })  
384 - }  
385 - },  
386 - initTable: function () {  
387 - let that = this;  
388 - this.tableOption.xAxis = {  
389 - type: 'category',  
390 - data: [], // x轴数据  
391 - name: '时间', // x轴名称  
392 - // x轴名称样式  
393 - nameTextStyle: {  
394 - fontWeight: 300,  
395 - fontSize: 15  
396 - }  
397 - };  
398 - this.tableOption.yAxis = {  
399 - type: 'value',  
400 - name: '延迟率', // y轴名称  
401 - boundaryGap: [0, '100%'],  
402 - max: 100,  
403 - axisLabel: {  
404 - show: true,  
405 - interval: 'auto',  
406 - formatter: '{value} %'  
407 - },  
408 - // y轴名称样式  
409 - nameTextStyle: {  
410 - fontWeight: 300,  
411 - fontSize: 15  
412 - }  
413 - };  
414 - this.tableOption.dataZoom = [{  
415 - show: true,  
416 - start: this.charZoomStart,  
417 - end: this.charZoomEnd  
418 - }];  
419 - this.myChart = echarts.init(document.getElementById('ThreadsLoad'));  
420 - this.myChart.setOption(this.tableOption);  
421 - this.myChart.on('dataZoom', function (event) {  
422 - if (event.batch) {  
423 - that.charZoomStart = event.batch[0].start;  
424 - that.charZoomEnd = event.batch[0].end;  
425 - } else {  
426 - that.charZoomStart = event.start;  
427 - that.charZoomEnd = event.end;  
428 - }  
429 - });  
430 -  
431 - this.table1Option.xAxis = {  
432 - type: 'category',  
433 - data: [], // x轴数据  
434 - name: '时间', // x轴名称  
435 - // x轴名称样式  
436 - nameTextStyle: {  
437 - fontWeight: 300,  
438 - fontSize: 15  
439 - }  
440 - };  
441 - this.table1Option.yAxis = {  
442 - type: 'value',  
443 - name: '负载率', // y轴名称  
444 - boundaryGap: [0, '100%'],  
445 - max: 100,  
446 - axisLabel: {  
447 - show: true,  
448 - interval: 'auto',  
449 - formatter: '{value} %'  
450 - },  
451 - // y轴名称样式  
452 - nameTextStyle: {  
453 - fontWeight: 300,  
454 - fontSize: 15  
455 - }  
456 - };  
457 - this.table1Option.dataZoom = [{  
458 - show: true,  
459 - start: this.charZoomStart,  
460 - end: this.charZoomEnd  
461 - }];  
462 - this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));  
463 - this.myChart1.setOption(this.table1Option);  
464 - this.myChart1.on('dataZoom', function (event) {  
465 - if (event.batch) {  
466 - that.charZoomStart = event.batch[0].start;  
467 - that.charZoomEnd = event.batch[0].end;  
468 - } else {  
469 - that.charZoomStart = event.start;  
470 - that.charZoomEnd = event.end;  
471 - }  
472 - });  
473 - },  
474 -  
475 - getAllSession: function () {  
476 - this.allSessionData = [];  
477 - if (!!this.mediaServerChoose) {  
478 - this.$axios({  
479 - method: 'get',  
480 - url: '/zlm/' + this.mediaServerChoose + '/index/api/getAllSession'  
481 - }).then((res)=> {  
482 - res.data.data.forEach(item => {  
483 - let data = {  
484 - peer_ip: item.peer_ip,  
485 - local_ip: item.local_ip,  
486 - typeid: item.typeid,  
487 - id: item.id  
488 - };  
489 - this.allSessionData.push(data);  
490 - });  
491 - });  
492 - }  
493 -  
494 - },  
495 - getServerConfig: function () {  
496 - if (!!this.mediaServerChoose) {  
497 - this.$axios({  
498 - method: 'get',  
499 - url: '/zlm/' + this.mediaServerChoose + '/index/api/getServerConfig'  
500 - }).then((res)=> {  
501 - let info = res.data.data[0];  
502 - let serverInfo = {}  
503 - for (let i = 0; i < Object.keys(info).length; i++) {  
504 - let key = Object.keys(info)[i];  
505 - let group = key.substring(0, key.indexOf("."))  
506 - let itemKey = key.substring(key.indexOf(".") + 1)  
507 - if (!serverInfo[group]) serverInfo[group] = {}  
508 - serverInfo[group][itemKey] = info[key]  
509 - }  
510 -  
511 - this.serverConfig = serverInfo;  
512 - this.visible = true;  
513 - });  
514 - }  
515 -  
516 - },  
517 - getWVPServerConfig: function () {  
518 - let that = this;  
519 - this.$axios({  
520 - method: 'get',  
521 - url: '/api/server/config'  
522 - }).then(function (res) {  
523 - console.log(res)  
524 - that.wvpServerConfig = res.data.data;  
525 - that.wvpVisible = true;  
526 - });  
527 - this.$axios({  
528 - method: 'get',  
529 - url: '/api/server/version'  
530 - }).then(function (res) {  
531 - console.log(res)  
532 - that.wvpServerVersion = res.data.data;  
533 - that.wvpVisible = true;  
534 - });  
535 - },  
536 - reStartServer: function () {  
537 - let that = this;  
538 - if (!!!this.mediaServerChoose) {  
539 - this.$message({  
540 - type: 'info',  
541 - message: '未选择节点'  
542 - });  
543 - return;  
544 - }  
545 -  
546 - this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {  
547 - confirmButtonText: '确定',  
548 - cancelButtonText: '取消',  
549 - type: 'warning'  
550 - }).then(() => {  
551 - let that = this;  
552 - this.$axios({  
553 - method: 'get',  
554 - url: '/zlm/' + that.mediaServerChoose + '/index/api/restartServer'  
555 - }).then(function (res) {  
556 - that.getAllSession();  
557 - if (res.data.code === 0) {  
558 - that.$message({  
559 - type: 'success',  
560 - message: '操作完成'  
561 - });  
562 - }  
563 - });  
564 - });  
565 - },  
566 - deleteRow: function (index, tabledata) {  
567 - let that = this;  
568 - this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {  
569 - confirmButtonText: '确定',  
570 - cancelButtonText: '取消',  
571 - type: 'warning'  
572 - })  
573 - .then(() => {  
574 - that.deleteSession(tabledata[index].id);  
575 - })  
576 - .catch(() => {  
577 - console.log('id：' + JSON.stringify(tabledata[index]));  
578 - this.$message({  
579 - type: 'info',  
580 - message: '已取消删除'  
581 - });  
582 - });  
583 - console.log(JSON.stringify(tabledata[index]));  
584 - },  
585 - deleteSession: function (id) {  
586 - if (!!this.mediaServerChoose) {  
587 - this.$axios({  
588 - method: 'get',  
589 - url: '/zlm/' + this.mediaServerChoose + '/index/api/kick_session?id=' + id  
590 - }).then((res)=>{  
591 - this.getAllSession();  
592 - this.$message({  
593 - type: 'success',  
594 - message: '删除成功!'  
595 - });  
596 - });  
597 - }  
598 -  
599 - },  
600 - getNameFromKey: function (key) {  
601 - let nameData = {  
602 - "waitTrack": "等待编码信息",  
603 - "interfaceAuthenticationExcludes": "不进行鉴权的接口",  
604 - "playTimeout": "点播超时时间",  
605 - "autoApplyPlay": "自动点播",  
606 - "recordPushLive": "推流录像",  
607 - "redisConfig": "自动配置redis",  
608 - "thirdPartyGBIdReg": "stream信息正则",  
609 - "savePositionHistory": "保存轨迹信息",  
610 - "interfaceAuthentication": "接口鉴权",  
611 - "serverId": "服务ID",  
612 - "logInDatebase": "日志存储进数据库",  
613 - "seniorSdp": "扩展SDP",  
614 - "password": "密码",  
615 - "port": "端口号",  
616 - "keepaliveTimeOut": "心跳超时",  
617 - "domain": "国标域",  
618 - "ip": "IP地址",  
619 - "monitorIp": "监听IP",  
620 - "alarm": "存储报警信息",  
621 - "ptzSpeed": "云台控制速度",  
622 - "id": "国标ID",  
623 - "registerTimeInterval": "注册间隔",  
624 - "artifactId": "模块名称",  
625 - "version": "版本",  
626 - "project": "工程",  
627 - "git_Revision": "GIT修订版本",  
628 - "git_BRANCH": "GIT分支",  
629 - "git_URL": "GIT地址",  
630 - "build_DATE": "构建时间",  
631 - "create_By": "作者",  
632 - "git_Revision_SHORT": "GIT修订版本（短）",  
633 - "build_Jdk": "构建用JDK",  
634 - };  
635 - console.log(key + ": " + nameData[key])  
636 -  
637 - if (nameData[key]) {  
638 - return nameData[key]  
639 - } else {  
640 - return key;  
641 - }  
642 - },  
643 - getMediaKeyNameFromKey: function (key) {  
644 - let nameData = {  
645 - "waitTrack": "等待编码信息",  
646 - "interfaceAuthenticationExcludes": "不进行鉴权的接口",  
647 - "playTimeout": "点播超时时间",  
648 - "autoApplyPlay": "自动点播",  
649 - "recordPushLive": "推流录像",  
650 - "redisConfig": "自动配置redis",  
651 - "thirdPartyGBIdReg": "stream信息正则",  
652 - "savePositionHistory": "保存轨迹信息",  
653 - "interfaceAuthentication": "接口鉴权",  
654 - "serverId": "服务ID",  
655 - "logInDatebase": "日志存储进数据库",  
656 - "seniorSdp": "扩展SDP",  
657 - "password": "密码",  
658 - "port": "端口号",  
659 - "keepaliveTimeOut": "心跳超时",  
660 - "domain": "国标域",  
661 - "ip": "IP地址",  
662 - "monitorIp": "监听IP",  
663 - "alarm": "存储报警信息",  
664 - "ptzSpeed": "云台控制速度",  
665 - "id": "国标ID",  
666 - "registerTimeInterval": "注册间隔",  
667 - "artifactId": "模块名称",  
668 - "version": "版本",  
669 - "project": "工程",  
670 - "git_Revision": "GIT修订版本",  
671 - "git_BRANCH": "GIT分支",  
672 - "git_URL": "GIT地址",  
673 - "build_DATE": "构建时间",  
674 - "create_By": "作者",  
675 - "git_Revision_SHORT": "GIT修订版本（短）",  
676 - "build_Jdk": "构建用JDK",  
677 - };  
678 - console.log(key + ": " + nameData[key])  
679 -  
680 - if (nameData[key]) {  
681 - return nameData[key]  
682 - } else {  
683 - return key;  
684 - }  
685 - }  
686 - }  
687 -};  
688 -</script>  
689 -  
690 -<style>  
691 -#app {  
692 - height: 100%;  
693 -}  
694 -  
695 -.control-table {  
696 - background-color: #ffffff;  
697 - height: 25rem;  
698 -}  
699 -  
700 -.table-c {  
701 - border-right: 1px solid #dcdcdc;  
702 - border-bottom: 1px solid #dcdcdc;  
703 -}  
704 -  
705 -.table-c td {  
706 - border-left: 1px solid #dcdcdc;  
707 - border-top: 1px solid #dcdcdc;  
708 - padding: 0.2rem;  
709 -}  
710 -  
711 -.el-table {  
712 - width: 99.9% !important;  
713 -}  
714 -</style>  
web_src/src/main.js
  View file @3ffe205
@@ -7,6 +7,7 @@ import router from &#39;./router/index.js&#39;; @@ -7,6 +7,7 @@ import router from &#39;./router/index.js&#39;;
7 import axios from 'axios'; 7 import axios from 'axios';
8 import VueCookies from 'vue-cookies'; 8 import VueCookies from 'vue-cookies';
9 import echarts from 'echarts'; 9 import echarts from 'echarts';
  10 +import VCharts from 'v-charts';
10 11
11 import VueClipboard from 'vue-clipboard2'; 12 import VueClipboard from 'vue-clipboard2';
12 import { Notification } from 'element-ui'; 13 import { Notification } from 'element-ui';
@@ -39,6 +40,7 @@ Vue.use(VueClipboards); @@ -39,6 +40,7 @@ Vue.use(VueClipboards);
39 Vue.prototype.$axios = axios; 40 Vue.prototype.$axios = axios;
40 Vue.prototype.$notify = Notification; 41 Vue.prototype.$notify = Notification;
41 Vue.use(Contextmenu); 42 Vue.use(Contextmenu);
  43 +Vue.use(VCharts);
42 44
43 axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : ""; 45 axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";
44 46
web_src/src/router/index.js
  View file @3ffe205
@@ -2,7 +2,7 @@ import Vue from &#39;vue&#39; @@ -2,7 +2,7 @@ import Vue from &#39;vue&#39;
2 import VueRouter from 'vue-router' 2 import VueRouter from 'vue-router'
3 import Layout from "../layout/index.vue" 3 import Layout from "../layout/index.vue"
4 4
5 -import control from '../components/control.vue' 5 +import console from '../components/console.vue'
6 import deviceList from '../components/DeviceList.vue' 6 import deviceList from '../components/DeviceList.vue'
7 import channelList from '../components/channelList.vue' 7 import channelList from '../components/channelList.vue'
8 import pushVideoList from '../components/PushVideoList.vue' 8 import pushVideoList from '../components/PushVideoList.vue'
@@ -37,11 +37,11 @@ export default new VueRouter({ @@ -37,11 +37,11 @@ export default new VueRouter({
37 path: '/', 37 path: '/',
38 name: 'home', 38 name: 'home',
39 component: Layout, 39 component: Layout,
40 - redirect: '/control', 40 + redirect: '/console',
41 children: [ 41 children: [
42 { 42 {
43 - path: '/control',  
44 - component: control, 43 + path: '/console',
  44 + component: console,
45 }, 45 },
46 { 46 {
47 path: '/live', 47 path: '/live',