diff --git a/Web/src/pages/system/machine/index.vue b/Web/src/pages/system/machine/index.vue
new file mode 100644
index 0000000..ec9033a
--- /dev/null
+++ b/Web/src/pages/system/machine/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <container>
+    <br />
+    <Auth auth="sysMachine:query">
+      <a-row :gutter="24">
+        <a-col :md="12" :sm="24">
+          <a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="系统信息">
+            <template>
+              <a-descriptions bordered>
+                <a-descriptions-item :span="3" label="主机名称：">{{ machineBaseInfo.hostName }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="操作系统：">{{ machineBaseInfo.systemOs }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="系统架构：">{{ machineBaseInfo.osArchitecture }}</a-descriptions-item>
+                <a-descriptions-item
+                  :span="3"
+                  label="运行框架："
+                >{{ machineBaseInfo.frameworkDescription }}</a-descriptions-item>
+                <a-descriptions-item label="CPU核数:">{{ machineBaseInfo.processorCount }}</a-descriptions-item>
+              </a-descriptions>
+            </template>
+          </a-card>
+        </a-col>
+        <a-col :md="12" :sm="24">
+          <a-card :bordered="false" :loading="loading" style="margin-bottom: 20px" title="网络信息">
+            <template>
+              <a-descriptions bordered>
+                <a-descriptions-item
+                  :span="3"
+                  label="外网信息："
+                  style="ant-descriptions-item-label ant-descriptions-item-colon"
+                >{{ machineBaseInfo.wanIp }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="IPv4地址：">{{ machineBaseInfo.lanIp }}</a-descriptions-item>
+                <a-descriptions-item :span="3" label="网卡MAC：">{{ machineBaseInfo.ipMac }}</a-descriptions-item>
+                <a-descriptions-item
+                  :span="3"
+                  label="流量统计："
+                >{{ machineNetworkInfo.sendAndReceived }}</a-descriptions-item>
+                <a-descriptions-item label="网络速度：:">{{ machineNetworkInfo.networkSpeed }}</a-descriptions-item>
+              </a-descriptions>
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-card :bordered="false" :loading="loading" title="其他信息">
+        <template>
+          <a-descriptions bordered>
+            <a-descriptions-item :span="3" label="运行时间：">{{ machineUseInfo.runTime }}</a-descriptions-item>
+            <a-descriptions-item :span="3" label="CPU使用率：">{{ machineUseInfo.cpuRate }}</a-descriptions-item>
+            <a-descriptions-item :span="3" label="总内存：">{{ machineUseInfo.totalRam }}</a-descriptions-item>
+            <a-descriptions-item :span="2" label="内存使用率：">{{ machineUseInfo.ramRate }}</a-descriptions-item>
+          </a-descriptions>
+        </template>
+      </a-card>
+    </Auth>
+  </container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      machineBaseInfo: [],
+      machineUseInfo: [],
+      machineNetworkInfo: [],
+    };
+  },
+  created() {
+    this.loading = true;
+    this.onLoadCodes();
+  },
+  methods: {
+    //加载系统信息，网络信息，其他信息
+    onLoadCodes() {
+      this.$api
+        .$queue([this.$api.sysMachineBase(), this.$api.sysMachineUse(), this.$api.sysMachineNetwork()])
+        .then(([MachineBase, MachineUseInfo, MachineNetwork]) => {
+          this.machineBaseInfo = MachineBase;
+          this.machineUseInfo = MachineUseInfo;
+          this.machineNetworkInfo = MachineNetwork;
+          this.loading = false;
+        });
+    },
+    refreshData() {
+      this.onLoadCodes();
+    },
+  },
+  mounted() {
+    this.timer = setInterval(this.refreshData, 3000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
+};
+</script>
\ No newline at end of file