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

648540858

2022-10-20 3ffe2050827482ba83a1c15afbf346275be86187

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

 src/main/java/com/genersoft/iot/vmp/common/SystemAllInfo.java

New file
@@ -0,0 +1,34 @@
package com.genersoft.iot.vmp.common;

import java.util.List;

public class SystemAllInfo {

    private List<Object> cpu;
    private List<Object> mem;
    private List<Object> net;

    public List<Object> getCpu() {
        return cpu;
    }

    public void setCpu(List<Object> cpu) {
        this.cpu = cpu;
    }

    public List<Object> getMem() {
        return mem;
    }

    public void setMem(List<Object> mem) {
        this.mem = mem;
    }

    public List<Object> getNet() {
        return net;
    }

    public void setNet(List<Object> net) {
        this.net = net;
    }
}

 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());

 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();

}

 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());

 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

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

 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());

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

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

 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

New file
@@ -0,0 +1,121 @@
<template>
  <div id="app" style="width: 100%">
    <div class="page-header">
      <div class="page-title">控制台</div>
    </div>
    <el-row style="width: 100%">
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="ThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleCPU ref="consoleCPU"></consoleCPU>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleMem ref="consoleMem"></consoleMem>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleNet ref="consoleNet"></consoleNet>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleCPU></consoleCPU>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleCPU></consoleCPU>
          </div>
        </div>
      </el-col>
      <el-col :xl="{ span: 8 }" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 12 }" :xs="{ span: 24 }" >
        <div class="control-cell" id="WorkThreadsLoad" >
          <div style="width:100%; height:100%; ">
            <consoleCPU></consoleCPU>
          </div>
        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script>
import uiHeader from '../layout/UiHeader.vue'
import consoleCPU from './console/ConsoleCPU.vue'
import consoleMem from './console/ConsoleMEM.vue'
import consoleNet from './console/ConsoleNet.vue'

import echarts from 'echarts';

export default {
  name: 'app',
  components: {
    echarts,
    uiHeader,
    consoleCPU,
    consoleMem,
    consoleNet
  },
  data() {
    return {
      timer: null
    };
  },
  created() {
    this.getSystemInfo();
    this.loopForSystemInfo();
  },
  destroyed() {
  },
  methods: {
    loopForSystemInfo: function (){
      if (this.timer != null) {
        window.clearTimeout(this.timer);
      }
      this.timer = setTimeout(()=>{
        this.getSystemInfo();
        this.timer = null;
        this.loopForSystemInfo()
      }, 2000)
    },
    getSystemInfo: function (){
      this.$axios({
        method: 'get',
        url: `/api/server/system/info`,
      }).then( (res)=> {
        if (res.data.code === 0) {
          this.$refs.consoleCPU.setData(res.data.data.cpu)
          this.$refs.consoleMem.setData(res.data.data.mem)
          this.$refs.consoleNet.setData(res.data.data.net)
        }
      }).catch( (error)=> {
      });
    }
  }
};
</script>

<style>
#app {
  height: 100%;
}
.control-cell {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 10px;
  height: 360px;
}
</style>

 web_src/src/components/console/ConsoleCPU.vue

New file
@@ -0,0 +1,105 @@
<template>
  <div id="consoleCPU" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
    <ve-line :data="chartData" :extend="extend"  width="100%" height="100%" :legend-visible="false"></ve-line>
  </div>
</template>

<script>


import moment from "moment/moment";

