|
|
@@ -0,0 +1,297 @@
|
|
|
+<script setup>
|
|
|
+import {onMounted, ref} from "vue";
|
|
|
+
|
|
|
+const windowHeight = ref("height:" + (window.innerHeight - 131) + "px")
|
|
|
+
|
|
|
+const softWare = [
|
|
|
+ {
|
|
|
+ ico: '/nginx.svg',
|
|
|
+ name: 'NGINX',
|
|
|
+ notes: '一款开源的http反向代理软件，具有较高的性能，可代理tcp和udp。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ico: '/mysql.svg',
|
|
|
+ name: 'MYSQL',
|
|
|
+ notes: 'MySQL是一款流行的开源关系型数据库管理系统，用于存储和管理数据。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ico: '/nps.svg',
|
|
|
+ name: 'NPS',
|
|
|
+ notes: 'nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ico: '/java.svg',
|
|
|
+ name: 'JAVA',
|
|
|
+ notes: 'Java是一种面向对象的编程语言，广泛应用于软件开发和企业级应用程序的构建。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ico: '/docker.svg',
|
|
|
+ name: 'DOCKER',
|
|
|
+ notes: 'Docker是一种开源的容器化平台，用于快速构建、部署和运行应用程序。'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+window.addEventListener('resize', function () {
|
|
|
+ windowHeight.value = "height:" + (window.innerHeight - 131) + "px";
|
|
|
+ console.log('窗口高度变化为: ' + windowHeight.value);
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-header class="header">
|
|
|
+ <div class="title">
|
|
|
+ <font-awesome-icon class="ico" :icon="['fas', 'gauge']"/>
|
|
|
+ <span>主机状态</span></div>
|
|
|
+ <div class="user">
|
|
|
+ <el-avatar :size="40"/>
|
|
|
+ <el-dropdown>
|
|
|
+ <span style="margin-left: 10px;font-size: 16px">一半山川湖海</span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item>账号设置</el-dropdown-item>
|
|
|
+ <el-dropdown-item>密码修改</el-dropdown-item>
|
|
|
+ <el-dropdown-item>退出登录</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </el-header>
|
|
|
+ <el-main :style="windowHeight" style="margin: 0;padding: 0;">
|
|
|
+ <el-scrollbar>
|
|
|
+ <el-row class="e-body" :gutter="20">
|
|
|
+ <el-col :span="16" style="margin-bottom: 20px">
|
|
|
+ <el-card
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ shadow="hover"
|
|
|
+ :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
|
|
|
+ <template #header>
|
|
|
+ <span style="font-size: 16px">服务器概览</span>
|
|
|
+ </template>
|
|
|
+ <div class="card-in">
|
|
|
+ <span class="sp1">在线</span>
|
|
|
+ <span class="sp2">2</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-in">
|
|
|
+ <span class="sp1">网站</span>
|
|
|
+ <span class="sp2">16</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-in">
|
|
|
+ <span class="sp1">端口</span>
|
|
|
+ <span class="sp2">2</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-in">
|
|
|
+ <span class="sp1">连接</span>
|
|
|
+ <span class="sp2">234</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ shadow="hover"
|
|
|
+ :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
|
|
|
+ <template #header>
|
|
|
+ <span style="font-size: 16px">服务器状态</span>
|
|
|
+ </template>
|
|
|
+ <el-progress type="dashboard" :percentage="40" width="130" stroke-width="10">
|
|
|
+ <template #default="{ percentage }">
|
|
|
+ <span class="percentage-value">{{ percentage }}%</span>
|
|
|
+ <span class="percentage-label">处理器</span>
|
|
|
+ </template>
|
|
|
+ </el-progress>
|
|
|
+ <el-progress type="dashboard" :percentage="35" width="130" stroke-width="10">
|
|
|
+ <template #default="{ percentage }">
|
|
|
+ <span class="percentage-value">{{ percentage }}%</span>
|
|
|
+ <span class="percentage-label">内存</span>
|
|
|
+ </template>
|
|
|
+ </el-progress>
|
|
|
+ <el-progress type="dashboard" :percentage="10" width="130" stroke-width="10">
|
|
|
+ <template #default="{ percentage }">
|
|
|
+ <span class="percentage-value">{{ percentage }}%</span>
|
|
|
+ <span class="percentage-label">硬盘</span>
|
|
|
+ </template>
|
|
|
+ </el-progress>
|
|
|
+ <el-progress type="dashboard" :percentage="20" width="130" stroke-width="10">
|
|
|
+ <template #default="{ percentage }">
|
|
|
+ <span class="percentage-value">{{ percentage }}%</span>
|
|
|
+ <span class="percentage-label">负载</span>
|
|
|
+ </template>
|
|
|
+ </el-progress>
|
|
|
+ </el-card>
|
|
|
+ <el-card
|
|
|
+ shadow="hover"
|
|
|
+ :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
|
|
|
+ <template #header>
|
|
|
+ <span style="font-size: 16px">服务器监控</span>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8" style="margin-bottom: 20px">
|
|
|
+ <el-card
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ shadow="hover"
|
|
|
+ :body-style="{display: 'flex', padding: '30px 10px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
|
|
|
+ <template #header>
|
|
|
+ <span style="font-size: 16px">系统信息</span>
|
|
|
+ </template>
|
|
|
+ <div class="sys-box">
|
|
|
+ <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'layer-group']"/>主机名称：</span><span
|
|
|
+ class="sp2">MokiBox</span>
|
|
|
+ </div>
|
|
|
+ <div class="sys-box">
|
|
|
+ <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'circle-info']"/>系统版本：</span><span
|
|
|
+ class="sp2">ubuntu-22.04</span>
|
|
|
+ </div>
|
|
|
+ <div class="sys-box">
|
|
|
+ <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'brain']"/>内核版本：</span>
|
|
|
+ <span class="sp2">5.15.0-71</span>
|
|
|
+ </div>
|
|
|
+ <div class="sys-box">
|
|
|
+ <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'inbox']"/>系统类型：</span>
|
|
|
+ <span class="sp2">linux-x86_64</span>
|
|
|
+ </div>
|
|
|
+ <div class="sys-box">
|
|
|
+ <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'circle-play']"/>启动时间：</span>
|
|
|
+ <span class="sp2">2023-06-29 10:53:22</span></div>
|
|
|
+ <div class="sys-box">
|
|
|
+ <span class="sp1"><font-awesome-icon class="ico" :icon="['fas', 'clock']"/>运行时间：</span>
|
|
|
+ <span class="sp2">1天 13时 03分</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ shadow="hover"
|
|
|
+ :body-style="{display: 'flex', padding: '20px',justifyContent: 'space-around',alignItems: 'center',flexWrap: 'wrap'}">
|
|
|
+ <template #header>
|
|
|
+ <span style="font-size: 16px">软件信息</span>
|
|
|
+ </template>
|
|
|
+ <div class="soft-box" v-for="item in softWare">
|
|
|
+ <div
|
|
|
+ style="box-shadow: #ececec 0 0 6px 1px;width: 60px;height:60px;border-radius: 8px;display: flex;align-items: center;justify-content: center">
|
|
|
+ <el-image style="width: 80%;height: 80%" :src="item.ico"/>
|
|
|
+ </div>
|
|
|
+ <div style="width: 60%;height: 60px; padding: 0 20px">
|
|
|
+ <span style="display: block;">{{ item.name }}</span>
|
|
|
+ <span
|
|
|
+ style="display: block;font-size: 14px;color: gray">{{ item.notes }}</span>
|
|
|
+ </div>
|
|
|
+ <el-button>安装</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-main>
|
|
|
+ <el-footer class="e-footer">
|
|
|
+ <div>
|
|
|
+ <span style="font-size: 14px;color: #858585">Copyright © 2018-2023 POWER 帕沃信息</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span style="font-size: 14px;color: #858585">面板当前版本：v1.1.0 （检查更新）</span>
|
|
|
+ </div>
|
|
|
+ </el-footer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+body {
|
|
|
+ background: aqua;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ height: 70px;
|
|
|
+ box-shadow: 0 5px 5px #eaeaea;
|
|
|
+ background: white;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.ico {
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 4px;
|
|
|
+ border-bottom: 2px dotted #cccccc;
|
|
|
+}
|
|
|
+
|
|
|
+.user {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.e-body {
|
|
|
+ margin: 0 !important;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 20px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.percentage-value {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.percentage-label {
|
|
|
+ display: block;
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-in {
|
|
|
+ float: left;
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.card-in > span {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.card-in > .sp1 {
|
|
|
+ font-size: 18px
|
|
|
+}
|
|
|
+
|
|
|
+.card-in > .sp2 {
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 24px
|
|
|
+}
|
|
|
+
|
|
|
+.sys-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.e-footer {
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px;
|
|
|
+ box-shadow: 0 -5px 5px #eaeaea;
|
|
|
+}
|
|
|
+
|
|
|
+.ico {
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.sys-box > .sp1 {
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.soft-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.soft-box:hover {
|
|
|
+ background: rgba(224, 223, 223, 0.99);
|
|
|
+}
|
|
|
+</style>
|
MokiBox
