服务监控改为websocket

.env.development

@@ -7,5 +7,6 @@ VITE_IMG_URL = 'http://zhgy.sagoo.cn:8899/'
 VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
 VITE_SCREEN_URL = 'http://home.yanglizhi.cn:10003'
 VITE_TOPO_URL = 'http://home.yanglizhi.cn:10001'
+VITE_WS_URL = 'ws://zhgy.sagoo.cn:8899/api/v1/websocket'
 # VITE_API_URL = 'http://sgadserver.wdeveloperw.xyz/api/v1'
 # VITE_IMG_URL = 'http://sgadserver.wdeveloperw.xyz/'

.env.production

@@ -9,4 +9,5 @@ VITE_API_URL = 'http://zhgy.sagoo.cn:8899/api/v1'
 VITE_IMG_URL = 'http://zhgy.sagoo.cn:8899/'
 VITE_ASSESS_URL = 'http://zhgy.sagoo.cn/base-api/assess/v1'
 VITE_SCREEN_URL = 'http://home.yanglizhi.cn:10003'
-VITE_TOPO_URL = 'http://home.yanglizhi.cn:10001'
+VITE_TOPO_URL = 'http://home.yanglizhi.cn:10001'
+VITE_WS_URL = 'ws://zhgy.sagoo.cn:8899/api/v1/websocket'

src/views/system/monitor/server/index.vue

@@ -1,245 +1,244 @@
 <template>
