去除状态面板,部分代码调整
This commit is contained in:
parent
126ecb52e3
commit
a7fe6c3772
@ -31,7 +31,7 @@ let files = ref([])
|
||||
let folders = computed(() => {
|
||||
let folders = []
|
||||
if(cursor.value.length === 0){
|
||||
onlineSites.value.forEach((site) => {
|
||||
sites.value.forEach((site) => {
|
||||
folders.push({name:site.hostname, site:true, id:site.id})
|
||||
})
|
||||
} else {
|
||||
@ -52,8 +52,8 @@ let folders = computed(() => {
|
||||
}
|
||||
return folders;
|
||||
})
|
||||
let onlineSites = computed(() => {
|
||||
return store.getters.getOnlineSites
|
||||
let sites = computed(() => {
|
||||
return store.getters.getSites
|
||||
})
|
||||
let currentPath = computed(() => {
|
||||
let path = ""
|
||||
@ -82,7 +82,7 @@ function loadFilesByCursor(){
|
||||
files.value.splice(0)
|
||||
//如果坐标为空,则放入服务器节点
|
||||
if (cursor.value.length === 0){
|
||||
onlineSites.value.forEach((site) => {
|
||||
sites.value.forEach((site) => {
|
||||
files.value.push({name:site.hostname, site:true})
|
||||
})
|
||||
} else {
|
||||
|
||||
@ -1,143 +0,0 @@
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import Util from "../../Util/index.js";
|
||||
import minimizeStr from '../minimize-str/index.vue'
|
||||
let props = defineProps(['status', 'site'])
|
||||
|
||||
let headerStyle = ref({})
|
||||
let cpuPercentage = ref(0)
|
||||
let memoryPercentage = ref(0)
|
||||
let usedMemory = ref(0)
|
||||
let totalMemory = ref(0)
|
||||
let loadPercentage = ref(0)
|
||||
let diskPercentage = ref(0)
|
||||
let usedSpace = ref(0)
|
||||
let totalSpace = ref(0)
|
||||
let bootTime = ref()
|
||||
let upTime = ref()
|
||||
let systemLoad = ref([0, 0, 0])
|
||||
let site = props.site
|
||||
let lastOnline = Util.formatDate(site.lastOnline)
|
||||
let ioRead = ref("0B/s")
|
||||
let ioWrite = ref("0B/s")
|
||||
let networkReceive = ref("0B/s")
|
||||
let networkSend = ref("0B/s")
|
||||
watch(props, () => {
|
||||
let status = props.status
|
||||
if(status !== null && status !== undefined) {
|
||||
cpuPercentage.value = status.usedCpuPercentage
|
||||
memoryPercentage.value = status.usedMemoryPercentage
|
||||
usedMemory.value = Util.formatSize(status.usedMemory)
|
||||
totalMemory.value = Util.formatSize(status.totalMemory)
|
||||
diskPercentage.value = status.usedSpacePercentage
|
||||
usedSpace.value = Util.formatSize(status.usedSpace)
|
||||
totalSpace.value = Util.formatSize(status.totalSpace)
|
||||
bootTime.value = new Date(status.systemBootTime * 1000).toLocaleString('zh-CN')
|
||||
upTime.value = Util.formatDuration(status.systemUpTime)
|
||||
systemLoad.value = status.systemLoad
|
||||
ioRead.value = Util.formatSize(status.ioRead) + "/s"
|
||||
ioWrite.value = Util.formatSize(status.ioWrite) + "/s"
|
||||
networkReceive.value = Util.formatSize(status.networkReceive) + "/s"
|
||||
networkSend.value = Util.formatSize(status.networkSend) + "/s"
|
||||
|
||||
if (systemLoad.value[0] !== -1)
|
||||
for (let i = 0; i < 3; i++)
|
||||
systemLoad.value[i] = Number(systemLoad.value[i]).toFixed(2)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if(site.online)
|
||||
headerStyle.value['--color'] = 'green'
|
||||
else
|
||||
headerStyle.value['--color'] = 'gray'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card :header-color="site.online?'green':'gray'" class="home-card">
|
||||
<div class="header">
|
||||
<span :style="headerStyle">{{`${site.id}:${site.hostname}`}}</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="12" style="text-align: center">
|
||||
<el-progress type="dashboard" :percentage="cpuPercentage" :color="Util.colors" style="text-align: center">
|
||||
<template #default>
|
||||
{{cpuPercentage}}% <br>
|
||||
CPU
|
||||
</template>
|
||||
</el-progress>
|
||||
<span style="text-align: center; display: block">{{(cpuPercentage * site.cpuCore * 0.01).toFixed(2)}} / {{site.cpuCore}}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: center">
|
||||
<el-progress type="dashboard" :percentage="memoryPercentage" :color="Util.colors">
|
||||
<template #default>
|
||||
{{memoryPercentage}}% <br>
|
||||
内存
|
||||
</template>
|
||||
</el-progress>
|
||||
<span style="text-align: center; display: block">{{usedMemory}}/{{totalMemory}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 10px">
|
||||
<el-col :span="12" style="text-align: center">
|
||||
<el-progress type="dashboard" :percentage="loadPercentage" :color="Util.colors">
|
||||
<template #default>
|
||||
{{loadPercentage}}% <br>
|
||||
负载
|
||||
</template>
|
||||
</el-progress>
|
||||
<span style="text-align: center; display: block">{{systemLoad[0]}}/{{systemLoad[1]}}/{{systemLoad[2]}}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: center;">
|
||||
<el-progress type="dashboard" :percentage="diskPercentage" :color="Util.colors">
|
||||
<template #default>
|
||||
{{diskPercentage}}% <br>
|
||||
硬盘
|
||||
</template>
|
||||
</el-progress>
|
||||
<span style="text-align: center; display: block">{{usedSpace}}/{{totalSpace}}</span>
|
||||
</el-col>
|
||||
<el-col>
|
||||
IP地址:{{site.ip}}<br>
|
||||
系统:<minimize-str :str="site.system" :length="25"/>
|
||||
<br>
|
||||
主机名:{{site.hostname}}<br>
|
||||
处理器架构:{{site.cpuArch}}<br>
|
||||
处理器名称:<minimize-str :str="site.cpuName" :length="25"/><br>
|
||||
处理器核心数:{{site.cpuCore}}<br>
|
||||
处理器线程数:{{site.cpuThread}}<br>
|
||||
<div v-if="site.online">
|
||||
运行时间:{{upTime}}<br>
|
||||
开机时间:{{bootTime}}<br>
|
||||
磁盘读写:{{ioRead + " " + ioWrite}}<br>
|
||||
网络收发:{{networkReceive + " " + networkSend}}<br>
|
||||
</div>
|
||||
<div v-else>
|
||||
最后上线时间:{{lastOnline}}<br>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header > span {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.header > span::before {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -13px;
|
||||
width: 4px;
|
||||
height: 14px;
|
||||
content: '';
|
||||
background: var(--color);
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -52,10 +52,6 @@ function logout(){
|
||||
<el-dialog v-model="isPair" title="配对请求">
|
||||
ip地址:{{pairMessage.ip}}<br>
|
||||
主机名:{{pairMessage.hostname}}<br>
|
||||
系统版本:{{pairMessage.system}}<br>
|
||||
cpu架构:{{pairMessage.cpuArch}}<br>
|
||||
cpu核心数:{{pairMessage.cpuCore}}<br>
|
||||
cpu线程数:{{pairMessage.cpuThread}}<br>
|
||||
反代前缀:{{pairMessage.reverseProxyPrefix === null ? '无': pairMessage.reverseProxyPrefix}}<br>
|
||||
域名:{{pairMessage.domain === null? '无': pairMessage.domain}}<br>
|
||||
可用空间:{{Util.formatSize(pairMessage.availableSpace)}}<br>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
|
||||
import status from '../views/status/index.vue'
|
||||
import fileManage from '../views/file-manage/index.vue'
|
||||
import taskManage from '../views/task-manage/index.vue'
|
||||
import siteManage from '../views/site-manage/index.vue'
|
||||
@ -21,10 +20,6 @@ const routes = [
|
||||
path: '/index',
|
||||
component: index,
|
||||
children: [
|
||||
{
|
||||
path: 'status',
|
||||
component : status
|
||||
},
|
||||
{
|
||||
path: 'fileManage',
|
||||
component : fileManage
|
||||
|
||||
@ -16,10 +16,6 @@ const actions = {
|
||||
|
||||
if(message.type !== undefined) {
|
||||
switch (message.type){
|
||||
case 'status':
|
||||
delete message.type
|
||||
context.commit("updateStatues", message)
|
||||
break
|
||||
case 'pair':
|
||||
context.commit("updatePairMessage", message.data)
|
||||
break
|
||||
@ -235,22 +231,6 @@ const getters = {
|
||||
getSites(state){
|
||||
return state.sites
|
||||
},
|
||||
getOnlineSites(state){
|
||||
let sites = []
|
||||
state.sites.forEach((site) => {
|
||||
if(site.online)
|
||||
sites.push(site)
|
||||
})
|
||||
return sites
|
||||
},
|
||||
getOfflineSites(state){
|
||||
let sites = []
|
||||
state.sites.forEach((site) => {
|
||||
if(!site.online)
|
||||
sites.push(site)
|
||||
})
|
||||
return sites
|
||||
},
|
||||
getTasks(state){
|
||||
return state.tasks
|
||||
},
|
||||
|
||||
@ -14,8 +14,8 @@ import adjustShare from '../../components/adjust-share/index.vue'
|
||||
import importFile from '../../components/import-file/index.vue'
|
||||
|
||||
let router = useRouter()
|
||||
let onlineSites = computed(() => {
|
||||
return store.getters.getOnlineSites
|
||||
let sites = computed(() => {
|
||||
return store.getters.getSites
|
||||
})
|
||||
let files = computed(() => {
|
||||
return store.getters.getFiles
|
||||
@ -95,7 +95,7 @@ function loadFilesByCursor(){
|
||||
}
|
||||
function getSiteBySiteId(id){
|
||||
let getSite
|
||||
onlineSites.value.forEach((site) => {
|
||||
sites.value.forEach((site) => {
|
||||
if(site.id === id)
|
||||
getSite = site
|
||||
})
|
||||
@ -393,8 +393,8 @@ function initFileCursor(path){
|
||||
cursor.value.push(path)
|
||||
}
|
||||
function loadDefaultFiles() {
|
||||
router.push(`/index/fileManage/?path=${onlineSites.value[0].id}:`)
|
||||
currentSiteId.value = onlineSites.value[0].id
|
||||
router.push(`/index/fileManage/?path=${sites.value[0].id}:`)
|
||||
currentSiteId.value = sites.value[0].id
|
||||
loadFilesByCursor()
|
||||
}
|
||||
function refresh(){
|
||||
@ -412,8 +412,8 @@ function refresh(){
|
||||
watch(router.currentRoute, (now, old) =>{
|
||||
if(now.path !== old.path && now.path === '/index/fileManage') {
|
||||
if (now.query.path === undefined) {
|
||||
router.replace(`/index/fileManage/?path=${onlineSites.value[0].id}:`)
|
||||
initFileCursor(`${onlineSites.value[0].id}:`)
|
||||
router.replace(`/index/fileManage/?path=${sites.value[0].id}:`)
|
||||
initFileCursor(`${sites.value[0].id}:`)
|
||||
} else
|
||||
initFileCursor(now.query.path)
|
||||
|
||||
@ -425,7 +425,7 @@ watch(router.currentRoute, (now, old) =>{
|
||||
<template>
|
||||
<div>
|
||||
<el-menu mode="horizontal" :default-active="currentSiteId + ''">
|
||||
<el-menu-item v-for="site in onlineSites" :index="site.id" @click="switchSite(site.id)">
|
||||
<el-menu-item v-for="site in sites" :index="site.id" @click="switchSite(site.id)">
|
||||
{{site.hostname}}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
@ -11,8 +11,8 @@ import ViewDownloadRecord from '../../components/view-download-record/index.vue'
|
||||
import MinimizeStr from '../../components/minimize-str/index.vue'
|
||||
|
||||
let router = useRouter()
|
||||
let onlineSites = computed(() => {
|
||||
return store.getters.getOnlineSites
|
||||
let sites = computed(() => {
|
||||
return store.getters.getSites
|
||||
})
|
||||
let currentSiteId = ref()
|
||||
let shareFiles = ref([])
|
||||
@ -24,7 +24,7 @@ let currentFile = ref()
|
||||
|
||||
function getSiteBySiteId(id){
|
||||
let getSite
|
||||
onlineSites.value.forEach((site) => {
|
||||
sites.value.forEach((site) => {
|
||||
if(site.id === id)
|
||||
getSite = site
|
||||
})
|
||||
@ -93,15 +93,15 @@ function cancelShare(shareCode){
|
||||
watch(router.currentRoute, (old, now)=>{
|
||||
if(old.path !== now.path && now.path === '/index/shareManage/')
|
||||
if(now.query.id === undefined) {
|
||||
router.replace(`/index/shareManage/?id=${onlineSites.value[0].id}`)
|
||||
currentSiteId.value = onlineSites.value[0].id
|
||||
router.replace(`/index/shareManage/?id=${sites.value[0].id}`)
|
||||
currentSiteId.value = sites.value[0].id
|
||||
loadShareFiles()
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
if(router.currentRoute.value.query.id === undefined) {
|
||||
router.replace(`/index/shareManage/?id=${onlineSites.value[0].id}`)
|
||||
currentSiteId.value = onlineSites.value[0].id
|
||||
router.replace(`/index/shareManage/?id=${sites.value[0].id}`)
|
||||
currentSiteId.value = sites.value[0].id
|
||||
}else
|
||||
currentSiteId.value = Number(router.currentRoute.value.query.id)
|
||||
loadShareFiles()
|
||||
@ -110,7 +110,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<el-menu mode="horizontal" :default-active="currentSiteId">
|
||||
<el-menu-item v-for="site in onlineSites" :index="site.id" @click="switchSite(site.id)" >
|
||||
<el-menu-item v-for="site in sites" :index="site.id" @click="switchSite(site.id)" >
|
||||
{{site.hostname}}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import {Close, Files, House, PieChart, Share, Tools, User} from "@element-plus/icons-vue";
|
||||
import {Close, Files, PieChart, Share, Tools, User} from "@element-plus/icons-vue";
|
||||
import store from "../store/index.js";
|
||||
import {useRouter} from 'vue-router'
|
||||
import everyUser from "@icon-park/vue-next/lib/icons/EveryUser.js";
|
||||
@ -37,13 +37,6 @@ function alterPasscode(){
|
||||
|
||||
<template>
|
||||
<el-menu :default-active="$router.currentRoute.value.path" router>
|
||||
<el-menu-item index="/index/status/">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<House/>
|
||||
</el-icon>服务器概览
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/index/fileManage/">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
|
||||
@ -143,11 +143,12 @@ function delayTestByIp(ip){
|
||||
.then((res) => {
|
||||
isDelayTesting.value = false
|
||||
if(res.data.result === 'success') {
|
||||
let data = JSON.parse(res.data.data)
|
||||
delayChartData.value = {
|
||||
labels: ["1", "2", "3", "4", "5", "平均"],
|
||||
labels: ["1", "2", "3", "4", "5"],
|
||||
datasets: [{
|
||||
label: "延迟测试结果",
|
||||
data: JSON.parse(res.data.data),
|
||||
label: "延迟测试结果 单位:ms 平均延迟:" + data[5] + "ms",
|
||||
data,
|
||||
fill: false,
|
||||
borderColor: "rgb(75, 192, 192)",
|
||||
lineTension: 0.1
|
||||
|
||||
@ -1,106 +0,0 @@
|
||||
<script setup>
|
||||
import SiteStatusCard from '../../components/site-statue-card/index.vue'
|
||||
import {computed, onMounted, ref, watch} from "vue";
|
||||
import store from "../../store/index.js";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
let route = useRouter()
|
||||
|
||||
let currentType = ref("all")
|
||||
let statues = ref({})
|
||||
let allSites = computed(() => {
|
||||
return store.state.sites
|
||||
})
|
||||
let onlineSites = computed(() => {
|
||||
return store.getters.getOnlineSites
|
||||
})
|
||||
let offlineSites = computed(() => {
|
||||
return store.getters.getOfflineSites
|
||||
})
|
||||
let currentSites = ref([])
|
||||
let menu = ref()
|
||||
|
||||
function switchType(type){
|
||||
currentType.value = type
|
||||
}
|
||||
function refreshType(){
|
||||
let query = JSON.parse(JSON.stringify(route.currentRoute.value.query))
|
||||
query.type = currentType.value
|
||||
route.push({path: route.currentRoute.value.path, query})
|
||||
switch (currentType.value) {
|
||||
case "all":
|
||||
currentSites.value = allSites.value
|
||||
break
|
||||
case "online":
|
||||
currentSites.value = onlineSites.value
|
||||
break
|
||||
case "offline":
|
||||
currentSites.value = offlineSites.value
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
watch(store.getters.getStatues, () => {
|
||||
statues.value = store.getters.getStatues
|
||||
})
|
||||
watch(currentType, () => {
|
||||
refreshType()
|
||||
})
|
||||
watch(allSites, () => {
|
||||
refreshType()
|
||||
})
|
||||
watch(route.currentRoute, () => {
|
||||
if(route.currentRoute.value.path.startsWith("/index/status/")){
|
||||
if(route.currentRoute.value.query.type === undefined) {
|
||||
currentType.value = 'all'
|
||||
|
||||
} else if(route.currentRoute.value.query.type !== 'all' &&
|
||||
route.currentRoute.value.query.type !== 'online' &&
|
||||
route.currentRoute.value.query.type !== 'offline') {
|
||||
currentType.value = 'all'
|
||||
} else
|
||||
currentType.value = route.currentRoute.value.query.type
|
||||
|
||||
refreshType()
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if(route.currentRoute.value.path.startsWith("/index/status/")){
|
||||
if(route.currentRoute.value.query.type === undefined) {
|
||||
currentType.value = 'all'
|
||||
} else if(route.currentRoute.value.query.type !== 'all' &&
|
||||
route.currentRoute.value.query.type !== 'online' &&
|
||||
route.currentRoute.value.query.type !== 'offline') {
|
||||
currentType.value = 'all'
|
||||
} else
|
||||
currentType.value = route.currentRoute.value.query.type
|
||||
refreshType()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-menu mode="horizontal" :default-active="currentType" ref="menu" v-if="store.state.config.isAdmin">
|
||||
<el-menu-item index="all" @click="switchType('all')">全部服务器</el-menu-item>
|
||||
<el-menu-item index="online" @click="switchType('online')">在线服务器</el-menu-item>
|
||||
<el-menu-item index="offline" @click="switchType('offline')">离线服务器</el-menu-item>
|
||||
</el-menu>
|
||||
<el-menu mode="horizontal" default-active="all" router ref="menu" v-else>
|
||||
<el-menu-item index="all">当前服务器</el-menu-item>
|
||||
</el-menu>
|
||||
<el-row>
|
||||
<el-col :span="7" v-for="site in currentSites" :key="site.id">
|
||||
<site-status-card :status="statues[site.id]" :site="site"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user