系统监控修改为SSE模式

.env.development

@@ -2,6 +2,7 @@
 ENV = 'development'
 
 # 本地环境接口地址
+VITE_SERVER_URL =  'http://zhgy.sagoo.cn:8899'
 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'
@@ -9,4 +10,4 @@ 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/'
+# VITE_IMG_URL = 'http://sgadserver.wdeveloperw.xyz/'

package.json

@@ -25,6 +25,7 @@
     "echarts-gl": "^2.0.9",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^2.2.13",
+    "event-source-polyfill": "^1.0.31",
     "jsplumb": "^2.15.6",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",

src/api/system/index.ts

@@ -103,6 +103,7 @@ export default {
     deleteData: (ids: number[]) => del('/common/dict/data/delete', { ids }),
   },
   getSysInfo: () => get('/system/monitor/server'),
+
   log: {
     getList: (params: object) => get('/system/login/log/list', params),
     del: (infoIds: number) => del('/system/login/log/del', { infoIds }),
@@ -140,4 +141,4 @@ export default {
     getList: (params: object) => get('/system/plugins/list', params),
     changeStatus: (params: object) => post('/system/plugins/set', params),
   }
-}
+}

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

@@ -10,7 +10,7 @@
                   <tbody>
                   <tr>
                     <td>
-                      <div class="cell-card">核心数: </div>
+                      <div class="cell-card">CPU数: </div>
                     </td>
                     <td>
                       <div class="cell-card">{{ sysInfo.cpuNum }}</div>
@@ -18,6 +18,15 @@
                   </tr>
                   <tr>
                     <td>
+                      <div class="cell-card">核心数: </div>
+                    </td>
+                    <td>
+                      <div class="cell-card">{{ sysInfo.cpuCores }}</div>
+                    </td>
+                  </tr>
+
+                  <tr>
+                    <td>
                       <div class="cell-card">使用率:</div>
                     </td>
                     <td>
@@ -288,7 +297,7 @@ import 'echarts-wordcloud';
 import api from '/@/api/system';
 let interval: any = null;
 export default defineComponent({
-	name: 'monitor',
+  name: 'monitor',
 	components: {},
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
@@ -315,7 +324,6 @@ export default defineComponent({
 				],
 			});
 		}
-
 		function setOptChart2(value: number) {
 			myChart2.setOption({
 				series: [
@@ -330,7 +338,6 @@ export default defineComponent({
 				],
 			});
 		}
-
     function setOptChart3(value: number) {
       myChart3.setOption({
         series: [
@@ -399,7 +406,6 @@ export default defineComponent({
 			myChart1.setOption(option);
 			state.myCharts.push(myChart1);
 		};
-
 		//内存
 		const initChartRAM = () => {
 			myChart2 = echarts.init(proxy.$refs.chartsWarningRef2);
@@ -453,7 +459,6 @@ export default defineComponent({
 			myChart2.setOption(option);
 			state.myCharts.push(myChart2);
 		};
-
     //磁盘
     const initChartDISK = () => {
       myChart3 = echarts.init(proxy.$refs.chartsWarningRef3);
@@ -515,45 +520,94 @@ export default defineComponent({
       initChartDISK();
     });
 
-		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);
-        setOptChart3(data.diskUsedPercent);
-        // console.log(data);
-			};
-			// ws.onclose = () => {
-			// 	setTimeout(() => {
-			// 		startWs();
-			// 	}, 3000);
+			// 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);
+      //   setOptChart3(data.diskUsedPercent);
 			// };
-		}
+
+      const es = new EventSource(import.meta.env.VITE_SERVER_URL+"/subscribe/sysenv");
+
+      es.addEventListener("host", displayHost);
+      es.addEventListener("mem", displayMem);
+      es.addEventListener("cpu", displayCpu);
+      es.addEventListener("sysLoad", displaySysLoad);
+      es.addEventListener("disk", displayDisk);
+    }
 
 		startWs();
 
-		function getSystemInfo() {
-			api.getSysInfo().then((res: any) => {
-				state.sysInfo = res;
-				setOptChart1(res.cpuUsed);
-				setOptChart2(res.memUsage);
-        setOptChart3(res.diskUsedPercent);
+    function displayHost(event: { data: any; }) {
+      const data=JSON.parse(event.data);
+      state.sysInfo.sysOsName = data.os
+      state.sysInfo.sysOsArch = data.kernelArch
+      state.sysInfo.sysComputerName = data.hostname
+      state.sysInfo.goStartTime = data.bootTime
+      state.sysInfo.goRunTime = data.uptime
+    }
 
-      });
-		}
+    function displayMem(event: { data: any; }) {
+      const data=JSON.parse(event.data);
+      setOptChart2(data.usedPercent.toFixed(2));
+      state.sysInfo.memTotal = data.total
+      state.sysInfo.memUsed = data.used
+      state.sysInfo.memFree = data.free
+      state.sysInfo.goUsed = data.goUsed
+      state.sysInfo.memUsage = data.usedPercent.toFixed(2)
+
+    }
+
+    function displayCpu(event: { data: any; }) {
+      const data=JSON.parse(event.data);
+      state.sysInfo.cpuNum = data.Number
+      state.sysInfo.cpuCores = data.Cores
+      state.sysInfo.cpuUsed = data.UsedPercent[0].toFixed(2)
+      setOptChart1(data.UsedPercent[0].toFixed(2));
+
+
+    };
+
+    function displaySysLoad(event: { data: any; }) {
+      const data=JSON.parse(event.data)
+      state.sysInfo.cpuAvg5 = data.load5.toFixed(2)
+      state.sysInfo.cpuAvg15 = data.load15.toFixed(2)
+
+    };
+
+    function displayDisk(event: { data: any; }) {
+      const data=JSON.parse(event.data)
+      state.sysInfo.diskTotal = data.total
+      state.sysInfo.diskUsed = data.used
+      state.sysInfo.diskUsedPercent = data.usedPercent.toFixed(2)
+      setOptChart3(data.usedPercent.toFixed(2));
+
+    };
+
+
+		// function getSystemInfo() {
+		// 	api.getSysInfo().then((res: any) => {
+		// 		state.sysInfo = res;
+		// 		setOptChart1(res.cpuUsed);
+		// 		setOptChart2(res.memUsage);
+    //     setOptChart3(res.diskUsedPercent);
+    //
+    //   });
+		// }
 
 		return {
 			...toRefs(state),
-			getSystemInfo,
+			// getSystemInfo,
 			setOptChart1,
 			setOptChart2,
-			ws,
+      setOptChart3,
+
+      // ws,
 		};
 	},
 	created() {
@@ -565,9 +619,9 @@ export default defineComponent({
 		// }
 	},
 	unmounted() {
-		if (this.ws) {
-			(this.ws as WebSocket).close();
-		}
+		// if (this.ws) {
+		// 	(this.ws as WebSocket).close();
+		// }
 		if (interval) {
 			clearInterval(interval);
 			interval = null;
@@ -619,6 +673,7 @@ export default defineComponent({
 		},
 	},
 });
+
 </script>
 
 <style scoped lang="scss">