-  <div class="system-user-container">
-    <div class="flex-row gap-3">
-      <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>运行资源</span>
-            </div>
-          </template>
-          <div class=" el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
-              <tbody>
-                <tr>
-                  <td>
-                    <div class="cell">操作系统:</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{sysInfo.sysOsName}}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">系统架构:</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{sysInfo.sysOsArch}}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">服务器名称:</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{sysInfo.sysComputerName}}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">服务器IP:</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{sysInfo.sysComputerIp}}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">Go语言版本</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{sysInfo.goVersion}}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">启动时间</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{sysInfo.goStartTime}}</div>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <div class="cell">运行时长:</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{timeFormat(sysInfo.goRunTime)}}</div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>硬盘资源</span>
-            </div>
-          </template>
-          <div class=" el-table--enable-row-hover el-table--medium" style="height:280px;overflow:auto">
-            <table cellspacing="0" style="width: 100%;">
-              <tbody>
-                <tr>
-                  <td>
-                    <div class="cell">盘符路径</div>
-                  </td>
-                  <td>
-                    <div class="cell">文件系统</div>
-                  </td>
-                  <td>
-                    <div class="cell">总大小</div>
-                  </td>
-                  <td>
-                    <div class="cell">可用大小</div>
-                  </td>
-                  <td>
-                    <div class="cell">已用大小</div>
-                  </td>
-                  <td>
-                    <div class="cell">已用百分比</div>
-                  </td>
-                </tr>
-                <tr v-for="(sysFile, index) in sysInfo.diskList" :key="index">
-                  <td>
-                    <div class="cell">{{ sysFile.path }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.fstype }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ memorySizeFormat(sysFile.total) }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ memorySizeFormat(sysFile.free) }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ memorySizeFormat(sysFile.used) }}</div>
-                  </td>
-                  <td>
-                    <div class="cell">{{ sysFile.usedPercent }}%</div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </el-card>
-      </el-col>
-    </div>
-    <div class="flex-row gap-3">
-      <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>CPU</span>
-            </div>
-          </template>
-          <div class=" el-table--enable-row-hover el-table--medium">
-            <el-row :gutter="30">
-              <el-col :xs="24" :sm="24" :md="12">
-                <table cellspacing="0" style="width: 100%;">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div class="cell">核心数:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{sysInfo.cpuNum}}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell">使用率:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{sysInfo.cpuUsed}}%</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell">Load Avg 5:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{sysInfo.cpuAvg5}}%</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell">Load Avg 15:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{sysInfo.cpuAvg15}}%</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </el-col>
-              <el-col :xs="24" :sm="24" :md="12">
-                <div style="min-height: 280px;" ref="chartsWarningRef1"></div>
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
-        <el-card class="box-card">
-          <template #header>
-            <div class="card-header">
-              <span>内存</span>
-            </div>
-          </template>
-          <div class=" el-table--enable-row-hover el-table--medium">
-            <el-row :gutter="30">
-              <el-col :xs="24" :sm="24" :md="12">
-                <table cellspacing="0" style="width: 100%;">
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div class="cell">总数:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell">已使用:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{ memorySizeFormat(sysInfo.memUsed)}}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell">剩余:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{ memorySizeFormat(sysInfo.memFree) }}</div>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell">系统使用:</div>
-                      </td>
-                      <td>
-                        <div class="cell">{{ memorySizeFormat(sysInfo.goUsed)}}</div>
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </el-col>
-              <el-col :xs="24" :sm="24" :md="12">
-                <div style="min-height: 280px;" ref="chartsWarningRef2"></div>
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-    </div>
-  </div>
+	<div class="system-user-container">
+		<div class="flex-row gap-3">
+			<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+				<el-card class="box-card">
+					<template #header>
+						<div class="card-header">
+							<span>运行资源</span>
+						</div>
+					</template>
+					<div class="el-table--enable-row-hover el-table--medium">
+						<table cellspacing="0" style="width: 100%">
+							<tbody>
+								<tr>
+									<td>
+										<div class="cell">操作系统:</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysInfo.sysOsName }}</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cell">系统架构:</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysInfo.sysOsArch }}</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cell">服务器名称:</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysInfo.sysComputerName }}</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cell">服务器IP:</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysInfo.sysComputerIp }}</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cell">Go语言版本</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysInfo.goVersion }}</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cell">启动时间</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysInfo.goStartTime }}</div>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<div class="cell">运行时长:</div>
+									</td>
+									<td>
+										<div class="cell">{{ timeFormat(sysInfo.goRunTime) }}</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+				<el-card class="box-card">
+					<template #header>
+						<div class="card-header">
+							<span>硬盘资源</span>
+						</div>
+					</template>
+					<div class="el-table--enable-row-hover el-table--medium" style="height: 280px; overflow: auto">
+						<table cellspacing="0" style="width: 100%">
+							<tbody>
+								<tr>
+									<td>
+										<div class="cell">盘符路径</div>
+									</td>
+									<td>
+										<div class="cell">文件系统</div>
+									</td>
+									<td>
+										<div class="cell">总大小</div>
+									</td>
+									<td>
+										<div class="cell">可用大小</div>
+									</td>
+									<td>
+										<div class="cell">已用大小</div>
+									</td>
+									<td>
+										<div class="cell">已用百分比</div>
+									</td>
+								</tr>
+								<tr v-for="(sysFile, index) in sysInfo.diskList" :key="index">
+									<td>
+										<div class="cell">{{ sysFile.path }}</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysFile.fstype }}</div>
+									</td>
+									<td>
+										<div class="cell">{{ memorySizeFormat(sysFile.total) }}</div>
+									</td>
+									<td>
+										<div class="cell">{{ memorySizeFormat(sysFile.free) }}</div>
+									</td>
+									<td>
+										<div class="cell">{{ memorySizeFormat(sysFile.used) }}</div>
+									</td>
+									<td>
+										<div class="cell">{{ sysFile.usedPercent }}%</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</el-card>
+			</el-col>
+		</div>
+		<div class="flex-row gap-3">
+			<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+				<el-card class="box-card">
+					<template #header>
+						<div class="card-header">
+							<span>CPU</span>
+						</div>
+					</template>
+					<div class="el-table--enable-row-hover el-table--medium">
+						<el-row :gutter="30">
+							<el-col :xs="24" :sm="24" :md="12">
+								<table cellspacing="0" style="width: 100%">
+									<tbody>
+										<tr>
+											<td>
+												<div class="cell">核心数:</div>
+											</td>
+											<td>
+												<div class="cell">{{ sysInfo.cpuNum }}</div>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<div class="cell">使用率:</div>
+											</td>
+											<td>
+												<div class="cell">{{ sysInfo.cpuUsed }}%</div>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<div class="cell">Load Avg 5:</div>
+											</td>
+											<td>
+												<div class="cell">{{ sysInfo.cpuAvg5 }}%</div>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<div class="cell">Load Avg 15:</div>
+											</td>
+											<td>
+												<div class="cell">{{ sysInfo.cpuAvg15 }}%</div>
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</el-col>
+							<el-col :xs="24" :sm="24" :md="12">
+								<div style="min-height: 280px" ref="chartsWarningRef1"></div>
+							</el-col>
+						</el-row>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xs="24" :sm="12" :md="12" class="marg-b-15">
+				<el-card class="box-card">
+					<template #header>
+						<div class="card-header">
+							<span>内存</span>
+						</div>
+					</template>
+					<div class="el-table--enable-row-hover el-table--medium">
+						<el-row :gutter="30">
+							<el-col :xs="24" :sm="24" :md="12">
+								<table cellspacing="0" style="width: 100%">
+									<tbody>
+										<tr>
+											<td>
+												<div class="cell">总数:</div>
+											</td>
+											<td>
+												<div class="cell">{{ memorySizeFormat(sysInfo.memTotal) }}</div>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<div class="cell">已使用:</div>
+											</td>
+											<td>
+												<div class="cell">{{ memorySizeFormat(sysInfo.memUsed) }}</div>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<div class="cell">剩余:</div>
+											</td>
+											<td>
+												<div class="cell">{{ memorySizeFormat(sysInfo.memFree) }}</div>
+											</td>
+										</tr>
+										<tr>
+											<td>
+												<div class="cell">系统使用:</div>
+											</td>
+											<td>
+												<div class="cell">{{ memorySizeFormat(sysInfo.goUsed) }}</div>
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</el-col>
+							<el-col :xs="24" :sm="24" :md="12">
+								<div style="min-height: 280px" ref="chartsWarningRef2"></div>
+							</el-col>
+						</el-row>
+					</div>
+				</el-card>
+			</el-col>
+		</div>
+	</div>
 </template>
 
 <script lang="ts">
