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&#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淇℃伅姝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