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

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;
+    }
+}

src/main/java/com/genersoft/iot/vmp/conf/SystemInfoTimerTask.java

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

src/main/java/com/genersoft/iot/vmp/storager/IRedisCatchStorage.java

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

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

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

src/main/java/com/genersoft/iot/vmp/utils/SystemInfoUtils.java

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

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

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

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

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

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

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

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

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",

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>

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>

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>

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>

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>

web_src/src/components/control.vue

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

web_src/src/main.js

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

web_src/src/router/index.js

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