@@ -400,6 +399,28 @@ export default defineComponent({
 			initChartRAM();
 		});
 
+		let ws: WebSocket | null = null;
+
+		function startWs() {
+			ws = null;
+			ws = new WebSocket(import.meta.env.VITE_WS_URL + '/monitorServer/ws');
+			ws.onopen = () => {};
+			ws.onmessage = ({ data: dataStr }) => {
+				const data = JSON.parse(dataStr);
+				state.sysInfo = data;
+				setOptChart1(data.cpuUsed);
+				setOptChart2(data.memUsage);
+				// console.log(data);
+			};
+			ws.onclose = () => {
+				setTimeout(() => {
+					startWs();
+				}, 3000);
+			};
+		}
+
+		startWs();
+
 		function getSystemInfo() {
 			api.getSysInfo().then((res: any) => {
 				state.sysInfo = res;
@@ -416,12 +437,12 @@ export default defineComponent({
 		};
 	},
 	created() {
-		this.getSystemInfo();
-		if (interval === null) {
-			interval = setInterval(() => {
-				this.getSystemInfo();
-			}, 5000);
-		}
+		// this.getSystemInfo();
+		// if (interval === null) {
+		// 	interval = setInterval(() => {
+		// 		this.getSystemInfo();
+		// 	}, 5000);
+		// }
 	},
 	unmounted() {
 		if (interval !== null) {
@@ -502,4 +523,3 @@ export default defineComponent({
 	min-height: 380px;
 }
 </style>
-