去除状态面板,部分代码调整

This commit is contained in:
chuzhongzai 2024-08-18 19:45:42 +08:00
parent 126ecb52e3
commit a7fe6c3772
10 changed files with 25 additions and 309 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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
},

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -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>