From 3ffe2050827482ba83a1c15afbf346275be86187 Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期四, 20 十月 2022 18:03:40 +0800 Subject: [PATCH] 首页改造,完成cpu,内存,网络图 --- web_src/src/components/console.vue | 121 ++++ src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java | 10 web_src/src/components/console/ConsoleMEM.vue | 105 ++++ web_src/package.json | 1 web_src/package-lock.json | 92 +++ src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java | 13 src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java | 30 web_src/src/main.js | 2 /dev/null | 714 ---------------------------- src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java | 6 src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java | 47 + src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java | 34 + src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java | 6 web_src/src/router/index.js | 8 web_src/src/components/console/ConsoleNet.vue | 85 +++ src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java | 4 web_src/src/components/console/ConsoleMediaServer.vue | 86 +++ web_src/src/components/console/ConsoleCPU.vue | 105 ++++ 18 files changed, 711 insertions(+), 758 deletions(-) diff --git a/src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java b/src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java new file mode 100644 index 0000000..eb6a37d --- /dev/null +++ b/src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java @@ -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; + } +} diff --git a/src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java b/src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java index 74a90c2..5a84e25 100644 --- a/src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java +++ b/src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java @@ -22,14 +22,14 @@ @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()); diff --git a/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java b/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java index ab9a831..77bd61c 100644 --- a/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java +++ b/src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java @@ -2,6 +2,7 @@ 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 @@ void addMemInfo(double memInfo); - void addNetInfo(Map<String, String> networkInterfaces); + void addNetInfo(Map<String, Double> networkInterfaces); void sendMobilePositionMsg(JSONObject jsonObject); @@ -240,4 +241,7 @@ List<SendRtpItem> querySendRTPServerByChnnelId(String channelId); List<SendRtpItem> querySendRTPServerByStream(String stream); + + SystemAllInfo getSystemInfo(); + } diff --git a/src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java b/src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java index f411881..6178a3b 100644 --- a/src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java +++ b/src/main/java/com/genersoft/iot/vmp/storager/impl/RedisCatchStorageImpl.java @@ -3,6 +3,7 @@ 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 @@ @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 @@ @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,14 +723,16 @@ } @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); } @@ -737,6 +740,18 @@ } @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; logger.info("[redis鍙戦�侀�氱煡] 绉诲姩浣嶇疆 {}: {}", key, jsonObject.toString()); diff --git a/src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java b/src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java index d107331..3af4853 100644 --- a/src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java +++ b/src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java @@ -8,6 +8,7 @@ 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 @@ * 鑾峰彇缃戠粶涓婁紶鍜屼笅杞� * @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 diff --git a/src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java b/src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java index 2884734..ef2d748 100644 --- a/src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java +++ b/src/main/java/com/genersoft/iot/vmp/vmanager/server/ServerController.java @@ -3,6 +3,7 @@ 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.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; @@ -59,6 +61,9 @@ @Autowired private ThreadPoolTaskExecutor taskExecutor; + + @Autowired + private IRedisCatchStorage redisCatchStorage; @GetMapping(value = "/media_server/list") @@ -202,4 +207,12 @@ public List<IHookSubscribe> getHooks() { return zlmHttpHookSubscribe.getAll(); } + + @GetMapping(value = "/system/info") + @ResponseBody + @Operation(summary = "鑾峰彇绯荤粺淇℃伅") + public SystemAllInfo getSystemInfo() { + SystemAllInfo systemAllInfo = redisCatchStorage.getSystemInfo(); + return systemAllInfo; + } } diff --git a/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java b/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java index ab406d3..a8e0b4e 100644 --- a/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java +++ b/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiDeviceController.java @@ -40,7 +40,7 @@ // private DeviceOffLineDetector offLineDetector; /** - * 鍒嗛〉鑾峰彇璁惧鍒楄〃 TODO 鐜板湪鐩存帴杩斿洖锛屽皻鏈疄鐜板垎椤� + * 鍒嗛〉鑾峰彇璁惧鍒楄〃 鐜板湪鐩存帴杩斿洖锛屽皻鏈疄鐜板垎椤� * @param start * @param limit * @param q @@ -130,11 +130,11 @@ 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()); diff --git a/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java b/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java index 6788fac..fefcbd6 100644 --- a/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java +++ b/src/main/java/com/genersoft/iot/vmp/web/gb28181/ApiStreamController.java @@ -57,12 +57,12 @@ * @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") diff --git a/web_src/package-lock.json b/web_src/package-lock.json index 7622037..c6e972a 100644 --- a/web_src/package-lock.json +++ b/web_src/package-lock.json @@ -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,11 +3939,30 @@ }, "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", @@ -7159,6 +7179,11 @@ "engines": { "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", @@ -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", @@ -13019,6 +13049,22 @@ "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", "bin": { "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": { @@ -17796,11 +17842,27 @@ }, "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", @@ -20469,6 +20531,11 @@ "resolved": "https://registry.npm.taobao.org/number-is-nan/download/number-is-nan-1.0.1.tgz", "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", @@ -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", diff --git a/web_src/package.json b/web_src/package.json index d8f0f22..18b3332 100644 --- a/web_src/package.json +++ b/web_src/package.json @@ -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", diff --git a/web_src/src/components/console.vue b/web_src/src/components/console.vue new file mode 100644 index 0000000..f663aaa --- /dev/null +++ b/web_src/src/components/console.vue @@ -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> diff --git a/web_src/src/components/console/ConsoleCPU.vue b/web_src/src/components/console/ConsoleCPU.vue new file mode 100644 index 0000000..0b4ecb2 --- /dev/null +++ b/web_src/src/components/console/ConsoleCPU.vue @@ -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> diff --git a/web_src/src/components/console/ConsoleMEM.vue b/web_src/src/components/console/ConsoleMEM.vue new file mode 100644 index 0000000..beaa38c --- /dev/null +++ b/web_src/src/components/console/ConsoleMEM.vue @@ -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> diff --git a/web_src/src/components/console/ConsoleMediaServer.vue b/web_src/src/components/console/ConsoleMediaServer.vue new file mode 100644 index 0000000..810ee39 --- /dev/null +++ b/web_src/src/components/console/ConsoleMediaServer.vue @@ -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> diff --git a/web_src/src/components/console/ConsoleNet.vue b/web_src/src/components/console/ConsoleNet.vue new file mode 100644 index 0000000..a6d7111 --- /dev/null +++ b/web_src/src/components/console/ConsoleNet.vue @@ -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> diff --git a/web_src/src/components/control.vue b/web_src/src/components/control.vue deleted file mode 100644 index 722245b..0000000 --- a/web_src/src/components/control.vue +++ /dev/null @@ -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--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淇℃伅姝e垯", - "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": "鏋勫缓鐢↗DK", - }; - 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淇℃伅姝e垯", - "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": "鏋勫缓鐢↗DK", - }; - 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> diff --git a/web_src/src/main.js b/web_src/src/main.js index d534d5f..e800718 100644 --- a/web_src/src/main.js +++ b/web_src/src/main.js @@ -7,6 +7,7 @@ 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.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 : ""; diff --git a/web_src/src/router/index.js b/web_src/src/router/index.js index 7651a72..4844d64 100644 --- a/web_src/src/router/index.js +++ b/web_src/src/router/index.js @@ -2,7 +2,7 @@ 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 @@ path: '/', name: 'home', component: Layout, - redirect: '/control', + redirect: '/console', children: [ { - path: '/control', - component: control, + path: '/console', + component: console, }, { path: '/live', -- Gitblit v1.8.0