Skip to content

Commit

Permalink
fix: 优化概览页磁盘显示 (1Panel-dev#7023)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssongliu
ssongliu authored Nov 13, 2024
1 parent 67c1fbd commit d065837
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 43 deletions.
1 change: 1 addition & 0 deletions frontend/src/lang/modules/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const message = {
true: 'true',
false: 'false',
example: 'e.g.:',
fit2cloud: 'FIT2CLOUD',
button: {
create: 'Create ',
add: 'Add ',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lang/modules/tw.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const message = {
true: '是',
false: '否',
example: '例：',
fit2cloud: '飛致雲',
button: {
create: '創建',
add: '添加',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lang/modules/zh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const message = {
true: '是',
false: '否',
example: '例：',
fit2cloud: '飞致云',
button: {
create: '创建',
add: '添加',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/layout/components/AppFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="footer" :style="{ height: mobile ? '108px' : '48px' }">
<div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
<div class="flex flex-wrap gap-4">
<a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2024 飞致云</a>
<a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2024 {{ $t('commons.fit2cloud') }}</a>
</div>
<div class="flex flex-row gap-2 md:flex-col lg:flex-row">
<SystemUpgrade :footer="true" />
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/views/home/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,6 @@ const isSafety = ref();
const chartOption = ref('network');
let timer: NodeJS.Timer | null = null;
let isInit = ref<boolean>(true);
let isStatusInit = ref<boolean>(true);
let isActive = ref(true);
const ioReadBytes = ref<Array<number>>([]);
Expand Down Expand Up @@ -429,8 +428,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
currentInfo.value.uptime = resData.uptime;
loadAppCurrentInfo();
isStatusInit.value = false;
statusRef.value.acceptParams(currentInfo.value, baseInfo.value, isStatusInit.value);
statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
appRef.value.acceptParams();
if (isInit) {
timer = setInterval(async () => {
Expand All @@ -443,7 +441,7 @@ const onLoadBaseInfo = async (isInit: boolean, range: string) => {
const loadAppCurrentInfo = async () => {
await Promise.all([onLoadCurrentInfo('gpu'), onLoadCurrentInfo('basic'), onLoadCurrentInfo('ioNet')]);
statusRef.value.acceptParams(currentInfo.value, baseInfo.value, isStatusInit.value);
statusRef.value.acceptParams(currentInfo.value, baseInfo.value);
};
const onLoadCurrentInfo = async (scope: string) => {
Expand Down
75 changes: 37 additions & 38 deletions frontend/src/views/home/status/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
<span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
</el-col>
<template v-for="(item, index) of currentInfo.diskData" :key="index">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="showMore || index < 4">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
<el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
<el-row :gutter="5">
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
Expand Down Expand Up @@ -165,15 +165,7 @@
</el-col>
</template>
<template v-for="(item, index) of currentInfo.gpuData" :key="index">
<el-col
:xs="12"
:sm="12"
:md="6"
:lg="6"
:xl="6"
align="center"
v-if="showMore || index < 4 - currentInfo.diskData.length"
>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
<el-row :gutter="5">
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
Expand Down Expand Up @@ -218,16 +210,8 @@
</el-col>
</template>
<template v-for="(item, index) of currentInfo.xpuData" :key="index">
<el-col
:xs="12"
:sm="12"
:md="6"
:lg="6"
:xl="6"
align="center"
v-if="showMore || index < 4 - currentInfo.diskData.length"
>
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
<el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
<el-row :gutter="5">
<el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
</el-row>
Expand All @@ -249,10 +233,10 @@
<v-charts
@click="goGPU()"
height="160px"
:id="`gpu${index}`"
:id="`xpu${index}`"
type="pie"
:option="chartsOption[`gpu${index}`]"
v-if="chartsOption[`gpu${index}`]"
:option="chartsOption[`xpu${index}`]"
v-if="chartsOption[`xpu${index}`]"
/>
</template>
</el-popover>
Expand All @@ -262,18 +246,12 @@
<span class="input-help" v-else>{{ item.deviceName }}</span>
</el-col>
</template>
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
<el-button v-if="!showMore" link type="primary" @click="showMore = true" class="buttonClass">
<el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
<el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="buttonClass">
{{ $t('tabs.more') }}
<el-icon><Bottom /></el-icon>
</el-button>
<el-button
v-if="showMore && currentInfo.diskData.length > 5"
type="primary"
link
@click="showMore = false"
class="buttonClass"
>
<el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="buttonClass">
{{ $t('tabs.hide') }}
<el-icon><Top /></el-icon>
</el-button>
Expand All @@ -288,6 +266,7 @@ import router from '@/routers';
import i18n from '@/lang';
import { nextTick, ref } from 'vue';
const showMore = ref(false);
const totalCount = ref();
const baseInfo = ref<Dashboard.BaseInfo>({
websiteNumber: 0,
Expand Down Expand Up @@ -355,7 +334,7 @@ const cpuShowAll = ref();
const chartsOption = ref({ cpu: null, memory: null, load: null });
const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo, isInit: boolean): void => {
const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo): void => {
currentInfo.value = current;
baseInfo.value = base;
chartsOption.value['cpu'] = {
Expand Down Expand Up @@ -389,14 +368,15 @@ const acceptParams = (current: Dashboard.CurrentInfo, base: Dashboard.BaseInfo,
}
currentInfo.value.xpuData = currentInfo.value.xpuData || [];
for (let i = 0; i < currentInfo.value.xpuData.length; i++) {
chartsOption.value['gpu' + i] = {
title: 'GPU-' + currentInfo.value.xpuData[i].deviceID,
chartsOption.value['xpu' + i] = {
title: 'XPU-' + currentInfo.value.xpuData[i].deviceID,
data: formatNumber(Number(currentInfo.value.xpuData[i].memoryUtil.replaceAll('%', ''))),
};
}
if (currentInfo.value.diskData.length + currentInfo.value.gpuData.length > 5) {
showMore.value = isInit ? false : showMore.value || false;
}
totalCount.value =
currentInfo.value.diskData.length + currentInfo.value.gpuData.length + currentInfo.value.xpuData.length;
showMore.value = localStorage.getItem('dashboard_show') === 'more';
});
};
Expand All @@ -413,10 +393,29 @@ function loadStatus(val: number) {
return i18n.global.t('home.runJam');
}
const isShow = (val: string, index: number) => {
let showCount = totalCount.value < 6 ? 5 : 4;
switch (val) {
case 'disk':
return showMore.value || index < showCount;
case 'gpu':
let gpuCount = showCount - currentInfo.value.diskData.length;
return showMore.value || index < gpuCount;
case 'xpu':
let xpuCount = showCount - currentInfo.value.diskData.length - currentInfo.value.gpuData.length;
return showMore.value || index < xpuCount;
}
};
const goGPU = () => {
router.push({ name: 'GPU' });
};
const changeShowMore = (show: boolean) => {
showMore.value = show;
localStorage.setItem('dashboard_show', show ? 'more' : 'hide');
};
const loadWidth = () => {
if (!cpuShowAll.value || currentInfo.value.cpuPercent.length < 32) {
return 310;
Expand Down

0 comments on commit d065837

Please sign in to comment.