优化运维中心样式

src/main/java/com/genersoft/iot/vmp/vmanager/bean/SystemConfigInfo.java

@@ -3,8 +3,9 @@ package com.genersoft.iot.vmp.vmanager.bean;
 import com.genersoft.iot.vmp.common.VersionPo;
 import com.genersoft.iot.vmp.conf.SipConfig;
 import com.genersoft.iot.vmp.conf.UserSetting;
-import com.genersoft.iot.vmp.conf.VersionInfo;
+import lombok.Data;
 
+@Data
 public class SystemConfigInfo {
 
     private int serverPort;
@@ -12,36 +13,5 @@ public class SystemConfigInfo {
     private UserSetting addOn;
     private VersionPo version;
 
-    public int getServerPort() {
-        return serverPort;
-    }
-
-    public void setServerPort(int serverPort) {
-        this.serverPort = serverPort;
-    }
-
-    public SipConfig getSip() {
-        return sip;
-    }
-
-    public void setSip(SipConfig sip) {
-        this.sip = sip;
-    }
-
-    public UserSetting getAddOn() {
-        return addOn;
-    }
-
-    public void setAddOn(UserSetting addOn) {
-        this.addOn = addOn;
-    }
-
-    public VersionPo getVersion() {
-        return version;
-    }
-
-    public void setVersion(VersionPo version) {
-        this.version = version;
-    }
 }
 

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

@@ -11,8 +11,8 @@ import com.genersoft.iot.vmp.conf.exception.ControllerException;
 import com.genersoft.iot.vmp.conf.security.JwtUtils;
 import com.genersoft.iot.vmp.gb28181.service.IDeviceChannelService;
 import com.genersoft.iot.vmp.gb28181.service.IDeviceService;
-import com.genersoft.iot.vmp.media.service.IMediaServerService;
 import com.genersoft.iot.vmp.media.bean.MediaServer;
+import com.genersoft.iot.vmp.media.service.IMediaServerService;
 import com.genersoft.iot.vmp.service.bean.MediaServerLoad;
 import com.genersoft.iot.vmp.storager.IRedisCatchStorage;
 import com.genersoft.iot.vmp.streamProxy.service.IStreamProxyService;
@@ -25,13 +25,24 @@ import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.security.SecurityRequirement;
 import io.swagger.v3.oas.annotations.tags.Tag;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.util.ObjectUtils;
 import org.springframework.web.bind.annotation.*;
+import oshi.SystemInfo;
+import oshi.hardware.CentralProcessor;
+import oshi.hardware.GlobalMemory;
+import oshi.hardware.HardwareAbstractionLayer;
+import oshi.hardware.NetworkIF;
+import oshi.software.os.OperatingSystem;
 
+import java.io.File;
+import java.text.DecimalFormat;
 import java.util.ArrayList;
+import java.util.LinkedHashMap;
 import java.util.List;
+import java.util.Map;
 
 @SuppressWarnings("rawtypes")
 @Tag(name = "服务控制")
@@ -75,7 +86,6 @@ public class ServerController {
     private IRedisCatchStorage redisCatchStorage;
 
 
-
     @GetMapping(value = "/media_server/list")
     @ResponseBody
     @Operation(summary = "流媒体服务列表", security = @SecurityRequirement(name = JwtUtils.HEADER))
@@ -140,7 +150,7 @@ public class ServerController {
     @ResponseBody
     public void deleteMediaServer(@RequestParam String id) {
         MediaServer mediaServer = mediaServerService.getOne(id);
-        if(mediaServer == null) {
+        if (mediaServer == null) {
             throw new ControllerException(ErrorCode.ERROR100.getCode(), "流媒体不存在");
         }
         mediaServerService.delete(mediaServer);
@@ -170,9 +180,11 @@ public class ServerController {
 //                throw new ControllerException(ErrorCode.ERROR100.getCode(), e.getMessage());
 //            }
 //        });
-    };
+    }
 
-    @Operation(summary = "获取系统信息信息", security = @SecurityRequirement(name = JwtUtils.HEADER))
+    ;
+
+    @Operation(summary = "获取系统配置信息", security = @SecurityRequirement(name = JwtUtils.HEADER))
     @GetMapping(value = "/system/configInfo")
     @ResponseBody
     public SystemConfigInfo getConfigInfo() {
@@ -234,7 +246,7 @@ public class ServerController {
         List<MediaServer> allOnline = mediaServerService.getAllOnline();
         if (allOnline.isEmpty()) {
             return result;
-        }else {
+        } else {
             for (MediaServer mediaServerItem : allOnline) {
                 result.add(mediaServerService.getLoad(mediaServerItem));
             }
@@ -258,4 +270,80 @@ public class ServerController {
 
         return result;
     }
+
+    @GetMapping(value = "/info")
+    @ResponseBody
+    @Operation(summary = "获取系统信息")
+    public Map<String, Map<String, String>> getInfo() {
+        Map<String, Map<String, String>> result = new LinkedHashMap<>();
+        Map<String, String> hardwareMap = new LinkedHashMap<>();
+        result.put("硬件信息", hardwareMap);
+
+        SystemInfo systemInfo = new SystemInfo();
+        HardwareAbstractionLayer hardware = systemInfo.getHardware();
+        // 获取CPU信息
+        CentralProcessor.ProcessorIdentifier processorIdentifier = hardware.getProcessor().getProcessorIdentifier();
+        hardwareMap.put("CPU", processorIdentifier.getName());
+        // 获取内存
+        GlobalMemory memory = hardware.getMemory();
+        hardwareMap.put("内存", formatByte(memory.getTotal() - memory.getAvailable()) + "/" + formatByte(memory.getTotal()));
+        hardwareMap.put("制造商", systemInfo.getHardware().getComputerSystem().getManufacturer());
+        hardwareMap.put("产品名称", systemInfo.getHardware().getComputerSystem().getModel());
+        // 网卡
+        List<NetworkIF> networkIFs = hardware.getNetworkIFs();
+        StringBuilder ips = new StringBuilder();
+        for (int i = 0; i < networkIFs.size(); i++) {
+            NetworkIF networkIF = networkIFs.get(i);
+            String ipsStr = StringUtils.join(networkIF.getIPv4addr());
+            if (ObjectUtils.isEmpty(ipsStr)) {
+                continue;
+            }
+            ips.append(ipsStr);
+            if (i < networkIFs.size() - 1) {
+                ips.append(",");
+            }
+        }
+        hardwareMap.put("网卡", ips.toString());
+
+        Map<String, String> operatingSystemMap = new LinkedHashMap<>();
+        result.put("操作系统", operatingSystemMap);
+        OperatingSystem operatingSystem = systemInfo.getOperatingSystem();
+        operatingSystemMap.put("名称", operatingSystem.getFamily() + " " + operatingSystem.getVersionInfo().getVersion());
+        operatingSystemMap.put("类型", operatingSystem.getManufacturer());
+
+        Map<String, String> platformMap = new LinkedHashMap<>();
+        result.put("平台信息", platformMap);
+        VersionPo version = versionInfo.getVersion();
+        platformMap.put("版本", version.getVersion());
+        platformMap.put("构建日期", version.getBUILD_DATE());
+        platformMap.put("GIT分支", version.getGIT_BRANCH());
+        platformMap.put("GIT地址", version.getGIT_URL());
+        platformMap.put("GIT日期", version.getGIT_DATE());
+        platformMap.put("GIT版本", version.getGIT_Revision_SHORT());
+        platformMap.put("DOCKER环境", new File("/.dockerenv").exists()?"是":"否");
+
+        return result;
+    }
+
+    /**
+     * 单位转换
+     */
+    private static String formatByte(long byteNumber) {
+        //换算单位
+        double FORMAT = 1024.0;
+        double kbNumber = byteNumber / FORMAT;
+        if (kbNumber < FORMAT) {
+            return new DecimalFormat("#.##KB").format(kbNumber);
+        }
+        double mbNumber = kbNumber / FORMAT;
+        if (mbNumber < FORMAT) {
+            return new DecimalFormat("#.##MB").format(mbNumber);
+        }
+        double gbNumber = mbNumber / FORMAT;
+        if (gbNumber < FORMAT) {
+            return new DecimalFormat("#.##GB").format(gbNumber);
+        }
+        double tbNumber = gbNumber / FORMAT;
+        return new DecimalFormat("#.##TB").format(tbNumber);
+    }
 }

web_src/src/components/operations.vue

@@ -1,26 +1,26 @@
 <template>
-  <div id="operations" style="width: 100%; height: 100%">
+  <div id="operations" >
-    <el-container >
+    <el-container class="container-box">
-      <el-aside width="200px" style="text-align: left">
+      <el-aside width="200px" style="text-align: left" >
         <el-menu :default-active="activeIndex" :height="winHeight" @select="handleSelect">
           <el-menu-item index="systemInfo">
-            <template slot="title"><i class="el-icon-message"></i>平台信息</template>
+            <template slot="title"><i class="el-icon-s-home"></i>平台信息</template>
           </el-menu-item>
           <el-submenu index="log">
-            <template slot="title"><i class="el-icon-message"></i>日志信息</template>
+            <template slot="title"><i class="el-icon-document"></i>日志信息</template>
             <el-menu-item index="historyLog">历史日志</el-menu-item>
             <el-menu-item index="realTimeLog">实时日志</el-menu-item>
           </el-submenu>
           <el-submenu index="senior">
             <template slot="title"><i class="el-icon-setting"></i>高级维护</template>
-            <el-menu-item disabled="disabled" index="tcpdump">网络抓包</el-menu-item>
+            <el-menu-item index="tcpdump">网络抓包</el-menu-item>
-            <el-menu-item disabled="disabled" index="networkCard">网卡信息</el-menu-item>
           </el-submenu>
         </el-menu>
       </el-aside>
-      <el-main style="background-color: #FFFFFF; margin: 20px">
+      <el-main style="background-color: #FFFFFF; margin: 0 20px 20px 20px">
         <operationsForRealLog v-if="activeIndex==='realTimeLog'"></operationsForRealLog>
         <operationsForHistoryLog v-if="activeIndex==='historyLog'"></operationsForHistoryLog>
+        <operationsForSystemInfo v-if="activeIndex==='systemInfo'"></operationsForSystemInfo>
       </el-main>
     </el-container>
   </div>
@@ -30,12 +30,13 @@
 
 import operationsForRealLog from './operationsForRealLog'
 import operationsForHistoryLog from './operationsForHistoryLog.vue'
+import operationsForSystemInfo from './operationsForSystemInfo.vue'
 
 
 export default {
   name: 'log',
   components: {
-    operationsForRealLog, operationsForHistoryLog
+    operationsForRealLog, operationsForHistoryLog, operationsForSystemInfo
   },
   data() {
     return {
@@ -43,7 +44,7 @@ export default {
       winHeight: (window.innerHeight - 170) + "px",
       data: [],
       filter: "",
-      activeIndex: "historyLog"
+      activeIndex: "systemInfo"
     };
   },
 
@@ -61,55 +62,10 @@ export default {
 </script>
 
 <style>
-.videoList {
+.container-box {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-}
-
-.video-item {
-  position: relative;
-  width: 15rem;
-  height: 10rem;
-  margin-right: 1rem;
-  background-color: #000000;
-}
-
-.video-item-img {
   position: absolute;
-  top: 0;
+  top: 80px;
-  bottom: 0;
+  width: calc(100% - 20px);
-  left: 0;
+  height: calc(100% - 80px);
-  right: 0;
-  margin: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.video-item-img:after {
-  content: "";
-  display: inline-block;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-  width: 3rem;
-  height: 3rem;
-  background-image: url("../assets/loading.png");
-  background-size: cover;
-  background-color: #000000;
-}
-
-.video-item-title {
-  position: absolute;
-  bottom: 0;
-  color: #000000;
-  background-color: #ffffff;
-  line-height: 1.5rem;
-  padding: 0.3rem;
-  width: 14.4rem;
 }
 </style>

web_src/src/components/operationsForHistoryLog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" style="width: 100%">
+  <div id="app" style="width: 100%; background-color: #FFFFFF">
     <div class="page-header">
       <div class="page-title">
         <div>历史日志</div>
@@ -109,7 +109,7 @@ export default {
       chooseRecord: null, // 媒体服务
 
       updateLooper: 0, //数据刷新轮训标志
-      winHeight: window.innerHeight - 250,
+      winHeight: window.innerHeight - 180,
       loading: false,
       mediaServerObj: new MediaServer(),
 

web_src/src/components/operationsForSystemInfo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div id="operationsForSystemInfo" style="margin: 40px">
+    <el-descriptions v-for="(value, key) in systemInfoList" :key="key" :column="2" :loading="loading">
+      <template slot="title">
+        <span>{{key}}</span>
+      </template>
+      <el-descriptions-item v-for="(childValue, childKey) in value" :key="childKey" >
+        <template slot="label">
+          <span>{{childKey}}</span>
+        </template>
+        {{ childValue }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'operationsForSystemInfo',
+  data() {
+    return {
+      loading: false,
+      winHeight: window.innerHeight - 220,
+      systemInfoList: {
+        "测试": {
+          "qwqew": "1111"
+        }
+      },
+    };
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    initData: function () {
+      this.loading = true;
+      this.$axios({
+        method: 'get',
+        url: `/api/server/info`,
+      }).then((res) => {
+        console.log(res)
+        if (res.data.code === 0) {
+          this.systemInfoList = res.data.data;
+        }
+        this.loading = false;
+      }).catch((error) => {
+        console.log(error);
+        this.loading = false;
+      });
+    },
+  }
+};
+</script>