mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-17 03:04:46 +08:00
parent
1dc2b292ec
commit
a5c0e41bda
@ -1,42 +1,39 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-popover placement="bottom-start" :width="200" trigger="click">
|
<el-popover placement="bottom-start" :width="240" trigger="click">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-button round class="timer-button">{{ $t('commons.table.tableSetting') }}</el-button>
|
<el-button round class="timer-button">{{ $t('commons.table.tableSetting') }}</el-button>
|
||||||
</template>
|
</template>
|
||||||
<div style="margin-left: 15px">
|
<div style="margin-left: 15px">
|
||||||
<div>
|
<span>{{ $t('commons.table.refreshRate') }}</span>
|
||||||
<span>{{ $t('commons.table.autoRefresh') }}</span>
|
<el-select style="margin-left: 5px; width: 120px" v-model="refreshRate" @change="changeRefresh">
|
||||||
<el-switch style="margin-left: 5px" v-model="autoRefresh" @change="changeRefresh"></el-switch>
|
<el-option :label="$t('commons.table.noRefresh')" :value="0"></el-option>
|
||||||
</div>
|
<el-option :label="$t('commons.table.refreshRateUnit', [5])" :value="5"></el-option>
|
||||||
<div>
|
<el-option :label="$t('commons.table.refreshRateUnit', [10])" :value="10"></el-option>
|
||||||
<span>{{ $t('commons.table.refreshRate') }}</span>
|
<el-option :label="$t('commons.table.refreshRateUnit', [30])" :value="30"></el-option>
|
||||||
<el-select style="margin-left: 5px; width: 80px" v-model="refreshRate" @change="changeRefresh">
|
<el-option :label="$t('commons.table.refreshRateUnit', [60])" :value="60"></el-option>
|
||||||
<el-option label="5s" :value="5"></el-option>
|
<el-option :label="$t('commons.table.refreshRateUnit', [120])" :value="120"></el-option>
|
||||||
<el-option label="10s" :value="10"></el-option>
|
<el-option :label="$t('commons.table.refreshRateUnit', [300])" :value="300"></el-option>
|
||||||
<el-option label="30s" :value="30"></el-option>
|
</el-select>
|
||||||
<el-option label="1min" :value="60"></el-option>
|
|
||||||
<el-option label="2min" :value="120"></el-option>
|
|
||||||
<el-option label="5min" :value="300"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onUnmounted, ref } from 'vue';
|
import { onMounted, onUnmounted, ref } from 'vue';
|
||||||
defineOptions({ name: 'TableSetting' });
|
defineOptions({ name: 'TableSetting' });
|
||||||
|
|
||||||
const autoRefresh = ref<boolean>(false);
|
const refreshRate = ref<number>(0);
|
||||||
const refreshRate = ref<number>(10);
|
|
||||||
const emit = defineEmits(['search']);
|
const emit = defineEmits(['search']);
|
||||||
|
const props = defineProps({
|
||||||
|
title: String,
|
||||||
|
});
|
||||||
|
|
||||||
let timer: NodeJS.Timer | null = null;
|
let timer: NodeJS.Timer | null = null;
|
||||||
|
|
||||||
const changeRefresh = () => {
|
const changeRefresh = () => {
|
||||||
if (autoRefresh.value) {
|
if (refreshRate.value !== 0) {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearInterval(Number(timer));
|
clearInterval(Number(timer));
|
||||||
timer = null;
|
timer = null;
|
||||||
@ -52,23 +49,20 @@ const changeRefresh = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const startTimer = () => {
|
|
||||||
autoRefresh.value = true;
|
|
||||||
changeRefresh();
|
|
||||||
};
|
|
||||||
const endTimer = () => {
|
|
||||||
autoRefresh.value = false;
|
|
||||||
changeRefresh();
|
|
||||||
};
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearInterval(Number(timer));
|
clearInterval(Number(timer));
|
||||||
timer = null;
|
timer = null;
|
||||||
|
if (props.title) {
|
||||||
|
localStorage.setItem(props.title, refreshRate.value + '');
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
defineExpose({
|
onMounted(() => {
|
||||||
startTimer,
|
if (props.title) {
|
||||||
endTimer,
|
let rate = Number(localStorage.getItem(props.title));
|
||||||
|
refreshRate.value = rate ? Number(rate) : 0;
|
||||||
|
changeRefresh();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -83,8 +83,9 @@ const message = {
|
|||||||
port: 'Port',
|
port: 'Port',
|
||||||
protocol: 'Protocol',
|
protocol: 'Protocol',
|
||||||
tableSetting: 'Table setting',
|
tableSetting: 'Table setting',
|
||||||
autoRefresh: 'Auto refresh',
|
|
||||||
refreshRate: 'Rate',
|
refreshRate: 'Rate',
|
||||||
|
noRefresh: 'No Refresh',
|
||||||
|
refreshRateUnit: '{0} Seconds/Time',
|
||||||
},
|
},
|
||||||
loadingText: {
|
loadingText: {
|
||||||
Upgrading: 'System upgrade, please wait...',
|
Upgrading: 'System upgrade, please wait...',
|
||||||
|
@ -83,8 +83,9 @@ const message = {
|
|||||||
port: '端口',
|
port: '端口',
|
||||||
protocol: '協議',
|
protocol: '協議',
|
||||||
tableSetting: '列表設置',
|
tableSetting: '列表設置',
|
||||||
autoRefresh: '定時刷新',
|
|
||||||
refreshRate: '刷新頻率',
|
refreshRate: '刷新頻率',
|
||||||
|
noRefresh: '不刷新',
|
||||||
|
refreshRateUnit: '{0} 秒/次',
|
||||||
},
|
},
|
||||||
loadingText: {
|
loadingText: {
|
||||||
Upgrading: '系統升級中,請稍候...',
|
Upgrading: '系統升級中,請稍候...',
|
||||||
|
@ -83,8 +83,9 @@ const message = {
|
|||||||
port: '端口',
|
port: '端口',
|
||||||
protocol: '协议',
|
protocol: '协议',
|
||||||
tableSetting: '列表设置',
|
tableSetting: '列表设置',
|
||||||
autoRefresh: '定时刷新',
|
|
||||||
refreshRate: '刷新频率',
|
refreshRate: '刷新频率',
|
||||||
|
noRefresh: '不刷新',
|
||||||
|
refreshRateUnit: '{0} 秒/次',
|
||||||
},
|
},
|
||||||
loadingText: {
|
loadingText: {
|
||||||
Upgrading: '系统升级中,请稍候...',
|
Upgrading: '系统升级中,请稍候...',
|
||||||
|
@ -40,7 +40,7 @@
|
|||||||
</el-button-group>
|
</el-button-group>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
|
||||||
<TableSetting @search="search()" />
|
<TableSetting title="container-refresh" @search="refresh()" />
|
||||||
<div class="search-button">
|
<div class="search-button">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="searchName"
|
v-model="searchName"
|
||||||
@ -379,6 +379,34 @@ const search = async (column?: any) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const refresh = async () => {
|
||||||
|
let filterItem = props.filters ? props.filters : '';
|
||||||
|
let params = {
|
||||||
|
name: searchName.value,
|
||||||
|
state: searchState.value || 'all',
|
||||||
|
page: paginationConfig.currentPage,
|
||||||
|
pageSize: paginationConfig.pageSize,
|
||||||
|
filters: filterItem,
|
||||||
|
orderBy: paginationConfig.orderBy,
|
||||||
|
order: paginationConfig.order,
|
||||||
|
};
|
||||||
|
loadStats();
|
||||||
|
const res = await searchContainer(params);
|
||||||
|
let containers = res.data.items || [];
|
||||||
|
for (const container of containers) {
|
||||||
|
for (const c of data.value) {
|
||||||
|
c.hasLoad = true;
|
||||||
|
if (container.containerID == c.containerID) {
|
||||||
|
for (let key in container) {
|
||||||
|
if (key !== 'cpuPercent' && key !== 'memoryPercent') {
|
||||||
|
c[key] = container[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const loadStats = async () => {
|
const loadStats = async () => {
|
||||||
const res = await containerListStats();
|
const res = await containerListStats();
|
||||||
let stats = res.data || [];
|
let stats = res.data || [];
|
||||||
|
Loading…
x
Reference in New Issue
Block a user