export default {
  name: 'consoleCPU',
  data() {
    return {
      chartData: {
        columns: ['time', 'data'],
        rows: []
      },

      extend: {
        title: {
          show: true,
          text: "CPU",
          left: "center",
          top: 20,

        },
        grid: {
          show: true,
          right: "30px",
          containLabel: true,
        },
        xAxis: {
          time: "time",
          max: 'dataMax',
          boundaryGap: ['20%', '20%'],
          axisLabel: {
            formatter:(v)=>{
              return moment(v).format("HH:mm:ss");
            },
            showMaxLabel: true,
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 1,
          splitNumber: 6,
          position: "left",
          silent: true,
          axisLabel: {
            formatter: (v)=>{
              return v*100 + "%";
            },
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: (data)=>{
            console.log(data)
            return moment(data[0].data[0]).format("HH:mm:ss") +  "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
          }
        },
        series: {
          itemStyle: {
            color: "#409EFF"
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#50a3f8' // 0% 处的颜色
              }, {
                offset: 1, color: '#69b0fa' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      }
    };
  },
  mounted() {
    // setInterval(()=>{
    //   // console.log(111111)
    //   for (let i = 0; i < this.chartData.rows.length; i++) {
    //     this.chartData.rows[i].销售额 += 1000;
    //   }
    // },1000)
  },
  destroyed() {
  },
  methods: {
    setData: function(data) {
      this.chartData .rows = data;
    }

  }
};
</script>

 web_src/src/components/console/ConsoleMEM.vue

New file
@@ -0,0 +1,105 @@
<template>
  <div id="ConsoleMEM" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
    <ve-line :data="chartData" :extend="extend"  width="100%" height="100%" :legend-visible="false"></ve-line>
  </div>
</template>

<script>


import moment from "moment/moment";

export default {
  name: 'ConsoleMEM',
  data() {
    return {
      chartData: {
        columns: ['time', 'data'],
        rows: []
      },

      extend: {
        title: {
          show: true,
          text: "内存",
          left: "center",
          top: 20,

        },
        grid: {
          show: true,
          right: "30px",
          containLabel: true,
        },
        xAxis: {
          time: "time",
          max: 'dataMax',
          boundaryGap: ['20%', '20%'],
          axisLabel: {
            formatter:(v)=>{
              return moment(v).format("HH:mm:ss");
            },
            showMaxLabel: true,
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 1,
          splitNumber: 6,
          position: "left",
          silent: true,
          axisLabel: {
            formatter: (v)=>{
              return v*100 + "%";
            },
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: (data)=>{
            console.log(data)
            return moment(data[0].data[0]).format("HH:mm:ss") +  "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
          }
        },
        series: {
          itemStyle: {
            color: "#409EFF"
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#50a3f8' // 0% 处的颜色
              }, {
                offset: 1, color: '#69b0fa' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      }
    };
  },
  mounted() {
    // setInterval(()=>{
    //   // console.log(111111)
    //   for (let i = 0; i < this.chartData.rows.length; i++) {
    //     this.chartData.rows[i].销售额 += 1000;
    //   }
    // },1000)
  },
  destroyed() {
  },
  methods: {
    setData: function(data) {
      this.chartData .rows = data;
    }

  }
};
</script>

 web_src/src/components/console/ConsoleMediaServer.vue

New file
@@ -0,0 +1,86 @@
<template>
  <div id="ConsoleMediaServer" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
    <ve-histogram :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-histogram>
  </div>
</template>

<script>


import moment from "moment/moment";

export default {
  name: 'ConsoleMediaServer',
  data() {
    return {
      chartData: {
        columns: ['time', 'in', 'out'],
        rows: [
        ]
      },
      chartSettings: {
        area: true,
        labelMap: {
          'in': '下载',
          'out': '上传'
        },
      },
      extend: {
        title: {
          show: true,
          text: "网络",
          left: "center",
          top: 20,

        },
        grid: {
          show: true,
          right: "30px",
          containLabel: true,
        },
        xAxis: {
          time: "time",
          max: 'dataMax',
          boundaryGap: ['20%', '20%'],
          axisLabel: {
            formatter:(v)=>{
              return moment(v).format("HH:mm:ss");
            },
            showMaxLabel: true,
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter: (data)=>{
            console.log(parseFloat(data[0].data[1]).toFixed(2))
            console.log(parseFloat(data[1].data[1]).toFixed(2))
            console.log("############")
            return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" +  "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
          }
        },
        legend: {
          left: "center",
          bottom: "15px",
        }
      }
    };
  },
  mounted() {
    // setInterval(()=>{
    //   // console.log(111111)
    //   for (let i = 0; i < this.chartData.rows.length; i++) {
    //     this.chartData.rows[i].销售额 += 1000;
    //   }
    // },1000)
  },
  destroyed() {
  },
  methods: {
    setData: function(data) {
      console.log(data)
      this.chartData .rows = data;
    }

  }
};
</script>

 web_src/src/components/console/ConsoleNet.vue

New file
@@ -0,0 +1,85 @@
<template>
  <div id="ConsoleNet" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
    <ve-line :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-line>
  </div>
</template>

<script>


import moment from "moment/moment";

export default {
  name: 'ConsoleNet',
  data() {
    return {
      chartData: {
        columns: ['time', 'in', 'out'],
        rows: []
      },
      chartSettings: {
        area: true,
        labelMap: {
          'in': '下载',
          'out': '上传'
        },
      },
      extend: {
        title: {
          show: true,
          text: "网络",
          left: "center",
          top: 20,

        },
        grid: {
          show: true,
          right: "30px",
          containLabel: true,
        },
        xAxis: {
          time: "time",
          max: 'dataMax',
          boundaryGap: ['20%', '20%'],
          axisLabel: {
            formatter:(v)=>{
              return moment(v).format("HH:mm:ss");
            },
            showMaxLabel: true,
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter: (data)=>{
            console.log(parseFloat(data[0].data[1]).toFixed(2))
            console.log(parseFloat(data[1].data[1]).toFixed(2))
            console.log("############")
            return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" +  "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
          }
        },
        legend: {
          left: "center",
          bottom: "15px",
        }
      }
    };
  },
  mounted() {
    // setInterval(()=>{
    //   // console.log(111111)
    //   for (let i = 0; i < this.chartData.rows.length; i++) {
    //     this.chartData.rows[i].销售额 += 1000;
    //   }
    // },1000)
  },
  destroyed() {
  },
  methods: {
    setData: function(data) {
      console.log(data)
      this.chartData .rows = data;
    }

  }
};
</script>

 web_src/src/components/control.vue

File was deleted

 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 : "";


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