From 9057e04efad1b7d61c77a72e5c37a504d0aee935 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期五, 26 九月 2025 09:24:03 +0800
Subject: [PATCH] H5静态化
---
admin/src/views/system/monitor.vue | 324 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 324 insertions(+), 0 deletions(-)
diff --git a/admin/src/views/system/monitor.vue b/admin/src/views/system/monitor.vue
new file mode 100644
index 0000000..03fdf4b
--- /dev/null
+++ b/admin/src/views/system/monitor.vue
@@ -0,0 +1,324 @@
+<template>
+ <Profile :permissions="['system:monitor:query']">
+ <div class="monitor">
+ <div class="toolbar">
+ <el-switch v-model="autoRefresh" @change="changeAutoRefresh"/><label>{{autoRefresh | autoRefreshText}}</label>
+ </div>
+ <ul>
+ <li class="wrap">
+ <h2>CPU<Light v-if="data != null" :warn="data.cpu.useRatio > 60" :danger="data.cpu.useRatio > 80"/></h2>
+ <div>
+ <dl>
+ <dt>鐗╃悊鏍告暟</dt>
+ <dd><Value :data="data" prop="cpu.physicalCount"/></dd>
+ </dl>
+ <dl>
+ <dt>閫昏緫鏍告暟</dt>
+ <dd><Value :data="data" prop="cpu.logicalCount"/></dd>
+ </dl>
+ <dl class="important">
+ <dt>褰撳墠浣跨敤鐜�</dt>
+ <dd><Value :data="data" prop="cpu.useRatio" :handler="keep2decimals" suffix="%"/></dd>
+ </dl>
+ <dl>
+ <dt>褰撳墠绌洪棽鐜�</dt>
+ <dd><Value :data="data" prop="cpu.freeRatio" :handler="keep2decimals" suffix="%"/></dd>
+ </dl>
+ </div>
+ </li>
+ <li class="wrap">
+ <h2>鍐呭瓨<Light v-if="data != null" :warn="data.memory.useRatio > 60" :danger="data.memory.useRatio > 80"/></h2>
+ <div>
+ <dl>
+ <dt>鎬荤┖闂�</dt>
+ <dd><Value :data="data" prop="memory.size" suffix="G" :handler="toG"/></dd>
+ </dl>
+ <dl>
+ <dt>绌洪棽绌洪棿</dt>
+ <dd><Value :data="data" prop="memory.freeSpace" suffix="G" :handler="toG"/></dd>
+ </dl>
+ <dl class="important">
+ <dt>宸茬敤绌洪棿</dt>
+ <dd><Value :data="data" prop="memory.usedSpace" suffix="G" :handler="toG"/></dd>
+ </dl>
+ <dl class="important">
+ <dt>浣跨敤鐜�</dt>
+ <dd><Value :data="data" prop="memory.useRatio" suffix="%" :handler="keep2decimals"/></dd>
+ </dl>
+ </div>
+ </li>
+ <li class="wrap">
+ <h2>JVM<Light v-if="data != null" :warn="data.jvm.memory.useRatio > 60" :danger="data.jvm.memory.useRatio > 80"/></h2>
+ <div>
+ <dl>
+ <dt>瀹夎璺緞</dt>
+ <dd><Value :data="data" prop="jvm.home"/></dd>
+ </dl>
+ <dl>
+ <dt>鐗堟湰</dt>
+ <dd><Value :data="data" prop="jvm.version"/></dd>
+ </dl>
+ <dl>
+ <dt>鍚姩鏃堕棿</dt>
+ <dd><Value :data="data" prop="jvm.bootTime"/></dd>
+ </dl>
+ <dl>
+ <dt>杩愯鏃堕暱</dt>
+ <dd><Value :data="data" prop="jvm.runtime"/></dd>
+ </dl>
+ <dl>
+ <dt>鎬荤┖闂�</dt>
+ <dd><Value :data="data" prop="jvm.memory.size" suffix="M" :handler="keep2decimals"/></dd>
+ </dl>
+ <dl>
+ <dt>绌洪棽绌洪棿</dt>
+ <dd><Value :data="data" prop="jvm.memory.freeSpace" suffix="M" :handler="keep2decimals"/></dd>
+ </dl>
+ <dl class="important">
+ <dt>宸茬敤绌洪棿</dt>
+ <dd><Value :data="data" prop="jvm.memory.usedSpace" suffix="M" :handler="keep2decimals"/></dd>
+ </dl>
+ <dl class="important">
+ <dt>浣跨敤鐜�</dt>
+ <dd><Value :data="data" prop="jvm.memory.useRatio" suffix="%" :handler="keep2decimals"/></dd>
+ </dl>
+ </div>
+ </li>
+ <li class="wrap">
+ <h2>鏈嶅姟鍣�</h2>
+ <div>
+ <dl>
+ <dt>鎿嶄綔绯荤粺</dt>
+ <dd><Value :data="data" prop="osName"/></dd>
+ </dl>
+ <dl>
+ <dt>绯荤粺鐗堟湰</dt>
+ <dd><Value :data="data" prop="osVersion"/></dd>
+ </dl>
+ <dl>
+ <dt>绯荤粺鏋舵瀯</dt>
+ <dd><Value :data="data" prop="osArch"/></dd>
+ </dl>
+ <dl class="important">
+ <dt>IP鍦板潃</dt>
+ <dd><Value :data="data" prop="ip"/></dd>
+ </dl>
+ <dl>
+ <dt>MAC鍦板潃</dt>
+ <dd><Value :data="data" prop="mac"/></dd>
+ </dl>
+ <dl>
+ <dt>鏈嶅姟鍣ㄦ椂闂�</dt>
+ <dd><Value :data="data" prop="currentTime"/></dd>
+ </dl>
+ </div>
+ </li>
+ </ul>
+ <div class="wrap">
+ <h2>纾佺洏淇℃伅</h2>
+ <el-table :data="data ? data.disks : []" v-loading="loading">
+ <el-table-column prop="name" label="纾佺洏鍚嶇О"/>
+ <el-table-column prop="dir" label="纾佺洏璺緞"/>
+ <el-table-column prop="fsType" label="鏂囦欢绯荤粺"/>
+ <el-table-column prop="size" label="鎬荤┖闂�">
+ <template slot-scope="{row}">
+ {{toG(row.size)}}G
+ </template>
+ </el-table-column>
+ <el-table-column prop="freeSpace" label="鍙敤绌洪棿">
+ <template slot-scope="{row}">
+ {{toG(row.freeSpace)}}G
+ </template>
+ </el-table-column>
+ <el-table-column prop="usedSpace" label="宸茬敤绌洪棿">
+ <template slot-scope="{row}">
+ <label class="important">{{toG(row.usedSpace)}}G</label>
+ </template>
+ </el-table-column>
+ <el-table-column prop="useRatio" label="宸茬敤鍗犳瘮">
+ <template slot-scope="{row}">
+ <label class="important">{{keep2decimals(row.useRatio)}}%</label>
+ </template>
+ </el-table-column>
+ <el-table-column>
+ <template slot-scope="{row}">
+ <Light :warn="row.useRatio > 60" :danger="row.useRatio > 80" :mini="true"/>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ </Profile>
+</template>
+
+<script>
+import { getSystemInfo } from '@/api/system/monitor'
+import Value from '@/components/common/Value'
+import Light from '@/components/common/Light'
+import Profile from '../../components/common/Profile'
+
+export default {
+ name: 'SystemMonitor',
+ components: { Profile, Light, Value },
+ data () {
+ return {
+ // 鍔犺浇涓�
+ loading: false,
+ // 鑷姩鍒锋柊鏍囪瘑
+ autoRefresh: false,
+ // 鏁版嵁
+ data: null,
+ // 鑷姩鍒锋柊瀹氭椂鍣�
+ interval: null
+ }
+ },
+ filters: {
+ autoRefreshText (value) {
+ if (value) {
+ return '宸插紑鍚嚜鍔ㄥ埛鏂�'
+ }
+ return '宸插叧闂嚜鍔ㄥ埛鏂�'
+ }
+ },
+ methods: {
+ /**
+ * 鍒囨崲鑷姩鍒锋柊
+ *
+ * @param autoRefresh 鏄惁鑷姩鍒锋柊
+ */
+ changeAutoRefresh (autoRefresh) {
+ if (this.interval != null) {
+ clearInterval(this.interval)
+ }
+ if (autoRefresh) {
+ this.getSystemInfo()
+ this.interval = setInterval(() => {
+ this.getSystemInfo()
+ }, 3000)
+ }
+ },
+ /**
+ * 鑾峰彇绯荤粺淇℃伅
+ */
+ getSystemInfo () {
+ if (this.loading) {
+ return
+ }
+ this.loading = true
+ getSystemInfo()
+ .then(data => {
+ this.data = data
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.loading = false
+ })
+ },
+ /**
+ * 鍗曚綅杞负G
+ *
+ * @param value 杞崲鍊�
+ * @returns {number}
+ */
+ toG (value) {
+ return Math.round(value / 1024 * 100) / 100
+ },
+ /**
+ * 杞负姣旂巼
+ *
+ * @param value 杞崲鍊�
+ * @returns {number}
+ */
+ keep2decimals (value) {
+ return Math.round(value * 100) / 100
+ }
+ },
+ beforeRouteLeave (from, to, next) {
+ clearInterval(this.interval)
+ next()
+ },
+ created () {
+ this.getSystemInfo()
+ }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/style/variables.scss";
+.monitor {
+ padding: 20px 20px;
+}
+// 宸ュ叿鏍�
+.toolbar {
+ margin-bottom: 12px;
+ background: #fff;
+ padding: 8px 16px;
+ label {
+ font-size: 12px;
+ margin-left: 8px;
+ color: #999;
+ }
+}
+ul {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ li {
+ width: 49.5%;
+ min-height: 200px;
+ flex-shrink: 0;
+ }
+}
+// 淇℃伅妯″潡
+.wrap {
+ background: #fff;
+ box-shadow: 2px 2px 10px -5px #999;
+ border-radius: 8px;
+ margin-bottom: 16px;
+ h2 {
+ border-bottom: 1px solid #eee;
+ font-size: 18px;
+ font-weight: normal;
+ line-height: 40px;
+ padding: 0 16px;
+ color: #555;
+ position: relative;
+ .light {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ }
+ }
+ & > div {
+ padding: 0 16px;
+ font-size: 14px;
+ dl {
+ display: flex;
+ dt {
+ width: 80px;
+ text-align: right;
+ flex-shrink: 0;
+ color: #999;
+ }
+ dd {
+ width: 100%;
+ margin: 0;
+ padding-left: 12px;
+ color: #555;
+ overflow: hidden;
+ }
+ }
+ }
+}
+// 閲嶈淇℃伅
+.important {
+ color: $primary-color;
+ font-weight: bold;
+ & > dd > div {
+ color: $primary-color;
+ font-weight: bold;
+ }
+}
+</style>
--
Gitblit v1.9.3