front end: server state info

4 years ago · 11e1410cd9
4 changed files with 197 additions and 14 deletions
--- a/server/gva/init_data/init_data.go
+++ b/server/gva/init_data/init_data.go
@ -313,6 +313,7 @@ func InitSysBaseMenus() (err error) {
 		{Model: gorm.Model{ID: 24, CreatedAt: time.Now(), UpdatedAt: time.Now()}, MenuLevel: 0, Hidden: false, ParentId: "3", Path: "operation", Name: "operation", Component: "view/superAdmin/operation/sysOperationRecord.vue", Sort: 6, Meta: model.Meta{Title: "操作历史", Icon: "time"}},
 		{Model: gorm.Model{ID: 25, CreatedAt: time.Now(), UpdatedAt: time.Now()}, MenuLevel: 0, Hidden: false, ParentId: "9", Path: "simpleUploader", Name: "simpleUploader", Component: "view/example/simpleUploader/simpleUploader", Sort: 6, Meta: model.Meta{Title: "断点续传（插件版）", Icon: "upload"}},
 		{Model: gorm.Model{ID: 26, CreatedAt: time.Now(), UpdatedAt: time.Now()}, MenuLevel: 0, ParentId: "0", Path: "https://www.gin-vue-admin.com", Name: "https://www.gin-vue-admin.com", Hidden: false, Component: "/", Sort: 0, Meta: model.Meta{Title: "官方网站", Icon: "s-home"}},
+		{Model: gorm.Model{ID: 27, CreatedAt: time.Now(), UpdatedAt: time.Now()}, MenuLevel: 0, ParentId: "0", Path: "state", Name: "state", Hidden: false, Component: "view/system/state.vue", Sort: 6, Meta: model.Meta{Title: "服务器状态", Icon: "cloudy"}},
 	}
 	if tx.Create(&insert).Error != nil { // 遇到错误时回滚事务
 		tx.Rollback()
@ -371,6 +372,7 @@ func InitSysAuthorityMenus() (err error) {
 		{"888", 24},
 		{"888", 25},
 		{"888", 26},
+		{"888", 27},
 		{"8881", 1},
 		{"8881", 2},
 		{"8881", 8},
--- a/server/router/sys_system.go
+++ b/server/router/sys_system.go
@ -2,12 +2,11 @@ package router

 import (
 	"gin-vue-admin/api/v1"
-	"gin-vue-admin/middleware"
 	"github.com/gin-gonic/gin"
 )

 func InitSystemRouter(Router *gin.RouterGroup) {
-	SystemRouter := Router.Group("system").Use(middleware.JWTAuth()).Use(middleware.CasbinHandler())
+	SystemRouter := Router.Group("system")
 	{
 		SystemRouter.POST("getSystemConfig", v1.GetSystemConfig) // 获取配置文件内容
 		SystemRouter.POST("setSystemConfig", v1.SetSystemConfig) // 设置配置文件内容
--- a/web/src/api/system.js
+++ b/web/src/api/system.js
@ -1,4 +1,4 @@
-import service from '@/utils/request'
+import service from "@/utils/request";

 // @Tags systrm
 // @Summary 获取配置文件内容
@ -7,11 +7,11 @@ import service from '@/utils/request'
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"返回成功"}"
 // @Router /system/getSystemConfig [post]
 export const getSystemConfig = () => {
-    return service({
-        url: "/system/getSystemConfig",
-        method: 'post',
-    })
-}
+  return service({
+    url: "/system/getSystemConfig",
+    method: "post",
+  });
+};

 // @Tags system
 // @Summary 设置配置文件内容
@ -21,9 +21,22 @@ export const getSystemConfig = () => {
 // @Success 200 {string} string "{"success":true,"data":{},"msg":"返回成功"}"
 // @Router /system/setSystemConfig [post]
 export const setSystemConfig = (data) => {
-    return service({
-        url: "/system/setSystemConfig",
-        method: 'post',
-        data
-    })
-}
+  return service({
+    url: "/system/setSystemConfig",
+    method: "post",
+    data,
+  });
+};
+
+// @Tags system
+// @Summary 获取服务器运行状态
+// @Security ApiKeyAuth
+// @Produce  application/json
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"返回成功"}"
+// @Router /system/getServerInfo [post]
+export const getSystemState = () => {
+  return service({
+    url: "/system/getServerInfo",
+    method: "post",
+  });
+};
--- a/web/src/view/system/state.vue
+++ b/web/src/view/system/state.vue
@ -0,0 +1,169 @@
+<template>
+  <div>
+    <el-row :gutter="15" class="system_state">
+      <el-col :span="12">
+        <el-card v-if="state.os" class="card_item">
+          <div slot="header">Runtime</div>
+          <div>
+            <el-row :gutter="10">
+              <el-col :span="12">os:</el-col>
+              <el-col :span="12" v-text="state.os.goos"></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="12">cpu nums:</el-col>
+              <el-col :span="12" v-text="state.os.numCpu"></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="12">compiler:</el-col>
+              <el-col :span="12" v-text="state.os.compiler"></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="12">go version:</el-col>
+              <el-col :span="12" v-text="state.os.goVersion"></el-col>
+            </el-row>
+            <el-row :gutter="10">
+              <el-col :span="12">goroutine nums:</el-col>
+              <el-col :span="12" v-text="state.os.numGoroutine"></el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-if="state.disk" class="card_item">
+          <div slot="header">Disk</div>
+          <div>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <el-row :gutter="10">
+                  <el-col :span="12">total (MB)</el-col>
+                  <el-col :span="12" v-text="state.disk.totalMb"></el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">used (MB)</el-col>
+                  <el-col :span="12" v-text="state.disk.usedMb"></el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">total (GB)</el-col>
+                  <el-col :span="12" v-text="state.disk.totalGb"></el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">used (GB)</el-col>
+                  <el-col :span="12" v-text="state.disk.usedGb"></el-col>
+                </el-row>
+              </el-col>
+              <el-col :span="12">
+                <el-progress
+                  type="dashboard"
+                  :percentage="state.disk.usedPercent"
+                  :color="colors"
+                ></el-progress>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="15" class="system_state">
+      <el-col :span="12">
+        <el-card
+          class="card_item"
+          v-if="state.cpu"
+          :body-style="{ height: '180px', 'overflow-y': 'scroll' }"
+        >
+          <div slot="header">CPU</div>
+          <div>
+            <el-row :gutter="10">
+              <el-col :span="12">physical number of cores:</el-col>
+              <el-col :span="12" v-text="state.cpu.cores"> </el-col>
+            </el-row>
+            <template v-for="(item, index) in state.cpu.cpus">
+              <el-row :key="index" :gutter="10">
+                <el-col :span="12">core {{ index }}:</el-col>
+                <el-col :span="12"
+                  ><el-progress
+                    type="line"
+                    :percentage="+item.toFixed(0)"
+                    :color="colors"
+                  ></el-progress
+                ></el-col>
+              </el-row>
+            </template>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="card_item" v-if="state.ram">
+          <div slot="header">Ram</div>
+          <div>
+            <el-row :gutter="10">
+              <el-col :span="12">
+                <el-row :gutter="10">
+                  <el-col :span="12">total (MB)</el-col>
+                  <el-col :span="12" v-text="state.ram.totalMb"></el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">used (MB)</el-col>
+                  <el-col :span="12" v-text="state.ram.usedMb"></el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">total (GB)</el-col>
+                  <el-col :span="12" v-text="state.ram.totalMb / 1024"></el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">used (GB)</el-col>
+                  <el-col
+                    :span="12"
+                    v-text="(state.ram.usedMb / 1024).toFixed(2)"
+                  ></el-col>
+                </el-row>
+              </el-col>
+              <el-col :span="12">
+                <el-progress
+                  type="dashboard"
+                  :percentage="state.ram.usedPercent"
+                  :color="colors"
+                ></el-progress>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getSystemState } from "@/api/system.js";
+export default {
+  name: "State",
+  data() {
+    return {
+      state: {},
+      colors: [
+        { color: "#5cb87a", percentage: 20 },
+        { color: "#e6a23c", percentage: 40 },
+        { color: "#f56c6c", percentage: 80 },
+      ],
+    };
+  },
+  created() {
+    this.reload();
+  },
+  methods: {
+    async reload() {
+      const { data } = await getSystemState();
+      this.state = data.server;
+    },
+  },
+};
+</script>
+
+<style>
+.system_state {
+  padding: 10px;
+}
+
+.card_item {
+  height: 280px;
+}
+</style>